/* global React */
// Cartographic graphics — corridor map, layer diagrams, hero plate

function HeroGraphic() {
  // Field-note plate: layer cross-section. No fake map.
  // Three operating layers stacked, with portfolio counts in the margin.
  const layers = [
    { code: "L·01", name: "Financial Rails", n: 9, ex: ["Ziina", "HyperPay", "PayU", "Flutterwave"] },
    { code: "L·02", name: "Merchant Systems", n: 6, ex: ["Konfío", "Trella", "MaxAB"] },
    { code: "L·03", name: "Urban Infrastructure", n: 4, ex: ["Aldar", "F&N", "BJC"] },
    { code: "L·04", name: "Essential Services", n: 2, ex: ["Careem", "Talabat"] },
  ];
  return (
    <div className="hero-plate" aria-hidden="true">
      <div className="hp-head">
        <span>Field Plate · LM·R.02</span>
        <span>Operating Layer Cross-section</span>
      </div>
      <div className="hp-body">
        {layers.map((l, i) => (
          <div className="hp-row" key={l.code}>
            <div className="hp-code">{l.code}</div>
            <div className="hp-bar">
              <div className="hp-bar-fill" style={{width: `${(l.n / 9) * 100}%`}}/>
              <div className="hp-bar-name">{l.name}</div>
            </div>
            <div className="hp-count">
              <div className="v">{String(l.n).padStart(2, "0")}</div>
              <div className="l">cos.</div>
            </div>
          </div>
        ))}
      </div>
      <div className="hp-foot">
        <div><span className="k">Portfolio</span><span className="v">21</span></div>
        <div><span className="k">Corridors</span><span className="v">04</span></div>
        <div><span className="k">Cities</span><span className="v">15</span></div>
        <div><span className="k">AUM</span><span className="v">US$ 102M</span></div>
      </div>
    </div>
  );
}

function PillarDiagram({ kind }) {
  const stroke = "#9A5626";
  if (kind === 'rails') return (
    <svg viewBox="0 0 64 64" fill="none" stroke={stroke} strokeWidth="1.5">
      <circle cx="12" cy="32" r="4"/><circle cx="32" cy="32" r="4"/><circle cx="52" cy="32" r="4"/>
      <line x1="16" y1="32" x2="28" y2="32"/><line x1="36" y1="32" x2="48" y2="32"/>
      <line x1="32" y1="14" x2="32" y2="28"/><line x1="32" y1="36" x2="32" y2="50"/>
    </svg>
  );
  if (kind === 'commerce') return (
    <svg viewBox="0 0 64 64" fill="none" stroke={stroke} strokeWidth="1.5">
      <rect x="12" y="14" width="40" height="36"/>
      <line x1="12" y1="24" x2="52" y2="24"/>
      <line x1="22" y1="24" x2="22" y2="50"/>
      <line x1="32" y1="24" x2="32" y2="50"/>
      <line x1="42" y1="24" x2="42" y2="50"/>
    </svg>
  );
  return (
    <svg viewBox="0 0 64 64" fill="none" stroke={stroke} strokeWidth="1.5">
      <path d="M 8 50 L 8 30 L 20 22 L 32 30 L 32 50"/>
      <path d="M 32 50 L 32 26 L 44 18 L 56 26 L 56 50"/>
      <line x1="6" y1="50" x2="58" y2="50"/>
    </svg>
  );
}

// Equirectangular projection: lon [-180..180] -> x [0..800], lat [60..-30] -> y [0..540]
function project(lon, lat) {
  const x = ((lon + 180) / 360) * 800;
  const y = ((60 - lat) / 90) * 540;
  return [x, y];
}

// Schematic continent silhouettes (hand-traced, low-poly) in equirectangular space (lon, lat)
const CONTINENTS = [
  // Americas — N + S
  "M -130 55 L -100 50 L -80 45 L -75 25 L -90 15 L -85 8 L -78 -2 L -72 -10 L -70 -22 L -55 -22 L -45 -10 L -38 -8 L -45 -25 L -60 -45 L -72 -55 L -68 -40 L -75 -35 L -85 -10 L -100 8 L -118 30 L -125 40 L -130 55 Z",
  // Europe + Africa + Middle East
  "M -10 55 L 25 55 L 45 45 L 60 35 L 50 25 L 50 12 L 42 8 L 50 -5 L 38 -22 L 30 -32 L 20 -34 L 14 -22 L 0 -5 L -10 8 L -15 22 L -8 32 L -5 42 L -10 55 Z",
  // Asia + India + SE Asia + Indonesia
  "M 60 55 L 130 55 L 145 45 L 138 30 L 122 22 L 110 5 L 105 -5 L 118 -8 L 130 -8 L 138 -2 L 130 0 L 118 4 L 105 12 L 92 18 L 78 22 L 70 30 L 60 35 L 60 55 Z",
  // Australia (decorative — outside corridors)
  "M 115 -12 L 145 -12 L 153 -25 L 138 -38 L 118 -32 L 115 -22 L 115 -12 Z",
];

function CorridorsDiagram() {
  // Real-ish coordinates
  const cities = [
    { n:"Dubai", lon:55.3, lat:25.3, c:"gulf" },
    { n:"Riyadh", lon:46.7, lat:24.7, c:"gulf" },
    { n:"Doha", lon:51.5, lat:25.3, c:"gulf" },
    { n:"Cairo", lon:31.2, lat:30.0, c:"africa" },
    { n:"Lagos", lon:3.4, lat:6.5, c:"africa" },
    { n:"Nairobi", lon:36.8, lat:-1.3, c:"africa" },
    { n:"Singapore", lon:103.8, lat:1.4, c:"sea" },
    { n:"Bangkok", lon:100.5, lat:13.8, c:"sea" },
    { n:"Jakarta", lon:106.8, lat:-6.2, c:"sea" },
    { n:"Manila", lon:121.0, lat:14.6, c:"sea" },
    { n:"México DF", lon:-99.1, lat:19.4, c:"latam" },
    { n:"São Paulo", lon:-46.6, lat:-23.5, c:"latam" },
    { n:"Bogotá", lon:-74.1, lat:4.7, c:"latam" },
  ];
  const cColor = { gulf:"#2B7A78", africa:"#9A5626", sea:"#4D6650", latam:"#9A5626" };
  // Corridor convex bands (hulls drawn through their cities)
  const corridors = [
    { id:"gulf",   label:"GULF", coords:[[55.3,25.3],[46.7,24.7],[51.5,25.3]] },
    { id:"africa", label:"AFRICA", coords:[[3.4,6.5],[31.2,30.0],[36.8,-1.3]] },
    { id:"sea",    label:"SE ASIA", coords:[[100.5,13.8],[103.8,1.4],[106.8,-6.2],[121.0,14.6]] },
    { id:"latam",  label:"LATAM",  coords:[[-99.1,19.4],[-74.1,4.7],[-46.6,-23.5]] },
  ];
  return (
    <div className="map-wrap" role="img" aria-label="Schematic world map showing LITMUS growth corridors across Gulf, Africa, Southeast Asia and Latin America with city markers.">
      <div className="map-meta">CORRIDORS · LM·R.02</div>
      <div className="map-meta-r">SCHEMATIC · NOT TO SCALE</div>
      <svg viewBox="0 0 800 540" preserveAspectRatio="xMidYMid meet">
        <defs>
          <pattern id="cmgrid" width="40" height="40" patternUnits="userSpaceOnUse">
            <path d="M 40 0 L 0 0 0 40" fill="none" stroke="rgba(239,231,216,0.06)" strokeWidth="1"/>
          </pattern>
        </defs>
        <rect width="800" height="540" fill="url(#cmgrid)"/>

        {/* Latitude lines */}
        <g stroke="rgba(239,231,216,0.10)" strokeWidth="1" strokeDasharray="2 5">
          <line x1="0" y1={project(0,30)[1]} x2="800" y2={project(0,30)[1]}/>
          <line x1="0" y1={project(0,0)[1]}  x2="800" y2={project(0,0)[1]}/>
          <line x1="0" y1={project(0,-30)[1]} x2="800" y2={project(0,-30)[1]}/>
        </g>
        <g fill="#7d8b9a" fontFamily="JetBrains Mono, monospace" fontSize="9" letterSpacing="0.12em">
          <text x="14" y={project(0,30)[1]-4}>+30°</text>
          <text x="14" y={project(0,0)[1]-4}>+0°</text>
          <text x="14" y={project(0,-30)[1]-4}>−30°</text>
        </g>

        {/* Continents */}
        <g fill="rgba(239,231,216,0.06)" stroke="rgba(239,231,216,0.22)" strokeWidth="1" strokeLinejoin="round">
          {CONTINENTS.map((d, i) => {
            // Translate the path commands by projecting each (lon,lat) pair
            const projected = d.replace(/(-?\d+\.?\d*)\s+(-?\d+\.?\d*)/g, (_, a, b) => {
              const [x, y] = project(parseFloat(a), parseFloat(b));
              return `${x.toFixed(1)} ${y.toFixed(1)}`;
            });
            return <path key={i} d={projected}/>;
          })}
        </g>

        {/* Corridor regions (soft polygons with copper/teal tints) */}
        <g strokeWidth="1.2" fill="none">
          {corridors.map(c => {
            const pts = c.coords.map(([lon,lat]) => project(lon,lat).map(v=>v.toFixed(1)).join(",")).join(" ");
            const fill = `${cColor[c.id]}26`;
            return (
              <g key={c.id}>
                <polygon points={pts} fill={fill} stroke={cColor[c.id]} strokeDasharray="3 4" strokeOpacity="0.7"/>
              </g>
            );
          })}
        </g>

        {/* Cities */}
        {cities.map(c => {
          const [x, y] = project(c.lon, c.lat);
          return (
            <g key={c.n}>
              <rect x={x-3} y={y-3} width="6" height="6" fill="#EFE7D8"/>
              <text x={x+10} y={y+4} fill="#cad3da" fontSize="10" fontFamily="JetBrains Mono, monospace" letterSpacing="0.1em">{c.n.toUpperCase()}</text>
            </g>
          );
        })}

        {/* Corridor labels */}
        <g fontFamily="JetBrains Mono, monospace" fontSize="10" letterSpacing="0.16em">
          <text x={project(58,38)[0]} y={project(58,38)[1]} fill="#2B7A78">↳ GULF</text>
          <text x={project(-2,18)[0]} y={project(-2,18)[1]} fill="#9A5626">↳ AFRICA</text>
          <text x={project(95,28)[0]} y={project(95,28)[1]} fill="#4D6650">↳ SE ASIA</text>
          <text x={project(-115,30)[0]} y={project(-115,30)[1]} fill="#9A5626">↳ LATAM</text>
        </g>

        {/* Cardinal axis */}
        <g fill="#7d8b9a" fontFamily="JetBrains Mono, monospace" fontSize="9" letterSpacing="0.16em">
          <text x="780" y="14" textAnchor="end">EQUIRECTANGULAR · WGS·84</text>
        </g>
      </svg>
      <noscript>
        <div className="map-fallback">
          <span>Gulf · Dubai · Riyadh · Doha</span><span>Africa · Lagos · Nairobi · Cairo</span><span>SE Asia · Singapore · Bangkok · Jakarta · Manila</span><span>LatAm · México DF · São Paulo · Bogotá</span>
        </div>
      </noscript>
    </div>
  );
}

Object.assign(window, { HeroGraphic, PillarDiagram, CorridorsDiagram });