// Custom cursor + global tech overlays
function TechOverlay() {
  const [pos, setPos] = useState({ x: -100, y: -100 });
  const [big, setBig] = useState(false);

  useEffect(() => {
    let raf = 0;
    let target = { x: -100, y: -100 };
    let cur = { x: -100, y: -100 };
    const onMove = (e) => {
      target = { x: e.clientX, y: e.clientY };
      const t = e.target;
      setBig(!!t.closest('button, a, [data-cursor="big"]'));
    };
    const tick = () => {
      cur.x += (target.x - cur.x) * 0.18;
      cur.y += (target.y - cur.y) * 0.18;
      setPos({ x: cur.x, y: cur.y });
      raf = requestAnimationFrame(tick);
    };
    window.addEventListener('mousemove', onMove);
    raf = requestAnimationFrame(tick);
    return () => { window.removeEventListener('mousemove', onMove); cancelAnimationFrame(raf); };
  }, []);

  // Scroll progress bar
  const [sp, setSp] = useState(0);
  useEffect(() => {
    const h = () => {
      const max = document.documentElement.scrollHeight - window.innerHeight;
      setSp(max > 0 ? window.scrollY / max : 0);
    };
    h();
    window.addEventListener('scroll', h, { passive: true });
    return () => window.removeEventListener('scroll', h);
  }, []);

  return (
    <>
      {/* noise */}
      <div aria-hidden className="tech-noise" style={{
        position: 'fixed', inset: 0, zIndex: 1, pointerEvents: 'none',
        opacity: 0.035, mixBlendMode: 'overlay',
        backgroundImage: `url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.9'/></svg>")`,
      }} />

      {/* scanlines — 4px pattern on desktop; coarser 6px on mobile so the
          DPR rasterization lands on integer device pixels (clean on 2x and 3x). */}
      <div aria-hidden className="tech-scanlines" style={{
        position: 'fixed', inset: 0, zIndex: 1, pointerEvents: 'none',
        backgroundImage: 'repeating-linear-gradient(0deg, transparent 0 3px, oklch(0 0 0 / 0.04) 3px 4px)',
      }} />

      {/* corner HUD tickers */}
      <div aria-hidden style={{ position: 'fixed', left: 16, bottom: 16, zIndex: 2, pointerEvents: 'none' }} className="mono">
        <span style={{ color: 'var(--accent)' }}>●</span> <span style={{ color: 'var(--fg-dim)' }}>PHI · system online</span>
      </div>
      <div aria-hidden style={{ position: 'fixed', right: 16, bottom: 16, zIndex: 2, pointerEvents: 'none', color: 'var(--fg-mute)' }} className="mono">
        scroll · {String(Math.round(sp * 100)).padStart(3, '0')}%
      </div>

      {/* scroll progress line */}
      <div aria-hidden style={{
        position: 'fixed', left: 0, top: 0, height: 2, width: `${sp * 100}%`,
        background: 'var(--accent)', zIndex: 60, pointerEvents: 'none',
        boxShadow: '0 0 10px var(--accent)',
      }} />

      {/* bottom blur fade */}
      <div aria-hidden style={{
        position: 'fixed', left: 0, right: 0, bottom: 0, height: 120, zIndex: 3,
        pointerEvents: 'none',
        backdropFilter: 'blur(10px)',
        WebkitBackdropFilter: 'blur(10px)',
        maskImage: 'linear-gradient(to top, black 0%, black 30%, transparent 100%)',
        WebkitMaskImage: 'linear-gradient(to top, black 0%, black 30%, transparent 100%)',
        background: 'linear-gradient(to top, var(--bg) 0%, transparent 100%)',
      }} />

      {/* custom cursor — ring + dot */}
      <div aria-hidden style={{
        position: 'fixed', left: 0, top: 0, zIndex: 999, pointerEvents: 'none',
        transform: `translate3d(${pos.x}px, ${pos.y}px, 0) translate(-50%, -50%)`,
        mixBlendMode: 'difference',
      }}>
        <div style={{
          width: big ? 56 : 28, height: big ? 56 : 28,
          border: '1px solid oklch(0.96 0.008 85)',
          borderRadius: 999,
          transition: 'width .35s cubic-bezier(.2,.7,.2,1), height .35s cubic-bezier(.2,.7,.2,1)',
        }} />
      </div>
      <div aria-hidden style={{
        position: 'fixed', left: 0, top: 0, zIndex: 999, pointerEvents: 'none',
        transform: `translate3d(${pos.x}px, ${pos.y}px, 0) translate(-50%, -50%)`,
        width: 4, height: 4, borderRadius: 999,
        background: 'var(--accent)',
        boxShadow: '0 0 8px var(--accent)',
      }} />

      <style>{`
        @media (pointer: coarse) { body { cursor: auto !important; } }
        @media (pointer: fine) { body, a, button { cursor: none !important; } }
        /* On mobile the 4px scanline pattern aliases against the device pixel
           ratio (2x / 3x) and renders as thick uneven bands. Use an SVG tile
           sized to 6px (multiple of 2 and 3) so it rasterizes once and tiles
           cleanly on iOS Safari and Android Chrome. */
        @media (pointer: coarse), (max-width: 820px) {
          .tech-scanlines {
            background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='8'><rect width='8' height='1' y='7' fill='black' fill-opacity='0.03'/></svg>") !important;
            background-size: 8px 8px !important;
            background-repeat: repeat !important;
            opacity: 0.7 !important;
          }
          .tech-noise { opacity: 0.018 !important; }
        }
      `}</style>
    </>
  );
}

window.TechOverlay = TechOverlay;