/* global React, LITMUS_DATA */
// Corridor Ledger — field-note tabular log. No map pretense.
// Rows = corridors, columns = the data that actually matters.

function CorridorSchematic() {
  const rows = [
    {
      code: "C·01", name: "Gulf",
      since: "Active 2021 —",
      cities: ["Dubai", "Abu Dhabi", "Riyadh", "Doha"],
      sectors: "Regulated payments · Lifestyle estates · Mobility",
      cos: 8, partners: 3,
      notable: ["Ziina", "HyperPay", "Aldar"],
    },
    {
      code: "C·02", name: "Africa",
      since: "Active 2022 —",
      cities: ["Lagos", "Nairobi", "Cairo", "Cape Town"],
      sectors: "Mobile-money rails · Merchant settlement · Cross-border FX",
      cos: 4, partners: 2,
      notable: ["Flutterwave", "M-PESA"],
    },
    {
      code: "C·03", name: "Southeast Asia",
      since: "Active 2020 —",
      cities: ["Singapore", "Bangkok", "Jakarta", "Manila"],
      sectors: "Consumer distribution · Hospitality real estate · Digital commerce",
      cos: 6, partners: 4,
      notable: ["F&N", "BJC", "ThaiBev"],
    },
    {
      code: "C·04", name: "Latin America",
      since: "Active 2023 —",
      cities: ["México DF", "São Paulo", "Bogotá"],
      sectors: "SMB credit · Modern retail · Pay-later",
      cos: 3, partners: 1,
      notable: ["Konfío"],
    },
  ];

  return (
    <div className="ledger" aria-label="Corridor ledger — LITMUS growth corridors at a glance">
      <div className="ledger-head">
        <div className="ledger-meta">
          <span>Field Log · LM·R.02</span>
          <span>Updated Q1 2026</span>
        </div>
        <div className="ledger-cols">
          <span className="lc-id">No.</span>
          <span className="lc-corridor">Corridor</span>
          <span className="lc-cities">Cities on the ground</span>
          <span className="lc-sectors">Operating layers</span>
          <span className="lc-cos">Co's</span>
          <span className="lc-partners">Partners</span>
        </div>
      </div>

      <div className="ledger-body">
        {rows.map(r => (
          <div className="ledger-row" key={r.code}>
            <div className="lr-id">
              <div className="lr-code">{r.code}</div>
              <div className="lr-since">{r.since}</div>
            </div>
            <div className="lr-corridor">
              <div className="lr-name">{r.name}</div>
              <div className="lr-notable">
                {r.notable.map((n, i) => (
                  <span key={n}>{n}{i < r.notable.length - 1 ? ' · ' : ''}</span>
                ))}
              </div>
            </div>
            <div className="lr-cities">
              {r.cities.map(c => <span key={c}>{c}</span>)}
            </div>
            <div className="lr-sectors">{r.sectors}</div>
            <div className="lr-cos">{r.cos}</div>
            <div className="lr-partners">{r.partners}</div>
          </div>
        ))}
      </div>

      <div className="ledger-foot">
        <div className="lf-cell"><div className="v">04</div><div className="l">Corridors</div></div>
        <div className="lf-cell"><div className="v">15</div><div className="l">Cities</div></div>
        <div className="lf-cell"><div className="v">21</div><div className="l">Portfolio cos.</div></div>
        <div className="lf-cell"><div className="v">10</div><div className="l">Operator partners</div></div>
        <div className="lf-cell rh"><div className="v">US$ 102<em>M</em></div><div className="l">AUM</div></div>
      </div>
    </div>
  );
}

Object.assign(window, { CorridorSchematic });