export default function ServicesProcess() {
    return (
        <section className="py-24 section-dark relative border-y border-white/5">
            <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-20 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">Delivery Process</span></h2>
                    <p className="text-text-muted text-lg">A transparent, agile approach to delivering predictable, high-quality results.</p>
                </div>

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

                    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 gsap-stagger">
                        <div className="flex flex-col items-center text-center group">
                            <div className="w-24 h-24 bg-charcoal rounded-full border-4 border-white/10 flex items-center justify-center shadow-glow-green/20 mb-8 relative z-10 group-hover:border-primary group-hover:bg-primary/10 transition-all duration-300">
                                <span className="text-3xl font-black text-primary">01</span>
                            </div>
                            <h3 className="text-2xl font-bold text-white mb-4">Discovery</h3>
                            <p className="text-base text-text-muted px-4 leading-relaxed">We dive deep into your business requirements, goals, and current infrastructure.</p>
                        </div>

                        <div className="flex flex-col items-center text-center group">
                            <div className="w-24 h-24 bg-charcoal rounded-full border-4 border-white/10 flex items-center justify-center shadow-glow-green/20 mb-8 relative z-10 group-hover:border-primary group-hover:bg-primary/10 transition-all duration-300">
                                <span className="text-3xl font-black text-primary">02</span>
                            </div>
                            <h3 className="text-2xl font-bold text-white mb-4">Strategy</h3>
                            <p className="text-base text-text-muted px-4 leading-relaxed">Our architects design a comprehensive roadmap and technical solution aligned with your vision.</p>
                        </div>

                        <div className="flex flex-col items-center text-center group">
                            <div className="w-24 h-24 bg-charcoal rounded-full border-4 border-white/10 flex items-center justify-center shadow-glow-green/20 mb-8 relative z-10 group-hover:border-primary group-hover:bg-primary/10 transition-all duration-300">
                                <span className="text-3xl font-black text-primary">03</span>
                            </div>
                            <h3 className="text-2xl font-bold text-white mb-4">Execution</h3>
                            <p className="text-base text-text-muted px-4 leading-relaxed">Agile development and implementation with regular feedback loops and complete transparency.</p>
                        </div>

                        <div className="flex flex-col items-center text-center group">
                            <div className="w-24 h-24 bg-charcoal rounded-full border-4 border-white/10 flex items-center justify-center shadow-glow-green/20 mb-8 relative z-10 group-hover:border-primary group-hover:bg-primary/10 transition-all duration-300">
                                <span className="text-3xl font-black text-primary">04</span>
                            </div>
                            <h3 className="text-2xl font-bold text-white mb-4">Delivery</h3>
                            <p className="text-base text-text-muted px-4 leading-relaxed">Deployment, rigorous testing, and continuous post-launch support and optimization.</p>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    );
}
