export default function FeatureGrid() {
  const items = [
    { title: 'No Power?', desc: 'Quick diagnosis and repair', foot: 'Back online fast' },
    { title: 'Tripping Breaker?', desc: 'Circuit analysis and upgrade', foot: 'End the frustration' },
    { title: 'New Lighting?', desc: 'Professional installation', foot: 'Brighter, safer spaces' },
    { title: 'Panel Upgrade?', desc: 'Safe, code-compliant upgrade', foot: 'Modern, reliable power' },
    { title: 'Hot/Sparking Outlet?', desc: 'Emergency safety repair', foot: 'Prevent electrical fires' },
    { title: 'EV Charger Install?', desc: 'Dedicated EV-ready circuits', foot: 'Charge at home safely' },
  ];
  return (
    <div>
      <h2 className="text-2xl md:text-3xl font-bold mb-6">Electrical Problems We Solve</h2>
      <ul className="grid md:grid-cols-3 gap-4">
        {items.map((it) => (
          <li key={it.title} className="rounded-lg border p-4">
            <div className="font-semibold">{it.title}</div>
            <div className="text-sm text-slate-600">{it.desc}</div>
            <div className="text-amber-600 text-sm font-semibold mt-2">{it.foot}</div>
          </li>
        ))}
      </ul>
    </div>
  );
}