import { useGlobal } from '@/lib/global'

/**
 * 文章波浪动画
 */
export default function WavesArea() {
  const { isDarkMode } = useGlobal()
  const color = isDarkMode ? '#18171d' : '#f7f9fe'

  return (
        <section className="main-hero-waves-area waves-area w-full absolute left-0 z-10 bottom-0">
            <svg className="waves-svg w-full h-[60px]" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" viewBox="0 24 150 28" preserveAspectRatio="none" shapeRendering="auto">
                <defs>
                    <path id="gentle-wave" d="M -160 44 c 30 0 58 -18 88 -18 s 58 18 88 18 s 58 -18 88 -18 s 58 18 88 18 v 44 h -352 Z"></path>
                </defs>
                <g className="parallax">
                    <use href="#gentle-wave" x="48" y="0"></use>
                    <use href="#gentle-wave" x="48" y="3"></use>
                    <use href="#gentle-wave" x="48" y="5"></use>
                    <use href="#gentle-wave" x="48" y="7"></use>
                </g>
            </svg>
            <style jsx global>{`
                /* Animation */

                .parallax > use {
                  animation: move-forever 30s cubic-bezier(0.55, 0.5, 0.45, 0.5) infinite;
                }
                .parallax > use:nth-child(1) {
                  animation-delay: -2s;
                  animation-duration: 7s;
                  fill: ${color};
                  opacity: 0.5;
                }
                .parallax > use:nth-child(2) {
                  animation-delay: -3s;
                  animation-duration: 10s;
                  fill: ${color};
                  opacity: 0.6;
                }
                .parallax > use:nth-child(3) {
                  animation-delay: -4s;
                  animation-duration: 13s;
                  fill: ${color};
                  opacity: 0.7;
                }
                .parallax > use:nth-child(4) {
                  animation-delay: -5s;
                  animation-duration: 20s;
                  fill: ${color};
                }
                
                @keyframes move-forever {
                  0% {
                    transform: translate3d(-90px, 0, 0);
                  }
                  100% {
                    transform: translate3d(85px, 0, 0);
                  }
                }
            `}
            </style>
        </section>
  )
}