// Burger Summit 2026 — Página de REMARKETING (retargeting)
// Conversão pura: reconhecimento → custo da inação → quebra de objeções →
// prova → oferta (lote automático) → última chamada.
// Reusa: window.BS_LOTES (lotes), window.BS_LEADS (planilha), Checkout (modal+redirect).
const { useState: useStateR, useEffect: useEffectR } = React;

const RM_CHECKOUT = {
  individual: 'https://parpayacademy.com.br/checkout/a1e411ad-1184-4d1c-a83a-6d58c0d89358',
  vip: 'https://parpayacademy.com.br/checkout/a1e4224a-00f5-4dbf-8af4-d6e0aac8d724',
  combo: 'https://parpayacademy.com.br/checkout/a1e6681f-676b-4ce5-9bbf-2b2db62d6406',
};
const WA = 'https://wa.me/5515996747423?text=Vim%20pela%20p%C3%A1gina%20do%20Burger%20Summit%202026%20e%20tenho%20uma%20d%C3%BAvida.';

// ---------- contagem regressiva removida (lote vira longe; sem senso de urgência) ----------

// ---------- header enxuto ----------
function RmHeader({ onGo }) {
  return (
    <header className="rm-hdr">
      <div className="rm-hdr-in">
        <a className="brand" href="#topo"><img src="assets/logo-bs-color.png" alt="Burger Summit 2026" /></a>
        <div className="rm-hdr-right">
          <span className="rm-when">17–18 Ago · Recife/PE</span>
          <a className="bs-btn bs-btn-primary bs-btn-sm" onClick={onGo}>Garantir vaga</a>
        </div>
      </div>
    </header>
  );
}

// ---------- HERO ----------
function RmHero({ tone, L, onGo }) {
  return (
    <section className={'rm-hero dot-light' + (tone && tone !== 'hot' ? ' tone-' + tone : '')} id="topo">
      <div className="fire" aria-hidden="true"></div>
      <span className="ghostmark" aria-hidden="true">VOLTA</span>
      <div className="rm-hero-in">
        <div>
          <span className="rm-badge"><span className="pip"></span>Você já esteve aqui</span>
          <h1>Você pensou.<br/>Agora o <span className="gold">lote vira.</span></h1>
          <p className="h-lead">
            Você já viu do que o Burger Summit é capaz — e fechou a página. Tudo bem.
            Mas <b>o preço não espera</b> e a vaga que você deixou pra depois está mais cara a cada lote.
            Entra em campo agora, no menor valor que ainda existe.
          </p>
          <div className="rm-cta-row">
            <a className="bs-btn bs-btn-gold bs-btn-lg" onClick={onGo}>Garantir meu ingresso</a>
            <div className="rm-pricepill">
              <span className="l">Individual · {L.label}</span>
              <span className="v">{L.showFrom ? <s>R$ {L.brl(L.full.individual)}</s> : null}R$ {L.brl(L.price.individual)}</span>
            </div>
          </div>
          <div className="rm-trust">
            <span className="star" aria-hidden="true">
              <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l2.6 6.9L22 9.3l-5.4 4.6L18.2 22 12 17.8 5.8 22l1.6-8.1L2 9.3l7.4-.4z"/></svg>
            </span>
            Mais de <b style={{margin:'0 4px'}}>1.000 donos de hamburgueria</b> já entraram em campo. A próxima edição é a maior de todas.
          </div>
        </div>
        <img className="crest" src="assets/logo-crest-v3.png" alt="Burger Summit 2026" />
      </div>
    </section>
  );
}

// ---------- CUSTO DA INAÇÃO ----------
function RmCost({ L }) {
  const cards = [
    {
      ic: <path d="M3 17l6-6 4 4 8-8M21 7v6h-6" />,
      h: 'O preço só sobe',
      p: L.isLast ? 'Esse é o último lote. Não tem reajuste depois — tem é fim de estoque.' : 'A cada virada de lote o ingresso fica mais caro. Quem decide hoje paga o menor valor da temporada.',
    },
    {
      ic: <React.Fragment><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" /><circle cx="9" cy="7" r="4" /><path d="M22 21v-2a4 4 0 0 0-3-3.87" /></React.Fragment>,
      h: 'A vaga é limitada',
      p: 'A plenária tem lugar contado. Quando lota, acabou — e não tem segundo lote de espaço.',
    },
    {
      ic: <React.Fragment><path d="M13 2L3 14h9l-1 8 10-12h-9z" /></React.Fragment>,
      h: 'Seu concorrente não pensa duas vezes',
      p: 'Enquanto você adia, outro dono já vai estar trocando ideia com os gigantes do setor. A vantagem é de quem entra.',
    },
  ];
  return (
    <section className="sec surface-asphalt dot-light">
      <div className="wrap">
        <div className="rm-cost-head">
          <span className="eyebrow" style={{color:'var(--bs-gold)'}}>A real, sem rodeio</span>
          <h2 className="sec-title" style={{color:'#fff',marginTop:14}}>Pensar demais <span className="accent">custa caro.</span></h2>
          <p className="sec-sub" style={{color:'#fff',opacity:.82,maxWidth:'52ch'}}>Não é pressão à toa — é como o jogo funciona. Veja o que está em jogo enquanto a decisão fica pra depois.</p>
        </div>
        <div className="rm-cost-grid">
          {cards.map((c, i) => (
            <div className="rm-cost-card" key={i}>
              <span className="ic"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round">{c.ic}</svg></span>
              <h4>{c.h}</h4>
              <p>{c.p}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ---------- QUEBRA DE OBJEÇÕES ----------
function RmObjections({ onGo }) {
  const items = [
    { q: 'Tá caro.', h: <>Caro é <span className="accent">ficar de fora.</span></>, p: 'O ingresso se paga no primeiro insight que você aplica na sua operação. O que custa de verdade é continuar errando no escuro mais um ano.' },
    { q: 'Não tenho tempo.', h: <>São <span className="accent">2 dias</span> que poupam 2 anos.</>, p: 'É exatamente por estar atolado no dia a dia que você precisa parar 2 dias pra enxergar o negócio de cima e voltar com um plano.' },
    { q: 'Será que vale?', h: <>Os <span className="accent">maiores do setor</span>, num lugar só.</>, p: 'Uma vez por ano, a Nação inteira se reúne. O conteúdo, a feira de negócios e o networking não existem soltos por aí — só aqui.' },
    { q: 'Vou sozinho.', h: <>Ninguém entra <span className="accent">sozinho.</span></>, p: 'A Nação toda está em campo. Você sai de lá com contatos, fornecedores e parceiros que valem o ingresso — e ainda pode trazer o time no combo.' },
  ];
  return (
    <section className="sec surface-paper dot">
      <div className="wrap">
        <div className="sec-head">
          <div>
            <span className="eyebrow">Vamos resolver isso</span>
            <h2 className="sec-title">O que está te <span className="accent">segurando?</span></h2>
          </div>
          <p className="sec-sub">Toda objeção tem resposta. Se ainda bate aquela dúvida, é só chamar no WhatsApp — a gente te ajuda a decidir.</p>
        </div>
        <div className="rm-obj-list">
          {items.map((it, i) => (
            <div className="rm-obj" key={i}>
              <div className="qbubble"><span className="qm">“</span>{it.q}</div>
              <h4>{it.h}</h4>
              <p>{it.p}</p>
            </div>
          ))}
        </div>
        <div style={{textAlign:'center',marginTop:40}}>
          <a className="bs-btn bs-btn-primary bs-btn-lg" onClick={onGo}>Decidi: quero minha vaga</a>
        </div>
      </div>
    </section>
  );
}

// ---------- PROVA ----------
function RmProof() {
  const faces = ['past-paulo.jpg','past-netao.jpg','past-raphael.jpg','past-alexandre.jpg','past-bindes.jpg','past-marcos.jpg'];
  return (
    <section className="sec surface-black">
      <div className="wrap">
        <div className="sec-head">
          <div>
            <span className="eyebrow">Não é promessa, é histórico</span>
            <h2 className="sec-title" style={{color:'#fff'}}>A Nação já <span className="accent">provou.</span></h2>
          </div>
          <p className="sec-sub" style={{color:'#fff',opacity:.82}}>Edição após edição, os donos que entraram em campo saíram na frente. Agora é a sua vez.</p>
        </div>
        <div className="rm-proof-nums">
          <div className="n"><div className="big">1.000+</div><div className="cap">Donos já em campo</div></div>
          <div className="n"><div className="big">2</div><div className="cap">Dias de imersão e feira</div></div>
          <div className="n"><div className="big">+10</div><div className="cap">Gigantes no palco</div></div>
        </div>
        <div className="rm-faces">
          {faces.map((f, i) => (
            <div className="rm-face" key={i}><img src={'assets/' + f} alt="" /></div>
          ))}
          <span className="more">Personalidades que já passaram pelo palco da Nação.</span>
        </div>
      </div>
    </section>
  );
}

// ---------- OFERTA (pricing automático) ----------
function RmOffer({ L, onBuy }) {
  const plans = [
    {
      id: 'individual', name: 'Individual', feat: false,
      full: L.showFrom ? L.full.individual : null, val: L.price.individual,
      feats: ['Acesso aos 2 dias de evento', 'Todas as palestras da Arena', 'Acesso à Feira de Negócios', 'Networking com a Nação'],
    },
    {
      id: 'vip', name: 'VIP', feat: true,
      full: L.showFrom ? L.full.vip : null, val: L.price.vip,
      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="oferta">
      <div className="wrap">
        <div className="sec-head">
          <div>
            <span className="eyebrow">Sua vaga, no menor preço</span>
            <h2 className="sec-title">Garanta agora — <span className="accent">{L.label.toLowerCase()}</span></h2>
          </div>
          <p className="sec-sub">Pagamento em até 21x no cartão ou no Pix. Você preenche nome e WhatsApp e segue direto pro checkout oficial seguro.</p>
        </div>

        <div className="rm-offer-grid">
          {plans.map((p) => (
            <div className={'rm-plan' + (p.feat ? ' feat' : '')} key={p.id}>
              {p.feat && <span className="pop">Mais procurado</span>}
              <span className="lote">{p.name} · {L.label}</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">em até 21x no cartão</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(p.id)}>Comprar {p.name}</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="rm-combo">
          <span className="ghostmark" aria-hidden="true">TIME</span>
          <div className="txt">
            <span className="lote" style={{color:'var(--bs-gold)'}}>Combo · a partir de 3 ingressos</span>
            <h3>Traga o <span className="accent">seu time.</span></h3>
            <p>Quem vem com a equipe joga melhor. A partir de 3 ingressos, sua hamburgueria entra em campo com preço especial.</p>
          </div>
          <div className="price">
            <div className="v"><span className="cur">R$</span>{L.brl(L.price.combo)}</div>
            <div className="pp">cada ingresso por R$ {L.brl(L.perPerson)} · em até 21x</div>
            <a className="bs-btn bs-btn-gold bs-btn-lg" style={{marginTop:14}} onClick={()=>onBuy('combo')}>Garantir combo</a>
          </div>
        </div>
      </div>
    </section>
  );
}

// ---------- ÚLTIMA CHAMADA ----------
function RmFinal({ tone, onGo }) {
  return (
    <section className={'rm-final dot-light' + (tone && tone !== 'hot' ? ' tone-' + tone : '')}>
      <div className="fire" aria-hidden="true"></div>
      <span className="ghostmark" aria-hidden="true">NAÇÃO</span>
      <div className="rm-final-in">
        <span className="rm-badge"><span className="pip"></span>Última chamada</span>
        <h2>A Nação está em campo.<br/><span className="gold">Falta você.</span></h2>
        <p>Você já sabe que precisa estar lá. O único erro possível agora é deixar pra depois e pagar mais caro — ou ficar de fora.</p>
        <div>
          <a className="bs-btn bs-btn-gold bs-btn-lg" onClick={onGo}>Quero minha vaga agora</a>
        </div>
        <p className="micro">Pagamento seguro · Pix ou em até 21x no cartão</p>
      </div>
    </section>
  );
}

// ---------- footer enxuto ----------
function RmFooter() {
  return (
    <footer className="rm-ftr">
      <img src="assets/logo-crest-v3.png" alt="Burger Summit 2026" />
      <p>A Nação do Hambúrgueiro · 17–18 de agosto de 2026 · Centro de Convenções de Pernambuco, Recife/PE.</p>
      <div className="links">
        <a href="https://www.instagram.com/burger.summit/" target="_blank" rel="noopener">Instagram</a>
        <a href={WA} target="_blank" rel="noopener">WhatsApp</a>
      </div>
      <div className="copy">© 2026 Burger Summit · Todos os direitos reservados.</div>
    </footer>
  );
}

// ---------- APP ----------
function RmApp() {
  const [plan, setPlan] = useStateR(null);
  const L = window.BS_LOTES;
  const tone = 'hot';

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

  // contadores de virada de lote removidos a pedido (lote vira longe)

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

  const buy = (id) => {
    const names = { individual: 'Individual', vip: 'VIP', combo: 'Combo (3+)' };
    const valor = id === 'combo' ? L.price.combo : L.price[id];
    setPlan({
      label: 'Ingresso ' + names[id],
      modalidade: names[id] + ' · Remarketing',
      lote: L.label,
      valor: valor,
      url: RM_CHECKOUT[id],
    });
  };

  return (
    <div style={{ '--site-accent': 'var(--bs-brasa)', '--site-accent-bright': 'var(--bs-brasa-bright)' }}>
      <RmHeader onGo={goOferta} />
      <RmHero tone={tone} L={L} onGo={goOferta} />
      <RmCost L={L} />
      <RmObjections onGo={goOferta} />
      <RmProof />
      <RmOffer L={L} onBuy={buy} />
      <RmFinal tone={tone} onGo={goOferta} />
      <RmFooter />

      <a className="wa-float" href={WA} 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>

      <Checkout plan={plan} onClose={()=>setPlan(null)} />
    </div>
  );
}

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