'use client'

import { useEffect, useState } from 'react'

export function HeroSection() {
  const [isVisible, setIsVisible] = useState(false)

  useEffect(() => {
    setIsVisible(true)
  }, [])

  return (
    <section className="relative min-h-screen flex items-center justify-center overflow-hidden px-4">
      {/* Background network lines */}
      <div className="absolute inset-0 opacity-20">
        <svg className="w-full h-full" xmlns="http://www.w3.org/2000/svg">
          <defs>
            <pattern id="network" x="0" y="0" width="100" height="100" patternUnits="userSpaceOnUse">
              <path d="M 0 50 Q 25 25 50 50 T 100 50" stroke="oklch(0.45 0.12 110)" fill="none" strokeWidth="0.5" />
              <circle cx="50" cy="50" r="2" fill="oklch(0.45 0.12 110)" />
            </pattern>
          </defs>
          <rect width="100%" height="100%" fill="url(#network)" />
        </svg>
      </div>

      <div className={`relative z-10 text-center max-w-4xl transition-all duration-1000 ${isVisible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-8'}`}>
        <div className="mb-6 text-sm tracking-[0.3em] text-muted-foreground font-mono uppercase">
          {'>>>_ You made it'}
        </div>
        
        <h1 className="text-5xl md:text-7xl lg:text-8xl font-bold mb-8 font-mono mycelium-glow">
          <span className="block text-balance">
            myc0pun<span className="inline-block scale-x-[-1]">k</span><span className="inline-block scale-x-[-1]">z</span>
          </span>
        </h1>

        <div className="text-lg md:text-xl text-muted-foreground mb-12 max-w-2xl mx-auto font-mono leading-relaxed">
          <p className="text-balance">
            {'Congratulations. You found the underground of the underground.'}
          </p>
        </div>

        <div className="flex items-center justify-center gap-2 text-primary animate-bounce">
          <div className="text-sm font-mono tracking-wider">DESCEND</div>
          <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 14l-7 7m0 0l-7-7m7 7V3" />
          </svg>
        </div>
      </div>
    </section>
  )
}