spb/vrai-prix Public

1// Auteur : Simon-Pierre Boucher — contact@spboucher.ai2"use client";3import Link from "next/link";4import { useLang } from "./LangContext";56export interface LegalSection {7  title: string;8  paras: string[];9}1011export default function LegalPage({12  crumb,13  kicker,14  title,15  updated,16  sections,17  children,18}: {19  crumb: { fr: string; en: string };20  kicker: { fr: string; en: string };21  title: { fr: string; en: string };22  updated: string;23  sections: { fr: LegalSection[]; en: LegalSection[] };24  children?: React.ReactNode;25}) {26  const { lang } = useLang();27  const fr = lang === "fr";28  const list = fr ? sections.fr : sections.en;29  return (30    <div className="py-10">31      <nav className="vp-mono mb-8 flex items-center gap-2 text-[11.5px] uppercase tracking-[0.06em] text-ink-3">32        <Link href="/" className="border-b-[1.5px] border-transparent hover:border-green hover:text-green">33          Vrai-Prix34        </Link>35        <span>/</span>36        <span>{fr ? crumb.fr : crumb.en}</span>37      </nav>38      <span className="kicker">{fr ? kicker.fr : kicker.en}</span>39      <h1 className="vp-display mt-3 max-w-3xl text-[clamp(28px,4.6vw,44px)] font-bold uppercase leading-[1.02] tracking-[-0.03em]">40        {fr ? title.fr : title.en}41      </h1>42      <p className="vp-mono mt-3 text-[11px] uppercase tracking-[0.08em] text-ink-3">43        {fr ? "Dernière mise à jour" : "Last updated"} : {updated}44      </p>45      <div className="mt-8 space-y-6">46        {list.map((s, i) => (47          <section key={s.title} className="vp-card p-6 sm:p-7">48            <div className="flex items-baseline gap-4">49              <span className="vp-mono text-[12px] font-bold text-green">50                {String(i + 1).padStart(2, "0")}51              </span>52              <h2 className="vp-display text-[17px] font-bold uppercase tracking-[-0.01em]">53                {s.title}54              </h2>55            </div>56            <div className="mt-3 space-y-3">57              {s.paras.map((p, j) => (58                <p key={j} className="max-w-3xl text-[14px] leading-relaxed text-ink-2">59                  {p}60                </p>61              ))}62            </div>63          </section>64        ))}65      </div>66      {children}67      <div className="vp-card mt-6 border-ink bg-ink p-6 text-paper">68        <p className="klabel !text-lime">69          {fr ? "Responsable et contact" : "Controller and contact"}70        </p>71        <p className="vp-display mt-2 text-[18px] font-bold">Simon-Pierre Boucher</p>72        <p className="vp-mono mt-1 text-[12px] tracking-[0.04em] text-[rgba(245,243,238,0.8)]">73          contact@spboucher.ai · vrai-prix.com74        </p>75      </div>76    </div>77  );78}79