/* Hero — vision-led, dark background to match portfolio top */

function Hero() {
  return (
    <section
      style={{
        background: "var(--page-dark)",
        color: "#F4EFDF",
        padding: "0",
        borderBottom: "1px solid #000",
        position: "relative",
        overflow: "hidden",
      }}
    >
      {/* Subtle radial glow */}
      <div
        style={{
          position: "absolute",
          inset: 0,
          pointerEvents: "none",
          background:
            "radial-gradient(ellipse at 70% 40%, rgba(224,123,44,0.18) 0%, rgba(0,0,0,0) 55%)",
        }}
      />
      {/* Grid lines */}
      <div
        style={{
          position: "absolute",
          inset: 0,
          pointerEvents: "none",
          opacity: 0.06,
          backgroundImage:
            "linear-gradient(rgba(255,255,255,0.4) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.4) 1px, transparent 1px)",
          backgroundSize: "80px 80px",
        }}
      />

      <div
        className="wrap"
        style={{ position: "relative", padding: "120px 32px 100px" }}
      >
        {/* Eyebrow strip */}
        <div
          style={{
            display: "flex",
            flexWrap: "wrap",
            gap: 8,
            marginBottom: 48,
            fontFamily: "var(--font-mono)",
            fontSize: 11,
            letterSpacing: "0.08em",
            textTransform: "uppercase",
            color: "rgba(244,239,223,0.6)",
          }}
        >
          <span>Master Thesis</span>
          <span style={{ opacity: 0.4 }}>·</span>
          <span>2026</span>
          <span style={{ opacity: 0.4 }}>·</span>
          <span style={{ color: "var(--page-accent)" }}>
            In cooperation with Mercedes-Benz
          </span>
        </div>

        {/* Headline */}
        <h1
          style={{
            fontFamily: "var(--font-display)",
            fontStyle: "italic",
            fontWeight: 400,
            fontSize: "clamp(44px, 8vw, 112px)",
            lineHeight: 0.95,
            letterSpacing: "-0.025em",
            margin: 0,
            color: "#F4EFDF",
            textWrap: "balance",
            maxWidth: "16ch",
          }}
        >
          What if the car{" "}
          <span style={{ color: "var(--page-accent)" }}>
            designed its own UI
          </span>{" "}
          for every drive, just for you?
        </h1>

        {/* Sub */}
        <p
          style={{
            marginTop: 40,
            maxWidth: "62ch",
            fontSize: "clamp(17px, 1.4vw, 20px)",
            lineHeight: 1.55,
            color: "rgba(244,239,223,0.78)",
          }}
        >
          A research-through-design exploration of an{" "}
          <span style={{ color: "#F4EFDF", fontWeight: 500 }}>
            AI-native infotainment system
          </span>{" "}
          that assembles its interface in real time from a validated component
          library, adapting to driving context, user state, and intent without
          compromising safety.
        </p>

        {/* Tag row */}
        <div
          style={{ display: "flex", flexWrap: "wrap", gap: 8, marginTop: 36 }}
        >
          {[
            "UX Research",
            "Generative UI",
            "Agentic AI",
            "Prototyping",
            "User Studies",
          ].map((t) => (
            <span key={t} className="hero-chip">
              {t}
            </span>
          ))}
        </div>

        {/* Meta strip */}
        <div className="hero-meta">
          <MetaItem k="Role" v="End-to-end · Design + Engineering" />
          <MetaItem k="Timeline" v="4 months" />
          <MetaItem
            k="Methods"
            v="Interviews · Prototyping · Usability Testing · A/B study"
          />
          <MetaItem
            k="Stack"
            v="React · Python · LLM APIs · Figma · ProtoPie · ElevenLabs"
          />
        </div>
      </div>

      <style>{`
        .hero-chip {
          display: inline-flex; align-items: center;
          padding: 6px 12px; border-radius: 999px;
          border: 1px solid rgba(244,239,223,0.2);
          font-family: var(--font-mono); font-size: 11px;
          letter-spacing: 0.06em; text-transform: uppercase;
          color: rgba(244,239,223,0.85);
          background: rgba(244,239,223,0.04);
        }
        .hero-meta {
          margin-top: 72px;
          display: grid;
          grid-template-columns: repeat(4, 1fr);
          gap: 0;
          border-top: 1px solid rgba(244,239,223,0.15);
        }
        .hero-meta > * {
          padding: 24px 24px 0 0;
          border-right: 1px solid rgba(244,239,223,0.1);
        }
        .hero-meta > *:last-child { border-right: 0; }
        .hero-meta > *:nth-child(n+2) { padding-left: 24px; }
        @media (max-width: 720px) {
          .hero-meta { grid-template-columns: 1fr 1fr; }
          .hero-meta > * { border-right: 0; padding-right: 16px !important; padding-left: 0 !important; padding-bottom: 16px; }
          .hero-meta > *:nth-child(2n) { border-left: 1px solid rgba(244,239,223,0.1); padding-left: 16px !important; }
        }
      `}</style>
    </section>
  )
}

function MetaItem({ k, v }) {
  return (
    <div>
      <div
        style={{
          fontFamily: "var(--font-mono)",
          fontSize: 11,
          letterSpacing: "0.08em",
          textTransform: "uppercase",
          color: "rgba(244,239,223,0.5)",
          marginBottom: 8,
        }}
      >
        {k}
      </div>
      <div
        style={{
          fontSize: 14,
          color: "#F4EFDF",
          lineHeight: 1.4,
        }}
      >
        {v}
      </div>
    </div>
  )
}

window.Hero = Hero