import { processSteps } from "@/modules/landingPage/data/content"

// Each card sticks a little lower than the previous one, so they stack up.
const cardThemes = ["light", "dark", "light", "dark"] as const

export function ProcessSection() {
  return (
    <section
      id="prozess"
      aria-labelledby="prozess-title"
      data-theme="dark"
      className="py-section"
    >
      <div className="container-site grid gap-12 lg:grid-cols-12 lg:gap-x-8">
        <div className="lg:col-span-4">
          <div className="flex flex-col gap-6 lg:sticky lg:top-32">
            <p className="font-mono text-label text-fg-muted">(Prozess)</p>
            {/* Sized to fit its four columns, so it never runs into the cards */}
            <h2
              id="prozess-title"
              className="text-[clamp(2.75rem,6vw,6rem)] leading-[0.86] type-poster"
            >
              Vier
              <br />
              Schritte.
            </h2>
            <p className="type-body text-fg-muted">
              Vom ersten Gespräch bis zum Launch. Mit Festpreis und ohne
              Überraschungen.
            </p>
          </div>
        </div>

        {/* One empty column between title and cards */}
        <ol className="flex flex-col gap-6 lg:col-span-7 lg:col-start-6">
          {processSteps.map((step, index) => (
            <li
              key={step.title}
              data-theme={cardThemes[index % cardThemes.length]}
              style={{ top: `calc(7rem + ${index * 1.75}rem)` }}
              className="sticky flex min-h-104 flex-col justify-between gap-12 rounded-glass border border-line p-6 shadow-[0_-20px_60px_-20px_rgb(0_0_0/0.6)] md:min-h-128 md:p-10"
            >
              <div className="flex items-start justify-between gap-6">
                <span className="font-mono text-label text-fg-muted">
                  Schritt {index + 1} von {processSteps.length}
                </span>
                <span
                  aria-hidden="true"
                  className="text-[clamp(5rem,12vw,11rem)] leading-[0.8] type-poster text-outline"
                >
                  {String(index + 1).padStart(2, "0")}
                </span>
              </div>
              <div className="flex flex-col gap-4">
                <h3 className="text-statement type-poster">{step.title}</h3>
                <p className="type-body text-lead text-fg-muted">{step.description}</p>
              </div>
            </li>
          ))}
        </ol>
      </div>
    </section>
  )
}