// Lidera Agro — Participantes · main app
const { useState: useStateApp, useEffect: useEffectApp } = React;

const TWEAK_DEFAULTS_P = /*EDITMODE-BEGIN*/{
  "theme": "Claro",
  "heroVariant": "Mosaico",
  "showProgress": true,
  "palette": ["#0c4439", "#2ea674", "#86e6b4"],
  "showLeaves": true,
  "showCountdown": true,
  "loteState": "Autom\u00e1tico"
}/*EDITMODE-END*/;

function AppP() {
  const [scrollY, setScrollY] = useStateApp(0);
  const [activeSection, setActiveSection] = useStateApp('hero');
  const [tw, setTweak] = useTweaks(TWEAK_DEFAULTS_P);

  // apply theme
  useEffectApp(() => {
    document.body.classList.toggle('theme-dark', tw.theme === 'Escuro');
  }, [tw.theme]);

  // accent palette
  useEffectApp(() => {
    const root = document.documentElement;
    const [dark, bright, light] = tw.palette;
    root.style.setProperty('--green-dark', dark);
    root.style.setProperty('--green-bright', bright);
    root.style.setProperty('--green-light', light);
  }, [tw.palette]);

  // scroll listener
  useEffectApp(() => {
    let raf;
    const handler = () => {
      if (raf) cancelAnimationFrame(raf);
      raf = requestAnimationFrame(() => setScrollY(window.scrollY));
    };
    window.addEventListener('scroll', handler, { passive: true });
    return () => window.removeEventListener('scroll', handler);
  }, []);

  // active section tracker
  useEffectApp(() => {
    const sections = document.querySelectorAll('section[id]');
    const obs = new IntersectionObserver((entries) => {
      entries.forEach((e) => {
        if (e.isIntersecting && e.intersectionRatio > 0.4) {
          setActiveSection(e.target.id);
        }
      });
    }, { threshold: [0.4, 0.6, 0.8] });
    sections.forEach((s) => obs.observe(s));
    return () => obs.disconnect();
  }, []);

  // reveal on view
  useEffectApp(() => {
    const obs = new IntersectionObserver((entries) => {
      entries.forEach((e) => {
        if (e.isIntersecting) e.target.classList.add('in');
      });
    }, { threshold: 0.12 });
    document.querySelectorAll('.reveal').forEach((el) => obs.observe(el));
    return () => obs.disconnect();
  }, []);

  const stateOverride = (
    tw.loteState === 'Lote 1 aberto' ? 'lote1' :
    tw.loteState === 'Lote 2 aberto' ? 'lote2' :
    tw.loteState === 'Encerrado' ? 'encerrado' :
    'auto'
  );

  const sections = [
    { id: 'hero', label: 'Início' },
    { id: 'manifesto', label: 'Contexto' },
    { id: 'evento', label: 'Evento' },
    { id: 'porque', label: 'Por que ir' },
    { id: 'mentores', label: 'Mentores' },
    { id: 'programa', label: 'Programa' },
    { id: 'paramim', label: 'Para mim?' },
    { id: 'ingressos', label: 'Ingressos' },
    { id: 'faq', label: 'FAQ' },
    { id: 'contato', label: 'Contato' },
  ];

  return (
    <>
      <TopBarP scrolled={scrollY > 80} />
      {tw.showProgress && <ProgressRailP activeSection={activeSection} sections={sections} />}
      {tw.showLeaves && (
        <div style={{ position: 'fixed', inset: 0, pointerEvents: 'none', zIndex: 1, overflow: 'hidden' }}>
          <LeavesP scrollY={scrollY} />
        </div>
      )}

      <main className="scroll-root">
        <HeroP heroVariant={tw.heroVariant === 'Minimal' ? 'minimal' : 'mosaic'} />
        <ManifestoP />
        <EventoP />
        <PorQueP />
        <MentoresP />
        <ProgramaP />
        <ParaMimP />
        <IngressosSection stateOverride={stateOverride} />
        <FaqP />
        <CTAFinalP stateOverride={stateOverride} />
        <FooterP />
      </main>

      <StickyBuyBar stateOverride={stateOverride} />

      <TweaksPanel title="Tweaks">
        <TweakSection label="Visual" />
        <TweakRadio label="Tema" value={tw.theme}
          options={['Claro', 'Escuro']}
          onChange={(v) => setTweak('theme', v)} />
        <TweakColor label="Paleta" value={tw.palette}
          options={[
            ['#0c4439', '#2ea674', '#86e6b4'],
            ['#0a3d3a', '#14a37b', '#7fe1c6'],
            ['#1f3a1c', '#4f8a3a', '#a8d287'],
            ['#08221e', '#1ed8a2', '#86e6b4'],
          ]}
          onChange={(v) => setTweak('palette', v)} />

        <TweakSection label="Hero" />
        <TweakRadio label="Estilo" value={tw.heroVariant}
          options={['Mosaico', 'Minimal']}
          onChange={(v) => setTweak('heroVariant', v)} />
        <TweakToggle label="Contagem regressiva" value={tw.showCountdown}
          onChange={(v) => setTweak('showCountdown', v)} />

        <TweakSection label="Estado de venda" />
        <TweakSelect label="Lote ativo" value={tw.loteState}
          options={['Automático', 'Lote 1 aberto', 'Lote 2 aberto', 'Encerrado']}
          onChange={(v) => setTweak('loteState', v)} />

        <TweakSection label="Navegação" />
        <TweakToggle label="Trilha lateral" value={tw.showProgress}
          onChange={(v) => setTweak('showProgress', v)} />
        <TweakToggle label="Folhas decorativas" value={tw.showLeaves}
          onChange={(v) => setTweak('showLeaves', v)} />
      </TweaksPanel>
    </>
  );
}

// Sticky bottom buy bar — appears after hero
function StickyBuyBar({ stateOverride = 'auto' }) {
  const [visible, setVisible] = useStateApp(false);
  useEffectApp(() => {
    const onScroll = () => {
      setVisible(window.scrollY > window.innerHeight * 0.8);
    };
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  const status = getLoteStatus(stateOverride);
  const activeId = status.lote1 === 'open' ? 'lote1' : status.lote2 === 'open' ? 'lote2' : null;
  const active = activeId ? INGRESSOS.find((i) => i.id === activeId) : null;

  if (!active) {
    return (
      <div className={`buy-bar ${visible ? 'show' : ''}`}>
        <div className="bb-info">
          <div className="bb-tier">Inscrições encerradas</div>
          <div className="bb-price" style={{ fontSize: 16 }}>Cadastre-se para a próxima edição</div>
        </div>
        <a href="#contato" className="btn">Quero ser avisado →</a>
      </div>
    );
  }

  return (
    <div className={`buy-bar ${visible ? 'show' : ''}`}>
      <div className="bb-info">
        <div className="bb-tier">{activeId === 'lote1' ? 'Lote 1 · aberto' : 'Lote 2 · aberto'}</div>
        <div className="bb-price">{active.price} <small>em até 12x no cartão</small></div>
      </div>
      <a href={SYMPLA_URL} target="_blank" rel="noopener noreferrer" className="btn">Garantir minha vaga →</a>
    </div>
  );
}

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