function Hero() {
  const canvasRef = React.useRef(null);

  React.useEffect(() => {
    const canvas = canvasRef.current;
    const ctx = canvas.getContext('2d');
    const hero = canvas.parentElement;
    let w, h, dpr = Math.min(window.devicePixelRatio || 1, 2);
    let mx = -9999, my = -9999, tmx = -9999, tmy = -9999;
    let raf;

    function resize() {
      w = hero.clientWidth; h = hero.clientHeight;
      canvas.width = w * dpr; canvas.height = h * dpr;
      canvas.style.width = w + 'px'; canvas.style.height = h + 'px';
      ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
    }
    resize();
    window.addEventListener('resize', resize);

    const onMove = (e) => {
      const r = hero.getBoundingClientRect();
      tmx = e.clientX - r.left;
      tmy = e.clientY - r.top;
      targetStrength = 1;
    };
    const onLeave = () => { targetStrength = 0; };
    hero.addEventListener('mousemove', onMove);
    hero.addEventListener('mouseleave', onLeave);

    const colors = [[191,78,30], [22,20,16], [212,165,116]];
    let t = 0;
    let strength = 0, targetStrength = 0;

    function draw() {
      t += 0.006;
      mx += (tmx - mx) * 0.08;
      my += (tmy - my) * 0.08;
      strength += (targetStrength - strength) * 0.05;

      ctx.clearRect(0, 0, w, h);
      ctx.fillStyle = '#f7f3ee';
      ctx.fillRect(0, 0, w, h);

      const blobs = [
        { x: w * 0.25 + Math.sin(t) * 40, y: h * 0.3 + Math.cos(t * 0.8) * 30, r: Math.max(w, h) * 0.35, c: colors[0], a: 0.10 },
        { x: w * 0.75 + Math.cos(t * 0.7) * 50, y: h * 0.55 + Math.sin(t * 0.9) * 40, r: Math.max(w, h) * 0.3, c: colors[2], a: 0.14 },
      ];

      if (strength > 0.002) {
        blobs.push({ x: mx, y: my, r: 260, c: colors[0], a: 0.22 * strength });
      }

      blobs.forEach(b => {
        const g = ctx.createRadialGradient(b.x, b.y, 0, b.x, b.y, b.r);
        g.addColorStop(0, `rgba(${b.c[0]},${b.c[1]},${b.c[2]},${b.a})`);
        g.addColorStop(1, `rgba(${b.c[0]},${b.c[1]},${b.c[2]},0)`);
        ctx.fillStyle = g;
        ctx.fillRect(0, 0, w, h);
      });

      raf = requestAnimationFrame(draw);
    }

    const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
    if (!prefersReducedMotion) draw();
    else { ctx.fillStyle = '#f7f3ee'; ctx.fillRect(0, 0, w, h); }

    return () => {
      cancelAnimationFrame(raf);
      window.removeEventListener('resize', resize);
      hero.removeEventListener('mousemove', onMove);
      hero.removeEventListener('mouseleave', onLeave);
    };
  }, []);

  return (
    <section className="hero">
      <canvas ref={canvasRef} className="hero-shader"></canvas>
      <div className="hero-content">
        <p className="hero-eyebrow">Software studio — maximaal 3 projecten tegelijk</p>
        <h1>
          <span className="h1-word">Nooit</span>{' '}
          <span className="h1-word">meer</span>{' '}
          <span className="h1-word">een</span>
          <br />
          <span className="h1-word accent italic">mislukt</span>{' '}
          <span className="h1-word">IT-project.</span>
        </h1>
        <div className="hero-bottom">
          <p className="hero-sub">
            Wij bouwen enterprise-grade software op maat — met wekelijkse demo's,
            een vaste prijs en de vrijheid om na elke sprint te stoppen.
            Niet tevreden na sprint één? Geld terug.
          </p>
          <div className="hero-actions">
            <a href="#contact" className="btn-primary magnetic" onClick={(e) => window.scrollToId(e, '#contact')}>
              Gratis consult <span>→</span>
            </a>
            <a href="#garanties" className="btn-secondary magnetic" onClick={(e) => window.scrollToId(e, '#garanties')}>
              Onze garanties
            </a>
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Hero });