// Root app — assembles the landing + Tweaks panel
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#7c3aed",
  "heroTitle": "Tú escoges la categoría. <span class=\"pl-accent-grad\">Las citas llegan solas.</span>",
  "heroSubtitle": "",
  "density": "regular",
  "showLaunchBar": true
}/*EDITMODE-END*/;

const ACCENT_PRESETS = [
  '#7c3aed', // original purple
  '#5b21b6', // deep purple
  '#2563eb', // electric blue
  '#0ea5e9', // sky
  '#10b981', // green
  '#ea580c', // orange punch
];

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);

  // Apply tweaks via CSS vars
  React.useEffect(() => {
    const r = document.documentElement;
    r.style.setProperty('--pl-accent', t.accent);
    // derive shades from accent? Keep simple: just override accent + bright + deep proportionally
    r.style.setProperty('--pl-accent-bright', shade(t.accent, 0.15));
    r.style.setProperty('--pl-accent-deep', shade(t.accent, -0.3));

    const density = t.density === 'compact' ? 0.7 : t.density === 'comfy' ? 1.15 : 1;
    r.style.setProperty('--pl-density', String(density));
  }, [t.accent, t.density]);

  return (
    <>
      {t.showLaunchBar && <LaunchBar />}
      <Header />
      <main>
        <Hero
          heroTitle={t.heroTitle}
          heroSubtitle={t.heroSubtitle}
        />
        <SocialStrip />
        <Problem />
        <HowItWorks />
        <BeforeAfter />
        <Rotador />
        <AppWalkthrough />
        <WebsitesGrid />
        <FounderVideo />
        <Testimonials />
        <RoiCalculator />
        <Pricing />
        <FAQ />
        <FinalCTA />
      </main>
      <Footer />
      <SupportChat />

      <TweaksPanel>
        <TweakSection label="Apariencia" />
        <TweakColor
          label="Color de marca"
          value={t.accent}
          options={ACCENT_PRESETS}
          onChange={(v) => setTweak('accent', v)}
        />
        <TweakRadio
          label="Densidad"
          value={t.density}
          options={['compact', 'regular', 'comfy']}
          onChange={(v) => setTweak('density', v)}
        />
        <TweakToggle
          label="Barra de lanzamiento"
          value={t.showLaunchBar}
          onChange={(v) => setTweak('showLaunchBar', v)}
        />

        <TweakSection label="Hero" />
        <TweakText
          label="Titular (acepta HTML)"
          value={t.heroTitle}
          onChange={(v) => setTweak('heroTitle', v)}
        />
        <TweakText
          label="Subtítulo (vacío = por defecto)"
          value={t.heroSubtitle}
          placeholder="Deja vacío para el texto por defecto"
          onChange={(v) => setTweak('heroSubtitle', v)}
        />
        <TweakButton label="Restaurar hero original" onClick={() => {
          setTweak({
            heroTitle: TWEAK_DEFAULTS.heroTitle,
            heroSubtitle: TWEAK_DEFAULTS.heroSubtitle,
          });
        }} />
      </TweaksPanel>
    </>
  );
}

// Quick HSL shader for the accent
function shade(hex, amount) {
  const c = hex.replace('#', '');
  const r = parseInt(c.slice(0,2), 16);
  const g = parseInt(c.slice(2,4), 16);
  const b = parseInt(c.slice(4,6), 16);
  const adj = (v) => {
    if (amount >= 0) return Math.min(255, Math.round(v + (255 - v) * amount));
    return Math.max(0, Math.round(v * (1 + amount)));
  };
  return '#' + [adj(r), adj(g), adj(b)].map(x => x.toString(16).padStart(2, '0')).join('');
}

ReactDOM.createRoot(document.getElementById('root')).render(<App />);