// service-modal.jsx — a service detail pop-up that layers ON TOP of the tier
// modal (or opens from the Services-lens footer). Sibling of edu-modal.jsx:
// reuses the l180-backdrop / l180-sheet--edu styling and close behavior. Reads
// its content from a service in window.L180_SERVICES. Its primary CTA hands the
// resolved { tier, stream } back to the app so the existing onStream() pipeline
// routes it. Exports window.L180ServiceModal.

function L180ServiceModal({ service, hue, onClose, onStart, onSchedule }) {
  const [closing, setClosing] = React.useState(false);
  const accent = hue || window.L180_BRAND.cyan;
  const isExternal = service.standalone === "external";

  const requestClose = React.useCallback(() => {
    setClosing(true);
    setTimeout(() => onClose(), 260);
  }, [onClose]);

  React.useEffect(() => {
    function onKey(e) { if (e.key === "Escape") requestClose(); }
    document.addEventListener("keydown", onKey);
    return () => document.removeEventListener("keydown", onKey);
  }, [requestClose]);

  // tier chips — where this service is delivered inside the process
  const tierNames = (service.tiers || [])
    .map((n) => (window.L180_TIERS.find((t) => t.n === n) || {}).name)
    .filter(Boolean);

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

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

        <div className="l180-sheet-inner">
          <div className="l180-eyebrow" style={{ color: accent }}>{service.name}</div>
          <h2 className="l180-edu-title">{service.tagline}</h2>
          {service.blurb && <p className="l180-edu-lead">{service.blurb}</p>}

          {tierNames.length > 0 && (
            <div className="l180-servicechips" style={{ "--hue": accent, marginTop: 14 }}>
              <span className="l180-depthlabel" style={{ marginRight: 4 }}>Delivered in</span>
              {tierNames.map((nm, i) => (
                <span key={i} className="l180-servicechip" style={{ "--hue": accent }}>{nm}</span>
              ))}
            </div>
          )}

          <div className="l180-edu-foot">
            {isExternal ? (
              <button className="l180-bigcta" style={{ "--hue": accent }}
                      onClick={() => { if (service.link) window.open(service.link, "_blank", "noopener,noreferrer"); }}>
                See it on life180.com <span className="arr">→</span>
              </button>
            ) : service.route ? (
              <button className="l180-bigcta" style={{ "--hue": accent }} onClick={onStart}>
                Get started <span className="arr">→</span>
              </button>
            ) : (
              <button className="l180-bigcta" style={{ "--hue": accent }} onClick={onSchedule}>
                Schedule a call <span className="arr">→</span>
              </button>
            )}
            {/* secondary action — always offer a call unless that's already the primary */}
            {(isExternal || service.route) && (
              <button className="l180-ghostbtn" onClick={onSchedule}>Schedule a call</button>
            )}
          </div>
        </div>
      </div>
    </div>
  );
}

window.L180ServiceModal = L180ServiceModal;