import Link from "next/link";
import { ChevronsFiligrane } from "@/components/Chevrons";

/**
 * ── APPRENTISSAGE ────────────────────────────────────────────────────────────
 * Le bandeau de fin de page, réutilisé sur les 6 pages de contenu.
 * Les `props` (titre, texte, libelleBouton) sont les arguments de la fonction :
 * même composant, contenu différent selon la page. C'est là tout l'intérêt
 * face à un include PHP qui, lui, dépend de variables globales définies avant.
 * ─────────────────────────────────────────────────────────────────────────────
 */
export function AppelAction({
  titre,
  texte,
  libelleBouton = "Parler de votre projet",
}: {
  titre: string;
  texte: string;
  libelleBouton?: string;
}) {
  return (
    <section className="relative overflow-hidden bg-anthracite text-white">
      {/* Filigrane : le motif du logo, très discret, en débord à droite. */}
      <ChevronsFiligrane
        className="pointer-events-none absolute -right-16 top-1/2 h-[380px] w-[380px] -translate-y-1/2 text-white/[0.045]"
      />

      <div className="conteneur relative py-16 sm:py-20">
        <div className="max-w-2xl">
          <h2 className="text-3xl sm:text-4xl">{titre}</h2>
          <p className="mt-5 text-lg leading-relaxed text-white/70">{texte}</p>
          <div className="mt-8 flex flex-col gap-3 sm:flex-row">
            <Link href="/contact/" className="bouton-primaire">
              {libelleBouton}
            </Link>
            <Link href="/realisations/" className="bouton-inverse">
              Voir les réalisations
            </Link>
          </div>
        </div>
      </div>
    </section>
  );
}