"use client"

import { Card, CardContent, CardHeader } from "@/components/ui/card"
import { Code, Palette, Smartphone, LineChart, ArrowUpRight, Sparkles, Zap } from "lucide-react"
import Link from "next/link"
import { useRef, useState, useEffect } from "react"

const services = [
    {
        title: "Web Development",
        description: "Custom websites and web applications built with modern technologies like Next.js, React, and Node.js.",
        icon: Code,
        gradient: "from-blue-500 via-cyan-400 to-teal-400",
        accentColor: "hsl(199, 89%, 48%)",
        features: ["Next.js", "React", "Node.js"],
    },
    {
        title: "Mobile App Development",
        description: "Native and cross-platform mobile apps for iOS and Android using React Native and Flutter.",
        icon: Smartphone,
        gradient: "from-violet-500 via-purple-400 to-fuchsia-400",
        accentColor: "hsl(280, 65%, 60%)",
        features: ["React Native", "Flutter", "iOS & Android"],
    },
    {
        title: "UI/UX Design",
        description: "User-centric design solutions that enhance engagement, usability, and brand identity.",
        icon: Palette,
        gradient: "from-pink-500 via-rose-400 to-orange-400",
        accentColor: "hsl(340, 75%, 55%)",
        features: ["Figma", "Prototyping", "Design Systems"],
    },
    {
        title: "SEO Optimization",
        description: "Data-driven strategies to improve your search engine rankings, visibility, and organic traffic.",
        icon: LineChart,
        gradient: "from-amber-500 via-orange-400 to-red-400",
        accentColor: "hsl(30, 80%, 55%)",
        features: ["Analytics", "Keyword Research", "Technical SEO"],
    },
]

function ServiceCard({ service, index }: { service: typeof services[0]; index: number }) {
    const cardRef = useRef<HTMLDivElement>(null)
    const [rotateX, setRotateX] = useState(0)
    const [rotateY, setRotateY] = useState(0)
    const [isHovered, setIsHovered] = useState(false)
    const [mousePos, setMousePos] = useState({ x: 50, y: 50 })

    const handleMouseMove = (e: React.MouseEvent<HTMLDivElement>) => {
        if (!cardRef.current) return
        const rect = cardRef.current.getBoundingClientRect()
        const centerX = rect.left + rect.width / 2
        const centerY = rect.top + rect.height / 2
        const mouseX = e.clientX - centerX
        const mouseY = e.clientY - centerY

        setRotateX(-mouseY / 8)
        setRotateY(mouseX / 8)
        setMousePos({
            x: ((e.clientX - rect.left) / rect.width) * 100,
            y: ((e.clientY - rect.top) / rect.height) * 100,
        })
    }

    const handleMouseLeave = () => {
        setRotateX(0)
        setRotateY(0)
        setIsHovered(false)
    }

    return (
        <div
            ref={cardRef}
            className="group relative h-full slide-up-fade"
            style={{
                perspective: '1500px',
                animationDelay: `${index * 0.15}s`,
            }}
        >
            <Link href="/services" aria-label={`Learn more about ${service.title}`} className="block h-full">
                <div
                    className="relative h-full cursor-pointer transition-all duration-500"
                    style={{
                        transform: `rotateX(${rotateX}deg) rotateY(${rotateY}deg) translateZ(10px)`,
                        transformStyle: 'preserve-3d',
                    }}
                    onMouseMove={handleMouseMove}
                    onMouseEnter={() => setIsHovered(true)}
                    onMouseLeave={handleMouseLeave}
                >
                    {/* Extreme glow effect */}
                    <div
                        className={`absolute -inset-2 rounded-3xl transition-all duration-500 ${isHovered ? 'opacity-100' : 'opacity-0'}`}
                        style={{
                            background: `linear-gradient(135deg, ${service.accentColor}40, ${service.accentColor}20)`,
                            filter: 'blur(20px)',
                            transform: 'translateZ(-20px)',
                        }}
                    />

                    {/* Energy rings */}
                    {isHovered && (
                        <>
                            <div
                                className="absolute -inset-4 rounded-3xl border-2 border-primary/20 energy-wave"
                                style={{ animationDelay: '0s' }}
                            />
                            <div
                                className="absolute -inset-4 rounded-3xl border-2 border-primary/10 energy-wave"
                                style={{ animationDelay: '0.5s' }}
                            />
                        </>
                    )}

                    {/* Card */}
                    <Card className="relative h-full overflow-hidden glass-extreme rounded-3xl border-0 transition-all duration-500">
                        {/* Animated gradient overlay */}
                        <div
                            className="absolute inset-0 opacity-0 group-hover:opacity-100 transition-opacity duration-700"
                            style={{
                                background: `linear-gradient(135deg, ${service.accentColor}15 0%, transparent 50%, ${service.accentColor}10 100%)`,
                            }}
                        />

                        {/* Spotlight effect */}
                        <div
                            className="absolute inset-0 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none"
                            style={{
                                background: `radial-gradient(400px circle at ${mousePos.x}% ${mousePos.y}%, ${service.accentColor}25, transparent 50%)`,
                            }}
                        />

                        {/* Scan line effect on hover */}
                        {isHovered && (
                            <div className="absolute inset-0 scan-line pointer-events-none opacity-50" />
                        )}

                        <CardHeader className="relative z-10 pb-4">
                            {/* Icon container with extreme effects */}
                            <div
                                className={`relative w-20 h-20 rounded-2xl flex items-center justify-center mb-6 transition-all duration-500 group-hover:scale-110 group-hover:rotate-6`}
                                style={{
                                    background: `linear-gradient(135deg, ${service.accentColor}30, ${service.accentColor}10)`,
                                    boxShadow: isHovered ? `0 15px 50px ${service.accentColor}40, inset 0 1px 0 ${service.accentColor}20` : 'none',
                                    transform: `translateZ(30px)`,
                                }}
                            >
                                {/* Glow ring behind icon */}
                                <div
                                    className={`absolute inset-0 rounded-2xl transition-all duration-500 ${isHovered ? 'scale-125 opacity-100' : 'scale-100 opacity-0'}`}
                                    style={{
                                        background: `radial-gradient(circle, ${service.accentColor}30, transparent 70%)`,
                                        filter: 'blur(10px)',
                                    }}
                                />

                                <service.icon
                                    className="w-10 h-10 transition-all duration-500"
                                    style={{
                                        color: service.accentColor,
                                        filter: isHovered ? `drop-shadow(0 0 10px ${service.accentColor})` : 'none',
                                    }}
                                    suppressHydrationWarning
                                />

                                {/* Sparkle effect on hover */}
                                <Sparkles
                                    className="absolute -top-2 -right-2 w-5 h-5 text-primary opacity-0 group-hover:opacity-100 transition-all duration-500 group-hover:scale-125 electric-glow"
                                    suppressHydrationWarning
                                />

                                {/* Corner accents */}
                                <div
                                    className={`absolute -top-1 -left-1 w-3 h-3 rounded-full transition-all duration-500 ${isHovered ? 'scale-100 opacity-100' : 'scale-0 opacity-0'}`}
                                    style={{ background: service.accentColor, boxShadow: `0 0 10px ${service.accentColor}` }}
                                />
                            </div>

                            {/* Title with animated arrow */}
                            <h3 className="text-xl font-bold leading-tight flex items-center gap-2 group-hover:text-primary transition-colors duration-300">
                                <span className="dynamic-underline">{service.title}</span>
                                <ArrowUpRight
                                    className="h-5 w-5 opacity-0 -translate-x-3 -translate-y-3 group-hover:opacity-100 group-hover:translate-x-0 group-hover:translate-y-0 transition-all duration-500 text-primary"
                                    suppressHydrationWarning
                                />
                            </h3>
                        </CardHeader>

                        <CardContent className="relative z-10">
                            <p className="text-base text-muted-foreground group-hover:text-foreground/80 transition-colors duration-300 leading-relaxed mb-5">
                                {service.description}
                            </p>

                            {/* Feature tags with extreme hover effects */}
                            <div className="flex flex-wrap gap-2">
                                {service.features.map((feature, i) => (
                                    <span
                                        key={feature}
                                        className="px-4 py-1.5 rounded-full text-xs font-semibold transition-all duration-500 group-hover:scale-105"
                                        style={{
                                            background: `${service.accentColor}20`,
                                            color: service.accentColor,
                                            animationDelay: `${i * 0.1}s`,
                                            boxShadow: isHovered ? `0 4px 15px ${service.accentColor}20` : 'none',
                                        }}
                                    >
                                        {feature}
                                    </span>
                                ))}
                            </div>
                        </CardContent>

                        {/* Bottom gradient line */}
                        <div
                            className={`absolute bottom-0 left-0 right-0 h-1 transition-all duration-500 ${isHovered ? 'opacity-100' : 'opacity-0'}`}
                            style={{
                                background: `linear-gradient(90deg, transparent, ${service.accentColor}, transparent)`,
                            }}
                        />

                        {/* Shine effect */}
                        <div className="absolute inset-0 shine-effect pointer-events-none rounded-3xl" />
                    </Card>
                </div>
            </Link>
        </div>
    )
}

export function ServicesOverview() {
    const [isVisible, setIsVisible] = useState(false)
    const sectionRef = useRef<HTMLElement>(null)

    useEffect(() => {
        const observer = new IntersectionObserver(
            ([entry]) => {
                if (entry.isIntersecting) {
                    setIsVisible(true)
                }
            },
            { threshold: 0.1 }
        )

        if (sectionRef.current) {
            observer.observe(sectionRef.current)
        }

        return () => observer.disconnect()
    }, [])

    return (
        <section ref={sectionRef} className="py-32 bg-background relative overflow-hidden" id="services">
            {/* Extreme background effects */}
            <div className="absolute inset-0">
                <div className="absolute inset-0 morphing-bg opacity-20" />
                <div className="absolute inset-0 cyber-grid opacity-10" />

                {/* Floating orbs */}
                <div className="absolute top-20 left-20 w-72 h-72 bg-blue-500/10 rounded-full blur-3xl liquid-blob" />
                <div className="absolute bottom-20 right-20 w-96 h-96 bg-purple-500/10 rounded-full blur-3xl liquid-blob" style={{ animationDelay: '-10s' }} />
                <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[600px] h-[600px] bg-primary/5 rounded-full blur-3xl plasma-effect" />
            </div>

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

            <div className="container relative z-10">
                {/* Section header with extreme animations */}
                <div className={`text-center mb-20 transition-all duration-1000 ${isVisible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-20'}`}>
                    <div className="bounce-in mb-8">
                        <div className="relative inline-flex items-center gap-3 px-6 py-3 rounded-full glass-extreme shake-hover">
                            <div className="relative">
                                <span className="absolute inset-0 rounded-full bg-primary animate-ping opacity-75" />
                                <Zap className="relative h-5 w-5 text-primary" suppressHydrationWarning />
                            </div>
                            <span className="text-sm font-bold dynamic-underline">What We Do</span>
                            <Sparkles className="h-5 w-5 text-primary electric-glow" suppressHydrationWarning />
                        </div>
                    </div>

                    <h2 className="text-5xl md:text-6xl lg:text-7xl font-black mb-8 tracking-tight">
                        Our <span className="holographic">Expertise</span>
                    </h2>

                    <p className="text-xl md:text-2xl text-muted-foreground max-w-3xl mx-auto leading-relaxed">
                        We offer a comprehensive range of{" "}
                        <span className="text-primary font-bold glow-text">digital services</span>{" "}
                        to help your business{" "}
                        <span className="holographic font-bold">grow</span> and{" "}
                        <span className="holographic font-bold">succeed</span>.
                    </p>
                </div>

                {/* Services grid with extreme cards */}
                <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
                    {services.map((service, i) => (
                        <ServiceCard key={service.title} service={service} index={i} />
                    ))}
                </div>

                {/* Bottom CTA with extreme effects */}
                <div className={`text-center mt-20 transition-all duration-1000 delay-500 ${isVisible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-20'}`}>
                    <div className="glass-extreme inline-block px-10 py-5 rounded-2xl breathing-glow">
                        <p className="text-lg text-muted-foreground">
                            Need something custom?{" "}
                            <Link href="/contact" className="text-primary font-bold dynamic-underline">
                                Let&apos;s discuss your project
                            </Link>
                        </p>
                    </div>
                </div>
            </div>
        </section>
    )
}