// Burger Summit 2026 — Modal de inscrição / checkout (fake)
const { useState: useStateK, useEffect: useEffectK } = React;

function Checkout({ plan, onClose }) {
  const [sent, setSent] = useStateK(false);
  useEffectK(() => {
    if (plan) { setSent(false); }
    const onKey = (e) => { if (e.key === 'Escape') onClose(); };
    if (plan) document.addEventListener('keydown', onKey);
    return () => document.removeEventListener('keydown', onKey);
  }, [plan]);

  if (!plan) return null;

  const submit = (e) => {
    e.preventDefault();
    const f = e.target;
    // Envia o lead para a planilha do Google (se configurado) antes de redirecionar.
    // Quebra o nome completo em nome + sobrenome (planilha/Apps Script seguem iguais).
    var completo = f.nomeCompleto.value.trim().replace(/\s+/g, ' ');
    var partes = completo.split(' ');
    if (window.BS_LEADS) {
      window.BS_LEADS.send({
        nome: partes.shift() || '',
        sobrenome: partes.join(' '),
        whatsapp: f.whatsapp.value.trim(),
        modalidade: plan.modalidade || plan.label,
        lote: plan.lote || '',
        valor: plan.valor != null ? plan.valor : '',
        checkout: plan.url || '',
      });
    }
    setSent(true);
    // Redireciona para o checkout da modalidade após preencher os dados.
    if (plan.url) {
      setTimeout(() => { window.location.href = plan.url; }, 900);
    }
  };

  return (
    <div className="modal-scrim" onClick={onClose}>
      <div className="modal" onClick={(e)=>e.stopPropagation()}>
        <button className="modal-x" aria-label="Fechar" onClick={onClose}>×</button>
        {!sent ? (
          <React.Fragment>
            <span className="m-tier">Entrar em campo</span>
            <h3>{plan.label}</h3>
            <p className="m-sub">Preencha seus dados pra seguir para o pagamento seguro do seu ingresso.</p>
            <form onSubmit={submit}>
              <div className="field">
                <label>Nome completo</label>
                <input name="nomeCompleto" required placeholder="Seu nome completo" />
              </div>
              <div className="field">
                <label>WhatsApp</label>
                <input name="whatsapp" required placeholder="(00) 00000-0000" inputMode="tel" />
              </div>
              <button type="submit" className="bs-btn bs-btn-primary bs-btn-lg">Ir para o pagamento →</button>
              <p className="m-secure">
                <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4"><rect x="3" y="11" width="18" height="11" rx="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>
                Pagamento seguro · você será redirecionado para o checkout oficial.
              </p>
            </form>
          </React.Fragment>
        ) : (
          <div className="modal-success">
            <img src="assets/patch-nacao-circular-color.png" alt="" />
            <h3>Redirecionando…</h3>
            <p>Estamos te levando para o pagamento seguro de <b>{plan.label}</b>. Se a página não abrir, clique no botão abaixo. 🔥</p>
            <a className="bs-btn bs-btn-gold bs-btn-lg" href={plan.url}>Ir para o pagamento agora</a>
          </div>
        )}
      </div>
    </div>
  );
}

Object.assign(window, { Checkout });