"use client"

import { useEffect, useRef, useState } from "react"
import { Button } from "@/components/ui/button"
import { ArrowRight, ChevronDown } from "lucide-react"
import Link from "next/link"

function FloatingElement({ delay = 0, duration = 20, children, className = "" }: { 
  delay?: number
  duration?: number
  children: React.ReactNode
  className?: string 
}) {
  return (
    <div
      className={`absolute pointer-events-none ${className}`}
      style={{
        animation: `float ${duration}s ease-in-out ${delay}s infinite`,
      }}
    >
      {children}
    </div>
  )
}

function GridPattern() {
  return (
    <div className="absolute inset-0 overflow-hidden opacity-20">
      <div className="absolute inset-0" style={{
        backgroundImage: `
          linear-gradient(rgba(74, 222, 128, 0.1) 1px, transparent 1px),
          linear-gradient(90deg, rgba(74, 222, 128, 0.1) 1px, transparent 1px)
        `,
        backgroundSize: '60px 60px'
      }} />
    </div>
  )
}

function AnimatedText({ text, className = "" }: { text: string; className?: string }) {
  const [isVisible, setIsVisible] = useState(false)
  const ref = useRef<HTMLDivElement>(null)

  useEffect(() => {
    const timer = setTimeout(() => setIsVisible(true), 300)
    return () => clearTimeout(timer)
  }, [])

  return (
    <div ref={ref} className={`overflow-hidden ${className}`}>
      <div
        className={`transition-all duration-1000 ease-out ${
          isVisible ? "translate-y-0 opacity-100" : "translate-y-full opacity-0"
        }`}
      >
        {text}
      </div>
    </div>
  )
}

export function Hero() {
  const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 })
  const containerRef = useRef<HTMLDivElement>(null)

  useEffect(() => {
    const handleMouseMove = (e: MouseEvent) => {
      if (containerRef.current) {
        const rect = containerRef.current.getBoundingClientRect()
        setMousePosition({
          x: (e.clientX - rect.left - rect.width / 2) / 50,
          y: (e.clientY - rect.top - rect.height / 2) / 50,
        })
      }
    }

    window.addEventListener("mousemove", handleMouseMove)
    return () => window.removeEventListener("mousemove", handleMouseMove)
  }, [])

  return (
    <section
      ref={containerRef}
      className="relative min-h-screen flex items-center justify-center overflow-hidden pt-20"
    >
      {/* Background Elements */}
      <GridPattern />
      
      {/* Floating decorative elements */}
      <FloatingElement delay={0} duration={25} className="top-[15%] left-[10%]">
        <div className="w-32 h-32 border border-primary/20 rounded-full" />
      </FloatingElement>
      <FloatingElement delay={5} duration={30} className="top-[60%] right-[15%]">
        <div className="w-24 h-24 border border-primary/30 rotate-45" />
      </FloatingElement>
      <FloatingElement delay={10} duration={22} className="bottom-[20%] left-[20%]">
        <div className="w-16 h-16 bg-primary/10 rounded-lg" />
      </FloatingElement>
      
      {/* Glow effect */}
      <div
        className="absolute w-[600px] h-[600px] rounded-full bg-primary/10 blur-[120px] transition-transform duration-500 ease-out"
        style={{
          transform: `translate(${mousePosition.x * 2}px, ${mousePosition.y * 2}px)`,
        }}
      />

      <div className="relative z-10 mx-auto max-w-7xl px-6 lg:px-8 text-center">
        {/* Badge */}
        <div className="inline-flex items-center gap-2 px-4 py-2 mb-8 border border-border rounded-full bg-card/50 backdrop-blur-sm animate-fade-in">
          <span className="w-2 h-2 bg-primary rounded-full animate-pulse" />
          <span className="text-sm text-muted-foreground">Auckland, New Zealand</span>
        </div>

        {/* Main Heading */}
        <h1 className="text-5xl md:text-7xl lg:text-8xl font-bold tracking-tight leading-[0.9] mb-8">
          <AnimatedText text="Every Business" className="mb-2" />
          <AnimatedText text="Needs an" className="mb-2" />
          <span className="relative inline-block">
            <AnimatedText 
              text="I.T Guy" 
              className="text-primary"
            />
            <div className="absolute -inset-2 bg-primary/20 blur-2xl -z-10 animate-pulse" />
          </span>
        </h1>

        {/* Subtitle */}
        <p className="max-w-2xl mx-auto text-lg md:text-xl text-muted-foreground mb-12 animate-fade-in animation-delay-500">
          From websites and cloud infrastructure to computer repairs and I.T support — 
          we help small businesses thrive in the digital world.
        </p>

        {/* CTA Buttons */}
        <div className="flex flex-col sm:flex-row items-center justify-center gap-4 animate-fade-in animation-delay-700">
          <Button
            asChild
            size="lg"
            className="group bg-primary text-primary-foreground hover:bg-primary/90 px-8 py-6 text-lg transition-all duration-300 hover:scale-105 hover:shadow-xl hover:shadow-primary/25"
          >
            <Link href="#contact">
              Let&apos;s Talk
              <ArrowRight className="ml-2 w-5 h-5 transition-transform duration-300 group-hover:translate-x-1" />
            </Link>
          </Button>
          <Button
            asChild
            variant="outline"
            size="lg"
            className="px-8 py-6 text-lg border-border hover:bg-card hover:border-primary/50 transition-all duration-300"
          >
            <Link href="#services">Our Services</Link>
          </Button>
        </div>

        {/* Stats */}
        <div className="mt-20 grid grid-cols-2 md:grid-cols-4 gap-8 animate-fade-in animation-delay-1000">
          {[
            { value: "100+", label: "Happy Clients" },
            { value: "24/7", label: "Support" },
            { value: "NZ", label: "Based Hosting" },
            { value: "10+", label: "Years Experience" },
          ].map((stat, index) => (
            <div
              key={stat.label}
              className="group cursor-default"
              style={{ animationDelay: `${1200 + index * 100}ms` }}
            >
              <div className="text-3xl md:text-4xl font-bold text-foreground transition-colors duration-300 group-hover:text-primary">
                {stat.value}
              </div>
              <div className="text-sm text-muted-foreground mt-1">{stat.label}</div>
            </div>
          ))}
        </div>
      </div>

      {/* Scroll indicator */}
      <div className="absolute bottom-8 left-1/2 -translate-x-1/2 animate-bounce">
        <Link href="#services" className="flex flex-col items-center gap-2 text-muted-foreground hover:text-foreground transition-colors">
          <span className="text-xs tracking-widest uppercase">Scroll</span>
          <ChevronDown className="w-5 h-5" />
        </Link>
      </div>

      <style jsx>{`
        @keyframes float {
          0%, 100% { transform: translateY(0px) rotate(0deg); }
          50% { transform: translateY(-20px) rotate(5deg); }
        }
        
        .animate-fade-in {
          animation: fadeIn 0.8s ease-out forwards;
          opacity: 0;
        }
        
        @keyframes fadeIn {
          from { opacity: 0; transform: translateY(20px); }
          to { opacity: 1; transform: translateY(0); }
        }
        
        .animation-delay-500 { animation-delay: 500ms; }
        .animation-delay-700 { animation-delay: 700ms; }
        .animation-delay-1000 { animation-delay: 1000ms; }
      `}</style>
    </section>
  )
}