import Image from "next/image";

export default function SuccessGrid() {
    const testimonials = [
        {
            quote:
                '"Aasi Tech completely revamped our cloud infrastructure. The transition was seamless, and our operational costs dropped by 30% within the first quarter."',
            image: "/images/testimonials/marcus-thorne.png",
            name: "Marcus Thorne",
            role: "CTO, FinEdge Global",
        },
        {
            quote:
                '"Their team isn\'t just a vendor; they are partners. They understood our complex requirements for data security and delivered a solution that exceeded industry standards."',
            image: "/images/testimonials/sarah-johnson.png",
            name: "Sarah Jenkins",
            role: "VP of Ops, HealthPlus",
        },
        {
            quote:
                '"The mobile application they developed for us has seen over 100k downloads in 3 months. The UI/UX is intuitive, and the backend is rock solid."',
            image: "/images/testimonials/mark-davis.png",
            name: "David Chen",
            role: "Product Lead, Retailio",
        },
        {
            quote:
                '"Reliability is key in logistics. Aasi Tech\'s custom software solution minimized our downtime to near zero. An absolute game-changer for our fleet management."',
            image: "/images/testimonials/james-wilson.png",
            name: "James Wilson",
            role: "Director, Swift Logistics",
        },
        {
            quote:
                '"We needed a partner who could scale with us. Aasi Tech provided flexible IT support that grew as our startup expanded into new markets."',
            image: "/images/testimonials/elena-rodriguez.png",
            name: "Elena Rodriguez",
            role: "CEO, NovaStart",
        },
        {
            quote:
                '"Their cybersecurity audit identified critical vulnerabilities we missed. We sleep better at night knowing our client data is secure."',
            image: "/images/testimonials/emily-chen.png",
            name: "Robert King",
            role: "CSO, BankSecure",
        },
    ];

    return (
        <section className="w-full py-24 px-4 bg-light-bg">
            <div className="max-w-[1280px] mx-auto grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 gsap-stagger">
                {testimonials.map((testy, index) => (
                    <div
                        key={index}
                        className="card-modern bg-white p-8 lg:p-10 rounded-3xl shadow-sm border border-border-light flex flex-col h-full hover:shadow-lg transition-all duration-300 group"
                    >
                        <span className="material-symbols-outlined text-primary text-5xl mb-6 opacity-80">
                            format_quote
                        </span>
                        <p className="text-text-muted text-lg leading-relaxed mb-8 flex-grow font-medium italic">
                            {testy.quote}
                        </p>
                        <div className="w-12 h-1 bg-primary/40 mb-8 rounded-full" />
                        <div className="flex items-center gap-5">
                            <div className="size-14 rounded-full overflow-hidden bg-white border border-border-light group relative">
                                <Image
                                    src={testy.image}
                                    alt={`Headshot of ${testy.name}`}
                                    fill
                                    className="object-cover grayscale group-hover:grayscale-0 transition-all duration-300"
                                />
                            </div>
                            <div>
                                <h4 className="text-text-main font-bold text-base">
                                    {testy.name}
                                </h4>
                                <p className="text-primary text-sm font-medium">
                                    {testy.role}
                                </p>
                            </div>
                        </div>
                    </div>
                ))}
            </div>
        </section>
    );
}
