// backlot-map.jsx - Stylized US map with sourcing-network dots

const MAP_NODES = [
  // [x, y, city, count] — coords in 0..1000, 0..600 viewBox
  [180, 240, "Seattle, WA", 14],
  [165, 320, "Portland, OR", 9],
  [120, 410, "San Francisco, CA", 22],
  [155, 470, "Los Angeles, CA", 31],
  [205, 480, "Phoenix, AZ", 11],
  [260, 360, "Salt Lake City, UT", 6],
  [290, 425, "Denver, CO", 18],
  [310, 510, "Albuquerque, NM", 5],
  [415, 510, "Dallas, TX", 26],
  [445, 540, "Houston, TX", 17],
  [490, 460, "New Orleans, LA", 8],
  [360, 380, "Kansas City, MO", 12],
  [430, 340, "Chicago, IL", 24],
  [490, 320, "Detroit, MI", 19],
  [540, 380, "Cincinnati, OH", 10],
  [560, 430, "Nashville, TN", 13],
  [625, 410, "Atlanta, GA", 28],
  [685, 470, "Jacksonville, FL", 11],
  [700, 510, "Miami, FL", 16],
  [620, 350, "Charlotte, NC", 14],
  [665, 320, "Richmond, VA", 9],
  [700, 280, "Philadelphia, PA", 21],
  [720, 260, "New York, NY", 33],
  [730, 230, "Boston, MA", 15],
];

// Highly simplified US silhouette (single path, low-fi but recognizable)
const US_PATH = "M105,415 L98,400 L100,370 L115,355 L130,360 L138,330 L150,310 L142,290 L155,270 L175,255 L195,245 L218,245 L240,255 L258,250 L275,260 L290,250 L310,235 L335,225 L362,222 L385,228 L420,232 L455,230 L495,225 L540,220 L585,215 L625,220 L660,228 L695,238 L720,250 L735,265 L745,280 L740,300 L730,318 L712,330 L705,345 L715,360 L720,380 L712,402 L705,425 L702,455 L710,475 L702,495 L685,505 L668,510 L648,508 L625,500 L600,485 L580,475 L555,470 L530,465 L505,470 L478,478 L455,488 L432,495 L408,498 L385,502 L365,510 L348,520 L325,528 L305,530 L285,525 L268,512 L252,495 L235,478 L218,460 L200,450 L182,448 L165,455 L148,460 L132,455 L118,445 L108,432 Z";

function NetworkMap({ count = 423 }) {
  const [active, setActive] = React.useState(null);
  return (
    <div style={{position:"relative"}}>
      <svg viewBox="0 0 800 560" style={{width:"100%", height:"auto", display:"block"}}>
        <defs>
          <radialGradient id="dotGlow" cx="50%" cy="50%" r="50%">
            <stop offset="0%" stopColor="#EB0A1E" stopOpacity="0.5"/>
            <stop offset="100%" stopColor="#EB0A1E" stopOpacity="0"/>
          </radialGradient>
          <pattern id="grid" x="0" y="0" width="40" height="40" patternUnits="userSpaceOnUse">
            <path d="M40 0H0V40" fill="none" stroke="rgba(255,255,255,.03)" strokeWidth="1"/>
          </pattern>
        </defs>

        <rect width="800" height="560" fill="url(#grid)"/>

        {/* Coordinate ticks (industrial look) */}
        {[100, 200, 300, 400, 500, 600, 700].map(x => (
          <g key={"tx"+x}>
            <line x1={x} y1="10" x2={x} y2="18" stroke="rgba(255,255,255,.15)" strokeWidth="1"/>
            <text x={x} y="32" fill="rgba(255,255,255,.25)" fontSize="9" fontFamily="JetBrains Mono" textAnchor="middle">{x}</text>
          </g>
        ))}

        {/* US silhouette */}
        <path d={US_PATH}
          fill="rgba(235,10,30,0.03)"
          stroke="rgba(255,255,255,0.18)"
          strokeWidth="1"
          strokeDasharray="3 3"
        />

        {/* Connection lines from a central hub */}
        {MAP_NODES.map((n, i) => {
          const [x, y] = n;
          return (
            <line key={"l"+i} x1="420" y1="380" x2={x} y2={y}
              stroke="rgba(235,10,30,0.08)" strokeWidth="0.6"/>
          );
        })}

        {/* Dots */}
        {MAP_NODES.map((n, i) => {
          const [x, y, city, c] = n;
          const r = 2 + Math.min(c, 35) / 10;
          return (
            <g key={"d"+i} style={{cursor:"pointer"}}
              onMouseEnter={() => setActive(i)} onMouseLeave={() => setActive(null)}>
              {active === i && <circle cx={x} cy={y} r={r*4} fill="url(#dotGlow)"/>}
              <circle cx={x} cy={y} r={r+3} fill="#EB0A1E" opacity="0.18"
                className={i % 3 === 0 ? "map-pulse" : ""}
                style={{animationDelay: `${(i * 0.18) % 2.8}s`}}/>
              <circle cx={x} cy={y} r={r} fill="#EB0A1E"/>
              <circle cx={x} cy={y} r={r-1} fill="#FF4A5A" opacity="0.9"/>
            </g>
          );
        })}

        {/* Hover label */}
        {active !== null && (() => {
          const [x, y, city, c] = MAP_NODES[active];
          const right = x > 600;
          return (
            <g pointerEvents="none">
              <line x1={x} y1={y} x2={right ? x-40 : x+40} y2={y-30} stroke="rgba(235,10,30,0.6)" strokeWidth="0.8"/>
              <g transform={`translate(${right ? x-180 : x+45}, ${y-50})`}>
                <rect width="160" height="40" fill="#0c0c0e" stroke="rgba(235,10,30,0.6)"/>
                <text x="10" y="17" fill="#F5F5F2" fontSize="11" fontFamily="JetBrains Mono" fontWeight="600">{city}</text>
                <text x="10" y="31" fill="#8A8A85" fontSize="10" fontFamily="JetBrains Mono">{c} dealer nodes</text>
              </g>
            </g>
          );
        })()}

        {/* Cross-hair marker for "you" */}
        <g transform="translate(420, 380)">
          <circle r="10" fill="none" stroke="#F5F5F2" strokeWidth="1"/>
          <line x1="-14" y1="0" x2="-6" y2="0" stroke="#F5F5F2" strokeWidth="1"/>
          <line x1="6" y1="0" x2="14" y2="0" stroke="#F5F5F2" strokeWidth="1"/>
          <line x1="0" y1="-14" x2="0" y2="-6" stroke="#F5F5F2" strokeWidth="1"/>
          <line x1="0" y1="6" x2="0" y2="14" stroke="#F5F5F2" strokeWidth="1"/>
          <text x="14" y="-12" fill="#F5F5F2" fontSize="10" fontFamily="JetBrains Mono" fontWeight="600">YOUR SHOP</text>
        </g>

        {/* Legend */}
        <g transform="translate(30, 500)">
          <text fill="rgba(255,255,255,.5)" fontSize="9" fontFamily="JetBrains Mono" letterSpacing="2">NETWORK COVERAGE / LIVE</text>
          <circle cx="6" cy="22" r="4" fill="#EB0A1E"/>
          <text x="18" y="26" fill="#C7C7C2" fontSize="10" fontFamily="JetBrains Mono">{count} dealer sourcing nodes · 48 states</text>
        </g>
      </svg>
    </div>
  );
}

window.NetworkMap = NetworkMap;