import { Landmark, Sun, Mountain, Gem, Camera, Briefcase } from "lucide-react";
import { SectionHeading } from "@/components/ui/SectionHeading";
import type { Dictionary } from "@/content/types";

const icons = [Landmark, Sun, Mountain, Gem, Camera, Briefcase];

export function Experiences({ dict }: { dict: Dictionary }) {
  return (
    <section id="experiences" className="mx-auto max-w-7xl px-4 py-24 sm:px-6 lg:px-8">
      <SectionHeading
        eyebrow={dict.experiences.eyebrow}
        title={dict.experiences.title}
        titleAccent={dict.experiences.titleAccent}
      />
      <div className="mt-16 grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
        {dict.experiences.items.map((item, index) => {
          const Icon = icons[index] ?? Landmark;
          return (
            <div
              key={item.title}
              className="group relative overflow-hidden rounded-2xl border border-charcoal-950/5 bg-white p-8 shadow-sm shadow-charcoal-950/5 transition-shadow hover:shadow-lg"
            >
              <span className="flex h-14 w-14 items-center justify-center rounded-full bg-bronze-500/15 text-bronze-600 transition-colors group-hover:bg-gold-500 group-hover:text-charcoal-950">
                <Icon size={26} />
              </span>
              <h3 className="mt-6 text-lg font-semibold text-charcoal-950">{item.title}</h3>
              <p className="mt-2 text-sm text-charcoal-400">{item.description}</p>
            </div>
          );
        })}
      </div>
    </section>
  );
}