function PrototypeModal() {
  const [open, setOpen] = React.useState(false);
  const [loading, setLoading] = React.useState(true);

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

  React.useEffect(() => {
    document.body.style.overflow = open ? "hidden" : "";
    return () => { document.body.style.overflow = ""; };
  }, [open]);

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

  if (!open) return null;

  return (
    <div className="proto-modal" onClick={() => setOpen(false)}>
      <div className="proto-modal-inner" onClick={e => e.stopPropagation()}>
        <header className="proto-modal-header">
          <div className="proto-modal-meta">
            <span className="proto-modal-badge">PROTOTYPE</span>
            <span className="proto-modal-title">Event Producer Portal</span>
            <span className="proto-modal-note">Explore freely — your data isn't saved.</span>
          </div>
          <div className="proto-modal-actions">
            <a href="#contact" className="btn btn-ghost-dark proto-modal-cta" onClick={() => setOpen(false)}>
              Talk to a Specialist
            </a>
            <a href="#contact" className="btn btn-primary proto-modal-cta" onClick={() => setOpen(false)}>
              Get Started
            </a>
            <button className="proto-modal-close" onClick={() => setOpen(false)} aria-label="Close prototype">
              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round"><path d="M6 6l12 12M18 6L6 18"/></svg>
            </button>
          </div>
        </header>
        <div className="proto-modal-stage">
          {loading && (
            <div className="proto-modal-loading">
              <div className="proto-modal-spinner"></div>
              <div className="proto-modal-loading-text">Loading prototype…</div>
              <div className="proto-modal-loading-sub">Unpacking the live Event Producer Portal</div>
            </div>
          )}
          <iframe
            className="proto-modal-iframe"
            src="assets/Primo Event Producer Portal.html"
            title="Primo Event Producer Portal — Live Prototype"
            onLoad={() => setLoading(false)}
            style={{opacity: loading ? 0 : 1}}
          />
        </div>
      </div>
    </div>
  );
}

window.PrototypeModal = PrototypeModal;