"use client"

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

// Pre-computed extreme particle data
const CTA_PARTICLES = [
    // Cosmic particles
    { left: 5, top: 10, delay: 0, duration: 20, size: 4, type: 'cosmic' },
    { left: 15, top: 25, delay: 3, duration: 25, size: 3, type: 'cosmic' },
    { left: 88, top: 15, delay: 5, duration: 22, size: 5, type: 'cosmic' },
    { left: 95, top: 40, delay: 8, duration: 28, size: 4, type: 'cosmic' },
    { left: 10, top: 70, delay: 12, duration: 24, size: 3, type: 'cosmic' },
    { left: 85, top: 85, delay: 15, duration: 26, size: 5, type: 'cosmic' },
    // Energy rings
    { left: 50, top: 50, delay: 0, duration: 12, size: 150, type: 'ring' },
    { left: 50, top: 50, delay: 4, duration: 12, size: 150, type: 'ring' },
    { left: 50, top: 50, delay: 8, duration: 12, size: 150, type: 'ring' },
    // Quantum particles
    { left: 25, top: 80, delay: 2, duration: 10, size: 8, type: 'quantum' },
    { left: 75, top: 20, delay: 6, duration: 12, size: 6, type: 'quantum' },
    { left: 40, top: 60, delay: 10, duration: 8, size: 10, type: 'quantum' },
]

export function CTASection() {
    const sectionRef = useRef<HTMLElement>(null)
    const [isVisible, setIsVisible] = useState(false)
    const [mousePosition, setMousePosition] = useState({ x: 0.5, y: 0.5 })

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

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

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

    useEffect(() => {
        const handleMouseMove = (e: MouseEvent) => {
            if (sectionRef.current) {
                const rect = sectionRef.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={sectionRef} className="relative py-32 overflow-hidden bg-background" aria-label="Call to action">
            {/* Extreme background effects */}
            <div className="absolute inset-0">
                {/* Morphing gradient */}
                <div className="absolute inset-0 morphing-bg opacity-25" />

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

                {/* Plasma orbs with mouse tracking */}
                <div
                    className="absolute w-[700px] h-[700px] rounded-full liquid-blob opacity-35 blur-3xl pointer-events-none"
                    style={{
                        background: 'radial-gradient(circle, hsl(var(--primary)) 0%, hsl(280, 65%, 60%) 50%, transparent 70%)',
                        top: '-30%',
                        right: '-15%',
                        transform: `translate(${mousePosition.x * 60}px, ${mousePosition.y * 60}px)`,
                        transition: 'transform 0.6s cubic-bezier(0.23, 1, 0.32, 1)',
                    }}
                />
                <div
                    className="absolute w-[600px] h-[600px] rounded-full liquid-blob opacity-25 blur-3xl pointer-events-none"
                    style={{
                        background: 'radial-gradient(circle, hsl(280, 65%, 60%) 0%, hsl(320, 75%, 55%) 50%, transparent 70%)',
                        bottom: '-30%',
                        left: '-15%',
                        transform: `translate(${-mousePosition.x * 40}px, ${-mousePosition.y * 40}px)`,
                        transition: 'transform 0.6s cubic-bezier(0.23, 1, 0.32, 1)',
                        animationDelay: '-12s',
                    }}
                />
                <div
                    className="absolute w-[400px] h-[400px] rounded-full liquid-blob opacity-20 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.6s cubic-bezier(0.23, 1, 0.32, 1)',
                        animationDelay: '-6s',
                    }}
                />
            </div>

            {/* Extreme particles */}
            <div className="absolute inset-0 pointer-events-none overflow-hidden">
                {CTA_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 === '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 quantum-particle"
                                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)`,
                                    animationDelay: `${particle.delay}s`,
                                    animationDuration: `${particle.duration}s`,
                                }}
                            />
                        )
                    }
                })}
            </div>

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

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

            <div className="container relative z-10 flex flex-col items-center text-center">
                <div
                    className={`max-w-5xl transition-all duration-1000 ${
                        isVisible ? 'opacity-100 translate-y-0 scale-100' : 'opacity-0 translate-y-20 scale-95'
                    }`}
                >
                    {/* Main CTA card with extreme effects */}
                    <div className="relative bounce-in">
                        {/* Extreme animated border */}
                        <div className="absolute -inset-2 rounded-[2.5rem] animated-border opacity-60" />

                        {/* Glow ring */}
                        <div className="absolute -inset-4 rounded-[3rem] opacity-30 breathing-glow">
                            <div className="absolute inset-0 rounded-[3rem] bg-gradient-to-r from-primary via-purple-500 to-pink-500 opacity-20 blur-2xl" />
                        </div>

                        <div className="relative glass-extreme rounded-[2.5rem] p-14 md:p-20 overflow-hidden">
                            {/* Inner glow */}
                            <div className="absolute inset-0 bg-gradient-to-br from-primary/15 via-transparent to-purple-500/15 opacity-60" />

                            {/* Plasma effect overlay */}
                            <div className="absolute inset-0 plasma-effect opacity-10" />

                            {/* Floating extreme icons */}
                            <div className="absolute top-10 left-10 animate-float" style={{ animationDelay: '0s' }}>
                                <div className="glass-extreme p-4 rounded-2xl breathing-glow">
                                    <Rocket className="w-8 h-8 text-primary" suppressHydrationWarning />
                                </div>
                            </div>
                            <div className="absolute top-16 right-16 animate-float" style={{ animationDelay: '1.5s' }}>
                                <div className="glass-extreme p-3 rounded-xl breathing-glow">
                                    <Zap className="w-7 h-7 text-amber-500" suppressHydrationWarning />
                                </div>
                            </div>
                            <div className="absolute bottom-12 left-20 animate-float" style={{ animationDelay: '3s' }}>
                                <div className="glass-extreme p-3 rounded-xl breathing-glow">
                                    <MessageCircle className="w-7 h-7 text-cyan-500" suppressHydrationWarning />
                                </div>
                            </div>
                            <div className="absolute bottom-20 right-24 animate-float" style={{ animationDelay: '4.5s' }}>
                                <div className="glass-extreme p-3 rounded-xl breathing-glow">
                                    <Star className="w-6 h-6 text-pink-500" suppressHydrationWarning />
                                </div>
                            </div>

                            <div className="relative z-10">
                                {/* Badge */}
                                <div className="bounce-in mb-10">
                                    <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" />
                                            <Sparkles className="relative h-5 w-5 text-primary" suppressHydrationWarning />
                                        </div>
                                        <span className="text-sm font-bold dynamic-underline">Let&apos;s Create Together</span>
                                        <Sparkles className="h-5 w-5 text-primary electric-glow" suppressHydrationWarning />
                                    </div>
                                </div>

                                {/* Heading */}
                                <h2 className="text-5xl md:text-6xl lg:text-7xl mb-10 text-foreground font-black tracking-tight leading-tight">
                                    Ready to Start Your{" "}
                                    <span className="holographic">Project</span>
                                    ?
                                </h2>

                                <p className="text-xl md:text-2xl mb-14 max-w-3xl text-muted-foreground leading-relaxed mx-auto">
                                    Let&apos;s build something{" "}
                                    <span className="text-primary font-bold glow-text">extraordinary</span>{" "}
                                    together. Get a free consultation and detailed project quote today.
                                </p>

                                {/* Extreme CTAs */}
                                <div className="flex flex-col sm:flex-row gap-6 justify-center">
                                    <Button
                                        asChild
                                        size="xl"
                                        className="group h-16 px-12 text-xl font-bold rounded-2xl morphing-bg text-primary-foreground breathing-glow ripple-button shake-hover relative overflow-hidden"
                                    >
                                        <Link href="/quote">
                                            <span className="relative z-10 flex items-center gap-3">
                                                Get a Free Quote
                                                <Rocket className="w-6 h-6 transition-transform group-hover:translate-x-2 group-hover:-translate-y-1 group-hover:scale-125" suppressHydrationWarning />
                                            </span>
                                        </Link>
                                    </Button>
                                    <Button
                                        asChild
                                        size="xl"
                                        variant="outline"
                                        className="group h-16 px-12 text-xl font-bold rounded-2xl glass-extreme border-2 border-primary/30 hover:border-primary breathing-glow"
                                    >
                                        <Link href="/contact">
                                            <MessageCircle className="mr-3 h-6 w-6 group-hover:rotate-12 transition-transform" suppressHydrationWarning />
                                            Contact Us
                                        </Link>
                                    </Button>
                                </div>

                                {/* Trust badges with extreme styling */}
                                <div className="flex items-center justify-center gap-8 mt-14">
                                    {[
                                        { icon: Zap, text: "Fast Response", color: "text-amber-500" },
                                        { icon: Rocket, text: "Free Consultation", color: "text-primary" },
                                        { icon: Sparkles, text: "Custom Solutions", color: "text-cyan-500" },
                                    ].map((badge, i) => (
                                        <div
                                            key={badge.text}
                                            className="flex items-center gap-2 glass-extreme px-4 py-2 rounded-full slide-up-fade"
                                            style={{ animationDelay: `${1 + i * 0.15}s` }}
                                        >
                                            <badge.icon className={`w-5 h-5 ${badge.color}`} suppressHydrationWarning />
                                            <span className="text-sm font-semibold">{badge.text}</span>
                                        </div>
                                    ))}
                                </div>
                            </div>

                            {/* Shine effect */}
                            <div className="absolute inset-0 shine-effect pointer-events-none rounded-[2.5rem]" />
                        </div>
                    </div>
                </div>
            </div>

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