Liquid Ocean

"use client";

import { useEffect, useRef } from "react";
import { motion } from "framer-motion";

interface LiquidOceanProps {
    className?: string;
}

export function LiquidOcean({ className = "" }: LiquidOceanProps) {
    return (
        <div className={`relative w-full h-full bg-zinc-950 overflow-hidden ${className}`} aria-hidden="true">
            {/* Deep glow */}
            <div className="absolute inset-x-0 bottom-0 h-2/3 bg-gradient-to-t from-blue-900/30 via-indigo-900/10 to-transparent" />

            {/* Wave layers */}
            {[
                { color: "rgba(37,99,235,0.18)", delay: 0, duration: 8, yOffset: "70%" },
                { color: "rgba(99,102,241,0.15)", delay: -2, duration: 10, yOffset: "75%" },
                { color: "rgba(147,51,234,0.12)", delay: -4, duration: 12, yOffset: "80%" },
            ].map((wave, i) => (
                <motion.div
                    key={i}
                    className="absolute inset-x-0"
                    style={{ top: wave.yOffset }}
                    animate={{ x: [0, -60, 0] }}
                    transition={{ duration: wave.duration, delay: wave.delay, repeat: Infinity, ease: "easeInOut" }}
                >
                    <svg
                        viewBox="0 0 1440 120"
                        fill="none"
                        xmlns="http://www.w3.org/2000/svg"
                        className="w-[200%]"
                        preserveAspectRatio="none"
                    >
                        <path
                            d={`M0,60 C240,${20 + i * 15} 480,${100 - i * 10} 720,60 C960,${20 + i * 15} 1200,${100 - i * 10} 1440,60 L1440,120 L0,120 Z`}
                            fill={wave.color}
                        />
                    </svg>
                </motion.div>
            ))}

            {/* Sparkle dots */}
            {Array.from({ length: 12 }).map((_, i) => (
                <motion.div
                    key={i}
                    className="absolute w-1 h-1 rounded-full bg-blue-300/60"
                    style={{ left: `${8 + i * 8}%`, top: `${65 + Math.sin(i) * 10}%` }}
                    animate={{ opacity: [0, 0.8, 0], y: [0, -20, 0] }}
                    transition={{ duration: 2 + i * 0.3, delay: i * 0.4, repeat: Infinity, ease: "easeInOut" }}
                />
            ))}

            {/* Top fade mask */}
            <div className="absolute inset-x-0 top-0 h-1/3 bg-gradient-to-b from-zinc-950 to-transparent pointer-events-none" />
        </div>
    );
}