// HeroVisual — abstract tech composition with scroll-driven depth.
// Editorial / Augen-Pro: monochromatic ink on white, single turquoise accent.
// No mouse parallax — instead, the whole piece drifts slowly with the page
// scroll for a calm, elegant perspective shift. Ambient floats keep it alive.

function HeroVisual() {
  const ink = "#0f1012";
  const slate = "#8f8f8f";
  const accent = "#00D2BE";
  const faint = "rgba(15,16,18,0.06)";
  const subtle = "rgba(15,16,18,0.10)";

  const containerRef = React.useRef(null);
  const [scrollY, setScrollY] = React.useState(0);

  React.useEffect(() => {
    let raf = null;
    const onScroll = () => {
      if (raf) return;
      raf = requestAnimationFrame(() => {
        setScrollY(window.scrollY || 0);
        raf = null;
      });
    };
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => {
      window.removeEventListener("scroll", onScroll);
      if (raf) cancelAnimationFrame(raf);
    };
  }, []);

  // Scroll-driven progress: 0 at top, 1 by the time you've scrolled ~one viewport.
  const vh = typeof window !== "undefined" ? window.innerHeight || 800 : 800;
  const progress = Math.min(1, Math.max(0, scrollY / (vh * 0.9)));

  // Each layer drifts up by a different amount as you scroll (parallax depth
  // simulated through scroll, not mouse). Plus the whole piece tilts gently.
  const drift = (depth) => {
    // depth is negative for far layers, positive for near.
    // Far layers drift LESS (they're far away), near layers drift MORE.
    const k = (depth + 280) / 320; // normalize: -260 → 0.06, 40 → 1.0
    return -progress * 60 * k;
  };
  const tiltX = progress * -2.5; // pitch back as you scroll
  const scale = 1 + progress * 0.04; // very subtle zoom

  // Particle dots (deterministic positions) — distributed at multiple Z depths
  const particles = [
    { cx: 90,  cy: 120, r: 1.2, o: 0.45, z: -160 },
    { cx: 180, cy: 60,  r: 0.9, o: 0.35, z: -240 },
    { cx: 240, cy: 200, r: 1.4, o: 0.55, z: -80 },
    { cx: 760, cy: 90,  r: 1.1, o: 0.4,  z: -200 },
    { cx: 880, cy: 180, r: 1.5, o: 0.6,  z: -40 },
    { cx: 940, cy: 400, r: 1.0, o: 0.4,  z: -160 },
    { cx: 100, cy: 480, r: 1.3, o: 0.5,  z: -100 },
    { cx: 200, cy: 540, r: 0.9, o: 0.35, z: -240 },
    { cx: 820, cy: 520, r: 1.2, o: 0.5,  z: -60 },
    { cx: 60,  cy: 320, r: 1.1, o: 0.45, z: -180 },
    { cx: 990, cy: 300, r: 1.4, o: 0.55, z: -40 },
    { cx: 320, cy: 80,  r: 0.8, o: 0.3,  z: -260 },
    { cx: 700, cy: 540, r: 1.0, o: 0.4,  z: -120 },
  ];

  return (
    <div
      ref={containerRef}
      style={{
        width: "100%", height: "100%", position: "relative",
        perspective: "1800px", perspectiveOrigin: "50% 50%",
      }}
    >
      {/* Glass gradient sheen — radial bloom around the core, soft and slow.
         Uses the page bg color (T.bg1 = #f2f2f4) so it blends perfectly. */}
      <div aria-hidden style={{
        position: "absolute", inset: 0, pointerEvents: "none",
        background: `radial-gradient(ellipse 55% 65% at 50% 50%, rgba(0,210,190,0.12) 0%, rgba(0,210,190,0.06) 30%, rgba(242,242,244,0) 70%)`,
        filter: "blur(8px)",
        transform: `scale(${1 + progress * 0.06})`,
        transition: "transform 0.8s cubic-bezier(0.22,1,0.36,1)",
      }}/>
      {/* Subtle vignette on the far edges, matched to page bg */}
      <div aria-hidden style={{
        position: "absolute", inset: 0, pointerEvents: "none",
        background: `radial-gradient(ellipse 80% 80% at 50% 50%, rgba(242,242,244,0) 55%, rgba(242,242,244,0.85) 100%)`,
      }}/>

      <div
        style={{
          width: "100%", height: "100%", position: "relative",
          transformStyle: "preserve-3d",
          transform: `rotateX(${tiltX}deg) scale(${scale})`,
          transition: "transform 0.6s cubic-bezier(0.22,1,0.36,1)",
        }}
      >
        <style>{`
          @keyframes hv-spin-slow { to { transform: rotate(360deg); } }
          @keyframes hv-spin-rev { to { transform: rotate(-360deg); } }
          @keyframes hv-pulse { 0%, 100% { opacity: 0.4; transform: scale(1); } 50% { opacity: 1; transform: scale(1.4); } }
          @keyframes hv-stream-move { to { stroke-dashoffset: -200; } }
          @keyframes hv-particle { 0%,100% { opacity: var(--o); } 50% { opacity: calc(var(--o) * 0.3); } }
          @keyframes hv-float-a { 0%,100% { transform: translate3d(0,0,0); } 50% { transform: translate3d(6px,-8px,0); } }
          @keyframes hv-float-b { 0%,100% { transform: translate3d(0,0,0); } 50% { transform: translate3d(-8px,6px,0); } }
          @keyframes hv-bloom { 0%,100% { opacity: 0.85; transform: scale(1); } 50% { opacity: 1; transform: scale(1.06); } }
          .hv-orbit-1 { transform-origin: 520px 300px; animation: hv-spin-slow 80s linear infinite; transform-box: fill-box; }
          .hv-orbit-2 { transform-origin: 520px 300px; animation: hv-spin-rev 110s linear infinite; transform-box: fill-box; }
          .hv-orbit-3 { transform-origin: 520px 300px; animation: hv-spin-slow 140s linear infinite; transform-box: fill-box; }
          .hv-pulse-core { transform-origin: 520px 300px; transform-box: fill-box; animation: hv-pulse 3.5s ease-in-out infinite; }
          .hv-stream { stroke-dasharray: 2 8; animation: hv-stream-move 10s linear infinite; }
          .hv-stream-fast { stroke-dasharray: 2 6; animation: hv-stream-move 5s linear infinite; }
          .hv-layer { position: absolute; inset: 0; pointer-events: none; will-change: transform; }
          .hv-layer svg { width: 100%; height: 100%; display: block; overflow: visible; }
          .hv-float-a { animation: hv-float-a 11s ease-in-out infinite; }
          .hv-float-b { animation: hv-float-b 13s ease-in-out infinite; }
          .hv-bloom { animation: hv-bloom 6s ease-in-out infinite; transform-origin: 520px 300px; transform-box: fill-box; }
        `}</style>

        {/* Layer 1 — far back: vignette + grid (depth -260) */}
        <div className="hv-layer" style={{ transform: `translate3d(0, ${drift(-260)}px, -260px)` }}>
          <svg viewBox="0 0 1040 600" preserveAspectRatio="xMidYMid meet">
            <defs>
              <radialGradient id="hv-vignette-far" cx="50%" cy="50%" r="60%">
                <stop offset="0%" stopColor="#ffffff" stopOpacity="0" />
                <stop offset="65%" stopColor="#f2f2f4" stopOpacity="0" />
                <stop offset="100%" stopColor="#f2f2f4" stopOpacity="1" />
              </radialGradient>
            </defs>
            <g opacity="0.32">
              {Array.from({ length: 13 }).map((_, i) => (
                <line key={`v${i}`} x1={i * 80 + 40} y1="0" x2={i * 80 + 40} y2="600" stroke={faint} strokeWidth="1" />
              ))}
              {Array.from({ length: 8 }).map((_, i) => (
                <line key={`h${i}`} x1="0" y1={i * 80 + 40} x2="1040" y2={i * 80 + 40} stroke={faint} strokeWidth="1" />
              ))}
            </g>
            <rect x="0" y="0" width="1040" height="600" fill="url(#hv-vignette-far)" pointerEvents="none" />
          </svg>
        </div>

        {/* Layer 2 — back: outermost orbits + far particles (depth -180) */}
        <div className="hv-layer" style={{ transform: `translate3d(0, ${drift(-180)}px, -180px)` }}>
          <svg viewBox="0 0 1040 600" preserveAspectRatio="xMidYMid meet">
            <defs>
              <linearGradient id="hv-ring-grad" x1="0%" y1="0%" x2="100%" y2="100%">
                <stop offset="0%" stopColor={accent} stopOpacity="0.0" />
                <stop offset="40%" stopColor={accent} stopOpacity="0.55" />
                <stop offset="100%" stopColor={accent} stopOpacity="0.0" />
              </linearGradient>
              <radialGradient id="hv-bloom-grad" cx="50%" cy="50%" r="50%">
                <stop offset="0%" stopColor={accent} stopOpacity="0.18" />
                <stop offset="60%" stopColor={accent} stopOpacity="0.04" />
                <stop offset="100%" stopColor={accent} stopOpacity="0" />
              </radialGradient>
            </defs>
            {/* Soft turquoise bloom behind core */}
            <circle cx="520" cy="300" r="220" fill="url(#hv-bloom-grad)" className="hv-bloom" />
            <g fill="none" strokeWidth="1">
              <circle cx="520" cy="300" r="240" stroke={subtle} />
              <circle cx="520" cy="300" r="180" stroke={subtle} opacity="0.85" />
            </g>
            <g fill="none">
              <g className="hv-orbit-1">
                <circle cx="520" cy="300" r="240" stroke="url(#hv-ring-grad)" strokeWidth="1.25" strokeDasharray="1 8" />
              </g>
            </g>
            <g className="hv-orbit-1">
              <circle cx="760" cy="300" r="3.5" fill={accent} />
            </g>
            {/* Far particles */}
            <g>
              {particles.filter(p => p.z <= -180).map((p, i) => (
                <circle key={i} cx={p.cx} cy={p.cy} r={p.r * 0.9}
                  fill={i % 4 === 0 ? accent : ink}
                  style={{ "--o": p.o * 0.7, opacity: p.o * 0.7,
                    animation: `hv-particle ${3 + (i % 4)}s ease-in-out ${i * 0.3}s infinite` }} />
              ))}
            </g>
          </svg>
        </div>

        {/* Layer 3 — mid back: code glyphs + crosshairs (depth -120) */}
        <div className="hv-layer" style={{ transform: `translate3d(0, ${drift(-120)}px, -120px)` }}>
          <svg viewBox="0 0 1040 600" preserveAspectRatio="xMidYMid meet">
            <g fill={ink} opacity="0.22" className="hv-float-a">
              <rect x="80" y="100" width="60" height="3" rx="1.5" />
              <rect x="148" y="100" width="100" height="3" rx="1.5" />
              <rect x="80" y="112" width="140" height="3" rx="1.5" />
              <rect x="80" y="124" width="80" height="3" rx="1.5" />
            </g>
            <g fill={ink} opacity="0.22" className="hv-float-b">
              <rect x="800" y="500" width="100" height="3" rx="1.5" />
              <rect x="800" y="512" width="60" height="3" rx="1.5" />
              <rect x="868" y="512" width="80" height="3" rx="1.5" />
              <rect x="800" y="524" width="140" height="3" rx="1.5" />
            </g>
            <g stroke={ink} strokeWidth="1" fill="none" opacity="0">
              {/* Corner crosshairs intentionally hidden — cleaner composition */}
            </g>
            <g fontFamily="'Instrument Sans', sans-serif" fontSize="9" fill={slate} letterSpacing="0.08em" opacity="0">
              {/* Captions intentionally hidden */}
            </g>
          </svg>
        </div>

        {/* Layer 4 — mid: middle orbit + node (depth -60) */}
        <div className="hv-layer" style={{ transform: `translate3d(0, ${drift(-60)}px, -60px)` }}>
          <svg viewBox="0 0 1040 600" preserveAspectRatio="xMidYMid meet">
            <g fill="none">
              <circle cx="520" cy="300" r="120" stroke={subtle} />
              <g className="hv-orbit-2">
                <circle cx="520" cy="300" r="180" stroke={accent} strokeWidth="1" strokeDasharray="3 220" strokeLinecap="round" opacity="0.7" />
              </g>
              <g className="hv-orbit-3">
                <circle cx="520" cy="300" r="120" stroke={ink} strokeWidth="1" strokeDasharray="2 14" opacity="0.4" />
              </g>
            </g>
            <g className="hv-orbit-2">
              <circle cx="340" cy="300" r="2.5" fill={ink} />
            </g>
            <g className="hv-orbit-3">
              <circle cx="520" cy="180" r="2" fill={accent} />
            </g>
            {/* Mid particles */}
            <g>
              {particles.filter(p => p.z > -180 && p.z <= -100).map((p, i) => (
                <circle key={i} cx={p.cx} cy={p.cy} r={p.r}
                  fill={i % 3 === 0 ? accent : ink}
                  style={{ "--o": p.o, opacity: p.o,
                    animation: `hv-particle ${3 + (i % 4)}s ease-in-out ${i * 0.3}s infinite` }} />
              ))}
            </g>
          </svg>
        </div>

        {/* Layer 5 — front mid: circuit traces + streams (depth -20) */}
        <div className="hv-layer" style={{ transform: `translate3d(0, ${drift(-20)}px, -20px)` }}>
          <svg viewBox="0 0 1040 600" preserveAspectRatio="xMidYMid meet">
            <defs>
              <linearGradient id="hv-stream" x1="0%" y1="0%" x2="100%" y2="0%">
                <stop offset="0%" stopColor={ink} stopOpacity="0" />
                <stop offset="50%" stopColor={ink} stopOpacity="0.7" />
                <stop offset="100%" stopColor={ink} stopOpacity="0" />
              </linearGradient>
            </defs>
            <circle cx="520" cy="300" r="60" fill="none" stroke={subtle} strokeWidth="1" />
            <g fill="none" strokeWidth="1.25" stroke={ink} opacity="0.55">
              <path d="M 548 300 L 640 300 L 660 280 L 760 280 L 776 296" />
              <circle cx="776" cy="296" r="2.5" fill={ink} />
              <path d="M 540 320 L 600 380 L 720 380 L 740 400" />
              <circle cx="740" cy="400" r="2.5" fill={ink} />
              <path d="M 492 300 L 400 300 L 380 320 L 280 320 L 264 304" />
              <circle cx="264" cy="304" r="2.5" fill={ink} />
              <path d="M 500 280 L 440 220 L 320 220 L 300 200" />
              <circle cx="300" cy="200" r="2.5" fill={ink} />
              <path d="M 520 272 L 520 220 L 540 200 L 540 140" />
              <circle cx="540" cy="140" r="2.5" fill={ink} />
              <path d="M 520 328 L 520 400 L 500 420 L 500 480" />
              <circle cx="500" cy="480" r="2.5" fill={ink} />
            </g>
            <g fill="none" strokeLinecap="round">
              <line className="hv-stream" x1="80" y1="180" x2="380" y2="180" stroke={accent} strokeWidth="1.25" opacity="0.9" />
              <line className="hv-stream-fast" x1="100" y1="200" x2="280" y2="200" stroke={ink} strokeWidth="1" opacity="0.5" />
              <line className="hv-stream" x1="660" y1="420" x2="960" y2="420" stroke={accent} strokeWidth="1.25" opacity="0.85" />
              <line className="hv-stream-fast" x1="720" y1="440" x2="900" y2="440" stroke={ink} strokeWidth="1" opacity="0.4" />
              <line className="hv-stream" x1="80" y1="450" x2="240" y2="450" stroke={ink} strokeWidth="1" opacity="0.45" />
              <line className="hv-stream-fast" x1="780" y1="160" x2="940" y2="160" stroke={ink} strokeWidth="1" opacity="0.5" />
            </g>
            {/* Front particles */}
            <g>
              {particles.filter(p => p.z > -100).map((p, i) => (
                <circle key={i} cx={p.cx} cy={p.cy} r={p.r * 1.15}
                  fill={i % 3 === 0 ? accent : ink}
                  style={{ "--o": p.o * 1.1, opacity: Math.min(1, p.o * 1.1),
                    animation: `hv-particle ${3 + (i % 4)}s ease-in-out ${i * 0.3}s infinite` }} />
              ))}
            </g>
          </svg>
        </div>

        {/* Layer 6 — front: central core (depth +40, closest) */}
        <div className="hv-layer" style={{ transform: `translate3d(0, ${drift(40)}px, 40px)` }}>
          <svg viewBox="0 0 1040 600" preserveAspectRatio="xMidYMid meet">
            <defs>
              <radialGradient id="hv-core-glass" cx="50%" cy="40%" r="55%">
                <stop offset="0%" stopColor="#ffffff" stopOpacity="1" />
                <stop offset="60%" stopColor="#fafafa" stopOpacity="0.95" />
                <stop offset="100%" stopColor="#f0f0f2" stopOpacity="0.9" />
              </radialGradient>
            </defs>
            <g>
              {/* Glass disc */}
              <circle cx="520" cy="300" r="34" fill="url(#hv-core-glass)" stroke={ink} strokeWidth="1.25" />
              {/* Highlight */}
              <ellipse cx="512" cy="288" rx="14" ry="6" fill="#ffffff" opacity="0.9" />
              <circle cx="520" cy="300" r="16" fill="none" stroke={accent} strokeWidth="1.25" />
              <circle cx="520" cy="300" r="3.5" fill={accent} className="hv-pulse-core" />
            </g>
            <g fontFamily="'Instrument Sans', sans-serif" fontSize="9" fill={slate} letterSpacing="0.08em" opacity="0">
              {/* CORE label intentionally hidden */}
            </g>
          </svg>
        </div>
      </div>
    </div>
  );
}

window.HeroVisual = HeroVisual;