// hero-orb.jsx — Premium abstract 3D orb visual for the hero
// Pure SVG. Renders an iridescent metallic sphere with an
// orbiting agent/process diagram overlaid — looks like a real product visual,
// not a stock AI gradient.

const HeroOrb = () => {
  const ref = React.useRef(null);
  const [t, setT] = React.useState(0);

  React.useEffect(() => {
    let raf, start = performance.now();
    const tick = (now) => {
      setT((now - start) / 1000);
      raf = requestAnimationFrame(tick);
    };
    raf = requestAnimationFrame(tick);
    return () => cancelAnimationFrame(raf);
  }, []);

  // Parallax to mouse
  const [pt, setPt] = React.useState({ x: 0, y: 0 });
  React.useEffect(() => {
    const onMove = (e) => {
      const r = ref.current?.getBoundingClientRect();
      if (!r) return;
      const cx = r.left + r.width / 2;
      const cy = r.top + r.height / 2;
      const nx = (e.clientX - cx) / r.width;
      const ny = (e.clientY - cy) / r.height;
      setPt({ x: Math.max(-1, Math.min(1, nx)), y: Math.max(-1, Math.min(1, ny)) });
    };
    window.addEventListener("mousemove", onMove, { passive: true });
    return () => window.removeEventListener("mousemove", onMove);
  }, []);

  const px = pt.x * 8;
  const py = pt.y * 8;

  // Orbit nodes
  const nodes = [
    { label: "INPUT",    angle: -110, r: 230, k: "in"  },
    { label: "AGENT",    angle:  -35, r: 250, k: "ag"  },
    { label: "TOOLS",    angle:   55, r: 235, k: "tl"  },
    { label: "OUTPUT",   angle:  140, r: 245, k: "ou"  },
  ];

  return (
    <div ref={ref} className="hero-orb-wrap" aria-hidden>
      <svg viewBox="-320 -320 640 640" className="hero-orb-svg" role="img">
        <defs>
          {/* Sphere body — soft pearlescent gradient; not generic purple */}
          <radialGradient id="sphereBody" cx="35%" cy="30%" r="80%">
            <stop offset="0%"  stopColor="#FFFFFF" stopOpacity="1"/>
            <stop offset="22%" stopColor="#F4ECE2" stopOpacity="1"/>
            <stop offset="55%" stopColor="#D9C7B3" stopOpacity="1"/>
            <stop offset="78%" stopColor="#7E6755" stopOpacity="1"/>
            <stop offset="100%" stopColor="#231C16" stopOpacity="1"/>
          </radialGradient>
          {/* Hot specular */}
          <radialGradient id="spec" cx="32%" cy="22%" r="32%">
            <stop offset="0%" stopColor="#fff" stopOpacity="1"/>
            <stop offset="60%" stopColor="#fff" stopOpacity="0.25"/>
            <stop offset="100%" stopColor="#fff" stopOpacity="0"/>
          </radialGradient>
          {/* Accent rim glow */}
          <radialGradient id="rimAccent" cx="70%" cy="78%" r="55%">
            <stop offset="0%" stopColor="var(--accent)" stopOpacity="0.55"/>
            <stop offset="60%" stopColor="var(--accent)" stopOpacity="0.08"/>
            <stop offset="100%" stopColor="var(--accent)" stopOpacity="0"/>
          </radialGradient>
          {/* Equator band */}
          <linearGradient id="band" x1="0" y1="0" x2="1" y2="0">
            <stop offset="0%"  stopColor="#000" stopOpacity="0.0"/>
            <stop offset="50%" stopColor="#000" stopOpacity="0.18"/>
            <stop offset="100%" stopColor="#000" stopOpacity="0.0"/>
          </linearGradient>
          {/* Floor shadow */}
          <radialGradient id="floor" cx="50%" cy="50%" r="50%">
            <stop offset="0%" stopColor="#000" stopOpacity="0.22"/>
            <stop offset="60%" stopColor="#000" stopOpacity="0.04"/>
            <stop offset="100%" stopColor="#000" stopOpacity="0"/>
          </radialGradient>
          {/* Noise fog */}
          <filter id="grain" x="-20%" y="-20%" width="140%" height="140%">
            <feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="2" seed="3"/>
            <feColorMatrix values="0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.04 0"/>
            <feComposite in2="SourceGraphic" operator="in"/>
          </filter>
        </defs>

        {/* Floor shadow */}
        <ellipse cx="0" cy="240" rx="220" ry="22" fill="url(#floor)"/>

        {/* Outer rings — process orbit */}
        <g style={{ transform: `translate(${px}px, ${py}px)` }}>
          <g style={{ transform: `rotate(${t * 6}deg)`, transformOrigin: "0 0" }}>
            <circle cx="0" cy="0" r="270" fill="none" stroke="var(--line-strong)" strokeWidth="0.5" strokeDasharray="2 6" opacity="0.6"/>
          </g>
          <g style={{ transform: `rotate(${-t * 4}deg)`, transformOrigin: "0 0" }}>
            <circle cx="0" cy="0" r="230" fill="none" stroke="var(--line-2)" strokeWidth="0.5" opacity="0.9"/>
          </g>

          {/* The sphere */}
          <g style={{ transform: `translate(${-px*0.4}px, ${-py*0.4}px)` }}>
            <circle cx="0" cy="0" r="200" fill="url(#sphereBody)"/>
            <circle cx="0" cy="0" r="200" fill="url(#rimAccent)" style={{ mixBlendMode: "screen" }}/>
            <circle cx="0" cy="0" r="200" fill="url(#grain)" opacity="0.6"/>

            {/* Equator databand: animated tick marks */}
            <g clipPath="url(#sphereClip)">
              <rect x="-200" y="-12" width="400" height="24" fill="url(#band)"/>
              <g style={{ transform: `translateX(${(t * 30) % 40 - 40}px)` }}>
                {Array.from({ length: 22 }).map((_, i) => (
                  <rect key={i} x={-220 + i * 20} y="-3" width="6" height="6" fill="#fff" opacity="0.35"/>
                ))}
              </g>
            </g>
            <clipPath id="sphereClip">
              <circle cx="0" cy="0" r="200"/>
            </clipPath>

            {/* Specular highlight */}
            <ellipse cx="-65" cy="-95" rx="80" ry="50" fill="url(#spec)"/>
            {/* Crescent terminator hint */}
            <path d="M 175 -40 A 200 200 0 0 1 60 188" fill="none" stroke="#000" strokeOpacity="0.22" strokeWidth="0.8"/>
          </g>
        </g>

        {/* Orbit nodes — process / agent topology */}
        <g style={{ transform: `translate(${px*1.4}px, ${py*1.4}px)` }}>
          {nodes.map((n, i) => {
            const wob = Math.sin(t * 0.6 + i) * 4;
            const a = (n.angle * Math.PI) / 180;
            const r = n.r + wob;
            const x = Math.cos(a) * r;
            const y = Math.sin(a) * r;
            return (
              <g key={n.k} style={{ transform: `translate(${x}px, ${y}px)` }}>
                <line x1="0" y1="0" x2={-Math.cos(a) * (r - 200)} y2={-Math.sin(a) * (r - 200)}
                      stroke="var(--line-strong)" strokeWidth="0.5" strokeDasharray="2 4" opacity="0.7"/>
                <g>
                  <rect x="-44" y="-13" width="88" height="26" rx="13"
                        fill="var(--bg-card)" stroke="var(--line-2)" strokeWidth="0.5"/>
                  <circle cx="-32" cy="0" r="3" fill="var(--accent)"/>
                  <text x="-22" y="4" fontFamily="var(--font-display)" fontSize="11" letterSpacing="0.06em"
                        fill="var(--ink)" fontWeight="500">{n.label}</text>
                </g>
              </g>
            );
          })}
        </g>

        {/* Tiny floating data ticks */}
        <g opacity="0.45">
          {Array.from({ length: 5 }).map((_, i) => {
            const a = t * 0.4 + i * 1.4;
            const r = 290 + Math.sin(a * 1.3) * 6;
            const x = Math.cos(a) * r;
            const y = Math.sin(a) * r;
            return <circle key={i} cx={x} cy={y} r="1.5" fill="var(--ink-2)"/>;
          })}
        </g>
      </svg>

      {/* Floating chip overlay — shows it's a real system */}
      <div className="orb-chip orb-chip-1">
        <div className="chip-row">
          <span className="chip-dot" />
          <span className="chip-key">agent.run</span>
        </div>
        <div className="chip-meta">
          <span className="mono muted">trace_a3f1</span>
          <span className="chip-time">{(1.24 + Math.sin(t)*0.04).toFixed(2)}s</span>
        </div>
      </div>
      <div className="orb-chip orb-chip-2">
        <div className="chip-row">
          <span className="chip-key">queue</span>
          <span className="chip-num">{Math.floor(12 + (Math.sin(t*0.6)+1)*9)}</span>
        </div>
        <div className="chip-bar"><span style={{ width: `${50 + Math.sin(t*0.3)*22}%` }}/></div>
      </div>
      <div className="orb-chip orb-chip-3">
        <span className="mono">tools/3</span>
      </div>

      <style>{`
        .hero-orb-wrap {
          position: relative;
          width: 100%;
          aspect-ratio: 1 / 1;
          max-width: 640px;
          margin-inline: auto;
        }
        .hero-orb-svg { width: 100%; height: 100%; overflow: visible; }
        .orb-chip {
          position: absolute;
          background: var(--bg-card);
          border: 0.5px solid var(--line-2);
          border-radius: 12px;
          box-shadow: var(--shadow-card);
          padding: 10px 12px;
          font-size: 12px;
          color: var(--ink);
          backdrop-filter: blur(20px);
          min-width: 140px;
          letter-spacing: -0.005em;
        }
        .orb-chip-1 { top: 8%; left: -2%; animation: bob 6s ease-in-out infinite; }
        .orb-chip-2 { bottom: 6%; right: -10%; animation: bob 7.5s ease-in-out infinite reverse; min-width: 160px;}
        .orb-chip-3 { bottom: 38%; left: 4%; padding: 6px 10px; min-width: 0; animation: bob 5s ease-in-out infinite; }
        @keyframes bob {
          0%,100% { transform: translateY(0); }
          50%     { transform: translateY(-6px); }
        }
        .chip-row { display:flex; align-items:center; justify-content:space-between; gap:8px; }
        .chip-dot { width:6px; height:6px; border-radius:99px; background: var(--accent); box-shadow:0 0 0 3px color-mix(in oklab, var(--accent) 18%, transparent);}
        .chip-key { font-family: var(--font-mono); font-size:11px; font-weight:500;}
        .chip-meta { display:flex; align-items:center; justify-content:space-between; margin-top:4px; }
        .chip-time { font-variant-numeric: tabular-nums; color: var(--muted); font-size:11px;}
        .chip-num { font-variant-numeric: tabular-nums; font-weight:500;}
        .chip-bar { margin-top:6px; height:3px; background: var(--line); border-radius:2px; overflow:hidden;}
        .chip-bar > span { display:block; height:100%; background: var(--accent); transition: width .3s ease; }
      `}</style>
    </div>
  );
};

window.HeroOrb = HeroOrb;