// ────────────────────────────────────────────────────────────────────────
//  particles.jsx — richer falling flower petals + gold dust ("blessings")
//  Two-tone gradient petals in marigold, rose, blush, crimson & gold, plus
//  fine gold sparkle. Count scales down on small screens for performance.
// ────────────────────────────────────────────────────────────────────────

// rich petal palettes: [edge, core]
const PETALS = [
  ['#e07a1f', '#f6b64a'], // marigold
  ['#b5384a', '#e0707f'], // crimson → rose
  ['#c25d86', '#efb4cb'], // magenta blush
  ['#d98a8f', '#f6dcd6'], // soft blush
  ['#a8842f', '#f0d28a'], // antique gold
  ['#cf5a2a', '#f4a35c'], // saffron
];

function seeded(i, salt) {
  const x = Math.sin((i + 1) * 12.9898 + salt * 78.233) * 43758.5453;
  return x - Math.floor(x);
}

function Petal({ i }) {
  const left = seeded(i, 1) * 100;
  const size = 11 + seeded(i, 2) * 16;
  const dur = 8 + seeded(i, 3) * 9;
  const delay = -seeded(i, 4) * dur;
  const drift = (seeded(i, 5) - 0.5) * 220;
  const spin = 260 + seeded(i, 6) * 520;
  const kind = seeded(i, 7);
  const [edge, core] = PETALS[Math.floor(seeded(i, 8) * PETALS.length)];
  const gid = `pg${i}`;

  const common = {
    position: 'absolute', left: `${left}%`, top: 0,
    '--drift': `${drift}px`, '--spin': `${spin}deg`,
    animation: `petalfall ${dur}s linear ${delay}s infinite`,
  };

  // fine gold dust
  if (kind > 0.74) {
    return <span style={{ ...common, width: 4, height: 4, borderRadius: '50%',
      background: '#f2d27e', boxShadow: '0 0 7px rgba(242,210,126,0.95)' }} />;
  }
  // five-petal blossom for some
  if (kind > 0.5) {
    return (
      <svg width={size * 1.15} height={size * 1.15} viewBox="0 0 28 28"
           style={{ ...common, filter: 'drop-shadow(0 1px 2px rgba(60,20,10,0.22))' }}>
        <defs><radialGradient id={gid} cx="0.5" cy="0.5" r="0.55">
          <stop offset="0" stopColor={core} /><stop offset="1" stopColor={edge} />
        </radialGradient></defs>
        <g fill={`url(#${gid})`} fillOpacity="0.95">
          {[0, 72, 144, 216, 288].map((a) => (
            <ellipse key={a} cx="14" cy="6.5" rx="3.6" ry="6.5"
              transform={`rotate(${a} 14 14)`} />
          ))}
          <circle cx="14" cy="14" r="2.4" fill="#f3d27e" />
        </g>
      </svg>
    );
  }
  // single curved petal
  return (
    <svg width={size} height={size * 1.32} viewBox="0 0 20 26"
         style={{ ...common, filter: 'drop-shadow(0 1px 2px rgba(60,20,10,0.22))' }}>
      <defs><radialGradient id={gid} cx="0.5" cy="0.35" r="0.75">
        <stop offset="0" stopColor={core} /><stop offset="1" stopColor={edge} />
      </radialGradient></defs>
      <path d="M10 0 C 18 8 18 18 10 26 C 2 18 2 8 10 0 Z" fill={`url(#${gid})`} fillOpacity="0.95" />
      <path d="M10 3 C 10 11 10 18 10 23" stroke="rgba(0,0,0,0.12)" strokeWidth="1" fill="none" />
    </svg>
  );
}

function PetalParticles({ intensity = 0 }) {
  if (intensity <= 0.01) return null;
  const count = (typeof window !== 'undefined' && window.innerWidth < 640) ? 12 : 20;
  return (
    <div aria-hidden="true" style={{
      position: 'absolute', inset: 0, overflow: 'hidden', pointerEvents: 'none',
      opacity: Math.min(1, intensity), transition: 'opacity .8s ease', zIndex: 45,
    }}>
      {Array.from({ length: count }).map((_, i) => <Petal key={i} i={i} />)}
    </div>
  );
}

Object.assign(window, { PetalParticles });