export default function PortfolioCaseStudyOverview() {
    return (
        <section className="py-20 lg:py-28 bg-light-bg">
            <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
                <div className="mb-12 text-center gsap-fade-up">
                    <h2 className="text-3xl font-bold tracking-tight text-text-main sm:text-4xl">Project Overview</h2>
                </div>
                <div className="grid gap-12 lg:grid-cols-2 lg:gap-16 gsap-stagger">
                    {/* Challenge */}
                    <div className="card-modern rounded-3xl p-8 lg:p-12 bg-white">
                        <div className="mb-8 inline-flex size-14 items-center justify-center rounded-2xl bg-red-50 text-red-500 shadow-sm border border-red-100">
                            <span className="material-symbols-outlined text-3xl">warning</span>
                        </div>
                        <h3 className="mb-4 text-2xl font-bold text-text-main">The Challenge</h3>
                        <p className="text-text-muted leading-relaxed text-lg">
                            The client's legacy system was built on an outdated monolithic architecture that was difficult to maintain and prone to crashing during high-traffic holiday seasons. The checkout process was cumbersome, leading to a high cart abandonment rate, and the mobile experience was non-responsive, alienating a large segment of their customer base.
                        </p>
                    </div>
                    {/* Solution */}
                    <div className="card-modern rounded-3xl p-8 lg:p-12 border-2 border-primary/20 bg-primary/5">
                        <div className="mb-8 inline-flex size-14 items-center justify-center rounded-2xl bg-primary text-white shadow-md shadow-primary/30">
                            <span className="material-symbols-outlined text-3xl">check_circle</span>
                        </div>
                        <h3 className="mb-4 text-2xl font-bold text-text-main">The Solution</h3>
                        <p className="text-text-main leading-relaxed text-lg">
                            We implemented a modern headless commerce architecture using Next.js for the frontend and Shopify Plus for the backend. This decoupling allowed for lightning-fast page loads and ultimate design flexibility. We redesigned the UX to focus on mobile-first interactions and streamlined the checkout flow into a single-page experience.
                        </p>
                    </div>
                </div>
            </div>
        </section>
    );
}
