export default function ServicesDetailProcess() {
    return (
        <section className="bg-background-light py-24 px-4 md:px-10 lg:px-40 flex justify-center overflow-hidden">
            <div className="max-w-[1000px] w-full">
                <div className="mb-16 text-center">
                    <span className="text-services-primary font-bold tracking-wider uppercase text-sm">How We Work</span>
                    <h2 className="text-3xl md:text-4xl font-bold text-charcoal mt-2">Development Lifecycle</h2>
                </div>
                <div className="relative">
                    {/* Vertical Line */}
                    <div className="absolute left-4 md:left-1/2 top-0 bottom-0 w-0.5 bg-neutral-light md:-ml-0.5"></div>
                    {/* Step 1 */}
                    <div className="relative flex flex-col md:flex-row items-start md:items-center mb-16 group">
                        <div className="md:w-1/2 md:pr-12 md:text-right pl-12 md:pl-0">
                            <h3 className="text-xl font-bold text-charcoal mb-2">Discovery & Planning</h3>
                            <p className="text-slate-custom text-sm">We dive deep into your requirements, defining scope, tech stack, and roadmap for success.</p>
                        </div>
                        <div className="absolute left-0 md:left-1/2 top-0 md:top-1/2 -translate-y-0 md:-translate-y-1/2 flex items-center justify-center size-8 rounded-full bg-services-primary border-4 border-white shadow-md z-10 md:-ml-4">
                            <span className="text-charcoal text-xs font-bold">1</span>
                        </div>
                        <div className="hidden md:block md:w-1/2 md:pl-12">
                            <div className="h-px w-12 bg-services-primary/30"></div>
                        </div>
                    </div>
                    {/* Step 2 */}
                    <div className="relative flex flex-col md:flex-row items-start md:items-center mb-16 group">
                        <div className="hidden md:block md:w-1/2 md:pr-12 md:text-right">
                            <div className="h-px w-12 bg-services-primary/30 ml-auto"></div>
                        </div>
                        <div className="absolute left-0 md:left-1/2 top-0 md:top-1/2 -translate-y-0 md:-translate-y-1/2 flex items-center justify-center size-8 rounded-full bg-services-primary border-4 border-white shadow-md z-10 md:-ml-4">
                            <span className="text-charcoal text-xs font-bold">2</span>
                        </div>
                        <div className="md:w-1/2 md:pl-12 pl-12">
                            <h3 className="text-xl font-bold text-charcoal mb-2">Design & Prototyping</h3>
                            <p className="text-slate-custom text-sm">Creating intuitive UI/UX designs and interactive prototypes to visualize the final product.</p>
                        </div>
                    </div>
                    {/* Step 3 */}
                    <div className="relative flex flex-col md:flex-row items-start md:items-center mb-16 group">
                        <div className="md:w-1/2 md:pr-12 md:text-right pl-12 md:pl-0">
                            <h3 className="text-xl font-bold text-charcoal mb-2">Agile Development</h3>
                            <p className="text-slate-custom text-sm">Iterative coding sprints with regular check-ins, ensuring transparency and flexibility.</p>
                        </div>
                        <div className="absolute left-0 md:left-1/2 top-0 md:top-1/2 -translate-y-0 md:-translate-y-1/2 flex items-center justify-center size-8 rounded-full bg-services-primary border-4 border-white shadow-md z-10 md:-ml-4">
                            <span className="text-charcoal text-xs font-bold">3</span>
                        </div>
                        <div className="hidden md:block md:w-1/2 md:pl-12">
                            <div className="h-px w-12 bg-services-primary/30"></div>
                        </div>
                    </div>
                    {/* Step 4 */}
                    <div className="relative flex flex-col md:flex-row items-start md:items-center group">
                        <div className="hidden md:block md:w-1/2 md:pr-12 md:text-right">
                            <div className="h-px w-12 bg-services-primary/30 ml-auto"></div>
                        </div>
                        <div className="absolute left-0 md:left-1/2 top-0 md:top-1/2 -translate-y-0 md:-translate-y-1/2 flex items-center justify-center size-8 rounded-full bg-services-primary border-4 border-white shadow-md z-10 md:-ml-4">
                            <span className="text-charcoal text-xs font-bold">4</span>
                        </div>
                        <div className="md:w-1/2 md:pl-12 pl-12">
                            <h3 className="text-xl font-bold text-charcoal mb-2">Launch & Scale</h3>
                            <p className="text-slate-custom text-sm">Deployment to production environments followed by monitoring and scaling strategies.</p>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    );
}
