// Shift10 Landingpage — Über Mike (authority)
function MikeSection() {
  const lp = useSanityLP();
  const trias = lp?.mikeStats || [
  { label: "Ausbildung", value: "Informatik-Master", sub: "Hochschule Konstanz" },
  { label: "Hauptberuf", value: "KI-Spezialist", sub: "Regionale Bank" },
  { label: "Vorträge", value: "~ 50 Events", sub: "Inspiration vermittelt" }];


  return (
    <section id="ueber-mike" className="section">
      <div className="container">
        <div style={{ display: "grid", gridTemplateColumns: "0.9fr 1.1fr", gap: 80, alignItems: "center" }}>
          {/* Portrait */}
          <div style={{
            position: "relative",
            aspectRatio: "4/5",
            background: "var(--color-neutral-100)",
            border: "1px solid var(--color-neutral-200)",
            overflow: "hidden"
          }}>
            <div className="dotgrid" style={{ color: "var(--color-black)", opacity: 0.12 }} />
            {lp?.mikePhoto?.asset ? (
              <img
                src={sanityImgUrl(lp.mikePhoto.asset, 800)}
                alt="Mike Bänziger"
                style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover", objectPosition: "center top" }}
              />
            ) : (
              <svg viewBox="0 0 400 500" preserveAspectRatio="xMidYMid slice" style={{ position: "absolute", inset: 0, width: "100%", height: "100%" }}>
                <defs>
                  <linearGradient id="portraitGrad" x1="0" y1="0" x2="0" y2="1">
                    <stop offset="0%" stopColor="#1A1A1A" />
                    <stop offset="100%" stopColor="#0A0A0A" />
                  </linearGradient>
                </defs>
                <ellipse cx="200" cy="180" rx="80" ry="92" fill="url(#portraitGrad)" />
                <path d="M 70 500 Q 70 320 200 320 Q 330 320 330 500 Z" fill="url(#portraitGrad)" />
              </svg>
            )}
            {/* HUD label */}
            <div style={{
              position: "absolute", left: 16, bottom: 16,
              fontFamily: "var(--font-mono)", fontSize: 10,
              letterSpacing: "0.18em", textTransform: "uppercase",
              color: "var(--color-neutral-500)",
              background: "rgba(255,255,255,0.85)",
              padding: "6px 10px",
              border: "1px solid var(--color-neutral-200)"
            }}>MIKE_BÄNZIGER · CH-TG

            </div>
            <span className="hud-mark" style={{ top: 12, left: 12, color: "var(--color-neutral-400)" }} />
            <span className="hud-mark" style={{ top: 12, right: 12, color: "var(--color-neutral-400)" }} />
          </div>

          <div>
            <span className="eyebrow">{lp?.mikeEyebrow || "ÜBER SHIFT10"}</span>
            <h2 className="display display--md" style={{ marginTop: 24, fontWeight: 500 }}>
              {lp?.mikeHeadline || "Kein Theoretiker."}<br />
              <em style={{ fontStyle: "normal", color: "var(--color-accent)", fontWeight: "500" }}>{lp?.mikeHeadlineAccent || "Ein Praktiker."}</em>
            </h2>
            <p style={{ marginTop: 28, fontSize: 18, lineHeight: 1.6, color: "var(--color-neutral-700)" }}>
              {lp?.mikeBio || "Ich bin Mike Bänziger — mit 8 Jahren KI Erfahrung vermittle ich Euch das Big Picture auf eine unkomplizierte Weise. Mit den wichtigsten Informationen aus meinem Bachelor in Wirtschaftsinformatik sowie Master in Informatik. Nebst meiner Haupttätigkeit stehe ich zu 30% jeweils am Freitag für mein Jungunternehmen Shift10 GmbH zur Verfügung."}
            </p>

            <div style={{
              marginTop: 40,
              display: "grid", gridTemplateColumns: "repeat(3, 1fr)",
              border: "1px solid var(--color-neutral-200)"
            }}>
              {trias.map((t, i) =>
              <div key={i} style={{
                padding: "24px 22px",
                borderLeft: i === 0 ? "none" : "1px solid var(--color-neutral-200)"
              }}>
                  <div className="mono" style={{ color: "var(--color-neutral-500)", letterSpacing: "0.16em", marginBottom: 10 }}>
                    {t.label}
                  </div>
                  <div style={{ fontFamily: "var(--font-display)", fontSize: 19, fontWeight: 600, letterSpacing: "-0.015em", lineHeight: 1.2 }}>
                    {t.value}
                  </div>
                  <div style={{ marginTop: 4, fontSize: 13, color: "var(--color-neutral-500)" }}>
                    {t.sub}
                  </div>
                </div>
              )}
            </div>
          </div>
        </div>
      </div>
    </section>);

}

Object.assign(window, { MikeSection });