// Stylized Poland-shape route map. Used in hero + logistics sections.
// Coordinates roughly map Polish cities onto an 800x720 viewBox.

const HUB = { x: 528, y: 336, name: 'Magazyn Gorilla Commerce', short: 'GC · Błonie' };

const CITIES = [
  { x: 60,  y: 200, name: 'Szczecin',  eta: '04:20' },
  { x: 360, y: 90,  name: 'Gdańsk',    eta: '03:40' },
  { x: 500, y: 150, name: 'Olsztyn',   eta: '02:10' },
  { x: 730, y: 220, name: 'Białystok', eta: '02:30' },
  { x: 230, y: 310, name: 'Poznań',    eta: '03:00' },
  { x: 320, y: 235, name: 'Bydgoszcz', eta: '02:20' },
  { x: 440, y: 380, name: 'Łódź',      eta: '01:10' },
  { x: 680, y: 455, name: 'Lublin',    eta: '02:00' },
  { x: 240, y: 460, name: 'Wrocław',   eta: '03:30' },
  { x: 400, y: 555, name: 'Katowice',  eta: '02:50' },
  { x: 472, y: 585, name: 'Kraków',    eta: '02:40' },
  { x: 640, y: 595, name: 'Rzeszów',   eta: '03:20' },
];

// Simplified Poland outline — coarse polygon for silhouette.
const PL_OUTLINE = "M 60 165 C 110 140, 180 110, 250 100 C 320 85, 400 90, 470 110 C 540 105, 620 110, 720 200 C 760 250, 765 320, 760 380 C 745 460, 700 530, 640 605 C 575 660, 480 670, 410 660 C 320 650, 230 600, 170 540 C 110 490, 60 420, 50 340 C 45 270, 50 215, 60 165 Z";

const PolandMap = ({ dark = false, animateTrucks = true, scale = 1 }) => {
  const [tick, setTick] = React.useState(0);
  React.useEffect(() => {
    if (!animateTrucks) return;
    const id = setInterval(() => setTick(t => t + 1), 60);
    return () => clearInterval(id);
  }, [animateTrucks]);

  const stroke = dark ? '#2e2e32' : '#e7e5e0';
  const text = dark ? '#9a948a' : '#6e6a62';
  const textStrong = dark ? '#f3efe8' : '#0e0e10';
  const fill = dark ? '#16161a' : '#fafaf7';

  return (
    <svg viewBox="0 0 800 720" style={{ width: '100%', height: 'auto', display: 'block' }}>
      <defs>
        <pattern id="dots" width="14" height="14" patternUnits="userSpaceOnUse">
          <circle cx="1" cy="1" r="0.8" fill={dark ? '#26262a' : '#dad7cf'} />
        </pattern>
      </defs>
      {/* Background */}
      <rect width="800" height="720" fill={dark ? '#0e0e10' : '#f8f6f1'} />
      <rect width="800" height="720" fill="url(#dots)" />

      {/* Poland outline */}
      <path d={PL_OUTLINE} fill={fill} stroke={stroke} strokeWidth="1.5" />

      {/* Routes from hub to cities */}
      {CITIES.map((c, i) => (
        <line key={`r${i}`} x1={HUB.x} y1={HUB.y} x2={c.x} y2={c.y}
          stroke={dark ? '#2a2a2e' : '#d8d5cc'} strokeWidth="1" strokeDasharray="3 4" />
      ))}

      {/* Animated trucks along a few routes */}
      {animateTrucks && CITIES.slice(0, 6).map((c, i) => {
        const t = ((tick + i * 30) % 200) / 200;
        const x = HUB.x + (c.x - HUB.x) * t;
        const y = HUB.y + (c.y - HUB.y) * t;
        return <circle key={`t${i}`} cx={x} cy={y} r="3" fill="#dd1a31" />;
      })}

      {/* City dots */}
      {CITIES.map((c, i) => (
        <g key={`c${i}`}>
          <circle cx={c.x} cy={c.y} r="4" fill={dark ? '#f3efe8' : '#0e0e10'} />
          <circle cx={c.x} cy={c.y} r="9" fill="none" stroke={dark ? '#26262a' : '#d8d5cc'} strokeWidth="1" />
          <text x={c.x + 14} y={c.y + 4} fontFamily="JetBrains Mono, monospace" fontSize="13" fill={textStrong} fontWeight="500">{c.name}</text>
          <text x={c.x + 14} y={c.y + 20} fontFamily="JetBrains Mono, monospace" fontSize="10" fill={text}>{c.eta} h</text>
        </g>
      ))}

      {/* Hub */}
      <g>
        <circle cx={HUB.x} cy={HUB.y} r="22" fill="none" stroke="#dd1a31" strokeWidth="1.2" opacity="0.4" />
        <circle cx={HUB.x} cy={HUB.y} r="14" fill="none" stroke="#dd1a31" strokeWidth="1.5" opacity="0.7" />
        <rect x={HUB.x - 8} y={HUB.y - 8} width="16" height="16" fill="#dd1a31" />
        <text x={HUB.x} y={HUB.y + 36} fontFamily="JetBrains Mono, monospace" fontSize="11" fill={textStrong} fontWeight="600" textAnchor="middle">{HUB.short}</text>
        <text x={HUB.x} y={HUB.y + 50} fontFamily="JetBrains Mono, monospace" fontSize="9" fill={text} textAnchor="middle">CENTRALNY HUB · 24 ha</text>
      </g>

      {/* Compass / legend */}
      <g transform="translate(40, 40)">
        <text fontFamily="JetBrains Mono, monospace" fontSize="10" fill={text} letterSpacing="2">SIEĆ DOSTAW · PL</text>
        <text y="16" fontFamily="JetBrains Mono, monospace" fontSize="10" fill={text}>12 miast · 48 h max</text>
      </g>
      <g transform="translate(640, 40)" textAnchor="end">
        <text fontFamily="JetBrains Mono, monospace" fontSize="10" fill={text} x="120">LIVE · 23.05.2026</text>
        <text y="16" fontFamily="JetBrains Mono, monospace" fontSize="10" fill="#dd1a31" x="120">● 14 ciężarówek w trasie</text>
      </g>
    </svg>
  );
};

window.PolandMap = PolandMap;