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

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-5xl mx-auto">
                <motion.div
                    initial={{ opacity: 0, scale: 0.95 }}
                    whileInView={{ opacity: 1, scale: 1 }}
                    viewport={{ once: true }}
                    className="bg-white dark:bg-white/5 backdrop-blur-sm p-8 md:p-12 rounded-3xl border border-gray-200 dark:border-white/10 shadow-2xl relative"
                >
                    {/* Quote Icon */}
                    <div className="absolute top-8 right-8 text-blue-100 dark:text-white/5 select-none">
                        <span className="material-symbols-outlined text-8xl">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-xl md:text-2xl font-medium leading-relaxed text-gray-900 dark:text-white mb-8 relative z-10">
                        "Bay Area Affiliates transformed our IT infrastructure completely. Their proactive approach means we rarely have downtime, and when issues do arise, they're resolved quickly. Our team can focus on patient care instead of tech problems."
                    </blockquote>

                    <div className="flex items-center gap-4 relative z-10">
                        <div className="w-12 h-12 bg-black dark:bg-white rounded-full flex items-center justify-center text-white dark:text-black font-bold text-lg">
                            SM
                        </div>
                        <div>
                            <div className="font-bold text-gray-900 dark:text-white">Sarah Martinez</div>
                            <div className="text-sm text-gray-500 dark:text-gray-400">Operations Manager, Coastal Medical Group</div>
                        </div>
                    </div>
                </motion.div>
            </div>
        </section>
    );
};

export default Testimonials;