import { Blend, ChartColumn, FileText, Sparkles, type LucideIcon } from 'lucide-react';
import { Container } from '@/components/ui/Container';
import { SectionHeading } from '@/components/ui/SectionHeading';
import { useMessages } from '@/i18n/client';

const ICONS: LucideIcon[] = [Blend, FileText, Sparkles, ChartColumn];

export function HowItWorksSection() {
  const t = useMessages().home.how;
  return (
    <section id="how-it-works" className="scroll-mt-20 bg-surface/60 py-24 sm:py-28">
      <Container>
        <SectionHeading
          layout="split"
          eyebrow={t.eyebrow}
          title={t.title}
          description={t.description}
        />

        <ol className="mt-14 grid gap-x-8 gap-y-12 sm:grid-cols-2 lg:mt-16 lg:grid-cols-4">
          {t.steps.map(({ title, description }, i) => {
            const Icon = ICONS[i];
            return (
            <li key={i}>
              <span className="inline-flex size-12 items-center justify-center rounded-full bg-surface text-ink-soft shadow-card ring-1 ring-line">
                <Icon className="size-5 stroke-[1.5]" aria-hidden />
              </span>
              <p className="mt-6 text-[13px] font-medium text-subtle tabular-nums">
                {String(i + 1).padStart(2, '0')}
              </p>
              <h3 className="mt-2 text-[15px] font-semibold text-ink">{title}</h3>
              <p className="mt-2 max-w-[240px] text-[13px] leading-relaxed text-muted">{description}</p>
            </li>
            );
          })}
        </ol>
      </Container>
    </section>
  );
}