import type { LegalSection } from "@/lib/simpleMarkdown";
import { Link } from "@/i18n/navigation";
import { ScrollReveal } from "@/components/ScrollReveal";

// Gemeinsames Layout für AGB und Datenschutzerklärung: Inhaltsverzeichnis
// links (klebt beim Scrollen), Fließtext rechts in Lesebreite. Auf schmalen
// Bildschirmen fällt die Sidebar vor den Text. Feste Content-Spalte statt
// rk-shell (kein vw-Rand) — reference/subpage-header-spec.
export function LegalDocument({
  eyebrow,
  title,
  updated,
  sections,
  seeAlsoLabel,
  otherDocLabel,
  otherDocHref,
  tocLabel,
}: {
  eyebrow: string;
  title: string;
  updated?: string;
  sections: LegalSection[];
  seeAlsoLabel: string;
  otherDocLabel: string;
  otherDocHref: string;
  tocLabel: string;
}) {
  return (
    // Opake --rk-bg-Fläche blockt den weißen Radial-Schimmer des body-Hintergrunds.
    <main className="min-h-screen bg-[var(--rk-bg)] pt-32 pb-28">
      <ScrollReveal className="mx-auto mb-16 max-w-[900px] px-5 text-center sm:px-8">
        <p className="text-xs uppercase tracking-[0.35em] text-[var(--rk-ink-muted)]">{eyebrow}</p>
        {/* Kleinere Basisgröße als bei anderen H1: "Datenschutzerklärung" ist
            als einzelnes, langes Wort mit der breiten rk-wordmark-Laufweite auf
            schmalen Bildschirmen sonst breiter als der Viewport. */}
        <h1 className="rk-wordmark mt-4 text-lg sm:text-3xl md:text-4xl">{title}</h1>
        <div className="rk-accent-rule rk-accent-rule--center" />
        {updated && (
          <p className="mt-4 text-xs uppercase tracking-[0.2em] text-[var(--rk-ink-muted)]">{updated}</p>
        )}
      </ScrollReveal>

      <div className="mx-auto grid max-w-[900px] grid-cols-1 items-start gap-x-12 gap-y-10 px-5 sm:px-8 lg:grid-cols-[13rem_1fr]">
        {sections.length > 1 && (
          <nav aria-label="Inhaltsverzeichnis" className="order-2 lg:sticky lg:top-32 lg:order-1">
            <p className="mb-3 text-xs uppercase tracking-[0.15em] text-[var(--rk-ink-muted)]">{tocLabel}</p>
            <ol className="flex flex-col gap-2 border-l border-white/10 pl-4">
              {sections.map((sec) => (
                <li key={sec.id}>
                  <a
                    href={`#${sec.id}`}
                    className="flex items-baseline gap-2 text-xs leading-snug text-[var(--rk-ink-muted)] transition-colors hover:text-[var(--rk-ink)]"
                  >
                    <span className="shrink-0 font-mono tabular-nums text-[var(--rk-accent)]/70">{sec.number}</span>
                    <span>{sec.title}</span>
                  </a>
                </li>
              ))}
            </ol>
          </nav>
        )}

        <div className="order-1 flex max-w-2xl flex-col gap-12 lg:order-2">
          {sections.map((sec) => (
            <section key={sec.id} id={sec.id} className="scroll-mt-32">
              <div className="flex items-baseline gap-3">
                {sec.number && (
                  <span className="rk-wordmark shrink-0 text-2xl text-[var(--rk-accent)]/50">
                    {sec.number.padStart(2, "0")}
                  </span>
                )}
                <h2 className="text-base font-semibold text-[var(--rk-ink)]">{sec.title}</h2>
              </div>
              <div className="mt-3 flex flex-col gap-4 text-sm leading-relaxed text-[var(--rk-ink-muted)]">
                {sec.paragraphs.map((p, i) => (
                  <p key={i} className="whitespace-pre-line">
                    {p}
                  </p>
                ))}
              </div>
            </section>
          ))}

          <div>
            <div className="rk-accent-rule" />
            <p className="mt-4 text-xs text-[var(--rk-ink-muted)]">
              {seeAlsoLabel}{" "}
              <Link href={otherDocHref} className="underline transition-colors hover:text-[var(--rk-ink)]">
                {otherDocLabel}
              </Link>
            </p>
          </div>
        </div>
      </div>
    </main>
  );
}