/* Luma case study — white hero stage. */

function LumaHero() {
  const TAGS = [
    "Healthcare",
    "Inclusive Design",
    "UX Research",
    "Emotion AI",
    "Mobile App",
  ]

  return (
    <section
      style={{
        // background: "var(--page-dark)",
        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 110px",
          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" }}
          >
            Dec 2024
          </span>
          <span style={{ color: "rgba(0,0,0,0.4)" }}>·</span>
          <span style={{ color: "var(--page-accent)", whiteSpace: "nowrap", fontWeight: "bolder" }}>
            Healthcare &amp; inclusive design
          </span>
        </div>

        {/* Headline */}
        <h1
          style={{
            fontFamily: "var(--font-display)",
            fontWeight: 400,
            fontSize: "clamp(44px, 8vw, 104px)",
            lineHeight: 0.98,
            letterSpacing: "-0.025em",
            margin: "0 auto",
            color: "black",
            textWrap: "balance",
            maxWidth: "22ch",
          }}
        >
          Luma: AI Memory Aid for Elderly &amp;{" "}
          <span style={{ color: "var(--page-accent)" }}>Early Alzheimer's</span>
        </h1>

        {/* Subtext */}
        <p
          style={{
            margin: "44px auto 0",
            maxWidth: "60ch",
            fontSize: "clamp(17px, 1.4vw, 20px)",
            lineHeight: 1.55,
            color: "rgba(0,0,0,0.7)",
          }}
        >
          Bridging the memory gap through multimodal interaction and AI driven
          solutions that preserve user autonomy.
        </p>

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

      <style>{`
        .luma-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;
          letter-spacing: 0.06em;
          text-transform: uppercase;
          background: rgba(244,239,223,0.04);
        }
      `}</style>
    </section>
  )
}

window.LumaHero = LumaHero