import Link from "next/link";
import { services } from "@/lib/services-data";

export default function ServicesCoreCapabilities() {
    return (
        <section className="py-24 section-dark relative overflow-hidden">
            {/* Background Accents */}
            <div className="absolute top-0 right-0 w-[800px] h-[800px] bg-primary/5 rounded-full blur-[120px] -translate-y-1/2 translate-x-1/2 pointer-events-none" />
            <div className="absolute bottom-0 left-0 w-[600px] h-[600px] bg-accent/5 rounded-full blur-[100px] translate-y-1/2 -translate-x-1/2 pointer-events-none" />

            <div className="max-w-[1280px] mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
                <div className="text-center max-w-3xl mx-auto mb-16 gsap-fade-up">
                    <span className="text-primary font-bold tracking-wider uppercase text-sm mb-3 block">What We Offer</span>
                    <h2 className="text-3xl md:text-5xl font-bold text-white mb-6">
                        Core <span className="text-primary">Capabilities</span>
                    </h2>
                    <p className="text-text-muted text-lg leading-relaxed">
                        From custom software to complex cloud infrastructure, our comprehensive suite of services is designed to scale with your business.
                    </p>
                </div>

                <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 gsap-stagger">
                    {services.map((service) => (
                        <Link
                            key={service.slug}
                            href={`/services/${service.slug}`}
                            className="card-glass-dark p-8 rounded-2xl border border-white/5 relative group overflow-hidden block transition-all duration-500 hover:-translate-y-2 hover:border-primary/30 shadow-sm hover:shadow-glow-green"
                        >
                            {/* Accent Glow on Hover */}
                            <div className="absolute inset-0 bg-gradient-to-br from-primary/10 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500" />

                            <div className="relative z-10">
                                <div className="size-16 rounded-2xl bg-white/5 backdrop-blur-md border border-white/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-4xl">{service.icon}</span>
                                </div>

                                <h3 className="text-2xl font-bold text-white mb-3 group-hover:text-primary transition-colors duration-300">
                                    {service.title}
                                </h3>

                                <p className="text-text-muted text-base leading-relaxed mb-6 block">
                                    {service.shortDescription}
                                </p>

                                <span className="inline-flex items-center gap-2 text-primary font-semibold text-sm tracking-wide group-hover:translate-x-1 transition-transform">
                                    Explore Service
                                    <span className="material-symbols-outlined text-lg">arrow_forward</span>
                                </span>
                            </div>
                        </Link>
                    ))}
                </div>
            </div>
        </section>
    );
}
