/* chapters-mid.jsx — Enterprise (III) + Complexity (IV) + Hypergrowth (V) */
/* global React, ChapterShell, CHAPTERS, Bloom, Splatter, Halftone, ApplyClass, mulberry */

const { useState: useStateM, useEffect: useEffectM, useRef: useRefM, useMemo: useMemoM } = React;

/* ============================================================
   CHAPTER III — Yellow Border. Team growth 3 → 22.
   ============================================================ */
function ChapterEnterprise() {
  const chapter = CHAPTERS[2];
  return <ChapterShell chapter={chapter} art={null} />;
}

function TeamGrowth() {
  const total = 22;
  const original = 3;
  const [count, setCount] = useStateM(original);
  const ref = useRefM(null);
  const animated = useRefM(false);

  /* Auto-animate when scrolled into view */
  useEffectM(() => {
    if (!ref.current) return;
    const obs = new IntersectionObserver(
      (entries) => entries.forEach((e) => {
        if (e.isIntersecting && !animated.current) {
          animated.current = true;
          let c = original;
          const tick = () => {
            c += 1;
            setCount(c);
            if (c < total) setTimeout(tick, 80);
          };
          setTimeout(tick, 300);
        }
      }),
      { threshold: 0.4 }
    );
    obs.observe(ref.current);
    return () => obs.disconnect();
  }, []);

  return (
    <div className="team-grid" ref={ref}>
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline" }}>
        <span className="dateline">FIG. 3 · TEAM HEADCOUNT</span>
        <span className="dateline">SEP 17 → APR 19</span>
      </div>

      <p className="team-grid__counter" style={{ marginTop: 10 }}>
        {count}<span>&nbsp;/ 22</span>
      </p>
      <p className="team-grid__label">Program Managers · The Yellow Border</p>

      <div className="team-figures">
        {Array.from({ length: total }).map((_, i) =>
        <div
          key={i}
          className={`team-figure ${i < count ? "is-active" : ""} ${i < original ? "is-original" : ""}`}
          style={{ transitionDelay: `${i * 30}ms` }}
          aria-hidden="true" />

        )}
      </div>

      <div className="scaler">
        <span className="mono" style={{ fontSize: 10 }}>3</span>
        <input
          type="range"
          min={original}
          max={total}
          value={count}
          onChange={(e) => {animated.current = true;setCount(parseInt(e.target.value));}}
          aria-label="Team size" />
        
        <span className="mono" style={{ fontSize: 10 }}>22</span>
      </div>

      <div style={{ marginTop: 14, fontFamily: "var(--font-hand)", color: "var(--accent)", fontSize: 22, transform: "rotate(-2deg)", display: "inline-block" }}>
        each one a hire I made.
      </div>
    </div>);

}

/* ============================================================
   CHAPTER IV — Building From Zero. The integration guide.
   (Generic — no proprietary specifics)
   ============================================================ */
function ChapterComplexity() {
  const chapter = CHAPTERS[3];
  /* The GuideBinder animation (Fig. 4) was moved into the case-study modal
     (under "What I Built") — see CaseStudyModal in career-journey.jsx. The
     surrounding chapter body text stays here unchanged. */
  return <ChapterShell chapter={chapter} art={null} />;
}

function GuideBinder() {
  const pages = [
  {
    n: "001",
    title: "Executive Summary",
    section: "§ 1.0",
    body:
    <>
      <p>This guide presents the integration team's recommendations on organizational, system, and portfolio decisions facing a global parent company's central product organization following the acquisition.</p>
      <p style={{ marginTop: 12 }}><strong>Scope:</strong> 200+ team members &middot; 100+ products &middot; 50+ systems</p>
    </>
  },
  {
    n: "024",
    title: "Portfolio Inventory",
    section: "§ 3.2",
    body:
    <>
      <p>Complete map of consumer-facing and internal digital products. Each item categorized by:</p>
      <ul style={{ paddingLeft: 18, marginTop: 8 }}>
        <li>Revenue impact tier (P0 — P3)</li>
        <li>System dependencies &amp; technical debt</li>
        <li>Audience overlap with the acquiring portfolio</li>
        <li>Recommended disposition (retain · merge · sunset)</li>
      </ul>
    </>
  },
  {
    n: "087",
    title: "Org Topology",
    section: "§ 5.1",
    body:
    <>
      <p>Where the talent sits today. Where it should sit. Reporting paths into the new parent functions once integrated.</p>
      <p style={{ marginTop: 12 }}>Includes succession risk flags and 30/60/90 cohort plans for the critical roles.</p>
    </>
  },
  {
    n: "129",
    title: "Vendor &amp; Contract Map",
    section: "§ 7.4",
    body:
    <>
      <p>Active vendor relationships, annualized spend, and consolidation opportunities mapped against Disney's preferred-supplier list.</p>
      <p style={{ marginTop: 12, color: "var(--accent)", fontStyle: "italic" }}>Note: enterprise contracts surface significant negotiation leverage when combined with parent-co volumes.</p>
    </>
  },
  {
    n: "150",
    title: "Recommendations",
    section: "§ 9.0",
    body:
    <>
      <p>The summary recommendation set, sequenced by quarter, with named accountability and budget envelope per workstream.</p>
      <p style={{ marginTop: 12 }}><strong>Q1 priority:</strong> Integrate people and portfolio. Map every team, product, and dependency across the acquired properties before any structural decisions get made.</p>
      <p style={{ marginTop: 8 }}><strong>Q2 priority:</strong> Stand up a new BRM function (yours truly, building from scratch).</p>
    </>
  }];

  const [idx, setIdx] = useStateM(0);
  const next = () => setIdx((i) => Math.min(pages.length - 1, i + 1));
  const prev = () => setIdx((i) => Math.max(0, i - 1));

  return (
    <div>
      <div className="binder">
        <div className="binder__stack">
          {pages.map((p, i) => {
            const turned = i < idx;
            return (
              <div
                key={i}
                className="guide-page"
                style={{
                  transform: turned ? "rotateY(-178deg) translateX(-4px)" : `translateY(${(pages.length - 1 - i) * 2}px) translateX(${(pages.length - 1 - i) * 2}px) rotateY(0deg)`,
                  zIndex: turned ? i : 100 - i,
                  pointerEvents: i === idx ? "auto" : "none"
                }}
                onClick={i === idx ? next : undefined}>
                
                <div className="guide-page__num">
                  <span>{p.section}</span>
                  <span>PG {p.n} / 150</span>
                </div>
                <h4 className="guide-page__title" dangerouslySetInnerHTML={{ __html: p.title }} />
                <div className="guide-page__body">{p.body}</div>
                <div className="guide-page__footer">
                  POST-ACQUISITION INTEGRATION GUIDE &middot; INTERNAL · CONFIDENTIAL
                </div>
                {/* SAMPLE rubber-stamp watermark over each page */}
                <span className="guide-page__sample" aria-hidden="true">SAMPLE</span>
              </div>);

          })}
        </div>
      </div>

      <div className="binder__controls">
        <button className="binder__btn" onClick={prev} disabled={idx === 0}>&larr; prev</button>
        <span className="binder__page-indicator">{pages[idx].n} <span style={{ color: "var(--ink-soft)", fontSize: 12, fontStyle: "normal", fontWeight: 400, fontFamily: "var(--font-mono)" }}>of 150</span></span>
        <button className="binder__btn" onClick={next} disabled={idx === pages.length - 1}>next &rarr;</button>
      </div>
      <p className="mono" style={{ textAlign: "center", marginTop: 10, fontSize: 10, color: "var(--ink-soft)" }}>
        FIG. 4 · DELIVERED TO EXEC LEADERSHIP, POST-ACQUISITION
      </p>
    </div>);

}

/* ============================================================
   CHAPTER V — Mural. Ship Now! Ship Wow! 8× world map.
   ============================================================ */
function ChapterHypergrowth() {
  const chapter = CHAPTERS[4];
  return <ChapterShell chapter={chapter} art={null} />;
}

function EightX() {
  const start = 75,end = 600;
  const [n, setN] = useStateM(start);
  const ref = useRefM(null);
  const animated = useRefM(false);

  useEffectM(() => {
    if (!ref.current) return;
    const obs = new IntersectionObserver(
      (entries) => entries.forEach((e) => {
        if (e.isIntersecting && !animated.current) {
          animated.current = true;
          const dur = 1800;
          const t0 = performance.now();
          const tick = (t) => {
            const p = Math.min(1, (t - t0) / dur);
            const eased = 1 - Math.pow(1 - p, 3);
            setN(Math.round(start + (end - start) * eased));
            if (p < 1) requestAnimationFrame(tick);
          };
          requestAnimationFrame(tick);
        }
      }),
      { threshold: 0.4 }
    );
    obs.observe(ref.current);
    return () => obs.disconnect();
  }, []);

  return (
    <div className="eight-x" ref={ref}>
      <p className="dateline">FIG. 5 · SHIP NOW! SHIP WOW! · JAN 21 → SEP 23</p>

      <div className="eight-x__head">
        <p className="eight-x__big">8<em>×</em></p>
        <div className="eight-x__stats">
          <div className="eight-x__stat">
            <p className="eight-x__counter">~<strong>{n}</strong></p>
            <p className="eight-x__caption">FTEs at peak</p>
          </div>
          <div className="eight-x__stat">
            <p className="eight-x__counter">20<strong>+</strong></p>
            <p className="eight-x__caption">countries</p>
          </div>
        </div>
      </div>

      <WorldMap />
    </div>);

}

/* World map with proper continent outlines (stylized but recognizable),
   then city/region dots lit in sequence as the section enters view. */
function WorldMap() {
  const cities = [
    /* === NORTH AMERICA — broad spread === */
    /* Canada */
    { x: 100, y: 85,  label: "Anchorage" },
    { x: 158, y: 113, label: "Vancouver" },
    { x: 185, y: 105, label: "Edmonton" },
    { x: 220, y: 110, label: "Calgary" },
    { x: 230, y: 115, label: "Winnipeg" },
    { x: 279, y: 128, label: "Toronto" },
    { x: 296, y: 124, label: "Montreal" },
    { x: 302, y: 120, label: "Quebec City" },
    { x: 322, y: 126, label: "Halifax" },
    /* US west */
    { x: 160, y: 118, label: "Seattle" },
    { x: 159, y: 125, label: "Portland" },
    { x: 167, y: 148, label: "SF" },
    { x: 172, y: 156, label: "LA" },
    { x: 180, y: 152, label: "Las Vegas" },
    { x: 188, y: 158, label: "Phoenix" },
    { x: 189, y: 137, label: "Salt Lake" },
    /* US mid */
    { x: 208, y: 140, label: "Denver" },
    { x: 237, y: 142, label: "Kansas City" },
    { x: 241, y: 128, label: "Minneapolis" },
    { x: 250, y: 145, label: "St. Louis" },
    { x: 257, y: 134, label: "Chicago" },
    { x: 269, y: 134, label: "Detroit" },
    { x: 228, y: 166, label: "Austin" },
    { x: 231, y: 161, label: "Dallas" },
    { x: 235, y: 168, label: "Houston" },
    { x: 250, y: 168, label: "New Orleans" },
    { x: 259, y: 150, label: "Nashville" },
    /* US east */
    { x: 273, y: 138, label: "Cleveland" },
    { x: 278, y: 140, label: "Pittsburgh" },
    { x: 297, y: 137, label: "NYC" },
    { x: 303, y: 132, label: "Boston" },
    { x: 286, y: 145, label: "DC" },
    { x: 276, y: 153, label: "Charlotte" },
    { x: 273, y: 158, label: "ATL" },
    { x: 277, y: 178, label: "Miami" },
    /* Mexico + Caribbean */
    { x: 174, y: 160, label: "Tijuana" },
    { x: 221, y: 180, label: "Monterrey" },
    { x: 213, y: 193, label: "Guadalajara" },
    { x: 224, y: 196, label: "Mexico City" },
    { x: 271, y: 187, label: "Havana" },

    /* === SOUTH AMERICA — broad spread === */
    /* North/Andes */
    { x: 301, y: 222, label: "Maracaibo" },
    { x: 314, y: 221, label: "Caracas" },
    { x: 290, y: 222, label: "Cartagena" },
    { x: 290, y: 233, label: "Medellín" },
    { x: 294, y: 237, label: "Bogotá" },
    { x: 287, y: 241, label: "Cali" },
    { x: 282, y: 250, label: "Quito" },
    { x: 278, y: 257, label: "Guayaquil" },
    /* Peru / Bolivia */
    { x: 286, y: 283, label: "Lima" },
    { x: 300, y: 287, label: "Cusco" },
    { x: 310, y: 296, label: "La Paz" },
    /* Brazil */
    { x: 333, y: 260, label: "Manaus" },
    { x: 365, y: 254, label: "Belém" },
    { x: 393, y: 261, label: "Fortaleza" },
    { x: 402, y: 273, label: "Recife" },
    { x: 393, y: 287, label: "Salvador" },
    { x: 367, y: 294, label: "Brasília" },
    { x: 378, y: 306, label: "Belo Horizonte" },
    { x: 380, y: 314, label: "Rio" },
    { x: 371, y: 315, label: "São Paulo" },
    { x: 363, y: 321, label: "Curitiba" },
    /* Southern cone */
    { x: 340, y: 320, label: "Asunción" },
    { x: 303, y: 343, label: "Santiago" },
    { x: 322, y: 340, label: "Córdoba" },
    { x: 332, y: 344, label: "Rosario" },
    { x: 312, y: 344, label: "Mendoza" },
    { x: 338, y: 348, label: "Buenos Aires" },
    { x: 344, y: 348, label: "Montevideo" },
    { x: 302, y: 366, label: "Bariloche" },
    { x: 304, y: 398, label: "Punta Arenas" },

    /* === AFRICA === */
    { x: 508, y: 149, label: "Algiers" },
    { x: 528, y: 149, label: "Tunis" },
    { x: 537, y: 160, label: "Tripoli" },
    { x: 452, y: 210, label: "Dakar" },
    { x: 499, y: 236, label: "Accra" },
    { x: 510, y: 233, label: "Lagos" },
    { x: 542, y: 263, label: "Kinshasa" },
    { x: 590, y: 208, label: "Khartoum" },
    { x: 607, y: 226, label: "Addis Ababa" },
    { x: 602, y: 255, label: "Nairobi" },
    { x: 578, y: 294, label: "Lusaka" },
    { x: 578, y: 324, label: "Johannesburg" },
    { x: 551, y: 345, label: "Cape Town" },

    /* === EUROPE (Western) === */
    { x: 482, y: 108, label: "Dublin" },
    { x: 502, y: 110, label: "London" },
    { x: 513, y: 106, label: "Amsterdam" },
    { x: 506, y: 117, label: "Paris" },
    { x: 489, y: 138, label: "Madrid" },
    { x: 526, y: 124, label: "Milan" },
    { x: 537, y: 105, label: "Berlin" },
    /* Eastern Europe */
    { x: 540, y: 111, label: "Prague" },
    { x: 546, y: 116, label: "Vienna" },
    { x: 553, y: 118, label: "Budapest" },
    { x: 558, y: 107, label: "Warsaw" },
    { x: 585, y: 110, label: "Kyiv" },
    { x: 605, y: 95,  label: "Moscow" },
    { x: 572, y: 127, label: "Bucharest" },
    { x: 565, y: 131, label: "Sofia" },
    { x: 557, y: 126, label: "Belgrade" },
    { x: 566, y: 144, label: "Athens" },

    /* === MIDDLE EAST === */
    { x: 580, y: 136, label: "Istanbul" },
    { x: 597, y: 161, label: "Tel Aviv" },
    { x: 600, y: 161, label: "Amman" },
    { x: 599, y: 156, label: "Beirut" },
    { x: 587, y: 167, label: "Cairo" },
    { x: 629, y: 181, label: "Riyadh" },
    { x: 654, y: 180, label: "Dubai" },
    { x: 643, y: 151, label: "Tehran" },

    /* === NORTH AFRICA (Morocco cluster) === */
    { x: 484, y: 151, label: "Tangier" },
    { x: 481, y: 156, label: "Rabat" },
    { x: 479, y: 157, label: "Casablanca" },
    { x: 478, y: 162, label: "Marrakech" },

    /* === AUSTRALIA === */
    { x: 905, y: 350, label: "Sydney" },
    { x: 893, y: 358, label: "Melbourne" },
  ];

  const ref = useRefM(null);
  const [lit, setLit] = useStateM(0);

  useEffectM(() => {
    if (!ref.current) return;
    const obs = new IntersectionObserver(
      (entries) => entries.forEach((e) => {
        if (e.isIntersecting) {
          let i = 0;
          const t = setInterval(() => {
            i++;
            setLit(i);
            if (i >= cities.length) clearInterval(t);
          }, 75);
        }
      }),
      { threshold: 0.25 }
    );
    obs.observe(ref.current);
    return () => obs.disconnect();
  }, []);

  return (
    <div className="world-map" ref={ref}>
      <svg viewBox="0 0 1000 500" preserveAspectRatio="xMidYMid meet"
           style={{ width: "100%", height: "auto" }} aria-hidden="true">

        {/* Faint latitude / longitude grid for "map" feel */}
        <g stroke="var(--ink)" strokeWidth="0.5" opacity="0.12" fill="none">
          <line x1="0" y1="125" x2="1000" y2="125" />
          <line x1="0" y1="250" x2="1000" y2="250" />
          <line x1="0" y1="375" x2="1000" y2="375" />
          <line x1="250" y1="0" x2="250" y2="500" />
          <line x1="500" y1="0" x2="500" y2="500" />
          <line x1="750" y1="0" x2="750" y2="500" />
        </g>

        {/* Continent outlines — refined for closer-to-real shapes */}
        <g fill="var(--ink)" opacity="0.14" stroke="var(--ink)" strokeOpacity="0.55"
           strokeWidth="1.2" strokeLinejoin="round">

          {/* North America: Alaska extended west, Canada, Hudson Bay indent,
              US Atlantic + Pacific coasts, Florida hook, Gulf, Mexico narrowing */}
          <path d="M 70 90
                   L 95 78 Q 110 72 130 75 L 158 78 L 168 92
                   L 195 85 Q 215 70 245 70 L 280 68
                   L 305 76 L 322 90
                   Q 335 78 352 82 L 360 102
                   L 350 120 L 335 130
                   Q 340 148 327 160 L 322 180
                   L 314 198 L 308 212
                   L 298 220 L 292 200
                   L 282 220 L 268 224
                   L 253 238 L 240 250
                   Q 226 254 218 242
                   L 220 222 L 208 210
                   L 192 195 L 188 175
                   L 175 162 L 162 145
                   L 148 132 L 138 118
                   L 122 108 L 100 102 L 82 100 Z" />

          {/* Greenland */}
          <path d="M 380 55 Q 405 50 425 65 L 432 88 L 422 112 L 398 118 L 378 102 L 370 80 Z" />

          {/* South America — bigger Brazilian east-coast bulge to fit Recife / Salvador */}
          <path d="M 280 218 L 305 218 L 320 224
                   Q 340 230 360 245
                   L 388 258 L 402 270
                   L 408 292 L 402 318
                   L 388 348 L 372 378
                   L 358 405 L 345 432
                   L 330 455 L 315 462
                   L 302 450 L 294 422
                   L 288 395 L 282 365
                   L 276 335 L 272 305
                   L 270 278 L 273 252
                   L 277 232 Z" />

          {/* Europe — articulated coast: Iberia, France, Italy, Balkans, Scandinavia */}
          <path d="M 462 100 L 478 95
                   L 488 105 L 482 122
                   L 478 135 L 490 145
                   L 510 152 L 522 145
                   L 528 130 L 540 138
                   L 538 152
                   L 522 162 L 510 158
                   L 498 158 L 488 162
                   L 482 145
                   L 470 142 L 466 128 Z" />
          {/* Scandinavia */}
          <path d="M 528 70 L 545 60 L 555 78 L 552 100 L 540 110 L 528 102 L 525 88 Z" />
          {/* Eastern Europe / Russia mass (joins to Asia) */}
          <path d="M 538 90 L 590 80 L 640 75 L 670 80
                   L 680 95 L 670 108 L 645 112
                   L 615 110 L 590 108 L 568 110
                   L 552 110 L 545 100 Z" />

          {/* UK / Ireland */}
          <path d="M 478 102 L 492 102 L 498 118 L 488 130 L 478 126 L 472 115 Z" />
          <path d="M 466 112 L 474 112 L 476 124 L 468 126 Z" />

          {/* Africa — extended north to include Mediterranean coast (Algiers/Tunis/Tripoli),
              west to include Dakar's bulge, east to Horn, south to Cape */}
          <path d="M 482 148 L 510 145 L 540 148 L 575 158
                   L 600 175 L 615 195
                   L 622 215 L 627 245
                   L 624 275 L 617 305 L 607 330
                   L 592 355 L 572 368
                   L 552 372 L 535 360
                   L 518 340 L 508 315
                   L 500 285 L 495 258
                   L 485 232 L 465 218
                   L 446 208 L 450 192
                   L 462 178 L 472 165 Z" />
          {/* Horn of Africa */}
          <path d="M 615 200 L 630 198 L 638 215 L 625 222 L 615 215 Z" />
          {/* Madagascar */}
          <path d="M 615 290 L 626 295 L 630 320 L 622 332 L 614 322 Z" />

          {/* Arabian peninsula */}
          <path d="M 600 165 L 625 158 L 645 168 L 660 188 L 660 210 L 645 222 L 628 220 L 612 205 L 605 188 Z" />

          {/* Asia main mass — Siberia → China → SE arc */}
          <path d="M 660 80 L 720 70 L 790 68 L 855 78 L 895 95
                   L 920 115 L 935 140 Q 945 170 935 200
                   L 925 225 L 905 235 L 875 240
                   L 840 235 L 805 232 L 775 225 L 745 220
                   L 715 215 L 685 205 L 655 195
                   L 635 178 L 622 152
                   L 615 122 L 622 100 L 640 88 Z" />

          {/* India subcontinent */}
          <path d="M 695 215 L 720 215 L 738 232 L 748 258 L 740 285 L 720 298 L 702 290 L 692 268 L 685 240 Z" />

          {/* Southeast Asia peninsula */}
          <path d="M 762 232 L 780 240 L 795 258 L 808 280 L 795 295 L 778 292 L 770 275 L 765 255 Z" />

          {/* Indonesia islands */}
          <path d="M 808 295 L 838 290 L 855 298 L 850 308 L 815 308 Z" />
          <path d="M 860 290 L 882 292 L 888 302 L 870 308 L 858 302 Z" />
          <path d="M 830 312 L 858 314 L 855 324 L 835 324 Z" />

          {/* Korean peninsula */}
          <path d="M 858 130 L 870 132 L 872 152 L 862 155 L 856 142 Z" />

          {/* Japan (three rough islands) */}
          <path d="M 882 132 L 890 138 L 895 152 L 888 158 L 882 148 Z" />
          <path d="M 895 158 L 905 162 L 908 175 L 898 178 L 892 168 Z" />

          {/* Australia */}
          <path d="M 815 332 Q 840 326 870 328 L 905 335 L 920 350 L 925 370
                   L 918 385 L 895 395 L 868 398
                   L 838 395 L 818 385 L 808 365 L 808 348 Z" />

          {/* Tasmania */}
          <path d="M 888 402 L 900 402 L 902 412 L 890 412 Z" />

          {/* New Zealand */}
          <path d="M 940 378 L 950 380 L 952 398 L 942 402 Z" />
          <path d="M 942 405 L 952 408 L 950 420 L 940 418 Z" />
        </g>

        {/* Continent labels — small, mono, for context */}
        <g fontFamily="var(--font-mono)" fontSize="9" fill="var(--ink)" opacity="0.5"
           letterSpacing="0.15em" fontWeight="600" textAnchor="middle">
          <text x="225" y="110">N. AMERICA</text>
          <text x="320" y="345">S. AMERICA</text>
          <text x="540" y="125">EUROPE</text>
          <text x="555" y="270">AFRICA</text>
          <text x="755" y="155">ASIA</text>
          <text x="865" y="370">AUSTRALIA</text>
        </g>

        {/* City dots — lit in sequence */}
        {cities.map((d, i) =>
          <g key={i}>
            {i < lit && (
              <>
                <circle cx={d.x} cy={d.y} r="6" fill="var(--paper)" opacity="0.95" />
                <circle cx={d.x} cy={d.y} r="8" fill="none" stroke="var(--accent)" strokeWidth="1.2" opacity="0.55" />
                <circle cx={d.x} cy={d.y} r="4" fill="var(--accent)" stroke="var(--ink)" strokeWidth="0.7" />
              </>
            )}
          </g>
        )}
      </svg>
      <p className="world-map__caption">
        {lit} / {cities.length} cities &middot; the team, distributed
      </p>
    </div>);
}

function DotMap() {
  /* Concentrations per Anastasia: most in Argentina, US, and Europe;
     some in AU, one in Morocco. Cluster sizes reflect density. */
  const clusters = [
    /* United States — multiple hubs */
    { x: 100, y: 70,  c: "US · NYC",  size: 5 },
    { x: 85,  y: 78,  c: "US · DC",   size: 4 },
    { x: 70,  y: 72,  c: "US · SF",   size: 4 },
    { x: 90,  y: 84,  c: "US · ATL",  size: 3 },

    /* Argentina — biggest concentration */
    { x: 138, y: 158, c: "Buenos Aires", size: 6 },
    { x: 132, y: 152, c: "Córdoba",      size: 5 },
    { x: 140, y: 168, c: "Rosario",      size: 4 },
    { x: 130, y: 162, c: "Mendoza",      size: 4 },

    /* Europe — concentrated cluster */
    { x: 228, y: 78,  c: "UK · London",  size: 5 },
    { x: 240, y: 82,  c: "Amsterdam",    size: 4 },
    { x: 248, y: 88,  c: "Berlin",       size: 4 },
    { x: 232, y: 92,  c: "Paris",        size: 4 },
    { x: 244, y: 98,  c: "Madrid",       size: 3 },
    { x: 254, y: 92,  c: "Milan",        size: 3 },
    { x: 260, y: 80,  c: "Warsaw",       size: 3 },
    { x: 234, y: 70,  c: "Dublin",       size: 3 },

    /* Australia — some folks */
    { x: 402, y: 165, c: "Sydney",       size: 3 },
    { x: 392, y: 170, c: "Melbourne",    size: 3 },

    /* Morocco — one person */
    { x: 226, y: 118, c: "Morocco",      size: 2 },
  ];

  const ref = useRefM(null);
  const [lit, setLit] = useStateM(0);

  useEffectM(() => {
    if (!ref.current) return;
    const obs = new IntersectionObserver(
      (entries) => entries.forEach((e) => {
        if (e.isIntersecting) {
          let i = 0;
          const t = setInterval(() => {
            i++;
            setLit(i);
            if (i >= clusters.length) clearInterval(t);
          }, 90);
        }
      }),
      { threshold: 0.3 }
    );
    obs.observe(ref.current);
    return () => obs.disconnect();
  }, []);

  return (
    <div className="dot-map" ref={ref}>
      <svg viewBox="0 0 460 200" style={{ width: "100%", height: "auto" }} aria-hidden="true">
        <defs>
          <pattern id="globe-dot" width="5" height="5" patternUnits="userSpaceOnUse">
            <circle cx="2.5" cy="2.5" r="0.7" fill="var(--ink)" opacity="0.55" />
          </pattern>
        </defs>

        {/* Stylized continent landmasses — solid muted fill + ink outline + dotted overlay for texture */}
        <g>
          {/* Solid muted fill for legibility */}
          <g fill="var(--ink)" opacity="0.10">
            <path d="M 28 44 Q 60 24 112 32 Q 142 48 152 78 Q 132 92 110 100 Q 80 110 58 100 Q 28 80 28 44 Z" />
            <path d="M 110 110 Q 140 102 152 130 Q 148 168 128 178 Q 110 168 100 138 Q 100 115 110 110 Z" />
            <path d="M 218 58 Q 262 48 290 60 Q 296 92 270 102 Q 232 105 218 90 Z" />
            <path d="M 220 100 Q 270 92 305 110 Q 320 148 296 178 Q 270 184 252 158 Q 220 130 220 100 Z" />
            <path d="M 295 55 Q 350 45 420 55 Q 442 80 425 110 Q 380 120 350 110 Q 310 100 295 75 Z" />
            <path d="M 380 148 Q 412 142 432 160 Q 426 182 400 182 Q 380 176 380 148 Z" />
          </g>
          {/* Ink stroke outline */}
          <g fill="none" stroke="var(--ink)" strokeWidth="1" opacity="0.55" strokeLinejoin="round">
            <path d="M 28 44 Q 60 24 112 32 Q 142 48 152 78 Q 132 92 110 100 Q 80 110 58 100 Q 28 80 28 44 Z" />
            <path d="M 110 110 Q 140 102 152 130 Q 148 168 128 178 Q 110 168 100 138 Q 100 115 110 110 Z" />
            <path d="M 218 58 Q 262 48 290 60 Q 296 92 270 102 Q 232 105 218 90 Z" />
            <path d="M 220 100 Q 270 92 305 110 Q 320 148 296 178 Q 270 184 252 158 Q 220 130 220 100 Z" />
            <path d="M 295 55 Q 350 45 420 55 Q 442 80 425 110 Q 380 120 350 110 Q 310 100 295 75 Z" />
            <path d="M 380 148 Q 412 142 432 160 Q 426 182 400 182 Q 380 176 380 148 Z" />
          </g>
          {/* Dotted overlay for texture, clipped to continents */}
          <g fill="url(#globe-dot)" opacity="0.7" style={{ mixBlendMode: "multiply" }}>
            <path d="M 28 44 Q 60 24 112 32 Q 142 48 152 78 Q 132 92 110 100 Q 80 110 58 100 Q 28 80 28 44 Z" />
            <path d="M 110 110 Q 140 102 152 130 Q 148 168 128 178 Q 110 168 100 138 Q 100 115 110 110 Z" />
            <path d="M 218 58 Q 262 48 290 60 Q 296 92 270 102 Q 232 105 218 90 Z" />
            <path d="M 220 100 Q 270 92 305 110 Q 320 148 296 178 Q 270 184 252 158 Q 220 130 220 100 Z" />
            <path d="M 295 55 Q 350 45 420 55 Q 442 80 425 110 Q 380 120 350 110 Q 310 100 295 75 Z" />
            <path d="M 380 148 Q 412 142 432 160 Q 426 182 400 182 Q 380 176 380 148 Z" />
          </g>
        </g>

        {/* Subtle latitude lines for "map" feel */}
        <g stroke="var(--ink)" strokeWidth="0.4" opacity="0.20" fill="none" strokeDasharray="2 3">
          <line x1="0" y1="100" x2="460" y2="100" />
          <line x1="0" y1="60"  x2="460" y2="60" />
          <line x1="0" y1="140" x2="460" y2="140" />
        </g>

        {/* Lit dots per cluster — paper halo + ink ring + accent core for max contrast */}
        {clusters.map((d, i) =>
          <g key={i}>
            {i < lit && (
              <>
                {/* paper halo for visibility against dark continents */}
                <circle cx={d.x} cy={d.y} r={d.size + 2.5} fill="var(--paper)" opacity="0.95" />
                {/* outer pulse ring */}
                <circle cx={d.x} cy={d.y} r={d.size + 4} fill="none" stroke="var(--accent)" strokeWidth="1.1" opacity="0.55" />
                {/* core dot */}
                <circle cx={d.x} cy={d.y} r={d.size} fill="var(--accent)" stroke="var(--ink)" strokeWidth="0.6" />
              </>
            )}
          </g>
        )}

        {/* Region labels — bolder, with paper backing for legibility */}
        <g fontFamily="var(--font-mono)" fontSize="8" fill="var(--ink)" letterSpacing="0.12em" fontWeight="600">
          <text x="78"  y="56" stroke="var(--paper)" strokeWidth="2.5" paintOrder="stroke">US</text>
          <text x="136" y="188" stroke="var(--paper)" strokeWidth="2.5" paintOrder="stroke">ARGENTINA</text>
          <text x="240" y="54" stroke="var(--paper)" strokeWidth="2.5" paintOrder="stroke">EUROPE</text>
          <text x="222" y="132" stroke="var(--paper)" strokeWidth="2.5" paintOrder="stroke">MOROCCO</text>
          <text x="398" y="196" stroke="var(--paper)" strokeWidth="2.5" paintOrder="stroke">AU</text>
        </g>
      </svg>
      <p className="mono" style={{ fontSize: 9, marginTop: 4, color: "var(--ink-soft)", textAlign: "right" }}>
        {lit} / {clusters.length} markers · the bulk: Argentina, US &amp; Europe
      </p>
    </div>);

}

Object.assign(window, { ChapterEnterprise, TeamGrowth, ChapterComplexity, GuideBinder, ChapterHypergrowth, EightX, DotMap, WorldMap });