// Europe map + Live tracking dashboard + Budget calculator

/* ============================================================ */
/* EUROPE COVERAGE MAP                                          */
/* ============================================================ */

// HQ Fogars de la Selva + destinations served across Europe
const HUBS = [
{ code: "FGS", city: "Fogars de la Selva", country: "ES", x: 30.5, y: 67.5, type: "hq", lat: 41.74, lon: 2.66 },
{ code: "BCN", city: "Barcelona", country: "ES", x: 31, y: 68.5, type: "dest", lat: 41.39, lon: 2.17 },
{ code: "MAD", city: "Madrid", country: "ES", x: 22, y: 72, type: "dest", lat: 40.42, lon: -3.70 },
{ code: "VLC", city: "València", country: "ES", x: 26, y: 73, type: "dest", lat: 39.47, lon: -0.38 },
{ code: "LIS", city: "Lisboa", country: "PT", x: 13, y: 75, type: "dest", lat: 38.72, lon: -9.14 },
{ code: "PAR", city: "Paris", country: "FR", x: 36, y: 50, type: "dest", lat: 48.85, lon: 2.35 },
{ code: "LYO", city: "Lyon", country: "FR", x: 39, y: 58, type: "dest", lat: 45.76, lon: 4.84 },
{ code: "MIL", city: "Milano", country: "IT", x: 47, y: 60, type: "dest", lat: 45.46, lon: 9.19 },
{ code: "ROM", city: "Roma", country: "IT", x: 52, y: 72, type: "dest", lat: 41.90, lon: 12.50 },
{ code: "MUN", city: "München", country: "DE", x: 50, y: 50, type: "dest", lat: 48.14, lon: 11.58 },
{ code: "BER", city: "Berlin", country: "DE", x: 54, y: 40, type: "dest", lat: 52.52, lon: 13.40 },
{ code: "HAM", city: "Hamburg", country: "DE", x: 50, y: 35, type: "dest", lat: 53.55, lon: 9.99 },
{ code: "AMS", city: "Amsterdam", country: "NL", x: 42, y: 38, type: "dest", lat: 52.37, lon: 4.90 },
{ code: "BRU", city: "Brussels", country: "BE", x: 41, y: 44, type: "dest", lat: 50.85, lon: 4.35 },
{ code: "CPH", city: "København", country: "DK", x: 54, y: 28, type: "dest", lat: 55.68, lon: 12.57 },
{ code: "STO", city: "Stockholm", country: "SE", x: 62, y: 18, type: "dest", lat: 59.33, lon: 18.07 },
{ code: "HEL", city: "Helsinki", country: "FI", x: 73, y: 16, type: "dest", lat: 60.17, lon: 24.94 },
{ code: "WAR", city: "Warszawa", country: "PL", x: 64, y: 38, type: "dest", lat: 52.23, lon: 21.01 },
{ code: "PRG", city: "Praha", country: "CZ", x: 56, y: 44, type: "dest", lat: 50.08, lon: 14.43 },
{ code: "VIE", city: "Wien", country: "AT", x: 57, y: 50, type: "dest", lat: 48.21, lon: 16.37 },
{ code: "BUD", city: "Budapest", country: "HU", x: 61, y: 51, type: "dest", lat: 47.50, lon: 19.04 },
{ code: "ATH", city: "Athens", country: "GR", x: 68, y: 76, type: "dest", lat: 37.98, lon: 23.73 },
{ code: "LON", city: "London", country: "UK", x: 34, y: 38, type: "dest", lat: 51.51, lon: -0.13 },
{ code: "ZUR", city: "Zürich", country: "CH", x: 45, y: 54, type: "dest", lat: 47.38, lon: 8.54 }];


// All routes originate from Fogars de la Selva (FGS)
const ROUTES = HUBS.filter((h) => h.code !== "FGS").map((h) => ["FGS", h.code]);

function CoverageMap() {
  const t = useT();
  const [activeHub, setActiveHub] = useState(null);
  const [tick, setTick] = useState(0);
  useEffect(() => {
    const id = setInterval(() => setTick((t) => t + 1), 80);
    return () => clearInterval(id);
  }, []);

  return (
    <section id="coverage" style={{ padding: "140px 0 120px" }}>
      <div className="wrap">
        <div className="reveal" style={{ marginBottom: 56, maxWidth: 820 }}>
          <div className="eyebrow" style={{ marginBottom: 18 }}>{t("coverage.eyebrow")}</div>
          <h2>{t("coverage.title.part1")} <em className="serif">{t("coverage.title.italic")}</em> {t("coverage.title.part2")}</h2>
          <p style={{ marginTop: 18, fontSize: 18 }}>
            {t("coverage.body")}
          </p>
        </div>

        <div className="reveal d1" style={{ display: "grid", gridTemplateColumns: "1fr 320px", gap: 1, background: "var(--line)", border: "1px solid var(--line)", borderRadius: 18, overflow: "hidden" }} className="cc-map-grid">
          <div style={{ background: "#ffffff", position: "relative", aspectRatio: "16 / 11" }}>
            <MapSVG tick={tick} activeHub={activeHub} setActiveHub={setActiveHub} />
            <div style={{ position: "absolute", left: 20, top: 20, color: "var(--ink)" }}>
              <div className="mono" style={{ fontSize: 10, color: "var(--muted)", letterSpacing: ".12em" }}>NETWORK TOPOLOGY · LIVE</div>
              <div style={{ fontSize: 16, fontWeight: 500, marginTop: 4 }}>European Coverage</div>
            </div>
            <div style={{ position: "absolute", right: 20, top: 20 }}>
              <LiveDot color="var(--brand)" label={`${ROUTES.length} ${t("coverage.panel.dest")}`} />
            </div>
            <div style={{ position: "absolute", left: 20, bottom: 20, display: "flex", gap: 18 }}>
              <LegendDot color="var(--brand)" label={t("coverage.legend.hq")} />
              <LegendDot color="rgba(0,0,0,.4)" label={t("coverage.legend.dest")} />
            </div>
          </div>

          <div style={{ background: "var(--bg-2)", padding: 0, maxHeight: "min(620px, 80vh)", overflow: "auto" }}>
            <div style={{ padding: "20px 22px", borderBottom: "1px solid var(--line)", position: "sticky", top: 0, background: "var(--bg-2)", zIndex: 2 }}>
              <div className="mono" style={{ fontSize: 10, letterSpacing: ".12em", color: "var(--muted)" }}>{activeHub ? t("coverage.panel.detail") : t("coverage.panel.dest")} · {HUBS.length - 1}</div>
              <div style={{ fontSize: 16, fontWeight: 500, marginTop: 4 }}>
                {activeHub ? `${HUBS.find((h) => h.code === activeHub).city}` : t("coverage.panel.title")}
              </div>
            </div>
            {activeHub ? <HubDetail hub={HUBS.find((h) => h.code === activeHub)} onBack={() => setActiveHub(null)} /> : <HubList onPick={setActiveHub} />}
          </div>
        </div>
      </div>

      <style>{`
        @media (max-width: 980px) {
          .cc-map-grid { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </section>);

}

function LegendDot({ color, label }) {
  return (
    <span className="mono" style={{ display: "inline-flex", alignItems: "center", gap: 6, fontSize: 10, letterSpacing: ".1em", color: "rgba(0,0,0,.5)" }}>
      <span style={{ width: 6, height: 6, borderRadius: 999, background: color, boxShadow: color !== "#fff" ? `0 0 0 2px rgba(0,0,0,.025)` : "" }} />
      {label.toUpperCase()}
    </span>);

}

function HubList({ onPick }) {
  // HQ first, then destinations alphabetically by city
  const sorted = [...HUBS].sort((a, b) => {
    if (a.type === "hq") return -1;
    if (b.type === "hq") return 1;
    return a.city.localeCompare(b.city);
  });
  return (
    <div>
      {sorted.map((h) =>
      <button key={h.code} onClick={() => onPick(h.code)} className="cc-hov" style={{
        display: "flex", width: "100%", padding: "14px 22px",
        justifyContent: "space-between", alignItems: "center",
        background: "transparent", border: 0,
        borderBottom: "1px solid var(--line)", color: "inherit", cursor: "none",
        fontFamily: "var(--font-sans)"
      }}>
          <div style={{ textAlign: "left" }}>
            <div className="mono" style={{ fontSize: 10, color: h.type === "hq" ? "var(--brand)" : "var(--muted)", letterSpacing: ".12em", fontWeight: 500 }}>
              {h.code} · {h.country}{h.type === "hq" ? " · HQ" : ""}
            </div>
            <div style={{ fontSize: 14, fontWeight: 500, marginTop: 2 }}>{h.city}</div>
          </div>
          <I.arrowR style={{ color: "var(--muted)" }} />
        </button>
      )}
    </div>);

}

function HubDetail({ hub, onBack }) {
  const t = useT();
  const isHQ = hub.type === "hq";
  return (
    <div style={{ padding: "20px 22px" }}>
      <button onClick={onBack} className="cc-hov" style={{ background: "transparent", border: 0, padding: 0, color: "var(--brand)", fontFamily: "var(--font-mono)", fontSize: 11, letterSpacing: ".08em", marginBottom: 16, cursor: "none" }}>
        {t("coverage.back")}
      </button>
      <div className="mono" style={{ fontSize: 10, color: "var(--muted)", letterSpacing: ".12em", marginBottom: 4 }}>{hub.code} · {hub.country} · {isHQ ? "HEADQUARTERS" : t("coverage.dest.served")}</div>
      <h3 style={{ marginBottom: 14 }}>{hub.city}</h3>

      <div style={{ borderTop: "1px solid var(--line)", paddingTop: 14, marginBottom: 14 }}>
        <div className="mono" style={{ fontSize: 10, color: "var(--muted)", letterSpacing: ".12em", marginBottom: 6 }}>{t("coverage.coords")}</div>
        <div className="mono" style={{ fontSize: 13 }}>{hub.lat.toFixed(2)}°N  ·  {hub.lon.toFixed(2)}°{hub.lon >= 0 ? "E" : "W"}</div>
      </div>

      {isHQ ?
      <div style={{ borderTop: "1px solid var(--line)", paddingTop: 14 }}>
          <div className="mono" style={{ fontSize: 10, color: "var(--muted)", letterSpacing: ".12em", marginBottom: 6 }}>{t("coverage.address")}</div>
          <div style={{ fontSize: 14 }}>{t("coverage.address.l1")}</div>
          <div style={{ fontSize: 14 }}>{t("coverage.address.l2")}</div>
          <div style={{ fontSize: 14 }}>{t("coverage.address.l3")}</div>
        </div> :

      <div style={{ borderTop: "1px solid var(--line)", paddingTop: 14 }}>
          <div className="mono" style={{ fontSize: 10, color: "var(--muted)", letterSpacing: ".12em", marginBottom: 6 }}>{t("coverage.route.from.hq")}</div>
          <div className="mono" style={{ fontSize: 13 }}>FGS → {hub.code}  ·  ATP-FRC</div>
        </div>
      }
    </div>);

}

// ISO numeric codes (world-atlas zero-pads to 3 digits) of the 20 countries served
const COVERAGE_COUNTRY_IDS = new Set([
  "620","724","250","056","528","442","276","208","752","246",
  "616","203","703","040","756","348","642","100","380","020"
]);
// Spanish country names for the tooltip
const COVERAGE_COUNTRY_NAMES = {
  "620": "Portugal", "724": "España", "250": "Francia", "056": "Bélgica",
  "528": "Países Bajos", "442": "Luxemburgo", "276": "Alemania", "208": "Dinamarca",
  "752": "Suecia", "246": "Finlandia", "616": "Polonia", "203": "Chequia",
  "703": "Eslovaquia", "040": "Austria", "756": "Suiza", "348": "Hungría",
  "642": "Rumanía", "100": "Bulgaria", "380": "Italia", "020": "Andorra"
};
// Geographic bbox that polygons must overlap to be kept (filters out overseas territories
// like Greenland/Denmark, French Guiana/France, Caribbean/Netherlands, etc.)
const EU_BBOX = { minLon: -12, maxLon: 32, minLat: 34, maxLat: 72 };

// HQ in Fogars de la Selva (Carrer Llevant 21, Barcelona)
const HQ_COORDS = { lat: 41.74, lon: 2.66, name: "Fogars de la Selva" };

// Network of nodes (cities) — routes branch out like roads/trees, not just
// straight lines from HQ. Each node has [lon, lat]. HQ is the trunk; everything
// else descends from it through intermediate hubs.
const NETWORK_NODES = {
  HQ:  [ 2.66, 41.74],

  // Iberia
  AND: [ 1.52, 42.51], ZAR: [-0.88, 41.66], VAL: [-0.38, 39.47],
  ALI: [-0.49, 38.35], MUR: [-1.13, 37.99], MAD: [-3.70, 40.42],
  TOL: [-4.03, 39.86], SEV: [-5.99, 37.39], MAL: [-4.42, 36.72],
  GRA: [-3.60, 37.18], CDZ: [-6.29, 36.53], BIL: [-2.93, 43.26],
  PAM: [-1.65, 42.81], BUR: [-3.69, 42.34], VIG: [-8.72, 42.24],
  COR: [-8.41, 43.37], OVI: [-5.85, 43.36], SAN: [-3.81, 43.46],
  // Portugal
  LIS: [-9.14, 38.72], POR: [-8.61, 41.15], FAR: [-7.94, 37.02],

  // France
  PAR: [ 2.35, 48.85], LYO: [ 4.84, 45.76], BOR: [-0.58, 44.84],
  MAR: [ 5.37, 43.30], TOU: [ 1.44, 43.60], NIC: [ 7.27, 43.70],
  STR: [ 7.75, 48.58], NAN: [-1.55, 47.22], REN: [-1.68, 48.11],
  LIL: [ 3.06, 50.63], MTP: [ 3.88, 43.61], CLR: [ 3.09, 45.78],

  // Italy
  MIL: [ 9.19, 45.46], ROM: [12.50, 41.90], TOR: [ 7.69, 45.07],
  VEN: [12.32, 45.44], BOL: [11.34, 44.49], GEA: [ 8.93, 44.40],
  NAP: [14.27, 40.85], FLO: [11.26, 43.77],

  // Benelux
  BRU: [ 4.35, 50.85], ANT: [ 4.40, 51.22], AMS: [ 4.90, 52.37],
  ROT: [ 4.48, 51.92], LUX: [ 6.13, 49.61],

  // Germany
  BER: [13.40, 52.52], MUN: [11.58, 48.14], HAM: [ 9.99, 53.55],
  FRA: [ 8.68, 50.11], COL: [ 6.96, 50.94], STU: [ 9.18, 48.78],
  DUS: [ 6.78, 51.23], HAN: [ 9.74, 52.37], LEI: [12.37, 51.34],

  // Switzerland
  ZUR: [ 8.54, 47.38], GVA: [ 6.14, 46.20], BAS: [ 7.59, 47.56],

  // Austria
  VIE: [16.37, 48.21], SAL: [13.05, 47.80], INN: [11.39, 47.27],

  // Czech / Slovak / Hungary
  PRG: [14.43, 50.08], BRN: [16.61, 49.20], BTS: [17.11, 48.15],
  BUD: [19.04, 47.50], DEB: [21.63, 47.53],

  // Poland
  WAR: [21.01, 52.23], KRA: [19.94, 50.06], WRO: [17.04, 51.11],
  POZ: [16.93, 52.41], GDA: [18.65, 54.35],

  // Romania / Bulgaria
  BUC: [26.10, 44.43], CLU: [23.59, 46.77], TIM: [21.23, 45.75],
  SOF: [23.32, 42.70],

  // Scandinavia (overland routing via Jutland → Funen → Sjælland bridges)
  COP: [12.57, 55.68], AAR: [10.20, 56.16], MAS: [13.00, 55.61],
  STO: [18.07, 59.33], GOT: [11.97, 57.71], HEL: [24.94, 60.17],
  FLE: [ 9.43, 54.79], KIE: [10.13, 54.32], ODE: [10.39, 55.40],
  AAL: [ 9.92, 57.05],

  // Extra branch cities (more ramifications, land-only)
  NUR: [11.08, 49.45], DRE: [13.74, 51.05],
  REI: [ 4.03, 49.26], DIJ: [ 5.04, 47.32],
  VLD: [-4.72, 41.65], LEO: [-5.57, 42.60],
  BAR: [16.87, 41.12]
};

// Edges of the road-network. Trunks leave HQ; secondary hubs (MAD, PAR, MIL,
// MUN…) branch out into smaller cities. Curated to 83 routes so there are
// exactly 82 vehicles in motion across Europe at any moment.
const NETWORK_EDGES = [
  // Trunks from HQ (Fogars) — overland only, no sea crossings — 6
  // (Marseille reached via MTP overland; Milan via LYO/Switzerland chain)
  ["HQ","AND"], ["HQ","ZAR"], ["HQ","VAL"], ["HQ","PAR"], ["HQ","LYO"],
  ["HQ","MTP"],

  // Spain — 14
  ["ZAR","MAD"], ["ZAR","PAM"], ["ZAR","BUR"], ["PAM","BIL"], ["BIL","SAN"],
  ["SAN","OVI"], ["OVI","COR"], ["COR","VIG"], ["VIG","POR"], ["POR","LIS"],
  ["MAD","TOL"], ["MAD","SEV"], ["SEV","MAL"],
  ["VAL","ALI"],

  // France — 10
  ["PAR","NAN"], ["PAR","REN"], ["PAR","LIL"], ["PAR","STR"], ["PAR","BOR"],
  ["BOR","TOU"], ["TOU","MTP"], ["MTP","MAR"], ["LYO","CLR"], ["LYO","NIC"],

  // Italy — 7
  ["MIL","TOR"], ["MIL","GEA"], ["MIL","BOL"], ["MIL","VEN"], ["BOL","FLO"],
  ["FLO","ROM"], ["ROM","NAP"],

  // Alps / Switzerland — 5
  ["MIL","ZUR"], ["ZUR","GVA"], ["GVA","LYO"], ["ZUR","MUN"], ["MIL","INN"],

  // Germany — 9
  ["MUN","STU"], ["MUN","FRA"], ["FRA","COL"], ["COL","DUS"], ["DUS","HAN"],
  ["HAN","HAM"], ["HAM","BER"], ["MUN","LEI"], ["LEI","BER"],

  // Benelux — 5
  ["COL","BRU"], ["BRU","ANT"], ["ANT","AMS"], ["AMS","ROT"], ["BRU","LUX"],

  // Austria / Czechia / Slovakia / Hungary — 7
  ["MUN","SAL"], ["SAL","INN"], ["MUN","VIE"], ["VIE","PRG"], ["VIE","BTS"],
  ["VIE","BUD"], ["PRG","BRN"],

  // Poland — 6
  ["BRN","KRA"], ["KRA","WRO"], ["WRO","POZ"], ["POZ","WAR"], ["WAR","GDA"],
  ["BTS","KRA"],

  // Eastern Europe / Balkans — 4
  ["BUD","TIM"], ["TIM","CLU"], ["CLU","BUC"], ["BUC","SOF"],

  // Scandinavia (overland via Jutland → Funen → Sjælland bridges) — 9
  ["HAM","KIE"], ["KIE","FLE"], ["FLE","AAR"], ["AAR","AAL"],
  ["AAR","ODE"], ["ODE","COP"], ["COP","MAS"], ["MAS","GOT"],
  ["GOT","STO"]];

// Total edges: 6 + 14 + 10 + 7 + 5 + 9 + 5 + 7 + 6 + 4 + 9 = 82 vehicles in motion.



function MapSVG({ tick, activeHub, setActiveHub }) {
  const t = useT();
  const { lang } = useLang();
  // ViewBox aspect ratio matches the container's 5/6 (slightly taller than wide, like Europe).
  const VB_W = 1000, VB_H = 1200;

  const [countryPaths, setCountryPaths] = useState([]);
  const [hubXY, setHubXY] = useState({});
  const [hqXY, setHqXY] = useState(null);
  const [routes, setRoutes] = useState([]);
  const [nodesXY, setNodesXY] = useState({});
  const [hoveredId, setHoveredId] = useState(null);
  const ready = countryPaths.length > 0 && Object.keys(hubXY).length > 0;

  useEffect(() => {
    if (typeof d3 === "undefined" || typeof topojson === "undefined") return;

    function polyCentroidInEurope(ring) {
      let sumLon = 0, sumLat = 0, n = 0;
      for (const [lon, lat] of ring) { sumLon += lon; sumLat += lat; n++; }
      const cLon = sumLon / n, cLat = sumLat / n;
      return cLon >= EU_BBOX.minLon && cLon <= EU_BBOX.maxLon &&
        cLat >= EU_BBOX.minLat && cLat <= EU_BBOX.maxLat;
    }

    function mainlandOnly(feature) {
      if (feature.geometry.type === "Polygon") {
        return polyCentroidInEurope(feature.geometry.coordinates[0]) ? feature : null;
      }
      if (feature.geometry.type === "MultiPolygon") {
        let best = null, bestArea = -Infinity;
        for (const coords of feature.geometry.coordinates) {
          if (!polyCentroidInEurope(coords[0])) continue;
          const area = d3.geoArea({ type: "Polygon", coordinates: coords });
          if (area > bestArea) { bestArea = area; best = coords; }
        }
        if (!best) return null;
        return { ...feature, geometry: { type: "Polygon", coordinates: best } };
      }
      return feature;
    }

    let cancelled = false;
    d3.json("https://cdn.jsdelivr.net/npm/world-atlas@2/countries-50m.json").
    then((world) => {
      if (cancelled) return;
      const features = topojson.feature(world, world.objects.countries).features.
      filter((f) => COVERAGE_COUNTRY_IDS.has(f.id)).
      map(mainlandOnly).
      filter(Boolean);

      const projection = d3.geoConicConformal().
      center([15, 52]).
      parallels([35, 65]).
      rotate([-10, 0]).
      fitExtent([[6, 6], [VB_W - 6, VB_H - 6]], { type: "FeatureCollection", features });

      const pathGen = d3.geoPath(projection);
      const names = (COUNTRY_NAMES_I18N && COUNTRY_NAMES_I18N[lang]) || COVERAGE_COUNTRY_NAMES;
      setCountryPaths(features.map((f) => ({
        id: f.id,
        d: pathGen(f),
        name: names[f.id] || (f.properties && f.properties.name) || ""
      })));

      const xy = {};
      HUBS.forEach((h) => {
        const p = projection([h.lon, h.lat]);
        if (p) xy[h.code] = { x: p[0] / VB_W * 100, y: p[1] / VB_H * 100 };
      });
      setHubXY(xy);

      const projectedNodes = {};
      for (const key of Object.keys(NETWORK_NODES)) {
        const [lon, lat] = NETWORK_NODES[key];
        const p = projection([lon, lat]);
        if (p) projectedNodes[key] = { x: p[0], y: p[1] };
      }
      if (projectedNodes.HQ) setHqXY(projectedNodes.HQ);

      const newRoutes = NETWORK_EDGES.map(([a, b], i) => {
        const A = projectedNodes[a];
        const B = projectedNodes[b];
        if (!A || !B) return null;
        const dx = B.x - A.x, dy = B.y - A.y;
        const len = Math.hypot(dx, dy) || 1;
        const ux = dx / len, uy = dy / len;
        const px = -uy, py = ux;

        const phi = ((i * 0.6180339887) % 1) * 0.6 + 0.7;
        const amp1 = Math.min(len * 0.07, 22) * phi;
        const amp2 = Math.min(len * 0.07, 22) * (2 - phi);
        const side = i % 2 === 0 ? 1 : -1;
        const c1x = A.x + dx * 0.33 + px * amp1 * side;
        const c1y = A.y + dy * 0.33 + py * amp1 * side;
        const c2x = A.x + dx * 0.67 - px * amp2 * side;
        const c2y = A.y + dy * 0.67 - py * amp2 * side;
        const path = `M${A.x.toFixed(1)},${A.y.toFixed(1)} C${c1x.toFixed(1)},${c1y.toFixed(1)} ${c2x.toFixed(1)},${c2y.toFixed(1)} ${B.x.toFixed(1)},${B.y.toFixed(1)}`;
        return {
          d: path,
          dur: (2.4 + (i % 7) * 0.42).toFixed(2),
          begin: (-((i * 0.27) % 5)).toFixed(2),
          to: { x: B.x, y: B.y },
          isFromHQ: a === "HQ",
          facesLeft: dx < 0
        };
      }).filter(Boolean);
      setRoutes(newRoutes);

      setNodesXY(projectedNodes);
    }).
    catch(() => {});

    return () => { cancelled = true; };
  }, [lang]);

  const hoveredCountry = hoveredId ? countryPaths.find((p) => p.id === hoveredId) : null;
  const totalCountries = countryPaths.length || 20;

  return (
    <div
      style={{ position: "absolute", inset: 0 }}
      onMouseLeave={() => setHoveredId(null)}>

      <svg viewBox={`0 0 ${VB_W} ${VB_H}`} preserveAspectRatio="xMidYMid meet" style={{ width: "100%", height: "100%", position: "absolute", inset: 0, filter: "drop-shadow(0 24px 30px rgba(226,29,36,.10))" }}>

        {countryPaths.map((p) => {
          const isHover = hoveredId === p.id;
          return (
            <path
              key={p.id}
              d={p.d}
              fill={isHover ? "#f9a7ab" : "#fdcdcf"}
              stroke="#ffffff"
              strokeWidth={isHover ? "1.6" : "1.1"}
              strokeLinejoin="round"
              strokeLinecap="round"
              onMouseEnter={() => setHoveredId(p.id)}
              style={{ transition: "fill .18s ease, stroke-width .18s ease", cursor: "pointer" }} />);
        })}

        {/* Animated road network — one white dot travelling along every route */}
        {routes.map((r, i) =>
        <g key={`route-${i}`} style={{ pointerEvents: "none" }}>
            <path
              d={r.d}
              fill="none"
              stroke={r.isFromHQ ? "rgba(255,255,255,.7)" : "rgba(255,255,255,.45)"}
              strokeWidth={r.isFromHQ ? "2.2" : "1.5"}
              strokeLinecap="round" />
            <circle r={r.isFromHQ ? "6.5" : "5"} fill="#ffffff">
              <animateMotion dur={`${r.dur}s`} begin={`${r.begin}s`} repeatCount="indefinite" path={r.d} />
              <animate attributeName="opacity" values="0;1;1;0" keyTimes="0;0.08;0.92;1" dur={`${r.dur}s`} begin={`${r.begin}s`} repeatCount="indefinite" />
            </circle>
          </g>
        )}


        {/* HQ marker */}
        {hqXY &&
        <g style={{ pointerEvents: "none" }}>
            <circle cx={hqXY.x} cy={hqXY.y} r="14" fill="rgba(226,29,36,.18)">
              <animate attributeName="r" values="14;34;14" dur="2.6s" repeatCount="indefinite" />
              <animate attributeName="opacity" values="0.55;0;0.55" dur="2.6s" repeatCount="indefinite" />
            </circle>
            <circle cx={hqXY.x} cy={hqXY.y} r="22" fill="none" stroke="rgba(226,29,36,.45)" strokeWidth="1.5">
              <animate attributeName="r" values="10;26;10" dur="2.6s" begin="-1.3s" repeatCount="indefinite" />
              <animate attributeName="opacity" values="0.7;0;0.7" dur="2.6s" begin="-1.3s" repeatCount="indefinite" />
            </circle>
            <circle cx={hqXY.x} cy={hqXY.y} r="8" fill="#ffffff" stroke="var(--ink)" strokeWidth="2" />
            <circle cx={hqXY.x} cy={hqXY.y} r="3" fill="var(--brand-2)" />
          </g>
        }
      </svg>

      {/* Floating glass info panel */}
      {ready &&
      <div
        className="cc-map-panel"
        style={{
          position: "absolute",
          left: "3.5%",
          top: "3.5%",
          background: "rgba(255, 255, 255, 0.62)",
          backdropFilter: "blur(18px) saturate(160%)",
          WebkitBackdropFilter: "blur(18px) saturate(160%)",
          border: "1px solid rgba(255, 255, 255, 0.55)",
          borderRadius: 14,
          padding: "12px 14px 13px",
          minWidth: 168,
          boxShadow: "0 14px 40px -14px rgba(20,20,40,.18), 0 1px 0 rgba(255,255,255,.7) inset",
          zIndex: 6,
          pointerEvents: "none",
          transition: "transform .25s cubic-bezier(.2,.8,.2,1)",
        }}>

          <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 8 }}>
            <span style={{
              width: 7, height: 7, borderRadius: 999,
              background: hoveredCountry ? "var(--brand)" : "rgba(0,0,0,.25)",
              boxShadow: hoveredCountry ? "0 0 0 4px rgba(226,29,36,.16)" : "none",
              transition: "background .2s ease, box-shadow .2s ease"
            }} />
            <span className="mono" style={{
              fontSize: 9, letterSpacing: ".14em",
              color: "rgba(0,0,0,.55)", textTransform: "uppercase", fontWeight: 600
            }}>
              {hoveredCountry ? t("map.dest") : t("map.coverage")}
            </span>
          </div>
          <div style={{
            fontSize: 18, fontWeight: 500, letterSpacing: "-0.018em",
            color: "var(--ink)", lineHeight: 1.1
          }}>
            {hoveredCountry ? hoveredCountry.name : `${totalCountries} ${t("map.countries.suffix")}`}
          </div>
          <div className="mono" style={{
            fontSize: 9.5, letterSpacing: ".08em",
            color: "rgba(0,0,0,.5)", marginTop: 7, fontWeight: 500
          }}>
            {hoveredCountry ? t("map.routes") : t("map.hover")}
          </div>
        </div>
      }
    </div>);

}

/* ============================================================ */
/* TRACKING DASHBOARD — full live demo                          */
/* ============================================================ */

function Tracking() {
  const t = useT();
  const [tick, setTick] = useState(0);
  useEffect(() => {
    const id = setInterval(() => setTick((t) => t + 1), 1200);
    return () => clearInterval(id);
  }, []);

  return (
    <section id="tracking" style={{ padding: "140px 0 120px", background: "transparent" }}>
      <div className="wrap">
        <div className="reveal" style={{ marginBottom: 72, maxWidth: 880 }}>
          <div className="eyebrow" style={{ marginBottom: 18 }}>{t("track.eyebrow")}</div>
          <h2>{t("track.title.part1")} <em className="serif">{t("track.title.italic")}</em></h2>
          <p style={{ marginTop: 20, fontSize: 19, maxWidth: 720, lineHeight: 1.55 }}>{t("track.body")}</p>
          <div style={{ marginTop: 22, display: "flex", gap: 10, flexWrap: "wrap" }}>
            <a href="tel:+34972863031" className="btn btn-ghost" style={{ fontSize: 13 }}>
              <I.signal /> {t("track.cta")} · +34 972 863 031
            </a>
          </div>
        </div>

        <div className="reveal d1" style={{ display: "grid", gridTemplateColumns: "1.1fr 1fr", gap: 56, alignItems: "start" }} className="cc-track-grid">
          <TempReportMock tick={tick} />

          <div style={{ display: "flex", flexDirection: "column", gap: 0 }}>
            <ValueRow n="01" title={t("track.row.1.title")} body={t("track.row.1.body")} />
            <ValueRow n="02" title={t("track.row.2.title")} body={t("track.row.2.body")} />
            <ValueRow n="03" title={t("track.row.3.title")} body={t("track.row.3.body")} />
            <ValueRow n="04" title={t("track.row.4.title")} body={t("track.row.4.body")} last />
          </div>
        </div>
      </div>

      <style>{`
        @media (max-width: 980px) {
          .cc-track-grid { grid-template-columns: 1fr !important; gap: 40px !important; }
        }
      `}</style>
    </section>);

}

function ValueRow({ n, title, body, last }) {
  return (
    <div style={{ display: "grid", gridTemplateColumns: "44px 1fr", gap: 20, padding: "22px 0", borderBottom: last ? 0 : "1px solid var(--line)" }}>
      <div className="mono" style={{ fontSize: 11, color: "var(--brand)", letterSpacing: ".14em", fontWeight: 500, paddingTop: 4 }}>{n}</div>
      <div>
        <h4 style={{ fontSize: 17, fontWeight: 500, marginBottom: 8, letterSpacing: "-0.012em" }}>{title}</h4>
        <p style={{ fontSize: 14.5, lineHeight: 1.55 }}>{body}</p>
      </div>
    </div>);

}

// PDF-style mock report — looks like the actual document the customer receives
function TempReportMock({ tick }) {
  const t = useT();
  return (
    <div style={{ position: "relative" }}>
      <div style={{ position: "absolute", inset: "14px -14px -14px 14px", background: "var(--bg)", border: "1px solid var(--line)", zIndex: 0 }} />
      <div style={{ position: "absolute", inset: "7px -7px -7px 7px", background: "#fff", border: "1px solid var(--line)", zIndex: 1 }} />

      {/* Simulation disclaimer */}
      <div style={{
        position: "absolute", left: -8, top: -16, zIndex: 5,
        background: "var(--brand)", color: "#fff", padding: "6px 12px",
        fontFamily: "var(--font-mono)", fontSize: 10, letterSpacing: ".16em",
        fontWeight: 600,
      }}>
        {t("track.report.sim")}
      </div>

      <div style={{
        position: "relative", zIndex: 2,
        background: "#fff",
        border: "1px solid var(--line)",
        boxShadow: "0 20px 50px -20px rgba(0,0,0,.12)"
      }}>
        <div style={{ padding: "26px 30px 18px", borderBottom: "1px solid var(--line)", display: "flex", justifyContent: "space-between", alignItems: "center", gap: 16 }}>
          <div>
            <div style={{ fontSize: 14, fontWeight: 600, letterSpacing: "-0.01em", color: "var(--ink)" }}>CoolCargo Solutions S.L.</div>
            <div className="mono" style={{ fontSize: 10, letterSpacing: ".14em", color: "var(--muted)", marginTop: 4, fontWeight: 500 }}>{t("track.report.title")}</div>
          </div>
          <div style={{ textAlign: "right" }}>
            <div className="mono" style={{ fontSize: 10, color: "var(--muted)", letterSpacing: ".1em" }}>SHIPMENT</div>
            <div className="mono" style={{ fontSize: 13, fontWeight: 500, marginTop: 2 }}>CC-4422</div>
          </div>
        </div>

        <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", borderBottom: "1px solid var(--line)" }}>
          {[
          [t("track.report.origin"), "Barcelona, ES"],
          [t("track.report.dest"), "Berlin, DE"],
          [t("track.report.goods"), "Pharma · 2–8 °C"],
          [t("track.report.combo"), "Actros · ATP-FRC"]].
          map(([k, v], i) =>
          <div key={k} style={{ padding: "14px 18px", borderRight: i < 3 ? "1px solid var(--line)" : 0 }}>
              <div className="mono" style={{ fontSize: 9, letterSpacing: ".14em", color: "var(--muted)", marginBottom: 6, fontWeight: 500 }}>{k}</div>
              <div style={{ fontSize: 12.5, fontWeight: 500, color: "var(--ink)", letterSpacing: "-0.005em" }}>{v}</div>
            </div>
          )}
        </div>

        <div style={{ padding: "22px 28px 8px" }}>
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", marginBottom: 10 }}>
            <div className="mono" style={{ fontSize: 10, color: "var(--muted)", letterSpacing: ".14em", fontWeight: 500 }}>{t("track.report.temp")}</div>
            <div className="mono" style={{ fontSize: 11, color: "var(--accent-ok)", fontWeight: 500 }}>{t("track.report.inrange")}</div>
          </div>
          <ReportChart tick={tick} target={5} />
        </div>

        <div style={{ padding: "8px 28px 16px" }}>
          <div className="mono" style={{ fontSize: 9, letterSpacing: ".14em", color: "var(--muted)", fontWeight: 500, paddingBottom: 8, borderBottom: "1px solid var(--line)" }}>
            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr 1fr" }}>
              <span>TIMESTAMP</span>
              <span>SENSOR 01</span>
              <span>SENSOR 02</span>
              <span>{t("track.report.event")}</span>
            </div>
          </div>
          {[
          ["08:00:00", "+5.1°", "+5.2°", t("track.report.ev.depart")],
          ["10:12:08", "+5.0°", "+5.1°", t("track.report.ev.tech")],
          ["13:47:02", "+5.3°", "+5.2°", t("track.report.ev.door")],
          ["16:33:21", "+5.1°", "+5.0°", "—"],
          ["18:55:09", "+4.9°", "+5.0°", t("track.report.ev.arrival")]].
          map((r, i) =>
          <div key={i} className="mono" style={{ fontSize: 11, display: "grid", gridTemplateColumns: "1fr 1fr 1fr 1fr", padding: "8px 0", borderBottom: i < 4 ? "1px solid var(--line)" : 0, color: "var(--ink)" }}>
              <span style={{ color: "var(--muted)" }}>{r[0]}</span>
              <span>{r[1]}</span>
              <span>{r[2]}</span>
              <span style={{ color: r[3] === "—" ? "var(--muted)" : "var(--ink)" }}>{r[3]}</span>
            </div>
          )}
        </div>

        <div style={{ padding: "18px 28px 22px", borderTop: "1px solid var(--line)", display: "flex", justifyContent: "space-between", alignItems: "center", gap: 12, flexWrap: "wrap" }}>
          <div>
            <div className="mono" style={{ fontSize: 9, color: "var(--muted)", letterSpacing: ".14em", marginBottom: 4, fontWeight: 500 }}>{t("track.report.sig")}</div>
            <div className="mono" style={{ fontSize: 11 }}>SHA-256 · a8f3...e2bc</div>
          </div>
          <div style={{ display: "flex", gap: 6, flexWrap: "wrap" }}>
            <span className="pill">ATP-FRC</span>
            <span className="pill">GDP</span>
            <span className="pill">ISO 9001</span>
          </div>
        </div>
      </div>

      <div style={{
        position: "absolute", right: -18, top: -18, zIndex: 4,
        background: "var(--ink)", color: "#fff", padding: "10px 14px",
        boxShadow: "var(--shadow-md)"
      }}>
        <div className="mono" style={{ fontSize: 9, letterSpacing: ".14em", opacity: .65, fontWeight: 500 }}>{t("track.report.email")}</div>
        <div className="mono" style={{ fontSize: 11, fontWeight: 500, marginTop: 2 }}>qa@cliente.com</div>
      </div>

      <div style={{ marginTop: 20, fontSize: 12, color: "var(--muted)", lineHeight: 1.5, fontStyle: "italic", paddingLeft: 4 }}>
        {t("track.report.disclaimer")}
      </div>
    </div>);

}

function ReportChart({ tick, target }) {
  const w = 520,h = 110;
  const pts = useMemo(() => {
    const arr = [];
    for (let i = 0; i < 60; i++) {
      arr.push(target + Math.sin(i * 0.22 + tick * 0.06) * 0.35 + Math.cos(i * 0.13) * 0.2 + (i * 7 % 11 - 5) * 0.03);
    }
    return arr;
  }, [tick, target]);
  const maxT = target + 2,minT = target - 2;
  const path = pts.map((p, i) => {
    const x = i / (pts.length - 1) * w;
    const y = h - (p - minT) / (maxT - minT) * h;
    return `${i === 0 ? "M" : "L"}${x.toFixed(1)} ${y.toFixed(1)}`;
  }).join(" ");
  const targetY = h - (target - minT) / (maxT - minT) * h;
  return (
    <svg viewBox={`0 0 ${w} ${h + 22}`} style={{ width: "100%", height: 130, display: "block" }}>
      <defs>
        <linearGradient id="rg" x1="0" x2="0" y1="0" y2="1">
          <stop offset="0%" stopColor="var(--brand)" stopOpacity=".15" />
          <stop offset="100%" stopColor="var(--brand)" stopOpacity="0" />
        </linearGradient>
      </defs>
      {[0.25, 0.5, 0.75].map((p) =>
      <line key={p} x1="0" x2={w} y1={h * p} y2={h * p} stroke="var(--line)" strokeDasharray="2 4" />
      )}
      <line x1="0" x2={w} y1={targetY} y2={targetY} stroke="var(--ink)" strokeDasharray="3 4" strokeWidth=".8" opacity=".4" />
      <text x={w - 4} y={targetY - 4} fill="var(--muted)" fontFamily="var(--font-mono)" fontSize="9" textAnchor="end">TARGET +{target}°</text>
      <path d={`${path} L${w} ${h} L0 ${h} Z`} fill="url(#rg)" />
      <path d={path} fill="none" stroke="var(--brand)" strokeWidth="1.4" strokeLinejoin="round" strokeLinecap="round" />
      <text x="0" y={h + 14} fill="var(--muted)" fontFamily="var(--font-mono)" fontSize="9">08:00</text>
      <text x={w / 2} y={h + 14} fill="var(--muted)" fontFamily="var(--font-mono)" fontSize="9" textAnchor="middle">13:30</text>
      <text x={w} y={h + 14} fill="var(--muted)" fontFamily="var(--font-mono)" fontSize="9" textAnchor="end">18:55</text>
    </svg>);

}

function RouteBar({ a, b, progress }) {
  return (
    <div style={{ position: "relative", padding: "20px 0 8px" }}>
      <div style={{ height: 2, background: "rgba(0,0,0,.06)", borderRadius: 999, position: "relative" }}>
        <div style={{ position: "absolute", inset: 0, width: `${progress * 100}%`, background: "linear-gradient(90deg, var(--brand-2), #fff)" }} />
      </div>
      <div style={{ position: "absolute", left: 0, top: 0 }}>
        <div className="mono" style={{ fontSize: 11, color: "var(--ink)", letterSpacing: ".06em" }}>{a}</div>
        <div className="mono" style={{ fontSize: 9, color: "var(--muted)", marginTop: 2 }}>ORIGIN</div>
      </div>
      <div style={{ position: "absolute", right: 0, top: 0, textAlign: "right" }}>
        <div className="mono" style={{ fontSize: 11, color: "var(--ink)", letterSpacing: ".06em" }}>{b}</div>
        <div className="mono" style={{ fontSize: 9, color: "var(--muted)", marginTop: 2 }}>DESTINATION</div>
      </div>
      <div style={{ position: "absolute", left: `${progress * 100}%`, top: 14, transform: "translateX(-50%)" }}>
        <div style={{
          width: 28, height: 28, borderRadius: 999, background: "#fff",
          display: "grid", placeItems: "center", color: "var(--ink)",
          boxShadow: "0 0 0 4px rgba(0,0,0,.08)"
        }}>
          <I.truck />
        </div>
      </div>
    </div>);

}

function TempGraph({ target, tick }) {
  const w = 480,h = 130;
  const pts = useMemo(() => {
    const arr = [];
    for (let i = 0; i < 50; i++) {
      const t = target + Math.sin((i + tick * 0.5) * 0.3) * 0.5 + Math.cos(i * 0.18) * 0.3 + (Math.random() - 0.5) * 0.2;
      arr.push(t);
    }
    return arr;
  }, [tick, target]);
  const maxT = target + 2.5,minT = target - 2.5;
  const path = pts.map((p, i) => {
    const x = i / (pts.length - 1) * w;
    const y = h - (p - minT) / (maxT - minT) * h;
    return `${i === 0 ? "M" : "L"}${x.toFixed(1)} ${y.toFixed(1)}`;
  }).join(" ");
  const targetY = h - (target - minT) / (maxT - minT) * h;
  return (
    <svg viewBox={`0 0 ${w} ${h}`} style={{ width: "100%", height: 140, display: "block" }}>
      <defs>
        <linearGradient id="tg" x1="0" x2="0" y1="0" y2="1">
          <stop offset="0%" stopColor="var(--brand-2)" stopOpacity=".35" />
          <stop offset="100%" stopColor="var(--brand-2)" stopOpacity="0" />
        </linearGradient>
      </defs>
      {/* grid */}
      {[0.2, 0.5, 0.8].map((p) =>
      <line key={p} x1="0" x2={w} y1={h * p} y2={h * p} stroke="rgba(0,0,0,.04)" />
      )}
      {/* target line */}
      <line x1="0" x2={w} y1={targetY} y2={targetY} stroke="rgba(0,0,0,.2)" strokeDasharray="3 4" />
      <text x={w - 4} y={targetY - 4} fill="rgba(0,0,0,.4)" fontFamily="var(--font-mono)" fontSize="9" textAnchor="end">TARGET {target}°</text>
      <path d={`${path} L${w} ${h} L0 ${h} Z`} fill="url(#tg)" />
      <path d={path} fill="none" stroke="var(--brand-2)" strokeWidth="1.4" strokeLinejoin="round" strokeLinecap="round" />
    </svg>);

}

function EventLog({ id }) {
  const events = [
  { t: "14:22:08", e: "Sensor mesh checkpoint OK", c: "ok" },
  { t: "13:47:02", e: "Door opened · 38s · loading bay", c: "info" },
  { t: "12:11:19", e: "Driver break · stationary", c: "info" },
  { t: "10:04:55", e: "Temp drift +0.4° · auto-corrected", c: "warn" },
  { t: "08:33:14", e: "Departed origin · GPS lock", c: "ok" },
  { t: "08:30:00", e: "Pre-trip QA cleared", c: "ok" }];

  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 0, maxHeight: 140, overflow: "auto" }}>
      {events.map((ev, i) =>
      <div key={i} style={{ display: "flex", gap: 12, padding: "6px 0", borderBottom: i < events.length - 1 ? "1px solid rgba(0,0,0,.025)" : 0, alignItems: "baseline" }}>
          <span className="mono" style={{ fontSize: 10, color: "var(--muted)", letterSpacing: ".06em", flexShrink: 0 }}>{ev.t}</span>
          <span style={{ width: 6, height: 6, borderRadius: 999, background: ev.c === "ok" ? "var(--accent-ok)" : ev.c === "warn" ? "var(--accent-warn)" : "var(--brand-2)", flexShrink: 0, marginTop: 5 }} />
          <span style={{ fontSize: 12, color: "var(--ink)", lineHeight: 1.4 }}>{ev.e}</span>
        </div>
      )}
    </div>);

}

/* ============================================================ */
/* CALCULATOR — live freight quote estimator                    */
/* ============================================================ */

function Calculator() {
  const t = useT();
  return (
    <section id="calculator" style={{ padding: "120px 0 100px" }}>
      <div className="wrap">
        <div className="reveal" style={{
          background: "var(--bg-2)",
          border: "1px solid var(--line)",
          padding: "72px 64px",
          display: "grid",
          gridTemplateColumns: "1.3fr 1fr",
          gap: 48,
          alignItems: "center"
        }} className="cc-quote-grid">
          <div>
            <div className="eyebrow" style={{ marginBottom: 18 }}>{t("quote.eyebrow")}</div>
            <h2 style={{ marginBottom: 20 }}>
              {t("quote.title.part1")}<br /><em className="serif">{t("quote.title.italic")}</em> {t("quote.title.part2")}
            </h2>
            <p style={{ fontSize: 18, maxWidth: 520, lineHeight: 1.55 }}>
              {t("quote.body1")}
            </p>
            <p style={{ fontSize: 15, marginTop: 18, color: "var(--ink-2)" }}>
              {t("quote.body2")}
            </p>
          </div>

          <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
            <a href="#contact" className="btn btn-primary" style={{ justifyContent: "space-between", padding: "18px 22px", fontSize: 15 }}>
              <span>{t("quote.cta.form")}</span>
              <I.arrow />
            </a>
            <a href="tel:+34972863031" className="btn btn-ghost" style={{ justifyContent: "space-between", padding: "18px 22px", fontSize: 15 }}>
              <span style={{ display: "inline-flex", alignItems: "center", gap: 12 }}>
                <I.signal /> {t("quote.cta.call")} · +34 972 863 031
              </span>
              <I.arrow />
            </a>
            <div className="mono" style={{ fontSize: 11, color: "var(--muted)", letterSpacing: ".1em", marginTop: 8, lineHeight: 1.5 }}>
              {t("quote.hours")}<br />
              {t("quote.response")}
            </div>
          </div>
        </div>
      </div>

      <style>{`
        @media (max-width: 900px) {
          .cc-quote-grid { grid-template-columns: 1fr !important; padding: 40px 32px !important; gap: 28px !important; }
        }
      `}</style>
    </section>);

}

function RouteGridMini() {
  return (
    <svg style={{ position: "absolute", inset: 0, opacity: .35 }} preserveAspectRatio="none" viewBox="0 0 400 400">
      <defs>
        <pattern id="gM" width="40" height="40" patternUnits="userSpaceOnUse">
          <path d="M40 0H0V40" fill="none" stroke="rgba(0,0,0,.03)" strokeWidth="1" />
        </pattern>
      </defs>
      <rect width="400" height="400" fill="url(#gM)" />
    </svg>);

}

function Field({ label, children, style }) {
  return (
    <label style={{ display: "block", ...style }}>
      <span className="mono" style={{ fontSize: 10, letterSpacing: ".12em", color: "var(--muted)", textTransform: "uppercase", display: "block", marginBottom: 8 }}>{label}</span>
      {children}
    </label>);

}

function Select({ value, onChange, options }) {
  return (
    <select value={value} onChange={(e) => onChange(e.target.value)} className="cc-hov" style={{
      width: "100%", padding: "12px 14px", borderRadius: 10,
      border: "1px solid var(--line-2)", background: "var(--bg)",
      fontFamily: "var(--font-sans)", fontSize: 14, color: "var(--ink)",
      cursor: "none", appearance: "none",
      backgroundImage: "url(\"data:image/svg+xml,%3Csvg width='10' height='6' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23555' fill='none' stroke-width='1.2'/%3E%3C/svg%3E\")",
      backgroundRepeat: "no-repeat", backgroundPosition: "right 14px center"
    }}>
      {options.map((o) => <option key={o}>{o}</option>)}
    </select>);

}

function Segmented({ value, onChange, options }) {
  return (
    <div style={{ display: "grid", gridTemplateColumns: `repeat(${options.length}, 1fr)`, gap: 4, padding: 4, background: "var(--bg)", borderRadius: 10, border: "1px solid var(--line)" }}>
      {options.map((o) => {
        const sel = value === o.v;
        return (
          <button key={o.v} onClick={() => onChange(o.v)} className="cc-hov" style={{
            padding: "10px 8px", borderRadius: 8,
            background: sel ? "var(--ink)" : "transparent",
            color: sel ? "#fff" : "var(--ink)",
            border: 0, fontFamily: "var(--font-sans)", fontSize: 13, fontWeight: 500, cursor: "none",
            transition: "all .2s ease"
          }}>{o.l}</button>);

      })}
    </div>);

}

Object.assign(window, { CoverageMap, Tracking, Calculator });