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

const reviews = [
  {
    name: "Mr. Henderson",
    role: "Neighbor",
    content: "These boys are incredible. They spent 3 hours on my truck and it looks better than when I take it to the professional shop in town. Great work ethic!",
    stars: 5
  },
  {
    name: "Mrs. Gable",
    role: "Local Resident",
    content: "So impressed with their politeness and attention to detail. They got all the dog hair out of my SUV. Highly recommend supporting these young men.",
    stars: 5
  },
  {
    name: "Coach Miller",
    role: "Family Friend",
    content: "Hardest working 13-year-olds I know. They've detailed my car three times now and it's perfect every time. Real hustle.",
    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 Our Neighbors</Heading>
          <Subheading className="text-neutral-400">We're proud to serve the Cedar Rapids community.</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>
  );
}