import { useEffect, useRef, useState } from 'react'
import { gsap } from 'gsap'
import { ChevronDown } from 'lucide-react'
import { useReducedMotion } from '../hooks/useReducedMotion'

export default function HeroSection() {
  const sectionRef = useRef<HTMLElement>(null)
  const titleRef = useRef<HTMLHeadingElement>(null)
  const subtitleRef = useRef<HTMLParagraphElement>(null)
  const reducedMotion = useReducedMotion()
  const [subtitleText, setSubtitleText] = useState('')
  const fullSubtitle = 'identity · research · code'

  useEffect(() => {
    if (reducedMotion) {
      setSubtitleText(fullSubtitle)
      return
    }

    // Title entrance animation
    if (titleRef.current) {
      gsap.fromTo(
        titleRef.current,
        { y: 60, opacity: 0, scale: 0.95 },
        { y: 0, opacity: 1, scale: 1, duration: 1.4, ease: 'expo.out', delay: 0.3 }
      )
    }

    // Typing effect for subtitle
    let index = 0
    const interval = setInterval(() => {
      if (index <= fullSubtitle.length) {
        setSubtitleText(fullSubtitle.slice(0, index))
        index++
      } else {
        clearInterval(interval)
      }
    }, 80)

    return () => clearInterval(interval)
  }, [reducedMotion])

  const handleScrollDown = () => {
    const about = document.querySelector('#about')
    if (about) about.scrollIntoView({ behavior: 'smooth' })
  }

  return (
    <section
      ref={sectionRef}
      className="relative min-h-screen flex flex-col items-center justify-center overflow-hidden"
    >
      {/* Ambient shapes */}
      {!reducedMotion && (
        <>
          <div className="absolute top-1/5 left-1/5 w-[500px] h-[500px] rounded-full bg-pink-brand/5 blur-[100px] ambient-shape-1 pointer-events-none" />
          <div className="absolute bottom-1/4 right-1/5 w-[400px] h-[400px] rounded-full bg-pink-soft/5 blur-[80px] ambient-shape-2 pointer-events-none" />
          <div className="absolute top-1/3 right-1/4 w-2 h-2 rounded-full bg-pink-brand/30 ambient-shape-3 pointer-events-none" />
          <div className="absolute bottom-1/3 left-1/3 w-3 h-3 rounded-full bg-pink-soft/20 ambient-shape-1 pointer-events-none" style={{ animationDelay: '-5s' }} />
        </>
      )}

      {/* Main content */}
      <div className="relative z-10 text-center px-6">
        <h1
          ref={titleRef}
          className="font-mono font-light text-grey-900 select-none text-[clamp(1.75rem,7vw,10rem)] tracking-[0.05em] md:tracking-[0.15em] leading-[1.1]"
        >
          depoliticized.
        </h1>

        <p
          ref={subtitleRef}
          className="mt-6 font-display text-grey-500 text-sm md:text-base tracking-[0.3em] uppercase typing-cursor"
        >
          {subtitleText}
        </p>

        <div className="mt-12 flex justify-center">
          <div className="w-px h-16 bg-pink-brand/20 relative overflow-hidden">
            {!reducedMotion && (
              <div className="absolute top-0 left-0 w-full h-1/2 bg-pink-brand/60 animate-pulse-slow" />
            )}
          </div>
        </div>
      </div>

      {/* Scroll indicator */}
      <button
        onClick={handleScrollDown}
        className="absolute bottom-8 left-1/2 -translate-x-1/2 text-grey-500 hover:text-pink-brand transition-colors animate-float"
        aria-label="Scroll down"
      >
        <ChevronDown className="w-6 h-6" />
      </button>

      {/* Edge gradient fade */}
      <div className="absolute bottom-0 left-0 right-0 h-32 bg-skin-50" style={{ maskImage: 'linear-gradient(to bottom, transparent, black)' }} />
    </section>
  )
}
