import { Gauge, HeartHandshake, Lock, RefreshCw, ShieldCheck, Sparkles } from "lucide-react";

import SectionHeader from "@/components/home/SectionHeader";
import type { AboutContent } from "@/data/about.data";

const icons = [Sparkles, ShieldCheck, Gauge, Lock, HeartHandshake, RefreshCw];

export default function CompanyValues({ content }: { content: AboutContent["values"] }) {
  return (
    <section className="bg-[#f9faff] py-14">
      <div className="mx-auto max-w-[1200px] px-6">
        <p className="text-center text-[11px] font-extrabold uppercase tracking-[0.2em] text-[#626bef]">{content.eyebrow}</p>
        <SectionHeader title={content.title} subtitle={content.description} className="mx-auto mt-2 max-w-[720px]" />
        <div className="mt-7 grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
          {content.items.map((item, index) => {
            const Icon = icons[index] ?? Sparkles;
            return <article key={item.title} className="group rounded-2xl border border-[#e5eaf4] bg-white p-5 shadow-[0_8px_24px_rgba(51,66,116,0.045)] transition duration-300 hover:-translate-y-1 hover:border-[#cfd4ff] hover:shadow-[0_16px_30px_rgba(65,76,142,0.1)]"><div className="grid h-11 w-11 place-items-center rounded-xl bg-gradient-to-br from-[#eef0ff] to-[#e3e8ff] text-[#5e68e7]"><Icon size={20} /></div><h3 className="mt-4 text-[17px] font-extrabold text-[#263152]">{item.title}</h3><p className="mt-2 text-[13px] leading-6 text-[#748099]">{item.description}</p></article>;
          })}
        </div>
      </div>
    </section>
  );
}