// Hero image — photo base with analysis overlays
// Photo: media/hero.png (737 MAX over cityscape at dusk)
// Overlays: trajectory dots, parameter plot strip, data callouts,
// airspace sector arc, frame stamps — all low opacity so photo breathes.

function HeroImage() {
  // Aircraft nose position in photo (viewBox coords)
  const ACX = 960, ACY = 445;

  // Trajectory dots — gentle descending arc through the aircraft
  const trajectory = [];
  for (let i = -18; i <= 14; i++) {
    const t = i / 18;
    const x = ACX + t * 820;
    const y = ACY + t * 140 - Math.abs(t) * 60;
    const past = i < 0;
    trajectory.push({ x, y, past, lead: Math.abs(i) });
  }

  return (
    <svg viewBox="0 0 1920 1080" preserveAspectRatio="xMidYMid slice"
         style={{ position: 'absolute', inset: 0, width: '100%', height: '100%' }}>
      <defs>
        {/* Left-side fade — keeps headline legible over airframe */}
        <linearGradient id="hi-left-fade" x1="0%" y1="0%" x2="100%" y2="0%">
          <stop offset="0%"  stopColor="#0B0E15" stopOpacity="0.75"/>
          <stop offset="30%" stopColor="#0B0E15" stopOpacity="0.45"/>
          <stop offset="60%" stopColor="#0B0E15" stopOpacity="0.1"/>
          <stop offset="100%" stopColor="#0B0E15" stopOpacity="0"/>
        </linearGradient>

        {/* Bottom fade — blends photo into page */}
        <linearGradient id="hi-bottom-fade" x1="0%" y1="0%" x2="0%" y2="100%">
          <stop offset="0%"  stopColor="#0B0E15" stopOpacity="0"/>
          <stop offset="70%" stopColor="#0B0E15" stopOpacity="0.3"/>
          <stop offset="100%" stopColor="#0B0E15" stopOpacity="0.95"/>
        </linearGradient>

        {/* Global dark wash — tones photo to match site palette */}
        <linearGradient id="hi-wash" x1="0%" y1="0%" x2="0%" y2="100%">
          <stop offset="0%" stopColor="#0B0E15" stopOpacity="0.18"/>
          <stop offset="100%" stopColor="#0B0E15" stopOpacity="0.35"/>
        </linearGradient>

        {/* Waypoint glow */}
        <radialGradient id="hi-wpt-glow" cx="50%" cy="50%" r="50%">
          <stop offset="0%"  stopColor="oklch(0.82 0.1 75)" stopOpacity="0.55"/>
          <stop offset="100%" stopColor="oklch(0.82 0.1 75)" stopOpacity="0"/>
        </radialGradient>

        {/* Cinematic grain */}
        <filter id="hi-grain" x="0" y="0" width="100%" height="100%">
          <feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="2" seed="4"/>
          <feColorMatrix values="0 0 0 0 0.92
                                 0 0 0 0 0.90
                                 0 0 0 0 0.85
                                 0 0 0 0.04 0"/>
        </filter>
      </defs>

      {/* --- BASE PHOTO --- */}
      <image href="media/hero.png" x="0" y="0" width="1920" height="1080"
             preserveAspectRatio="xMidYMid slice"/>

      {/* Photo tone-down */}
      <rect width="1920" height="1080" fill="url(#hi-wash)"/>

      {/* --- OVERLAYS --- */}

      {/* Airspace sector arc — upper right corner over sky */}
      <g transform="translate(1620 240)" opacity="0.5">
        <circle r="340" fill="none" stroke="rgba(232,230,225,0.1)" strokeWidth="0.5"/>
        <circle r="240" fill="none" stroke="rgba(232,230,225,0.14)" strokeWidth="0.5" strokeDasharray="1 5"/>
        <circle r="150" fill="none" stroke="rgba(232,230,225,0.16)" strokeWidth="0.5"/>
        {[0, 30, 60, 90, 120, 150, 180, 210, 240, 270, 300, 330].map(deg => {
          const rad = (deg - 90) * Math.PI / 180;
          return (
            <line key={deg} x1="0" y1="0"
                  x2={Math.cos(rad) * 340} y2={Math.sin(rad) * 340}
                  stroke="rgba(232,230,225,0.06)" strokeWidth="0.4"/>
          );
        })}
        {[0, 90, 180, 270].map(deg => {
          const rad = (deg - 90) * Math.PI / 180;
          return (
            <text key={deg}
                  x={Math.cos(rad) * 358} y={Math.sin(rad) * 358 + 3}
                  textAnchor="middle" fontFamily="JetBrains Mono" fontSize="9"
                  fill="rgba(232,230,225,0.4)" letterSpacing="0.1em">
              {String(deg).padStart(3, '0')}°
            </text>
          );
        })}
      </g>



      {/* Bottom-left file stamp */}
      <g fontFamily="JetBrains Mono, monospace" fontSize="9"
         fill="rgba(232,230,225,0.45)" letterSpacing="0.14em">
        <text x="60" y="1022">RECON · PLATE 01 / XII</text>
        <text x="60" y="1042">FRAME 00·14:32:08·512</text>
      </g>

      {/* Left fade — protects headline area */}
      <rect width="1920" height="1080" fill="url(#hi-left-fade)"/>
      {/* Bottom fade */}
      <rect width="1920" height="1080" fill="url(#hi-bottom-fade)"/>

      {/* Cinematic grain pass */}
      <rect width="1920" height="1080" fill="transparent" filter="url(#hi-grain)" opacity="0.25"/>
    </svg>
  );
}

Object.assign(window, { HeroImage });