// hero-visual.jsx
// Abstract industrial composition: brushed-metal orb + strategy-map rings +
// coordinate crosshairs + floating data tags. Built entirely in SVG.

function HeroVisual() {
  return (
    <div className="hv">
      <svg viewBox="0 0 720 720" width="100%" height="100%" aria-hidden="true"
           style={{ display: 'block', maxHeight: '92vh' }}>
        <defs>
          {/* Brushed-metal radial */}
          <radialGradient id="orb" cx="42%" cy="38%" r="65%">
            <stop offset="0%"  stopColor="#3a342c" />
            <stop offset="35%" stopColor="#1f1c17" />
            <stop offset="78%" stopColor="#0c0a07" />
            <stop offset="100%" stopColor="#050402" />
          </radialGradient>

          {/* Molten highlight on the orb */}
          <radialGradient id="orb-hi" cx="38%" cy="34%" r="20%">
            <stop offset="0%" stopColor="var(--accent-2)" stopOpacity=".55" />
            <stop offset="60%" stopColor="var(--accent)" stopOpacity=".12" />
            <stop offset="100%" stopColor="var(--accent)" stopOpacity="0" />
          </radialGradient>

          {/* Subtle rim light */}
          <radialGradient id="orb-rim" cx="50%" cy="50%" r="50%">
            <stop offset="92%" stopColor="rgba(244,240,234,0)" />
            <stop offset="99%" stopColor="rgba(244,240,234,.35)" />
            <stop offset="100%" stopColor="rgba(244,240,234,0)" />
          </radialGradient>

          {/* Ink drip gradient */}
          <linearGradient id="ink-drip" x1="0" y1="0" x2="0" y2="1">
            <stop offset="0%" stopColor="var(--accent)" stopOpacity=".8" />
            <stop offset="100%" stopColor="var(--accent)" stopOpacity="0" />
          </linearGradient>

          {/* Brushed texture pattern */}
          <pattern id="brushed" x="0" y="0" width="2" height="200" patternUnits="userSpaceOnUse">
            <rect width="1" height="200" fill="rgba(244,240,234,.025)" />
          </pattern>

          {/* Soft glow */}
          <filter id="glow" x="-50%" y="-50%" width="200%" height="200%">
            <feGaussianBlur stdDeviation="6" result="b" />
            <feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge>
          </filter>
        </defs>

        {/* Outer coordinate grid */}
        <g opacity=".55" stroke="var(--hair-strong)" strokeWidth=".5">
          {Array.from({ length: 7 }).map((_, i) => (
            <line key={'h'+i} x1="0" y1={90 + i*90} x2="720" y2={90 + i*90} />
          ))}
          {Array.from({ length: 7 }).map((_, i) => (
            <line key={'v'+i} x1={90 + i*90} y1="0" x2={90 + i*90} y2="720" />
          ))}
        </g>

        {/* Strategy contour rings — slow rotation */}
        <g style={{ transformOrigin: '360px 360px', animation: 'spin-slow 120s linear infinite' }}
           fill="none" stroke="var(--hair-strong)" strokeWidth=".5">
          <circle cx="360" cy="360" r="340" strokeDasharray="2 6" />
          <circle cx="360" cy="360" r="300" strokeDasharray="1 12" />
          <circle cx="360" cy="360" r="260" />
          <circle cx="360" cy="360" r="230" strokeDasharray="6 8" />
          {/* tick marks */}
          {Array.from({ length: 24 }).map((_, i) => {
            const a = (i / 24) * Math.PI * 2;
            const r1 = 340, r2 = 352;
            const x1 = 360 + Math.cos(a) * r1, y1 = 360 + Math.sin(a) * r1;
            const x2 = 360 + Math.cos(a) * r2, y2 = 360 + Math.sin(a) * r2;
            return <line key={'t'+i} x1={x1} y1={y1} x2={x2} y2={y2}
                         stroke={i % 6 === 0 ? 'var(--accent)' : 'var(--hair-strong)'}
                         strokeWidth={i % 6 === 0 ? 1 : .5} />;
          })}
        </g>

        {/* Counter-rotating inner rings */}
        <g style={{ transformOrigin: '360px 360px', animation: 'spin-slow 80s linear infinite reverse' }}
           fill="none">
          <circle cx="360" cy="360" r="200" stroke="var(--hair-strong)" strokeWidth=".5" strokeDasharray="2 18" />
          <circle cx="360" cy="360" r="170" stroke="var(--hair-strong)" strokeWidth=".5" />
        </g>

        {/* Crosshair */}
        <g stroke="var(--accent)" strokeWidth=".75" opacity=".7">
          <line x1="360" y1="20" x2="360" y2="120" />
          <line x1="360" y1="600" x2="360" y2="700" />
          <line x1="20" y1="360" x2="120" y2="360" />
          <line x1="600" y1="360" x2="700" y2="360" />
        </g>

        {/* Iron orb */}
        <g style={{ transformOrigin: '360px 360px', animation: 'float-y 9s ease-in-out infinite' }}>
          <circle cx="360" cy="360" r="155" fill="url(#orb)" />
          <circle cx="360" cy="360" r="155" fill="url(#brushed)" opacity=".6" />
          <circle cx="360" cy="360" r="155" fill="url(#orb-hi)" />
          <circle cx="360" cy="360" r="155" fill="url(#orb-rim)" />
          {/* meridian lines */}
          <g fill="none" stroke="rgba(244,240,234,.08)" strokeWidth=".5">
            <ellipse cx="360" cy="360" rx="155" ry="46" />
            <ellipse cx="360" cy="360" rx="155" ry="92" />
            <ellipse cx="360" cy="360" rx="46" ry="155" />
            <ellipse cx="360" cy="360" rx="92" ry="155" />
          </g>
          {/* hot specular */}
          <ellipse cx="320" cy="320" rx="40" ry="14"
                   fill="var(--accent-2)" opacity=".35"
                   transform="rotate(-25 320 320)" filter="url(#glow)" />
          {/* Molten drip */}
          <path d="M 360 515 q -2 22 -3 38 q -2 14 -8 18"
                stroke="url(#ink-drip)" strokeWidth="2" fill="none" strokeLinecap="round" />
          <circle cx="349" cy="572" r="3.5" fill="var(--accent)" opacity=".7" />
        </g>

        {/* Floating data tags */}
        <g fontFamily="'JetBrains Mono', monospace" fontSize="10" fill="var(--ink-dim)" letterSpacing=".1em">
          {/* tag 1 */}
          <g transform="translate(110,140)">
            <line x1="0" y1="0" x2="80" y2="0" stroke="var(--accent)" strokeWidth=".75" />
            <circle cx="0" cy="0" r="2.5" fill="var(--accent)" />
            <text x="86" y="-6" fill="var(--mute)">VECTOR / 04</text>
            <text x="86" y="8" fill="var(--ink)">BRAND ↗ 218%</text>
          </g>
          {/* tag 2 */}
          <g transform="translate(545,205)">
            <line x1="0" y1="0" x2="60" y2="0" stroke="var(--accent)" strokeWidth=".75" />
            <circle cx="60" cy="0" r="2.5" fill="var(--accent)" />
            <text x="-2" y="-6" textAnchor="end" fill="var(--mute)">CHANNEL 02</text>
            <text x="-2" y="8" textAnchor="end" fill="var(--ink)">PAID · ROAS 4.8x</text>
          </g>
          {/* tag 3 */}
          <g transform="translate(120,560)">
            <line x1="0" y1="0" x2="60" y2="0" stroke="var(--accent)" strokeWidth=".75" />
            <circle cx="0" cy="0" r="2.5" fill="var(--accent)" />
            <text x="66" y="-6" fill="var(--mute)">SEGMENT · DIRECT</text>
            <text x="66" y="8" fill="var(--ink)">CAC ↘ 68%</text>
          </g>
          {/* tag 4 */}
          <g transform="translate(560,540)">
            <line x1="0" y1="0" x2="50" y2="0" stroke="var(--accent)" strokeWidth=".75" />
            <circle cx="50" cy="0" r="2.5" fill="var(--accent)" />
            <text x="-2" y="-6" textAnchor="end" fill="var(--mute)">LIFT / Q3</text>
            <text x="-2" y="8" textAnchor="end" fill="var(--ink)">+312%</text>
          </g>
        </g>

        {/* Pulse dots along the outer ring */}
        <g>
          {[0, 60, 120, 200, 280, 320].map((deg, i) => {
            const a = (deg * Math.PI) / 180;
            const r = 300;
            const x = 360 + Math.cos(a) * r;
            const y = 360 + Math.sin(a) * r;
            return (
              <circle key={i} cx={x} cy={y} r="2.5" fill="var(--accent)"
                      style={{ animation: `pulse-dot 3s ease-in-out ${i * .3}s infinite` }} />
            );
          })}
        </g>

        {/* Coordinate label top-left */}
        <g fontFamily="'JetBrains Mono', monospace" fontSize="9" fill="var(--mute)" letterSpacing=".12em">
          <text x="22" y="32">N 41°09′ — POSITION</text>
          <text x="698" y="32" textAnchor="end">SYS / I&amp;I — 26.06</text>
          <text x="22" y="700">CAMPAIGN MATRIX / RUN 008</text>
          <text x="698" y="700" textAnchor="end">{`STATE · LIVE ●`}</text>
        </g>
      </svg>
    </div>
  );
}

Object.assign(window, { HeroVisual });