import type { Metadata } from "next";
import Image from "next/image";
import { notFound } from "next/navigation";
import Navbar from "@/components/Navbar";
import Footer from "@/components/Footer";
import { services, getServiceBySlug, getAllServiceSlugs } from "@/lib/services-data";
import Link from "next/link";

interface PageProps {
    params: Promise<{ slug: string }>;
}

export async function generateStaticParams() {
    return getAllServiceSlugs().map((slug) => ({ slug }));
}

export async function generateMetadata({ params }: PageProps): Promise<Metadata> {
    const { slug } = await params;
    const service = getServiceBySlug(slug);
    if (!service) return { title: "Service Not Found" };
    return {
        title: `${service.title} - Aasi Tech`,
        description: service.description,
    };
}

export default async function ServiceDetailPage({ params }: PageProps) {
    const { slug } = await params;
    const service = getServiceBySlug(slug);
    if (!service) notFound();

    return (
        <>
            <Navbar />

            {/* Hero */}
            <section className="relative pt-32 pb-24 md:pt-40 md:pb-32 px-4 flex justify-center overflow-hidden section-dark">
                {/* Background Accents */}
                <div className="absolute top-0 right-0 w-[600px] h-[600px] bg-primary/10 rounded-full blur-[100px] -translate-y-1/2 translate-x-1/3 pointer-events-none" />
                <div className="absolute bottom-0 left-0 w-[500px] h-[500px] bg-accent/10 rounded-full blur-[90px] translate-y-1/3 -translate-x-1/3 pointer-events-none" />

                <div className="max-w-[1280px] w-full grid md:grid-cols-2 gap-12 lg:gap-20 items-center relative z-10">
                    <div className="flex flex-col gap-8 text-left gsap-fade-up">
                        <div className="inline-flex items-center gap-2 px-4 py-1.5 rounded-full bg-white/5 border border-white/10 w-fit backdrop-blur-sm">
                            <span className="size-2.5 rounded-full bg-primary animate-pulse"></span>
                            <span className="text-xs font-bold uppercase tracking-widest text-white/80">{service.badge}</span>
                        </div>
                        <h1 className="text-4xl md:text-5xl lg:text-7xl font-bold leading-tight text-white tracking-tight">
                            {service.title} <span className="text-primary">Solutions</span>
                        </h1>
                        <p className="text-text-muted text-lg md:text-xl font-normal leading-relaxed max-w-xl">
                            {service.description}
                        </p>
                        <div className="flex flex-wrap gap-4 pt-4">
                            <Link href="/contact" className="btn-primary inline-flex items-center justify-center rounded-full px-8 py-4 text-white text-base font-bold shadow-glow-green hover:shadow-lg transition-all btn-hover-lift">
                                Schedule Consultation
                                <span className="material-symbols-outlined ml-2">arrow_forward</span>
                            </Link>
                            <Link href="/portfolio" className="inline-flex items-center justify-center rounded-full px-8 py-4 bg-white/5 border border-white/10 hover:bg-white/10 text-white text-base font-bold transition-all btn-hover-lift">
                                View Case Studies
                            </Link>
                        </div>
                    </div>
                    {service.heroImage && (
                        <div className="relative w-full aspect-square md:aspect-[4/3] rounded-[2rem] overflow-hidden shadow-2xl group border border-white/10 gsap-fade-up">
                            <div className="absolute inset-0 bg-gradient-to-tr from-charcoal/40 to-transparent z-10 transition-opacity group-hover:opacity-10 duration-500"></div>
                            <Image
                                src={service.heroImage}
                                alt={`${service.title} Illustration`}
                                fill
                                className="object-cover transition-transform duration-700 group-hover:scale-105"
                                sizes="(max-width: 768px) 100vw, 50vw"
                                priority
                            />
                        </div>
                    )}
                </div>
            </section>

            {/* Features / What We Offer */}
            <section className="py-24 bg-light-bg relative">
                <div className="max-w-[1280px] mx-auto px-4 sm:px-6 lg:px-8">
                    <div className="mb-16 text-center max-w-3xl mx-auto gsap-fade-up">
                        <h2 className="text-3xl md:text-4xl font-bold text-text-main mb-4">Key <span className="text-primary">Capabilities</span></h2>
                        <p className="text-text-muted text-lg">What makes our {service.title.toLowerCase()} stand out and drive results.</p>
                    </div>
                    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 gsap-stagger">
                        {service.features.map((feature, idx) => (
                            <div key={idx} className="card-modern group p-8 relative overflow-hidden flex flex-col items-start hover:-translate-y-2 transition-transform duration-500">
                                <div className="absolute top-0 left-0 w-0 h-1 bg-gradient-to-r from-primary to-primary-light group-hover:w-full transition-all duration-500 rounded-t-2xl"></div>
                                <div className="size-14 rounded-2xl bg-primary/10 flex items-center justify-center text-primary mb-6 group-hover:bg-primary group-hover:text-white transition-all duration-300">
                                    <span className="material-symbols-outlined text-3xl">{feature.icon}</span>
                                </div>
                                <h3 className="text-xl font-bold text-text-main mb-3">{feature.title}</h3>
                                <p className="text-text-muted text-base leading-relaxed">{feature.description}</p>
                            </div>
                        ))}
                    </div>
                </div>
            </section>

            {/* Process */}
            <section className="py-28 section-dark relative border-y border-white/5">
                <div className="max-w-[1280px] mx-auto px-4 sm:px-6 lg:px-8">
                    <div className="mb-20 text-center max-w-3xl mx-auto gsap-fade-up">
                        <span className="text-primary font-bold tracking-wider uppercase text-sm mb-3 block">Methodology</span>
                        <h2 className="text-3xl md:text-5xl font-bold text-white mb-6">Our <span className="text-primary">Process</span></h2>
                        <p className="text-text-muted text-lg">A proven methodology that delivers predictable, high-quality results.</p>
                    </div>

                    <div className="relative">
                        {/* Connecting Line */}
                        <div className="hidden lg:block absolute top-10 left-0 w-full h-[2px] bg-white/5 -z-10 transform -translate-y-1/2"></div>

                        <div className="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-5 gap-8 gsap-stagger">
                            {service.process.map((step, idx) => (
                                <div key={idx} className="relative flex flex-col items-center text-center group">
                                    <div className="w-20 h-20 rounded-full bg-charcoal border-4 border-white/10 shadow-glow-green/20 flex items-center justify-center text-primary font-bold text-xl mb-6 relative z-10 group-hover:border-primary group-hover:bg-primary/10 transition-all duration-300">
                                        {step.step}
                                    </div>
                                    <h4 className="font-bold text-white text-lg mb-3">{step.title}</h4>
                                    <p className="text-text-muted text-sm leading-relaxed px-2">{step.description}</p>
                                </div>
                            ))}
                        </div>
                    </div>
                </div>
            </section>

            {/* Tech Stack */}
            <section className="py-24 bg-white relative">
                <div className="max-w-[1280px] mx-auto px-4 sm:px-6 lg:px-8">
                    <div className="mb-16 text-center max-w-3xl mx-auto gsap-fade-up">
                        <h2 className="text-3xl md:text-4xl font-bold text-text-main mb-4">Technology <span className="text-primary">Stack</span></h2>
                        <p className="text-text-muted text-lg">Best-in-class tools and frameworks powering our solutions.</p>
                    </div>
                    <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-6 gsap-stagger">
                        {service.techStack.map((tech, idx) => (
                            <div key={idx} className="group flex flex-col items-center gap-4 p-8 bg-light-bg rounded-2xl border border-gray-100 shadow-sm hover:shadow-lg hover:-translate-y-1 hover:border-primary/20 transition-all duration-300">
                                <span className="material-symbols-outlined text-4xl text-gray-400 group-hover:text-primary transition-colors">{tech.icon}</span>
                                <span className="text-sm font-bold text-text-main text-center">{tech.name}</span>
                            </div>
                        ))}
                    </div>
                </div>
            </section>

            {/* Benefits */}
            <section className="py-24 bg-light-bg relative border-t border-gray-100">
                <div className="max-w-[1280px] mx-auto px-4 sm:px-6 lg:px-8">
                    <div className="mb-16 text-center max-w-3xl mx-auto gsap-fade-up">
                        <span className="text-primary font-bold tracking-wider uppercase text-sm mb-3 block">Why Us</span>
                        <h2 className="text-3xl md:text-4xl font-bold text-text-main mb-4">Key <span className="text-primary">Benefits</span></h2>
                        <p className="text-text-muted text-lg">The advantages of choosing Aasi Tech for your {service.title.toLowerCase()} needs.</p>
                    </div>
                    <div className="grid grid-cols-1 md:grid-cols-3 gap-8 gsap-stagger">
                        {service.benefits.map((benefit, idx) => (
                            <div key={idx} className="card-modern group p-10 text-center flex flex-col items-center hover:-translate-y-2 transition-transform duration-500">
                                <div className="size-20 rounded-full bg-primary/10 flex items-center justify-center text-primary mb-8 group-hover:bg-primary group-hover:text-white group-hover:shadow-glow-green transition-all duration-500">
                                    <span className="material-symbols-outlined text-4xl">{benefit.icon}</span>
                                </div>
                                <h3 className="text-2xl font-bold text-text-main mb-4">{benefit.title}</h3>
                                <p className="text-text-muted text-base leading-relaxed">{benefit.description}</p>
                            </div>
                        ))}
                    </div>
                </div>
            </section>

            {/* Final CTA */}
            <section className="relative py-28 section-dark overflow-hidden">
                <div className="absolute inset-0 bg-primary/5"></div>
                {/* Glow Orbs */}
                <div className="absolute top-1/2 left-0 w-[400px] h-[400px] bg-primary/10 rounded-full blur-[80px] -translate-y-1/2 -translate-x-1/2 pointer-events-none" />
                <div className="absolute top-1/2 right-0 w-[400px] h-[400px] bg-accent/10 rounded-full blur-[80px] -translate-y-1/2 translate-x-1/2 pointer-events-none" />

                <div className="max-w-[800px] mx-auto px-4 text-center relative z-10 gsap-fade-up">
                    <h2 className="text-4xl md:text-5xl font-bold text-white mb-6">Ready to Get Started?</h2>
                    <p className="text-text-muted text-xl mb-10 leading-relaxed">
                        Let us help you leverage {service.title.toLowerCase()} to transform your business. Schedule a free technical consultation today.
                    </p>
                    <div className="flex flex-col sm:flex-row gap-6 justify-center">
                        <Link href="/contact" className="btn-primary inline-flex items-center justify-center text-lg px-10 py-4 rounded-full shadow-glow-green hover:shadow-lg transition-all btn-hover-lift">
                            Let's Discuss Your Project
                            <span className="material-symbols-outlined ml-2">rocket_launch</span>
                        </Link>
                        <Link href="/pricing" className="inline-flex items-center justify-center rounded-full px-10 py-4 bg-white/5 border border-white/10 hover:bg-white/10 text-white text-lg font-bold transition-all btn-hover-lift">
                            View Pricing
                        </Link>
                    </div>
                </div>
            </section>

            <Footer />
        </>
    );
}
