function LivePrototype() {
  const [unlocked, setUnlocked] = React.useState(() => {
    try { return sessionStorage.getItem("primo-proto-unlocked") === "1"; }
    catch (e) { return false; }
  });

  React.useEffect(() => {
    const handler = () => {
      setUnlocked(true);
      try { sessionStorage.setItem("primo-proto-unlocked", "1"); } catch (e) {}
    };
    document.addEventListener("prototype-gate-passed", handler);
    return () => document.removeEventListener("prototype-gate-passed", handler);
  }, []);

  const openGate = () => {
    if (unlocked) return;
    document.dispatchEvent(new CustomEvent("open-prototype-gate"));
  };

  return (
    <section id="prototype" className="prototype">
      <div className="wrap">
        <div className="section-head">
          <span className="eyebrow"><span className="dot"></span>Live Prototype · Try it yourself</span>
          <h2>Explore the Event Producer Portal.</h2>
          <p>Click around the real Primo workflow below — set up an event, build ticket tiers, add sponsors. No login required.</p>
        </div>

        <div className={"prototype-frame" + (unlocked ? " unlocked" : "")}>
          <div className="prototype-chrome">
            <div className="prototype-dots"><i></i><i></i><i></i></div>
            <div className="prototype-url">app.primoticketing.com / events / new</div>
            <div className="prototype-badge">{unlocked ? "LIVE" : "PROTOTYPE"}</div>
          </div>
          <div className="prototype-stage">
            <iframe
              className="prototype-iframe"
              src="assets/Primo Event Producer Portal.html"
              title="Primo Event Producer Portal — Live Prototype"
              tabIndex={unlocked ? 0 : -1}
            />
            {!unlocked && (
              <button
                type="button"
                className="prototype-cover"
                onClick={openGate}
                aria-label="Unlock the prototype"
              >
                <span className="prototype-cover-card">
                  <span className="prototype-cover-icon">
                    <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><rect x="3" y="11" width="18" height="11" rx="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>
                  </span>
                  <span className="prototype-cover-title">Click to start the walkthrough</span>
                  <span className="prototype-cover-sub">Tell us a bit about you to unlock the live prototype</span>
                  <span className="prototype-cover-cta">
                    Continue
                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></svg>
                  </span>
                </span>
              </button>
            )}
          </div>
        </div>

        <p className="prototype-note">
          <Icon name="check-circle" size={16}/>
          This is a prototype, not a production environment — your data isn't saved.
        </p>
      </div>
    </section>
  );
}

window.LivePrototype = LivePrototype;