// Main app — assembles everything + scroll spy + reveal animations + tweaks

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "gold",
  "density": "default",
  "typeface": "fraunces",
  "heroVariant": "video"
}/*EDITMODE-END*/;

const ACCENTS = {
  gold:    { color: "#C9A84C", ink: "#1B2A4A", label: "Dourado" },
  emerald: { color: "#3F8F6E", ink: "#FFFFFF", label: "Esmeralda" },
  coral:   { color: "#D9633A", ink: "#FFFFFF", label: "Coral" },
  azure:   { color: "#3B6BD9", ink: "#FFFFFF", label: "Azul" },
  graphite:{ color: "#1B2A4A", ink: "#FFFFFF", label: "Grafite" },
};

const TYPEFACES = {
  fraunces: { serif: "'Fraunces', Times, serif", label: "Fraunces" },
  manrope:  { serif: "'Manrope', system-ui, sans-serif", label: "Sem-serifa" },
  playfair: { serif: "'Fraunces', Times, serif", label: "Editorial" },
};

const App = () => {
  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [activeSection, setActiveSection] = useState("top");
  const [toast, setToast] = useState(null);

  // apply CSS variables from tweaks
  useEffect(() => {
    const root = document.documentElement;
    const a = ACCENTS[tweaks.accent] || ACCENTS.gold;
    root.style.setProperty("--accent", a.color);
    root.style.setProperty("--accent-ink", a.ink);
    document.body.dataset.density = tweaks.density;
    const t = TYPEFACES[tweaks.typeface] || TYPEFACES.fraunces;
    root.style.setProperty("--serif", t.serif);
  }, [tweaks]);

  // Reveal on scroll
  useEffect(() => {
    const apply = () => {
      const els = document.querySelectorAll(".reveal:not(.in)");
      els.forEach(el => {
        const r = el.getBoundingClientRect();
        if (r.top < window.innerHeight - 40 && r.bottom > 0) {
          el.classList.add("in");
        }
      });
    };
    // Apply immediately for above-the-fold content
    apply();
    requestAnimationFrame(apply);
    setTimeout(apply, 100);
    window.addEventListener("scroll", apply, { passive: true });
    window.addEventListener("resize", apply);
    return () => {
      window.removeEventListener("scroll", apply);
      window.removeEventListener("resize", apply);
    };
  }, []);

  // Scroll spy
  useEffect(() => {
    const ids = ["top", "mentoria", "produtos", "impacto", "parceiros", "checklist"];
    const sections = ids.map(id => document.getElementById(id)).filter(Boolean);
    const onScroll = () => {
      const y = window.scrollY + 140;
      let current = "top";
      for (const s of sections) {
        if (s.offsetTop <= y) current = s.id;
      }
      setActiveSection(current);
    };
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  const showToast = (msg) => {
    setToast(msg);
    setTimeout(() => setToast(null), 3500);
  };

  return (
    <>
      <Header activeSection={activeSection}/>
      <main>
        <Hero heroVariant={tweaks.heroVariant}/>
        <Mentoria/>
        <Timeline/>
        <Produtos/>
        <ParaQuemE/>
        <Impacto/>
        <Parceiros/>
        <Testimonials/>
        <VideoProvas/>
        <LeadMagnet onSuccess={() => showToast("Checklist a caminho do seu email")}/>
      </main>
      <Footer/>
      <FloatingWA/>
      <CookieBanner/>
      <Toast message={toast} show={!!toast}/>

      <TweaksPanel title="Tweaks">
        <TweakSection label="Aparência">
          <TweakSelect
            label="CTA color"
            value={tweaks.accent}
            onChange={(v) => setTweak("accent", v)}
            options={Object.entries(ACCENTS).map(([k, v]) => ({ value: k, label: v.label }))}
          />
          <TweakSelect
            label="Manchetes"
            value={tweaks.typeface}
            onChange={(v) => setTweak("typeface", v)}
            options={Object.entries(TYPEFACES).map(([k, v]) => ({ value: k, label: v.label }))}
          />
          <TweakRadio
            label="Densidade"
            value={tweaks.density}
            onChange={(v) => setTweak("density", v)}
            options={[
              { value: "compact", label: "Compacto" },
              { value: "default", label: "Padrão" },
              { value: "airy",    label: "Respirável" },
            ]}
          />
        </TweakSection>
        <TweakSection label="Hero">
          <TweakRadio
            label="Mídia"
            value={tweaks.heroVariant}
            onChange={(v) => setTweak("heroVariant", v)}
            options={[
              { value: "video", label: "Vídeo" },
              { value: "photo", label: "Foto" },
            ]}
          />
        </TweakSection>
      </TweaksPanel>
    </>
  );
};

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