import { Code2, Gauge, Plug, Settings, Shield, ShoppingCart } from "lucide-react";
import { services } from "@/data/services";
import { Container } from "@/components/ui/Container";
import { SectionHeading } from "@/components/ui/SectionHeading";

const icons = {
  code: Code2,
  cart: ShoppingCart,
  settings: Settings,
  gauge: Gauge,
  shield: Shield,
  plug: Plug,
};

export function Services() {
  return (
    <section id="services" className="py-24 sm:py-28">
      <Container>
        <SectionHeading
          title="Services"
          description="Building and managing digital platforms that drive measurable business results."
        />

        <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
          {services.map((service) => {
            const Icon = icons[service.icon];
            return (
              <div
                key={service.title}
                className="card group p-6 transition-colors duration-200 hover:border-indigo/40 dark:hover:border-indigo-light/40"
              >
                <div className="flex h-10 w-10 items-center justify-center rounded-sm bg-indigo/10 text-indigo dark:bg-indigo-light/10 dark:text-indigo-light">
                  <Icon className="h-5 w-5" />
                </div>
                <h3 className="mt-5 text-base font-semibold">{service.title}</h3>
                <p className="mt-2.5 text-sm leading-relaxed text-slate-500 dark:text-slate-400">
                  {service.description}
                </p>
              </div>
            );
          })}
        </div>
      </Container>
    </section>
  );
}