/**
 * ProcessSection - Server Component
 *
 * Displays a horizontal timeline of process steps.
 * Numbers are auto-generated (01, 02, 03...).
 *
 * @example
 * ```tsx
 * <ProcessSection
 *   title="Comment ca marche"
 *   subtitle="Simple et rapide"
 *   steps={[
 *     { title: "Envoyez votre facture", description: "Par email ou photo" },
 *     { title: "Analyse en 24h", description: "Comparaison des offres" },
 *     { title: "Vous choisissez", description: "On gere le changement" },
 *   ]}
 * />
 * ```
 */

import type { ProcessSectionProps } from "./types";

export function ProcessSection({
  title,
  subtitle,
  steps,
}: ProcessSectionProps) {
  return (
    <section className="bg-white py-16 md:py-24 lg:py-32">
      <div className="mx-auto max-w-7xl px-4 md:px-8">
        {/* Header */}
        <div className="mb-12 text-center md:mb-16">
          <h2 className="text-2xl font-bold capitalize tracking-tight bg-gradient-to-b from-[rgba(255,167,86,1)] to-[rgba(238,96,44,1)] bg-clip-text text-transparent md:text-4xl lg:text-5xl">
            {title}
          </h2>
          {subtitle && (
            <p className="mt-4 text-base font-semibold text-gray-900 md:text-lg">
              {subtitle}
            </p>
          )}
        </div>

        {/* Timeline Grid */}
        <div className="grid grid-cols-1 gap-8 md:grid-cols-2 lg:grid-cols-4">
          {steps.map((step, index) => (
            <div key={step.title} className="relative">
              {/* Step Number with connecting line */}
              <div className="flex items-center text-sm font-semibold text-orange-700">
                <svg
                  viewBox="0 0 4 4"
                  aria-hidden="true"
                  className="mr-4 size-1 flex-none"
                >
                  <circle r={2} cx={2} cy={2} fill="currentColor" />
                </svg>
                <span>{String(index + 1).padStart(2, "0")}</span>
                {/* Connecting line */}
                <div
                  aria-hidden="true"
                  className="absolute -ml-2 h-px w-screen -translate-x-full bg-gray-200 sm:-ml-4 lg:static lg:-mr-6 lg:ml-8 lg:w-auto lg:flex-auto lg:translate-x-0"
                />
              </div>

              {/* Content */}
              <p className="mt-6 text-lg font-semibold tracking-tight text-gray-900 md:text-xl">
                {step.title}
              </p>
              <p className="mt-2 text-base text-gray-600">{step.description}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}