// ABLY — Root App
const App = () => {
  const [quizOpen, setQuizOpen] = React.useState(false);
  const [scrolled, setScrolled] = React.useState(false);
  const [heroVisible, setHeroVisible] = React.useState(true);
  // Tracks whether the hero's OWN primary CTA is still on screen. Drives the
  // mobile header CTA + tagline reveal (CHANGE 4 / 5). Starts true so the
  // header CTA is hidden on first paint while the hero CTA is in view.
  const [heroCtaVisible, setHeroCtaVisible] = React.useState(true);
  const isMobile = window.useIsMobile ? window.useIsMobile() : false;
  const [offerModal, setOfferModal] = React.useState(null); // 'private-escape' | 'celebration' | 'vip'

  React.useEffect(() => {
    // Find the hero's own primary CTA. The header CTA + tagline stay hidden
    // (heroCtaVisible=true) until the user has scrolled PAST that CTA — i.e.
    // its bottom edge passes above the header — then they fade in. Keying off
    // the scroll position (rather than a plain IntersectionObserver) keeps the
    // reveal monotonic: no flicker when the hero CTA, which now sits below the
    // fold, scrolls up through the viewport.
    const HEADER_H = 64;
    const getCta = () => document.querySelector('#hero .hero-ctas');
    const onScroll = () => {
      setScrolled(window.scrollY > 40);
      setHeroVisible(window.scrollY < (window.innerHeight - 100));
      const cta = getCta();
      // No CTA found → default to "visible" so the header CTA stays hidden.
      setHeroCtaVisible(cta ? cta.getBoundingClientRect().bottom > HEADER_H : true);
    };
    window.addEventListener('scroll', onScroll, { passive: true });
    window.addEventListener('resize', onScroll, { passive: true });
    onScroll();
    return () => {
      window.removeEventListener('scroll', onScroll);
      window.removeEventListener('resize', onScroll);
    };
  }, [isMobile]);

  React.useEffect(() => {
    // Scroll reveal (same behavior as v2): add .in the first time a .reveal
    // block enters the viewport, then stop watching it. Re-runs when isMobile
    // flips because some sections re-render a different subtree, whose fresh
    // .reveal nodes would otherwise stay hidden.
    const els = document.querySelectorAll('.reveal:not(.in)');
    if (!els.length) return undefined;
    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 -40px 0px' });
    els.forEach((el) => io.observe(el));
    return () => io.disconnect();
  }, [isMobile]);

  const openQuiz = () => setQuizOpen(true);
  const closeQuiz = () => setQuizOpen(false);

  const scrollTo = (id) => {
    const el = document.getElementById(id);
    if (el) {
      const top = el.getBoundingClientRect().top + window.scrollY - 60;
      window.scrollTo({ top, behavior: 'smooth' });
    }
  };

  const handleCustomize = (key) => {
    setOfferModal(key);
  };
  const closeOfferModal = () => setOfferModal(null);
  const switchOffer = (key) => setOfferModal(key);

  return (
    <>
      <Header scrolled={scrolled} isHeroVisible={heroVisible} heroCtaVisible={heroCtaVisible} onOpenQuiz={openQuiz} />
      <Hero onOpenQuiz={openQuiz} scrollTo={scrollTo} />
      <Trust />
      <Offers onCustomize={handleCustomize} onOpenQuiz={openQuiz} />
      <QuizCTA onOpenQuiz={openQuiz} />
      <Advisor onOpenQuiz={openQuiz} />
      <Gallery />
      <Testimonials />
      <Inclusions />
      <FAQ />
      <FinalCTA onOpenQuiz={openQuiz} />
      <Footer />

      <button className="wa-floating" onClick={() => window.openWhatsApp(window.WA_MESSAGES.general)} aria-label="WhatsApp">
        <Icon name="wa" size={18} />
        <span>Chat with ABLY</span>
      </button>

      <QuizModal open={quizOpen} onClose={closeQuiz} />
      {offerModal && <OfferModal offerKey={offerModal} onClose={closeOfferModal} onSwitchOffer={switchOffer} />}
    </>
  );
};

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);