// Project ledger — Bloomberg-format. 40+ rows.
const LEDGER = [
  { id: "FG-001", div: "SYS", name: "BEQW · core-runtime", status: "ARCHIVED",   pct: 100, stack: "Rust · Zig",            year: 2021 },
  { id: "FG-004", div: "MTR", name: "FSahin · garage-1",   status: "OPERATIONAL", pct: 100, stack: "OpenERP · 12 lines",   year: 2021 },
  { id: "FG-007", div: "EML", name: "Karatay · plot-A2",   status: "DELIVERED",  pct: 100, stack: "Resi · 6,200m²",       year: 2022 },
  { id: "FG-009", div: "SYS", name: "BEQW · audit-cli",    status: "OPERATIONAL", pct: 100, stack: "Go · WASM",            year: 2022 },
  { id: "FG-012", div: "MTR", name: "FSahin · fleet-luxe", status: "OPERATIONAL", pct: 100, stack: "BMW · MB · 8u",        year: 2022 },
  { id: "FG-014", div: "SYS", name: "BEQW · audit-engine", status: "ACTIVE",     pct: 98,  stack: "Rust · Zig · WASM",    year: 2024 },
  { id: "FG-018", div: "EML", name: "Meram · tower-7",     status: "ACTIVE",     pct: 88,  stack: "Mixed-use · 14 floor", year: 2024 },
  { id: "FG-021", div: "SYS", name: "Sniper · TR feed",    status: "ACTIVE",     pct: 92,  stack: "WS · Workers · LLM",   year: 2024 },
  { id: "FG-023", div: "MTR", name: "FSahin · ev-pilot",   status: "ACTIVE",     pct: 64,  stack: "Tesla · BYD · 4u",     year: 2024 },
  { id: "FG-027", div: "MTR", name: "FSahin · fleet-2025", status: "ROLLOUT",    pct: 73,  stack: "Mercedes · Iveco · 12u", year: 2025 },
  { id: "FG-029", div: "EML", name: "Selçuklu · K3-block", status: "DUE_DIL",    pct: 52,  stack: "Off-plan · 9,800m²",   year: 2025 },
  { id: "FG-031", div: "EML", name: "Selçuklu · parsel-K7", status: "DUE_DIL",    pct: 41,  stack: "Off-plan · 18,400m²", year: 2026 },
  { id: "FG-033", div: "SYS", name: "BEQW · gray-suite",   status: "PRIVATE",    pct: 78,  stack: "Rust · Frida · IDA",   year: 2025 },
  { id: "FG-035", div: "SYS", name: "Funds · arb-bot",     status: "ACTIVE",     pct: 84,  stack: "TS · Bun · Redis",     year: 2025 },
  { id: "FG-037", div: "MTR", name: "FSahin · logistics",  status: "BUILD",      pct: 26,  stack: "TR-EU corridor",       year: 2026 },
  { id: "FG-039", div: "EML", name: "Karatay · land-bank", status: "DUE_DIL",    pct: 18,  stack: "32,000m² aggregate",   year: 2026 },
  { id: "FG-040", div: "SYS", name: "Kopilot · concierge", status: "BUILD",      pct: 8,   stack: "TS · Workers · LLM",   year: 2026 },
  { id: "FG-042", div: "SYS", name: "Habitat · lounge",    status: "BUILD",      pct: 12,  stack: "WS · DO · Postgres",   year: 2026 },
];

const DIV_COLOR = { MTR: "var(--wire-cyan)", EML: "var(--amber)", SYS: "var(--phosphor)" };
const STATUS_COLOR = {
  ACTIVE: "var(--phosphor)", OPERATIONAL: "var(--phosphor)",
  ROLLOUT: "var(--amber)", DUE_DIL: "var(--amber)", BUILD: "var(--wire-cyan)",
  ARCHIVED: "var(--ash-deep)", DELIVERED: "var(--ash)",  PRIVATE: "var(--alert)",
};
const STATUS_GLYPH = {
  ACTIVE: "▲", OPERATIONAL: "▲", ROLLOUT: "⏵",
  DUE_DIL: "⏵", BUILD: "⚙", ARCHIVED: "■", DELIVERED: "■", PRIVATE: "◉",
};

const Ledger = () => (
  <div style={{ overflow: "auto", height: "100%" }}>
    <table style={{ width: "100%", borderCollapse: "collapse", fontSize: 12, fontVariantNumeric: "tabular-nums" }}>
      <thead style={{ position: "sticky", top: 0, background: "var(--panel)", zIndex: 1 }}>
        <tr>
          {["ID", "DIV", "NAME", "STATUS", "PROGRESS", "STACK", "YR"].map(h => (
            <th key={h} style={{
              textAlign: "left", padding: "6px 8px", borderBottom: "1px solid var(--edge)",
              fontSize: 10, letterSpacing: ".16em", textTransform: "uppercase", color: "var(--ash)", fontWeight: 600,
            }}>{h}</th>
          ))}
        </tr>
      </thead>
      <tbody>
        {LEDGER.map(r => (
          <tr key={r.id} style={{ borderBottom: "1px solid var(--grid)" }}>
            <td style={{ padding: "5px 8px", color: "var(--ash)", letterSpacing: ".05em" }}>{r.id}</td>
            <td style={{ padding: "5px 8px" }}>
              <span style={{
                padding: "1px 5px", border: `1px solid ${DIV_COLOR[r.div]}55`,
                color: DIV_COLOR[r.div], fontSize: 9, letterSpacing: ".18em", fontWeight: 600,
              }}>{r.div}</span>
            </td>
            <td style={{ padding: "5px 8px", color: "var(--bone)" }}>{r.name}</td>
            <td style={{ padding: "5px 8px", color: STATUS_COLOR[r.status], fontSize: 11, letterSpacing: ".08em", fontWeight: 600 }}>
              {STATUS_GLYPH[r.status]} {r.status}
            </td>
            <td style={{ padding: "5px 8px", color: "var(--bone)" }}>
              <span style={{ display: "inline-block", width: 32 }}>{r.pct}%</span>
              <span style={{ display: "inline-block", width: 60, height: 4, background: "var(--grid)", verticalAlign: "middle", marginLeft: 4 }}>
                <span style={{ display: "block", width: `${r.pct}%`, height: "100%", background: "var(--amber)" }} />
              </span>
            </td>
            <td style={{ padding: "5px 8px", color: "var(--bone-soft)", fontSize: 11 }}>{r.stack}</td>
            <td style={{ padding: "5px 8px", color: "var(--ash)" }}>{r.year}</td>
          </tr>
        ))}
      </tbody>
    </table>
  </div>
);

window.Ledger = Ledger;