import { useState, useMemo } from "react";

// ═══ WIKI-VERIFIED DATA ═══
const F26 = { cost: 3000, alt: 300, endurance: 1.6, speed: 85, wei: 0, role: "Tier-1 ISR/Relay" };
const F26E = { cost: 3900, alt: 700, endurance: 1.6, speed: 85, wei: 0, role: "Tier-2 EW/ISR", beam: 16, margin: 40, sdr: "AD9361 70MHz-6GHz", channels: 5930 };
const FPV = { cost: 400, role: "Strike" };
const FIBER = { cost: 500, role: "EW-immune strike" };

const SWE_UNITS = [
  { name: "Stridsvagn 122", qty: 44, wei: 1.8, wuv: 1.5, value: 5000000 },
  { name: "CV90 (Strf 90)", qty: 48, wei: 1.0, wuv: 1.2, value: 3000000 },
  { name: "Archer 155mm", qty: 12, wei: 2.5, wuv: 0.8, value: 4500000 },
  { name: "Patgb 360", qty: 30, wei: 0.3, wuv: 0.8, value: 800000 },
];

const RU_UNITS = [
  { name: "T-72B3M", qty: 31, wei: 1.0, wuv: 1.0, value: 1200000 },
  { name: "BMP-3/2", qty: 100, wei: 0.6, wuv: 0.9, value: 800000 },
  { name: "2S19 Msta-S", qty: 18, wei: 2.0, wuv: 0.6, value: 3500000 },
  { name: "BTR-82A", qty: 40, wei: 0.2, wuv: 0.7, value: 500000 },
];

const SCENARIOS = [
  { id: "worst", label: "SÄMSTA", isr: 0.5, hit: 0.30, approve: 0.40, color: "#ef4444",
    f26e_loss: 1.8, f26_loss: 1.5, desc: "DShK jagar F26E, jammer 80%, 30% träff" },
  { id: "normal", label: "NORMALT", isr: 1.0, hit: 0.50, approve: 0.60, color: "#eab308",
    f26e_loss: 0.4, f26_loss: 0.6, desc: "700m eliminerar radio-FPV, jammer 90%, 50% träff" },
  { id: "best", label: "BÄSTA", isr: 1.0, hit: 0.65, approve: 0.80, color: "#22c55e",
    f26e_loss: 0.05, f26_loss: 0.2, desc: "SDR oövervinneligt, 65% träff, EW-stationer hittade" },
];

const OODA = [
  { phase: "OBSERVE", sweNo: 2700, swe: 10, ru: 900, unit: "sek" },
  { phase: "ORIENT", sweNo: 1200, swe: 0.17, ru: 600, unit: "sek" },
  { phase: "DECIDE", sweNo: 600, swe: 22, ru: 750, unit: "sek" },
  { phase: "ACT", sweNo: 330, swe: 180, ru: 390, unit: "sek" },
];

function pk(lr, cep) { return 1 - Math.exp(-Math.pow(lr / cep, 2) * 0.6931); }

function lanchester(sweCps, ruCps, alphaSwe, alphaRu, days) {
  const result = [{ day: 0, swe: sweCps, ru: ruCps }];
  let s = sweCps, r = ruCps;
  for (let d = 1; d <= days; d++) {
    const sl = alphaRu * r;
    const rl = alphaSwe * s;
    s = Math.max(0, s - sl);
    r = Math.max(0, r - rl);
    result.push({ day: d, swe: s, ru: r });
    if (r < ruCps * 0.1 || s < sweCps * 0.1) break;
  }
  return result;
}

const TABS = ["ÖVERSIKT", "LANCHESTER", "OODA", "ARTILLERI", "SCENARIO"];

export default function BrigadePlanner() {
  const [tab, setTab] = useState("ÖVERSIKT");
  const [nF26E, setNF26E] = useState(4);
  const [nF26, setNF26] = useState(8);
  const [nFPV, setNFPV] = useState(50);
  const [scenario, setScenario] = useState(1);
  const [cep, setCep] = useState(8);

  const sc = SCENARIOS[scenario];
  const fleetCost = nF26E * F26E.cost + nF26 * F26.cost + nFPV * FPV.cost + 10 * FIBER.cost + 6 * 50;
  const sweCps = SWE_UNITS.reduce((s, u) => s + u.qty * u.wei * u.wuv, 0);
  const ruCps = RU_UNITS.reduce((s, u) => s + u.qty * u.wei * u.wuv, 0);

  // ISR hours
  const isrH = nF26E * 1.6 * 3 * 7 + nF26 * 1.6 * 3 * 7;
  const areaScan = nF26E * 1.6 * 3 * 7 * 85 * 1.4 * 0.7 + nF26 * 1.6 * 3 * 7 * 85 * 0.6 * 0.7;
  const coveragePasses = areaScan / 100;

  // Effective alpha with drone integration
  const isrMult = Math.min(3.0, 1.8);
  const oodaMult = Math.min(3.0, Math.sqrt(12.5));
  const pkMult = Math.min(3.0, pk(15, cep) / pk(15, 30));
  const alphaSwe = 0.01 * isrMult * oodaMult * pkMult;
  const alphaRu = 0.01;
  const alphaNoD = 0.01;

  const simWith = useMemo(() => lanchester(sweCps, ruCps, alphaSwe, alphaRu, 14), [sweCps, ruCps, alphaSwe, alphaRu]);
  const simWithout = useMemo(() => lanchester(sweCps, ruCps, alphaNoD, alphaRu, 14), [sweCps, ruCps, alphaNoD, alphaRu]);

  const Box = ({ children, className = "" }) => (
    <div className={`bg-slate-900 border border-slate-800 rounded-lg p-4 ${className}`}>{children}</div>
  );
  const Label = ({ children }) => (
    <div className="text-[9px] text-slate-500 uppercase tracking-widest mb-2">{children}</div>
  );
  const Num = ({ label, value, color = "#e2e8f0", sub }) => (
    <div className="text-center">
      <div className="text-[8px] text-slate-500 uppercase tracking-widest">{label}</div>
      <div className="text-xl font-bold" style={{ color }}>{value}</div>
      {sub && <div className="text-[9px] text-slate-600">{sub}</div>}
    </div>
  );

  return (
    <div className="min-h-screen bg-slate-950 text-slate-100 p-3" style={{ fontFamily: "'Courier New', monospace" }}>
      <div className="max-w-4xl mx-auto">
        {/* Header */}
        <div className="flex items-center gap-2 mb-1">
          <div className="w-2 h-2 rounded-full bg-emerald-400" />
          <span className="font-bold text-sm text-white">LISA 26</span>
          <span className="text-[8px] text-slate-500 tracking-widest">BRIGAD PLANERINGSMODUL — NATO DOKTRIN</span>
        </div>

        {/* Tabs */}
        <div className="flex gap-1 mb-3 border-b border-slate-800 pb-1">
          {TABS.map(t => (
            <button key={t} onClick={() => setTab(t)}
              className={`px-3 py-1 text-[9px] tracking-widest font-bold rounded-t ${tab === t ? "bg-slate-800 text-cyan-400 border-b-2 border-cyan-500" : "text-slate-500 hover:text-slate-300"}`}>
              {t}
            </button>
          ))}
        </div>

        {/* Fleet controls */}
        <Box className="mb-3">
          <div className="flex gap-4 items-end flex-wrap">
            {[
              { l: "F26E (700m)", v: nF26E, s: setNF26E, c: "#a855f7", max: 12 },
              { l: "F26 (300m)", v: nF26, s: setNF26, c: "#3b82f6", max: 20 },
              { l: "FPV strike", v: nFPV, s: setNFPV, c: "#22c55e", max: 100 },
            ].map(i => (
              <div key={i.l} className="flex-1 min-w-24">
                <label className="text-[8px] text-slate-500 uppercase tracking-widest block mb-1">{i.l}</label>
                <input type="range" min={0} max={i.max} value={i.v} onChange={e => i.s(parseInt(e.target.value))}
                  className="w-full h-1 rounded accent-cyan-500" />
                <div className="text-sm font-bold text-center" style={{ color: i.c }}>{i.v}× €{i.v * (i.l.includes("E") ? F26E.cost : i.l.includes("26") ? F26.cost : FPV.cost)}</div>
              </div>
            ))}
            <div className="text-center px-3">
              <div className="text-[8px] text-slate-500">FLOTTA</div>
              <div className="text-lg font-bold text-cyan-400">€{fleetCost.toLocaleString()}</div>
              <div className="text-[8px] text-slate-600">{Math.round(fleetCost / 3500)} granater</div>
            </div>
          </div>
        </Box>

        {/* ═══ ÖVERSIKT ═══ */}
        {tab === "ÖVERSIKT" && (
          <div className="space-y-3">
            <div className="grid grid-cols-5 gap-2">
              <Box><Num label="ISR h/vecka" value={Math.round(isrH)} color="#a855f7" sub={`${nF26E + nF26} plattformar`} /></Box>
              <Box><Num label="Area/vecka" value={`${Math.round(areaScan)} km²`} color="#3b82f6" sub={`${Math.round(coveragePasses)}× AO`} /></Box>
              <Box><Num label="OODA-ratio" value="12:1" color="#22c55e" sub="3.5 vs 44 min" /></Box>
              <Box><Num label="Pk Archer" value={`${(pk(15, cep) * 100).toFixed(0)}%`} color="#f59e0b" sub={`CEP ${cep}m`} /></Box>
              <Box><Num label="α-ratio" value={`${(alphaSwe / alphaRu).toFixed(0)}:1`} color="#ef4444" sub="attrition" /></Box>
            </div>

            <div className="grid grid-cols-2 gap-2">
              <Box>
                <Label>Svensk brigad (CPS: {sweCps.toFixed(1)})</Label>
                {SWE_UNITS.map(u => (
                  <div key={u.name} className="flex justify-between text-[9px] py-0.5 border-b border-slate-800">
                    <span className="text-slate-400">{u.qty}× {u.name}</span>
                    <span className="text-white">{(u.qty * u.wei * u.wuv).toFixed(1)} CPS</span>
                  </div>
                ))}
                <div className="flex justify-between text-[9px] py-0.5 mt-1 font-bold">
                  <span className="text-cyan-400">+ Dronflotta ({nF26E + nF26 + nFPV} st)</span>
                  <span className="text-cyan-400">€{fleetCost.toLocaleString()} ({(fleetCost / SWE_UNITS.reduce((s, u) => s + u.qty * u.value, 0) * 100).toFixed(3)}%)</span>
                </div>
              </Box>
              <Box>
                <Label>Rysk brigad (CPS: {ruCps.toFixed(1)})</Label>
                {RU_UNITS.map(u => (
                  <div key={u.name} className="flex justify-between text-[9px] py-0.5 border-b border-slate-800">
                    <span className="text-slate-400">{u.qty}× {u.name}</span>
                    <span className="text-white">{(u.qty * u.wei * u.wuv).toFixed(1)} CPS</span>
                  </div>
                ))}
                <div className="flex justify-between text-[9px] py-0.5 mt-1 font-bold">
                  <span className="text-red-400">+ RU dronflotta (vecka)</span>
                  <span className="text-red-400">€404,200/v</span>
                </div>
              </Box>
            </div>

            <Box className="text-center">
              <div className="text-[9px] text-slate-500 mb-1">LANCHESTER UTFALL (med drönare)</div>
              <div className="text-2xl font-bold text-emerald-400">
                Dag {simWith.findIndex(d => d.ru < ruCps * 0.3) > 0 ? simWith.findIndex(d => d.ru < ruCps * 0.3) : "14+"}: SWE {(simWith[Math.min(3, simWith.length - 1)].swe / sweCps * 100).toFixed(0)}% — RU {(simWith[Math.min(3, simWith.length - 1)].ru / ruCps * 100).toFixed(0)}%
              </div>
              <div className="text-[9px] text-slate-500 mt-1">Utan drönare: dag {simWithout.length - 1}+, SWE {(simWithout[simWithout.length - 1].swe / sweCps * 100).toFixed(0)}% — RU {(simWithout[simWithout.length - 1].ru / ruCps * 100).toFixed(0)}%</div>
            </Box>
          </div>
        )}

        {/* ═══ LANCHESTER ═══ */}
        {tab === "LANCHESTER" && (
          <div className="space-y-3">
            <Box>
              <Label>Lanchesters kvadratlag — dag-för-dag simulering</Label>
              <div className="text-[8px] text-slate-600 mb-2">α_SWE = 0.01 × ISR({isrMult.toFixed(1)}) × OODA({oodaMult.toFixed(1)}) × Pk({pkMult.toFixed(1)}) = {alphaSwe.toFixed(4)} | α_RU = {alphaRu.toFixed(4)}</div>

              <svg viewBox="0 0 600 200" className="w-full" style={{ background: "#0f172a", borderRadius: 6 }}>
                {/* Grid */}
                {[0, 25, 50, 75, 100].map(y => (
                  <g key={y}>
                    <line x1={40} y1={10 + (100 - y) * 1.8} x2={590} y2={10 + (100 - y) * 1.8} stroke="#1e293b" strokeWidth={0.5} />
                    <text x={35} y={14 + (100 - y) * 1.8} fill="#475569" fontSize={7} textAnchor="end">{y}%</text>
                  </g>
                ))}

                {/* SWE with drones */}
                <polyline fill="none" stroke="#22c55e" strokeWidth={2}
                  points={simWith.map((d, i) => `${40 + i * (550 / Math.max(simWith.length, simWithout.length))},${10 + (100 - d.swe / sweCps * 100) * 1.8}`).join(" ")} />

                {/* RU vs SWE with drones */}
                <polyline fill="none" stroke="#ef4444" strokeWidth={2}
                  points={simWith.map((d, i) => `${40 + i * (550 / Math.max(simWith.length, simWithout.length))},${10 + (100 - d.ru / ruCps * 100) * 1.8}`).join(" ")} />

                {/* SWE without drones */}
                <polyline fill="none" stroke="#22c55e" strokeWidth={1} strokeDasharray="4,4" opacity={0.4}
                  points={simWithout.map((d, i) => `${40 + i * (550 / Math.max(simWith.length, simWithout.length))},${10 + (100 - d.swe / sweCps * 100) * 1.8}`).join(" ")} />

                {/* RU vs SWE without drones */}
                <polyline fill="none" stroke="#ef4444" strokeWidth={1} strokeDasharray="4,4" opacity={0.4}
                  points={simWithout.map((d, i) => `${40 + i * (550 / Math.max(simWith.length, simWithout.length))},${10 + (100 - d.ru / ruCps * 100) * 1.8}`).join(" ")} />

                {/* 30% line */}
                <line x1={40} y1={10 + 70 * 1.8} x2={590} y2={10 + 70 * 1.8} stroke="#f59e0b" strokeWidth={0.5} strokeDasharray="3,3" />
                <text x={592} y={10 + 70 * 1.8 + 3} fill="#f59e0b" fontSize={6}>30% stridsoduglig</text>

                {/* Legend */}
                <line x1={50} y1={190} x2={70} y2={190} stroke="#22c55e" strokeWidth={2} />
                <text x={73} y={193} fill="#22c55e" fontSize={7}>SWE (med F26)</text>
                <line x1={170} y1={190} x2={190} y2={190} stroke="#ef4444" strokeWidth={2} />
                <text x={193} y={193} fill="#ef4444" fontSize={7}>RU (mot SWE+F26)</text>
                <line x1={310} y1={190} x2={330} y2={190} stroke="#22c55e" strokeWidth={1} strokeDasharray="4,4" opacity={0.4} />
                <text x={333} y={193} fill="#64748b" fontSize={7}>SWE (utan drönare)</text>
                <line x1={450} y1={190} x2={470} y2={190} stroke="#ef4444" strokeWidth={1} strokeDasharray="4,4" opacity={0.4} />
                <text x={473} y={193} fill="#64748b" fontSize={7}>RU (utan drönare)</text>
              </svg>

              <div className="grid grid-cols-2 gap-2 mt-2">
                <div className="bg-emerald-950 border border-emerald-900 rounded p-2 text-center">
                  <div className="text-emerald-400 font-bold text-sm">MED DRÖNARE</div>
                  <div className="text-[9px] text-emerald-300">RU stridsoduglig dag {simWith.findIndex(d => d.ru < ruCps * 0.3) > 0 ? simWith.findIndex(d => d.ru < ruCps * 0.3) : "14+"}</div>
                  <div className="text-[9px] text-emerald-300">SWE bevarar {(simWith[Math.min(3, simWith.length - 1)].swe / sweCps * 100).toFixed(0)}% stridskraft</div>
                </div>
                <div className="bg-slate-800 rounded p-2 text-center">
                  <div className="text-slate-400 font-bold text-sm">UTAN DRÖNARE</div>
                  <div className="text-[9px] text-slate-500">Strid oavgjord efter dag {simWithout.length - 1}</div>
                  <div className="text-[9px] text-slate-500">SWE: {(simWithout[simWithout.length - 1].swe / sweCps * 100).toFixed(0)}% RU: {(simWithout[simWithout.length - 1].ru / ruCps * 100).toFixed(0)}%</div>
                </div>
              </div>
            </Box>
          </div>
        )}

        {/* ═══ OODA ═══ */}
        {tab === "OODA" && (
          <div className="space-y-3">
            <Box>
              <Label>Boyd OODA-cykel — tempofördel</Label>
              <div className="space-y-1">
                {OODA.map(o => {
                  const sweW = Math.min(100, o.swe / o.ru * 100);
                  const ruW = 100;
                  const sweNoW = Math.min(100, o.sweNo / o.ru * 100);
                  return (
                    <div key={o.phase} className="grid grid-cols-12 gap-2 items-center text-[9px] py-1 border-b border-slate-800">
                      <div className="col-span-2 text-slate-400 font-bold">{o.phase}</div>
                      <div className="col-span-3">
                        <div className="text-[8px] text-cyan-400 mb-0.5">SWE+F26: {o.swe < 1 ? `${(o.swe * 1000).toFixed(0)}ms` : `${o.swe.toFixed(0)}s`}</div>
                        <div className="h-1.5 bg-slate-800 rounded-full"><div className="h-full rounded-full bg-cyan-500" style={{ width: `${sweW}%` }} /></div>
                      </div>
                      <div className="col-span-3">
                        <div className="text-[8px] text-slate-500 mb-0.5">SWE utan: {(o.sweNo / 60).toFixed(0)} min</div>
                        <div className="h-1.5 bg-slate-800 rounded-full"><div className="h-full rounded-full bg-slate-600" style={{ width: `${sweNoW}%` }} /></div>
                      </div>
                      <div className="col-span-3">
                        <div className="text-[8px] text-red-400 mb-0.5">RU: {(o.ru / 60).toFixed(0)} min</div>
                        <div className="h-1.5 bg-slate-800 rounded-full"><div className="h-full rounded-full bg-red-500" style={{ width: `${ruW}%` }} /></div>
                      </div>
                      <div className="col-span-1 text-right text-cyan-400 font-bold">{Math.round(o.ru / o.swe)}×</div>
                    </div>
                  );
                })}
              </div>
              <div className="grid grid-cols-3 gap-2 mt-3">
                <Num label="SWE+F26 cykel" value="3.5 min" color="#22d3ee" />
                <Num label="SWE utan" value="80.5 min" color="#64748b" />
                <Num label="RU cykel" value="44.0 min" color="#ef4444" />
              </div>
              <div className="text-center mt-2 text-emerald-400 font-bold text-sm">
                12× snabbare OODA = {Math.round(44 / 3.5)} eldcykler per rysk cykel
              </div>
            </Box>
          </div>
        )}

        {/* ═══ ARTILLERI ═══ */}
        {tab === "ARTILLERI" && (
          <div className="space-y-3">
            <Box>
              <Label>CEP → Pk (NATO ATP-3.3.6)</Label>
              <div className="mb-3">
                <label className="text-[8px] text-slate-500 block mb-1">Archer CEP efter F26 BDA-korrektion: {cep}m</label>
                <input type="range" min={2} max={50} value={cep} onChange={e => setCep(parseInt(e.target.value))}
                  className="w-full h-1 rounded accent-cyan-500" />
              </div>
              <div className="text-[8px] text-slate-600 mb-2">Pk = 1 − exp(−(LR/CEP)² × 0.6931)</div>
              {[
                { target: "Öppet infanteri", lr: 50 },
                { target: "Mjukt fordon", lr: 30 },
                { target: "APC (BTR-82A)", lr: 15 },
                { target: "IFV (BMP-3)", lr: 10 },
                { target: "MBT (T-72B3M)", lr: 5 },
              ].map(t => {
                const pkArcher = pk(t.lr, cep);
                const pk2S19 = pk(t.lr, 50);
                const pkRatio = pkArcher / pk2S19;
                return (
                  <div key={t.target} className="grid grid-cols-12 gap-2 items-center text-[9px] py-1 border-b border-slate-800">
                    <div className="col-span-3 text-slate-400">{t.target}</div>
                    <div className="col-span-1 text-slate-500 text-right">LR {t.lr}m</div>
                    <div className="col-span-3">
                      <div className="flex justify-between text-[8px]"><span className="text-cyan-400">Archer</span><span className="text-white font-bold">{(pkArcher * 100).toFixed(0)}%</span></div>
                      <div className="h-1.5 bg-slate-800 rounded-full"><div className="h-full rounded-full bg-cyan-500" style={{ width: `${pkArcher * 100}%` }} /></div>
                    </div>
                    <div className="col-span-3">
                      <div className="flex justify-between text-[8px]"><span className="text-red-400">2S19</span><span className="text-white font-bold">{(pk2S19 * 100).toFixed(0)}%</span></div>
                      <div className="h-1.5 bg-slate-800 rounded-full"><div className="h-full rounded-full bg-red-500" style={{ width: `${pk2S19 * 100}%` }} /></div>
                    </div>
                    <div className="col-span-2 text-right text-emerald-400 font-bold">{pkRatio > 99 ? "99+" : pkRatio.toFixed(1)}× bättre</div>
                  </div>
                );
              })}
              <div className="mt-2 bg-emerald-950 border border-emerald-900 rounded p-2 text-center">
                <span className="text-emerald-400 text-sm font-bold">F26 BDA-loop: CEP {cep}m → Pk vs APC = {(pk(15, cep) * 100).toFixed(0)}% (utan BDA: {(pk(15, 50) * 100).toFixed(0)}%)</span>
              </div>
            </Box>
          </div>
        )}

        {/* ═══ SCENARIO ═══ */}
        {tab === "SCENARIO" && (
          <div className="space-y-3">
            <div className="flex gap-1 mb-2">
              {SCENARIOS.map((s, i) => (
                <button key={s.id} onClick={() => setScenario(i)}
                  className={`flex-1 py-2 rounded text-[9px] font-bold tracking-widest ${scenario === i ? "border-2" : "border border-slate-700 opacity-50"}`}
                  style={{ borderColor: scenario === i ? s.color : undefined, color: s.color, background: scenario === i ? s.color + "15" : "transparent" }}>
                  {s.label}
                </button>
              ))}
            </div>

            <Box>
              <div className="text-sm font-bold mb-1" style={{ color: sc.color }}>{sc.label} FALL</div>
              <div className="text-[9px] text-slate-400 mb-3">{sc.desc}</div>

              <div className="grid grid-cols-2 gap-3">
                <div>
                  <Label>Våra veckoförluster</Label>
                  {[
                    [`F26E förlorade`, sc.f26e_loss, sc.f26e_loss * F26E.cost],
                    [`F26 förlorade`, sc.f26_loss, sc.f26_loss * F26.cost],
                    [`FPV förbrukade`, Math.round(nFPV * sc.hit * 0.8), Math.round(nFPV * sc.hit * 0.8) * FPV.cost],
                    [`FPV interceptor`, Math.round(3 * sc.approve), Math.round(3 * sc.approve) * FPV.cost],
                  ].map(([name, qty, cost]) => (
                    <div key={name} className="flex justify-between text-[9px] py-0.5">
                      <span className="text-slate-500">{name}</span>
                      <span className="text-slate-300">{typeof qty === 'number' ? qty.toFixed(1) : qty} st = €{Math.round(cost).toLocaleString()}</span>
                    </div>
                  ))}
                  <div className="border-t border-slate-700 mt-1 pt-1 flex justify-between text-[9px] font-bold">
                    <span className="text-cyan-400">TOTAL</span>
                    <span className="text-cyan-400">€{Math.round(sc.f26e_loss * F26E.cost + sc.f26_loss * F26.cost + nFPV * sc.hit * 0.8 * FPV.cost + 3 * sc.approve * FPV.cost).toLocaleString()}/v</span>
                  </div>
                </div>
                <div>
                  <Label>Ryskt förstört (F26 ISR → strike)</Label>
                  {[
                    ["2S19 artilleri", (sc.isr * sc.hit * sc.approve * 2.7).toFixed(1), 3500000],
                    ["BMP-3/BMP-2", (sc.isr * sc.hit * sc.approve * 3.5).toFixed(1), 800000],
                    ["BTR-82A", (sc.isr * sc.hit * sc.approve * 1.5).toFixed(1), 500000],
                    ["Logistik", (sc.isr * sc.hit * sc.approve * 3.0).toFixed(1), 50000],
                    ["EW-station", (sc.isr * sc.hit * sc.approve * 0.5).toFixed(2), 5000000],
                  ].map(([name, qty, val]) => (
                    <div key={name} className="flex justify-between text-[9px] py-0.5">
                      <span className="text-slate-500">{qty}× {name}</span>
                      <span className="text-emerald-400">€{Math.round(parseFloat(qty) * val).toLocaleString()}</span>
                    </div>
                  ))}
                  <div className="border-t border-slate-700 mt-1 pt-1 flex justify-between text-[9px] font-bold">
                    <span className="text-emerald-400">FÖRSTÖRT</span>
                    <span className="text-emerald-400">€{Math.round(
                      sc.isr * sc.hit * sc.approve * (2.7 * 3500000 + 3.5 * 800000 + 1.5 * 500000 + 3 * 50000 + 0.5 * 5000000)
                    ).toLocaleString()}/v</span>
                  </div>
                </div>
              </div>

              {(() => {
                const ourCost = sc.f26e_loss * F26E.cost + sc.f26_loss * F26.cost + nFPV * sc.hit * 0.8 * FPV.cost + 3 * sc.approve * FPV.cost;
                const ruDestroyed = sc.isr * sc.hit * sc.approve * (2.7 * 3500000 + 3.5 * 800000 + 1.5 * 500000 + 3 * 50000 + 0.5 * 5000000);
                const ratio = ruDestroyed / ourCost;
                return (
                  <div className="mt-3 rounded-lg p-3 text-center" style={{ background: sc.color + "15", border: `1px solid ${sc.color}33` }}>
                    <div className="text-2xl font-bold" style={{ color: sc.color }}>EXCHANGE RATIO: {Math.round(ratio)}:1</div>
                    <div className="text-[9px] text-slate-400 mt-1">Vår kostnad €{Math.round(ourCost).toLocaleString()}/v — Ryskt förstört €{Math.round(ruDestroyed).toLocaleString()}/v</div>
                  </div>
                );
              })()}
            </Box>
          </div>
        )}

        {/* Footer */}
        <div className="mt-4 text-center text-[7px] text-slate-600 tracking-widest">
          FSG-A // FISCHER 26 BRIGAD PLANERINGSMODUL // CC BY-SA 4.0 // NATO AJP-3.2 + LANCHESTER + BOYD OODA + ATP-3.3.6
        </div>
      </div>
    </div>
  );
}