/* Homepage — Ports section: animated dotted world map with drybulk ships + 200+ ports coverage */
function Ports() {
  const vw = useVW();
  const isMobile = vw <= 640;
  const W = 1000, H = 480, LAT_TOP = 80, LAT_BOT = -58;
  const px = (lon) => ((lon + 180) / 360) * W;
  const py = (lat) => ((LAT_TOP - lat) / (LAT_TOP - LAT_BOT)) * H;
  const land = [
    [-100, 49, 33, 19], [-117, 39, 12, 13], [-88, 31, 15, 11], [-84, 17, 10, 8], [-148, 62, 13, 9], [-122, 55, 9, 9],
    [-42, 72, 13, 9], [-60, -10, 16, 22], [-66, -36, 8, 12], [-72, 4, 9, 8], [-49, -18, 9, 12],
    [12, 50, 19, 11], [24, 61, 13, 9], [-3, 54, 5, 7], [18, 7, 21, 18], [24, -16, 16, 16], [45, 9, 7, 8],
    [47, 27, 13, 12], [78, 30, 22, 14], [80, 21, 9, 11], [97, 52, 48, 19], [108, 33, 17, 13], [120, 47, 12, 10],
    [116, 2, 13, 6], [124, 11, 5, 6], [138, 37, 5, 8], [105, 14, 9, 9], [134, -25, 18, 12], [173, -42, 4, 6],
  ];
  const isLand = (lon, lat) => land.some(([a, b, rx, ry]) => ((lon - a) * (lon - a)) / (rx * rx) + ((lat - b) * (lat - b)) / (ry * ry) <= 1);
  const dots = React.useMemo(() => { const o = []; for (let lat = LAT_TOP; lat >= LAT_BOT; lat -= 3.3) { for (let lon = -180; lon <= 180; lon += 3.3) { if (isLand(lon, lat)) o.push([px(lon), py(lat)]); } } return o; }, []);
  const P = {
    Houston: [-95, 29.7], LA: [-118, 33.7], Santos: [-46, -24], Rotterdam: [4.5, 51.9], Gibraltar: [-5, 36],
    Suez: [32.5, 30], Fujairah: [56, 25], Singapore: [104, 1.3], Shanghai: [121, 31], Durban: [31, -29.8],
  };
  const labels = [['Houston', 'r'], ['Rotterdam', 'l'], ['Fujairah', 'l'], ['Singapore', 'l'], ['Shanghai', 'r'], ['Santos', 'r']];
  const lane = (a, b, lift) => { const [x1, y1] = [px(a[0]), py(a[1])], [x2, y2] = [px(b[0]), py(b[1])]; return `M ${x1.toFixed(1)} ${y1.toFixed(1)} Q ${((x1 + x2) / 2).toFixed(1)} ${((y1 + y2) / 2 - lift).toFixed(1)} ${x2.toFixed(1)} ${y2.toFixed(1)}`; };
  const lanes = [
    { d: lane(P.Rotterdam, P.Gibraltar, 24), dur: 12 }, { d: lane(P.Gibraltar, P.Suez, 16), dur: 11 },
    { d: lane(P.Suez, P.Fujairah, 18), dur: 9 }, { d: lane(P.Fujairah, P.Singapore, 38), dur: 15 },
    { d: lane(P.Singapore, P.Shanghai, 28), dur: 12 }, { d: lane(P.Houston, P.Gibraltar, 64), dur: 19 },
    { d: lane(P.Santos, P.Durban, 56), dur: 17 }, { d: lane(P.Durban, P.Singapore, 76), dur: 20 },
  ];
  const reduce = typeof window !== 'undefined' && window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
  return (
    <section id="ports" style={{ maxWidth: 'var(--container-max)', margin: '0 auto', padding: isMobile ? '72px 20px 40px' : '112px 28px 56px' }}>
      <div style={{ maxWidth: 640, marginBottom: 44 }}>
        <div className="eyebrow" style={{ color: 'var(--blue-600)', marginBottom: 12 }}>Ports</div>
        <h2 style={{ fontSize: 'var(--text-h1)', fontWeight: 600, letterSpacing: 'var(--tracking-tight)', lineHeight: 1.1, marginBottom: 14 }}>One account, every port that matters</h2>
        <p style={{ fontSize: 'var(--text-lg)', color: 'var(--text-secondary)', lineHeight: 'var(--leading-normal)' }}>We sell and deliver marine fuel in <span style={{ color: 'var(--text-primary)', fontWeight: 600 }}>200+ ports</span> across every major bunkering hub — from Rotterdam to Singapore to Fujairah.</p>
      </div>
      <div style={{ position: 'relative', border: '1px solid var(--border-default)', borderRadius: 'var(--radius-2xl)', background: 'linear-gradient(180deg, var(--neutral-25), var(--neutral-50))', overflow: 'hidden', boxShadow: 'var(--shadow-sm)' }}>
        <svg viewBox={`0 0 ${W} ${H}`} style={{ width: '100%', height: 'auto', display: 'block' }} role="img" aria-label="Global port coverage with vessels in transit">
          <defs>
            <filter id="bm-pglow" x="-60%" y="-60%" width="220%" height="220%"><feGaussianBlur stdDeviation="2.4" result="b" /><feMerge><feMergeNode in="b" /><feMergeNode in="SourceGraphic" /></feMerge></filter>
          </defs>
          <g fill="var(--neutral-300)">{dots.map(([x, y], i) => <circle key={i} cx={x.toFixed(1)} cy={y.toFixed(1)} r="1.6" />)}</g>
          <g fill="none" stroke="var(--blue-400)" strokeWidth="1" strokeLinecap="round" opacity="0.5" strokeDasharray="0.5 5">
            {lanes.map((l, i) => <path key={i} id={`bm-plane-${i}`} d={l.d} />)}
          </g>
          {Object.values(P).map(([lon, lat], i) => (
            <g key={i}>
              {i % 2 === 0 && !reduce && <circle cx={px(lon)} cy={py(lat)} r="4" fill="var(--blue-400)" opacity="0.5"><animate attributeName="r" values="4;12;4" dur="2.8s" begin={`${(i % 5) * 0.4}s`} repeatCount="indefinite" /><animate attributeName="opacity" values="0.5;0;0.5" dur="2.8s" begin={`${(i % 5) * 0.4}s`} repeatCount="indefinite" /></circle>}
              <circle cx={px(lon)} cy={py(lat)} r={i % 2 === 0 ? 3.6 : 2.4} fill={i % 2 === 0 ? 'var(--blue-600)' : 'var(--neutral-400)'} stroke="#fff" strokeWidth="1.3" />
            </g>
          ))}
          {/* drybulk ships travelling the lanes */}
          {lanes.map((l, i) => (
            <g key={`s${i}`} filter="url(#bm-pglow)">
              <g>
                {!reduce && <animateMotion dur={`${l.dur}s`} repeatCount="indefinite" rotate="auto" begin={`${-(i * 1.6) % l.dur}s`}><mpath href={`#bm-plane-${i}`} /></animateMotion>}
                <path d="M -7 -2.6 L 4 -2.6 L 8 0 L 4 2.6 L -7 2.6 Z" fill="var(--neutral-800)" />
                <rect x="-3.5" y="-1.4" width="4.5" height="2.8" rx="0.6" fill="var(--blue-400)" />
              </g>
            </g>
          ))}
        </svg>
        <div style={{ position: 'absolute', inset: 0, pointerEvents: 'none' }}>
          {labels.map(([n, side]) => { const [lon, lat] = P[n]; return (
            <span key={n} style={{ position: 'absolute', left: `${(px(lon) / W) * 100}%`, top: `${(py(lat) / H) * 100}%`, transform: `translate(${side === 'l' ? '12px' : 'calc(-100% - 12px)'}, -50%)`, whiteSpace: 'nowrap', fontSize: 'var(--text-2xs)', fontWeight: 600, color: 'var(--text-secondary)', background: 'rgba(255,255,255,0.88)', border: '1px solid var(--border-subtle)', borderRadius: 'var(--radius-pill)', padding: '2px 9px', boxShadow: 'var(--shadow-xs)' }}>{n}</span>
          ); })}
        </div>
        <div style={{ position: 'absolute', left: isMobile ? 12 : 22, bottom: isMobile ? 12 : 20, display: 'flex', gap: isMobile ? 16 : 28, background: 'rgba(255,255,255,0.72)', backdropFilter: 'blur(8px)', WebkitBackdropFilter: 'blur(8px)', border: '1px solid var(--border-subtle)', borderRadius: 'var(--radius-lg)', padding: isMobile ? '10px 14px' : '14px 20px', boxShadow: 'var(--shadow-sm)' }}>
          {[['200+', 'ports'], ['90+', 'countries'], ['24/7', 'delivery']].map(([v, l]) => (
            <div key={l}><div className="tnum mono" style={{ fontSize: 'var(--text-h4)', fontWeight: 600, letterSpacing: '-0.02em' }}>{v}</div><div style={{ fontSize: 'var(--text-2xs)', color: 'var(--text-tertiary)' }}>{l}</div></div>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Ports });