import { process } from "@/data/process";
import { Container } from "@/components/ui/Container";
import { SectionHeading } from "@/components/ui/SectionHeading";

export function Process() {
  return (
    <section id="process" className="py-24 sm:py-28">
      <Container>
        <SectionHeading
          title="How I work"
          description="A straightforward process from first conversation to a site that's live and maintained."
        />

        <ol className="grid gap-x-8 gap-y-10 sm:grid-cols-2 lg:grid-cols-3">
          {process.map((step) => (
            <li key={step.number} className="border-t border-border-light pt-5 dark:border-border-dark">
              <span className="font-mono text-sm text-slate-400">{step.number}</span>
              <h3 className="mt-2 text-base font-semibold text-slate-950 dark:text-white">
                {step.title}
              </h3>
              <p className="mt-2 text-sm leading-relaxed text-slate-500 dark:text-slate-400">
                {step.description}
              </p>
            </li>
          ))}
        </ol>
      </Container>
    </section>
  );
}