import { Star } from "lucide-react";

const testimonials = [
  {
    name: "Sarah M.",
    location: "Miami, FL",
    avatar: "SM",
    color: "bg-primary-200",
    rating: 5,
    pet: "Golden Retriever owner",
    quote: "Americas.Pet has completely changed how I care for my dog, Max. The insurance saved us over $3,000 when he needed surgery. The products are top-quality and delivery is always fast!",
  },
  {
    name: "James R.",
    location: "Los Angeles, CA",
    avatar: "JR",
    color: "bg-accent-light",
    rating: 5,
    pet: "Maine Coon owner",
    quote: "The Complete Care insurance plan is worth every penny. My cat Cleo had a dental issue last year and almost everything was covered. Customer service was incredibly helpful throughout.",
  },
  {
    name: "Maria C.",
    location: "New York, NY",
    avatar: "MC",
    color: "bg-purple-200",
    rating: 5,
    pet: "Labrador & cat owner",
    quote: "I have two dogs and a cat — all insured through Americas.Pet. Managing everything in one place is so convenient. The prices are unbeatable compared to other providers.",
  },
  {
    name: "David K.",
    location: "Houston, TX",
    avatar: "DK",
    color: "bg-blue-200",
    rating: 5,
    pet: "Border Collie owner",
    quote: "The GPS tracker I bought has been a lifesaver. My dog escaped the yard twice and I found him both times within minutes. Amazing product quality and the support team is fantastic.",
  },
];

export default function Testimonials() {
  return (
    <section className="py-20 bg-sage-50">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="text-center mb-14">
          <div className="section-badge">Testimonials</div>
          <h2 className="section-title">See Us at Americas.Pet</h2>
          <p className="section-subtitle max-w-2xl mx-auto">
            Real stories from pet owners across America who trust us with their beloved companions.
          </p>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
          {testimonials.map((t) => (
            <div key={t.name} className="card p-7">
              <div className="flex items-center gap-1 mb-4">
                {[1,2,3,4,5].map(s => (
                  <Star key={s} className={`h-4 w-4 ${s <= t.rating ? "fill-amber-400 text-amber-400" : "text-gray-200"}`} />
                ))}
              </div>
              <p className="text-gray-700 leading-relaxed mb-6 text-sm">"{t.quote}"</p>
              <div className="flex items-center gap-3">
                <div className={`w-10 h-10 ${t.color} rounded-full flex items-center justify-center font-bold text-sm text-gray-700`}>
                  {t.avatar}
                </div>
                <div>
                  <div className="font-semibold text-sm text-gray-900">{t.name}</div>
                  <div className="text-xs text-gray-400">{t.pet} · {t.location}</div>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}