/* CGI / Federal Statistical Office case study — hero stage */

function CgiHero() {
  const TAGS = ["Public Sector", "SAFe framework"]

  const META = [
    ["Role", "UI/UX designer"],
    // ["Client", "Statistisches Bundesamt · via CGI"],
    ["Duration", "∼1.5 years"],
  ]

  return (
    <section
      style={{
        color: "#323232",
        padding: "0",
        borderBottom: "1px solid #000",
        position: "relative",
        overflow: "hidden",
        backgroundImage: "url(/dots_background.png)",
        backgroundSize: "70px",
        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: "#323232", whiteSpace: "nowrap" }}>
            Late 2022 – Early 2024
          </span>
          <span style={{ color: "rgba(0,0,0,0.4)" }}>·</span>
          For
          <span
            style={{
              color: "var(--page-accent)",
              whiteSpace: "nowrap",
            }}
          >
            Federal Statistical Office of Germany
          </span>
          (via CGI)
        </div>

        {/* Headline */}
        <h1
          style={{
            fontFamily: "var(--font-display)",
            fontWeight: 300,
            fontSize: "clamp(42px, 7.4vw, 96px)",
            lineHeight: 0.99,
            letterSpacing: "-0.025em",
            margin: "0 auto",
            color: "#323232",
            textWrap: "balance",
            maxWidth: "18ch",
          }}
        >
          A national <span style={{ color: "inherit" }}>business-register</span>{" "}
          platform
        </h1>

        {/* German name */}
        <p
          style={{
            margin: "20px 0 0",
            fontFamily: "var(--font-mono)",
            fontSize: 12,
            letterSpacing: "0.04em",
            color: "rgba(0,0,0,0.7)",
          }}
        >
          Officially known as the{" "}
          <a
            href="https://www.destatis.de/DE/Service/Hauptstadtkommunikation/Zukunft/Potentiale/basisregister.html"
            target="_blank"
            rel="noopener noreferrer"
            style={{ color: "inherit", textDecoration: "underline" }}
          >
            Unternehmen Basis Register (UBREG)
          </a>
        </p>

        {/* 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)",
          }}
        >
          Building a new platform to manage the data of every company registered
          in Germany.
        </p>

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

        {/* Meta strip */}
        <div
          className="cgi-hero-meta"
          style={{
            marginTop: 72,
            display: "flex",
            justifyContent: "center",
            gap: 0,
            textAlign: "center",
          }}
        >
          {META.map(([k, v], i) => (
            <div
              key={k}
              style={{
                padding: "24px 48px 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: "#323232", lineHeight: 1.4 }}>
                {v}
              </div>
            </div>
          ))}
        </div>
      </div>

      <style>{`
        .cgi-chip {
          display: inline-flex;
          align-items: center;
          padding: 6px 12px;
          border-radius: 999px;
          border: 1px solid #323232;
          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) {
          .cgi-hero-meta { flex-wrap: wrap; gap: 24px 0 !important; }
          .cgi-hero-meta > div { border-right: none !important; padding: 16px 24px 0 !important; }
        }
      `}</style>
    </section>
  )
}

window.CgiHero = CgiHero