// AuroraSky.jsx — o céu compartilhado do hero e da Metodologia IDL.
// Um único canvas, preso à viewport enquanto as duas seções passam por cima,
// para que a aurora atravesse a fronteira entre elas sem emenda.
function AuroraSky() {
  const wrapRef = React.useRef(null);
  const canvasRef = React.useRef(null);

  React.useEffect(() => {
    const canvas = canvasRef.current;
    const wrap = wrapRef.current;
    if (!canvas || !wrap) return;
    const ctx = canvas.getContext('2d');
    const reduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;

    let w = 0, h = 0, raf = 0, running = true, prog = 0;

    const resize = () => {
      const dpr = Math.min(1.5, window.devicePixelRatio || 1);
      w = window.innerWidth; h = window.innerHeight;
      canvas.width = Math.round(w * dpr);
      canvas.height = Math.round(h * dpr);
      ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
    };

    const onScroll = () => {
      const r = wrap.getBoundingClientRect();
      const total = Math.max(1, r.height - window.innerHeight);
      prog = Math.max(0, Math.min(1, -r.top / total));
    };

    // cortinas de aurora — cores do brandbook
    const ribbons = [
      { c: '61,123,255',  base: 0.58, amp: 0.14, freq: 1.7, speed: 0.10,  thick: 0.42, drift: 220 },
      { c: '255,100,120', base: 0.50, amp: 0.18, freq: 2.3, speed: -0.07, thick: 0.34, drift: -160 },
      { c: '255,138,61',  base: 0.44, amp: 0.12, freq: 3.1, speed: 0.12,  thick: 0.26, drift: 110 },
      { c: '157,188,255', base: 0.66, amp: 0.09, freq: 1.2, speed: -0.05, thick: 0.22, drift: -80 },
    ];

    const draw = (now) => {
      const t = now / 1000;
      ctx.clearRect(0, 0, w, h);
      ctx.globalCompositeOperation = 'lighter';
      const step = 10;
      for (const rb of ribbons) {
        const par = (prog - 0.35) * rb.drift;
        for (let x = -step; x <= w + step; x += step) {
          const ph = (x / Math.max(1, w)) * Math.PI * rb.freq + t * rb.speed * Math.PI * 2;
          const y = h * rb.base
            + Math.sin(ph) * h * rb.amp
            + Math.sin(ph * 0.37 + t * 0.25) * h * rb.amp * 0.5
            + par;
          const len = h * rb.thick * (0.75 + 0.25 * Math.sin(ph * 0.5 + t * 0.4));
          const g = ctx.createLinearGradient(0, y - len, 0, y);
          g.addColorStop(0, `rgba(${rb.c},0)`);
          g.addColorStop(0.55, `rgba(${rb.c},0.20)`);
          g.addColorStop(0.85, `rgba(${rb.c},0.38)`);
          g.addColorStop(1, `rgba(${rb.c},0.10)`);
          ctx.fillStyle = g;
          ctx.fillRect(x, y - len, step + 1, len + 1);
        }
      }
      if (!reduced && running) raf = requestAnimationFrame(draw);
    };

    resize();
    onScroll();
    window.addEventListener('resize', resize);
    window.addEventListener('scroll', onScroll, { passive: true });

    const io = new IntersectionObserver(([e]) => {
      running = e.isIntersecting;
      cancelAnimationFrame(raf);
      if (running) raf = requestAnimationFrame(draw);
    });
    io.observe(wrap);
    raf = requestAnimationFrame(draw);

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

  return (
    <div ref={wrapRef} aria-hidden style={{ position: 'absolute', inset: 0 }}>
      <div style={{
        position: 'sticky', top: 0, height: '100vh',
        background: 'linear-gradient(180deg, #06101F 0%, #16233F 55%, var(--aurora-navy-950) 100%)',
      }}>
        <canvas ref={canvasRef} style={{
          position: 'absolute', inset: 0, width: '100%', height: '100%',
          filter: 'blur(18px) saturate(170%) brightness(1.25)',
          transform: 'scale(1.1)',
        }} />
        {/* horizonte — ancora a base do céu */}
        <div style={{
          position: 'absolute', left: 0, right: 0, bottom: 0, height: '38%',
          background: 'linear-gradient(180deg, transparent, rgba(11,21,48,0.85))',
        }} />
      </div>
    </div>
  );
}
window.AuroraSky = AuroraSky;