import { Link } from "@tanstack/react-router";

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

export function LegalPage({ slug }: { slug: LegalSlug }) {
  const { lang } = useI18n();
  const doc = LEGAL_DOCS[slug][lang];

  return (
    <div className="mx-auto w-full max-w-6xl px-4 py-6">
      <div className="grid gap-8 lg:grid-cols-[1fr_240px]">
        <article className="rounded-2xl border border-border bg-card p-5 shadow-sm sm:p-8">
          <p className="text-xs font-bold uppercase tracking-wide text-primary">
            {lang === "pt" ? "Informação legal" : "Legal information"}
          </p>
          <h1 className="mt-2 font-display text-2xl font-bold text-foreground sm:text-3xl">
            {doc.title}
          </h1>
          <p className="mt-3 text-base text-muted-foreground">{doc.subtitle}</p>
          <p className="mt-2 text-xs text-muted-foreground">{doc.updated}</p>

          <div className="mt-8 space-y-7">
            {doc.sections.map((section) => (
              <section key={section.heading}>
                <h2 className="font-display text-lg font-bold text-foreground">
                  {section.heading}
                </h2>
                <div className="mt-2 space-y-2">
                  {section.body.map((paragraph) => (
                    <p key={paragraph} className="text-sm leading-relaxed text-foreground/85">
                      {paragraph}
                    </p>
                  ))}
                </div>
              </section>
            ))}
          </div>
        </article>

        <aside className="lg:sticky lg:top-24 lg:self-start">
          <nav className="rounded-2xl border border-border bg-card p-4 shadow-sm">
            <h2 className="text-xs font-bold uppercase tracking-wide text-muted-foreground">
              {lang === "pt" ? "Outros documentos" : "Other documents"}
            </h2>
            <ul className="mt-3 space-y-2">
              {LEGAL_LINKS.map((item) => (
                <li key={item.slug}>
                  <Link
                    to={`/${item.slug}` as "/termos"}
                    className={`block rounded-lg px-3 py-2 text-sm transition-colors ${
                      item.slug === slug
                        ? "bg-primary/10 font-semibold text-primary"
                        : "text-foreground/80 hover:bg-muted"
                    }`}
                  >
                    {item.label[lang]}
                  </Link>
                </li>
              ))}
            </ul>
          </nav>
        </aside>
      </div>
    </div>
  );
}