export default function ReviewsGrid() {
  const items = [
    { name: 'Maria S.', area: 'Ocean Drive', text: 'Henry and his team upgraded our electrical panel quickly and professionally. No more tripping breakers!' },
    { name: 'David R.', area: 'Downtown', text: 'Excellent work on our office build-out. They finished on time and everything works perfectly. Very professional and easy to work with.' },
    { name: 'Jennifer L.', area: 'Flour Bluff', text: 'Called for an emergency repair and they were here within 2 hours on a Sunday. Fixed our power issue quickly. Very reliable service.' },
    { name: 'Robert M.', area: 'Calallen', text: 'Great experience with our kitchen remodel electrical work. GFCI outlets and under-cabinet lighting. Beautiful work and fair pricing.' },
    { name: 'Lisa K.', area: 'Port Area', text: 'C&I installed LED lighting in our warehouse. Much brighter now and the energy savings are noticeable. Highly recommend.' },
    { name: 'Sarah P.', area: 'Robstown', text: 'Installed an EV charger outlet in our garage and handled the permit process. Very happy with the service.' },
  ];
  return (
    <ul className="grid md:grid-cols-3 gap-4">
      {items.map((r, i) => (
        <li key={i} className="rounded-lg border p-4">
          <div className="text-amber-500">★★★★★</div>
          <p className="mt-2 text-sm text-slate-700">&ldquo;{r.text}&rdquo;</p>
          <div className="mt-2 text-sm font-semibold">{r.name}</div>
          <div className="text-xs text-slate-500">{r.area}</div>
        </li>
      ))}
    </ul>
  );
}