Hero section

"use client"
import { useEffect, useRef } from "react"
import { gsap } from "gsap"
import { ScrollTrigger } from "gsap/ScrollTrigger"
import ThreeBackground from "./three-background"

// Register ScrollTrigger plugin
gsap.registerPlugin(ScrollTrigger)

export default function HeroSection() {
  const heroRef = useRef<HTMLDivElement>(null)
  const titleRef = useRef<HTMLHeadingElement>(null)
  const subtitleRef = useRef<HTMLParagraphElement>(null)
  const ctaRef = useRef<HTMLDivElement>(null)
  const decorativeRef = useRef<HTMLDivElement>(null)
  const scrollIndicatorRef = useRef<HTMLDivElement>(null)

  useEffect(() => {
    const ctx = gsap.context(() => {
      // Create main timeline
      const tl = gsap.timeline({ delay: 0.5 })

      // Animate decorative elements first
      tl.fromTo(
        decorativeRef.current?.children || [],
        { 
          scale: 0, 
          rotation: 180, 
          opacity: 0 
        },
        { 
          scale: 1, 
          rotation: 0, 
          opacity: 0.1, 
          duration: 1.5, 
          ease: "back.out(1.7)",
          stagger: 0.1
        }
      )

      // Animate title with split animation
      .fromTo(
        titleRef.current,
        { 
          y: 100, 
          opacity: 0,
          rotationX: 90,
          transformOrigin: "50% 50%"
        },
        { 
          y: 0, 
          opacity: 1, 
          rotationX: 0,
          duration: 1.4, 
          ease: "power4.out"
        },
        "-=1.2"
      )

      // Animate subtitle with typewriter effect
      .fromTo(
        subtitleRef.current,
        { 
          y: 50, 
          opacity: 0,
          scale: 0.8
        },
        { 
          y: 0, 
          opacity: 1, 
          scale: 1,
          duration: 1.2, 
          ease: "power3.out"
        },
        "-=0.8"
      )

      // Animate CTA buttons with stagger
      .fromTo(
        ctaRef.current?.children || [],
        { 
          y: 40, 
          opacity: 0,
          scale: 0.8
        },
        { 
          y: 0, 
          opacity: 1, 
          scale: 1,
          duration: 0.8, 
          ease: "back.out(1.7)",
          stagger: 0.15
        },
        "-=0.6"
      )

      // Animate scroll indicator
      .fromTo(
        scrollIndicatorRef.current,
        { 
          opacity: 0,
          y: -20
        },
        { 
          opacity: 1,
          y: 0,
          duration: 0.8,
          ease: "power2.out"
        },
        "-=0.3"
      )

      // Continuous floating animations
      gsap.to(decorativeRef.current?.children || [], {
        y: "random(-20, 20)",
        x: "random(-10, 10)",
        rotation: "random(-5, 5)",
        duration: "random(3, 6)",
        ease: "sine.inOut",
        repeat: -1,
        yoyo: true,
        stagger: 0.2
      })

      // Scroll indicator bounce
      gsap.to(scrollIndicatorRef.current, {
        y: 10,
        duration: 1.5,
        ease: "power2.inOut",
        repeat: -1,
        yoyo: true,
        delay: 2
      })

      // Parallax effect on scroll
      gsap.to(heroRef.current, {
        yPercent: -30,
        ease: "none",
        scrollTrigger: {
          trigger: heroRef.current,
          start: "top bottom",
          end: "bottom top",
          scrub: 1,
        },
      })

      // Text parallax
      gsap.to([titleRef.current, subtitleRef.current], {
        yPercent: -20,
        ease: "none",
        scrollTrigger: {
          trigger: heroRef.current,
          start: "top bottom",
          end: "bottom top",
          scrub: 2,
        },
      })

      // CTA hover animations
      const buttons = ctaRef.current?.children || []
      Array.from(buttons).forEach((button) => {
        const btn = button as HTMLElement
        btn.addEventListener('mouseenter', () => {
          gsap.to(btn, {
            scale: 1.05,
            duration: 0.3,
            ease: "power2.out"
          })
        })
        btn.addEventListener('mouseleave', () => {
          gsap.to(btn, {
            scale: 1,
            duration: 0.3,
            ease: "power2.out"
          })
        })
      })

    }, heroRef)

    return () => ctx.revert()
  }, [])

  return (
    <section 
      id="home" 
      className="relative h-screen flex items-center justify-center overflow-hidden bg-white dark:bg-gray-900"
    >
      <ThreeBackground />
      
      {/* Gradient overlay for better contrast */}
      <div className="absolute inset-0 bg-gradient-to-b from-transparent via-black/20 to-black/40 dark:via-black/40 dark:to-black/60 z-0"></div>
      
      {/* Decorative floating elements */}
      <div ref={decorativeRef} className="absolute inset-0 pointer-events-none z-5">
        <div className="absolute top-1/4 left-1/4 w-32 h-32 bg-gradient-to-br from-violet-500/20 to-purple-500/20 dark:from-violet-400/30 dark:to-purple-400/30 rounded-full blur-xl"></div>
        <div className="absolute top-1/3 right-1/4 w-24 h-24 bg-gradient-to-br from-blue-500/20 to-violet-500/20 dark:from-blue-400/30 dark:to-violet-400/30 rounded-full blur-xl"></div>
        <div className="absolute bottom-1/3 left-1/3 w-40 h-40 bg-gradient-to-br from-emerald-500/20 to-teal-500/20 dark:from-emerald-400/30 dark:to-teal-400/30 rounded-full blur-xl"></div>
        <div className="absolute bottom-1/4 right-1/3 w-28 h-28 bg-gradient-to-br from-cyan-500/20 to-blue-500/20 dark:from-cyan-400/30 dark:to-blue-400/30 rounded-full blur-xl"></div>
      </div>

      {/* Main content */}
      <div ref={heroRef} className="relative z-10 text-center px-6 max-w-6xl mx-auto">
        <h1 
          ref={titleRef} 
          className="text-5xl sm:text-6xl md:text-7xl lg:text-8xl font-black text-white dark:text-gray-100 mb-6 leading-[0.9] tracking-tight"
        >
          <span className="block text-slate-900 dark:text-white">
            Creative
          </span>
          <span className="block bg-gradient-to-r from-violet-400 via-purple-400 to-cyan-400 dark:from-violet-300 dark:via-purple-300 dark:to-cyan-300 bg-clip-text text-transparent">
            Developer
          </span>
        </h1>
        
        <p 
          ref={subtitleRef} 
          className="text-lg sm:text-xl md:text-2xl text-slate-900 dark:text-gray-300/90 mb-12 max-w-3xl mx-auto leading-relaxed font-light"
        >
          Crafting exceptional digital experiences with cutting-edge technologies and innovative design solutions
        </p>
        
        <div 
          ref={ctaRef} 
          className="flex flex-col sm:flex-row gap-6 justify-center items-center"
        >
          <button className="group relative px-10 py-5 bg-gradient-to-r from-violet-600 via-purple-600 to-cyan-600 dark:from-violet-500 dark:via-purple-500 dark:to-cyan-500 rounded-full text-white font-semibold text-lg overflow-hidden transition-all duration-300 hover:shadow-2xl hover:shadow-violet-500/25 dark:hover:shadow-violet-400/25 min-w-[200px] border border-violet-500/20 dark:border-violet-400/20">
            <span className="relative z-10 flex items-center justify-center gap-2">
              View Portfolio
              <svg className="w-5 h-5 group-hover:translate-x-1 transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 8l4 4m0 0l-4 4m4-4H3" />
              </svg>
            </span>
            <div className="absolute inset-0 bg-gradient-to-r from-violet-700 via-purple-700 to-cyan-700 dark:from-violet-600 dark:via-purple-600 dark:to-cyan-600 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
          </button>
          
          <button className="px-10 py-5 border-2 border-gray-300/30 dark:border-gray-400/30 rounded-full text-gray-100 dark:text-gray-200 font-semibold shadow text-lg backdrop-blur-sm hover:bg-white/10 dark:hover:bg-gray-100/10 hover:border-gray-300/50 dark:hover:border-gray-400/50 transition-all duration-300 min-w-[200px] hover:shadow-xl hover:shadow-white/10 dark:hover:shadow-gray-400/10">
            Contact Me
          </button>
        </div>
      </div>

      {/* Scroll indicator */}
      <div 
        ref={scrollIndicatorRef}
        className="absolute bottom-8 left-1/2 transform -translate-x-1/2 text-gray-300/70 dark:text-gray-400/70 flex flex-col items-center gap-2 z-10"
      >
        <span className="text-sm font-medium tracking-wider uppercase">Scroll</span>
        <div className="w-6 h-10 border-2 border-gray-300/30 dark:border-gray-400/30 rounded-full flex justify-center">
          <div className="w-1 h-3 bg-gray-300/50 dark:bg-gray-400/50 rounded-full mt-2"></div>
        </div>
      </div>
    </section>
  )
}