"use client"

import Link from "next/link"
import { Button } from "@/components/ui/button"
import { ArrowRight, Sparkles, Code2, Rocket, Zap, Star, Layers, Globe } from "lucide-react"
import { useEffect, useRef, useState } from "react"

// Pre-computed extreme particle data
const EXTREME_PARTICLES = [
    // Cosmic dust particles
    { left: 10, top: 15, delay: 0, duration: 25, size: 4, type: 'cosmic' },
    { left: 25, top: 8, delay: 3, duration: 22, size: 3, type: 'cosmic' },
    { left: 40, top: 22, delay: 6, duration: 28, size: 5, type: 'cosmic' },
    { left: 55, top: 5, delay: 9, duration: 24, size: 4, type: 'cosmic' },
    { left: 70, top: 18, delay: 12, duration: 26, size: 3, type: 'cosmic' },
    { left: 85, top: 10, delay: 15, duration: 23, size: 4, type: 'cosmic' },
    { left: 15, top: 45, delay: 2, duration: 27, size: 3, type: 'cosmic' },
    { left: 88, top: 35, delay: 8, duration: 25, size: 5, type: 'cosmic' },
    // Floating orbs
    { left: 5, top: 25, delay: 4, duration: 30, size: 80, type: 'orb' },
    { left: 92, top: 55, delay: 10, duration: 35, size: 60, type: 'orb' },
    { left: 20, top: 70, delay: 7, duration: 28, size: 50, type: 'orb' },
    { left: 75, top: 80, delay: 14, duration: 32, size: 70, type: 'orb' },
    // Energy rings
    { left: 50, top: 50, delay: 0, duration: 15, size: 200, type: 'ring' },
    { left: 50, top: 50, delay: 5, duration: 15, size: 200, type: 'ring' },
    { left: 50, top: 50, delay: 10, duration: 15, size: 200, type: 'ring' },
    // Quantum particles
    { left: 30, top: 30, delay: 1, duration: 8, size: 6, type: 'quantum' },
    { left: 60, top: 20, delay: 3, duration: 10, size: 8, type: 'quantum' },
    { left: 80, top: 40, delay: 5, duration: 9, size: 5, type: 'quantum' },
    { left: 20, top: 60, delay: 7, duration: 11, size: 7, type: 'quantum' },
    { left: 70, top: 70, delay: 9, duration: 8, size: 6, type: 'quantum' },
]

export function HeroSection() {
    const heroRef = useRef<HTMLDivElement>(null)
    const [mousePosition, setMousePosition] = useState({ x: 0.5, y: 0.5 })

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

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

    return (
        <section ref={heroRef} className="relative overflow-hidden min-h-screen flex items-center bg-background">
            {/* Extreme animated background layers */}
            <div className="absolute inset-0">
                {/* Morphing gradient mesh */}
                <div className="absolute inset-0 morphing-bg opacity-30" />

                {/* Cyber grid */}
                <div className="absolute inset-0 cyber-grid opacity-20" />

                {/* Plasma orbs */}
                <div
                    className="absolute w-[600px] h-[600px] rounded-full liquid-blob opacity-40 blur-3xl pointer-events-none"
                    style={{
                        background: `radial-gradient(circle, hsl(var(--primary)) 0%, hsl(280, 65%, 60%) 50%, transparent 70%)`,
                        top: '10%',
                        right: '10%',
                        transform: `translate(${mousePosition.x * 50}px, ${mousePosition.y * 50}px)`,
                        transition: 'transform 0.5s cubic-bezier(0.23, 1, 0.32, 1)',
                    }}
                />
                <div
                    className="absolute w-[500px] h-[500px] rounded-full liquid-blob opacity-30 blur-3xl pointer-events-none"
                    style={{
                        background: `radial-gradient(circle, hsl(280, 65%, 60%) 0%, hsl(320, 75%, 55%) 50%, transparent 70%)`,
                        bottom: '10%',
                        left: '5%',
                        transform: `translate(${-mousePosition.x * 40}px, ${-mousePosition.y * 40}px)`,
                        transition: 'transform 0.5s cubic-bezier(0.23, 1, 0.32, 1)',
                        animationDelay: '-10s',
                    }}
                />
                <div
                    className="absolute w-[400px] h-[400px] rounded-full liquid-blob opacity-25 blur-3xl pointer-events-none"
                    style={{
                        background: `radial-gradient(circle, hsl(199, 89%, 48%) 0%, hsl(var(--primary)) 50%, transparent 70%)`,
                        top: '50%',
                        left: '50%',
                        transform: `translate(-50%, -50%) translate(${mousePosition.x * 30}px, ${mousePosition.y * 30}px)`,
                        transition: 'transform 0.5s cubic-bezier(0.23, 1, 0.32, 1)',
                        animationDelay: '-5s',
                    }}
                />
            </div>

            {/* Extreme particles */}
            <div className="absolute inset-0 pointer-events-none overflow-hidden">
                {EXTREME_PARTICLES.map((particle, i) => {
                    if (particle.type === 'cosmic') {
                        return (
                            <div
                                key={i}
                                className="cosmic-dust"
                                style={{
                                    left: `${particle.left}%`,
                                    top: `${particle.top}%`,
                                    width: `${particle.size}px`,
                                    height: `${particle.size}px`,
                                    animationDelay: `${particle.delay}s`,
                                    animationDuration: `${particle.duration}s`,
                                }}
                            />
                        )
                    } else if (particle.type === 'orb') {
                        return (
                            <div
                                key={i}
                                className="absolute rounded-full quantum-particle"
                                style={{
                                    left: `${particle.left}%`,
                                    top: `${particle.top}%`,
                                    width: `${particle.size}px`,
                                    height: `${particle.size}px`,
                                    background: `radial-gradient(circle, hsl(var(--primary) / 0.3), transparent)`,
                                    filter: 'blur(1px)',
                                    animationDelay: `${particle.delay}s`,
                                    animationDuration: `${particle.duration}s`,
                                }}
                            />
                        )
                    } else if (particle.type === 'ring') {
                        return (
                            <div
                                key={i}
                                className="energy-wave"
                                style={{
                                    left: `${particle.left}%`,
                                    top: `${particle.top}%`,
                                    width: `${particle.size}px`,
                                    height: `${particle.size}px`,
                                    marginLeft: `-${particle.size / 2}px`,
                                    marginTop: `-${particle.size / 2}px`,
                                    animationDelay: `${particle.delay}s`,
                                }}
                            />
                        )
                    } else {
                        return (
                            <div
                                key={i}
                                className="absolute rounded-full"
                                style={{
                                    left: `${particle.left}%`,
                                    top: `${particle.top}%`,
                                    width: `${particle.size}px`,
                                    height: `${particle.size}px`,
                                    background: `linear-gradient(135deg, hsl(var(--primary)), hsl(280, 65%, 60%))`,
                                    boxShadow: `0 0 ${particle.size * 2}px hsl(var(--primary) / 0.5)`,
                                    animation: `quantum ${particle.duration}s ease-in-out infinite`,
                                    animationDelay: `${particle.delay}s`,
                                }}
                            />
                        )
                    }
                })}
            </div>

            {/* Scan line effect */}
            <div className="absolute inset-0 scan-line pointer-events-none" />

            {/* Noise overlay */}
            <div className="absolute inset-0 noise-overlay opacity-50" />

            {/* Floating tech icons */}
            <div className="absolute inset-0 pointer-events-none">
                <div
                    className="absolute top-1/4 left-[5%] animate-float"
                    style={{ animationDelay: '0s' }}
                >
                    <div className="glass-extreme p-4 rounded-2xl breathing-glow">
                        <Code2 className="h-8 w-8 text-primary" suppressHydrationWarning />
                    </div>
                </div>
                <div
                    className="absolute top-1/3 right-[5%] animate-float"
                    style={{ animationDelay: '1s' }}
                >
                    <div className="glass-extreme p-4 rounded-2xl breathing-glow">
                        <Zap className="h-8 w-8 text-amber-500" suppressHydrationWarning />
                    </div>
                </div>
                <div
                    className="absolute bottom-1/3 left-[8%] animate-float"
                    style={{ animationDelay: '2s' }}
                >
                    <div className="glass-extreme p-4 rounded-2xl breathing-glow">
                        <Rocket className="h-8 w-8 text-cyan-500" suppressHydrationWarning />
                    </div>
                </div>
                <div
                    className="absolute top-[60%] right-[8%] animate-float"
                    style={{ animationDelay: '3s' }}
                >
                    <div className="glass-extreme p-4 rounded-2xl breathing-glow">
                        <Globe className="h-8 w-8 text-emerald-500" suppressHydrationWarning />
                    </div>
                </div>
                <div
                    className="absolute top-[20%] left-[45%] animate-float"
                    style={{ animationDelay: '4s' }}
                >
                    <div className="glass-extreme p-3 rounded-xl breathing-glow">
                        <Layers className="h-6 w-6 text-purple-500" suppressHydrationWarning />
                    </div>
                </div>
            </div>

            <div className="container relative z-10 flex flex-col items-center text-center pt-32 pb-20">
                {/* Extreme badge */}
                <div className="bounce-in mb-10">
                    <div className="relative group">
                        {/* Animated border */}
                        <div className="absolute -inset-1 rounded-full animated-border opacity-50 group-hover:opacity-100 transition-opacity" />

                        <div className="relative glass-extreme px-8 py-4 rounded-full flex items-center gap-3 cursor-default shake-hover">
                            <div className="relative">
                                <span className="absolute inset-0 rounded-full bg-primary animate-ping opacity-75" />
                                <span className="relative flex h-3 w-3">
                                    <Star className="h-3 w-3 text-primary-foreground" suppressHydrationWarning />
                                </span>
                            </div>
                            <Sparkles className="h-5 w-5 text-primary electric-glow" suppressHydrationWarning />
                            <span className="font-semibold text-sm dynamic-underline">Your Vision, Our Craft</span>
                            <Sparkles className="h-5 w-5 text-primary electric-glow" suppressHydrationWarning />
                        </div>
                    </div>
                </div>

                {/* Extreme H1 */}
                <h1 className="mb-10 text-5xl sm:text-6xl md:text-7xl lg:text-8xl xl:text-9xl font-black tracking-tighter leading-none">
                    <span className="block slide-up-fade" style={{ animationDelay: '0.1s' }}>
                        We Create
                    </span>
                    <span className="block mt-2 slide-up-fade" style={{ animationDelay: '0.2s' }}>
                        <span className="holographic">Digital</span>
                    </span>
                    <span className="block mt-2 slide-up-fade" style={{ animationDelay: '0.3s' }}>
                        <span className="extrude-3d cursor-default">Masterpieces</span>
                    </span>
                </h1>

                {/* Subheadline */}
                <p className="slide-up-fade mb-14 max-w-3xl text-lg sm:text-xl md:text-2xl text-muted-foreground leading-relaxed" style={{ animationDelay: '0.4s' }}>
                    Transforming bold ideas into{" "}
                    <span className="text-primary font-bold glow-text">extraordinary</span>{" "}
                    digital experiences that captivate, engage, and{" "}
                    <span className="holographic font-bold">inspire</span>.
                </p>

                {/* Extreme CTAs */}
                <div className="flex flex-col gap-5 sm:flex-row slide-up-fade" style={{ animationDelay: '0.5s' }}>
                    <Button
                        asChild
                        size="xl"
                        className="group relative overflow-hidden morphing-bg text-primary-foreground font-bold text-lg px-10 py-7 rounded-2xl breathing-glow ripple-button shake-hover"
                    >
                        <Link href="/quote">
                            <span className="relative z-10 flex items-center gap-2">
                                Launch Your Project
                                <Rocket className="h-5 w-5 transition-transform group-hover:translate-x-1 group-hover:-translate-y-1 group-hover:scale-125" suppressHydrationWarning />
                            </span>
                        </Link>
                    </Button>
                    <Button
                        asChild
                        variant="outline"
                        size="xl"
                        className="group glass-extreme font-bold text-lg px-10 py-7 rounded-2xl border-2 border-primary/30 hover:border-primary breathing-glow"
                    >
                        <Link href="/portfolio">
                            <span className="flex items-center gap-2">
                                Explore Our Work
                                <ArrowRight className="h-5 w-5 transition-transform group-hover:translate-x-2" suppressHydrationWarning />
                            </span>
                        </Link>
                    </Button>
                </div>

                {/* Extreme Statistics */}
                <div className="mt-28 grid grid-cols-1 sm:grid-cols-3 gap-8 w-full max-w-5xl">
                    {[
                        { value: "50+", label: "Projects Delivered", icon: Rocket, color: "from-blue-500 to-cyan-400" },
                        { value: "98%", label: "Client Satisfaction", icon: Sparkles, color: "from-purple-500 to-pink-400" },
                        { value: "5+", label: "Years of Excellence", icon: Zap, color: "from-amber-500 to-orange-400" },
                    ].map((stat, i) => (
                        <div
                            key={stat.label}
                            className="group slide-up-fade"
                            style={{ animationDelay: `${0.6 + i * 0.1}s` }}
                        >
                            <div className="relative">
                                {/* Glow ring on hover */}
                                <div className="absolute -inset-2 rounded-[2rem] opacity-0 group-hover:opacity-100 transition-opacity duration-500">
                                    <div className={`absolute inset-0 rounded-[2rem] bg-gradient-to-r ${stat.color} opacity-20 blur-xl`} />
                                </div>

                                <div className="relative glass-extreme rounded-[2rem] p-10 transition-all duration-500 group-hover:scale-105 group-hover:-translate-y-2 floating-island spotlight-follow">
                                    {/* Icon */}
                                    <div className={`inline-flex p-4 rounded-2xl bg-gradient-to-br ${stat.color} mb-6 breathing-glow`}>
                                        <stat.icon className="h-8 w-8 text-white" suppressHydrationWarning />
                                    </div>

                                    {/* Value */}
                                    <div className="text-5xl md:text-6xl font-black mb-3">
                                        <span className="holographic">{stat.value}</span>
                                    </div>

                                    {/* Label */}
                                    <p className="text-base text-muted-foreground font-medium dynamic-underline">
                                        {stat.label}
                                    </p>
                                </div>
                            </div>
                        </div>
                    ))}
                </div>

                {/* Scroll indicator */}
                <div className="absolute bottom-10 left-1/2 -translate-x-1/2 bounce-in" style={{ animationDelay: '1s' }}>
                    <div
                        className="scroll-indicator cursor-pointer hover:scale-125 transition-transform breathing-glow"
                        onClick={() => {
                            window.scrollTo({ top: window.innerHeight, behavior: 'smooth' })
                        }}
                    />
                </div>
            </div>

            {/* Gradient overlays */}
            <div className="absolute bottom-0 left-0 right-0 h-32 bg-gradient-to-t from-background to-transparent pointer-events-none" />
            <div className="absolute top-0 left-0 right-0 h-20 bg-gradient-to-b from-background/80 to-transparent pointer-events-none" />
        </section>
    )
}