export default function ServicesGrid({ variant }: { variant?: 'residential' }) {
  const services = [
    { title: 'Panel Upgrades', bullets: ['100A to 200A service', 'AFCI/GFCI breakers', 'Dedicated high-amp circuits', 'Permits & inspections'] },
    { title: 'Lighting & Fixtures', bullets: ['LED lighting conversion', 'Under-cabinet task lighting', 'Outdoor security lighting', 'Ceiling fan installation'] },
    { title: 'Diagnostics & Repair', bullets: ['Power outage troubleshooting', 'Hot outlet emergency repair', 'Circuit breaker replacement', 'Wire fault location'] },
    { title: 'Kitchen/Bath GFCI', bullets: ['GFCI outlets', 'Appliance circuits', 'Bath exhaust fans', 'Code updates'] },
    { title: 'EV-Ready Conduit', bullets: ['240V outlet installation', 'Dedicated EV circuits', 'Conduit for future upgrade', 'Load calculation analysis'] },
    { title: 'Whole-Home Electrical', bullets: ['New construction wiring', 'Complete rewiring', 'Smart home prep', 'Code-compliant installation'] },
  ];
  return (
    <ul className="grid md:grid-cols-3 gap-4">
      {services.map((s) => (
        <li key={s.title} className="rounded-lg border p-4">
          <h3 className="font-semibold mb-2">{s.title}</h3>
          <ul className="list-disc pl-5 text-sm text-slate-700 space-y-1">
            {s.bullets.map((b) => <li key={b}>{b}</li>)}
          </ul>
        </li>
      ))}
    </ul>
  );
}