import { Compass, Sparkles, ShieldCheck, Users, Camera } from "lucide-react";
import { SectionHeading } from "@/components/ui/SectionHeading";
import type { Dictionary } from "@/content/types";

const icons = [Compass, Sparkles, ShieldCheck, Users, Camera];

export function WhyUs({ dict }: { dict: Dictionary }) {
  return (
    <section id="why-us" 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.whyUs.eyebrow}
          title={dict.whyUs.title}
          titleAccent={dict.whyUs.titleAccent}
        />
        <div className="mt-16 grid grid-cols-2 gap-4 sm:gap-6 lg:grid-cols-5">
          {dict.whyUs.items.map((item, index) => {
            const Icon = icons[index] ?? Sparkles;
            return (
              <div
                key={item.title}
                className="flex flex-col items-center gap-4 rounded-2xl bg-white p-6 text-center shadow-sm shadow-charcoal-950/5"
              >
                <span className="flex h-14 w-14 items-center justify-center rounded-full bg-gold-500/15 text-gold-600">
                  <Icon size={26} />
                </span>
                <h3 className="font-semibold text-charcoal-950">{item.title}</h3>
                <p className="text-sm text-charcoal-400">{item.description}</p>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}