// Auteur : Simon-Pierre Boucher — contact@spboucher.ai
"use client";
import Link from "next/link";
import { useLang } from "./LangContext";

export interface LegalSection {
  title: string;
  paras: string[];
}

export default function LegalPage({
  crumb,
  kicker,
  title,
  updated,
  sections,
  children,
}: {
  crumb: { fr: string; en: string };
  kicker: { fr: string; en: string };
  title: { fr: string; en: string };
  updated: string;
  sections: { fr: LegalSection[]; en: LegalSection[] };
  children?: React.ReactNode;
}) {
  const { lang } = useLang();
  const fr = lang === "fr";
  const list = fr ? sections.fr : sections.en;
  return (
    <div className="py-10">
      <nav className="vp-mono mb-8 flex items-center gap-2 text-[11.5px] uppercase tracking-[0.06em] text-ink-3">
        <Link href="/" className="border-b-[1.5px] border-transparent hover:border-green hover:text-green">
          Vrai-Prix
        </Link>
        <span>/</span>
        <span>{fr ? crumb.fr : crumb.en}</span>
      </nav>
      <span className="kicker">{fr ? kicker.fr : kicker.en}</span>
      <h1 className="vp-display mt-3 max-w-3xl text-[clamp(28px,4.6vw,44px)] font-bold uppercase leading-[1.02] tracking-[-0.03em]">
        {fr ? title.fr : title.en}
      </h1>
      <p className="vp-mono mt-3 text-[11px] uppercase tracking-[0.08em] text-ink-3">
        {fr ? "Dernière mise à jour" : "Last updated"} : {updated}
      </p>
      <div className="mt-8 space-y-6">
        {list.map((s, i) => (
          <section key={s.title} className="vp-card p-6 sm:p-7">
            <div className="flex items-baseline gap-4">
              <span className="vp-mono text-[12px] font-bold text-green">
                {String(i + 1).padStart(2, "0")}
              </span>
              <h2 className="vp-display text-[17px] font-bold uppercase tracking-[-0.01em]">
                {s.title}
              </h2>
            </div>
            <div className="mt-3 space-y-3">
              {s.paras.map((p, j) => (
                <p key={j} className="max-w-3xl text-[14px] leading-relaxed text-ink-2">
                  {p}
                </p>
              ))}
            </div>
          </section>
        ))}
      </div>
      {children}
      <div className="vp-card mt-6 border-ink bg-ink p-6 text-paper">
        <p className="klabel !text-lime">
          {fr ? "Responsable et contact" : "Controller and contact"}
        </p>
        <p className="vp-display mt-2 text-[18px] font-bold">Simon-Pierre Boucher</p>
        <p className="vp-mono mt-1 text-[12px] tracking-[0.04em] text-[rgba(245,243,238,0.8)]">
          contact@spboucher.ai · vrai-prix.com
        </p>
      </div>
    </div>
  );
}