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

function Checkout({ plan, onClose }) {
  const [done, setDone] = useStateK(false);
  useEffectK(() => {
    if (plan) { setDone(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;

  return (
    <div className="modal-scrim" onClick={onClose}>
      <div className="modal" onClick={(e)=>e.stopPropagation()}>
        <button className="modal-x" aria-label="Fechar" onClick={onClose}>×</button>
        {!done ? (
          <React.Fragment>
            <span className="m-tier">Entrar em campo</span>
            <h3>{plan}</h3>
            <p className="m-sub">Preencha seus dados pra garantir sua vaga na Nação. Um consultor confirma os detalhes e o pagamento com você.</p>
            <form onSubmit={(e)=>{e.preventDefault(); setDone(true);}}>
              <div className="field">
                <label>Nome completo</label>
                <input required placeholder="Seu nome" />
              </div>
              <div className="row2">
                <div className="field">
                  <label>WhatsApp</label>
                  <input required placeholder="(00) 00000-0000" />
                </div>
                <div className="field">
                  <label>E-mail</label>
                  <input required type="email" placeholder="voce@email.com" />
                </div>
              </div>
              <div className="field">
                <label>Sua hamburgueria</label>
                <input placeholder="Nome do seu negócio (opcional)" />
              </div>
              <button type="submit" className="bs-btn bs-btn-primary bs-btn-lg">Garantir minha vaga →</button>
            </form>
          </React.Fragment>
        ) : (
          <div className="modal-success">
            <img src="assets/patch-nacao-circular-color.png" alt="" />
            <h3>A Nação está formada!</h3>
            <p>Recebemos sua intenção para <b>{plan}</b>. Em instantes nosso time chama você no WhatsApp pra finalizar. Bem-vindo ao maior estádio do hambúrguer do Brasil. 🔥</p>
            <button className="bs-btn bs-btn-gold bs-btn-lg" onClick={onClose}>Fechar</button>
          </div>
        )}
      </div>
    </div>
  );
}

Object.assign(window, { Checkout });