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

export default function Services() {
    // Show all 9 services for the updated layout
    const displayedServices = services;

    return (
        <section className="py-28 bg-light-bg section-divider" id="services">
            <div className="max-w-[1280px] mx-auto px-4 sm:px-6 lg:px-8">
                <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 Do</span>
                    <h2 className="text-3xl md:text-5xl font-bold text-text-main mb-6">
                        Comprehensive <span className="gradient-text">Services</span>
                    </h2>
                    <p className="text-text-muted text-lg leading-relaxed">
                        From ideation to execution, we cover every aspect of the digital lifecycle.
                    </p>
                </div>
                {/* Modern responsive 3x3 grid */}
                <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 gsap-stagger">
                    {displayedServices.map((service) => (
                        <Link
                            key={service.slug}
                            href={`/services/${service.slug}`}
                            className="card-modern card-hover-lift shadow-sm hover:shadow-xl relative group overflow-hidden flex flex-col bg-white border border-gray-100 rounded-[1.5rem] transition-all duration-500"
                        >
                            {/* Top green gradient accent bar */}
                            <div className="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-primary to-primary-light transform scale-x-0 group-hover:scale-x-100 origin-left transition-transform duration-500 z-10" />

                            <div className="relative h-52 w-full overflow-hidden rounded-t-[1.5rem]">
                                {service.heroImage && (
                                    <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, (max-width: 1200px) 50vw, 33vw"
                                    />
                                )}
                                <div className="absolute inset-0 bg-gradient-to-t from-charcoal/40 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500" />
                            </div>
                            <div className="p-8 flex flex-col flex-1">
                                <div className="size-14 rounded-2xl bg-emerald-50 flex items-center justify-center text-primary mb-6 group-hover:bg-primary group-hover:text-white group-hover:scale-110 transition-all duration-500 shadow-sm group-hover:shadow-glow-green">
                                    <span className="material-symbols-outlined text-3xl">{service.icon}</span>
                                </div>
                                <h3 className="text-2xl font-bold mb-3 text-text-main group-hover:text-primary transition-colors duration-300">
                                    {service.title}
                                </h3>
                                <p className="text-text-muted text-base leading-relaxed mb-8 flex-1">
                                    {service.shortDescription}
                                </p>

                                <div className="mt-auto border-t border-gray-100 pt-6">
                                    <span className="inline-flex items-center gap-2 text-primary font-bold hover:text-primary-dark transition-colors">
                                        Learn more
                                        <span className="material-symbols-outlined text-lg group-hover:translate-x-1 transition-transform">arrow_forward</span>
                                    </span>
                                </div>
                            </div>
                        </Link>
                    ))}
                </div>

                {/* View All Services CTA */}
                <div className="text-center mt-16 gsap-fade-up">
                    <Link
                        href="/services"
                        className="btn-primary inline-flex items-center gap-2 px-10 py-4 text-base rounded-full shadow-glow-green hover:shadow-lg transition-all duration-300 btn-hover-lift"
                    >
                        View All Services
                        <span className="material-symbols-outlined">east</span>
                    </Link>
                </div>
            </div>
        </section>
    );
}
