// App shell — wires everything together. Also handles the Tweaks panel.

function App() {
  const [t, setTweak] = useTweaks(window.__BG_TWEAK_DEFAULTS);

  // Apply primary color
  React.useEffect(() => {
    document.documentElement.style.setProperty("--blue-600", t.primaryColor || "#2A5BFF");
  }, [t.primaryColor]);

  // Scroll-reveal: auto-apply .reveal to key elements and toggle .in on intersect.
  React.useLayoutEffect(() => {
    // Select expressive elements per section (but skip the hero, which is above the fold)
    const sectionSelectors = [
      "#demo .t-eyebrow",
      "#demo h2.t-h1",
      "#demo p.t-lead",
      "#perda .t-eyebrow",
      "#perda h2.t-h1",
      "#perda p.t-lead",
      "#perda .cost-grid > div",
      "#perda .story-grid > div",
      'section[style*="surface-2"] .t-eyebrow',
      'section[style*="surface-2"] h2',
      'section[style*="surface-2"] p.t-lead',
      "#dois-mundos .t-eyebrow",
      "#dois-mundos h2",
      "#dois-mundos p.t-lead",
      "#precos .t-eyebrow",
      "#precos h2",
      "#precos p.t-lead",
      "#precos .plans-grid > div",
    ];
    const els = Array.from(document.querySelectorAll(sectionSelectors.join(", ")));
    els.forEach((el, i) => {
      el.classList.add("reveal");
      // Stagger children of a parent
      const parent = el.parentElement;
      const idx = parent ? Array.from(parent.children).indexOf(el) : 0;
      el.style.transitionDelay = `${Math.min(idx, 4) * 0.08}s`;
    });
    const io = new IntersectionObserver((entries) => {
      entries.forEach(e => {
        if (e.isIntersecting) {
          e.target.classList.add("in");
          io.unobserve(e.target);
        }
      });
    }, { threshold: 0.12, rootMargin: "0px 0px -80px 0px" });
    els.forEach(el => io.observe(el));
    return () => io.disconnect();
  }, []);

  // Hero parallax: shift the phone column subtly on scroll
  React.useEffect(() => {
    const right = document.querySelector(".hero-right");
    if (!right) return;
    let ticking = false;
    const onScroll = () => {
      if (ticking) return;
      ticking = true;
      requestAnimationFrame(() => {
        const y = window.scrollY;
        if (y < 800) {
          right.style.transform = `translateY(${y * 0.05}px)`;
        }
        ticking = false;
      });
    };
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  return (
    <>
      <Nav />
      <main>
        <Hero />
        <InteractiveDemo />
        <CostSection />
        <Comparison />
        <AudienceToggle />
        <Pricing />
        <CtaFinal />
      </main>
      <Footer />

      <TweaksPanel title="Tweaks">
        <TweakSection label="Visual">
          <TweakColor
            label="Cor primária (azul)"
            value={t.primaryColor}
            options={["#2A5BFF", "#1E4FD8", "#0EA5E9", "#7C5BD8", "#16A34A", "#F59E0B"]}
            onChange={(v) => setTweak("primaryColor", v)} />
        </TweakSection>
      </TweaksPanel>
    </>
  );
}

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