import type { ProcessStep } from "@/lib/contentTypes";
import Reveal from "./ui/Reveal";
import PillButton from "./ui/PillButton";

/** Alur kerja 3 langkah bernomor besar. */
export default function Process({ steps }: { steps: ProcessStep[] }) {
  return (
    <section className="border-y border-line bg-surface/40">
      <div className="mx-auto grid max-w-6xl gap-12 px-5 py-24 md:px-8 md:py-32 lg:grid-cols-[0.9fr_1.1fr] lg:gap-16">
        {/* Kiri: judul + panel visual */}
        <Reveal>
          <span className="inline-flex items-center gap-2 rounded-full border border-line bg-panel px-4 py-1.5 font-accent text-[11px] tracking-[0.18em] text-mist uppercase">
            <span className="size-1 rounded-full bg-fg" />
            Alur Kerja
          </span>
          <h2 className="mt-5 text-3xl font-semibold tracking-tight text-fg md:text-5xl">
            Proses yang jelas, hasil yang pasti
          </h2>
          <p className="mt-4 max-w-md text-sm leading-relaxed text-fog md:text-base">
            Tiga langkah sederhana dari diskusi pertama hingga produk
            terus berjalan — Anda selalu tahu posisi proyek Anda.
          </p>

          <div className="mt-8 flex flex-wrap gap-3">
            <PillButton href="#kontak">Diskusi Langsung</PillButton>
            <PillButton href="#proyek" variant="ghost">
              Lihat Proyek
            </PillButton>
          </div>

          {/* panel visual kecil */}
          <div className="relative mt-10 hidden aspect-[2/1] overflow-hidden rounded-3xl border border-line lg:block">
            <div
              className="absolute inset-0"
              style={{
                background:
                  "linear-gradient(160deg, #2c3033 0%, #101214 60%, #0b0c0e 100%)",
              }}
            />
            <div className="dot-pattern absolute inset-0 opacity-50" />
            <div className="absolute -top-10 right-10 size-40 rounded-full bg-panel-strong blur-3xl" />
            <div className="absolute inset-0 grid place-items-center">
              <span className="font-accent text-5xl font-light tracking-tight text-white/[0.15] select-none">
                VELO
              </span>
            </div>
          </div>
        </Reveal>

        {/* Kanan: langkah bernomor */}
        <div className="flex flex-col justify-center">
          {steps.map((step, i) => (
            <Reveal key={step.title} delay={i * 0.12}>
              <div
                className={`flex gap-6 py-8 ${
                  i > 0 ? "border-t border-line" : ""
                }`}
              >
                <span className="font-accent text-5xl leading-none font-light text-white/[0.14] select-none md:text-6xl">
                  {String(i + 1).padStart(2, "0")}
                </span>
                <div>
                  <h3 className="text-lg font-semibold text-fg md:text-xl">
                    {step.title}
                  </h3>
                  <p className="mt-2.5 max-w-md text-sm leading-relaxed text-fog">
                    {step.description}
                  </p>
                </div>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}