import React from 'react';

const OceanFoam = () => {
  return (
    <svg
      className="absolute bottom-0 left-0 w-full h-32 animate-wave"
      viewBox="0 0 1440 320"
      preserveAspectRatio="none"
    >
      <path
        fill="#ffffff"
        fillOpacity="0.3"
        d="M0,160 C360,240 1080,80 1440,160 L1440,320 L0,320 Z"
      />
      <style jsx>{`
        .animate-wave {
          animation: waveFoam 6s ease-in-out infinite alternate;
        }

        @keyframes waveFoam {
          0% {
            transform: translateY(0) scaleY(1);
          }
          100% {
            transform: translateY(5px) scaleY(1.02);
          }
        }
      `}</style>
    </svg>
  );
};

export default OceanFoam;

