import type { Metadata } from "next";

import Navbar from "@/components/Navbar";
import Footer from "@/components/Footer";
import StickyMobileCTA from "@/components/StickyMobileCTA";
import JsonLd from "@/components/seo/JsonLd";
import { buildMetadata, SITE_URL } from "@/lib/seo";
import { breadcrumbJsonLd } from "@/lib/wp/seoToMetadata";

const PAGE_URL = `${SITE_URL}/mentions-legales`;

export const metadata: Metadata = buildMetadata({
  title: "Mentions légales - Covalba",
  description: "Mentions légales du site Covalba.",
  canonical: PAGE_URL,
});

const Field = ({ label, value }: { label: string; value?: string | null }) => {
  if (!value) return null;
  return (
    <div className="rounded-lg border border-border bg-card p-5">
      <dt className="font-body text-xs font-bold uppercase tracking-[0.16em] text-foreground/36">{label}</dt>
      <dd className="mt-2 whitespace-pre-line font-body text-base leading-relaxed text-foreground/72">{value}</dd>
    </div>
  );
};

export default function Page() {
  return (
    <div className="min-h-screen bg-background">
      <JsonLd
        id="mentions-legales-breadcrumb-jsonld"
        data={breadcrumbJsonLd([
          { name: "Accueil", url: `${SITE_URL}/` },
          { name: "Mentions légales", url: PAGE_URL },
        ])}
      />
      <Navbar lightBg />
      <main className="bg-offwhite pb-20 pt-28 lg:pb-28 lg:pt-36">
        <div className="container mx-auto max-w-4xl px-4 lg:px-8">
          <p className="mb-5 font-body text-[10px] font-bold uppercase tracking-[0.24em] text-primary/60">
            Informations légales
          </p>
          <h1 className="font-satoshi text-5xl font-black leading-[0.98] tracking-tight text-foreground md:text-6xl">
            Mentions légales.
          </h1>
          <p className="mt-6 max-w-2xl font-body text-lg leading-relaxed text-foreground/62">
            Cette page regroupe les informations disponibles depuis l'administration Covalba.
          </p>

          <dl className="mt-12 grid gap-4">
            <Field label="Éditeur du site" value="Covalba" />
            <Field label="Site web" value="https://www.covalba.fr" />
          </dl>

          <p className="mt-8 rounded-lg border border-border bg-card p-6 font-body text-sm leading-relaxed text-foreground/58">
            Les informations juridiques détaillées doivent être complétées par Covalba avant publication définitive.
          </p>
        </div>
      </main>
      <Footer />
      <StickyMobileCTA />
    </div>
  );
}