import { getTranslations } from "next-intl/server";

// Kompakte Ablauf-Darstellung (Anfrage → Planung → Shooting → Auswahl) für den
// Kontext direkt vor dem Auftrags-Formular. Nutzt dieselben home.process.*-Texte
// wie der große Abschnitt auf /angebote, nur schmal und einklappbar.
export async function ProcessSteps({ locale }: { locale: string }) {
  const t = await getTranslations({ locale, namespace: "home" });
  const steps = ["one", "two", "three", "four"] as const;

  return (
    <details open className="group mb-8 rounded-xl border border-white/10 bg-[var(--rk-surface)] p-5">
      <summary className="flex cursor-pointer list-none items-center justify-between gap-2">
        <span className="text-xs uppercase tracking-[0.2em] text-[var(--rk-ink-muted)]">{t("processEyebrow")}</span>
        <span className="text-xs text-[var(--rk-ink-muted)] transition-transform group-open:rotate-180">▾</span>
      </summary>
      <ol className="mt-4 flex flex-col gap-4">
        {steps.map((s, i) => (
          <li key={s} className="flex gap-3">
            <span className="rk-wordmark shrink-0 text-base text-[var(--rk-accent)]/70">
              {String(i + 1).padStart(2, "0")}
            </span>
            <div>
              <p className="text-xs uppercase tracking-[0.12em] text-[var(--rk-ink)]">{t(`process.${s}.title`)}</p>
              <p className="mt-1 text-xs leading-relaxed text-[var(--rk-ink-muted)]">{t(`process.${s}.text`)}</p>
            </div>
          </li>
        ))}
      </ol>
    </details>
  );
}