const { useState, useEffect } = React;

function useScrollAnimation() {
  useEffect(() => {
    const timeout = setTimeout(() => {
      document.querySelectorAll('.fade-up').forEach(el => {
        if (!el.dataset.fadeReady) {
          el.style.opacity = '0';
          el.style.transform = 'translateY(20px)';
          el.dataset.fadeReady = '1';
        }
      });

      const obs = new IntersectionObserver((entries) => {
        entries.forEach(e => {
          if (e.isIntersecting) {
            e.target.style.opacity = '1';
            e.target.style.transform = 'translateY(0)';
            obs.unobserve(e.target);
          }
        });
      }, { threshold: 0.05 });

      document.querySelectorAll('.fade-up').forEach(el => obs.observe(el));

      const interval = setInterval(() => {
        document.querySelectorAll('.fade-up:not([data-fade-ready])').forEach(el => {
          el.style.opacity = '0';
          el.style.transform = 'translateY(20px)';
          el.dataset.fadeReady = '1';
          obs.observe(el);
        });
      }, 600);

      return () => { clearInterval(interval); obs.disconnect(); };
    }, 80);
    return () => clearTimeout(timeout);
  }, []);
}

function AppV3() {
  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [scrolled, setScrolled] = useState(false);
  const [mobileOpen, setMobileOpen] = useState(false);
  const [wizardOpen, setWizardOpen] = useState(false);
  const openWizard = () => setWizardOpen(true);

  useScrollAnimation();

  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 40);
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  const bi = tweaks.botanicalIntensity != null ? tweaks.botanicalIntensity : 1;

  return (
    <>
      <FallingLeaves intensity={bi} />

      <SiteHeaderV3 scrolled={scrolled} mobileOpen={mobileOpen} setMobileOpen={setMobileOpen} />

      <HeroV3 tweaks={tweaks} />

      <ValuePropsV3 intensity={bi} />

      <BotanicalAbout tweaks={tweaks} />

      <ContextualCTA variant="about" onOpenWizard={openWizard} whatsapp={tweaks.whatsapp} />

      <VineDivider intensity={bi} />

      <EventsSection />

      <BotanicalStructure tweaks={tweaks} />

      <VineDivider intensity={bi} />

      <BotanicalGallery tweaks={tweaks} />

      <ContextualCTA variant="gallery" onOpenWizard={openWizard} whatsapp={tweaks.whatsapp} />

      <HowItWorks />

      <BotanicalTestimonials tweaks={tweaks} />

      <ContextualCTA variant="testimonials" onOpenWizard={openWizard} whatsapp={tweaks.whatsapp} />

      <FAQSection />

      <DarkContactV3 tweaks={tweaks} />

      <SiteFooter />

      <WhatsAppFloat tweaks={tweaks} />

      <WizardModal isOpen={wizardOpen} onClose={() => setWizardOpen(false)} whatsapp={tweaks.whatsapp} />

      <TweaksPanel>
        <TweakSection label="Headline" />
        <TweakRadio label="Estilo" value={tweaks.headline}
          options={['charme', 'alugue', 'celebre']}
          onChange={v => setTweak('headline', v)} />
        <TweakSection label="Botânica" />
        <TweakSlider label="Intensidade Folhagem" value={bi} min={0} max={2} step={0.1}
          onChange={v => setTweak('botanicalIntensity', v)} />
        <TweakSection label="WhatsApp" />
        <TweakText label="Número" value={tweaks.whatsapp}
          onChange={v => setTweak('whatsapp', v)} placeholder="5521999999999" />
        <TweakSection label="Fotos — Hero" />
        <TweakSlider label="Esquerda (Y)" value={tweaks.heroPos1} min={0} max={100} unit="%"
          onChange={v => setTweak('heroPos1', v)} />
        <TweakSlider label="Centro (Y)" value={tweaks.heroPos2} min={0} max={100} unit="%"
          onChange={v => setTweak('heroPos2', v)} />
        <TweakSlider label="Direita (Y)" value={tweaks.heroPos3} min={0} max={100} unit="%"
          onChange={v => setTweak('heroPos3', v)} />
        <TweakSection label="Fotos — Sobre" />
        <TweakSlider label="Foto jardim (Y)" value={tweaks.aboutPos} min={0} max={100} unit="%"
          onChange={v => setTweak('aboutPos', v)} />
        <TweakSection label="Fotos — Galeria" />
        <TweakSlider label="1. Noite luzes" value={tweaks.galPos1} min={0} max={100} unit="%"
          onChange={v => setTweak('galPos1', v)} />
        <TweakSlider label="2. Caminho" value={tweaks.galPos2} min={0} max={100} unit="%"
          onChange={v => setTweak('galPos2', v)} />
        <TweakSlider label="3. Piscina flores" value={tweaks.galPos3} min={0} max={100} unit="%"
          onChange={v => setTweak('galPos3', v)} />
        <TweakSlider label="4. Mesas" value={tweaks.galPos4} min={0} max={100} unit="%"
          onChange={v => setTweak('galPos4', v)} />
        <TweakSlider label="5. Casa noite" value={tweaks.galPos5} min={0} max={100} unit="%"
          onChange={v => setTweak('galPos5', v)} />
        <TweakSlider label="6. Piscina mesa" value={tweaks.galPos6} min={0} max={100} unit="%"
          onChange={v => setTweak('galPos6', v)} />
      </TweaksPanel>
    </>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<AppV3 />);