import React from 'react';
import { motion } from 'framer-motion';

const testimonials = [
    {
        quote:
            "Bay Area Affiliates has been working on our office computers for years. They always go above and beyond to make sure we are back up and running smoothly. I wouldn't trust anyone but Elvin and Wallie to work on my computers. The absolute best in South Texas!",
        initials: 'SG',
        name: 'Stephanie Gomez',
        role: 'Sales Representative, J & B Pavelka Truck and Trailer Sales',
        layout: 'lg:col-span-5',
    },
    {
        quote:
            "We cannot say enough great things about the service Wallie and Elvin at Bay Area Affiliates, Inc. have provided to our firm for well over 15 years! They take care of all of our computer/networking/software/website needs so we don't have to worry about anything related to IT. Whenever we have any computer/software issues, need to add new equipment, install software/upgrades etc., they are always there for us and respond quickly to keep our system running safely and securely. But besides their solid technical skills and vast computer systems knowledge, they are an absolute pleasure to work with. I recommend them to all of my clients and friends. They are the BEST of the BEST!",
        initials: 'CB',
        name: 'Cheryl Brown',
        role: 'Owner & CPA, Hampton, Brown & Associates, P.C.',
        layout: 'lg:col-span-7',
    },
    {
        quote:
            'We have used Bay Area Affiliates for many years and could not be happier with the expertise and service we have received.',
        initials: 'GC',
        name: 'George Craig',
        role: 'President, SCI Security',
        layout: 'lg:col-span-6 lg:col-start-4',
    },
    {
        quote:
            "I am pleased to recommend Bay Area Affiliates, Inc. for their outstanding IT services and support provided to JE Construction Services, LLC.\n\nBay Area Affiliates has consistently delivered reliable and responsive service to our company. Their team is knowledgeable, professional, and always quick to assist whenever issues arise. Whether it involves email support, networking, hardware purchases, system maintenance, or technical troubleshooting, they have continually provided dependable solutions and excellent customer service.\n\nOne of the qualities we value most is their responsiveness and willingness to help. They understand the importance of minimizing downtime and have always worked diligently to keep our systems operating efficiently. Their support has played an important role in helping our day-to-day operations run smoothly.\n\nWe appreciate the strong working relationship we have built with Bay Area Affiliates over the years and would confidently recommend their services to any company seeking dependable IT support and technology solutions.",
        initials: 'SJ',
        name: 'Sue Jimenez',
        role: 'Controller, JE Construction Services, LLC',
        layout: 'lg:col-span-6 lg:col-start-4',
    },
];

const Testimonials: React.FC = () => {
    return (
        <section className="py-24 px-6 bg-background-light dark:bg-background-dark relative overflow-hidden bg-[radial-gradient(ellipse_80%_50%_at_50%_-20%,rgba(0,0,0,0.05),rgba(0,0,0,0))] dark:bg-[radial-gradient(ellipse_80%_50%_at_50%_-20%,rgba(255,255,255,0.05),rgba(255,255,255,0))]">
            <div className="max-w-6xl mx-auto">
                <div className="text-center mb-12">
                    <span className="inline-flex items-center gap-2 px-4 py-2 rounded-full border border-gray-200 dark:border-white/10 bg-white/80 dark:bg-white/5 text-xs font-semibold uppercase tracking-[0.2em] text-gray-500 dark:text-gray-400">
                        Client Testimonials
                    </span>
                    <h2 className="mt-5 font-display text-3xl md:text-4xl text-gray-900 dark:text-white">
                        Trusted by businesses who need IT that <span className="text-gray-500 dark:text-gray-400">actually shows up</span>
                    </h2>
                </div>

                <div className="grid grid-cols-1 gap-6 lg:grid-cols-12">
                    {testimonials.map((testimonial, index) => (
                        <motion.div
                            key={testimonial.name}
                            initial={{ opacity: 0, y: 24 }}
                            whileInView={{ opacity: 1, y: 0 }}
                            viewport={{ once: true }}
                            transition={{ delay: index * 0.1 }}
                            className={`min-w-0 bg-white/90 dark:bg-white/5 backdrop-blur-sm p-8 rounded-3xl border border-gray-200 dark:border-white/10 shadow-[0_24px_80px_rgba(15,23,42,0.08)] dark:shadow-[0_24px_80px_rgba(0,0,0,0.28)] relative h-full overflow-hidden ${testimonial.layout}`}
                        >
                            <div className="absolute inset-0 bg-[radial-gradient(circle_at_top_right,rgba(59,130,246,0.12),transparent_30%)] dark:bg-[radial-gradient(circle_at_top_right,rgba(255,255,255,0.08),transparent_30%)] pointer-events-none" />
                            <div className="absolute top-6 right-6 text-blue-100 dark:text-white/5 select-none">
                                <span className="material-symbols-outlined text-7xl">format_quote</span>
                            </div>

                            <div className="flex text-yellow-400 mb-6 gap-1 relative z-10">
                                {[1, 2, 3, 4, 5].map((star) => (
                                    <span key={star} className="material-symbols-outlined fill-current">star</span>
                                ))}
                            </div>

                            <blockquote className="text-base md:text-lg font-medium leading-relaxed text-gray-900 dark:text-white mb-8 relative z-10 break-words [overflow-wrap:anywhere]">
                                "{testimonial.quote}"
                            </blockquote>

                            <div className="flex items-center gap-4 relative z-10 mt-auto">
                                <div className="w-12 h-12 shrink-0 bg-black dark:bg-white rounded-full flex items-center justify-center text-white dark:text-black font-bold text-lg">
                                    {testimonial.initials}
                                </div>
                                <div className="min-w-0">
                                    <div className="font-bold text-gray-900 dark:text-white">{testimonial.name}</div>
                                    <div className="text-sm text-gray-500 dark:text-gray-400 break-words [overflow-wrap:anywhere]">{testimonial.role}</div>
                                </div>
                            </div>
                        </motion.div>
                    ))}
                </div>
            </div>
        </section>
    );
};

export default Testimonials;