/* AlertFeed + Map — right rail */
function AlertFeed() {
  const alerts = [
    { type: 'err',  msg: 'South-9 offline', meta: 'Hornsea Two · pitch controller fault', time: '03:12' },
    { type: 'warn', msg: 'North-7 output below threshold', meta: '−18% vs forecast, past 2h', time: '04:48' },
    { type: 'info', msg: 'Forecast updated', meta: 'Next 6h · 94% confidence', time: '06:00' },
    { type: 'warn', msg: 'E-4 nacelle temperature elevated', meta: '62 °C · nominal <55 °C', time: '06:22' },
  ];
  const iconFor = {
    err:  <><path d="M10.3 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/><path d="M12 9v4"/><path d="M12 17h.01"/></>,
    warn: <><path d="M10.3 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/><path d="M12 9v4"/><path d="M12 17h.01"/></>,
    info: <><circle cx="12" cy="12" r="10"/><path d="M12 8v4M12 16h.01"/></>,
  };
  return (
    <div className="panel">
      <div className="panel-head">
        <div>
          <div className="p-title">Alerts</div>
          <div className="p-sub">Last 24 hours</div>
        </div>
        <span className="seg"><span className="on">Active</span><span>Resolved</span></span>
      </div>
      {alerts.map((a, i) => (
        <div key={i} className={`alert ${a.type}`}>
          <div className="icon"><svg viewBox="0 0 24 24">{iconFor[a.type]}</svg></div>
          <div className="body">
            {a.msg}
            <div className="meta">{a.meta}</div>
          </div>
          <div className="time">{a.time}</div>
        </div>
      ))}
    </div>
  );
}

function SiteMap() {
  const sites = [
    { id: 'dba', name: 'Dogger Bank A', x: 150, y: 70,  count: 72, status: 'ok' },
    { id: 'h2',  name: 'Hornsea Two',   x: 240, y: 130, count: 48, status: 'warn' },
    { id: 'mw',  name: 'Moray West',    x: 90,  y: 180, count: 22, status: 'ok' },
  ];
  const color = (s) => s === 'ok' ? '#1BB673' : s === 'warn' ? '#E8A13C' : '#E15B5B';
  return (
    <div className="panel" style={{ padding: 0, overflow: 'hidden' }}>
      <div className="panel-head" style={{ padding: '18px 20px 0' }}>
        <div>
          <div className="p-title">Sites</div>
          <div className="p-sub">3 sites · 142 turbines</div>
        </div>
      </div>
      <div className="map-wrap" style={{ margin: 16, marginTop: 12 }}>
        <svg className="map-svg" viewBox="0 0 320 220">
          {/* abstract coastline */}
          <path d="M0,180 Q60,160 80,170 T160,150 Q200,145 220,160 T300,155 L320,170 L320,220 L0,220 Z"
                fill="#A8CBEA" opacity="0.7"/>
          <path d="M0,190 Q60,175 90,185 T180,168 Q220,163 260,175 L320,180 L320,220 L0,220 Z"
                fill="#8FBADA" opacity="0.8"/>
          {/* connection lines */}
          <g stroke="#2F80ED" strokeWidth="1" strokeDasharray="3 3" fill="none" opacity="0.45">
            <line x1="150" y1="70" x2="240" y2="130"/>
            <line x1="150" y1="70" x2="90"  y2="180"/>
            <line x1="240" y1="130" x2="90" y2="180"/>
          </g>
          {sites.map(s => (
            <g key={s.id}>
              <circle className="site-dot" cx={s.x} cy={s.y} r="16" fill={color(s.status)} opacity="0.18"/>
              <circle cx={s.x} cy={s.y} r="7" fill={color(s.status)} stroke="#fff" strokeWidth="2"/>
              <text className="site-label" x={s.x + 12} y={s.y - 4}>{s.name}</text>
              <text x={s.x + 12} y={s.y + 10} fontSize="10" fontFamily="monospace" fill="#6B82A0">{s.count} turbines</text>
            </g>
          ))}
        </svg>
        <div className="map-legend">
          <span><i style={{ background: '#1BB673' }}/>Online</span>
          <span><i style={{ background: '#E8A13C' }}/>Degraded</span>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { AlertFeed, SiteMap });