/* global React, ReactDOM, Icon, Logo, CTA,
   Hero, Pratica, Testimonials, Resultados, VideoTestimonials,
   Modules, Bonuses, Pricing, Guarantee, Certificate, FAQ, Support, Footer */
const { useState, useEffect, useRef } = React;

function Nav() {
  const [scrolled, setScrolled] = useState(false);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 24);
    onScroll();
    window.addEventListener("scroll", onScroll, {passive: true});
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  return (
    <nav className={`nav ${scrolled ? "is-scrolled" : ""}`}>
      <div className="shell nav-inner">
        <a href="#top" className="nav-logo">
          <img src="assets/logo-full.png" alt="CCA Cosmetologia Consciente aplicada" className="nav-logo-img"/>
        </a>
        <div className="nav-links">
          <a href="#pratica">Método</a>
          <a href="#modulos">Módulos</a>
          <a href="#resultados">Resultados</a>
          <a href="#bonus">Bônus</a>
          <a href="#faq">FAQ</a>
        </div>
      </div>
    </nav>
  );
}

function StickyCTA() {
  const [visible, setVisible] = useState(false);
  useEffect(() => {
    const onScroll = () => {
      const hero = document.querySelector(".hero");
      const preco = document.getElementById("preco");
      if (!hero) return;
      const heroBottom = hero.getBoundingClientRect().bottom;
      const precoTop = preco ? preco.getBoundingClientRect().top : Infinity;
      setVisible(heroBottom < 0 && precoTop > 200);
    };
    onScroll();
    window.addEventListener("scroll", onScroll, {passive: true});
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  return (
    <div className={`sticky-cta ${visible ? "is-visible" : ""}`}>
      <a href="#comprar" className="btn btn--gold">
        Quero entrar no CCA
      </a>
    </div>
  );
}

// Set up scroll-reveal observer once on mount
function useGlobalReveal() {
  useEffect(() => {
    const io = new IntersectionObserver((entries) => {
      entries.forEach(e => {
        if (e.isIntersecting) {
          e.target.classList.add("is-in");
          io.unobserve(e.target);
        }
      });
    }, {threshold: 0.08, rootMargin: "0px 0px -6% 0px"});

    const observe = () => {
      document.querySelectorAll(".reveal:not(.is-in)").forEach(n => io.observe(n));
    };

    // Initial observe, then re-observe periodically to catch React-rendered elements
    observe();
    const interval = setInterval(observe, 400);
    setTimeout(() => clearInterval(interval), 4000);

    // Safety fallback: anything still hidden after 6s gets shown (e.g. user has no IO support)
    const safety = setTimeout(() => {
      document.querySelectorAll(".reveal:not(.is-in)").forEach(n => n.classList.add("is-in"));
    }, 6000);

    return () => {
      io.disconnect();
      clearInterval(interval);
      clearTimeout(safety);
    };
  }, []);
}

function App() {
  useGlobalReveal();

  return (
    <>
      <main>
        <Hero/>
        <Pratica/>
        <Modules/>
        <Resultados/>
        <VideoTestimonials/>
        <Bonuses/>
        <Pricing/>
        <Guarantee/>
        <Certificate/>
        <FAQ/>
      </main>
      <Footer/>
    </>
  );
}

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