/* ============================================================
   Bootcamp ESUP — App principal + Nav + Tweaks
   ============================================================ */

const ACCENTS = {
  teal:   { accent: "#167180", deep: "#0E5560", soft: "#E4F0F1" },
  navy:   { accent: "#13365f", deep: "#0A1E3A", soft: "#E6ECF4" },
  cyan:   { accent: "#16A9C9", deep: "#0E7E96", soft: "#E1F4F8" },
  orange: { accent: "#E8632A", deep: "#CF531D", soft: "#FBEAE1" },
};

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "direction": "a",
  "accent": "teal"
}/*EDITMODE-END*/;
// Deploy estático: honra data-dir / data-accent definidos no #root para servir
// cada variante em uma URL própria (sem o painel de tweaks).
(function(){
  var r = document.getElementById("root");
  if (!r) return;
  if (r.dataset.dir) TWEAK_DEFAULTS.direction = r.dataset.dir;
  if (r.dataset.accent) TWEAK_DEFAULTS.accent = r.dataset.accent;
})();

function Nav({ onApply }) {
  const [scrolled, setScrolled] = React.useState(false);
  React.useEffect(() => {
    const f = () => setScrolled(window.scrollY > 24);
    f(); window.addEventListener("scroll", f, { passive: true });
    return () => window.removeEventListener("scroll", f);
  }, []);
  return (
    <nav className={"nav" + (scrolled ? " scrolled" : "")}>
      <a href="#topo" aria-label="ESUP"><img className="nav__logo" src="assets/logo-inovaesup.png" alt="InovaESUP" /></a>
      <div className="nav__links">
        <a href="#problema">Por que agir</a>
        <a href="#metodo">Metodologia</a>
        <a href="#modulos">Módulos</a>
        <a href="#paraquem">Para quem</a>
        <a href="#faq">Dúvidas</a>
      </div>
      <div className="nav__cta">
        <span className="nav__pill"><span className="nav__dot"></span>{BOOTCAMP.seatsLeft} vagas</span>
        <button className="btn btn--solid" onClick={onApply}>Candidatar-se</button>
      </div>
    </nav>
  );
}

function useReveal() {
  React.useEffect(() => {
    let ticking = false;
    // hide only below-the-fold reveals so they can animate in on scroll
    const h0 = window.innerHeight;
    document.querySelectorAll(".reveal").forEach((el) => {
      const r = el.getBoundingClientRect();
      if (r.top >= h0 * 0.85) el.setAttribute("data-rv", "hidden");
    });
    const reveal = () => {
      ticking = false;
      const h = window.innerHeight;
      document.querySelectorAll('.reveal[data-rv="hidden"]').forEach((el) => {
        const r = el.getBoundingClientRect();
        if (r.top < h * 0.88 && r.bottom > 0) {
          const sibs = [...el.parentElement.querySelectorAll(":scope > .reveal")];
          const pos = Math.max(0, sibs.indexOf(el));
          el.style.transitionDelay = (pos % 4) * 70 + "ms";
          el.setAttribute("data-rv", "in");
        }
      });
    };
    const onScroll = () => { if (!ticking) { ticking = true; requestAnimationFrame(reveal); } };
    reveal();
    window.addEventListener("scroll", onScroll, { passive: true });
    window.addEventListener("resize", onScroll, { passive: true });
    // safety: never leave content hidden
    const safety = setTimeout(() => document.querySelectorAll('.reveal[data-rv="hidden"]').forEach((el) => {
      const r = el.getBoundingClientRect();
      if (r.top < window.innerHeight) el.setAttribute("data-rv", "in");
    }), 1400);
    return () => { window.removeEventListener("scroll", onScroll); window.removeEventListener("resize", onScroll); clearTimeout(safety); };
  }, []);
}

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

  const goApply = () => {
    const el = document.getElementById("inscricao");
    if (el) window.scrollTo({ top: el.offsetTop - 50, behavior: "smooth" });
  };

  React.useEffect(() => {
    const root = document.getElementById("root");
    root.setAttribute("data-dir", t.direction);
    const a = ACCENTS[t.accent] || ACCENTS.teal;
    root.style.setProperty("--accent", a.accent);
    root.style.setProperty("--accent-deep", a.deep);
    root.style.setProperty("--accent-soft", a.soft);
  }, [t.direction, t.accent]);

  return (
    <React.Fragment>
      <Nav onApply={goApply} />
      <main>
        <Hero onApply={goApply} />
        <Problem />
        <WhyEarly />
        <Method />
        <Modules />
        <Gets />
        <Audience />
        <ApplyForm />
        <Faq />
        <FinalCta onApply={goApply} />
      </main>
      <Footer />

      <TweaksPanel>
        <TweakSection label="Direção da página" />
        <TweakRadio label="Layout" value={t.direction}
          options={[{ value: "a", label: "Editorial" }, { value: "b", label: "Central" }, { value: "c", label: "Marinho" }]}
          onChange={(v) => setTweak("direction", v)} />
        <TweakSection label="Cor de destaque" />
        <TweakColor label="Accent" value={ACCENTS[t.accent].accent}
          options={[ACCENTS.teal.accent, ACCENTS.navy.accent, ACCENTS.cyan.accent, ACCENTS.orange.accent]}
          onChange={(hex) => {
            const key = Object.keys(ACCENTS).find(k => ACCENTS[k].accent === hex) || "teal";
            setTweak("accent", key);
          }} />
      </TweaksPanel>
    </React.Fragment>
  );
}

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