// 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,
  "urgency": "Lote 1 virando · últimas vagas com preço promocional"
}/*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);
  const [activePlan, setActivePlan] = useState('VIP');

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

  const buy = (label) => setPlan(label || 'Garantir ingresso');
  const accentBright = ACCENTS[t.accent] || t.accent;

  return (
    <div style={{ '--site-accent': t.accent, '--site-accent-bright': accentBright }} className={t.dots ? '' : 'no-dot'}>
      <UrgencyBar loteText={t.urgency} />
      <Header onNav={scrollToId} onBuy={()=>buy('Garantir ingresso')} onMenu={()=>setMenu(true)} />
      <Hero tone={t.heroTone} onBuy={()=>buy('Garantir ingresso')} onNav={scrollToId} />
      <Manifesto onBuy={()=>buy('Fazer inscrição')} />
      <ConfirmedSpeakers />
      <Venue onBuy={()=>buy('Garantir inscrição')} />
      <PastEditions />
      <VipHighlight onBuy={buy} />
      <Tickets onBuy={buy} onChoose={setActivePlan} activePlan={activePlan} />
      <Faq />
      <Sponsors onBuy={()=>buy('Garantir ingresso')} />
      <Footer onNav={scrollToId} />

      <div className="mobile-cta">
        <span className="px">Pista Lote 1 · <b>R$ 497</b></span>
        <a className="bs-btn bs-btn-primary bs-btn-sm" onClick={()=>buy('Ingresso Pista')}>Garantir vaga</a>
      </div>

      <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)} />
        <TweakSection label="Urgência" />
        <TweakText label="Aviso do topo" value={t.urgency}
          onChange={(v)=>setTweak('urgency', v)} />
      </TweaksPanel>
    </div>
  );
}

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