import Image from "next/image";

export default function PortfolioCaseStudyResults() {
    return (
        <section className="section-dark py-28 relative overflow-hidden z-10">
            <div className="glow-orb w-[800px] h-[800px] top-1/2 right-0 translate-x-1/2 -translate-y-1/2 opacity-20"></div>

            <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 relative z-10">
                <div className="grid gap-16 lg:grid-cols-2 lg:gap-24">
                    {/* Results List */}
                    <div className="flex flex-col justify-center gsap-stagger">
                        <h2 className="mb-10 text-3xl font-bold text-light-surface sm:text-4xl">Key Outcomes</h2>
                        <ul className="flex flex-col gap-8">
                            <li className="flex items-start gap-5">
                                <div className="mt-1 flex size-8 shrink-0 items-center justify-center rounded-xl bg-primary/20 text-primary-light border border-primary/30 shadow-sm">
                                    <span className="material-symbols-outlined text-[18px]">check</span>
                                </div>
                                <div>
                                    <h4 className="font-bold text-light-surface text-lg mb-1">Enhanced Mobile Experience</h4>
                                    <p className="text-base text-text-light-muted">Mobile conversion rates increased by 35% within the first month.</p>
                                </div>
                            </li>
                            <li className="flex items-start gap-5">
                                <div className="mt-1 flex size-8 shrink-0 items-center justify-center rounded-xl bg-primary/20 text-primary-light border border-primary/30 shadow-sm">
                                    <span className="material-symbols-outlined text-[18px]">check</span>
                                </div>
                                <div>
                                    <h4 className="font-bold text-light-surface text-lg mb-1">SEO Domination</h4>
                                    <p className="text-base text-text-light-muted">Improved Core Web Vitals scores led to a 20% boost in organic search traffic.</p>
                                </div>
                            </li>
                            <li className="flex items-start gap-5">
                                <div className="mt-1 flex size-8 shrink-0 items-center justify-center rounded-xl bg-primary/20 text-primary-light border border-primary/30 shadow-sm">
                                    <span className="material-symbols-outlined text-[18px]">check</span>
                                </div>
                                <div>
                                    <h4 className="font-bold text-light-surface text-lg mb-1">Simplified Content Management</h4>
                                    <p className="text-base text-text-light-muted">Marketing team can now launch campaigns in hours instead of days.</p>
                                </div>
                            </li>
                            <li className="flex items-start gap-5">
                                <div className="mt-1 flex size-8 shrink-0 items-center justify-center rounded-xl bg-primary/20 text-primary-light border border-primary/30 shadow-sm">
                                    <span className="material-symbols-outlined text-[18px]">check</span>
                                </div>
                                <div>
                                    <h4 className="font-bold text-light-surface text-lg mb-1">Scalable Infrastructure</h4>
                                    <p className="text-base text-text-light-muted">Successfully handled 5x normal traffic load during Black Friday sales.</p>
                                </div>
                            </li>
                        </ul>
                    </div>
                    {/* Testimonial */}
                    <div className="flex items-center gsap-fade-up">
                        <div className="card-glass-dark relative h-full w-full rounded-3xl bg-[#0F172A]/80 backdrop-blur-xl shadow-glow-green border border-primary/20 p-8 shadow-sm lg:p-12">
                            {/* Decorative top accent */}
                            <div className="absolute top-0 left-0 w-full h-1.5 bg-gradient-to-r from-primary to-primary-light"></div>

                            <span className="material-symbols-outlined absolute right-8 top-10 text-7xl text-white/5 pointer-events-none">format_quote</span>

                            <div className="relative z-10 flex h-full flex-col justify-between gap-10">
                                <blockquote className="text-xl lg:text-2xl italic font-medium leading-relaxed text-light-surface pr-8">
                                    "Aasi Tech didn't just rebuild our website; they completely transformed our business capabilities. The new platform is blazing fast, and the headless architecture gives us the freedom to innovate."
                                </blockquote>
                                <div className="flex items-center gap-5 pt-6 border-t border-white/10">
                                    <div className="size-14 overflow-hidden rounded-full border-2 border-primary/30 relative">
                                        <Image
                                            src="/images/testimonials/mark-davis.png"
                                            alt="Portrait of Michael Chen"
                                            fill
                                            className="h-full w-full object-cover"
                                        />
                                    </div>
                                    <div>
                                        <div className="font-bold text-light-surface text-lg">Michael Chen</div>
                                        <div className="text-sm text-primary-light font-medium uppercase tracking-wider">CTO, RetailGiant Inc.</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    );
}
