/* ====================== OKTRA — Hero + acceleration field ====================== */

function AccelField() {
  const canvasRef = useRef(null);
  const stateRef = useRef({ raf: 0, parts: [], w: 0, h: 0, dpr: 1, t0: 0, scrollBoost: 0, mx: 0.5 });

  useEffect(() => {
    const canvas = canvasRef.current;
    const ctx = canvas.getContext('2d');
    const S = stateRef.current;
    const cs = getComputedStyle(document.documentElement);
    let accent = cs.getPropertyValue('--accent').trim() || '#4d6bff';

    const reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches;

    function rgba(hex, a) {
      const h = hex.replace('#', '');
      const n = parseInt(h.length === 3 ? h.split('').map(c => c + c).join('') : h, 16);
      return `rgba(${(n >> 16) & 255},${(n >> 8) & 255},${n & 255},${a})`;
    }

    function resize() {
      S.dpr = Math.min(2, window.devicePixelRatio || 1);
      S.w = canvas.clientWidth;
      S.h = canvas.clientHeight;
      canvas.width = S.w * S.dpr;
      canvas.height = S.h * S.dpr;
      ctx.setTransform(S.dpr, 0, 0, S.dpr, 0, 0);
      build();
    }

    function build() {
      const lanes = Math.max(16, Math.floor(S.h / 22));
      const parts = [];
      const count = Math.min(300, Math.floor(S.w / 5));
      for (let i = 0; i < count; i++) {
        const lane = Math.floor(Math.random() * lanes);
        parts.push({
          x: Math.random() * S.w,
          y: (lane + 0.5) * (S.h / lanes) + (Math.random() - 0.5) * 6,
          baseV: 0.41 + Math.random() * 1.23,
          len: 22 + Math.random() * 110,
          a: 0.14 + Math.random() * 0.34,
          hot: Math.random() < 0.22,
          phase: Math.random() * Math.PI * 2,
        });
      }
      S.parts = parts;
    }

    function frame(now) {
      const motion = parseFloat(cs.getPropertyValue('--motion')) || 1;
      // constant, calm drift — steady speed across the whole field (no acceleration wave)
      const accel = 0.6;
      const boost = 1 + S.scrollBoost * 0.3;

      ctx.clearRect(0, 0, S.w, S.h);

      for (const p of S.parts) {
        const v = p.baseV * accel * boost * motion;
        p.x += v;
        if (p.x - p.len > S.w) { p.x = -p.len - Math.random() * 60; }
        const col = p.hot ? accent : '#9aa1b8';
        const a = p.a * (p.hot ? 1.15 : 0.95) * (0.8 + 0.5 * boost);
        const grad = ctx.createLinearGradient(p.x - p.len, 0, p.x, 0);
        grad.addColorStop(0, rgba(col, 0));
        grad.addColorStop(1, rgba(col, Math.min(0.85, a)));
        ctx.strokeStyle = grad;
        ctx.lineWidth = p.hot ? 1.7 : 1.2;
        ctx.beginPath();
        ctx.moveTo(p.x - p.len, p.y);
        ctx.lineTo(p.x, p.y);
        ctx.stroke();
        if (p.hot) {
          ctx.fillStyle = rgba(accent, Math.min(0.95, a + 0.25));
          ctx.fillRect(p.x - 1, p.y - 1, 2.2, 2.2);
        }
      }
      // decay scroll boost
      S.scrollBoost *= 0.94;
      S.raf = requestAnimationFrame(frame);
    }

    function onScroll() {
      const d = Math.abs(window.scrollY - (S.lastY || 0));
      S.lastY = window.scrollY;
      S.scrollBoost = Math.min(2.2, S.scrollBoost + d * 0.02);
    }

    resize();
    window.addEventListener('resize', resize);
    window.addEventListener('scroll', onScroll, { passive: true });
    if (!reduce) S.raf = requestAnimationFrame(frame);
    else { // single static paint
      for (const p of S.parts) {
        const grad = ctx.createLinearGradient(p.x - p.len, 0, p.x, 0);
        grad.addColorStop(0, rgba('#9aa1b8', 0));
        grad.addColorStop(1, rgba(p.hot ? accent : '#9aa1b8', Math.min(0.85, p.a * 1.1)));
        ctx.strokeStyle = grad; ctx.lineWidth = p.hot ? 1.6 : 1.1;
        ctx.beginPath(); ctx.moveTo(p.x - p.len, p.y); ctx.lineTo(p.x, p.y); ctx.stroke();
      }
    }

    return () => {
      cancelAnimationFrame(S.raf);
      window.removeEventListener('resize', resize);
      window.removeEventListener('scroll', onScroll);
    };
  }, []);

  return <canvas ref={canvasRef} aria-hidden="true" />;
}

function Hero() {
  return (
    <header className="hero" id="top" data-screen-label="hero">
      <AccelField />
      <div className="wrap">
        <div className="hero-eyebrow eyebrow reveal">AI systems consulting</div>
        <h1>
          <span className="ln reveal-line" style={{ '--d': '60ms' }}><span>Everything is</span></span>
          <span className="ln reveal-line" style={{ '--d': '180ms' }}><span><span className="accent">accelerating.</span></span></span>
          <span className="ln reveal-line" style={{ '--d': '300ms' }}><span><span className="muted">You shouldn't fall behind.</span></span></span>
        </h1>
        <p className="hero-sub reveal" style={{ '--d': '520ms' }}>
          The pace of change now compounds faster than most teams can keep up with. Oktra is the
          studio that keeps you ahead of it. We design, build, and harden the AI systems that put
          you in front, and we do it the right way, not the fragile way.
        </p>
        <div className="hero-cta reveal" style={{ '--d': '640ms' }}>
          <button className="btn btn-primary" onClick={() => scrollToId('contact')}>
            <span className="label">Book an intro call <ArrowUR /></span>
          </button>
          <button className="btn btn-ghost" onClick={() => scrollToId('services')}>
            <span className="label">See what we build</span>
          </button>
        </div>
      </div>
      <div className="hero-scroll">
        <span>scroll</span>
        <span className="track"></span>
      </div>
    </header>
  );
}

Object.assign(window, { Hero, AccelField });