export default function ProcessFlow({ steps, compact = false }) {
  return (
    <div className={`grid gap-3 ${compact ? "" : "lg:grid-cols-2"}`}>
      {steps.map((step, index) => (
        <div key={step.title} className="rounded-[28px] border border-white/10 bg-white/5 p-4">
          <div className="flex items-start gap-4">
            <span className="inline-flex h-10 w-10 shrink-0 items-center justify-center rounded-2xl border border-white/10 bg-slate-950/70 text-sm font-semibold text-slate-100">
              {String(index + 1).padStart(2, "0")}
            </span>
            <div>
              <p className="text-sm font-semibold uppercase tracking-[0.2em] text-cyan-100/80">
                {step.title}
              </p>
              <p className="mt-2 text-sm leading-7 text-slate-300">{step.detail}</p>
            </div>
          </div>
        </div>
      ))}
    </div>
  )
}