"use client";

import Link from "next/link";

import { useI18n } from "@/lib/i18n";
import { LEGAL, type LegalSlug } from "@/lib/legal";

/**
 * Renders one legal document in the current language (the text lives in
 * lib/legal.ts, both languages side by side so they cannot drift apart).
 */
export function LegalPage({ slug }: { slug: LegalSlug }) {
  const { locale, t } = useI18n();
  const document = LEGAL[slug][locale === "cs" ? "cs" : "en"];

  return (
    <main className="frost-bg min-h-dvh px-4 pb-tabbar lg:px-10 lg:pb-16 lg:pt-10">
      <article className="mx-auto w-full max-w-2xl py-8">
        <p className="text-[11px] font-semibold uppercase tracking-wider text-[var(--text-subtle)]">
          {t("legal.updated", { when: document.updated })}
        </p>
        <h1 className="mt-1 text-[26px] font-semibold leading-tight tracking-[-0.02em] text-[var(--text)]">
          {document.title}
        </h1>
        <p className="mt-3 text-[15px] leading-relaxed text-[var(--text-muted)]">{document.intro}</p>

        <div className="mt-6 space-y-5">
          {document.sections.map((section) => (
            <section key={section.heading} className="card space-y-2 p-4 sm:p-5">
              <h2 className="text-[15px] font-semibold text-[var(--text)]">{section.heading}</h2>
              {section.paragraphs.map((paragraph) => (
                <p key={paragraph} className="text-[14px] leading-relaxed text-[var(--text-muted)]">
                  {paragraph}
                </p>
              ))}
              {section.list ? (
                <ul className="list-disc space-y-1.5 pl-5 text-[14px] leading-relaxed text-[var(--text-muted)]">
                  {section.list.map((entry) => (
                    <li key={entry}>{entry}</li>
                  ))}
                </ul>
              ) : null}
            </section>
          ))}
        </div>

        <p className="mt-6 text-[12px] text-[var(--text-subtle)]">{document.footer}</p>

        <nav className="mt-6 flex flex-wrap gap-3 text-[13px] font-semibold">
          {(["privacy", "terms", "cookies"] as const)
            .filter((other) => other !== slug)
            .map((other) => (
              <Link
                key={other}
                href={`/${other}`}
                className="rounded-xl border border-[var(--hairline)] bg-[var(--surface-sunken)] px-3 py-2 text-[var(--text)] transition hover:bg-[var(--hover)]"
              >
                {t(`legal.${other}`)}
              </Link>
            ))}
          <Link href="/" className="rounded-xl px-3 py-2 text-[var(--text-muted)] underline decoration-dotted">
            {t("feed.back")}
          </Link>
        </nav>
      </article>
    </main>
  );
}