import Link from "next/link";
import { IconeFleche } from "@/components/Icones";
import { FAMILLES, type Realisation } from "@/content/realisations";

/**
 * Carte compacte d'un cas client, utilisée en aperçu sur la page d'accueil.
 * Le lien pointe vers l'ancre du cas complet sur /realisations/.
 */
export function CarteRealisation({ cas }: { cas: Realisation }) {
  return (
    <Link
      href={`/realisations/#${cas.slug}`}
      className="group flex flex-col rounded-sm border border-trait bg-white p-7 transition-colors hover:border-saumon"
    >
      <p className="text-xs font-bold uppercase tracking-[0.14em] text-saumon-texte">
        {cas.secteur} · {FAMILLES[cas.famille]}
      </p>

      <h3 className="mt-4 text-xl leading-snug">{cas.titre}</h3>

      <p className="mt-3 text-sm font-semibold text-gris">
        {cas.client}
      </p>

      <p className="mt-4 flex-1 text-[0.95rem] leading-relaxed text-gris">
        {cas.resultat}
      </p>

      <span className="mt-6 inline-flex items-center gap-2 text-sm font-bold text-anthracite">
        Lire le cas
        <IconeFleche className="h-4 w-4 text-saumon-texte transition-transform group-hover:translate-x-1" />
      </span>
    </Link>
  );
}