import Image from "next/image";

export default function Testimonials() {
    const testimonials = [
        {
            quote:
                "Aasi Tech completely revamped our online presence. Their team is professional, fast, and incredibly talented.",
            image: "/images/testimonials/sarah-johnson.png",
            name: "Sarah Johnson",
            role: "CEO, TechFlow",
        },
        {
            quote:
                "The best agency we have worked with. The ROI on our new mobile app has been phenomenal since launch.",
            image: "/images/testimonials/mark-davis.png",
            name: "Mark Davis",
            role: "Marketing Director, RetailPlus",
        },
        {
            quote:
                "Their strategic approach to our cloud migration saved us time and money. Highly recommended.",
            image: "/images/testimonials/emily-chen.png",
            name: "Emily Chen",
            role: "CTO, DataCorp",
        },
        {
            quote:
                "They helped us modernize legacy systems without disrupting operations. Delivery quality was outstanding in every sprint.",
            image: "/images/testimonials/marcus-thorne.png",
            name: "Marcus Thorne",
            role: "Head of Engineering, FinEdge Global",
        },
        {
            quote:
                "From discovery to deployment, communication was crystal clear. We always knew what was next and why it mattered.",
            image: "/images/testimonials/james-wilson.png",
            name: "James Wilson",
            role: "Operations Director, Swift Logistics",
        },
        {
            quote:
                "Our conversion rate improved within weeks after the redesign. Their UX thinking and execution are top tier.",
            image: "/images/testimonials/elena-rodriguez.png",
            name: "Elena Rodriguez",
            role: "Founder, NovaStart",
        },
        {
            quote:
                "Their AI chatbot deployment reduced repetitive support requests and improved response times for our customers.",
            image: "/images/testimonials/sarah-johnson.png",
            name: "Amina Khan",
            role: "Customer Success Lead, HelpDesk Pro",
        },
        {
            quote:
                "Aasi Tech feels like an extension of our internal team. Reliable, proactive, and deeply technical.",
            image: "/images/testimonials/mark-davis.png",
            name: "David Romero",
            role: "VP Product, CloudAxis",
        },
    ];

    return (
        <section className="py-28 bg-light-bg section-divider">
            <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 overflow-hidden">
                <div className="text-center mb-16 gsap-fade-up">
                    <span className="text-primary font-bold tracking-wider uppercase text-sm mb-3 block">Testimonials</span>
                    <h2 className="text-3xl md:text-5xl font-bold text-text-main mb-4">
                        Client <span className="gradient-text">Stories</span>
                    </h2>
                    <p className="text-text-muted text-lg max-w-xl mx-auto">
                        Hear what our partners say about working with us.
                    </p>
                </div>
                <div className="testimonial-belt">
                    <div className="testimonial-track">
                        {[...testimonials, ...testimonials].map((testimonial, index) => (
                        <div
                            key={`${testimonial.name}-${testimonial.role}-${index}`}
                            className="card-modern p-8 card-hover-lift group testimonial-item"
                        >
                            <div className="flex gap-1 mb-4">
                                {Array.from({ length: 5 }).map((_, starIndex) => (
                                    <span
                                        key={starIndex}
                                        className="material-symbols-outlined text-lg text-yellow-500 star-filled"
                                    >
                                        star_rate
                                    </span>
                                ))}
                            </div>
                            <span className="material-symbols-outlined text-3xl text-primary/30 mb-3 block">
                                format_quote
                            </span>
                            <p className="text-text-main italic mb-8 leading-relaxed">
                                &quot;{testimonial.quote}&quot;
                            </p>
                            <div className="flex items-center gap-3 pt-4 border-t border-border-light">
                                <div className="size-12 rounded-full relative overflow-hidden border-2 border-primary/20 group-hover:border-primary transition-colors duration-300">
                                    <Image
                                        src={testimonial.image}
                                        alt={`${testimonial.name}, ${testimonial.role}`}
                                        fill
                                        className="object-cover"
                                        sizes="48px"
                                    />
                                </div>
                                <div>
                                    <div className="font-bold text-sm text-text-main">
                                        {testimonial.name}
                                    </div>
                                    <div className="text-xs text-text-muted font-medium">
                                        {testimonial.role}
                                    </div>
                                </div>
                            </div>
                        </div>
                        ))}
                    </div>
                </div>
            </div>
        </section>
    );
}
