// Founder profile panel.
const Founder = () => (
  <div style={{ display: "grid", gridTemplateColumns: "120px 1fr", gap: 14, padding: 14, height: "100%" }}>
    <div style={{
      width: 120, height: 120, border: "1px solid var(--amber)",
      display: "flex", alignItems: "center", justifyContent: "center",
      fontFamily: "var(--font-display)", fontSize: 48, color: "var(--amber)",
      fontWeight: 600, background: "var(--elevated)", position: "relative",
    }}>
      BFŞ
      <span style={{ position: "absolute", bottom: -1, right: -1, padding: "1px 5px", background: "var(--amber)", color: "var(--abis)", fontFamily: "var(--font-mono)", fontSize: 8, letterSpacing: ".18em", fontWeight: 700 }}>F-01</span>
      <Crosshair />
    </div>
    <div style={{ minWidth: 0 }}>
      <div style={{ fontFamily: "var(--font-display)", fontSize: 28, color: "var(--bone)", fontWeight: 600, lineHeight: 1.1 }}>Baran Fırat Şahin</div>
      <Coord style={{ display: "block", marginTop: 3 }}>FOUNDER · OPERATOR · KONYA · 2016 → PRESENT · 5 TITLES · 4 FOCUS AREAS</Coord>

      <div style={{ marginTop: 10, display: "flex", flexWrap: "wrap", gap: 4 }}>
        {[
          { l: "FULLSTACK_DEV",     a: false },
          { l: "SR_GRAY_HAT",       a: false },
          { l: "FRONT-BACK_BUILDER", a: false },
          { l: "E-TICARET_UZMANI",  a: false },
          { l: "NASDAQ-BIST_TEKNIK", a: false },
          { l: "FUNDS_MANAGER",     a: true },
        ].map(t => (
          <span key={t.l} style={{
            fontSize: 9, padding: "3px 7px", letterSpacing: ".18em", fontWeight: 600,
            border: `1px solid ${t.a ? "var(--amber)" : "var(--edge)"}`,
            color: t.a ? "var(--amber)" : "var(--bone-soft)",
          }}>{t.l}</span>
        ))}
      </div>

      <div style={{ marginTop: 12, display: "grid", gridTemplateColumns: "1fr 1fr 1fr 1fr", gap: 8 }}>
        {[
          { k: "DIVISIONS", v: "3" },
          { k: "PROJECTS",  v: "42" },
          { k: "AUM",       v: "₺ classified" },
          { k: "SINCE",     v: "2016" },
        ].map(s => (
          <div key={s.k} style={{ padding: "6px 8px", background: "var(--panel)", border: "1px solid var(--edge)" }}>
            <div style={{ fontSize: 9, color: "var(--ash)", letterSpacing: ".16em" }}>{s.k}</div>
            <div style={{ fontSize: 16, color: "var(--bone)", fontVariantNumeric: "tabular-nums", fontWeight: 600, marginTop: 2 }}>{s.v}</div>
          </div>
        ))}
      </div>
    </div>
  </div>
);

window.Founder = Founder;