// Google Maps-style terrain view of Western NC.
// Zoomed out: shows Asheville, Cherokee, Sylva, Cullowhee, Franklin, Highlands etc.
// Terrain shading via hillshade-style overlays. Animated route between Cullowhee and Franklin.

const { useState: _useStateM, useEffect: _useEffectM } = React;

const MountainMap = ({ view = "real" }) => {
  const [step, setStep] = _useStateM(0);

  const narration = view === "straight"
    ? [
        { eyebrow:"Step 1", text:<>The carrier exhibit reports Sylvia is <strong>14.5 miles</strong> from her endodontist.</> },
        { eyebrow:"Step 2", text:<>That number is a <strong>straight line</strong> drawn across the map — a ruler, not a road.</> },
        { eyebrow:"Step 3", text:<>The line cuts directly across the <strong>Plott Balsams and Cowee Range.</strong> No road follows it.</> },
      ]
    : [
        { eyebrow:"Step 1", text:<>Sylvia leaves Cullowhee for the nearest in-network endodontist in Franklin.</> },
        { eyebrow:"Step 2", text:<>The drive follows <strong>NC-107 to US-23/US-441</strong>, around the Cowee range and through Sylva.</> },
        { eyebrow:"Step 3", text:<>By the odometer it is <strong>23 miles · about 45 minutes.</strong> That is real-world access.</> },
      ];

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

  // Locations on a 1600x1000 viewBox covering ~80mi x 50mi of WNC.
  // Towns:
  const towns = [
    { x: 380,  y: 700, name:"Franklin",   pop:"4k",  big:true,  isDentist:true  },
    { x: 1180, y: 540, name:"Cullowhee",  pop:"6k",  big:true,  isPatient:true },
    { x: 1080, y: 420, name:"Sylva",      pop:"3k",  big:true  },
    { x: 1380, y: 720, name:"Cashiers",   pop:"2k"   },
    { x: 580,  y: 880, name:"Highlands",  pop:"1k"   },
    { x: 240,  y: 880, name:"Hayesville", pop:"3k"   },
    { x: 100,  y: 540, name:"Murphy",     pop:"2k"   },
    { x: 820,  y: 240, name:"Cherokee",   pop:"2k", big:true   },
    { x: 1480, y: 220, name:"Asheville",  pop:"95k", big:true  },
    { x: 1380, y: 320, name:"Waynesville", pop:"10k" },
  ];

  const patient = towns.find(t=>t.isPatient);
  const dentist = towns.find(t=>t.isDentist);

  // Driving route — winds through Sylva
  const drivingPath = `
    M ${patient.x} ${patient.y}
    C 1140 500, 1110 460, 1080 420
    S 980 380, 920 420
    S 820 480, 740 500
    S 640 560, 580 600
    S 500 660, 440 680
    L ${dentist.x} ${dentist.y}
  `;
  const straightPath = `M ${patient.x} ${patient.y} L ${dentist.x} ${dentist.y}`;

  return (
    <div className="map-card" style={{ background:"#e8e2d0" }}>
      <svg viewBox="0 0 1600 1000" preserveAspectRatio="xMidYMid slice">
        <defs>
          <linearGradient id="terr-base" x1="0" x2="0" y1="0" y2="1">
            <stop offset="0%" stopColor="#d8e0c4" />
            <stop offset="100%" stopColor="#bfc8a8" />
          </linearGradient>
          <radialGradient id="hilite" cx="30%" cy="20%">
            <stop offset="0%" stopColor="#fff7d8" stopOpacity=".5" />
            <stop offset="100%" stopColor="#fff7d8" stopOpacity="0" />
          </radialGradient>
          <filter id="soft-blur"><feGaussianBlur stdDeviation="3" /></filter>
          <filter id="soft-blur-large"><feGaussianBlur stdDeviation="9" /></filter>
        </defs>

        {/* Base land — Google Maps terrain green */}
        <rect width="1600" height="1000" fill="url(#terr-base)" />

        {/* Forested areas - mid green */}
        <g opacity=".7">
          <path d="M 0 0 L 1600 0 L 1600 380 Q 1300 400 1100 380 Q 900 360 700 400 Q 500 420 300 380 Q 100 360 0 380 Z" fill="#a8b88a" />
          <path d="M 0 700 Q 200 720 400 740 Q 600 760 800 740 Q 1000 720 1200 740 Q 1400 760 1600 740 L 1600 1000 L 0 1000 Z" fill="#a8b88a" />
          <ellipse cx="700" cy="500" rx="280" ry="120" fill="#9aab7c" filter="url(#soft-blur-large)" />
        </g>

        {/* Hillshade — dark side of ridges */}
        <g opacity=".5">
          {/* Plott Balsams (NE area) */}
          <ellipse cx="1100" cy="280" rx="220" ry="90" fill="#6f7d5c" filter="url(#soft-blur)" transform="rotate(-15 1100 280)" />
          <ellipse cx="1100" cy="295" rx="180" ry="60" fill="#5a6849" filter="url(#soft-blur)" transform="rotate(-15 1100 280)" />
          {/* Cowee Mtns (central) */}
          <ellipse cx="700" cy="500" rx="280" ry="80" fill="#6f7d5c" filter="url(#soft-blur)" transform="rotate(-8 700 500)" />
          <ellipse cx="700" cy="515" rx="220" ry="48" fill="#566546" filter="url(#soft-blur)" transform="rotate(-8 700 500)" />
          {/* Nantahala (SW) */}
          <ellipse cx="350" cy="780" rx="260" ry="80" fill="#6f7d5c" filter="url(#soft-blur)" transform="rotate(8 350 780)" />
          <ellipse cx="350" cy="795" rx="200" ry="50" fill="#566546" filter="url(#soft-blur)" transform="rotate(8 350 780)" />
          {/* Smokies edge (N) */}
          <ellipse cx="900" cy="160" rx="380" ry="100" fill="#6f7d5c" filter="url(#soft-blur)" transform="rotate(-3 900 160)" />
          <ellipse cx="900" cy="170" rx="280" ry="60" fill="#566546" filter="url(#soft-blur)" />
        </g>

        {/* Light side of ridges (sun-facing — north-west) */}
        <g opacity=".55">
          <ellipse cx="1090" cy="265" rx="210" ry="70" fill="#d4dcb8" filter="url(#soft-blur)" transform="rotate(-15 1090 265)" />
          <ellipse cx="690" cy="485" rx="270" ry="60" fill="#d4dcb8" filter="url(#soft-blur)" transform="rotate(-8 690 485)" />
          <ellipse cx="340" cy="765" rx="250" ry="60" fill="#d4dcb8" filter="url(#soft-blur)" transform="rotate(8 340 765)" />
        </g>

        {/* Contour shimmer — very faint */}
        <g fill="none" stroke="#7a8a64" strokeOpacity=".22" strokeWidth=".7">
          {[...Array(10)].map((_, i) => {
            const off = i * 12;
            return (
              <path
                key={i}
                d={`M 800 500
                    m -${280-off} ${Math.sin(i)*4}
                    a ${280-off} ${80-off*0.2} 0 1 0 ${(280-off)*2} 0
                    a ${280-off} ${80-off*0.2} 0 1 0 -${(280-off)*2} 0`}
                transform="rotate(-8 700 500)"
              />
            );
          })}
        </g>

        {/* Rivers — Tuckasegee and Little Tennessee */}
        <g>
          <path
            d="M 1500 560 Q 1300 580 1100 580 Q 900 580 700 600 Q 500 620 300 640 Q 200 650 100 660"
            fill="none" stroke="#8db8d4" strokeWidth="6" strokeLinecap="round" opacity=".95"
          />
          <path
            d="M 1500 560 Q 1300 580 1100 580 Q 900 580 700 600 Q 500 620 300 640 Q 200 650 100 660"
            fill="none" stroke="#a8c8e0" strokeWidth="2.5" strokeLinecap="round"
            style={{ animation:"shimmer 4s ease-in-out infinite" }}
          />
          {/* Lake Fontana suggestion */}
          <ellipse cx="380" cy="820" rx="60" ry="20" fill="#8db8d4" opacity=".85" />
          <ellipse cx="380" cy="820" rx="40" ry="12" fill="#a8c8e0" opacity=".7" />
        </g>

        {/* Road network — secondary roads in white */}
        <g fill="none" stroke="#fff" strokeOpacity=".75" strokeWidth="2.2" strokeLinecap="round">
          {/* Blue Ridge Parkway */}
          <path d="M 1480 100 Q 1200 200 1000 280 Q 800 320 600 360 Q 400 400 200 480" strokeWidth="2.8" />
          {/* US-19 */}
          <path d="M 80 540 Q 280 520 480 540 Q 680 560 880 540 Q 1080 520 1280 540 Q 1380 545 1480 540" />
          {/* NC-28 / US-64 */}
          <path d="M 100 400 Q 300 440 500 460 Q 700 480 900 480" />
          {/* Smaller crosshatch */}
          <path d="M 1080 420 Q 1180 600 1280 800" />
          <path d="M 580 880 Q 700 800 820 700 Q 920 620 1000 540" />
          <path d="M 240 880 Q 380 760 500 700" />
        </g>
        {/* Road casing */}
        <g fill="none" stroke="#000" strokeOpacity=".15" strokeWidth="3.4" strokeLinecap="round">
          <path d="M 1480 100 Q 1200 200 1000 280 Q 800 320 600 360 Q 400 400 200 480" />
          <path d="M 80 540 Q 280 520 480 540 Q 680 560 880 540 Q 1080 520 1280 540 Q 1380 545 1480 540" />
        </g>

        {/* National park boundary suggestion (dashed) */}
        <path
          d="M 720 60 Q 900 80 1080 100 Q 1200 110 1320 90"
          fill="none" stroke="#7a4d2a" strokeWidth="1.5" strokeDasharray="6 5" opacity=".55"
        />
        <text x="900" y="50" fontSize="11" fontFamily="Source Serif 4" fontStyle="italic" fill="#7a4d2a" opacity=".7" textAnchor="middle">Great Smoky Mountains National Park</text>

        {/* Subtle warm light */}
        <rect width="1600" height="1000" fill="url(#hilite)" pointerEvents="none" />

        {/* === ROUTES === */}
        {/* Straight line */}
        <path
          key={`s-${view}`}
          d={straightPath}
          fill="none"
          stroke="#222"
          strokeWidth="2.5"
          strokeDasharray="9 7"
          opacity={view === "straight" ? .95 : .25}
          style={{ transition:"opacity .5s" }}
        />
        {view === "straight" && [0.3, 0.5, 0.7].map((t, i) => {
          const x = patient.x + (dentist.x - patient.x) * t;
          const y = patient.y + (dentist.y - patient.y) * t;
          return (
            <g key={i}>
              <circle cx={x} cy={y} r="9" fill="rgba(192,86,59,.0)" stroke="var(--rust)" strokeWidth="1.5"
                style={{ animation:`pulse 2s ease-out ${i*0.3}s infinite`, transformOrigin:`${x}px ${y}px` }}
              />
              <circle cx={x} cy={y} r="3" fill="var(--rust)" />
            </g>
          );
        })}
        {view === "straight" && (
          <g transform={`translate(${(patient.x+dentist.x)/2 - 70}, ${(patient.y+dentist.y)/2 - 50})`}>
            <rect x="0" y="0" width="180" height="42" rx="5" fill="#fff" stroke="#222" strokeWidth="1.2" />
            <text x="12" y="16" fontSize="9" fontFamily="JetBrains Mono" letterSpacing="2" fill="#666">AS REPORTED</text>
            <text x="12" y="33" fontSize="14" fontWeight="700" fontFamily="Source Serif 4" fill="#222">14.5 mi · straight</text>
          </g>
        )}

        {/* Driving route */}
        <path
          d={drivingPath} fill="none" stroke="#000" strokeWidth="9" strokeLinecap="round" strokeOpacity=".25"
          opacity={view === "real" ? 1 : 0.15}
          style={{ transition:"opacity .5s" }}
        />
        <path
          d={drivingPath} fill="none" stroke="#fff" strokeWidth="6.5" strokeLinecap="round"
          opacity={view === "real" ? 1 : 0.12}
          style={{ transition:"opacity .5s" }}
        />
        <path
          key={`d-${view}`}
          d={drivingPath} fill="none" stroke="var(--rust)" strokeWidth="3.5" strokeLinecap="round"
          strokeDasharray="2200"
          style={{
            opacity: view === "real" ? 1 : 0.15,
            transition:"opacity .5s",
            ...(view === "real" ? { animation:"drawPath 2.4s ease-out forwards", strokeDashoffset:"2200" } : {})
          }}
        />
        {view === "real" && (
          <>
            {/* Highway shield US-23 */}
            <g transform="translate(900, 510)">
              <rect x="-22" y="-15" width="44" 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="13" fontWeight="800" fontFamily="JetBrains Mono" fill="#222">23</text>
            </g>
            <g transform={`translate(${(patient.x+dentist.x)/2 + 30}, ${(patient.y+dentist.y)/2 + 70})`}>
              <rect x="0" y="0" width="200" height="42" rx="5" fill="#fff" stroke="var(--rust)" strokeWidth="1.5" />
              <text x="12" y="16" fontSize="9" fontFamily="JetBrains Mono" letterSpacing="2" fill="var(--rust-deep)">ACTUAL DRIVE</text>
              <text x="12" y="33" fontSize="14" fontWeight="700" fontFamily="Source Serif 4" fill="#222">23 mi · 45 min</text>
            </g>
          </>
        )}

        {/* === Town markers === */}
        {towns.map((t, i) => {
          const isFocus = t.isPatient || t.isDentist;
          if (isFocus) return null;
          return (
            <g key={i} transform={`translate(${t.x}, ${t.y})`}>
              <circle r={t.big ? 5 : 3.5} fill="#fff" stroke="#444" strokeWidth="1.5" />
              <text
                x="9" y="4"
                fontSize={t.big ? 13 : 11}
                fontFamily="Source Serif 4"
                fontWeight={t.big ? 600 : 500}
                fill="#222"
              >
                {t.name}
              </text>
            </g>
          );
        })}

        {/* Patient marker - gold */}
        <g transform={`translate(${patient.x}, ${patient.y})`}>
          <circle r="20" className="pulse-ring" fill="var(--gold)" opacity=".55" />
          <path d="M 0 -22 C -12 -22, -16 -12, -16 -6 C -16 4, -2 16, 0 22 C 2 16, 16 4, 16 -6 C 16 -12, 12 -22, 0 -22 Z" fill="var(--gold-deep)" stroke="#fff" strokeWidth="2" />
          <circle cy="-7" r="6" fill="#fff" />
        </g>

        {/* Dentist marker - rust */}
        <g transform={`translate(${dentist.x}, ${dentist.y})`}>
          <circle r="20" className="pulse-ring" fill="var(--rust)" opacity=".55" style={{ animationDelay:"1.2s" }} />
          <path d="M 0 -22 C -12 -22, -16 -12, -16 -6 C -16 4, -2 16, 0 22 C 2 16, 16 4, 16 -6 C 16 -12, 12 -22, 0 -22 Z" fill="var(--rust-deep)" stroke="#fff" strokeWidth="2" />
          <path d="M -5 -11 C -7 -13, -1 -15, 0 -11 C 1 -15, 7 -13, 5 -11 C 7 -7, 5 -1, 3 1 C 1 3, 0 -1, 0 -1 C 0 -1, -1 3, -3 1 C -5 -1, -7 -7, -5 -11 Z" fill="#fff" />
        </g>

        {/* Range labels */}
        <text x="1100" y="270" fontSize="13" fontFamily="Source Serif 4" fontStyle="italic" fill="#5a6849" textAnchor="middle" opacity=".85" letterSpacing=".5">Plott Balsams</text>
        <text x="700" y="495" fontSize="13" fontFamily="Source Serif 4" fontStyle="italic" fill="#5a6849" textAnchor="middle" opacity=".85" letterSpacing=".5">Cowee Mountains</text>
        <text x="350" y="775" fontSize="12" fontFamily="Source Serif 4" fontStyle="italic" fill="#5a6849" textAnchor="middle" opacity=".85" letterSpacing=".5">Nantahala N.F.</text>
        <text x="1380" y="595" fontSize="11" fontFamily="Source Serif 4" fontStyle="italic" fill="#4a8aa8" opacity=".75">Tuckasegee River</text>
        <text x="1480" y="170" fontSize="10" fontFamily="JetBrains Mono" fill="#666" letterSpacing="2" opacity=".75" textAnchor="end">BLUE RIDGE PKWY</text>

        {/* Border-state hint */}
        <text x="40" y="40" fontSize="11" fontFamily="JetBrains Mono" fill="#7a4d2a" letterSpacing="2" opacity=".7">N.C.</text>
        <text x="40" y="990" fontSize="11" fontFamily="JetBrains Mono" fill="#7a4d2a" letterSpacing="2" opacity=".7">↓ GA · SC</text>

        {/* Scale + compass */}
        <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">10 MI</text>
          <text x="50" y="14" fontSize="8" fontFamily="JetBrains Mono" fill="#666" textAnchor="middle" letterSpacing="1.5">15 KM</text>
        </g>
      </svg>

      {/* Town pin pops above SVG, anchored over the markers */}
      <div className="pin-pop gold" style={{ left: `${(patient.x/1600)*100}%`, top: `${(patient.y/1000)*100}%` }}>
        <span className="pop-eyebrow">Patient</span>
        Cullowhee · WCU
      </div>
      <div className="pin-pop rust" style={{ left: `${(dentist.x/1600)*100}%`, top: `${(dentist.y/1000)*100}%` }}>
        <span className="pop-eyebrow">Nearest in-network endodontist</span>
        Franklin, NC
      </div>

      <div className="corner tl" style={{ background:"rgba(255,255,255,.85)", color:"#222", borderColor:"#666" }}>
        Western North Carolina<br/>
        <span style={{ color:"#666" }}>Jackson · Macon · Swain Co.</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 === "straight" ? "Straight-line" : "Real-world drive"}</span><br/>
        <span style={{ color:"#666" }}>{view === "straight" ? "14.5 mi" : "23 mi · ~45 min"}</span>
      </div>

      <div className="narr-card" key={`m-${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.MountainMap = MountainMap;