/* Shift Handover case study — content sections.
   openpack x Akshil Shah — digitalising the shift handover.
   Uses shared utilities from case-study/util.jsx (loaded before this file). */

const { useState: shSt, useRef: shRf, useEffect: shEff } = React

/* Local InView hook (for count-up trigger on stat cards) */
function shUseInView(threshold) {
  threshold = threshold || 0.18
  var ref = shRf(null)
  var state = shSt(false)
  var seen = state[0],
    setSeen = state[1]
  shEff(function () {
    var io = new IntersectionObserver(
      function (es) {
        es.forEach(function (e) {
          if (e.isIntersecting) {
            setSeen(true)
            io.disconnect()
          }
        })
      },
      { threshold: threshold },
    )
    if (ref.current) io.observe(ref.current)
    return function () {
      io.disconnect()
    }
  }, [])
  return [ref, seen]
}

/* Reveal wrapper */
function ShRv({ children, delay }) {
  const ref = useReveal()
  return (
    <div
      className="reveal"
      ref={ref}
      style={delay ? { transitionDelay: delay + "ms" } : {}}
    >
      {children}
    </div>
  )
}

/* Body: indented content column (aligns under the section-head number) */
function ShBody({ children, style }) {
  return (
    <div
      className="sh-body-col"
      style={Object.assign(
        {
          display: "grid",
          gridTemplateColumns: "200px 1fr",
          gap: 48,
          marginTop: 8,
        },
        style || {},
      )}
    >
      <div />
      <div style={{ maxWidth: "72ch" }}>{children}</div>
    </div>
  )
}

/* Para: standard body paragraph */
function ShPara({ children, style }) {
  return (
    <p
      style={Object.assign(
        {
          fontSize: 17,
          lineHeight: 1.7,
          color: "#444",
          maxWidth: "68ch",
          margin: "0 0 20px",
          textWrap: "pretty",
        },
        style || {},
      )}
    >
      {children}
    </p>
  )
}

/* Bulleted list — small accent marker, two-column option */
function ShBullets({ items, columns }) {
  columns = columns || 1
  return (
    <ul
      style={{
        listStyle: "none",
        margin: 0,
        padding: 0,
        display: "grid",
        gridTemplateColumns: `repeat(${columns}, 1fr)`,
        gap: "14px 40px",
      }}
    >
      {items.map((it, i) => (
        <li
          key={i}
          style={{
            display: "grid",
            gridTemplateColumns: "18px 1fr",
            gap: 12,
            alignItems: "baseline",
            fontSize: 16.5,
            lineHeight: 1.55,
            color: "#444",
          }}
        >
          <span
            style={{
              color: "var(--page-accent)",
              fontFamily: "var(--font-display)",
              fontStyle: "italic",
              fontSize: 20,
            }}
          >
            •
          </span>
          <span style={{ textWrap: "pretty" }}>{it}</span>
        </li>
      ))}
    </ul>
  )
}

/* Labeled row — 200px uppercase label + content, used under a SectionHead */
function ShLabeledRow({ label, children, delay }) {
  return (
    <div
      className="sh-two-col"
      style={{
        display: "grid",
        gridTemplateColumns: "200px 1fr",
        gap: 48,
        alignItems: "start",
        marginBottom: 8,
      }}
    >
      <ShRv>
        <div className="h-eyebrow" style={{ color: "var(--page-muted)" }}>
          {label}
        </div>
      </ShRv>
      <ShRv delay={delay || 80}>{children}</ShRv>
    </div>
  )
}

/* Fullscreen image lightbox */
function ShLightbox({ src, alt, onClose }) {
  shEff(
    function () {
      function onKey(e) {
        if (e.key === "Escape") onClose()
      }
      document.addEventListener("keydown", onKey)
      document.body.style.overflow = "hidden"
      return function () {
        document.removeEventListener("keydown", onKey)
        document.body.style.overflow = ""
      }
    },
    [onClose],
  )

  return (
    <div
      onClick={onClose}
      style={{
        position: "fixed",
        inset: 0,
        zIndex: 9999,
        background: "rgba(10,10,10,0.92)",
        display: "flex",
        alignItems: "center",
        justifyContent: "center",
        padding: 24,
        cursor: "zoom-out",
      }}
    >
      <button
        onClick={onClose}
        style={{
          position: "fixed",
          top: 20,
          right: 24,
          background: "rgba(244,239,223,0.12)",
          border: "1px solid rgba(244,239,223,0.2)",
          color: "#F4EFDF",
          borderRadius: "50%",
          width: 40,
          height: 40,
          cursor: "pointer",
          fontSize: 20,
          lineHeight: 1,
          display: "flex",
          alignItems: "center",
          justifyContent: "center",
        }}
        aria-label="Close"
      >
        &times;
      </button>
      <img
        src={src}
        alt={alt}
        onClick={(e) => e.stopPropagation()}
        style={{
          maxWidth: "min(1400px, 96vw)",
          maxHeight: "90vh",
          width: "auto",
          height: "auto",
          borderRadius: 8,
        }}
      />
    </div>
  )
}

/* Figure: real image (when src is given) or placeholder, with optional caption */
function ShFig({ id, h, ratio, label, desc, caption, style, src, alt, fit }) {
  const [open, setOpen] = shSt(false)
  const slotStyle = ratio
    ? { width: "100%", aspectRatio: ratio, minHeight: "unset" }
    : { minHeight: h || 400 }
  return (
    <figure style={Object.assign({ margin: "8px 0 0" }, style || {})}>
      <ShRv>
        {src ? (
          <img
            src={src}
            alt={alt || label || ""}
            onClick={() => setOpen(true)}
            style={{
              width: "100%",
              height: ratio ? "100%" : "auto",
              aspectRatio: ratio || "auto",
              objectFit: fit || "cover",
              borderRadius: 12,
              display: "block",
              border: "1px solid var(--page-line)",
              cursor: "zoom-in",
            }}
          />
        ) : (
          <Placeholder label={label || "Image"} desc={desc} style={slotStyle} />
        )}
        {caption && (
          <figcaption
            style={{
              marginTop: 14,
              fontSize: 13.5,
              lineHeight: 1.5,
              color: "var(--page-muted)",
              fontStyle: "italic",
              fontFamily: "var(--font-display)",
              letterSpacing: "0.01em",
            }}
          >
            {caption}
          </figcaption>
        )}
      </ShRv>
      {open && src && (
        <ShLightbox
          src={src}
          alt={alt || label || ""}
          onClose={() => setOpen(false)}
        />
      )}
    </figure>
  )
}

/* Fullscreen lightbox for a gallery of images, with prev/next arrows */
function ShGalleryLightbox({ images, index, onClose, onChange }) {
  const count = images.length
  shEff(
    function () {
      function onKey(e) {
        if (e.key === "Escape") onClose()
        else if (e.key === "ArrowLeft") onChange((index - 1 + count) % count)
        else if (e.key === "ArrowRight") onChange((index + 1) % count)
      }
      document.addEventListener("keydown", onKey)
      document.body.style.overflow = "hidden"
      return function () {
        document.removeEventListener("keydown", onKey)
        document.body.style.overflow = ""
      }
    },
    [onClose, onChange, index, count],
  )

  const item = images[index]
  const arrowStyle = {
    position: "fixed",
    top: "50%",
    transform: "translateY(-50%)",
    background: "rgba(244,239,223,0.12)",
    border: "1px solid rgba(244,239,223,0.2)",
    color: "#F4EFDF",
    borderRadius: "50%",
    width: 44,
    height: 44,
    cursor: "pointer",
    fontSize: 22,
    lineHeight: 1,
    display: "flex",
    alignItems: "center",
    justifyContent: "center",
  }

  return (
    <div
      onClick={onClose}
      style={{
        position: "fixed",
        inset: 0,
        zIndex: 9999,
        background: "rgba(10,10,10,0.92)",
        display: "flex",
        alignItems: "center",
        justifyContent: "center",
        padding: 24,
        cursor: "zoom-out",
      }}
    >
      <button
        onClick={onClose}
        style={{
          position: "fixed",
          top: 20,
          right: 24,
          background: "rgba(244,239,223,0.12)",
          border: "1px solid rgba(244,239,223,0.2)",
          color: "#F4EFDF",
          borderRadius: "50%",
          width: 40,
          height: 40,
          cursor: "pointer",
          fontSize: 20,
          lineHeight: 1,
          display: "flex",
          alignItems: "center",
          justifyContent: "center",
        }}
        aria-label="Close"
      >
        &times;
      </button>
      {count > 1 && (
        <button
          onClick={(e) => {
            e.stopPropagation()
            onChange((index - 1 + count) % count)
          }}
          style={Object.assign({ left: 24 }, arrowStyle)}
          aria-label="Previous image"
        >
          &#8249;
        </button>
      )}
      <img
        src={item.src}
        alt={item.alt}
        onClick={(e) => e.stopPropagation()}
        style={{
          maxWidth: "min(1400px, 96vw)",
          maxHeight: "90vh",
          width: "auto",
          height: "auto",
          borderRadius: 8,
        }}
      />
      {count > 1 && (
        <button
          onClick={(e) => {
            e.stopPropagation()
            onChange((index + 1) % count)
          }}
          style={Object.assign({ right: 24 }, arrowStyle)}
          aria-label="Next image"
        >
          &#8250;
        </button>
      )}
      {count > 1 && (
        <div
          style={{
            position: "fixed",
            bottom: 24,
            left: "50%",
            transform: "translateX(-50%)",
            fontFamily: "var(--font-mono)",
            fontSize: 12,
            letterSpacing: "0.06em",
            color: "rgba(244,239,223,0.7)",
          }}
        >
          {index + 1} / {count}
        </div>
      )}
    </div>
  )
}

/* Grid of thumbnails that open in a navigable gallery lightbox */
function ShFigGallery({ images, style }) {
  const [openIndex, setOpenIndex] = shSt(null)
  return (
    <>
      <div
        className="sh-hifi-gallery"
        style={Object.assign(
          {
            display: "grid",
            gridTemplateColumns: "repeat(4, 1fr)",
            gap: 16,
            marginTop: 32,
          },
          style || {},
        )}
      >
        {images.map((img, i) => (
          <ShRv key={img.src} delay={i * 60}>
            <img
              src={img.src}
              alt={img.alt}
              onClick={() => setOpenIndex(i)}
              style={{
                width: "100%",
                aspectRatio: "3 / 4",
                objectFit: "cover",
                borderRadius: 12,
                display: "block",
                border: "1px solid var(--page-line)",
                cursor: "zoom-in",
              }}
            />
          </ShRv>
        ))}
      </div>
      {openIndex !== null && (
        <ShGalleryLightbox
          images={images}
          index={openIndex}
          onClose={() => setOpenIndex(null)}
          onChange={setOpenIndex}
        />
      )}
    </>
  )
}

/* Stat card with count-up */
function ShStatCard({ prefix, value, suffix, label, source }) {
  const [ref, seen] = shUseInView()
  const n = useCountUp(value, seen)
  return (
    <div ref={ref} className="card" style={{ padding: 28, height: "100%" }}>
      <div
        style={{
          fontFamily: "var(--font-display)",
          fontStyle: "italic",
          fontSize: "clamp(40px, 5vw, 60px)",
          lineHeight: 1,
          color: "var(--page-accent)",
        }}
      >
        {prefix}
        {Math.round(n)}
        <span style={{ fontSize: "0.5em" }}>{suffix}</span>
      </div>
      <div
        style={{
          fontSize: 15,
          lineHeight: 1.5,
          color: "#555",
          marginTop: 8,
          maxWidth: "30ch",
        }}
      >
        {label}
      </div>
      {source && (
        <div
          style={{
            fontFamily: "var(--font-mono)",
            fontSize: 10,
            letterSpacing: "0.06em",
            textTransform: "uppercase",
            color: "var(--page-muted)",
            marginTop: 6,
          }}
        >
          {source}
        </div>
      )}
    </div>
  )
}

/* ============================================================
   Intro — the brief in three lines
   ============================================================ */
function SHIntro() {
  const CARDS = [
    {
      k: "The client",
      t: "openpack, a German start-up digitalising the packaging industry through machine networking, standardised data, and optimised processes (Industry 4.0 / IIoT).",
    },
    {
      k: "The problem",
      t: "Across openpack's clients, shift handover was rudimentary, slow, and paper-based, causing long transitions, lost information, and reduced efficiency.",
    },
    {
      k: "The goal",
      t: "Develop a robust and intuitive interface for the shift handover process that integrates with the existing openpack platform, works across different client environments, and can scale.",
    },
  ]
  return (
    <section style={{ background: "var(--page-bg)" }}>
      <div className="wrap">
        <ShRv>
          <div
            className="h-eyebrow"
            style={{ color: "var(--page-accent)", marginBottom: 28 }}
          >
            The brief, in three lines
          </div>
        </ShRv>
        <div
          className="sh-intro-grid"
          style={{
            display: "grid",
            gridTemplateColumns: "repeat(auto-fit, minmax(260px, 1fr))",
            gap: 20,
          }}
        >
          {CARDS.map((c, i) => (
            <ShRv key={c.k} delay={i * 90}>
              <div className="card" style={{ padding: 28, height: "100%" }}>
                <div
                  className="h-eyebrow"
                  style={{ color: "var(--page-accent)", marginBottom: 14 }}
                >
                  {c.k}
                </div>
                <p
                  style={{
                    fontFamily: "var(--font-sans)",
                    color: "var(--page-fg)",
                    margin: 0,
                    textWrap: "pretty",
                  }}
                >
                  {c.t}
                </p>
              </div>
            </ShRv>
          ))}
        </div>
      </div>
    </section>
  )
}

/* ============================================================
   The problem
   ============================================================ */
function ProblemSection() {
  const FAILS = [
    "Prolonged transition times between shifts",
    "Information lost in the gaps of a verbal handover",
    "No standardised method across plants or clients",
    "Incidents recorded by hand, in a log book or on a loose sheet of paper",
  ]
  return (
    <section id="problem" style={{ background: "var(--page-bg)" }}>
      <div className="wrap">
        <SectionHead
          num="Context"
          eyebrow="The problem"
          title="In the packaging industry, shift handovers are a daily bottleneck."
        >
          <p className="lede">
            Workers pass critical information between teams (machine states,
            incidents, special orders). Often this happens through handwritten
            notes or verbal briefings with no standardised process. Information
            gets lost. Transitions take longer than they should.
          </p>
          <hr></hr>
          <p>
            We partnered with openpack, a German Industry 4.0 startup that helps
            packaging industry clients with digitalisation, machine networking,
            and process optimisation. Our task was to design a digital shift
            handover solution that could be integrated into their existing
            platform and used across their client base.
          </p>
          <p>
            I was part of a four-person team and contributed across all phases
            of the project, from research to design and prototyping. I also took
            on most of the client communication and coordinated directly with
            openpack throughout.
          </p>
          <p>
            <strong style={{ color: "var(--page-fg)" }}>
              Shift managers were spending 20 to 25 minutes on handovers. The
              target is 10 to 15. Information was passed verbally or written in
              logbooks. Night shifts missed updates from departments like
              Production Planning that only operate during the day. Serious
              incidents had no standardised reporting process. The result: lost
              time, lost information, and unnecessary risk on the factory floor.
            </strong>
          </p>
        </SectionHead>
        {/* <ShBody>
          <ShBullets items={FAILS} columns={2} />
        </ShBody> */}
      </div>
    </section>
  )
}

/* ============================================================
   Process overview — five phases
   ============================================================ */
function ProcessSection() {
  const PHASES = [
    {
      n: "01",
      t: "On-site tour",
      d: "Walk the factory floor and work alongside the team.",
      id: "onsite",
    },
    {
      n: "02",
      t: "Desk research",
      d: "Study how other industries run their handovers.",
      id: "research",
    },
    {
      n: "03",
      t: "Interviews & analysis",
      d: "Talk to the shift managers who live the process.",
      id: "interviews",
    },
    {
      n: "04",
      t: "Design & feedback",
      d: "Sketch, prototype, test, refine with real users.",
      id: "design",
    },
    {
      n: "05",
      t: "Hi-fi prototype",
      d: "A polished, platform-ready handover interface.",
      id: "outcome",
    },
  ]
  return (
    <section
      id="process"
      style={{
        background: "var(--page-card)",
        borderTop: "1px solid var(--page-line)",
        borderBottom: "1px solid var(--page-line)",
      }}
    >
      <div className="wrap">
        <ShRv>
          <div
            className="h-eyebrow"
            style={{ color: "var(--page-accent)", marginBottom: 18 }}
          >
            The approach
          </div>
          <h2
            className="h-section"
            style={{
              fontSize: "clamp(28px, 3.4vw, 44px)",
              marginBottom: 48,
            }}
          >
            The project went through five phases
          </h2>
        </ShRv>
        {/* <div
          className="sh-phase-rail"
          style={{
            display: "grid",
            gridTemplateColumns: "repeat(5, 1fr)",
            gap: 16,
          }}
        >
          {PHASES.map((p, i) => (
            <ShRv key={p.n} delay={i * 70}>
              <a
                href={`#${p.id}`}
                style={{
                  display: "block",
                  height: "100%",
                  textDecoration: "none",
                }}
              >
                <div
                  className="card card-border sh-phase-card"
                  style={{
                    padding: 24,
                    height: "100%",
                    display: "flex",
                    flexDirection: "column",
                  }}
                >
                  <div
                    style={{
                      fontFamily: "var(--font-mono)",
                      fontSize: 11,
                      fontWeight: "bolder",
                      letterSpacing: "0.08em",
                      color: "var(--page-accent)",
                      paddingBottom: 16,
                      marginBottom: 18,
                      borderBottom: "1px solid var(--page-line)",
                    }}
                  >
                    {p.n}
                  </div>
                  <div
                    style={{
                      fontFamily: "var(--font-display)",
                      fontStyle: "italic",
                      fontSize: 22,
                      lineHeight: 1.15,
                      color: "var(--page-fg)",
                      marginBottom: 10,
                    }}
                  >
                    {p.t}
                  </div>
                  <div
                    style={{
                      fontSize: 14.5,
                      lineHeight: 1.5,
                      color: "var(--page-muted)",
                      textWrap: "pretty",
                    }}
                  >
                    {p.d}
                  </div>
                </div>
              </a>
            </ShRv>
          ))}
        </div> */}
        <ShFig
          id="sh-phases-overview"
          ratio="2000 / 619"
          src="/sh/keyphasesofproject.webp"
          alt="Key phases of the project"
          label="Key phases of the project"
          caption="Key phases of the project"
          fit="contain"
          style={{ marginTop: 32 }}
        />
      </div>
    </section>
  )
}

/* ============================================================
   Phase 1 — On-site tour
   ============================================================ */
function OnsiteSection() {
  const INSIGHTS = [
    "Floor environment",
    "Methods of working",
    "Hierarchy, roles and information flow",
    "Communication practices",
    "Documentation methods",
    "Production pipeline and process",
  ]
  return (
    <section id="onsite" style={{ background: "var(--page-bg)" }}>
      <div className="wrap">
        <SectionHead
          num="Phase 01 · On-site tour"
          eyebrow="Phase 1"
          title="We started on the factory floor."
        >
          <p className="lede">
            To understand the challenges properly, we visited the factory floor.
            We spoke directly with workers and observed the manufacturing
            process as it happened. Taking part in the daily operations
            ourselves gave us a first-hand picture of the workflow and where the
            existing process breaks down.
          </p>
          <hr></hr>
          <ShPara style={{ marginTop: 8 }}>
            This gave us direct insight into:
          </ShPara>
          <ShBullets items={INSIGHTS} columns={2} />
          <ShPara style={{ marginTop: 28, marginBottom: 0 }}>
            It helped us identify where a digital solution could actually
            improve things. It also built trust with the people we would later
            be designing for, which mattered more than we expected.
          </ShPara>
        </SectionHead>
        {/* <ShLabeledRow label="What we watched for"></ShLabeledRow> */}
        <div
          className="sh-figure-grid-4"
          style={{
            display: "grid",
            gridTemplateColumns: "repeat(4, 1fr)",
            gap: 14,
            marginTop: 44,
          }}
        >
          <ShFig
            id="sh-onsite-1"
            ratio="3 / 4"
            src="/sh/on-site-1.webp"
            alt="Floor walkthrough"
            label="Floor walkthrough"
          />
          <ShFig
            id="sh-onsite-2"
            ratio="3 / 4"
            src="/sh/on-site-2.webp"
            alt="Production space"
            label="Production space"
          />
          <ShFig
            id="sh-onsite-3"
            ratio="3 / 4"
            src="/sh/on-site-3.webp"
            alt="The process"
            label="The process"
          />
          <ShFig
            id="sh-onsite-4"
            ratio="3 / 4"
            src="/sh/on-site-4.webp"
            alt="Talking to the team"
            label="Talking to the team"
          />
        </div>
        <ShRv>
          <figcaption
            style={{
              marginTop: 16,
              fontSize: 13.5,
              lineHeight: 1.5,
              color: "var(--page-muted)",
              fontStyle: "italic",
              fontFamily: "var(--font-display)",
              letterSpacing: "0.01em",
            }}
          >
            Factory walkthrough, insight into the production space and the
            processes.
          </figcaption>
        </ShRv>
      </div>
    </section>
  )
}

/* ============================================================
   Phase 2 — Desk research
   ============================================================ */
function ResearchSection() {
  const LOOKED = [
    "Industry standards for shift handover",
    "Best practices from other sectors",
    "Existing digital handover solutions",
    "Academic papers & industry reports",
  ]
  return (
    <section
      id="research"
      style={{
        background: "var(--page-card)",
        borderTop: "1px solid var(--page-line)",
        borderBottom: "1px solid var(--page-line)",
      }}
    >
      <div className="wrap">
        <SectionHead
          num="Phase 02 · Desk research"
          eyebrow="Phase 2"
          title="Looking outward."
        >
          <p className="lede">
            With a clear picture of the operational side, we looked into how
            shift handovers are handled in other industries. We went through
            academic papers, industry reports, and existing digital solutions to
            see how other sectors deal with similar problems.
          </p>
        </SectionHead>
        <div
          className="sh-research-grid"
          style={{
            display: "grid",
            gridTemplateColumns: "1fr 1fr",
            gap: 48,
            alignItems: "center",
          }}
        >
          <ShRv>
            <div
              className="h-eyebrow"
              style={{ color: "var(--page-accent)", marginBottom: 20 }}
            >
              Where we looked
            </div>
            <ShBullets items={LOOKED} columns={1} />
            <ShPara style={{ marginTop: 28, marginBottom: 0 }}>
              This gave us a baseline of established practices and surfaced
              features that worked elsewhere and could be adapted for the
              packaging context.
            </ShPara>
          </ShRv>
          <div
            className="sh-research-figs"
            style={{ display: "flex", flexDirection: "row", gap: 16 }}
          >
            <ShFig
              id="sh-research-1"
              ratio="800 / 547"
              src="/sh/desk-research-1.webp"
              alt="Desk-research findings"
              label="Desk-research findings"
              style={{ flex: 1, minWidth: 0 }}
            />
            <ShFig
              id="sh-research-2"
              ratio="584 / 561"
              src="/sh/desk-research-2.webp"
              alt="Desk-research findings"
              label="Desk-research findings"
              caption="An excerpt of the findings from the desk research."
              style={{ flex: 1, minWidth: 0 }}
            />
          </div>
        </div>
      </div>
    </section>
  )
}

/* ============================================================
   Phase 3 — Interviews & analysis
   ============================================================ */
function InterviewSection() {
  const FINDINGS = [
    {
      n: "01",
      t: "Topics discussed at handover",
      d: "Special orders, number of jobs, sick calls, accidents, maintenance issues, and more.",
    },
    {
      n: "02",
      t: "Current vs. target duration",
      d: "Handovers currently take 20-25 minutes. They should take 10-15 at most.",
    },
    {
      n: "03",
      t: "Environment",
      d: "The handover happens between shift managers only, in a quiet space like an office, and is then communicated to the wider team.",
    },
    {
      n: "04",
      t: "Information gaps",
      d: "Information frequently goes missing, especially from day-only departments like Production Planning when handing over to the night shift.",
    },
    {
      n: "05",
      t: "No standardised process",
      d: "Serious incidents and accidents have no formal process. They are still logged manually in books or on pieces of paper.",
    },
  ]
  return (
    <section id="interviews" style={{ background: "var(--page-bg)" }}>
      <div className="wrap">
        <SectionHead
          num="Phase 03 · Interviews & analysis"
          eyebrow="Phase 3"
          title="Interviewing people who run the handover."
        >
          <div
            style={{
              display: "flex",
              flexWrap: "wrap",
              gap: 10,
              marginBottom: 20,
            }}
          >
            {[
              "Semi-structured",
              "Topic-based categories",
              "English & German",
            ].map((t) => (
              <span key={t} className="chip">
                {t}
              </span>
            ))}
          </div>
          <p className="lede">
            After the factory visit and desk research, we conducted
            semi-structured interviews with shift handover managers at packaging
            plants. Interviews were held in English or German, depending on what
            the participant preferred. We also collected pain points and wishes
            from the participants, then analysed the notes and transcripts to
            identify concrete areas for improvement.
          </p>
        </SectionHead>

        {/* <ShLabeledRow label="How we ran it" delay={0}>
          <div style={{ display: "flex", flexWrap: "wrap", gap: 10 }}>
            {[
              "Semi-structured",
              "Topic-based categories",
              "English & German",
            ].map((t) => (
              <span key={t} className="chip">
                {t}
              </span>
            ))}
          </div>
        </ShLabeledRow> */}

        <ShRv>
          <div
            className="h-eyebrow"
            style={{ color: "var(--page-accent)", margin: "48px 0 22px" }}
          >
            A few of the key findings
          </div>
        </ShRv>
        <div
          className="sh-findings-grid"
          style={{
            display: "grid",
            gridTemplateColumns: "repeat(auto-fit, minmax(280px, 1fr))",
            gap: 18,
          }}
        >
          {FINDINGS.map((f, i) => (
            <ShRv key={f.n} delay={i * 70}>
              <div
                className="card card-border"
                style={{
                  padding: 26,
                  height: "100%",
                  display: "flex",
                  flexDirection: "column",
                }}
              >
                <div
                  style={{
                    fontFamily: "var(--font-mono)",
                    fontSize: 11,
                    fontWeight: "bolder",
                    letterSpacing: "0.08em",
                    color: "var(--page-accent)",
                    marginBottom: 14,
                  }}
                >
                  {f.n}
                </div>
                <div
                  style={{
                    fontFamily: "var(--font-display)",
                    fontStyle: "italic",
                    fontSize: 21,
                    lineHeight: 1.2,
                    color: "var(--page-fg)",
                    marginBottom: 12,
                  }}
                >
                  {f.t}
                </div>
                <div
                  style={{
                    fontSize: 15.5,
                    lineHeight: 1.6,
                    color: "#444",
                    textWrap: "pretty",
                  }}
                >
                  {f.d}
                </div>
              </div>
            </ShRv>
          ))}
        </div>

        <ShPara style={{ marginTop: 28, marginBottom: 0 }}>
          Two findings shaped everything that came after: the handover duration
          being nearly double the target, and the missing process for serious
          incidents. We treated these as fixed requirements for the design.
        </ShPara>

        {/* <div
          className="sh-stat-grid"
          style={{
            display: "grid",
            gridTemplateColumns: "repeat(auto-fit, minmax(220px, 1fr))",
            gap: 18,
            marginTop: 40,
          }}
        >
          <ShStatCard
            prefix="20-"
            value={25}
            suffix=" min"
            label="How long a handover takes today"
            source="Current state"
          />
          <ShStatCard
            prefix="10-"
            value={15}
            suffix=" min"
            label="What managers wanted it cut to"
            source="Target"
          />
          <ShStatCard
            value={2}
            suffix="x"
            label="Languages the interviews ran in: English & German"
            source="Method"
          />
        </div> */}
        <div
          className="sh-figure-grid-2"
          style={{
            display: "grid",
            gridTemplateColumns: "1fr 1fr",
            gap: 16,
            marginTop: 48,
          }}
        >
          <ShFig
            id="sh-interview-1"
            ratio="3 / 4"
            src="/sh/interview-questions.webp"
            alt="Interview question draft"
            label="Interview question draft"
            caption="Draft interview questions, grouped by topic area."
          />
          <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
            <ShFig
              id="sh-interview-2"
              ratio="1208 / 706"
              src="/sh/interview-analysis-1.webp"
              alt="Notes & analysis"
              label="Notes & analysis"
            />
            <ShFig
              id="sh-interview-3"
              ratio="741 / 660"
              src="/sh/interview-analysis-2.webp"
              alt="Notes & analysis"
              label="Notes & analysis"
              caption="Some of the interview notes and analysis."
            />
          </div>
        </div>
      </div>
    </section>
  )
}

/* ============================================================
   Phase 4 — Design & user feedback
   ============================================================ */
function DesignSection() {
  const STEPS = [
    {
      k: "Wireframes",
      t: "Sketched concepts to lay down the structure and explore the possibilities.",
    },
    {
      k: "Lo-fi prototype",
      t: "A clickable low-fidelity flow, tested with real users to gather honest feedback.",
    },
    {
      k: "Hi-fi prototype",
      t: "Refined into a high-fidelity prototype tuned to the needs we'd identified.",
    },
  ]
  return (
    <section
      id="design"
      style={{
        background: "var(--page-card)",
        borderTop: "1px solid var(--page-line)",
        borderBottom: "1px solid var(--page-line)",
      }}
    >
      <div className="wrap">
        <SectionHead
          num="Phase 04 · Design & feedback"
          eyebrow="Phase 4"
          title="Designing the Solution."
        >
          <p className="lede">
            Research in hand, we moved from sketches to a tested, high-fidelity
            flow, letting user feedback at each step decide what stayed and what
            changed.
          </p>
          <hr></hr>
          <ShPara style={{ marginTop: 28, marginBottom: 0 }}>
            We built a low-fidelity click prototype and tested it with the shift
            managers from our research. Their feedback changed the design in two
            places in particular: the incident reporting flow and the handover
            checklist. Both went through two rounds of revision based on their
            input. With those adjustments made, we moved on to the high-fidelity
            prototype.
          </ShPara>
        </SectionHead>
        <div
          className="sh-steps-grid"
          style={{
            display: "grid",
            gridTemplateColumns: "repeat(3, 1fr)",
            gap: 18,
            marginBottom: 48,
          }}
        >
          {STEPS.map((s, i) => (
            <ShRv key={s.k} delay={i * 80}>
              <div
                style={{
                  display: "flex",
                  flexDirection: "column",
                  gap: 12,
                  height: "100%",
                }}
              >
                <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
                  <span
                    style={{
                      fontFamily: "var(--font-display)",
                      fontStyle: "italic",
                      fontSize: 30,
                      color: "var(--page-accent)",
                      lineHeight: 1,
                    }}
                  >
                    {i + 1}
                  </span>
                  <span
                    style={{
                      flex: 1,
                      height: 1,
                      background: "var(--page-line)",
                    }}
                  ></span>
                </div>
                <div className="h-eyebrow" style={{ color: "var(--page-fg)" }}>
                  {s.k}
                </div>
                <div
                  style={{
                    fontSize: 15.5,
                    lineHeight: 1.6,
                    color: "#444",
                    textWrap: "pretty",
                  }}
                >
                  {s.t}
                </div>
              </div>
            </ShRv>
          ))}
        </div>
        <div
          className="sh-figure-grid-5"
          style={{
            display: "grid",
            gridTemplateColumns: "repeat(6, 1fr)",
            gap: 14,
            marginTop: 16,
          }}
        >
          <ShFig
            id="sh-wire-1"
            ratio="3 / 4"
            src="/sh/wireframe-concept-2.webp"
            alt="Wireframe concept"
            label="Wireframe concept"
            style={{ gridColumn: "span 2" }}
          />
          <ShFig
            id="sh-wire-2"
            ratio="3 / 4"
            src="/sh/wireframe1.webp"
            alt="Wireframe concept"
            label="Wireframe concept"
            style={{ gridColumn: "span 2" }}
          />
          <ShFig
            id="sh-wire-3"
            ratio="3 / 4"
            src="/sh/wireframe3.webp"
            alt="Wireframe concept"
            label="Wireframe concept"
            style={{ gridColumn: "span 2" }}
          />
          <ShFig
            id="sh-wire-4"
            ratio="3 / 4"
            src="/sh/wireframe2.webp"
            alt="Wireframe concept"
            label="Wireframe concept"
            style={{ gridColumn: "span 3" }}
          />
          <ShFig
            id="sh-wire-5"
            ratio="3 / 4"
            src="/sh/wireframe-concept-1.webp"
            alt="Wireframe concept"
            label="Wireframe concept"
            style={{ gridColumn: "span 3" }}
          />
        </div>
        <ShRv>
          <figcaption
            style={{
              marginTop: 16,
              fontSize: 13.5,
              lineHeight: 1.5,
              color: "var(--page-muted)",
              fontStyle: "italic",
              fontFamily: "var(--font-display)",
              letterSpacing: "0.01em",
            }}
          >
            Wireframe concepts, exploring various possibilities.
          </figcaption>
        </ShRv>
      </div>
    </section>
  )
}

/* ============================================================
   Phase 5 — Hi-fi prototype + outcome
   ============================================================ */
function OutcomeSection() {
  return (
    <section id="outcome" style={{ background: "var(--page-bg)" }}>
      <div className="wrap">
        <SectionHead
          num="Phase 05 · Hi-fi prototype"
          eyebrow="Phase 5"
          title="A handover the floor could actually use."
        >
          <p className="lede">
            The final high-fidelity prototype turns a 20-minute paper ritual
            into a structured, shareable digital handover.
          </p>
          {/* <ShBody style={{ marginTop: 52 }}> */}
          <ShPara>
            When we presented the prototype, the shift managers were visibly
            surprised by how directly it addressed their daily frustrations. One
            of them said:
            <span
              style={{
                fontWeight: "bolder",
              }}
            >
              {" "}
              "We need to get this implemented."{" "}
            </span>
            Coming from people who deal with this problem every day, that was
            the validation that mattered most to us.
          </ShPara>
          {/* </ShBody> */}
        </SectionHead>
        <ShFig
          id="sh-hifi-1"
          src="/sh/final-hi-fi.webp"
          alt="High-fidelity prototype, final screens"
          label="High-fidelity prototype, final screens"
          fit="contain"
          style={{ maxWidth: 460, margin: "8px auto 0" }}
        />
        <ShFigGallery
          images={[
            { src: "/sh/hifi1.png", alt: "Hi-fi prototype, additional screen 1" },
            { src: "/sh/hifi2.png", alt: "Hi-fi prototype, additional screen 2" },
            { src: "/sh/hifi3.png", alt: "Hi-fi prototype, additional screen 3" },
            { src: "/sh/hifi4.png", alt: "Hi-fi prototype, additional screen 4" },
          ]}
        />
      </div>
    </section>
  )
}

/* ============================================================
   Reflections
   ============================================================ */
function ReflectionsSection() {
  return (
    <section
      id="reflections"
      style={{
        background: "var(--page-card)",
        borderTop: "1px solid var(--page-line)",
        borderBottom: "1px solid var(--page-line)",
      }}
    >
      <div className="wrap">
        <SectionHead
          num="Reflections"
          eyebrow="Looking back"
          title="What I'd do differently"
        />

        <ShLabeledRow label="" delay={0}>
          <ShPara style={{ marginBottom: 0 }}>
            With more time, I would have run a formal usability test to measure
            whether the design actually brings the handover duration down toward
            the 10 to 15 minute target. The qualitative feedback was strong, but
            a before and after comparison would have made the case much harder
            to argue with.
          </ShPara>
        </ShLabeledRow>
      </div>
    </section>
  )
}

/* Responsive overrides */
;(function () {
  var style = document.createElement("style")
  style.textContent = `
    @media (max-width: 900px) {
      .sh-phase-rail { grid-template-columns: repeat(2, 1fr) !important; }
      .sh-steps-grid { grid-template-columns: 1fr !important; }
      .sh-research-grid { grid-template-columns: 1fr !important; }
      .sh-figure-grid-5 { grid-template-columns: repeat(3, 1fr) !important; }
      .sh-figure-grid-5 > figure { grid-column: auto !important; }
    }
    @media (max-width: 720px) {
      .sh-two-col { grid-template-columns: 1fr !important; gap: 16px !important; }
      .sh-figure-grid-4 { grid-template-columns: 1fr 1fr !important; }
      .sh-figure-grid-5 { grid-template-columns: 1fr 1fr !important; }
      .sh-figure-grid-2 { grid-template-columns: 1fr !important; }
      .sh-phase-rail { grid-template-columns: 1fr !important; }
      .sh-body-col { grid-template-columns: 1fr !important; gap: 16px !important; }
      .sh-body-col > div:first-child { display: none; }
      .sh-research-figs { flex-direction: column !important; }
      .sh-hifi-gallery { grid-template-columns: 1fr 1fr !important; }
    }
    .sh-phase-card { transition: border-color 150ms, transform 150ms; }
    .sh-phase-card:hover { border-color: var(--page-line-strong); transform: translateY(-2px); }
  `
  document.head.appendChild(style)
})()

Object.assign(window, {
  SHIntro,
  ProblemSection,
  ProcessSection,
  OnsiteSection,
  ResearchSection,
  InterviewSection,
  DesignSection,
  OutcomeSection,
  ReflectionsSection,
})