// ui_kits/site/Hero.jsx — the signature surface. WebGL field + draggable physics dot in the wordmark.
const Hero = ({ mode }) => {
  const heroRef = React.useRef(null);
  const dotRef  = React.useRef(null);
  const [scrollVel, setScrollVel] = React.useState(0);

  // Scroll velocity drives the shader
  React.useEffect(() => {
    let last = scrollY, lastT = performance.now();
    const onScroll = () => {
      const now = performance.now();
      const v = (scrollY - last) / Math.max(1, now - lastT);
      setScrollVel(Math.min(2, Math.abs(v) * 6));
      last = scrollY; lastT = now;
    };
    addEventListener('scroll', onScroll, { passive: true });
    const decay = setInterval(() => setScrollVel(v => v * 0.85), 80);
    return () => { removeEventListener('scroll', onScroll); clearInterval(decay); };
  }, []);

  // Physics dot — drag, release, springs home
  React.useEffect(() => {
    const dot = dotRef.current;
    if (!dot) return;
    const home = { x: 0, y: 0 };
    let x = 0, y = 0, vx = 0, vy = 0;
    let dragging = false;
    let pointer = { x: 0, y: 0 };
    let raf;

    const onDown = (e) => {
      dragging = true; dot.setPointerCapture(e.pointerId);
      pointer.x = e.clientX; pointer.y = e.clientY;
      const r = dot.getBoundingClientRect();
      pointer.dx = r.left + r.width / 2 - e.clientX;
      pointer.dy = r.top  + r.height / 2 - e.clientY;
    };
    const onMove = (e) => {
      if (!dragging) return;
      const r = heroRef.current.getBoundingClientRect();
      const cx = (r.width / 2 + (e.clientX + pointer.dx - r.left - r.width / 2));
      const cy = (r.height / 2 + (e.clientY + pointer.dy - r.top - r.height / 2));
      // Position relative to wordmark anchor
      const target = dot.parentElement.getBoundingClientRect();
      x = e.clientX + pointer.dx - (target.left + target.width / 2);
      y = e.clientY + pointer.dy - (target.top  + target.height / 2);
      vx = 0; vy = 0;
    };
    const onUp = () => { dragging = false; };
    dot.addEventListener('pointerdown', onDown);
    addEventListener('pointermove', onMove);
    addEventListener('pointerup', onUp);

    const tick = () => {
      if (!dragging) {
        // spring back to home
        const k = 0.10, d = 0.78;
        const ax = -k * (x - home.x);
        const ay = -k * (y - home.y);
        vx = (vx + ax) * d;
        vy = (vy + ay) * d;
        x += vx; y += vy;
      }
      dot.style.transform = `translate(${x}px, ${y}px)`;
      raf = requestAnimationFrame(tick);
    };
    tick();

    return () => {
      cancelAnimationFrame(raf);
      dot.removeEventListener('pointerdown', onDown);
      removeEventListener('pointermove', onMove);
      removeEventListener('pointerup', onUp);
    };
  }, []);

  return (
    <header ref={heroRef} className="koa-hero" data-cursor="hot">
      <ShaderField mode={mode} scrollVel={scrollVel} />
      <div className="hero-scrim" />
      <div className="hero-content wrap">
        <span className="t-eyebrow hero-eyebrow">→ koa · brave · bold · fearless</span>
        <h1 className="hero-h1 site-tagline">
          hi<span className="hero-end">.</span><br/>
          i build for the <em>web</em>
          <span className="hero-dot-anchor"><span ref={dotRef} className="hero-dot" data-hot title="drag me"></span></span>
        </h1>
        <p className="hero-sub">mostly the parts that move.</p>
        <div className="hero-cta">
          <a className="btn primary" href="#/work">view work <span className="a">→</span></a>
          <a className="btn ghost" href="#/say-hi">say hi</a>
        </div>
        <div className="hero-foot">
          <span className="t-eyebrow">→ press <kbd>:</kbd> for the command palette</span>
          <span className="t-eyebrow">→ scroll</span>
        </div>
      </div>
      <style>{`
        .koa-hero {
          position: relative; min-height: 100vh;
          display: flex; align-items: stretch;
          overflow: hidden; padding: 0;
        }
        .hero-scrim {
          position: absolute; inset: 0; pointer-events: none;
          background: linear-gradient(to bottom,
            color-mix(in oklch, var(--bg) 0%, transparent) 30%,
            color-mix(in oklch, var(--bg) 70%, transparent) 80%,
            var(--bg) 100%);
          z-index: 1;
        }
        .hero-content {
          position: relative; z-index: 2;
          align-self: end; padding: 120px 0 var(--s-8); width: 100%;
          display: flex; flex-direction: column; gap: var(--s-4);
        }
        .hero-eyebrow {
          mix-blend-mode: difference; color: var(--fg);
          opacity: 0.85;
        }
        .hero-h1 {
          font-family: var(--font-display); font-weight: 700;
          font-size: clamp(72px, 13vw, 200px); line-height: 0.92; letter-spacing: -0.045em;
          margin: 0; font-weight: 400;
          color: var(--fg);
          mix-blend-mode: difference;
        }
        .hero-h1 em { color: var(--accent); }
        .hero-end  { color: var(--accent); }
        .hero-dot-anchor {
          display: inline-block; position: relative; width: 0; height: 0;
          vertical-align: baseline;
        }
        .hero-dot {
          position: absolute; left: -2px; top: -0.55em;
          width: 0.18em; height: 0.18em;
          background: var(--accent);
          border-radius: 50%;
          box-shadow: 0 0 32px color-mix(in oklch, var(--accent) 60%, transparent);
          touch-action: none; cursor: grab;
          will-change: transform;
        }
        .hero-dot:active { cursor: grabbing; }
        .hero-sub {
          font-family: var(--font-display); font-weight: 700;
          font-size: clamp(20px, 2vw, 28px); margin: 0; color: var(--fg-muted);
          max-width: 30ch;
        }
        .hero-cta { display: flex; gap: var(--s-3); margin-top: var(--s-3); }
        .btn {
          font-family: var(--font-sans); font-weight: 500; font-size: 14px;
          padding: 12px 18px; border-radius: 8px; display: inline-flex; align-items: center; gap: 8px;
          transition: transform 160ms var(--ease-out), background 160ms var(--ease-out);
        }
        .btn.primary { background: var(--accent); color: var(--accent-fg); }
        .btn.primary:hover { transform: scale(1.02); background: color-mix(in oklch, var(--accent) 90%, var(--c-ink)); }
        .btn.primary .a { transition: transform 240ms var(--ease-warrior); }
        .btn.primary:hover .a { transform: translateX(4px); }
        .btn.ghost { color: var(--fg); border: 1px solid var(--border-strong); }
        .btn.ghost:hover { background: color-mix(in oklch, var(--fg) 6%, transparent); }
        .hero-foot {
          display: flex; justify-content: space-between; align-items: center;
          margin-top: var(--s-6); border-top: 1px solid var(--border); padding-top: var(--s-3);
        }
        .hero-foot kbd {
          font-family: var(--font-mono); padding: 1px 6px; border: 1px solid var(--border-strong);
          border-radius: 4px; font-size: 10px;
        }
      `}</style>
    </header>
  );
};

window.Hero = Hero;