import { CheckCircle2, Code2, Lightbulb, PencilRuler, Search } from "lucide-react";

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

const icons = [Lightbulb, Search, PencilRuler, Code2, CheckCircle2];

export default function JourneyTimeline({ content }: { content: AboutContent["journey"] }) {
  return (
    <section className="mx-auto max-w-[1260px] px-6 py-14">
      <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-[760px]" />
      <div className="relative mt-9 grid gap-4 lg:grid-cols-5">
        <div className="absolute left-[10%] right-[10%] top-7 hidden border-t border-dashed border-[#aeb7ef] lg:block" />
        {content.items.map((item, index) => {
          const Icon = icons[index] ?? CheckCircle2;
          return <article key={item.title} className="relative rounded-2xl border border-[#e5eaf4] bg-white p-4 shadow-[0_8px_20px_rgba(51,66,116,0.045)] transition hover:-translate-y-1"><div className="relative z-10 grid h-14 w-14 place-items-center rounded-full border-4 border-white bg-gradient-to-br from-[#6670ef] to-[#8561ef] text-white shadow-lg"><Icon size={21} /></div><p className="mt-4 text-[11px] font-extrabold uppercase tracking-[0.16em] text-[#828eaa]">0{index + 1}</p><h3 className="mt-1 text-[16px] font-extrabold text-[#263152]">{item.title}</h3><p className="mt-2 text-[12px] leading-6 text-[#748099]">{item.description}</p></article>;
        })}
      </div>
    </section>
  );
}