function PrototypeGate() {
  const [open, setOpen] = React.useState(false);
  const [submitting, setSubmitting] = React.useState(false);
  const [form, setForm] = React.useState({ name: "", phone: "", email: "", company: "" });
  const [errors, setErrors] = React.useState({});

  React.useEffect(() => {
    const handler = () => {
      setOpen(true);
      setErrors({});
    };
    document.addEventListener("open-prototype-gate", handler);
    return () => document.removeEventListener("open-prototype-gate", handler);
  }, []);

  React.useEffect(() => {
    if (!open) return;
    const onKey = (e) => { if (e.key === "Escape") setOpen(false); };
    document.body.style.overflow = "hidden";
    document.addEventListener("keydown", onKey);
    return () => {
      document.body.style.overflow = "";
      document.removeEventListener("keydown", onKey);
    };
  }, [open]);

  const update = (k, v) => setForm(f => ({ ...f, [k]: v }));

  const validate = () => {
    const e = {};
    if (!form.name.trim()) e.name = "Required";
    if (!form.phone.trim()) e.phone = "Required";
    if (!form.email.trim()) e.email = "Required";
    else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(form.email)) e.email = "Invalid email";
    if (!form.company.trim()) e.company = "Required";
    return e;
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    const errs = validate();
    if (Object.keys(errs).length) { setErrors(errs); return; }
    setSubmitting(true);
    setTimeout(() => {
      setSubmitting(false);
      setOpen(false);
      document.dispatchEvent(new CustomEvent("prototype-gate-passed", { detail: form }));
      const target = document.getElementById("prototype");
      if (target) target.scrollIntoView({ behavior: "smooth", block: "start" });
    }, 350);
  };

  if (!open) return null;

  return (
    <div className="gate-overlay" onClick={() => setOpen(false)}>
      <div className="gate-modal" onClick={e => e.stopPropagation()}>
        <button className="gate-close" onClick={() => setOpen(false)} aria-label="Close">
          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round"><path d="M6 6l12 12M18 6L6 18"/></svg>
        </button>
        <div className="gate-head">
          <div className="gate-eyebrow">Quick intro</div>
          <h3>See the live prototype</h3>
          <p>Tell us who you are and we'll unlock the interactive walkthrough. No spam — we'll only follow up if you ask.</p>
        </div>
        <form className="gate-form" onSubmit={handleSubmit} noValidate>
          <label className="gate-field">
            <span>Your name</span>
            <input type="text" value={form.name} onChange={e => update("name", e.target.value)} placeholder="Alex Morgan" autoFocus />
            {errors.name && <em>{errors.name}</em>}
          </label>
          <label className="gate-field">
            <span>Phone</span>
            <input type="tel" value={form.phone} onChange={e => update("phone", e.target.value)} placeholder="(555) 123-4567" />
            {errors.phone && <em>{errors.phone}</em>}
          </label>
          <label className="gate-field">
            <span>Email</span>
            <input type="email" value={form.email} onChange={e => update("email", e.target.value)} placeholder="alex@yourevents.com" />
            {errors.email && <em>{errors.email}</em>}
          </label>
          <label className="gate-field">
            <span>Event producer / organization</span>
            <input type="text" value={form.company} onChange={e => update("company", e.target.value)} placeholder="Spring Showcase Productions" />
            {errors.company && <em>{errors.company}</em>}
          </label>
          <button type="submit" className="btn btn-primary gate-submit" disabled={submitting}>
            {submitting ? "Loading…" : "Show me the prototype"}
            {!submitting && <Icon name="arrow-right" size={16}/>}
          </button>
          <p className="gate-fine">By continuing, you agree to be contacted by Primo about your inquiry.</p>
        </form>
      </div>
    </div>
  );
}

window.PrototypeGate = PrototypeGate;