'use client'

export default function HeroSection() {
  return (
    <section className="min-h-screen flex flex-col items-center justify-center relative px-4 overflow-hidden">
      {/* Animated gradient ocean background */}
      <div
        className="absolute inset-0 animate-flow-gradient"
        style={{
          backgroundSize: '400% 400%',
          backgroundImage: 'radial-gradient(ellipse at 20% 50%, #0f2847 0%, #0c1e3a 30%, #050d1a 70%), radial-gradient(ellipse at 80% 20%, #143561 0%, transparent 50%)',
        }}
      />

      {/* Subtle water ripple SVG */}
      <svg className="absolute inset-0 w-full h-full opacity-30" style={{ zIndex: 1 }}>
        <defs>
          <filter id="hero-ripple">
            <feTurbulence
              type="fractalNoise"
              baseFrequency="0.008 0.015"
              numOctaves={4}
              seed={5}
              result="turbulence"
            >
              <animate
                attributeName="seed"
                from="0"
                to="100"
                dur="30s"
                repeatCount="indefinite"
              />
            </feTurbulence>
            <feDisplacementMap
              in="SourceGraphic"
              in2="turbulence"
              scale={12}
              xChannelSelector="R"
              yChannelSelector="G"
            />
          </filter>
          <linearGradient id="hero-water" x1="0" y1="0" x2="0" y2="1">
            <stop offset="0%" stopColor="#2dd4bf" stopOpacity="0.08" />
            <stop offset="50%" stopColor="#5eead4" stopOpacity="0.04" />
            <stop offset="100%" stopColor="#2dd4bf" stopOpacity="0.06" />
          </linearGradient>
        </defs>
        <rect
          width="100%"
          height="100%"
          fill="url(#hero-water)"
          className="water-distortion"
          filter="url(#hero-ripple)"
        />
      </svg>

      {/* Soft radial glow */}
      <div
        className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[600px] h-[600px] rounded-full animate-breathe"
        style={{
          background: 'radial-gradient(circle, rgba(45, 212, 191, 0.08) 0%, transparent 70%)',
        }}
      />

      <div className="relative z-10 text-center max-w-4xl">
        <p className="text-mist/60 text-sm tracking-[0.4em] uppercase mb-8 animate-glow-pulse font-light">
          everything flows
        </p>

        <h1 className="font-sans font-extralight text-7xl md:text-9xl lg:text-[10rem] mb-8 tracking-tighter leading-none">
          <span className="text-flow bg-gradient-to-r from-flow-light via-flow to-glow bg-clip-text text-transparent animate-flow-gradient" style={{ backgroundSize: '200% 200%' }}>
            Flow
          </span>
          <span className="text-foam/80">Fi</span>
          <span className="text-flow/20">.</span>
        </h1>

        <p className="font-caveat text-2xl md:text-3xl text-foam/45 mb-14">
          Everything flows. The question is: <span className="text-flow/70">where?</span>
        </p>

        <div className="absolute bottom-10 left-1/2 -translate-x-1/2 animate-current">
          <span className="text-foam/15 text-sm font-light tracking-wide">scroll to flow ↓</span>
        </div>
      </div>
    </section>
  )
}