import { Container } from "@/components/container";
import { Heading } from "@/components/heading";
import { Subheading } from "@/components/subheading";
import { Star } from "lucide-react";

const reviews = [
  {
    name: "Michael R.",
    role: "Tesla Model S Owner",
    content: "The AI surface scan they did before the ceramic coating was mind-blowing. My car looks better than the day I picked it up from the showroom.",
    stars: 5
  },
  {
    name: "Sarah J.",
    role: "BMW X5 Owner",
    content: "Best detailer in Cedar Rapids. The attention to detail is unmatched. They found and fixed scratches I didn't even know were there.",
    stars: 5
  },
  {
    name: "David L.",
    role: "Classic Mustang Owner",
    content: "I'm very picky about who touches my vintage cars. Apex is the only shop I trust. Their paint correction is pure wizardry.",
    stars: 5
  }
];

export function Testimonials() {
  return (
    <section className="py-24 bg-neutral-950">
      <Container>
        <div className="text-center mb-16">
          <Heading className="text-white">Trusted by Cedar Rapids' Elite</Heading>
          <Subheading className="text-neutral-400">Don't just take our word for it. See what our clients are saying.</Subheading>
        </div>
        <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
          {reviews.map((review, i) => (
            <div key={i} className="p-8 rounded-2xl bg-neutral-900 border border-neutral-800 hover:border-blue-500/50 transition-colors">
              <div className="flex gap-1 mb-4">
                {[...Array(review.stars)].map((_, i) => (
                  <Star key={i} className="w-4 h-4 fill-yellow-500 text-yellow-500" />
                ))}
              </div>
              <p className="text-neutral-300 italic mb-6">"{review.content}"</p>
              <div>
                <p className="font-bold text-white">{review.name}</p>
                <p className="text-sm text-blue-400">{review.role}</p>
              </div>
            </div>
          ))}
        </div>
      </Container>
    </section>
  );
}