const { Dialog, Button, Input } = window.JabberwockeeDesignSystem_646027;
function ContactDialog({ open, onClose }) {
  const [email, setEmail] = React.useState("");
  const [err, setErr] = React.useState("");
  const [sent, setSent] = React.useState(false);
  const close = () => { onClose(); setTimeout(() => { setSent(false); setErr(""); setEmail(""); }, 300); };
  const submit = () => { if (!/.+@.+\..+/.test(email)) { setErr("Enter a valid email"); return; } setErr(""); setSent(true); };
  if (sent) return (
    <Dialog open={open} onClose={close} width={560} index="Contact" title={<>Thanks. <em>We'll be in touch.</em></>} footer={<Button variant="secondary" onClick={close}>Close</Button>}>
      <p style={{ font: "var(--type-body-lg)", maxWidth: "36ch" }}>Your message has been received. We reply within two days.</p>
    </Dialog>
  );
  return (
    <Dialog open={open} onClose={close} width={560} index="Contact" title={<>Get in <em>touch.</em></>} footer={<><Button variant="ghost" onClick={close}>Cancel</Button><Button arrow onClick={submit}>Send</Button></>}>
      <Input label="Name" placeholder="Your name" />
      <Input label="Email" type="email" placeholder="you@studio.com" value={email} onChange={(e) => setEmail(e.target.value)} error={err} />
      <label style={{ display: "grid", gap: 8, font: "var(--type-body-sm)", color: "var(--text-body)" }}>
        <span style={{ color: "var(--text-strong)" }}>Message</span>
        <textarea rows={5} placeholder="How can we help?" style={{ resize: "vertical", padding: "var(--pad-field-y) var(--pad-field-x)", border: "1px solid var(--line-strong)", background: "var(--surface-field)", borderRadius: "var(--radius-1)", font: "var(--type-body)", color: "var(--text-display)", outline: "none" }} />
      </label>
    </Dialog>
  );
}
window.ContactDialog = ContactDialog;