/* HeroBurst — radial particle burst à la Stripe, magenta → violet → deep purple */
const { useMemo } = React;

function HeroBurst({ density = 1, intensity = 1 }) {
  const rays = useMemo(() => {
    const count = Math.round(180 * density);
    const arr = [];
    // pseudo-random but deterministic
    let seed = 7;
    const rnd = () => { seed = (seed * 9301 + 49297) % 233280; return seed / 233280; };
    for (let i = 0; i < count; i++) {
      const angle = (i / count) * Math.PI * 2 + rnd() * 0.04;
      const lengthBase = 320 + rnd() * 360;
      const length = lengthBase * (0.6 + rnd() * 0.8);
      const startR = 30 + rnd() * 40;
      const opacity = 0.15 + rnd() * 0.55;
      const width = rnd() < 0.85 ? 0.6 : 1.4;
      const dur = 4 + rnd() * 8;
      const delay = rnd() * 6;
      arr.push({ angle, length, startR, opacity, width, dur, delay });
    }
    return arr;
  }, [density]);

  const particles = useMemo(() => {
    const count = Math.round(80 * density);
    const arr = [];
    let seed = 23;
    const rnd = () => { seed = (seed * 9301 + 49297) % 233280; return seed / 233280; };
    for (let i = 0; i < count; i++) {
      const r = 60 + rnd() * 460;
      const angle = rnd() * Math.PI * 2;
      const x = Math.cos(angle) * r;
      const y = Math.sin(angle) * r;
      const size = 0.8 + rnd() * 2.2;
      const dur = 6 + rnd() * 10;
      const delay = rnd() * 8;
      const opacity = 0.3 + rnd() * 0.7;
      arr.push({ x, y, size, dur, delay, opacity });
    }
    return arr;
  }, [density]);

  const cx = 600, cy = 600;

  return (
    <svg viewBox="0 0 1200 1200" preserveAspectRatio="xMidYMid meet" aria-hidden="true">
      <defs>
        <radialGradient id="burstCore" cx="50%" cy="50%" r="50%">
          <stop offset="0%" stopColor="#FF0080" stopOpacity={0.95 * intensity} />
          <stop offset="35%" stopColor="#9333EA" stopOpacity={0.55 * intensity} />
          <stop offset="70%" stopColor="#3B0764" stopOpacity={0.20 * intensity} />
          <stop offset="100%" stopColor="#3B0764" stopOpacity="0" />
        </radialGradient>
        <linearGradient id="rayGrad" x1="0%" y1="50%" x2="100%" y2="50%">
          <stop offset="0%" stopColor="#FF0080" stopOpacity="0.0" />
          <stop offset="20%" stopColor="#FF0080" stopOpacity="1" />
          <stop offset="55%" stopColor="#9333EA" stopOpacity="0.85" />
          <stop offset="100%" stopColor="#3B0764" stopOpacity="0" />
        </linearGradient>
        <radialGradient id="ring1" cx="50%" cy="50%" r="50%">
          <stop offset="0%" stopColor="transparent" stopOpacity="0" />
          <stop offset="60%" stopColor="transparent" stopOpacity="0" />
          <stop offset="78%" stopColor="#FF0080" stopOpacity="0.18" />
          <stop offset="84%" stopColor="#9333EA" stopOpacity="0.10" />
          <stop offset="100%" stopColor="transparent" stopOpacity="0" />
        </radialGradient>
        <filter id="softBlur" x="-20%" y="-20%" width="140%" height="140%">
          <feGaussianBlur stdDeviation="0.6" />
        </filter>
        <filter id="bigBlur" x="-50%" y="-50%" width="200%" height="200%">
          <feGaussianBlur stdDeviation="14" />
        </filter>
      </defs>

      {/* Soft inner halo */}
      <circle cx={cx} cy={cy} r="320" fill="url(#burstCore)" filter="url(#bigBlur)" />

      {/* Subtle distant ring */}
      <circle cx={cx} cy={cy} r="540" fill="url(#ring1)" />

      {/* Slow rotating ray container */}
      <g style={{ transformOrigin: '600px 600px', animation: 'burstSpin 240s linear infinite' }}>
        {rays.map((r, i) => {
          const x1 = cx + Math.cos(r.angle) * r.startR;
          const y1 = cy + Math.sin(r.angle) * r.startR;
          const x2 = cx + Math.cos(r.angle) * (r.startR + r.length);
          const y2 = cy + Math.sin(r.angle) * (r.startR + r.length);
          return (
            <line
              key={i}
              x1={x1} y1={y1} x2={x2} y2={y2}
              stroke="url(#rayGrad)"
              strokeWidth={r.width}
              strokeLinecap="round"
              opacity={r.opacity * intensity}
              filter="url(#softBlur)"
              style={{
                animation: `rayFlicker ${r.dur}s ease-in-out ${r.delay}s infinite`,
                transformOrigin: `${x1}px ${y1}px`,
              }}
            />
          );
        })}
      </g>

      {/* Counter-rotating ray container for parallax sparkle */}
      <g style={{ transformOrigin: '600px 600px', animation: 'burstSpinReverse 360s linear infinite', opacity: 0.5 * intensity }}>
        {rays.slice(0, Math.round(rays.length * 0.4)).map((r, i) => {
          const angle = r.angle + 0.04;
          const x1 = cx + Math.cos(angle) * r.startR;
          const y1 = cy + Math.sin(angle) * r.startR;
          const x2 = cx + Math.cos(angle) * (r.startR + r.length * 1.05);
          const y2 = cy + Math.sin(angle) * (r.startR + r.length * 1.05);
          return (
            <line
              key={`b-${i}`}
              x1={x1} y1={y1} x2={x2} y2={y2}
              stroke="url(#rayGrad)" strokeWidth={r.width * 0.8} strokeLinecap="round"
              opacity={r.opacity * 0.6}
              filter="url(#softBlur)"
            />
          );
        })}
      </g>

      {/* Drifting particles */}
      <g>
        {particles.map((p, i) => (
          <circle
            key={`p-${i}`}
            cx={cx + p.x} cy={cy + p.y} r={p.size}
            fill="#fff" opacity={p.opacity}
            style={{
              animation: `particleFloat ${p.dur}s ease-in-out ${p.delay}s infinite`,
              transformOrigin: `${cx + p.x}px ${cy + p.y}px`,
            }}
          />
        ))}
      </g>

      <style>{`
        @keyframes burstSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
        @keyframes burstSpinReverse { from { transform: rotate(0deg); } to { transform: rotate(-360deg); } }
        @keyframes rayFlicker {
          0%, 100% { opacity: var(--raw); transform: scaleX(1); }
          50% { opacity: calc(var(--raw, 0.5) * 1.4); transform: scaleX(1.04); }
        }
        @keyframes particleFloat {
          0%, 100% { transform: translate(0,0) scale(1); opacity: var(--p-op, 0.5); }
          50% { transform: translate(2px,-3px) scale(1.4); opacity: 1; }
        }
      `}</style>
    </svg>
  );
}

window.HeroBurst = HeroBurst;