'use client'

export default function HeroSection() {
  return (
    <section className="min-h-screen flex flex-col items-center justify-center relative px-4 overflow-hidden">
      {/* Background with water ripple SVG filter */}
      <svg className="absolute inset-0 w-full h-full" style={{ zIndex: 0 }}>
        <defs>
          <filter id="hero-ripple">
            <feTurbulence
              type="fractalNoise"
              baseFrequency="0.01 0.02"
              numOctaves={3}
              seed={5}
              result="turbulence"
            >
              <animate
                attributeName="seed"
                from="0"
                to="200"
                dur="20s"
                repeatCount="indefinite"
              />
            </feTurbulence>
            <feDisplacementMap
              in="SourceGraphic"
              in2="turbulence"
              scale={8}
              xChannelSelector="R"
              yChannelSelector="G"
            />
          </filter>
        </defs>
        <rect
          width="100%"
          height="100%"
          fill="url(#hero-gradient)"
          className="water-distortion"
          filter="url(#hero-ripple)"
        />
        <defs>
          <linearGradient id="hero-gradient" x1="0" y1="0" x2="1" y2="1">
            <stop offset="0%" stopColor="#0a0a0a" />
            <stop offset="40%" stopColor="#1a1a2e" />
            <stop offset="70%" stopColor="#16213e" />
            <stop offset="100%" stopColor="#0a0a0a" />
          </linearGradient>
        </defs>
      </svg>

      <div className="absolute inset-0 bg-gradient-to-b from-void via-nothing/50 to-void opacity-90" />

      <div className="relative z-10 text-center max-w-4xl">
        <p className="text-sloth/50 text-sm tracking-[0.3em] uppercase mb-6 animate-slow-pulse">
          everything flows
        </p>

        <h1 className="font-marker text-6xl md:text-8xl lg:text-9xl mb-6 wobble-1">
          <span className="text-flow-green">Flow</span>
          <span className="text-zen/90">Fi</span>
          <span className="text-zen/20">.</span>
        </h1>

        <p className="font-caveat text-2xl md:text-3xl text-zen/50 mb-12">
          Everything flows. The question is: <span className="text-flow-green/80">where?</span>
        </p>

        <a
          href="https://nofi.lol"
          className="inline-block border border-zen/10 px-6 py-3 text-sm text-zen/30 hover:text-flow-green/60 hover:border-flow-green/30 transition-all duration-1000"
        >
          ← back to NoFi
        </a>

        <div className="absolute bottom-8 left-1/2 -translate-x-1/2 animate-drift">
          <span className="text-zen/15 text-sm">scroll to flow ↓</span>
        </div>
      </div>
    </section>
  )
}