// Burger Summit 2026 — Ingresso VIP em destaque + tabela de lotes + grupos
function VipHighlight({ onBuy }) {
  const perks = ['Entrada preferencial pela Arena', 'Espaço VIP com assentos privilegiados', 'Acesso à área de networking dos gigantes', 'Kit exclusivo da Nação'];
  const kit = ['Pulseira VIP da Nação', 'Ecobag Burger Summit®', 'Boné Burger Summit®', 'Caderneta de Jogo', 'Stickers da Nação', 'Caneta Burger Summit®', 'Camiseta exclusiva do evento'];
  return (
    <section className="surface-paper vip" id="vip">
      <div className="vip-top dot">
        <span className="ghostmark" aria-hidden="true">VIP</span>
        <div className="wrap">
          <span className="eyebrow">A melhor experiência</span>
          <div className="vip-head" style={{marginTop:'14px'}}>
            <h2>Seja VIP e jogue<br/>no <span className="accent">time titular.</span></h2>
            <div className="vip-perks">
              {perks.map((p, i) => <div className="perk" key={i}>{p}</div>)}
            </div>
          </div>
        </div>
      </div>
      <div className="wrap" style={{paddingBottom:'96px'}}>
        <div className="vip-card">
          <div className="kit">
            <h3>Kit VIP Exclusivo</h3>
            <div className="vip-kitgrid">
              {kit.map((k, i) => (
                <div className="ki" key={i}><span className="gem"></span>{k}</div>
              ))}
              <div className="ki note">* Brindes inéditos e exclusivos do evento.</div>
            </div>
          </div>
          <div className="buy">
            <span className="lab">Investimento</span>
            <div className="big"><span className="cur">R$</span>1.297</div>
            <span className="inst">ou 12x de R$ 129,66</span>
            <a className="bs-btn bs-btn-dark bs-btn-lg" onClick={()=>onBuy('Ingresso VIP')}>Adquirir meu VIP agora</a>
            <span className="smallnote">* Vagas VIP limitadas. Consulte as condições.</span>
          </div>
        </div>
      </div>
    </section>
  );
}

function Tickets({ onBuy, onChoose, activePlan }) {
  const plans = [
    {
      id: 'pista', lote: 'Pista · Lote 1', name: 'Inteira', was: 'R$ 697', cur: 'R$', val: '497', cents: ',00',
      inst: 'ou 12x de R$ 49,69', feat: false,
      feats: ['Acesso aos 2 dias de evento', 'Todas as imersões da Arena', 'Feira de Negócios completa', 'Certificado da Nação'],
    },
    {
      id: 'vip', lote: 'VIP · Lote 1', name: 'VIP', was: 'R$ 1.597', cur: 'R$', val: '1.297', cents: ',00',
      inst: 'ou 12x de R$ 129,66', feat: true,
      feats: ['Tudo da Pista +', 'Entrada preferencial', 'Espaço VIP com assentos', 'Kit VIP exclusivo da Nação', 'Networking dos gigantes'],
    },
    {
      id: 'camarote', lote: 'Camarote · Premium', name: 'Camarote', was: null, cur: 'R$', val: '2.497', cents: ',00',
      inst: 'ou 12x de R$ 249,66', feat: false,
      feats: ['Tudo do VIP +', 'Camarote com vista privilegiada', 'Open food da chapa premium', 'Meet & greet com palestrantes', 'Moletom exclusivo do evento'],
    },
  ];
  return (
    <section className="sec surface-paper dot" id="ingressos">
      <div className="wrap">
        <div className="sec-head">
          <div>
            <span className="eyebrow">Entre em campo</span>
            <h2 className="sec-title">Ingressos &amp; <span className="accent">investimentos</span></h2>
          </div>
          <p className="sec-sub">Os ingressos são limitados por lote. Garanta sua vaga antes dos valores subirem ou as condições mudarem.</p>
        </div>

        <div className="price-grid">
          {plans.map((p) => (
            <div className={'plan' + (p.feat ? ' feat' : '') + (activePlan === p.name ? ' active' : '')} key={p.id}>
              {p.feat && <span className="pop">Mais procurado</span>}
              <span className="lote">{p.lote}</span>
              <h3>{p.name}</h3>
              {p.was && <div className="was">De {p.was} por</div>}
              <div className="now" style={p.was ? null : {marginTop:'18px'}}>
                <span className="cur">{p.cur}</span><span className="val">{p.val}</span><span className="cents">{p.cents}</span>
              </div>
              <div className="inst">{p.inst}</div>
              <ul>{p.feats.map((f, j) => <li key={j}>{f}</li>)}</ul>
              <div className="seatmap" onClick={()=>onChoose && onChoose(p.name)}>
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M9 6 3 4v16l6-2 6 2 6-2V2l-6 2-6-0z"/><path d="M9 4v14M15 6v14"/></svg>
                Acesse o mapa de assentos
              </div>
              <a className={'bs-btn ' + (p.feat ? 'bs-btn-primary' : 'bs-btn-gold')} onClick={()=>onBuy('Ingresso ' + p.name)}>Comprar</a>
              <div className="pay">Pagamento <span className="cards"><span></span><span></span><span></span><span></span></span></div>
            </div>
          ))}
        </div>

        <div className="groups">
          <span className="ghostmark" aria-hidden="true">GRUPOS</span>
          <div className="groups-txt">
            <span className="lote" style={{color:'var(--bs-gold)'}}>Condições especiais</span>
            <h3>Ingressos para <span className="accent">grupos</span></h3>
            <p>Entre em contato e aproveite condições especiais para compras em conjunto, a partir de 3 ingressos para o Burger Summit.</p>
          </div>
          <a className="bs-btn bs-btn-primary bs-btn-lg" onClick={()=>onBuy('Ingressos para Grupos')}>Ver condições</a>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { VipHighlight, Tickets });