/* ============================================================
   Outputs — real screens from the user study
   Three events in one continuous narrative drive, plus
   additional moments from the journey.
   ============================================================ */

const NARRATIVE_EVENTS = [
  {
    src: "/case-study/assets/study/briefing.JPG",
    num: "01",
    event: "Briefing",
    mode: "Passive",
    desc: "On entering the vehicle, the system surfaces a daily briefing built from the driver's calendar and interests.",
  },
  {
    src: "/case-study/assets/study/search.JPG",
    num: "02",
    event: "Search",
    mode: "Active",
    desc: "Having left home without eating, the driver asks the car to find an intermediate stop for breakfast along the route.",
  },
  {
    src: "/case-study/assets/study/traffic.JPG",
    num: "03",
    event: "Notification",
    mode: "Reactive",
    desc: "En route to the selected stop, the vehicle encounters an unexpected traffic jam and surfaces a notification with news suggestions.",
  },
]

const FURTHER_OUTPUTS = [
  {
    src: "/case-study/assets/study/briefing_2.JPG",
    title: "Event: Briefing",
    desc: "",
  },
  {
    src: "/case-study/assets/study/search_2.JPG",
    title: "Event: Search",
    desc: "",
  },
  {
    src: "/case-study/assets/study/traffic_2.JPG",
    title: "Event: Traffic Jam",
    desc: "",
  },
]

const ALL_OUTPUTS = [
  ...NARRATIVE_EVENTS.map((e) => ({
    src: e.src,
    title: `${e.num} · ${e.event} · ${e.mode}`,
    // desc: e.desc,
  })),
  ...FURTHER_OUTPUTS,
]

function Outputs() {
  const [open, setOpen] = useState(null)

  useEffect(() => {
    if (open === null) return
    const onKey = (e) => {
      if (e.key === "Escape") setOpen(null)
      if (e.key === "ArrowRight") setOpen((i) => (i + 1) % ALL_OUTPUTS.length)
      if (e.key === "ArrowLeft")
        setOpen((i) => (i - 1 + ALL_OUTPUTS.length) % ALL_OUTPUTS.length)
    }
    window.addEventListener("keydown", onKey)
    document.body.style.overflow = "hidden"
    return () => {
      window.removeEventListener("keydown", onKey)
      document.body.style.overflow = ""
    }
  }, [open])

  return (
    <section
      id="outputs"
      style={{
        background: "var(--page-card)",
        borderTop: "1px solid var(--page-line)",
        borderBottom: "1px solid var(--page-line)",
      }}
    >
      <div className="wrap">
        <SectionHead
          num="06 — Outputs"
          eyebrow="Generated UIs from the user study"
          title="What the participants actually saw."
        >
          <p className="lede">
            Participants were placed inside a continuous travel narrative: an
            early-morning drive from Böblingen to Munich for the IAA Mobility
            event. Within that drive, the session passed through three events
            designed to test three different interaction modes.
          </p>
        </SectionHead>

        {/* Three narrative events */}
        <div className="op-narr">
          {NARRATIVE_EVENTS.map((e, i) => (
            <button
              key={i}
              className="op-narr-tile"
              onClick={() => setOpen(i)}
              aria-label={`Open ${e.event}`}
            >
              <div className="op-narr-meta">
                <span className="mono op-narr-num">{e.num}</span>
                <span className="mono op-narr-mode">{e.mode}</span>
              </div>
              <h3 className="op-narr-event">{e.event}</h3>
              {/* <p className="op-narr-desc">{e.desc}</p> */}
              <div className="op-narr-img-wrap">
                <img
                  className="op-narr-img"
                  src={e.src}
                  alt={e.event}
                  loading="lazy"
                />
                <span className="op-tile-zoom" aria-hidden="true">
                  ⤢
                </span>
              </div>
            </button>
          ))}
        </div>

        {/* Connector line */}
        <div className="op-divider">
          <span className="mono">FURTHER OUTPUTS</span>
        </div>

        <div className="op-grid">
          {FURTHER_OUTPUTS.map((item, i) => (
            <button
              key={i}
              className="op-tile"
              onClick={() => setOpen(NARRATIVE_EVENTS.length + i)}
              aria-label={"Open " + item.title}
            >
              <img
                className="op-tile-img"
                src={item.src}
                alt={item.title}
                loading="lazy"
              />
              <span className="op-tile-zoom" aria-hidden="true">
                ⤢
              </span>
              <div className="op-tile-cap">
                <div className="op-tile-title">{item.title}</div>
                {/* <div className="op-tile-desc">{item.desc}</div> */}
              </div>
            </button>
          ))}
        </div>
      </div>

      {/* Lightbox */}
      {open !== null && (
        <div
          className="op-lb"
          onClick={() => setOpen(null)}
          role="dialog"
          aria-modal="true"
        >
          <button
            className="op-lb-close"
            onClick={(e) => {
              e.stopPropagation()
              setOpen(null)
            }}
            aria-label="Close"
          >
            ×
          </button>
          <button
            className="op-lb-prev"
            onClick={(e) => {
              e.stopPropagation()
              setOpen((i) => (i - 1 + ALL_OUTPUTS.length) % ALL_OUTPUTS.length)
            }}
            aria-label="Previous"
          >
            ‹
          </button>
          <button
            className="op-lb-next"
            onClick={(e) => {
              e.stopPropagation()
              setOpen((i) => (i + 1) % ALL_OUTPUTS.length)
            }}
            aria-label="Next"
          >
            ›
          </button>
          <div className="op-lb-stage" onClick={(e) => e.stopPropagation()}>
            <img src={ALL_OUTPUTS[open].src} alt={ALL_OUTPUTS[open].title} />
            <div className="op-lb-cap">
              <div className="mono op-lb-idx">
                {String(open + 1).padStart(2, "0")} /{" "}
                {String(ALL_OUTPUTS.length).padStart(2, "0")}
              </div>
              <div className="op-lb-title">{ALL_OUTPUTS[open].title}</div>
              <div className="op-lb-desc">{ALL_OUTPUTS[open].desc}</div>
            </div>
          </div>
        </div>
      )}

      <style>{`
        /* Three narrative events */
        .op-narr {
          display: grid;
          grid-template-columns: repeat(3, 1fr);
          gap: 24px;
          margin-bottom: 64px;
          position: relative;
        }
        /* Sequence connector */
        .op-narr::before {
          content: "";
          position: absolute;
          top: 38px;
          left: 8%;
          right: 8%;
          height: 1px;
          background: repeating-linear-gradient(to right, var(--page-line-strong) 0 4px, transparent 4px 8px);
          z-index: 0;
        }
        .op-narr-tile {
          background: transparent;
          border: 0;
          padding: 0;
          text-align: left;
          font-family: var(--font-sans);
          color: var(--page-fg);
          cursor: zoom-in;
          display: flex;
          flex-direction: column;
          gap: 12px;
          position: relative;
          z-index: 1;
        }
        .op-narr-meta {
          display: flex;
          align-items: center;
          gap: 10px;
          background: var(--page-card);
          padding: 4px 0;
        }
        .op-narr-num {
          display: inline-flex;
          align-items: center;
          justify-content: center;
          width: 28px;
          height: 28px;
          border-radius: 999px;
          background: var(--page-fg);
          color: var(--page-card);
          font-size: 11px;
          font-weight: 600;
        }
        .op-narr-mode {
          font-size: 11px;
          letter-spacing: 0.1em;
          color: var(--page-accent);
          padding: 4px 8px;
          border: 1px solid var(--page-accent);
          border-radius: 999px;
          text-transform: uppercase;
        }
        .op-narr-event {
          font-family: var(--font-display);
          font-style: italic;
          font-size: 32px;
          line-height: 1;
          letter-spacing: -0.01em;
          margin: 4px 0 0;
          color: var(--page-fg);
        }
        .op-narr-desc {
          font-size: 13px;
          line-height: 1.55;
          color: var(--page-muted);
          margin: 0 0 4px;
          max-width: 36ch;
        }
        .op-narr-img-wrap {
          position: relative;
          border-radius: 12px;
          overflow: hidden;
          background: #000;
          border: 1px solid var(--page-line);
          transition: transform 200ms cubic-bezier(.2,0,0,1), box-shadow 200ms;
        }
        .op-narr-tile:hover .op-narr-img-wrap {
          transform: translateY(-2px);
          box-shadow: 0 16px 40px rgba(0,0,0,0.18);
        }
        .op-narr-img {
          width: 100%;
          aspect-ratio: 4 / 3;
          object-fit: cover;
          display: block;
        }

        /* Divider */
        .op-divider {
          display: flex;
          align-items: center;
          gap: 16px;
          margin-bottom: 24px;
        }
        .op-divider .mono {
          font-size: 11px;
          letter-spacing: 0.12em;
          color: var(--page-muted);
          flex-shrink: 0;
        }
        .op-divider::after {
          content: "";
          flex: 1;
          height: 1px;
          background: var(--page-line-strong);
        }

        /* Further outputs grid */
        .op-grid {
          display: grid;
          grid-template-columns: repeat(3, 1fr);
          gap: 16px;
        }
        .op-tile {
          background: var(--page-fg);
          border: 1px solid var(--page-line);
          border-radius: 12px;
          overflow: hidden;
          cursor: zoom-in;
          padding: 0;
          text-align: left;
          font-family: var(--font-sans);
          color: #F4EFDF;
          transition: transform 200ms cubic-bezier(.2,0,0,1), box-shadow 200ms;
          display: flex;
          flex-direction: column;
          position: relative;
        }
        .op-tile:hover {
          transform: translateY(-2px);
          box-shadow: 0 16px 40px rgba(0,0,0,0.18);
        }
        .op-tile-img {
          width: 100%;
          aspect-ratio: 4 / 3;
          object-fit: cover;
          display: block;
          background: #000;
        }
        .op-tile-cap {
          padding: 12px 14px;
          border-top: 1px solid rgba(244,239,223,0.1);
        }
        .op-tile-title {
          font-size: 13px;
          font-weight: 600;
          color: #F4EFDF;
          line-height: 1.3;
          margin-bottom: 4px;
        }
        .op-tile-desc {
          font-size: 11px;
          color: rgba(244,239,223,0.6);
          line-height: 1.4;
        }
        .op-tile-zoom {
          position: absolute;
          top: 10px;
          right: 10px;
          background: rgba(0,0,0,0.5);
          backdrop-filter: blur(6px);
          color: #fff;
          width: 28px;
          height: 28px;
          border-radius: 999px;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 14px;
          opacity: 0;
          transition: opacity 200ms;
          pointer-events: none;
        }
        .op-tile:hover .op-tile-zoom,
        .op-narr-tile:hover .op-tile-zoom { opacity: 1; }

        /* Lightbox */
        .op-lb {
          position: fixed;
          inset: 0;
          background: rgba(10, 10, 12, 0.92);
          backdrop-filter: blur(8px);
          z-index: 9999;
          display: flex;
          align-items: center;
          justify-content: center;
          padding: 40px;
          animation: opLbIn 240ms ease-out;
        }
        @keyframes opLbIn { from { opacity: 0; } to { opacity: 1; } }
        .op-lb-stage {
          max-width: 1100px;
          width: 100%;
          display: grid;
          grid-template-columns: 1fr 320px;
          gap: 32px;
          align-items: center;
        }
        .op-lb-stage img {
          width: 100%;
          max-height: 80vh;
          object-fit: contain;
          border-radius: 12px;
          background: #000;
        }
        .op-lb-cap {
          color: #F4EFDF;
          display: flex;
          flex-direction: column;
          gap: 14px;
        }
        .op-lb-idx {
          font-size: 11px;
          color: var(--page-accent);
          letter-spacing: 0.08em;
        }
        .op-lb-title {
          font-family: var(--font-display);
          font-style: italic;
          font-size: 28px;
          line-height: 1.1;
          letter-spacing: -0.01em;
        }
        .op-lb-desc {
          font-size: 14px;
          color: rgba(244,239,223,0.75);
          line-height: 1.5;
        }
        .op-lb-close, .op-lb-prev, .op-lb-next {
          position: absolute;
          background: rgba(255,255,255,0.08);
          backdrop-filter: blur(8px);
          color: #F4EFDF;
          border: 1px solid rgba(255,255,255,0.15);
          border-radius: 999px;
          width: 44px;
          height: 44px;
          display: flex;
          align-items: center;
          justify-content: center;
          cursor: pointer;
          font-size: 22px;
          line-height: 1;
          transition: background 180ms;
        }
        .op-lb-close:hover, .op-lb-prev:hover, .op-lb-next:hover {
          background: rgba(255,255,255,0.18);
        }
        .op-lb-close { top: 24px; right: 24px; }
        .op-lb-prev  { left: 24px; top: 50%; transform: translateY(-50%); }
        .op-lb-next  { right: 24px; top: 50%; transform: translateY(-50%); }

        @media (max-width: 880px) {
          .op-narr { grid-template-columns: 1fr; gap: 32px; }
          .op-narr::before { display: none; }
          .op-grid { grid-template-columns: 1fr 1fr; }
        }
        @media (max-width: 640px) {
          .op-grid { grid-template-columns: 1fr; }
          .op-lb { padding: 16px; }
          .op-lb-stage { grid-template-columns: 1fr; gap: 16px; }
          .op-lb-stage img { max-height: 60vh; }
          .op-lb-close { top: 12px; right: 12px; width: 36px; height: 36px; font-size: 18px; }
          .op-lb-prev, .op-lb-next { width: 36px; height: 36px; font-size: 18px; }
          .op-lb-prev { left: 8px; }
          .op-lb-next { right: 8px; }
        }
      `}</style>
    </section>
  )
}

window.Outputs = Outputs