/* DemoModal — "Agendar Demonstração" scheduling modal with success state */
function DemoModal({ open, onClose }) {
  const [sent, setSent] = React.useState(false);
  React.useEffect(() => {
    if (!open) { const t = setTimeout(() => setSent(false), 300); return () => clearTimeout(t); }
    const onKey = (e) => { if (e.key === "Escape") onClose(); };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [open]);
  if (!open) return null;
  return (
    <div className="lab-modal-back" onClick={onClose}>
      <div className="lab-modal" style={{ position: "relative" }} onClick={(e) => e.stopPropagation()}>
        <button className="lab-icon-btn lab-modal-close" onClick={onClose}><Icon name="x" size={17} /></button>
        {sent ? (
          <div className="lab-success">
            <div className="ic"><Icon name="check" size={28} /></div>
            <h3>Recebido!</h3>
            <p className="msub">Nossa equipe entrará em contato em breve para agendar sua demonstração.</p>
            <Button onClick={onClose} style={{ width: "100%" }}>Fechar</Button>
          </div>
        ) : (
          <>
            <h3>Agendar Demonstração</h3>
            <p className="msub">Conte um pouco sobre sua empresa e mostramos a solução ideal.</p>
            <form onSubmit={(e) => { e.preventDefault(); setSent(true); }}>
              <div className="lab-field">
                <label>Nome</label>
                <div className="lab-input"><Icon name="user" size={17} color="var(--fg-subtle)" /><input required placeholder="Seu nome" /></div>
              </div>
              <div className="lab-field">
                <label>E-mail corporativo</label>
                <div className="lab-input"><Icon name="mail" size={17} color="var(--fg-subtle)" /><input required type="email" placeholder="voce@empresa.com" /></div>
              </div>
              <div className="lab-field">
                <label>Empresa</label>
                <div className="lab-input"><Icon name="building-2" size={17} color="var(--fg-subtle)" /><input placeholder="Nome da empresa" /></div>
              </div>
              <Button style={{ width: "100%", marginTop: 8 }} size="lg">Solicitar Demonstração</Button>
            </form>
          </>
        )}
      </div>
    </div>
  );
}
window.DemoModal = DemoModal;