import { processSteps } from '../data/content';
import { ProcessStep } from './ProcessStep';

export function ProcessSection() {
  return (
    <section id="werkwijze" className="py-[88px]">
      <div className="mx-auto max-w-[1080px] px-6">
        <div className="mb-[52px]">
          <span className="font-mono block text-sm uppercase tracking-wider text-accent">
            // werkwijze
          </span>
          <h2 className="font-display mt-3.5 text-3xl font-bold sm:text-4xl">
            Van idee naar live in drie stappen
          </h2>
        </div>
        <div className="grid grid-cols-1 gap-[22px] sm:grid-cols-3">
          {processSteps.map((step) => (
            <ProcessStep key={step.label} step={step} />
          ))}
        </div>
      </div>
    </section>
  );
}