/* global React */
/* HEXA-V — Money drift: small, sparse, monochrome $-bills falling subtly */

const MoneyRain = ({ count = 8, opacity = 0.32 }) => {
  const items = React.useMemo(() => Array.from({ length: count }, (_, i) => ({
    left: 5 + ((i * 97) % 90) + (Math.random() - 0.5) * 6,  // spread, not clustered
    delay: -Math.random() * 30,
    duration: 22 + Math.random() * 18,
    drift: (Math.random() - 0.5) * 40,
    rot: (Math.random() - 0.5) * 24,
    scale: 0.42 + Math.random() * 0.35,
    op: 0.55 + Math.random() * 0.45,
  })), [count]);

  return (
    <div style={{ position: "absolute", inset: 0, overflow: "hidden", pointerEvents: "none" }} aria-hidden>
      <style>{`
        @keyframes moneyFall {
          0%   { transform: translate3d(0, -8%, 0) rotate(0deg); opacity: 0; }
          12%  { opacity: 1; }
          88%  { opacity: 1; }
          100% { transform: translate3d(var(--drift, 0), 120vh, 0) rotate(var(--rot, 0deg)); opacity: 0; }
        }
        .money-bill {
          position: absolute;
          top: -60px;
          will-change: transform, opacity;
          animation: moneyFall linear infinite;
        }
      `}</style>
      {items.map((it, i) => (
        <div
          key={i}
          className="money-bill"
          style={{
            left: `${it.left}%`,
            animationDuration: `${it.duration}s`,
            animationDelay: `${it.delay}s`,
            transform: `scale(${it.scale})`,
            opacity: opacity * it.op,
            "--drift": `${it.drift}px`,
            "--rot": `${it.rot}deg`,
          }}
        >
          <MoneyBill />
        </div>
      ))}
    </div>
  );
};

/* Small, schematic — line-art bill rather than illustrated */
const MoneyBill = () => (
  <svg width="56" height="28" viewBox="0 0 56 28" style={{ display: "block" }}>
    <rect x="0.5" y="0.5" width="55" height="27" rx="1.5"
          fill="none" stroke="var(--good)" strokeWidth="0.8" />
    <rect x="3" y="3" width="50" height="22" rx="1" fill="none" stroke="var(--good)" strokeOpacity="0.35" strokeWidth="0.5" />
    <circle cx="28" cy="14" r="6" fill="none" stroke="var(--good)" strokeWidth="0.6" />
    <text x="28" y="17.2" textAnchor="middle" fontFamily="var(--font-mono)" fontSize="8" fontWeight="600" fill="var(--good)">$</text>
  </svg>
);

window.MoneyRain = MoneyRain;