export default function PortfolioCaseStudyMetrics() {
    return (
        <section className="bg-dark-surface border-y border-white/5 relative z-20">
            <div className="mx-auto max-w-7xl px-4 py-12 sm:px-6 lg:px-8 gsap-stagger">
                <div className="grid grid-cols-2 gap-8 md:grid-cols-4">
                    <div className="flex flex-col gap-1 border-l-4 border-primary pl-4">
                        <p className="text-4xl font-black tracking-tight text-primary-light">150%</p>
                        <p className="text-sm font-medium text-text-light-muted">Traffic Increase</p>
                    </div>
                    <div className="flex flex-col gap-1 border-l-4 border-primary pl-4">
                        <p className="text-4xl font-black tracking-tight text-primary-light">40%</p>
                        <p className="text-sm font-medium text-text-light-muted">Conversion Boost</p>
                    </div>
                    <div className="flex flex-col gap-1 border-l-4 border-primary pl-4">
                        <p className="text-4xl font-black tracking-tight text-primary-light">-60%</p>
                        <p className="text-sm font-medium text-text-light-muted">Load Time Reduction</p>
                    </div>
                    <div className="flex flex-col gap-1 border-l-4 border-primary pl-4">
                        <p className="text-4xl font-black tracking-tight text-primary-light">99.9%</p>
                        <p className="text-sm font-medium text-text-light-muted">Uptime Guaranteed</p>
                    </div>
                </div>
            </div>
        </section>
    );
}
