// Registration modal — ticket (2 paths) + prêmio (free signup). Demonstrative flow.
const MDS = window.SecretRiaExtraordinRiaDesignSystem_852e48;
const { Icon: MI, Serif: MSF, CTAButton: MCTA } = window;

function ModalShell({ onClose, children }) {
  React.useEffect(() => {
    const onKey = e => { if (e.key === "Escape") onClose(); };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [onClose]);
  return (
    <div onClick={onClose} style={{ position: "fixed", inset: 0, zIndex: 60, background: "rgba(22,3,31,.66)", backdropFilter: "blur(5px)", display: "flex", alignItems: "center", justifyContent: "center", padding: 20 }}>
      <div onClick={e => e.stopPropagation()} style={{ width: "100%", maxWidth: 500, background: "var(--surface-card)", borderRadius: "var(--radius-xl)", boxShadow: "var(--shadow-lg)", overflow: "hidden", maxHeight: "92vh", overflowY: "auto" }}>
        <div style={{ height: 4, background: "var(--gradient-gold)" }} />
        {children}
      </div>
    </div>
  );
}

function ModalHead({ badge, title, onClose }) {
  const { Badge } = MDS;
  return (
    <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", padding: "26px 30px 0" }}>
      <div>
        <Badge tone="gold">{badge}</Badge>
        <h3 style={{ ...MSF, fontSize: 30, color: "var(--text-strong)", margin: "12px 0 0", lineHeight: 1.08 }}>{title}</h3>
      </div>
      <button onClick={onClose} aria-label="Fechar" style={{ border: "none", background: "var(--surface-soft)", width: 34, height: 34, borderRadius: "50%", fontSize: 20, color: "var(--text-muted)", cursor: "pointer", lineHeight: 1, display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0 }}>×</button>
    </div>
  );
}

function TicketFlow({ onClose }) {
  const { Button, Input, Select, Checkbox } = MDS;
  const [view, setView] = React.useState("choose"); // choose | me | team | done
  if (view === "choose") {
    const opts = [
      { key: "me", icon: "Ticket", t: "Comprar para mim", d: "Checkout individual — cartão, Pix ou boleto." },
      { key: "team", icon: "Users", t: "Comprar para minha equipe", d: "Ingressos em grupo com nota fiscal. Falamos pelo WhatsApp comercial." },
    ];
    return (
      <React.Fragment>
        <ModalHead badge="Garantir meu lugar" title="Como você quer participar?" onClose={onClose} />
        <div style={{ padding: "22px 30px 30px", display: "flex", flexDirection: "column", gap: 14 }}>
          {opts.map(o => (
            <button key={o.key} onClick={() => setView(o.key)} style={{ display: "flex", gap: 16, alignItems: "center", textAlign: "left", background: "var(--surface-card)", border: "1px solid var(--border)", borderRadius: "var(--radius-lg)", padding: "18px 20px", cursor: "pointer", transition: "border-color .2s, box-shadow .2s" }} onMouseEnter={e => { e.currentTarget.style.borderColor = "var(--border-gold)"; e.currentTarget.style.boxShadow = "var(--shadow-sm)"; }} onMouseLeave={e => { e.currentTarget.style.borderColor = "var(--border)"; e.currentTarget.style.boxShadow = "none"; }}>
              <span style={{ flexShrink: 0, width: 48, height: 48, borderRadius: "var(--radius-md)", background: "var(--surface-soft)", border: "1px solid var(--border-brand)", display: "flex", alignItems: "center", justifyContent: "center", color: "var(--purple-600)" }}><MI name={o.icon} size={22} color="var(--purple-600)" /></span>
              <span style={{ flex: 1 }}>
                <span style={{ display: "block", ...MSF, fontSize: 19, color: "var(--text-strong)" }}>{o.t}</span>
                <span style={{ display: "block", fontSize: 13.5, color: "var(--text-muted)", marginTop: 3, lineHeight: 1.45 }}>{o.d}</span>
              </span>
              <MI name="ChevronRight" size={20} color="var(--gold-600)" />
            </button>
          ))}
          <p style={{ margin: "4px 0 0", fontSize: 12.5, color: "var(--text-muted)", textAlign: "center" }}>1º lote R$ 250 · somente 200 ingressos</p>
        </div>
      </React.Fragment>
    );
  }
  if (view === "me") {
    return (
      <React.Fragment>
        <ModalHead badge="Compra individual" title="Garanta sua vaga" onClose={onClose} />
        <div style={{ padding: "22px 30px 30px", display: "flex", flexDirection: "column", gap: 14 }}>
          <Input label="Nome completo" placeholder="Seu nome" />
          <Input label="E-mail" type="email" placeholder="voce@email.com" />
          <Input label="WhatsApp" placeholder="(61) 90000-0000" hint="Enviaremos seu ingresso por aqui" />
          <Select label="Lote">
            <option>1º Lote — R$ 250</option>
            <option>2º Lote — R$ 300</option>
            <option>3º Lote — R$ 340</option>
          </Select>
          <Checkbox label="Concordo com a Política de Privacidade e o tratamento dos meus dados conforme a LGPD." defaultChecked />
          <div style={{ display: "flex", gap: 12 }}>
            <Button variant="ghost" onClick={() => setView("choose")}>Voltar</Button>
            <MCTA variant="gold" fullWidth onClick={() => setView("done")}>Ir para o pagamento</MCTA>
          </div>
        </div>
      </React.Fragment>
    );
  }
  if (view === "team") {
    return (
      <React.Fragment>
        <ModalHead badge="Para a equipe" title="Leve seu time" onClose={onClose} />
        <div style={{ padding: "22px 30px 30px", display: "flex", flexDirection: "column", gap: 14 }}>
          <p style={{ margin: 0, fontSize: 14.5, lineHeight: 1.6, color: "var(--text-body)" }}>
            Presenteie sua equipe de secretariado. Emitimos <strong>nota fiscal</strong> e facilitamos o processo para RH e gestores. Fale com o time comercial:
          </p>
          <Input label="Nome da empresa" placeholder="Sua empresa" />
          <Input label="Responsável" placeholder="Quem estamos falando" />
          <Input label="Quantos ingressos?" placeholder="Ex.: 8" />
          <div style={{ display: "flex", gap: 12 }}>
            <Button variant="ghost" onClick={() => setView("choose")}>Voltar</Button>
            <MCTA variant="gold" fullWidth onClick={() => setView("done")}>Falar no WhatsApp</MCTA>
          </div>
        </div>
      </React.Fragment>
    );
  }
  return (
    <React.Fragment>
      <ModalHead badge="Tudo certo" title="Quase lá! ★" onClose={onClose} />
      <div style={{ padding: "22px 30px 32px" }}>
        <p style={{ margin: 0, fontSize: 15, lineHeight: 1.65, color: "var(--text-body)" }}>
          Este é um fluxo demonstrativo. Na página publicada, aqui você seria levada ao checkout seguro (individual) ou ao WhatsApp comercial (equipe). Nos vemos dia 28 no Teatro La Salle!
        </p>
        <MCTA variant="gold" fullWidth onClick={onClose} style={{ marginTop: 20 }}>Fechar</MCTA>
      </div>
    </React.Fragment>
  );
}

function PremioFlow({ onClose }) {
  const { Button, Input, Checkbox } = MDS;
  const [done, setDone] = React.useState(false);
  if (done) return (
    <React.Fragment>
      <ModalHead badge="Inscrição enviada" title="Sua história está no palco ★" onClose={onClose} />
      <div style={{ padding: "22px 30px 32px" }}>
        <p style={{ margin: 0, fontSize: 15, lineHeight: 1.65, color: "var(--text-body)" }}>Recebemos sua inscrição no Prêmio Secretária Extraordinária. A inscrição é gratuita e independente da compra do ingresso — te avisamos pelos próximos passos.</p>
        <MCTA variant="gold" fullWidth onClick={onClose} style={{ marginTop: 20 }}>Fechar</MCTA>
      </div>
    </React.Fragment>
  );
  return (
    <React.Fragment>
      <ModalHead badge="Inscrição gratuita" title="Prêmio Secretária Extraordinária" onClose={onClose} />
      <div style={{ padding: "22px 30px 30px", display: "flex", flexDirection: "column", gap: 14 }}>
        <p style={{ margin: 0, fontSize: 14.5, lineHeight: 1.6, color: "var(--text-body)" }}>Conte um pouco da sua trajetória. É de graça e não exige a compra do ingresso.</p>
        <Input label="Nome completo" placeholder="Seu nome" />
        <Input label="E-mail" type="email" placeholder="voce@email.com" />
        <Input label="Sua história em uma frase" placeholder="O que te torna extraordinária?" />
        <Checkbox label="Concordo com a Política de Privacidade e o tratamento dos meus dados conforme a LGPD." defaultChecked />
        <MCTA variant="gold" fullWidth onClick={() => setDone(true)}>Enviar inscrição</MCTA>
      </div>
    </React.Fragment>
  );
}

function RegisterModal({ mode, onClose }) {
  if (!mode) return null;
  return (
    <ModalShell onClose={onClose}>
      {mode === "premio" ? <PremioFlow onClose={onClose} /> : <TicketFlow onClose={onClose} />}
    </ModalShell>
  );
}

Object.assign(window, { RegisterModal });