/* Coverage map — dot-matrix Africa with carrier-access countries lit in
   Mikaka orange. Dots are rasterized from real country polygons (one entry
   per land cell, attributed to a country) so coverage lights the actual
   geography. Reveal ripples outward from Kenya; covered dots breathe; a
   country pill auto-cycles north→south and pins on hover/click. */

const MKT_COV_DATA = {"cols":42,"rows":44,"names":["Algeria","Angola","Benin","Botswana","Burkina Faso","Cameroon","Central African Republic","Chad","Democratic Republic of the Congo","Djibouti","Egypt","Equatorial Guinea","Eritrea","Ethiopia","Gabon","Gambia","Ghana","Guinea","Guinea Bissau","Ivory Coast","Kenya","Lesotho","Liberia","Libya","Malawi","Mali","Mauritania","Morocco","Mozambique","Namibia","Niger","Nigeria","Republic of the Congo","Rwanda","Senegal","Sierra Leone","Somalia","Somaliland","South Africa","South Sudan","Sudan","Swaziland","Togo","Tunisia","Uganda","United Republic of Tanzania","Western Sahara","Zambia","Zimbabwe"],"dots":[[12,0,0],[13,0,0],[14,0,0],[15,0,0],[16,0,43],[17,0,43],[7,1,27],[8,1,27],[9,1,27],[10,1,0],[11,1,0],[12,1,0],[13,1,0],[14,1,0],[15,1,0],[16,1,43],[17,1,43],[5,2,27],[6,2,27],[7,2,27],[8,2,27],[9,2,27],[10,2,0],[11,2,0],[12,2,0],[13,2,0],[14,2,0],[15,2,43],[16,2,43],[17,2,43],[5,3,27],[6,3,27],[7,3,27],[8,3,27],[9,3,27],[10,3,0],[11,3,0],[12,3,0],[13,3,0],[14,3,0],[15,3,0],[16,3,43],[17,3,23],[18,3,23],[19,3,23],[22,3,23],[23,3,23],[24,3,23],[25,3,23],[5,4,27],[6,4,27],[7,4,27],[8,4,0],[9,4,0],[10,4,0],[11,4,0],[12,4,0],[13,4,0],[14,4,0],[15,4,0],[16,4,43],[17,4,23],[18,4,23],[19,4,23],[20,4,23],[21,4,23],[22,4,23],[23,4,23],[24,4,23],[25,4,23],[26,4,10],[27,4,10],[28,4,10],[29,4,10],[30,4,10],[31,4,10],[4,5,27],[5,5,27],[6,5,0],[7,5,0],[8,5,0],[9,5,0],[10,5,0],[11,5,0],[12,5,0],[13,5,0],[14,5,0],[15,5,0],[16,5,0],[17,5,23],[18,5,23],[19,5,23],[20,5,23],[21,5,23],[22,5,23],[23,5,23],[24,5,23],[25,5,23],[26,5,10],[27,5,10],[28,5,10],[29,5,10],[30,5,10],[31,5,10],[2,6,27],[3,6,27],[4,6,27],[5,6,27],[6,6,0],[7,6,0],[8,6,0],[9,6,0],[10,6,0],[11,6,0],[12,6,0],[13,6,0],[14,6,0],[15,6,0],[16,6,0],[17,6,23],[18,6,23],[19,6,23],[20,6,23],[21,6,23],[22,6,23],[23,6,23],[24,6,23],[25,6,23],[26,6,10],[27,6,10],[28,6,10],[29,6,10],[30,6,10],[2,7,27],[3,7,46],[4,7,26],[5,7,26],[6,7,26],[7,7,0],[8,7,0],[9,7,0],[10,7,0],[11,7,0],[12,7,0],[13,7,0],[14,7,0],[15,7,0],[16,7,0],[17,7,23],[18,7,23],[19,7,23],[20,7,23],[21,7,23],[22,7,23],[23,7,23],[24,7,23],[25,7,23],[26,7,10],[27,7,10],[28,7,10],[29,7,10],[30,7,10],[31,7,10],[1,8,27],[2,8,27],[3,8,46],[4,8,26],[5,8,26],[6,8,26],[7,8,25],[8,8,25],[9,8,0],[10,8,0],[11,8,0],[12,8,0],[13,8,0],[14,8,0],[15,8,0],[16,8,0],[17,8,0],[18,8,23],[19,8,23],[20,8,23],[21,8,23],[22,8,23],[23,8,23],[24,8,23],[25,8,23],[26,8,10],[27,8,10],[28,8,10],[29,8,10],[30,8,10],[31,8,10],[0,9,27],[1,9,27],[2,9,46],[3,9,26],[4,9,26],[5,9,26],[6,9,26],[7,9,25],[8,9,25],[9,9,25],[10,9,0],[11,9,0],[12,9,0],[13,9,0],[14,9,0],[15,9,0],[16,9,0],[17,9,30],[18,9,30],[19,9,30],[20,9,7],[21,9,7],[22,9,23],[23,9,23],[24,9,23],[25,9,23],[26,9,10],[27,9,10],[28,9,10],[29,9,10],[30,9,10],[31,9,10],[32,9,10],[0,10,26],[1,10,26],[2,10,26],[3,10,26],[4,10,26],[5,10,26],[6,10,26],[7,10,25],[8,10,25],[9,10,25],[10,10,25],[11,10,25],[12,10,0],[13,10,0],[14,10,0],[15,10,30],[16,10,30],[17,10,30],[18,10,30],[19,10,30],[20,10,7],[21,10,7],[22,10,7],[23,10,7],[24,10,23],[25,10,23],[26,10,40],[27,10,40],[28,10,40],[29,10,40],[30,10,40],[31,10,40],[32,10,40],[1,11,26],[2,11,26],[3,11,26],[4,11,26],[5,11,26],[6,11,26],[7,11,25],[8,11,25],[9,11,25],[10,11,25],[11,11,25],[12,11,25],[13,11,30],[14,11,30],[15,11,30],[16,11,30],[17,11,30],[18,11,30],[19,11,30],[20,11,7],[21,11,7],[22,11,7],[23,11,7],[24,11,7],[25,11,40],[26,11,40],[27,11,40],[28,11,40],[29,11,40],[30,11,40],[31,11,40],[32,11,40],[33,11,40],[1,12,26],[2,12,26],[3,12,26],[4,12,26],[5,12,26],[6,12,26],[7,12,25],[8,12,25],[9,12,25],[10,12,25],[11,12,25],[12,12,25],[13,12,30],[14,12,30],[15,12,30],[16,12,30],[17,12,30],[18,12,30],[19,12,30],[20,12,7],[21,12,7],[22,12,7],[23,12,7],[24,12,7],[25,12,40],[26,12,40],[27,12,40],[28,12,40],[29,12,40],[30,12,40],[31,12,40],[32,12,40],[33,12,12],[34,12,12],[0,13,34],[1,13,34],[2,13,34],[3,13,26],[4,13,26],[5,13,26],[6,13,26],[7,13,25],[8,13,25],[9,13,25],[10,13,25],[11,13,25],[12,13,25],[13,13,30],[14,13,30],[15,13,30],[16,13,30],[17,13,30],[18,13,30],[19,13,7],[20,13,7],[21,13,7],[22,13,7],[23,13,7],[24,13,7],[25,13,40],[26,13,40],[27,13,40],[28,13,40],[29,13,40],[30,13,40],[31,13,40],[32,13,40],[33,13,12],[34,13,12],[0,14,15],[1,14,34],[2,14,34],[3,14,34],[4,14,25],[5,14,25],[6,14,25],[7,14,25],[8,14,25],[9,14,4],[10,14,4],[11,14,30],[12,14,30],[13,14,30],[14,14,30],[15,14,30],[16,14,30],[17,14,30],[18,14,30],[19,14,7],[20,14,7],[21,14,7],[22,14,7],[23,14,7],[24,14,40],[25,14,40],[26,14,40],[27,14,40],[28,14,40],[29,14,40],[30,14,40],[31,14,40],[32,14,40],[33,14,13],[34,14,13],[35,14,12],[0,15,34],[1,15,18],[2,15,18],[3,15,17],[4,15,25],[5,15,25],[6,15,25],[7,15,25],[8,15,4],[9,15,4],[10,15,4],[11,15,4],[12,15,2],[13,15,31],[14,15,31],[15,15,31],[16,15,31],[17,15,31],[18,15,31],[19,15,5],[20,15,7],[21,15,7],[22,15,7],[23,15,7],[24,15,40],[25,15,40],[26,15,40],[27,15,40],[28,15,40],[29,15,40],[30,15,39],[31,15,40],[32,15,13],[33,15,13],[34,15,13],[35,15,13],[36,15,9],[41,15,36],[1,16,17],[2,16,17],[3,16,17],[4,16,17],[5,16,17],[6,16,25],[7,16,25],[8,16,4],[9,16,16],[10,16,16],[11,16,2],[12,16,2],[13,16,31],[14,16,31],[15,16,31],[16,16,31],[17,16,31],[18,16,31],[19,16,5],[20,16,7],[21,16,7],[22,16,7],[23,16,7],[24,16,6],[25,16,40],[26,16,40],[27,16,40],[28,16,40],[29,16,40],[30,16,39],[31,16,13],[32,16,13],[33,16,13],[34,16,13],[35,16,13],[36,16,37],[37,16,37],[38,16,37],[39,16,37],[40,16,36],[41,16,36],[2,17,17],[3,17,35],[4,17,17],[5,17,17],[6,17,19],[7,17,19],[8,17,19],[9,17,16],[10,17,16],[11,17,42],[12,17,31],[13,17,31],[14,17,31],[15,17,31],[16,17,31],[17,17,31],[18,17,5],[19,17,5],[20,17,7],[21,17,7],[22,17,6],[23,17,6],[24,17,6],[25,17,39],[26,17,39],[27,17,39],[28,17,39],[29,17,39],[30,17,39],[31,17,13],[32,17,13],[33,17,13],[34,17,13],[35,17,13],[36,17,13],[37,17,13],[38,17,37],[39,17,37],[40,17,36],[3,18,35],[4,18,22],[5,18,22],[6,18,19],[7,18,19],[8,18,19],[9,18,16],[10,18,16],[11,18,42],[12,18,31],[13,18,31],[14,18,31],[15,18,31],[16,18,31],[17,18,31],[18,18,5],[19,18,5],[20,18,6],[21,18,6],[22,18,6],[23,18,6],[24,18,6],[25,18,6],[26,18,39],[27,18,39],[28,18,39],[29,18,39],[30,18,39],[31,18,13],[32,18,13],[33,18,13],[34,18,13],[35,18,13],[36,18,13],[37,18,13],[38,18,13],[39,18,36],[40,18,36],[4,19,22],[5,19,22],[6,19,19],[7,19,19],[8,19,19],[9,19,16],[10,19,16],[11,19,16],[13,19,31],[14,19,31],[15,19,31],[16,19,5],[17,19,5],[18,19,5],[19,19,6],[20,19,6],[21,19,6],[22,19,6],[23,19,6],[24,19,6],[25,19,6],[26,19,6],[27,19,39],[28,19,39],[29,19,39],[30,19,39],[31,19,39],[32,19,13],[33,19,13],[34,19,13],[35,19,13],[36,19,13],[37,19,13],[38,19,36],[39,19,36],[14,20,31],[16,20,5],[17,20,5],[18,20,5],[19,20,5],[20,20,6],[21,20,6],[22,20,8],[23,20,8],[24,20,8],[25,20,8],[26,20,8],[27,20,8],[28,20,8],[29,20,39],[30,20,39],[31,20,20],[32,20,20],[33,20,13],[34,20,13],[35,20,20],[36,20,36],[37,20,36],[38,20,36],[39,20,36],[16,21,11],[17,21,11],[18,21,14],[19,21,32],[20,21,32],[21,21,32],[22,21,8],[23,21,8],[24,21,8],[25,21,8],[26,21,8],[27,21,8],[28,21,8],[29,21,44],[30,21,44],[31,21,44],[32,21,20],[33,21,20],[34,21,20],[35,21,36],[36,21,36],[37,21,36],[38,21,36],[16,22,14],[17,22,14],[18,22,14],[19,22,32],[20,22,32],[21,22,8],[22,22,8],[23,22,8],[24,22,8],[25,22,8],[26,22,8],[27,22,8],[28,22,8],[29,22,44],[30,22,44],[31,22,20],[32,22,20],[33,22,20],[34,22,20],[35,22,36],[36,22,36],[37,22,36],[16,23,14],[17,23,14],[18,23,14],[19,23,32],[20,23,32],[21,23,8],[22,23,8],[23,23,8],[24,23,8],[25,23,8],[26,23,8],[27,23,8],[28,23,8],[29,23,45],[30,23,45],[31,23,20],[32,23,20],[33,23,20],[34,23,20],[35,23,20],[16,24,14],[17,24,14],[18,24,32],[19,24,32],[20,24,8],[21,24,8],[22,24,8],[23,24,8],[24,24,8],[25,24,8],[26,24,8],[27,24,8],[28,24,33],[29,24,45],[30,24,45],[31,24,45],[32,24,45],[33,24,20],[34,24,20],[35,24,20],[17,25,32],[18,25,32],[19,25,32],[20,25,8],[21,25,8],[22,25,8],[23,25,8],[24,25,8],[25,25,8],[26,25,8],[27,25,8],[28,25,45],[29,25,45],[30,25,45],[31,25,45],[32,25,45],[33,25,45],[34,25,45],[18,26,1],[19,26,1],[20,26,1],[21,26,8],[22,26,8],[23,26,8],[24,26,8],[25,26,8],[26,26,8],[27,26,8],[28,26,45],[29,26,45],[30,26,45],[31,26,45],[32,26,45],[33,26,45],[34,26,45],[18,27,1],[19,27,1],[20,27,1],[21,27,8],[22,27,1],[23,27,1],[24,27,8],[25,27,8],[26,27,8],[27,27,8],[28,27,8],[29,27,45],[30,27,45],[31,27,45],[32,27,45],[33,27,45],[34,27,45],[18,28,1],[19,28,1],[20,28,1],[21,28,1],[22,28,1],[23,28,1],[24,28,8],[25,28,8],[26,28,8],[27,28,8],[28,28,47],[29,28,47],[30,28,47],[31,28,45],[32,28,45],[33,28,45],[34,28,45],[19,29,1],[20,29,1],[21,29,1],[22,29,1],[23,29,1],[24,29,1],[25,29,8],[26,29,8],[27,29,8],[28,29,47],[29,29,47],[30,29,47],[31,29,45],[32,29,45],[33,29,45],[34,29,28],[18,30,1],[19,30,1],[20,30,1],[21,30,1],[22,30,1],[23,30,1],[24,30,1],[25,30,47],[26,30,47],[27,30,47],[28,30,8],[29,30,47],[30,30,47],[31,30,28],[32,30,28],[33,30,28],[34,30,28],[18,31,1],[19,31,1],[20,31,1],[21,31,1],[22,31,1],[23,31,1],[24,31,47],[25,31,47],[26,31,47],[27,31,47],[28,31,47],[29,31,47],[30,31,28],[31,31,24],[32,31,28],[33,31,28],[34,31,28],[17,32,1],[18,32,1],[19,32,1],[20,32,1],[21,32,1],[22,32,1],[23,32,1],[24,32,47],[25,32,47],[26,32,47],[27,32,47],[28,32,48],[29,32,48],[30,32,28],[31,32,24],[32,32,28],[33,32,28],[34,32,28],[18,33,29],[19,33,29],[20,33,29],[21,33,29],[22,33,29],[23,33,1],[24,33,29],[25,33,29],[26,33,48],[27,33,48],[28,33,48],[29,33,48],[30,33,48],[31,33,28],[32,33,28],[33,33,28],[18,34,29],[19,34,29],[20,34,29],[21,34,29],[22,34,29],[23,34,3],[24,34,3],[25,34,3],[26,34,3],[27,34,48],[28,34,48],[29,34,48],[30,34,28],[31,34,28],[32,34,28],[18,35,29],[19,35,29],[20,35,29],[21,35,29],[22,35,29],[23,35,3],[24,35,3],[25,35,3],[26,35,3],[27,35,3],[28,35,48],[29,35,48],[30,35,28],[31,35,28],[19,36,29],[20,36,29],[21,36,29],[22,36,29],[23,36,3],[24,36,3],[25,36,3],[26,36,3],[27,36,3],[28,36,38],[29,36,38],[30,36,28],[31,36,28],[19,37,29],[20,37,29],[21,37,29],[22,37,29],[23,37,3],[24,37,3],[25,37,3],[26,37,3],[27,37,38],[28,37,38],[29,37,38],[30,37,28],[31,37,28],[19,38,29],[20,38,29],[21,38,29],[22,38,29],[23,38,3],[24,38,38],[25,38,38],[26,38,38],[27,38,38],[28,38,38],[29,38,41],[30,38,28],[20,39,29],[21,39,29],[22,39,29],[23,39,38],[24,39,38],[25,39,38],[26,39,38],[27,39,38],[28,39,38],[29,39,38],[30,39,38],[20,40,38],[21,40,38],[22,40,38],[23,40,38],[24,40,38],[25,40,38],[26,40,38],[27,40,21],[28,40,38],[29,40,38],[21,41,38],[22,41,38],[23,41,38],[24,41,38],[25,41,38],[26,41,38],[27,41,38],[28,41,38],[21,42,38],[22,42,38],[23,42,38],[24,42,38],[25,42,38],[26,42,38],[27,42,38],[21,43,38],[22,43,38],[23,43,38]]};

/* geojson name → [display name, flag] for countries with carrier access */
const MKT_COV_COVERED = {
  "Egypt": ["Egypt", "🇪🇬"],
  "Mali": ["Mali", "🇲🇱"],
  "Gambia": ["Gambia", "🇬🇲"],
  "Benin": ["Benin", "🇧🇯"],
  "Nigeria": ["Nigeria", "🇳🇬"],
  "Cameroon": ["Cameroon", "🇨🇲"],
  "Ivory Coast": ["Côte d'Ivoire", "🇨🇮"],
  "Ethiopia": ["Ethiopia", "🇪🇹"],
  "Uganda": ["Uganda", "🇺🇬"],
  "Kenya": ["Kenya", "🇰🇪"],
  "Rwanda": ["Rwanda", "🇷🇼"],
  "United Republic of Tanzania": ["Tanzania", "🇹🇿"],
  "Zambia": ["Zambia", "🇿🇲"],
  "Malawi": ["Malawi", "🇲🇼"],
  "Zimbabwe": ["Zimbabwe", "🇿🇼"],
  "Namibia": ["Namibia", "🇳🇦"],
  "Botswana": ["Botswana", "🇧🇼"],
  "South Africa": ["South Africa", "🇿🇦"],
  "Swaziland": ["Eswatini", "🇸🇿"],
  "Lesotho": ["Lesotho", "🇱🇸"],
};

const MktCoverageMap = () => {
  const S = 16; // grid cell size in viewBox units
  const { cols, rows, names, dots } = MKT_COV_DATA;
  const [on, setOn] = useState(false);
  const [active, setActive] = useState(null);
  const pinnedUntil = useRef(0);
  const wrapRef = useRef(null);

  const model = useMemo(() => {
    const coveredIdx = new Set(names.map((n, i) => (MKT_COV_COVERED[n] ? i : -1)).filter((i) => i >= 0));
    const kIdx = names.indexOf("Kenya");
    const kDots = dots.filter((d) => d[2] === kIdx);
    const kx = kDots.reduce((s, d) => s + d[0], 0) / kDots.length;
    const ky = kDots.reduce((s, d) => s + d[1], 0) / kDots.length;
    const maxDist = Math.hypot(cols, rows) * 0.62;
    const pts = dots.map(([c, r, ci]) => {
      const h = ((c * 73856093) ^ (r * 19349663)) >>> 0;
      const cov = coveredIdx.has(ci);
      return {
        c, r, name: names[ci], ci, cov,
        x: (c + 0.5) * S, y: (r + 0.5) * S,
        rad: (cov ? 3.0 : 2.3) + (h % 100) / 100 * 0.8,
        d: Math.hypot(c - kx, r - ky) / maxDist, // 0..~1 ripple delay from Kenya
      };
    });
    const cents = {};
    for (const key of Object.keys(MKT_COV_COVERED)) {
      const ci = names.indexOf(key);
      const ds = pts.filter((p) => p.ci === ci);
      if (!ds.length) continue;
      cents[key] = {
        x: Math.min(88, Math.max(10, ds.reduce((s, p) => s + p.x, 0) / ds.length / (cols * S) * 100)),
        y: Math.min(94, Math.max(8, ds.reduce((s, p) => s + p.y, 0) / ds.length / (rows * S) * 100)),
      };
    }
    const order = Object.keys(cents).sort((a, b) => cents[a].y - cents[b].y);
    return { pts, cents, order, beacon: { x: (kx + 0.5) * S, y: (ky + 0.5) * S } };
  }, []);

  // Reveal once on scroll into view
  useEffect(() => {
    const el = wrapRef.current;
    if (!el || typeof IntersectionObserver === "undefined") { setOn(true); return; }
    const io = new IntersectionObserver((es) => {
      if (es.some((e) => e.isIntersecting)) { setOn(true); io.disconnect(); }
    }, { threshold: 0.25 });
    io.observe(el);
    return () => io.disconnect();
  }, []);

  // Auto-cycle the country pill north→south once revealed
  useEffect(() => {
    if (!on) return;
    setActive(model.order[0]);
    let i = 0;
    const t = setInterval(() => {
      if (Date.now() < pinnedUntil.current) return;
      i = (i + 1) % model.order.length;
      setActive(model.order[i]);
    }, 2400);
    return () => clearInterval(t);
  }, [on]);

  const pin = (name, ms) => {
    pinnedUntil.current = Date.now() + (ms || 6000);
    setActive(name);
  };

  const pill = active && model.cents[active] ? { ...model.cents[active], key: active } : null;

  return (
    <section className="mkt-section" style={{ maxWidth: 1200, margin: "0 auto" }}>
      <style>{`
        @keyframes mkt-cov-in { from { transform: scale(0); } 60% { transform: scale(1.45); } to { transform: scale(1); } }
        @keyframes mkt-cov-breathe { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
        @keyframes mkt-cov-ring { from { transform: scale(.4); opacity: .9; } to { transform: scale(3.2); opacity: 0; } }
        @keyframes mkt-cov-pop { from { opacity: 0; transform: translate(-50%, -100%) scale(.85); } to { opacity: 1; transform: translate(-50%, -118%) scale(1); } }
        .mkt-cov-dot { fill: var(--border); opacity: .75; transform: scale(0); transform-box: fill-box; transform-origin: center; transition: r .25s, fill .25s; }
        .mkt-cov-svg.on .mkt-cov-dot { animation: mkt-cov-in .55s cubic-bezier(.2,.85,.3,1.3) forwards; animation-delay: calc(var(--d) * 1.3s); }
        .mkt-cov-dot.cov { fill: var(--mk-orange); opacity: 1; }
        .mkt-cov-svg.on .mkt-cov-dot.cov { animation: mkt-cov-in .55s cubic-bezier(.2,.85,.3,1.3) forwards calc(var(--d) * 1.3s),
                                           mkt-cov-breathe 4.2s ease-in-out infinite calc(var(--d) * 1.3s + var(--p) + .6s); }
        .mkt-cov-dot.cov:hover, .mkt-cov-dot.hot { r: 5px; fill: var(--mk-orange-600); filter: drop-shadow(0 0 6px rgba(242,118,33,.65)); opacity: 1 !important; animation-name: mkt-cov-in !important; }
        .mkt-cov-dot.cov { cursor: pointer; }
        .mkt-cov-beacon { fill: none; stroke: var(--mk-orange); stroke-width: 1.5; transform-box: fill-box; transform-origin: center; opacity: 0; }
        .mkt-cov-svg.on .mkt-cov-beacon { animation: mkt-cov-ring 2.8s ease-out infinite 1.2s; }
        .mkt-cov-svg.on .mkt-cov-beacon.b2 { animation-delay: 2.2s; }
        .mkt-cov-pill { position: absolute; z-index: 2; display: flex; align-items: center; gap: 8px; padding: 7px 14px 7px 10px;
          background: var(--bg); border: 1px solid var(--border); border-radius: 999px; box-shadow: var(--sh-pop);
          font-size: 13.5px; font-weight: 600; white-space: nowrap; pointer-events: none;
          animation: mkt-cov-pop .3s cubic-bezier(.2,.85,.3,1.2) forwards; }
        .mkt-cov-pill::after { content: ""; position: absolute; left: 50%; bottom: -5px; width: 9px; height: 9px;
          background: var(--bg); border-right: 1px solid var(--border); border-bottom: 1px solid var(--border);
          transform: translateX(-50%) rotate(45deg); }
        .mkt-cov-pill .sub { font-size: 11px; font-weight: 500; color: var(--mk-orange-600); }
        .mkt-cov-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px;
          border: 1px solid var(--border); background: var(--bg); font-size: 12.5px; cursor: pointer;
          transition: all .2s; color: var(--fg-muted); }
        .mkt-cov-chip:hover { border-color: var(--mk-orange); color: var(--fg); }
        .mkt-cov-chip.on { background: var(--mk-orange); border-color: var(--mk-orange); color: #fff; }
        @media (prefers-reduced-motion: reduce) {
          .mkt-cov-svg.on .mkt-cov-dot, .mkt-cov-svg.on .mkt-cov-dot.cov { animation: none; transform: scale(1); }
          .mkt-cov-svg.on .mkt-cov-beacon { animation: none; }
        }
      `}</style>

      <div className="mkt-two" style={{ gap: 64, alignItems: "center" }}>
        <div>
          <Chip>Where Mikaka answers</Chip>
          <h2 className="mkt-h2">Local carrier access in 20 African countries.</h2>
          <p className="mkt-p">
            Mikaka rides on carrier-grade telephone networks across the continent.
            Your customers dial a local number — and every conversation, in every
            market, lands in one view of demand.
          </p>
          <div className="row gap-4" style={{ marginTop: 24, flexWrap: "wrap" }}>
            {[["20", "countries with carrier access"], ["1", "dashboard for every market"]].map(([n, l]) => (
              <div key={l}>
                <div className="display" data-count={n} style={{ fontSize: 32, fontWeight: 600, letterSpacing: "-0.03em" }}>{n}</div>
                <div style={{ fontSize: 12.5, color: "var(--fg-muted)" }}>{l}</div>
              </div>
            ))}
          </div>
          <div className="row" style={{ flexWrap: "wrap", gap: 8, marginTop: 28 }}>
            {model.order.map((k) => (
              <button key={k} className={`mkt-cov-chip ${active === k ? "on" : ""}`}
                      onMouseEnter={() => pin(k, 3500)} onClick={() => pin(k)}>
                <span>{MKT_COV_COVERED[k][1]}</span> {MKT_COV_COVERED[k][0]}
              </button>
            ))}
          </div>
        </div>

        <div ref={wrapRef} style={{ position: "relative", maxWidth: 560, width: "100%", margin: "0 auto" }}>
          <svg className={`mkt-cov-svg ${on ? "on" : ""}`} viewBox={`0 0 ${cols * S} ${rows * S}`}
               style={{ width: "100%", height: "auto", display: "block" }} aria-label="Map of Africa showing Mikaka coverage">
            {model.pts.map((p) => (
              <circle key={`${p.c}-${p.r}`} cx={p.x} cy={p.y} r={p.rad}
                className={`mkt-cov-dot${p.cov ? " cov" : ""}${p.cov && active === p.name ? " hot" : ""}`}
                style={{ "--d": p.d.toFixed(3), "--p": `${((p.c * 7 + p.r * 11) % 9 / 3).toFixed(2)}s` }}
                onMouseEnter={p.cov ? () => pin(p.name, 3500) : undefined}
                onClick={p.cov ? () => pin(p.name) : undefined}
              />
            ))}
            <circle className="mkt-cov-beacon" cx={model.beacon.x} cy={model.beacon.y} r="7" />
            <circle className="mkt-cov-beacon b2" cx={model.beacon.x} cy={model.beacon.y} r="7" />
          </svg>
          {pill && (
            <div key={pill.key} className="mkt-cov-pill" style={{ left: `${pill.x}%`, top: `${pill.y}%` }}>
              <span style={{ fontSize: 16 }}>{MKT_COV_COVERED[pill.key][1]}</span>
              <span>{MKT_COV_COVERED[pill.key][0]}</span>
              <span className="sub">● live access</span>
            </div>
          )}
        </div>
      </div>
    </section>
  );
};

Object.assign(window, { MktCoverageMap });