import SectionHeader from "@/components/home/SectionHeader";

export default function HowItWorks({
  steps,
  subtitle,
  title,
}: {
  steps: string[][];
  subtitle: string;
  title: string;
}) {
  return (
    <section className="mx-auto max-w-[1360px] px-6 py-6 xl:px-8">
      <SectionHeader title={title} subtitle={subtitle} />

      <div className="relative mt-4 grid gap-3 lg:grid-cols-5">
        <div className="absolute left-[9%] right-[9%] top-1/2 hidden border-t border-dashed border-[#9aa9ef] lg:block" />
        {steps.map(([title, desc], index) => (
          <article
            key={title}
            className="relative flex min-h-[82px] items-center gap-3 rounded-[11px] border border-[#e6ebf4] bg-white px-3.5 py-3 shadow-[0_4px_12px_rgba(51,66,116,0.035)]"
          >
            <div className="grid h-8 w-8 shrink-0 place-items-center rounded-full bg-[#f2f1ff] text-[11px] font-extrabold text-[#615fea] ring-4 ring-white">
              {index + 1}
            </div>
            <div>
              <h3 className="text-[13px] font-extrabold text-[#5961dd]">{title}</h3>
              <p className="mt-1 text-[10px] leading-[1.55] text-[#8994a8]">{desc}</p>
            </div>
          </article>
        ))}
      </div>
    </section>
  );
}