import React from "react";

const swirls = [
  { cx: "12%", cy: "18%", r: 18, delay: "0s" },
  { cx: "73%", cy: "31%", r: 10, delay: ".8s" },
  { cx: "42%", cy: "73%", r: 16, delay: "1.5s" },
  { cx: "25%", cy: "60%", r: 9, delay: ".4s" },
  { cx: "88%", cy: "21%", r: 12, delay: ".2s" },
  { cx: "90%", cy: "85%", r: 15, delay: "1.2s" },
  { cx: "15%", cy: "90%", r: 10, delay: ".6s" }
];

/**
 * SpiceParticlesBg
 * A super-light SVG particle/aroma background for "spice" sensory effect.
 * Absolutely positioned, pointer-events-none & faded for subtlety.
 */
const SpiceParticlesBg = () => (
  <div
    aria-hidden="true"
    className="fixed inset-0 pointer-events-none z-0 w-full h-full select-none"
    style={{
      opacity: 0.11,
      mixBlendMode: "multiply",
      background: "none"
    }}
  >
    <svg width="100%" height="100%" viewBox="0 0 100 100" className="absolute w-full h-full">
      {swirls.map((s, i) => (
        <circle
          key={i}
          cx={s.cx}
          cy={s.cy}
          r={s.r}
          fill="url(#spiceGrad)"
          style={{
            transformOrigin: `${s.cx} ${s.cy}`,
            animation: `spice-float 7s ${s.delay} infinite ease-in-out alternate`
          }}
        />
      ))}
      <defs>
        <radialGradient id="spiceGrad" cx="50%" cy="50%" r="70%">
          <stop offset="0%" stopColor="#e6b977" stopOpacity="1" />
          <stop offset="90%" stopColor="#b77e25" stopOpacity="0.45" />
          <stop offset="100%" stopColor="#b77e25" stopOpacity="0.07" />
        </radialGradient>
      </defs>
    </svg>
    <style>{`
      @keyframes spice-float {
        0% { opacity: 0.7; transform: scale(1) translateY(0px);}
        25% { opacity: 1; }
        50% { opacity: 0.9; transform: scale(1.1) translateY(-7px);}
        75% { opacity: 0.7; }
        100% { opacity: 0.7; transform: scale(1) translateY(6px);}
      }
    `}</style>
  </div>
);

export default SpiceParticlesBg;