import { AppCard } from "@/components/ui/app-card";
import { SectionHeading } from "./section-heading";
import type { ProcessSectionCopy } from "./types";

type ProcessSectionProps = {
  copy: ProcessSectionCopy;
};

export function ProcessSection({ copy }: ProcessSectionProps) {
  return (
    <section className="space-y-8">
      <SectionHeading
        eyebrow={copy.eyebrow}
        title={copy.title}
        description={copy.description}
      />

      <div className="grid grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-4 xl:gap-6">
        {copy.steps.map((step, index) => (
          <AppCard
            key={step.title}
            layer="single"
            interactive
            className="group border-border/80 bg-surface-2 transition-all duration-300 hover:-translate-y-1 hover:border-border-strong hover:shadow-panel"
          >
            <div className="flex h-full flex-col gap-5 p-6">
              <p className="text-sm font-semibold tracking-[0.18em] text-muted-foreground">
                {String(index + 1).padStart(2, "0")}
              </p>
              <div className="space-y-3">
                <h3 className="text-2xl font-semibold tracking-[-0.05em] text-foreground">
                  {step.title}
                </h3>
                <p className="text-sm leading-7 text-muted-foreground">{step.description}</p>
              </div>
            </div>
          </AppCard>
        ))}
      </div>
    </section>
  );
}