// app.jsx — Main App + Tweaks + scroll reveal · v2 familias

const { useState, useEffect, useRef } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "lead": "red",
  "density": "airy",
  "dark": false,
  "heroLayout": "split",
  "showHeader": true
}/*EDITMODE-END*/;

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

  // Reveal on scroll
  useEffect(() => {
    const els = document.querySelectorAll(".reveal");
    if (!("IntersectionObserver" in window)) {
      els.forEach((el) => el.classList.add("is-in"));
      return;
    }
    const io = new IntersectionObserver((entries) => {
      entries.forEach((e) => {
        if (e.isIntersecting) {
          e.target.classList.add("is-in");
          io.unobserve(e.target);
        }
      });
    }, { threshold: 0.1, rootMargin: "0px 0px -80px 0px" });
    els.forEach((el) => io.observe(el));
    return () => io.disconnect();
  }, []);

  useEffect(() => {
    const root = document.documentElement;
    root.setAttribute("data-lead", t.lead);
    root.setAttribute("data-density", t.density);
    root.setAttribute("data-theme", t.dark ? "dark" : "light");
  }, [t.lead, t.density, t.dark]);

  const scrollToForm = () => {
    const el = document.getElementById("formulario");
    if (el) el.scrollIntoView({ behavior: "smooth", block: "start" });
  };

  return (
    <>
      {t.showHeader && <Header onCTA={scrollToForm} />}
      <main>
        <Hero       onCTA={scrollToForm} layout={t.heroLayout} />
        <WhyNow />
        <WhatIs />
        <Learning />
        <WeeklyMethod />
        <WhatBuilds />
        <BeforeAfter />
        <ParentsView />
        <FinalProject />
        <Sprint     onCTA={scrollToForm} />
        <FourWays   onCTA={scrollToForm} />
        <Traction />
        <Closing    />
      </main>
      <Footer />

      <TweaksPanel title="Tweaks">
        <TweakSection label="Marca y tono" />
        <TweakRadio
          label="Color líder"
          value={t.lead}
          options={[
            { value: "red",    label: "Rojo" },
            { value: "orange", label: "Naranja" },
            { value: "ink",    label: "Tinta" },
          ]}
          onChange={(v) => setTweak("lead", v)}
        />
        <TweakToggle
          label="Modo oscuro"
          value={t.dark}
          onChange={(v) => setTweak("dark", v)}
        />

        <TweakSection label="Densidad y layout" />
        <TweakRadio
          label="Densidad"
          value={t.density}
          options={[
            { value: "airy",    label: "Aireado" },
            { value: "compact", label: "Compacto" },
          ]}
          onChange={(v) => setTweak("density", v)}
        />
        <TweakSelect
          label="Layout del hero"
          value={t.heroLayout}
          options={[
            { value: "split", label: "Split (texto + vídeo)" },
            { value: "stack", label: "Stack (vídeo grande debajo)" },
            { value: "bleed", label: "Full-bleed (vídeo de fondo)" },
          ]}
          onChange={(v) => setTweak("heroLayout", v)}
        />
        <TweakToggle
          label="Header sticky"
          value={t.showHeader}
          onChange={(v) => setTweak("showHeader", v)}
        />
      </TweaksPanel>
    </>
  );
}

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