// modal-tier.jsx — teaser modal for a tier. Per spec it's a TEASER + CTA, not
// a content container: tier label, tagline, three stream highlight cards each
// with a one-liner + CTA into that stream's funnel. Agent mode reveals the
// deeper depth layer. Exports window.L180TierModal.

function L180TierModal({ tier, mode, onClose, onPrev, onNext, onStream }) {
  const [closing, setClosing] = React.useState(false);
  // graceful exit: play the sink/fade, then unmount
  const requestClose = React.useCallback((after) => {
    setClosing(true);
    setTimeout(() => { (after || onClose)(); }, 280);
  }, [onClose]);

  React.useEffect(() => {
    function onKey(e) {
      if (e.key === "Escape") requestClose();
      else if (e.key === "ArrowLeft" && onPrev) onPrev();
      else if (e.key === "ArrowRight" && onNext) onNext();
    }
    document.addEventListener("keydown", onKey);
    document.body.style.overflow = "hidden";
    return () => { document.removeEventListener("keydown", onKey); document.body.style.overflow = ""; };
  }, [tier, requestClose, onPrev, onNext]);

  const hue = window.l180TierHue(tier.n);
  const isAgent = mode === "agent";

  return (
    <div className={"l180-backdrop" + (closing ? " closing" : "")} onClick={() => requestClose()}>
      <div className="l180-sheet" onClick={(e) => e.stopPropagation()}
           style={{ borderTop: `2px solid ${hue}`, "--hue": hue }}>

        <button className="l180-close" onClick={() => requestClose()} aria-label="Close">✕</button>

        {/* tier up / down navigation — grouped top-right beside close */}
        {(onPrev || onNext) && (
          <div className="l180-navgroup">
            {onNext && <button className="l180-navarrow" onClick={onNext} aria-label="Higher tier">↑</button>}
            {onPrev && <button className="l180-navarrow" onClick={onPrev} aria-label="Lower tier">↓</button>}
          </div>
        )}

        <div className="l180-sheet-inner">
          {/* duotone tier image (user-fillable) */}
          <div className="l180-tierimg-band">
            <image-slot id={`l180tierimg-${tier.n}`} shape="rect" placeholder={`Drop a photo for ${tier.name}`}></image-slot>
            <div className="l180-tierimg-tint" />
            <div className="l180-tierimg-fade" />
          </div>

          {/* header */}
          <div style={{ position: "relative", zIndex: 2 }}>
            <div className="l180-eyebrow" style={{ color: hue }}>
              Tier 0{tier.n}{tier.routing ? " · The Routing Tier" : ""}
            </div>
            <h2 className="l180-modal-title">{tier.name}</h2>
            <div className="l180-positioning">{tier.positioning}</div>
            <p className="l180-tagline-q">“{tier.tagline}”</p>
            {tier.intro && <p className="l180-intro">{tier.intro}</p>}
          </div>

          {/* stream cards */}
          <div className="l180-streams">
            {tier.streams.map((s, i) => (
              <div key={i} className="l180-streamcard" style={{ "--hue": hue }}>
                <div className="l180-streamcard-top">
                  <div className="l180-streamnum" style={{ color: `color-mix(in oklch, ${hue} 55%, #141415)`, borderColor: `color-mix(in oklch, ${hue} 50%, transparent)`, background: `color-mix(in oklch, ${hue} 12%, transparent)` }}>
                    {s.isGateway ? "★" : i + 1}
                  </div>
                  <h3 className="l180-streamname">{s.name}</h3>
                </div>
                <p className="l180-streamone">{s.one}</p>

                {/* depth surface */}
                <div className="l180-depth">
                  <span className="l180-depthlabel">Public teaser</span>
                  <p>{s.website}</p>
                </div>
                {isAgent && (
                  <div className="l180-depth l180-depth-agent">
                    <span className="l180-depthlabel l180-depthlabel-agent">Agent layer</span>
                    <p>{s.agent}</p>
                  </div>
                )}

                <button className="l180-streamcta" style={{ "--hue": hue }}
                        onClick={() => requestClose(() => onStream(tier, s))}>
                  {s.cta} <span className="arr">→</span>
                </button>
              </div>
            ))}
          </div>

          <div className="l180-sheet-foot">
            <span>{isAgent
              ? "Agent view — deeper talking points shown. Each button opens the guided walkthrough you do together."
              : "Each option opens a short guided walkthrough. Switch to Agent view for the deeper talking points."}</span>
          </div>
        </div>
      </div>
    </div>
  );
}

window.L180TierModal = L180TierModal;