import { Check } from "lucide-react";
import { SectionHeading } from "@/components/ui/SectionHeading";
import type { Dictionary } from "@/content/types";

export function Services({ dict }: { dict: Dictionary }) {
  return (
    <section id="services" className="bg-charcoal-50/40 py-24">
      <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
        <SectionHeading
          eyebrow={dict.services.eyebrow}
          title={dict.services.title}
          titleAccent={dict.services.titleAccent}
        />
        <div className="mt-16 grid grid-cols-2 gap-3 sm:gap-4 lg:grid-cols-3">
          {dict.services.items.map((service) => (
            <div
              key={service}
              className="flex items-center gap-3 rounded-xl border border-charcoal-950/5 bg-white px-5 py-4 shadow-sm shadow-charcoal-950/5"
            >
              <span className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-gold-500 text-charcoal-950">
                <Check size={16} />
              </span>
              <span className="min-w-0 text-sm font-medium text-charcoal-700">{service}</span>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}