import type { CSSProperties } from "react";

const leaves = [
  { x: 4, size: 26, duration: 24, delay: -7, drift: 30, turn: 240, opacity: 0.68 },
  { x: 11, size: 18, duration: 29, delay: -19, drift: 44, turn: -300, opacity: 0.42 },
  { x: 19, size: 32, duration: 22, delay: -13, drift: 24, turn: 330, opacity: 0.56 },
  { x: 27, size: 21, duration: 27, delay: -3, drift: 38, turn: -250, opacity: 0.48 },
  { x: 34, size: 16, duration: 31, delay: -24, drift: 26, turn: 290, opacity: 0.36 },
  { x: 42, size: 29, duration: 25, delay: -10, drift: 46, turn: -340, opacity: 0.62 },
  { x: 49, size: 20, duration: 30, delay: -17, drift: 28, turn: 260, opacity: 0.44 },
  { x: 57, size: 34, duration: 23, delay: -5, drift: 40, turn: -310, opacity: 0.58 },
  { x: 64, size: 17, duration: 28, delay: -22, drift: 32, turn: 350, opacity: 0.4 },
  { x: 71, size: 24, duration: 26, delay: -14, drift: 48, turn: -280, opacity: 0.52 },
  { x: 78, size: 19, duration: 32, delay: -2, drift: 25, turn: 320, opacity: 0.38 },
  { x: 84, size: 31, duration: 21, delay: -18, drift: 36, turn: -360, opacity: 0.64 },
  { x: 90, size: 22, duration: 27, delay: -9, drift: 42, turn: 300, opacity: 0.46 },
  { x: 95, size: 16, duration: 30, delay: -25, drift: 27, turn: -270, opacity: 0.34 },
  { x: 53, size: 25, duration: 24, delay: -12, drift: 34, turn: 340, opacity: 0.5 },
] as const;

type LeafStyle = CSSProperties & {
  "--leaf-size": string;
  "--leaf-duration": string;
  "--leaf-delay": string;
  "--leaf-drift": string;
  "--leaf-drift-reverse": string;
  "--leaf-turn": string;
  "--leaf-turn-mid": string;
  "--leaf-turn-late": string;
  "--leaf-opacity": string;
};

export default function AutumnLeaves() {
  return (
    <div className="autumn-leaves" aria-hidden="true">
      {leaves.map((leaf, index) => (
        <span
          className="autumn-leaves__particle"
          key={index}
          style={{
            left: `${leaf.x}%`,
            "--leaf-size": `${leaf.size}px`,
            "--leaf-duration": `${leaf.duration}s`,
            "--leaf-delay": `${leaf.delay}s`,
            "--leaf-drift": `${index % 2 ? -leaf.drift : leaf.drift}px`,
            "--leaf-drift-reverse": `${index % 2 ? leaf.drift : -leaf.drift}px`,
            "--leaf-turn": `${leaf.turn}deg`,
            "--leaf-turn-mid": `${leaf.turn * 0.36}deg`,
            "--leaf-turn-late": `${leaf.turn * 0.72}deg`,
            "--leaf-opacity": `${leaf.opacity}`,
          } as LeafStyle}
        >
          <svg className="autumn-leaves__shape" viewBox="0 0 100 100" focusable="false">
            <path className="autumn-leaves__body" d="M50 4C43 20 24 18 16 28 7 39 13 50 22 53 10 60 14 76 30 78 30 91 41 95 50 86 59 95 70 91 70 78 86 76 90 60 78 53 87 50 93 39 84 28 76 18 57 20 50 4Z" />
            <path className="autumn-leaves__vein" d="M50 91C51 68 51 39 50 9M50 57 29 39M51 69 73 48M50 42 68 30" />
          </svg>
        </span>
      ))}
    </div>
  );
}