"use client";

import { motion } from "framer-motion";

export default function SeaWaves() {
  return (
    <div className="relative w-full h-[80px] md:h-[220px] overflow-hidden pointer-events-none md:-mt-[220px] z-20">
      {/* Background Layer 1 - Deep Blue */}
      <Wave
        color="var(--color-blue-deep)"
        opacity={0.15}
        duration={25}
        offset="0%"
        height="100%"
        flip={false}
      />

      {/* Middle Layer 2 - Brand Blue */}
      <Wave
        color="var(--color-blue-light)"
        opacity={0.3}
        duration={18}
        offset="-25%"
        height="90%"
        flip={true}
      />

      {/* Front Layer 3 - Light Blue */}
      <Wave
        color="var(--color-blue-primary)"
        opacity={0.5}
        duration={12}
        offset="-50%"
        height="80%"
        flip={false}
      />
    </div>
  );
}

function Wave({ color, opacity, duration, offset, height, flip }: any) {
  return (
    <motion.div
      className="absolute bottom-0 left-0 w-[400%] md:w-[200%] h-full"
      style={{
        height,
        opacity,
        scaleX: flip ? -1 : 1,
      }}
      animate={{ x: ["0%", "-50%"] }}
      transition={{
        duration,
        repeat: Infinity,
        ease: "linear",
      }}
    >
      <svg
        viewBox="0 0 1200 120"
        preserveAspectRatio="none"
        className="w-full h-full"
        style={{ fill: color }}
      >
        <path d="M0,0 C150,0 200,70 300,70 C400,70 450,0 600,0 C750,0 800,70 900,70 C1000,70 1050,0 1200,0 V120 H0 V0 Z" />
        {/* Repeat the path to allow seamless looping */}
        <path d="M1200,0 C1350,0 1400,70 1500,70 C1600,70 1650,0 1800,0 C1950,0 2000,70 2100,70 C2200,70 2250,0 2400,0 V120 H1200 V0 Z" />
      </svg>
    </motion.div>
  );
}