// Burger Summit 2026 — App principal + Tweaks
const { useState, useEffect } = React;

const ACCENTS = {
  '#D94A1A': '#EA5A22', // Brasa
  '#E6192B': '#F23A4B', // Vermelho
  '#00A859': '#14C46D', // Verde campo
};

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#D94A1A",
  "heroTone": "hot",
  "dots": true
}/*EDITMODE-END*/;

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

function MobileMenu({ open, onClose, onNav }) {
  if (!open) return null;
  const links = [['Manifesto','manifesto'],['Palestrantes','palestrantes'],['Local','local'],['VIP','vip'],['Ingressos','ingressos'],['FAQ','faq']];
  return (
    <div className="modal-scrim" style={{alignItems:'flex-start',justifyContent:'flex-start'}} onClick={onClose}>
      <div style={{background:'var(--bs-black)',width:'100%',padding:'28px 22px',display:'flex',flexDirection:'column',gap:'4px'}} onClick={(e)=>e.stopPropagation()}>
        <button className="modal-x" style={{position:'static',alignSelf:'flex-end',marginBottom:'8px'}} onClick={onClose}>×</button>
        {links.map(([l,id])=>(
          <a key={id} onClick={()=>{onClose(); setTimeout(()=>onNav(id),60);}}
             style={{color:'#fff',textDecoration:'none',fontFamily:'var(--font-display)',fontWeight:900,textTransform:'uppercase',fontSize:'26px',padding:'12px 0',borderBottom:'1px solid rgba(255,255,255,.1)'}}>{l}</a>
        ))}
      </div>
    </div>
  );
}

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [plan, setPlan] = useState(null);
  const [menu, setMenu] = useState(false);

  useEffect(() => {
    const id = setTimeout(() => window.setupReveals && window.setupReveals(), 80);
    return () => clearTimeout(id);
  }, []);

  const buy = (info) => setPlan(info);
  const goTickets = () => scrollToId('ingressos');
  const accentBright = ACCENTS[t.accent] || t.accent;
  const L = window.BS_LOTES;
  const autoUrg = L.isLast
    ? 'Último lote no ar · vagas finais para o Burger Summit 2026'
    : 'Virada de lote: ' + L.nextDate + ' · garanta o ' + L.label + ' antes do reajuste';

  return (
    <div style={{ '--site-accent': t.accent, '--site-accent-bright': accentBright }} className={t.dots ? '' : 'no-dot'}>
      <UrgencyBar loteText={autoUrg} />
      <Header onNav={scrollToId} onBuy={goTickets} onMenu={()=>setMenu(true)} />
      <Hero tone={t.heroTone} onBuy={goTickets} onNav={scrollToId} />
      <Manifesto onBuy={goTickets} />
      <ConfirmedSpeakers />
      <Venue onBuy={goTickets} />
      <PastEditions />
      <VipHighlight onGoTickets={goTickets} />
      <Tickets onBuy={buy} />
      <Faq />
      <Sponsors onBuy={goTickets} />
      <Footer onNav={scrollToId} />

      <div className="mobile-cta">
        <span className="px">Individual · <b>R$ {L.brl(L.price.individual)}</b></span>
        <a className="bs-btn bs-btn-primary bs-btn-sm" onClick={goTickets}>Garantir vaga</a>
      </div>

      <a className="wa-float" href="https://wa.me/5515996747423?text=Olá!%20Tenho%20dúvidas%20sobre%20o%20Burger%20Summit%202026." target="_blank" rel="noopener">
        <span className="wa-ic" aria-hidden="true">
          <svg width="22" height="22" viewBox="0 0 24 24" fill="currentColor"><path d="M.057 24l1.687-6.163a11.867 11.867 0 0 1-1.587-5.946C.16 5.335 5.495 0 12.05 0a11.817 11.817 0 0 1 8.413 3.488 11.824 11.824 0 0 1 3.48 8.414c-.003 6.557-5.338 11.892-11.893 11.892a11.9 11.9 0 0 1-5.688-1.448L.057 24zm6.597-3.807c1.676.995 3.276 1.591 5.392 1.592 5.448 0 9.886-4.434 9.889-9.885.002-5.462-4.415-9.89-9.881-9.892-5.452 0-9.887 4.434-9.889 9.884a9.86 9.86 0 0 0 1.51 5.26l-.999 3.648 3.978-1.207zm11.387-5.464c-.074-.124-.272-.198-.57-.347-.297-.149-1.758-.868-2.031-.967-.272-.099-.47-.149-.669.149-.198.297-.768.967-.941 1.165-.173.198-.347.223-.644.074-.297-.149-1.255-.462-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.297-.347.446-.521.151-.172.2-.296.3-.495.099-.198.05-.372-.025-.521-.075-.148-.669-1.611-.916-2.206-.242-.579-.487-.501-.669-.51l-.57-.01c-.198 0-.52.074-.792.372s-1.04 1.016-1.04 2.479 1.065 2.876 1.213 3.074c.149.198 2.095 3.2 5.076 4.487.709.306 1.263.489 1.694.626.712.226 1.36.194 1.872.118.571-.085 1.758-.719 2.006-1.413.248-.695.248-1.29.173-1.414z"/></svg>
        </span>
        <span className="wa-tx">Dúvidas? Clique aqui</span>
      </a>

      <MobileMenu open={menu} onClose={()=>setMenu(false)} onNav={scrollToId} />
      <Checkout plan={plan} onClose={()=>setPlan(null)} />

      <TweaksPanel>
        <TweakSection label="Marca" />
        <TweakColor label="Cor de destaque" value={t.accent}
          options={['#D94A1A', '#E6192B', '#00A859']}
          onChange={(v)=>setTweak('accent', v)} />
        <TweakRadio label="Tom do hero" value={t.heroTone}
          options={['hot', 'asphalt', 'field']}
          onChange={(v)=>setTweak('heroTone', v)} />
        <TweakToggle label="Textura de pontos" value={t.dots}
          onChange={(v)=>setTweak('dots', v)} />
      </TweaksPanel>
    </div>
  );
}

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