// Burger Summit 2026 — Ingresso VIP em destaque + tabela de lotes + grupos
// Preços e datas vêm do motor automático window.BS_LOTES (lotes.js).
const CHECKOUT = {
  individual: 'https://parpayacademy.com.br/checkout/a1e40da2-871b-4cfd-884a-2cbf52810f08',
  vip: 'https://parpayacademy.com.br/checkout/a1e419ac-cfc9-490f-99ec-415022bc8046',
  combo: 'https://parpayacademy.com.br/checkout/a1e66759-f822-433e-af79-04ce21a767d7',
};
function VipHighlight({ onGoTickets }) {
  const L = window.BS_LOTES;
  const perks = [
    'Entrada preferencial para os 2 dias',
    'Espaço VIP na plenária com assentos privilegiados',
    'Acesso à Feira de Negócios',
  ];
  const kit = ['Pulseira VIP', 'Boné Burger Summit', 'Caderneta Burger Summit', 'Caneta Burger Summit'];
  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 exclusivos do evento, inclusos no ingresso VIP.</div>
            </div>
          </div>
          <div className="buy">
            <span className="lab">{L.label}</span>
            <div className="big"><span className="cur">R$</span>{L.brl(L.price.vip)}</div>
            <span className="inst">em até 21x no cartão</span>
            <a className="bs-btn bs-btn-dark bs-btn-lg" onClick={onGoTickets}>Adquirir meu VIP agora</a>
            <span className="smallnote">* Vagas VIP limitadas. Consulte as condições.</span>
          </div>
        </div>
      </div>
    </section>
  );
}

function VipSeal() {
  return (
    <div className="vip-seal" aria-hidden="true" style={{position:'absolute',top:'-26px',right:'-18px',width:'96px',height:'96px',transform:'rotate(9deg)',zIndex:4,pointerEvents:'none'}}>
      <svg viewBox="0 0 100 100" width="96" height="96" style={{display:'block',width:'96px',height:'96px',color:'var(--bs-gold)',filter:'drop-shadow(0 6px 14px rgba(0,0,0,.4))'}}>
        <defs>
          <path id="vipArcTop" d="M 50 50 m -34 0 a 34 34 0 1 1 68 0" fill="none" />
          <path id="vipArcBot" d="M 50 50 m 34 0 a 34 34 0 1 1 -68 0" fill="none" />
        </defs>
        <circle cx="50" cy="50" r="47" fill="none" stroke="currentColor" strokeWidth="2" />
        <circle cx="50" cy="50" r="40" fill="none" stroke="currentColor" strokeWidth="1" strokeDasharray="2 3" />
        <text className="vip-seal-arc" fill="currentColor" fontFamily="var(--font-text)" fontWeight="700" fontSize="8.5" letterSpacing="0.5"><textPath href="#vipArcTop" startOffset="50%" textAnchor="middle">BURGER SUMMIT</textPath></text>
        <text className="vip-seal-arc" fill="currentColor" fontFamily="var(--font-text)" fontWeight="700" fontSize="8.5" letterSpacing="0.5"><textPath href="#vipArcBot" startOffset="50%" textAnchor="middle">EXPERIÊNCIA · 2026</textPath></text>
        <text x="50" y="60" textAnchor="middle" className="vip-seal-word" fill="currentColor" fontFamily="var(--font-display)" fontWeight="900" fontSize="30">VIP</text>
      </svg>
    </div>
  );
}

function Tickets({ onBuy }) {
  const L = window.BS_LOTES;
  const plans = [
    {
      id: 'individual', lote: 'Individual · ' + L.label, name: 'Individual',
      full: L.showFrom ? L.full.individual : null, val: L.price.individual,
      inst: 'em até 21x no cartão', feat: false,
      feats: ['Acesso aos 2 dias de evento', 'Todas as palestras da Arena', 'Acesso à Feira de Negócios', 'Networking com a Nação'],
    },
    {
      id: 'vip', lote: 'VIP · ' + L.label, name: 'VIP',
      full: L.showFrom ? L.full.vip : null, val: L.price.vip,
      inst: 'em até 21x no cartão', feat: true,
      feats: ['Tudo do Individual +', 'Entrada preferencial nos 2 dias', 'Espaço VIP na plenária com assentos', 'Kit VIP (pulseira, boné, caderneta, caneta)'],
    },
  ];
  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>
          <div className="lote-flag">
            {L.isLast ? (
              <React.Fragment>
                <span className="lf-line1"><span className="lf-pip" aria-hidden="true"></span><span>Último lote no ar <b>· vagas finais</b></span></span>
                <span className="lf-sub">Não vai ter virada depois dessa.</span>
              </React.Fragment>
            ) : (
              <React.Fragment>
                <span className="lf-line1"><span className="lf-pip" aria-hidden="true"></span><span>Virada de lote: <b>{L.nextDate}</b></span></span>
                <span className="lf-sub">Garanta o {L.label} antes do reajuste.</span>
              </React.Fragment>
            )}
          </div>
        </div>

        <div className="price-grid two">
          {plans.map((p) => (
            <div className={'plan' + (p.feat ? ' feat' : '')} key={p.id}>
              {p.feat && <span className="pop">Mais procurado</span>}
              {p.feat && <VipSeal />}
              <span className="lote">{p.lote}</span>
              <h3>{p.name}</h3>
              {p.full && <div className="was">De R$ {L.brl(p.full)} por</div>}
              <div className="now" style={p.full ? null : {marginTop:'18px'}}>
                <span className="cur">R$</span><span className="val">{L.brl(p.val)}</span>
              </div>
              <div className="inst">{p.inst}</div>
              <ul>{p.feats.map((f, j) => <li key={j}>{f}</li>)}</ul>
              <a className={'bs-btn ' + (p.feat ? 'bs-btn-primary' : 'bs-btn-gold')} onClick={()=>onBuy({label:'Ingresso ' + p.name, modalidade:p.name, lote:L.label, valor:p.val, url:CHECKOUT[p.id]})}>Comprar</a>
              <div className="pay">
                <span className="paychip">
                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round"><path d="M12 3 3 12l9 9 9-9z"/></svg>
                  Pix
                </span>
                <span className="paychip">
                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round"><rect x="2.5" y="5.5" width="19" height="13" rx="2"/><path d="M2.5 9.5h19"/></svg>
                  Cartão
                </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 · {L.label}</span>
            <h3>Combos para <span className="accent">grupos</span></h3>
            <p>Vai trazer a equipe? A partir de 3 ingressos, sua hamburgueria entra em campo com preço especial.</p>
          </div>
          <div className="group-card">
            <span className="gc-lab">Combo · a partir de 3 ingressos</span>
            <div className="gc-price"><span className="cur">R$</span>{L.brl(L.price.combo)}</div>
            <span className="gc-inst">cada ingresso sai por R$ {L.brl(L.perPerson)} · em até 21x</span>
            <a className="bs-btn bs-btn-gold bs-btn-lg" onClick={()=>onBuy({label:'Combo para Grupos', modalidade:'Combo (3+)', lote:L.label, valor:L.price.combo, url:CHECKOUT.combo})}>Garantir combo</a>
          </div>
        </div>
      </div>
    </section>
  );
}

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