// Auteur : Simon-Pierre Boucher — contact@spboucher.ai
// Figures & visualisations du Groupe KA — SVG/HTML dessinés sur mesure,
// style « éditorial sharp ». Une mesure = une teinte ; identité portée par
// les étiquettes et pastilles de marque, jamais par la couleur seule.

/* ------------------------------------------------------------------ */
/* Données partagées des figures                                       */
/* ------------------------------------------------------------------ */

export const FIG_PLATFORMS: {
  name: string;
  accent: string;
  domain: string;
}[] = [
  { name: "Lou·Ka", accent: "#d9f26b", domain: "lou-ka.com" },
  { name: "Immo·Ka", accent: "#e23744", domain: "immo-ka.com" },
  { name: "Vrai-Prix", accent: "#ff5148", domain: "vrai-prix.com" },
  { name: "ValoPlex", accent: "#ff9f45", domain: "valoplex.com" },
  { name: "Auto·Ka", accent: "#ff5a2a", domain: "auto-ka.com" },
  { name: "Fabri·Ka", accent: "#C4532E", domain: "fabri-ka.com" },
  { name: "Food·Ka", accent: "#d9f26b", domain: "food-ka.com" },
];

const ACCENT: Record<string, string> = Object.fromEntries(
  FIG_PLATFORMS.map((p) => [p.name, p.accent]),
);

function BrandChip({ name }: { name: string }) {
  return (
    <span
      aria-hidden="true"
      className="inline-flex h-[16px] w-[16px] flex-none items-center justify-center rounded-[4px] bg-ink"
    >
      <span
        className="h-[10px] w-[10px] rounded-[2.5px]"
        style={{ background: ACCENT[name] ?? "#d9f26b" }}
      />
    </span>
  );
}

function FigCaption({ lead, children }: { lead: string; children: React.ReactNode }) {
  return (
    <figcaption className="border-t-[1.5px] border-ink bg-surface-2 px-5 py-4 text-[13px] text-ink-2 sm:px-7">
      <span className="gk-mono font-bold text-green">{lead} — </span>
      {children}
    </figcaption>
  );
}

/* ------------------------------------------------------------------ */
/* 1. Le sablier ·Ka : plein de sites → connecteurs → KA → 7 flèches   */
/* ------------------------------------------------------------------ */

const FIG_SOURCES = [
  "Gestionnaires immobiliers",
  "Agences de courtage",
  "Rôles fonciers (MAMH)",
  "Registres de ventes",
  "Concessionnaires autos",
  "Marchands d'occasion",
  "Boutiques québécoises",
  "Sites de fabricants",
  "Bannières d'épicerie",
  "Circulaires & soldes",
];

export function AggregationFigure() {
  const W = 1060;
  const H = 620;
  const srcX = 196; // bord droit des chips sources
  const kaL = 462; // bord gauche de la boîte KA
  const kaR = 598; // bord droit de la boîte KA
  const kaY = H / 2;
  const dstX = 836; // bord gauche des chips plateformes

  const srcYs = FIG_SOURCES.map(
    (_, i) => 52 + (i * (H - 104)) / (FIG_SOURCES.length - 1),
  );
  const dstYs = FIG_PLATFORMS.map(
    (_, i) => 70 + (i * (H - 140)) / (FIG_PLATFORMS.length - 1),
  );

  return (
    <figure className="gk-card mt-7 overflow-hidden p-0">
      <div className="overflow-x-auto">
        <svg
          viewBox={`0 0 ${W} ${H}`}
          role="img"
          aria-label="Schéma de l'agrégation KA : des centaines de sites sources sont lus par des connecteurs, la donnée converge vers KA qui la redistribue vers les sept plateformes."
          className="block min-w-[760px]"
        >
          <defs>
            <marker
              id="ka-arrow"
              viewBox="0 0 10 10"
              refX="8"
              refY="5"
              markerWidth="7"
              markerHeight="7"
              orient="auto-start-reverse"
            >
              <path d="M0,0 L10,5 L0,10 z" fill="#141814" />
            </marker>
          </defs>

          {/* ---- flèches sources → KA (la moitié « plein de sites ») ---- */}
          {srcYs.map((y, i) => (
            <path
              key={`in-${i}`}
              d={`M ${srcX} ${y} C ${srcX + 130} ${y}, ${kaL - 120} ${kaY}, ${kaL - 8} ${kaY + (i - (FIG_SOURCES.length - 1) / 2) * 7}`}
              fill="none"
              stroke="#141814"
              strokeWidth="1.5"
              strokeOpacity="0.5"
              className="fig-flow"
              style={{ animationDelay: `${i * 0.13}s` }}
            />
          ))}

          {/* ---- flèches KA → plateformes (le split) ---- */}
          {dstYs.map((y, i) => (
            <path
              key={`out-${i}`}
              d={`M ${kaR + 4} ${kaY + (i - (FIG_PLATFORMS.length - 1) / 2) * 9} C ${kaR + 120} ${kaY}, ${dstX - 130} ${y}, ${dstX - 12} ${y}`}
              fill="none"
              stroke="#141814"
              strokeWidth="2"
              strokeOpacity="0.75"
              markerEnd="url(#ka-arrow)"
              className="fig-flow"
              style={{ animationDelay: `${0.4 + i * 0.11}s` }}
            />
          ))}

          {/* ---- chips sources (plein de sites) ---- */}
          {FIG_SOURCES.map((label, i) => (
            <g key={label}>
              <rect
                x="16"
                y={srcYs[i] - 15}
                width={srcX - 16}
                height="30"
                rx="6"
                fill="#ffffff"
                stroke="#141814"
                strokeWidth="1.5"
              />
              <circle cx="32" cy={srcYs[i]} r="3.5" fill="#1c5c41" />
              <text
                x="44"
                y={srcYs[i] + 3.5}
                fontFamily="var(--font-jetbrains), monospace"
                fontSize="10.5"
                fontWeight="700"
                fill="#141814"
              >
                {label}
              </text>
            </g>
          ))}
          <text
            x="16"
            y="24"
            fontFamily="var(--font-jetbrains), monospace"
            fontSize="11"
            fontWeight="700"
            letterSpacing="1.5"
            fill="#8b928c"
          >
            DES CENTAINES DE SITES
          </text>

          {/* ---- étiquette connecteurs sur le faisceau ---- */}
          <g transform={`translate(${(srcX + kaL) / 2 - 8} ${kaY - 116}) rotate(-4)`}>
            <rect
              x="-98"
              y="-24"
              width="196"
              height="48"
              rx="12"
              fill="#d9f26b"
              stroke="#141814"
              strokeWidth="1.5"
            />
            <text
              x="0"
              y="-4"
              textAnchor="middle"
              fontFamily="var(--font-jetbrains), monospace"
              fontSize="11"
              fontWeight="700"
              letterSpacing="1"
              fill="#141814"
            >
              450+ CONNECTEURS
            </text>
            <text
              x="0"
              y="13"
              textAnchor="middle"
              fontFamily="var(--font-jetbrains), monospace"
              fontSize="8.5"
              fill="#2c3a2c"
            >
              lecture à la source · normalisation
            </text>
          </g>

          {/* ---- la boîte KA ---- */}
          <g transform={`translate(${(kaL + kaR) / 2} ${kaY}) rotate(-2)`}>
            <rect
              x={-(kaR - kaL) / 2 + 6}
              y="-64"
              width={kaR - kaL}
              height="140"
              rx="12"
              fill="rgba(20,24,20,0.18)"
            />
            <rect
              x={-(kaR - kaL) / 2}
              y="-70"
              width={kaR - kaL}
              height="140"
              rx="12"
              fill="#141814"
            />
            <text
              x="0"
              y="6"
              textAnchor="middle"
              fontFamily="var(--font-space-grotesk), sans-serif"
              fontSize="58"
              fontWeight="700"
              letterSpacing="-2"
              fill="#d9f26b"
            >
              KA
            </text>
            <text
              x="0"
              y="34"
              textAnchor="middle"
              fontFamily="var(--font-jetbrains), monospace"
              fontSize="10.5"
              fontWeight="700"
              letterSpacing="2"
              fill="rgba(245,243,238,0.75)"
            >
              = AGRÉGATION
            </text>
            <text
              x="0"
              y="51"
              textAnchor="middle"
              fontFamily="var(--font-jetbrains), monospace"
              fontSize="8"
              fill="rgba(245,243,238,0.55)"
            >
              dédoublonner · géocoder
            </text>
          </g>

          {/* ---- chips plateformes (le split ·Ka) ---- */}
          {FIG_PLATFORMS.map((p, i) => (
            <g key={p.name}>
              <rect
                x={dstX}
                y={dstYs[i] - 20}
                width={W - dstX - 16}
                height="40"
                rx="8"
                fill="#ffffff"
                stroke="#141814"
                strokeWidth="1.5"
              />
              <rect
                x={dstX + 12}
                y={dstYs[i] - 8}
                width="16"
                height="16"
                rx="4"
                fill="#141814"
              />
              <rect
                x={dstX + 15}
                y={dstYs[i] - 5}
                width="10"
                height="10"
                rx="2.5"
                fill={p.accent}
              />
              <text
                x={dstX + 38}
                y={dstYs[i] - 1}
                fontFamily="var(--font-space-grotesk), sans-serif"
                fontSize="14.5"
                fontWeight="700"
                fill="#141814"
              >
                {p.name}
              </text>
              <text
                x={dstX + 38}
                y={dstYs[i] + 13}
                fontFamily="var(--font-jetbrains), monospace"
                fontSize="9"
                fill="#8b928c"
              >
                {p.domain}
              </text>
            </g>
          ))}
          <text
            x={dstX}
            y="34"
            fontFamily="var(--font-jetbrains), monospace"
            fontSize="11"
            fontWeight="700"
            letterSpacing="1.5"
            fill="#8b928c"
          >
            SEPT PLATEFORMES
          </text>
        </svg>
      </div>
      <FigCaption lead="LE SABLIER ·KA">
        des centaines de sites éparpillés, lus à la source par des connecteurs
        dédiés ; tout converge vers KA, qui normalise, dédoublonne et
        redistribue vers sept plateformes. Une flèche entre, sept flèches
        sortent : c&apos;est ça, agréger.
      </FigCaption>
    </figure>
  );
}

/* ------------------------------------------------------------------ */
/* 2. Le pipeline : de la page web à la donnée propre (vertical)       */
/* ------------------------------------------------------------------ */

const PIPELINE_STEPS: { num: string; title: string; desc: string }[] = [
  {
    num: "01",
    title: "Site source",
    desc: "La page publique, telle que tout le monde la voit.",
  },
  {
    num: "02",
    title: "Connecteur",
    desc: "Un lecteur dédié par site — il connaît sa structure par cœur.",
  },
  {
    num: "03",
    title: "Normalisation",
    desc: "Mêmes champs, mêmes unités : un 3½ est un 3½ partout.",
  },
  {
    num: "04",
    title: "Dédoublonnage & géocodage",
    desc: "Une seule fiche par annonce réelle, posée sur la carte.",
  },
  {
    num: "05",
    title: "Publication",
    desc: "En ligne, datée, traçable jusqu'à la source originale.",
  },
];

export function PipelineFigure() {
  const W = 480;
  const rowH = 96;
  const boxW = 356;
  const H = PIPELINE_STEPS.length * rowH + 24;

  return (
    <figure className="gk-card overflow-hidden p-0">
      <div className="overflow-x-auto">
        <svg
          viewBox={`0 0 ${W} ${H}`}
          role="img"
          aria-label="Le pipeline de la donnée KA : site source, connecteur, normalisation, dédoublonnage et géocodage, publication — puis resynchronisation en boucle."
          className="block min-w-[420px]"
        >
          <defs>
            <marker
              id="pipe-arrow"
              viewBox="0 0 10 10"
              refX="8"
              refY="5"
              markerWidth="7"
              markerHeight="7"
              orient="auto-start-reverse"
            >
              <path d="M0,0 L10,5 L0,10 z" fill="#141814" />
            </marker>
          </defs>

          {/* connecteurs verticaux entre stations */}
          {PIPELINE_STEPS.slice(0, -1).map((_, i) => (
            <line
              key={`v-${i}`}
              x1={24 + boxW / 2}
              y1={20 + i * rowH + 64}
              x2={24 + boxW / 2}
              y2={20 + (i + 1) * rowH - 6}
              stroke="#141814"
              strokeWidth="2"
              markerEnd="url(#pipe-arrow)"
              className="fig-flow"
              style={{ animationDelay: `${i * 0.2}s` }}
            />
          ))}

          {/* boucle de resynchronisation : bas → haut, à droite */}
          <path
            d={`M ${24 + boxW} ${20 + (PIPELINE_STEPS.length - 1) * rowH + 32}
                C ${W - 26} ${20 + (PIPELINE_STEPS.length - 1) * rowH + 32},
                  ${W - 26} ${20 + 32},
                  ${24 + boxW + 10} ${20 + 32}`}
            fill="none"
            stroke="#1c5c41"
            strokeWidth="2"
            markerEnd="url(#pipe-arrow)"
            className="fig-flow"
            style={{ animationDelay: "0.5s" }}
          />
          <g
            transform={`translate(${W - 27} ${H / 2}) rotate(90)`}
          >
            <rect
              x="-78"
              y="-13"
              width="156"
              height="26"
              rx="13"
              fill="#d9f26b"
              stroke="#141814"
              strokeWidth="1.5"
            />
            <text
              x="0"
              y="4"
              textAnchor="middle"
              fontFamily="var(--font-jetbrains), monospace"
              fontSize="9.5"
              fontWeight="700"
              letterSpacing="1"
              fill="#141814"
            >
              RESYNC EN CONTINU
            </text>
          </g>

          {/* stations */}
          {PIPELINE_STEPS.map((s, i) => (
            <g key={s.num}>
              <rect
                x="24"
                y={20 + i * rowH}
                width={boxW}
                height="64"
                rx="10"
                fill={i === PIPELINE_STEPS.length - 1 ? "#141814" : "#ffffff"}
                stroke="#141814"
                strokeWidth="1.5"
              />
              <text
                x="42"
                y={20 + i * rowH + 27}
                fontFamily="var(--font-jetbrains), monospace"
                fontSize="11"
                fontWeight="700"
                fill={i === PIPELINE_STEPS.length - 1 ? "#d9f26b" : "#1c5c41"}
              >
                {s.num}
              </text>
              <text
                x="70"
                y={20 + i * rowH + 27}
                fontFamily="var(--font-space-grotesk), sans-serif"
                fontSize="14.5"
                fontWeight="700"
                fill={i === PIPELINE_STEPS.length - 1 ? "#f5f3ee" : "#141814"}
              >
                {s.title}
              </text>
              <text
                x="42"
                y={20 + i * rowH + 48}
                fontFamily="var(--font-inter), sans-serif"
                fontSize="11"
                fill={
                  i === PIPELINE_STEPS.length - 1
                    ? "rgba(245,243,238,0.7)"
                    : "#4d5551"
                }
              >
                {s.desc}
              </text>
            </g>
          ))}
        </svg>
      </div>
      <FigCaption lead="LE PIPELINE">
        cinq stations, aucune main humaine. La boucle verte à droite est le
        secret : tout le pipeline se rejoue en continu, donc une annonce
        retirée à la source disparaît d&apos;elle-même.
      </FigCaption>
    </figure>
  );
}

/* ------------------------------------------------------------------ */
/* 3. Le cycle ·Ka : la boucle jour et nuit                            */
/* ------------------------------------------------------------------ */

const CYCLE_STEPS = [
  { num: "01", label: "Lire les sources", angle: -90 },
  { num: "02", label: "Comparer à hier", angle: 0 },
  { num: "03", label: "Mettre à jour", angle: 90 },
  { num: "04", label: "Publier & tracer", angle: 180 },
];

export function CycleFigure() {
  const S = 480;
  const cx = S / 2;
  const cy = S / 2 + 6;
  const R = 150;

  return (
    <figure className="gk-card overflow-hidden p-0">
      <div className="flex justify-center">
        <svg
          viewBox={`0 0 ${S} ${S}`}
          role="img"
          aria-label="Le cycle KA : lire les sources, comparer à hier, mettre à jour, publier et tracer — en boucle, jour et nuit."
          className="block w-full max-w-[480px]"
        >
          <defs>
            <marker
              id="cyc-arrow"
              viewBox="0 0 10 10"
              refX="7"
              refY="5"
              markerWidth="6.5"
              markerHeight="6.5"
              orient="auto"
            >
              <path d="M0,0 L10,5 L0,10 z" fill="#141814" />
            </marker>
          </defs>

          {/* anneau pointillé qui tourne (le flux) */}
          <circle
            cx={cx}
            cy={cy}
            r={R}
            fill="none"
            stroke="#141814"
            strokeWidth="2"
            strokeOpacity="0.65"
            className="fig-flow"
          />
          {/* flèches de sens, aux diagonales */}
          {[-45, 45, 135, 225].map((a) => {
            const rad = (a * Math.PI) / 180;
            const x = cx + R * Math.cos(rad);
            const y = cy + R * Math.sin(rad);
            // tangente (sens horaire)
            const tx = -Math.sin(rad);
            const ty = Math.cos(rad);
            return (
              <line
                key={a}
                x1={x - tx}
                y1={y - ty}
                x2={x + tx * 2}
                y2={y + ty * 2}
                stroke="#141814"
                strokeWidth="2"
                markerEnd="url(#cyc-arrow)"
              />
            );
          })}

          {/* KA au centre */}
          <g transform={`translate(${cx} ${cy}) rotate(-2)`}>
            <rect x="-48" y="-42" width="96" height="88" rx="10" fill="rgba(20,24,20,0.18)" transform="translate(5 5)" />
            <rect x="-48" y="-42" width="96" height="88" rx="10" fill="#141814" />
            <text
              x="0"
              y="8"
              textAnchor="middle"
              fontFamily="var(--font-space-grotesk), sans-serif"
              fontSize="40"
              fontWeight="700"
              letterSpacing="-1.5"
              fill="#d9f26b"
            >
              KA
            </text>
            <text
              x="0"
              y="30"
              textAnchor="middle"
              fontFamily="var(--font-jetbrains), monospace"
              fontSize="8"
              letterSpacing="1.5"
              fill="rgba(245,243,238,0.65)"
            >
              JOUR ET NUIT
            </text>
          </g>

          {/* étapes sur l'anneau */}
          {CYCLE_STEPS.map((s) => {
            const rad = (s.angle * Math.PI) / 180;
            const x = cx + R * Math.cos(rad);
            const y = cy + R * Math.sin(rad);
            const w = 150;
            return (
              <g key={s.num} transform={`translate(${x} ${y})`}>
                <rect
                  x={-w / 2}
                  y="-19"
                  width={w}
                  height="38"
                  rx="8"
                  fill="#ffffff"
                  stroke="#141814"
                  strokeWidth="1.5"
                />
                <text
                  x={-w / 2 + 12}
                  y="4.5"
                  fontFamily="var(--font-jetbrains), monospace"
                  fontSize="10"
                  fontWeight="700"
                  fill="#1c5c41"
                >
                  {s.num}
                </text>
                <text
                  x={-w / 2 + 34}
                  y="4.5"
                  fontFamily="var(--font-space-grotesk), sans-serif"
                  fontSize="12.5"
                  fontWeight="700"
                  fill="#141814"
                >
                  {s.label}
                </text>
              </g>
            );
          })}
        </svg>
      </div>
      <FigCaption lead="LE CYCLE ·KA">
        quatre gestes, en boucle, sans intervention humaine. C&apos;est la
        définition maison de l&apos;agrégation : pas un instantané, un
        battement.
      </FigCaption>
    </figure>
  );
}

/* ------------------------------------------------------------------ */
/* 4. Barres : ce qui est en ligne en ce moment (une mesure, une       */
/*    teinte ; identité par étiquette + pastille de marque)            */
/* ------------------------------------------------------------------ */

const INVENTORY: { name: string; value: number; unit: string }[] = [
  { name: "Fabri·Ka", value: 281000, unit: "produits québécois" },
  { name: "Immo·Ka", value: 54000, unit: "propriétés à vendre" },
  { name: "Food·Ka", value: 23700, unit: "prix d'épicerie" },
  { name: "Auto·Ka", value: 15900, unit: "véhicules d'occasion" },
  { name: "Lou·Ka", value: 7000, unit: "logements à louer" },
];

const fmt = (n: number) => n.toLocaleString("fr-CA").replace(/ /g, " ");

export function InventoryBars() {
  const max = Math.max(...INVENTORY.map((d) => d.value));
  return (
    <figure className="gk-card overflow-hidden p-0">
      <div className="p-5 sm:p-7">
        <p className="klabel">Inventaire vivant · aujourd&apos;hui</p>
        <h3 className="gk-display mt-2 text-[17px] font-bold uppercase">
          Ce qui est en ligne en ce moment
        </h3>
        <div className="mt-6 space-y-5">
          {INVENTORY.map((d) => (
            <div key={d.name} title={`${d.name} — ${fmt(d.value)}+ ${d.unit}`}>
              <div className="flex items-baseline justify-between gap-3">
                <span className="flex items-center gap-2 text-[13px] font-bold">
                  <BrandChip name={d.name} />
                  <span className="gk-display">{d.name}</span>
                  <span className="gk-mono text-[10px] font-medium text-ink-3">
                    {d.unit}
                  </span>
                </span>
                <span className="gk-mono text-[12.5px] font-bold text-ink">
                  {fmt(d.value)}+
                </span>
              </div>
              <div className="mt-[6px] h-[14px] w-full rounded-r-[4px] bg-[rgba(20,24,20,0.06)]">
                <div
                  className="bar-grow h-full rounded-r-[4px] bg-green"
                  style={{ width: `${Math.max((d.value / max) * 100, 1.5)}%` }}
                />
              </div>
            </div>
          ))}
        </div>
      </div>
      <FigCaption lead="L'INVENTAIRE">
        chaque barre est vivante : elle grossit quand les connecteurs trouvent
        du neuf, elle maigrit quand une annonce disparaît à la source. Compté
        aujourd&apos;hui, pas promis.
      </FigCaption>
    </figure>
  );
}

/* ------------------------------------------------------------------ */
/* 5. Matrice de connecteurs : un point = un connecteur                */
/* ------------------------------------------------------------------ */

const CONNECTORS: { name: string; count: number; kind: string }[] = [
  { name: "Auto·Ka", count: 124, kind: "concessionnaires" },
  { name: "Lou·Ka", count: 108, kind: "gestionnaires" },
  { name: "Immo·Ka", count: 65, kind: "agences" },
  { name: "Food·Ka", count: 20, kind: "bannières" },
];

export function ConnectorMatrix() {
  return (
    <figure className="gk-card overflow-hidden p-0">
      <div className="p-5 sm:p-7">
        <p className="klabel">La flotte · un point = un connecteur</p>
        <h3 className="gk-display mt-2 text-[17px] font-bold uppercase">
          317 connecteurs, dessinés un par un
        </h3>
        <div className="mt-6 space-y-6">
          {CONNECTORS.map((c) => (
            <div key={c.name} title={`${c.name} — ${c.count} connecteurs (${c.kind})`}>
              <div className="flex items-baseline justify-between gap-3">
                <span className="flex items-center gap-2 text-[13px] font-bold">
                  <BrandChip name={c.name} />
                  <span className="gk-display">{c.name}</span>
                  <span className="gk-mono text-[10px] font-medium text-ink-3">
                    {c.kind}
                  </span>
                </span>
                <span className="gk-mono text-[12.5px] font-bold">
                  {c.count}
                </span>
              </div>
              <div className="mt-[8px] flex max-w-[460px] flex-wrap gap-[3px]">
                {Array.from({ length: c.count }, (_, i) => (
                  <span
                    key={i}
                    className="h-[7px] w-[7px] rounded-[2px] bg-green"
                  />
                ))}
              </div>
            </div>
          ))}
        </div>
      </div>
      <FigCaption lead="LA FLOTTE">
        chaque point est un petit programme qui connaît un site par cœur et le
        relit sans arrêt. S&apos;y ajoutent les flux des 1 204 boutiques de
        Fabri·Ka et les données publiques qui alimentent Vrai-Prix et ValoPlex.
      </FigCaption>
    </figure>
  );
}

/* ------------------------------------------------------------------ */
/* 6. Tuiles de couverture : les deux moteurs d'évaluation             */
/* ------------------------------------------------------------------ */

const COVERAGE: {
  name: string;
  value: string;
  label: string;
  sub: string;
}[] = [
  {
    name: "Vrai-Prix",
    value: "3 747 008",
    label: "propriétés couvertes",
    sub: "toutes les unités du rôle foncier du Québec, estimées",
  },
  {
    name: "ValoPlex",
    value: "393 867",
    label: "plex évalués",
    sub: "1 733 744 portes — l'unité d'analyse du plex",
  },
];

export function CoverageTiles() {
  return (
    <div className="flex h-full flex-col gap-5">
      {COVERAGE.map((c) => (
        <article key={c.name} className="gk-card gk-card-hover flex-1 p-5 sm:p-7">
          <p className="klabel flex items-center gap-2">
            <BrandChip name={c.name} />
            {c.name} · couverture
          </p>
          <p className="gk-display mt-3 text-[clamp(34px,4.5vw,48px)] leading-none font-bold tracking-[-0.03em]">
            {c.value}
          </p>
          <p className="gk-display mt-1 text-[14px] font-bold uppercase text-green">
            {c.label}
          </p>
          <p className="mt-2 text-[12.5px] text-ink-2">{c.sub}</p>
        </article>
      ))}
      <p className="gk-mono text-[11px] leading-relaxed text-ink-3">
        Couvrir n&apos;est pas agréger au rabais : chaque estimation garde ses
        comparables, ses ajustements en dollars et sa fourchette.
      </p>
    </div>
  );
}