export default function PortfolioCaseStudyProcess() {
    return (
        <section className="py-24 bg-white relative">
            <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
                <div className="flex flex-col gap-4 mb-16 max-w-3xl gsap-fade-up">
                    <h2 className="text-3xl font-bold tracking-tight text-text-main sm:text-4xl">Process &amp; Execution</h2>
                    <p className="text-lg text-text-muted">Our agile methodology ensured rapid delivery without compromising on quality.</p>
                </div>
                <div className="grid gap-8 md:grid-cols-3 gsap-stagger">
                    {/* Card 1 */}
                    <div className="flex flex-col gap-5 rounded-3xl p-8 card-modern bg-light-bg border border-border-light">
                        <div className="flex size-14 items-center justify-center rounded-2xl bg-white text-primary shadow-sm border border-black/5">
                            <span className="material-symbols-outlined text-3xl">strategy</span>
                        </div>
                        <h3 className="text-xl font-bold text-text-main">Strategy &amp; Discovery</h3>
                        <p className="text-text-muted leading-relaxed">
                            We began with a comprehensive audit of the existing infrastructure and conducted user research to identify key pain points in the customer journey.
                        </p>
                    </div>
                    {/* Card 2 */}
                    <div className="flex flex-col gap-5 rounded-3xl p-8 card-modern bg-light-bg border border-border-light">
                        <div className="flex size-14 items-center justify-center rounded-2xl bg-white text-primary shadow-sm border border-black/5">
                            <span className="material-symbols-outlined text-3xl">code</span>
                        </div>
                        <h3 className="text-xl font-bold text-text-main">Development</h3>
                        <p className="text-text-muted leading-relaxed">
                            Utilizing a component-driven development approach, we built a scalable UI library. We integrated Algolia for instant search capabilities.
                        </p>
                    </div>
                    {/* Card 3 */}
                    <div className="flex flex-col gap-5 rounded-3xl p-8 card-modern bg-light-bg border border-border-light">
                        <div className="flex size-14 items-center justify-center rounded-2xl bg-white text-primary shadow-sm border border-black/5">
                            <span className="material-symbols-outlined text-3xl">rocket_launch</span>
                        </div>
                        <h3 className="text-xl font-bold text-text-main">Testing &amp; Launch</h3>
                        <p className="text-text-muted leading-relaxed">
                            Rigorous automated testing and QA cycles ensured a bug-free launch. We executed a phased rollout to monitor performance in real-time.
                        </p>
                    </div>
                </div>
            </div>
        </section>
    );
}
