// Ambient effects: stars, cursor trail, gold dust
const { useEffect, useRef, useState, useMemo } = React;

window.Ambient = function Ambient() {
  return React.createElement(React.Fragment, null,
    React.createElement(StarsLayer),
    React.createElement(DustLayer),
    React.createElement(CursorLayer)
  );
};

function StarsLayer() {
  const ref = useRef(null);
  useEffect(() => {
    const canvas = ref.current; if (!canvas) return;
    const ctx = canvas.getContext('2d');
    let w, h, stars;
    const init = () => {
      w = canvas.width = window.innerWidth * devicePixelRatio;
      h = canvas.height = window.innerHeight * devicePixelRatio;
      canvas.style.width = window.innerWidth + 'px';
      canvas.style.height = window.innerHeight + 'px';
      const count = Math.floor((window.innerWidth * window.innerHeight) / 9000);
      stars = Array.from({ length: count }, () => ({
        x: Math.random() * w, y: Math.random() * h,
        r: Math.random() * 1.4 * devicePixelRatio + 0.3,
        baseA: Math.random() * 0.6 + 0.2,
        phase: Math.random() * Math.PI * 2,
        speed: Math.random() * 0.02 + 0.005,
        drift: Math.random() * 0.05 - 0.025,
      }));
    };
    init();
    window.addEventListener('resize', init);
    let raf;
    const tick = (t) => {
      ctx.clearRect(0, 0, w, h);
      for (const s of stars) {
        s.y += s.drift;
        if (s.y > h) s.y = 0;
        if (s.y < 0) s.y = h;
        const a = s.baseA + Math.sin(t * s.speed + s.phase) * 0.3;
        ctx.globalAlpha = Math.max(0, Math.min(1, a));
        ctx.fillStyle = '#f4d06f';
        ctx.beginPath();
        ctx.arc(s.x, s.y, s.r, 0, Math.PI * 2);
        ctx.fill();
        // larger halo for bigger stars
        if (s.r > 1.5) {
          ctx.globalAlpha = a * 0.3;
          ctx.beginPath();
          ctx.arc(s.x, s.y, s.r * 3, 0, Math.PI * 2);
          ctx.fill();
        }
      }
      raf = requestAnimationFrame(tick);
    };
    raf = requestAnimationFrame(tick);
    return () => { cancelAnimationFrame(raf); window.removeEventListener('resize', init); };
  }, []);
  return React.createElement('canvas', { ref, className: 'stars-canvas' });
}

function DustLayer() {
  const ref = useRef(null);
  useEffect(() => {
    const canvas = ref.current; if (!canvas) return;
    const ctx = canvas.getContext('2d');
    let w, h, dust;
    const init = () => {
      w = canvas.width = window.innerWidth * devicePixelRatio;
      h = canvas.height = window.innerHeight * devicePixelRatio;
      canvas.style.width = window.innerWidth + 'px';
      canvas.style.height = window.innerHeight + 'px';
      const count = 40;
      dust = Array.from({ length: count }, () => ({
        x: Math.random() * w, y: Math.random() * h,
        r: Math.random() * 1.2 * devicePixelRatio + 0.5,
        vx: (Math.random() - 0.5) * 0.2,
        vy: -Math.random() * 0.3 - 0.1,
        a: Math.random() * 0.4 + 0.2,
        phase: Math.random() * Math.PI * 2,
      }));
    };
    init();
    window.addEventListener('resize', init);
    let raf;
    const tick = (t) => {
      ctx.clearRect(0, 0, w, h);
      for (const d of dust) {
        d.x += d.vx + Math.sin(t * 0.0005 + d.phase) * 0.1;
        d.y += d.vy;
        if (d.y < -10) { d.y = h + 10; d.x = Math.random() * w; }
        if (d.x < 0) d.x = w; if (d.x > w) d.x = 0;
        ctx.globalAlpha = d.a;
        const grad = ctx.createRadialGradient(d.x, d.y, 0, d.x, d.y, d.r * 4);
        grad.addColorStop(0, 'rgba(244, 208, 111, 0.9)');
        grad.addColorStop(1, 'rgba(244, 208, 111, 0)');
        ctx.fillStyle = grad;
        ctx.beginPath();
        ctx.arc(d.x, d.y, d.r * 4, 0, Math.PI * 2);
        ctx.fill();
      }
      raf = requestAnimationFrame(tick);
    };
    raf = requestAnimationFrame(tick);
    return () => { cancelAnimationFrame(raf); window.removeEventListener('resize', init); };
  }, []);
  return React.createElement('canvas', { ref, className: 'particles-canvas' });
}

function CursorLayer() {
  const ref = useRef(null);
  useEffect(() => {
    if (window.matchMedia('(max-width: 780px)').matches) return;
    const canvas = ref.current; if (!canvas) return;
    const ctx = canvas.getContext('2d');
    let w, h;
    const trail = [];
    const init = () => {
      w = canvas.width = window.innerWidth * devicePixelRatio;
      h = canvas.height = window.innerHeight * devicePixelRatio;
      canvas.style.width = window.innerWidth + 'px';
      canvas.style.height = window.innerHeight + 'px';
    };
    init();
    window.addEventListener('resize', init);
    const onMove = (e) => {
      const x = e.clientX * devicePixelRatio;
      const y = e.clientY * devicePixelRatio;
      for (let i = 0; i < 2; i++) {
        trail.push({
          x: x + (Math.random() - 0.5) * 6 * devicePixelRatio,
          y: y + (Math.random() - 0.5) * 6 * devicePixelRatio,
          r: Math.random() * 2 + 0.8,
          life: 1,
          vx: (Math.random() - 0.5) * 0.4,
          vy: (Math.random() - 0.5) * 0.4 - 0.2,
        });
      }
    };
    window.addEventListener('mousemove', onMove);
    let raf;
    const tick = () => {
      ctx.clearRect(0, 0, w, h);
      for (let i = trail.length - 1; i >= 0; i--) {
        const p = trail[i];
        p.life -= 0.03;
        p.x += p.vx; p.y += p.vy;
        if (p.life <= 0) { trail.splice(i, 1); continue; }
        const grad = ctx.createRadialGradient(p.x, p.y, 0, p.x, p.y, p.r * 6);
        grad.addColorStop(0, `rgba(255, 246, 221, ${p.life * 0.9})`);
        grad.addColorStop(0.4, `rgba(244, 208, 111, ${p.life * 0.5})`);
        grad.addColorStop(1, 'rgba(244, 208, 111, 0)');
        ctx.fillStyle = grad;
        ctx.beginPath();
        ctx.arc(p.x, p.y, p.r * 6, 0, Math.PI * 2);
        ctx.fill();
      }
      raf = requestAnimationFrame(tick);
    };
    raf = requestAnimationFrame(tick);
    return () => {
      cancelAnimationFrame(raf);
      window.removeEventListener('mousemove', onMove);
      window.removeEventListener('resize', init);
    };
  }, []);
  return React.createElement('canvas', { ref, className: 'cursor-canvas' });
}

// Cursor dot follower
window.CursorDot = function CursorDot() {
  const ref = useRef(null);
  useEffect(() => {
    if (window.matchMedia('(max-width: 780px)').matches) return;
    const el = ref.current; if (!el) return;
    const onMove = (e) => {
      el.style.left = e.clientX + 'px';
      el.style.top = e.clientY + 'px';
    };
    window.addEventListener('mousemove', onMove);
    return () => window.removeEventListener('mousemove', onMove);
  }, []);
  return React.createElement('div', { ref, className: 'cursor-dot' });
};