/* Shift Handover case study — hero stage */

function SHHero() {
  const TAGS = [
    "UX Research",
    "Field Study",
    "User Interviews",
    "Prototyping",
    "Industry 4.0",
  ]

  const META = [
    ["Role", "UX Research & Design"],
    ["Team", "4 designers · openpack"],
    ["Methods", "On-site study · Interviews · Prototyping"],
  ]

  return (
    <section
      style={{
        color: "black",
        padding: "0",
        borderBottom: "1px solid #000",
        position: "relative",
        overflow: "hidden",
        backgroundImage: "url(/dots_background.png), url(/noise-light.png)",
        backgroundSize: "170px",
        backgroundRepeat: "repeat",
      }}
    >
      <div
        className="wrap"
        style={{
          position: "relative",
          padding: "120px 32px 80px",
          textAlign: "center",
        }}
      >
        {/* Eyebrow */}
        <div
          style={{
            display: "flex",
            flexWrap: "wrap",
            justifyContent: "center",
            gap: 8,
            marginBottom: 48,
            fontFamily: "var(--font-mono)",
            fontSize: 11,
            fontWeight: "bolder",
            letterSpacing: "0.08em",
            textTransform: "uppercase",
          }}
        >
          <span style={{ color: "black", whiteSpace: "nowrap" }}>Aug 2024</span>
          <span style={{ color: "rgba(0,0,0,0.4)" }}>·</span> In cooperation
          with
          <span
            style={{
              color: "var(--page-accent)",
              whiteSpace: "nowrap",
              fontWeight: "bolder",
            }}
          >
            openpack GmbH
          </span>
        </div>

        {/* Headline */}
        <h1
          style={{
            fontFamily: "var(--font-display)",
            fontWeight: 400,
            fontSize: "clamp(42px, 7.4vw, 96px)",
            lineHeight: 0.99,
            letterSpacing: "-0.025em",
            margin: "0 auto",
            color: "black",
            textWrap: "balance",
            maxWidth: "18ch",
          }}
        >
          Digitalising shift handover for fast-paced{" "}
          <span style={{ color: "var(--page-accent)" }}>manufacturing</span>
        </h1>

        {/* Subtext */}
        <p
          style={{
            margin: "40px auto 0",
            maxWidth: "64ch",
            fontSize: "clamp(17px, 1.4vw, 20px)",
            lineHeight: 1.55,
            color: "rgba(0,0,0,0.7)",
          }}
        >
          Replacing a slow, paper-based shift handover with an{" "}
          <strong style={{ color: "black", fontWeight: 600 }}>
            intuitive digital interface
          </strong>
          , researched on the factory floor and built to plug into openpack's
          Industry&nbsp;4.0 platform.
        </p>

        {/* Tag chips */}
        <div
          style={{
            display: "flex",
            flexWrap: "wrap",
            gap: 8,
            marginTop: 40,
            justifyContent: "center",
          }}
        >
          {TAGS.map((t) => (
            <span key={t} className="sh-chip">
              {t}
            </span>
          ))}
        </div>

        {/* Meta strip */}
        <div
          className="sh-hero-meta"
          style={{
            marginTop: 72,
            display: "grid",
            gridTemplateColumns: "repeat(3, 1fr)",
            textAlign: "center",
          }}
        >
          {META.map(([k, v], i) => (
            <div
              key={k}
              style={{
                padding: "24px 24px 0",
              }}
            >
              <div
                style={{
                  fontFamily: "var(--font-mono)",
                  fontSize: 11,
                  fontWeight: "bolder",
                  letterSpacing: "0.08em",
                  textTransform: "uppercase",
                  marginBottom: 8,
                }}
              >
                {k}
              </div>
              <div style={{ fontSize: 14, color: "black", lineHeight: 1.4 }}>
                {v}
              </div>
            </div>
          ))}
        </div>
      </div>

      <style>{`
        .sh-chip {
          display: inline-flex;
          align-items: center;
          padding: 6px 12px;
          border-radius: 999px;
          border: 1px solid black;
          font-family: var(--font-mono);
          font-size: 11px;
          font-weight: bolder;
          letter-spacing: 0.06em;
          text-transform: uppercase;
          background: rgba(244,239,223,0.04);
        }
        @media (max-width: 720px) {
          .sh-hero-meta { grid-template-columns: 1fr 1fr !important; gap: 24px 0 !important; }
          .sh-hero-meta > div { border-right: none !important; padding-left: 0 !important; }
        }
      `}</style>
    </section>
  )
}

window.SHHero = SHHero