// Google Maps-style terrain view of NC Outer Banks region.
// Zoomed out: full Albemarle/Pamlico Sound + barrier islands + mainland
// Toggle: 'listings' (8 access points) vs 'unique' (2 unique providers)

const { useState: _useStateI, useEffect: _useEffectI } = React;

const IslandMap = ({ view = "unique" }) => {
  const [step, setStep] = _useStateI(0);

  const narration = view === "listings"
    ? [
        { eyebrow:"Step 1", text:<>The exhibit shows <strong>8 in-network access points</strong> across the Outer Banks.</> },
        { eyebrow:"Step 2", text:<>Each pin counts as a separate provider option in the access score.</> },
        { eyebrow:"Step 3", text:<>The map looks dense. The exhibit reads green. Members appear to have choice.</> },
      ]
    : [
        { eyebrow:"Step 1", text:<>De-duplicate by NPI and the picture changes — <strong>only 2 unique providers</strong> serve the entire strip.</> },
        { eyebrow:"Step 2", text:<>One bridge connects this island to the mainland. There is no detour.</> },
        { eyebrow:"Step 3", text:<>Adequacy must be measured by <strong>unique providers</strong>, not by listings.</> },
      ];

  _useEffectI(() => {
    setStep(0);
    const id = setInterval(() => setStep(s => (s + 1) % narration.length), 4000);
    return () => clearInterval(id);
  }, [view]);

  // Pin coords on island strip in 1600x1000 viewBox
  const pins = [
    { x: 940,  y: 800, town:"Manteo",          provider:"A" },
    { x: 1010, y: 720, town:"Nags Head S",     provider:"A" },
    { x: 1060, y: 660, town:"Nags Head N",     provider:"B" },
    { x: 1110, y: 590, town:"KDH S",           provider:"A" },
    { x: 1150, y: 520, town:"KDH N",           provider:"A" },
    { x: 1200, y: 450, town:"Kitty Hawk S",    provider:"B" },
    { x: 1240, y: 380, town:"Kitty Hawk N",    provider:"A" },
    { x: 1290, y: 300, town:"Southern Shores", provider:"A" },
  ];
  const providerColors = { A: "var(--rust)", B: "var(--gold-deep)" };

  // Barrier island - extended Outer Banks
  const islandPath = `
    M 880 880
    Q 920 830 960 790
    Q 1000 740 1040 690
    Q 1080 640 1120 580
    Q 1160 520 1200 460
    Q 1240 400 1280 340
    Q 1320 280 1360 230
    L 1400 200
    L 1430 220
    Q 1395 280 1360 340
    Q 1320 400 1280 460
    Q 1240 520 1200 580
    Q 1160 640 1120 700
    Q 1080 760 1040 810
    Q 1000 860 960 900
    Q 920 940 880 970
    Z
  `;
  // Hatteras extension going south
  const hatterasPath = `
    M 870 880
    Q 850 940 820 990
    L 800 1000 L 770 1000
    Q 800 940 830 880 Z
  `;

  return (
    <div className="map-card" style={{ background:"#cfe2ec" }}>
      <svg viewBox="0 0 1600 1000" preserveAspectRatio="xMidYMid slice">
        <defs>
          <linearGradient id="ob-water" x1="0" x2="0" y1="0" y2="1">
            <stop offset="0%" stopColor="#bfd8e4" />
            <stop offset="100%" stopColor="#a8c8d8" />
          </linearGradient>
          <linearGradient id="ob-ocean" x1="0" x2="1" y1="0" y2="0">
            <stop offset="0%" stopColor="#9ec0d4" />
            <stop offset="100%" stopColor="#7ba8c2" />
          </linearGradient>
          <radialGradient id="ob-light" cx="60%" cy="20%">
            <stop offset="0%" stopColor="#fff7d8" stopOpacity=".4" />
            <stop offset="100%" stopColor="#fff7d8" stopOpacity="0" />
          </radialGradient>
          <filter id="ob-blur"><feGaussianBlur stdDeviation="4" /></filter>
        </defs>

        {/* Water (sound) - lighter inside */}
        <rect width="1600" height="1000" fill="url(#ob-water)" />
        {/* Ocean - east of strip */}
        <path d="M 1430 0 L 1600 0 L 1600 1000 L 1320 1000 Q 1340 940 1370 870 Q 1400 800 1430 700 Q 1460 600 1480 480 Q 1500 360 1500 200 Q 1490 100 1430 0 Z" fill="url(#ob-ocean)" />

        {/* Wave shimmer */}
        <g opacity=".35" stroke="#5a90ad" strokeWidth=".7" fill="none">
          {[...Array(20)].map((_, i) => (
            <path
              key={i}
              d={`M ${1430 + (i%2)*15} ${50 + i*48} Q 1500 ${40 + i*48} 1570 ${55 + i*48}`}
              style={{ animation:`shimmer ${4 + i%3}s ease-in-out ${i*0.3}s infinite` }}
            />
          ))}
        </g>
        <g opacity=".25" stroke="#7a9eb0" strokeWidth=".5" fill="none">
          {[...Array(14)].map((_, i) => (
            <path key={i} d={`M ${100 + i*100} ${200 + i*30} Q ${250 + i*100} ${190 + i*30} ${400 + i*100} ${210 + i*30}`} />
          ))}
        </g>

        {/* Mainland (Dare/Tyrrell counties) */}
        <path
          d="M 0 0 L 870 0 Q 860 80 830 160 Q 800 240 760 320 Q 720 400 680 480 Q 640 560 600 640 Q 560 720 520 800 Q 480 880 430 950 L 380 1000 L 0 1000 Z"
          fill="#c4d2a8"
        />
        {/* Mainland forest patches */}
        <g opacity=".55">
          <ellipse cx="200" cy="300" rx="180" ry="100" fill="#9aab7c" filter="url(#ob-blur)" />
          <ellipse cx="500" cy="600" rx="220" ry="120" fill="#9aab7c" filter="url(#ob-blur)" />
          <ellipse cx="180" cy="780" rx="160" ry="80" fill="#9aab7c" filter="url(#ob-blur)" />
        </g>
        {/* Edge highlight on mainland */}
        <path
          d="M 870 0 Q 860 80 830 160 Q 800 240 760 320 Q 720 400 680 480 Q 640 560 600 640 Q 560 720 520 800 Q 480 880 430 950"
          fill="none" stroke="#f5e8c0" strokeWidth="2" opacity=".65"
        />

        {/* Barrier island */}
        <path d={islandPath} fill="#e8d8a8" />
        <path d={hatterasPath} fill="#e8d8a8" />
        {/* Vegetation patches on island */}
        <g opacity=".55">
          <ellipse cx="970" cy="780" rx="22" ry="50" fill="#9aab7c" transform="rotate(-50 970 780)" />
          <ellipse cx="1080" cy="630" rx="22" ry="50" fill="#9aab7c" transform="rotate(-50 1080 630)" />
          <ellipse cx="1180" cy="490" rx="22" ry="55" fill="#9aab7c" transform="rotate(-50 1180 490)" />
          <ellipse cx="1280" cy="340" rx="22" ry="50" fill="#9aab7c" transform="rotate(-50 1280 340)" />
        </g>
        {/* Beach edge highlight (ocean side) */}
        <path
          d="M 880 880 Q 1000 740 1120 580 Q 1240 420 1360 250"
          fill="none" stroke="#fff" strokeWidth="3" opacity=".65" strokeLinecap="round"
        />
        <path
          d="M 870 920 Q 990 780 1110 620 Q 1230 460 1350 290"
          fill="none" stroke="#fff" strokeWidth="1.2" opacity=".5"
          style={{ animation:"shimmer 3s ease-in-out infinite" }}
        />

        {/* Causeway: US-64 / US-264 — single bridge */}
        <line x1="650" y1="780" x2="940" y2="800" stroke="#000" strokeWidth="6" strokeOpacity=".25" strokeLinecap="round" />
        <line x1="650" y1="780" x2="940" y2="800" stroke="#fff" strokeWidth="4" strokeLinecap="round" />
        <line x1="650" y1="780" x2="940" y2="800" stroke="var(--gold-deep)" strokeWidth="2" strokeLinecap="round" strokeDasharray="4 3" />

        {/* NC-12 along the strip */}
        <path
          d="M 940 790 Q 1000 720 1050 660 Q 1110 580 1150 510 Q 1200 440 1240 370 Q 1290 290 1340 230"
          fill="none" stroke="#fff" strokeWidth="3.5" strokeLinecap="round" opacity=".85"
        />
        <path
          d="M 940 790 Q 1000 720 1050 660 Q 1110 580 1150 510 Q 1200 440 1240 370 Q 1290 290 1340 230"
          fill="none" stroke="#000" strokeWidth="1" strokeOpacity=".3" strokeLinecap="round" strokeDasharray="2 4"
        />

        {/* Mainland roads */}
        <g fill="none" stroke="#fff" strokeWidth="2" strokeLinecap="round" opacity=".75">
          <path d="M 0 750 Q 200 770 400 780 Q 550 785 650 780" />
          <path d="M 200 0 Q 240 200 280 400 Q 320 600 360 800" />
        </g>

        {/* Highway shield — US-64/264 */}
        <g transform="translate(770, 760)">
          <rect x="-30" y="-15" width="60" height="30" rx="5" fill="#fff" stroke="#222" strokeWidth="1.5" />
          <text x="0" y="-1" textAnchor="middle" fontSize="7" fontFamily="JetBrains Mono" fill="#666" letterSpacing="1">U.S.</text>
          <text x="0" y="11" textAnchor="middle" fontSize="11" fontWeight="800" fontFamily="JetBrains Mono" fill="#222">64·264</text>
        </g>

        {/* Sun light overlay */}
        <rect width="1600" height="1000" fill="url(#ob-light)" pointerEvents="none" />

        {/* Pins */}
        {pins.map((p, i) => {
          const firstIdxOfProvider = pins.findIndex(q => q.provider === p.provider);
          const isUniqueRep = i === firstIdxOfProvider;
          const dim = view === "unique" && !isUniqueRep;
          const color = providerColors[p.provider];
          return (
            <g
              key={i}
              transform={`translate(${p.x}, ${p.y})`}
              opacity={dim ? 0.32 : 1}
              style={{ transition:"opacity .6s" }}
            >
              {!dim && (
                <circle r="14" fill={color} opacity=".5" className="pulse-ring" style={{ animationDelay:`${i*0.15}s` }} />
              )}
              <path d="M 0 -18 C -10 -18, -13 -10, -13 -5 C -13 3, -2 13, 0 18 C 2 13, 13 3, 13 -5 C 13 -10, 10 -18, 0 -18 Z" fill={color} stroke="#fff" strokeWidth="1.5" />
              <circle cy="-6" r="4.5" fill="#fff" />
              {dim && <line x1="-13" y1="-13" x2="13" y2="13" stroke="#fff" strokeWidth="2" opacity=".85" />}
            </g>
          );
        })}

        {/* Lines from duplicate pins to unique rep in 'unique' view */}
        {view === "unique" && pins.map((p, i) => {
          const repIdx = pins.findIndex(q => q.provider === p.provider);
          if (i === repIdx) return null;
          const rep = pins[repIdx];
          return (
            <line key={`l${i}`}
              x1={p.x} y1={p.y} x2={rep.x} y2={rep.y}
              stroke={providerColors[p.provider]} strokeOpacity=".45"
              strokeWidth="1.2" strokeDasharray="2 4"
            />
          );
        })}

        {/* Mainland city dots */}
        <g>
          <circle cx="540" cy="780" r="4.5" fill="#fff" stroke="#444" strokeWidth="1.5" />
          <text x="550" y="784" fontSize="13" fontFamily="Source Serif 4" fontWeight="600" fill="#222">Mann's Harbor</text>

          <circle cx="280" cy="500" r="4" fill="#fff" stroke="#444" strokeWidth="1.5" />
          <text x="288" y="504" fontSize="12" fontFamily="Source Serif 4" fontWeight="500" fill="#222">Columbia</text>

          <circle cx="180" cy="280" r="4" fill="#fff" stroke="#444" strokeWidth="1.5" />
          <text x="188" y="284" fontSize="12" fontFamily="Source Serif 4" fontWeight="500" fill="#222">Edenton</text>

          <circle cx="80" cy="700" r="4" fill="#fff" stroke="#444" strokeWidth="1.5" />
          <text x="88" y="704" fontSize="12" fontFamily="Source Serif 4" fontWeight="500" fill="#222">Plymouth</text>
        </g>

        {/* Town labels along strip */}
        <g fontFamily="Source Serif 4" fontSize="13" fontWeight="600" fill="#222">
          <text x="958" y="804">Manteo</text>
          <text x="1078" y="664">Nags Head</text>
          <text x="1170" y="524">Kill Devil Hills</text>
          <text x="1258" y="384">Kitty Hawk</text>
          <text x="1305" y="304">Southern Shores</text>
        </g>

        {/* Water labels */}
        <text x="380" y="430" fontSize="20" fontFamily="Source Serif 4" fontStyle="italic" fill="#3a6a82" opacity=".55">Albemarle Sound</text>
        <text x="700" y="950" fontSize="16" fontFamily="Source Serif 4" fontStyle="italic" fill="#3a6a82" opacity=".55">Pamlico Sound</text>
        <text x="1540" y="500" fontSize="22" fontFamily="Source Serif 4" fontStyle="italic" fill="#fff" opacity=".7" textAnchor="end">Atlantic Ocean</text>

        {/* County labels */}
        <text x="180" y="950" fontSize="10" fontFamily="JetBrains Mono" fill="#666" letterSpacing="2" opacity=".75">TYRRELL CO.</text>
        <text x="500" y="900" fontSize="10" fontFamily="JetBrains Mono" fill="#666" letterSpacing="2" opacity=".75">DARE CO.</text>

        {/* Bridge callout */}
        <g transform="translate(670, 820)">
          <rect x="0" y="0" width="160" height="38" rx="6" fill="rgba(255,255,255,.95)" stroke="var(--rust)" strokeWidth="1.2" />
          <text x="10" y="14" fontSize="9" fontFamily="JetBrains Mono" letterSpacing="2" fill="var(--rust-deep)">SOLE CAUSEWAY</text>
          <text x="10" y="29" fontSize="11" fontWeight="700" fontFamily="Source Serif 4" fill="#222">Only way on or off</text>
        </g>

        {/* Compass + scale */}
        <g transform="translate(60, 60)">
          <circle r="22" fill="rgba(255,255,255,.85)" stroke="#444" strokeWidth=".8" />
          <path d="M 0 -14 L 5 6 L 0 3 L -5 6 Z" fill="#222" />
          <text x="0" y="32" fontSize="9" fontFamily="JetBrains Mono" letterSpacing="2" fill="#222" textAnchor="middle">N</text>
        </g>
        <g transform="translate(1450, 920)">
          <rect x="-10" y="-22" width="130" height="40" rx="4" fill="rgba(255,255,255,.85)" stroke="#444" strokeWidth=".8" />
          <line x1="0" y1="0" x2="100" y2="0" stroke="#222" strokeWidth="2" />
          <line x1="0" y1="-4" x2="0" y2="4" stroke="#222" strokeWidth="2" />
          <line x1="50" y1="-3" x2="50" y2="3" stroke="#222" strokeWidth="1.2" />
          <line x1="100" y1="-4" x2="100" y2="4" stroke="#222" strokeWidth="2" />
          <text x="50" y="-8" fontSize="9" fontFamily="JetBrains Mono" fill="#222" textAnchor="middle" letterSpacing="1.5">15 MI</text>
          <text x="50" y="14" fontSize="8" fontFamily="JetBrains Mono" fill="#666" textAnchor="middle" letterSpacing="1.5">25 KM</text>
        </g>
      </svg>

      {/* Provider count overlay */}
      <div
        style={{
          position:"absolute", top:14, right:14,
          background:"rgba(255,255,255,.95)", backdropFilter:"blur(8px)",
          color:"#222", padding:"14px 16px", borderRadius:10,
          border:"1px solid rgba(0,0,0,.15)", minWidth:210,
          fontSize:11, transition:"all .4s",
          boxShadow:"0 6px 20px rgba(0,0,0,.18)"
        }}
      >
        <div style={{ fontSize:9, letterSpacing:2.2, textTransform:"uppercase", color:"#666", marginBottom:6, fontWeight:600 }}>
          {view === "listings" ? "Carrier-reported" : "After deduplication"}
        </div>
        <div style={{ display:"flex", justifyContent:"space-between", alignItems:"baseline", marginBottom:8 }}>
          <span style={{ fontFamily:"Source Serif 4", fontSize:42, fontWeight:500, lineHeight:1, color: view === "listings" ? "#222" : "var(--rust-deep)" }}>
            {view === "listings" ? "8" : "2"}
          </span>
          <span style={{ fontSize:11, color:"#444" }}>
            {view === "listings" ? "listings" : "unique"}
          </span>
        </div>
        <div style={{ borderTop:"1px solid rgba(0,0,0,.12)", paddingTop:7, fontSize:11.5, lineHeight:1.42, color:"#333" }}>
          {view === "listings"
            ? <>Each access point looks like a separate provider option.</>
            : <>The same dentist listed at multiple offices. <strong style={{ color:"var(--rust-deep)" }}>Real choice: 2.</strong></>
          }
        </div>
      </div>

      <div className="corner tl" style={{ background:"rgba(255,255,255,.85)", color:"#222", borderColor:"#666" }}>
        Outer Banks · Dare Co.<br/>
        <span style={{ color:"#666" }}>35.95°N · 75.66°W</span>
      </div>
      <div className="corner tr" style={{ background:"rgba(255,255,255,.85)", color:"#222", borderColor:"#666" }}>
        Mode · <span style={{ color:"var(--rust-deep)", fontWeight:600 }}>{view === "listings" ? "Listings" : "Unique providers"}</span>
      </div>

      <div className="narr-card" key={`i-${view}-${step}`}>
        <div className="narr-step">{step+1}</div>
        <div className="narr-body">
          <div className="narr-eyebrow">{narration[step].eyebrow}</div>
          <div className="narr-text">{narration[step].text}</div>
          <div className="narr-progress">
            {narration.map((_, i) => <div key={i} className={"narr-dot" + (i <= step ? " on" : "")}></div>)}
          </div>
        </div>
      </div>
    </div>
  );
};

window.IslandMap = IslandMap;