import Link from "next/link";

// Pages légales masquées tant que le contenu n'est pas validé.
// À ré-activer en remplissant la liste ci-dessous quand les pages
// /mentions-legales, /politique-confidentialite, /cgv, /cookies seront prêtes.
const legalLinks: { href: string; label: string }[] = [];

const navLinks = [
  { href: "/", label: "Accueil" },
  { href: "/societes", label: "Sociétés" },
  { href: "/marques", label: "Marques" },
  { href: "/contact", label: "Contact" },
];

export default function Footer() {
  return (
    <footer className="bg-white border-t border-outline-variant/40">
      <div className="container-page py-20 grid grid-cols-1 md:grid-cols-12 gap-12">
        <div className="md:col-span-5 space-y-6">
          <Link
            href="/"
            className="inline-flex items-center gap-2.5 font-serif font-bold text-2xl tracking-tighter text-primary"
          >
            <img
              src="/logo.png"
              alt=""
              aria-hidden="true"
              width="30"
              height="28"
              className="h-7 w-auto"
            />
            <span>Socialex</span>
          </Link>
          <p className="body-md text-on-surface-variant max-w-sm">
            Expert en droit des sociétés et des marques, nous assurons le
            traitement rigoureux de vos formalités et démarches juridiques à
            chaque étape.
          </p>
          <div className="space-y-2 pt-2">
            <div className="text-sm text-on-surface-variant">
              <span className="eyebrow block mb-1">Contact</span>
              <a
                href="mailto:contact@socialex.pro"
                className="hover:text-primary transition-colors"
              >
                contact@socialex.pro
              </a>
            </div>
          </div>
        </div>

        <div className="md:col-span-3">
          <p className="eyebrow mb-6">Navigation</p>
          <ul className="space-y-3">
            {navLinks.map((l) => (
              <li key={l.href}>
                <Link
                  href={l.href}
                  className="text-sm text-on-surface-variant hover:text-primary transition-colors"
                >
                  {l.label}
                </Link>
              </li>
            ))}
          </ul>
        </div>

        <div className="md:col-span-4">
          <p className="eyebrow mb-6">Restons en contact</p>
          <Link href="/contact" className="btn btn-primary text-xs">
            Nous contacter
          </Link>
        </div>
      </div>

      <div className="border-t border-outline-variant/40">
        <div className="container-page py-6 flex flex-col md:flex-row justify-between items-center gap-4">
          <p className="font-serif text-[10px] tracking-widest uppercase text-outline">
            © {new Date().getFullYear()} Socialex. Tous droits réservés.
          </p>
          {legalLinks.length > 0 && (
            <div className="flex flex-wrap justify-center gap-6">
              {legalLinks.map((l) => (
                <Link
                  key={l.href}
                  href={l.href}
                  className="font-serif text-[10px] tracking-widest uppercase text-outline hover:text-primary transition-colors"
                >
                  {l.label}
                </Link>
              ))}
            </div>
          )}
        </div>
      </div>
    </footer>
  );
}