// PetalRain — petali di rosa che cadono dall'alto al caricamento pagina
// Usa i 3 SVG forniti, colorati col rosso --passion (#c8102e)

const PETAL_SRCS = [
  'src/Petal_1.svg',
  'src/Petal_2.svg',
  'src/Petal_3.svg',
];

// Inline SVG content (loaded once, colored via CSS filter to passion red)
function PetalRain(){
  const [petals] = React.useState(() => {
    return Array.from({length: 22}, (_, i) => ({
      id: i,
      src: PETAL_SRCS[i % 3],
      // Random horizontal start
      left: `${4 + Math.random() * 92}vw`,
      // Staggered delay
      delay: `${Math.random() * 3.5}s`,
      // Duration variation
      duration: `${5 + Math.random() * 5}s`,
      // Size variation
      size: `${28 + Math.random() * 48}px`,
      // Rotation
      rotate: `${Math.random() * 360}deg`,
      // Lateral drift amount
      drift: `${(Math.random() - 0.5) * 120}px`,
      // Wobble speed
      wobble: `${1.5 + Math.random() * 2}s`,
    }));
  });

  return (
    <>
      <style>{`
        @keyframes petalFall {
          0%   { transform: translateY(-120px) rotate(var(--rot)) translateX(0); opacity: 0; }
          5%   { opacity: .85; }
          80%  { opacity: .7; }
          100% { transform: translateY(105vh) rotate(calc(var(--rot) + 200deg)) translateX(var(--drift)); opacity: 0; }
        }
        @keyframes petalSway {
          0%, 100% { margin-left: 0; }
          50% { margin-left: var(--sway); }
        }
        .petal-wrap {
          position: fixed;
          top: 0;
          pointer-events: none;
          z-index: 9999;
          animation: petalFall var(--dur) var(--delay) ease-in forwards;
          filter: invert(13%) sepia(90%) saturate(6000%) hue-rotate(345deg) brightness(90%) contrast(110%);
          opacity: 0;
        }
        .petal-wrap img {
          display: block;
          width: var(--sz);
          height: auto;
        }
      `}</style>
      {petals.map(p => (
        <div key={p.id} className="petal-wrap" style={{
          '--dur': p.duration,
          '--delay': p.delay,
          '--rot': p.rotate,
          '--drift': p.drift,
          '--sway': `${parseFloat(p.drift) * 0.3}px`,
          '--sz': p.size,
          left: p.left,
        }}>
          <img src={p.src} alt=""/>
        </div>
      ))}
    </>
  );
}

window.PetalRain = PetalRain;