import { Card, CardContent } from "@/components/ui/card";
import { Star } from "lucide-react";

const Testimonials = () => {
  const testimonials = [
    {
      quote: "Greg's expertise saved us thousands during our audit. His calm approach and deep knowledge gave us complete confidence throughout the process.",
      initials: "M.R.",
      role: "Small Business Owner"
    },
    {
      quote: "Twenty years of working with Greg, and he still finds new ways to optimize our tax strategy. Truly a partner in our business success.",
      initials: "D.S.",
      role: "Real Estate Developer"
    },
    {
      quote: "Professional, responsive, and incredibly thorough. Greg handles our family's complex tax situation with expertise we trust completely.",
      initials: "L.T.",
      role: "Family Client"
    }
  ];

  return (
    <section className="py-24 bg-muted/30">
      <div className="container mx-auto px-4">
        <div className="text-center mb-16">
          <h2 className="text-display-lg font-display font-semibold text-forest mb-4">
            What Clients Say
          </h2>
          <p className="text-body-lg text-sage max-w-2xl mx-auto">
            Trusted by Corpus Christi families and businesses for over two decades
          </p>
        </div>
        
        <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
          {testimonials.map((testimonial, index) => (
            <Card key={index} className="card-elevation rounded-2xl bg-card">
              <CardContent className="p-8">
                {/* Stars */}
                <div className="flex gap-1 mb-6">
                  {[...Array(5)].map((_, i) => (
                    <Star key={i} className="w-5 h-5 fill-brass text-brass" />
                  ))}
                </div>
                
                {/* Quote */}
                <blockquote className="text-sage mb-6 leading-relaxed italic">
                  "{testimonial.quote}"
                </blockquote>
                
                {/* Attribution */}
                <div className="flex items-center gap-4">
                  <div className="w-12 h-12 bg-brass/20 rounded-full flex items-center justify-center">
                    <span className="font-display font-semibold text-brass">
                      {testimonial.initials}
                    </span>
                  </div>
                  <div>
                    <div className="font-medium text-forest">{testimonial.initials}</div>
                    <div className="text-sm text-sage">{testimonial.role}</div>
                  </div>
                </div>
              </CardContent>
            </Card>
          ))}
        </div>
      </div>
    </section>
  );
};

export default Testimonials;