/**
 * Atmospheric flowing-wave backdrop used behind hero sections.
 * Pure CSS/SVG — soft green→yellow→blue ribbons drifting over a misty wash.
 */
export function Aurora({ className = "" }: { className?: string }) {
  return (
    <div
      aria-hidden="true"
      className={`pointer-events-none absolute inset-0 overflow-hidden ${className}`}
    >
      {/* Color wash */}
      <div className="absolute inset-0 wash-aurora" />

      {/* Drifting ribbon waves */}
      <svg
        className="absolute -top-1/4 right-0 h-[150%] w-[120%] animate-drift opacity-70"
        viewBox="0 0 1200 600"
        fill="none"
        preserveAspectRatio="xMidYMid slice"
      >
        <defs>
          <linearGradient id="ribbonA" x1="0" y1="0" x2="1200" y2="600">
            <stop offset="0" stopColor="#bff0c8" stopOpacity="0" />
            <stop offset="0.5" stopColor="#7fdca0" stopOpacity="0.9" />
            <stop offset="1" stopColor="#9fd6f5" stopOpacity="0" />
          </linearGradient>
          <linearGradient id="ribbonB" x1="0" y1="0" x2="1200" y2="600">
            <stop offset="0" stopColor="#fbe7a1" stopOpacity="0" />
            <stop offset="0.5" stopColor="#cfe98a" stopOpacity="0.8" />
            <stop offset="1" stopColor="#8fe0d0" stopOpacity="0" />
          </linearGradient>
          <linearGradient id="ribbonC" x1="0" y1="0" x2="1200" y2="600">
            <stop offset="0" stopColor="#a7d8f7" stopOpacity="0" />
            <stop offset="0.5" stopColor="#7fc8f0" stopOpacity="0.7" />
            <stop offset="1" stopColor="#bff0c8" stopOpacity="0" />
          </linearGradient>
        </defs>
        {Array.from({ length: 7 }).map((_, i) => (
          <path
            key={i}
            d={`M-50 ${120 + i * 26} C 300 ${40 + i * 30}, 620 ${
              260 + i * 18
            }, 1260 ${90 + i * 30}`}
            stroke={`url(#ribbon${["A", "B", "C"][i % 3]})`}
            strokeWidth={1.6}
            fill="none"
          />
        ))}
      </svg>
    </div>
  );
}