// Auteur : Simon-Pierre Boucher — contact@spboucher.ai
import type { ReactNode } from "react";
import {
  AggregationFigure,
  PipelineFigure,
  CycleFigure,
  InventoryBars,
  ConnectorMatrix,
  CoverageTiles,
} from "./figures";

type Product = {
  num: string;
  markLeft: string;
  markBoxed: string;
  accent: string;   // couleur du logo (texte de la boîte)
  inkbox: string;   // fond de la boîte du logo
  domain: string;
  url: string;
  tagline: string;
  description: string;
  chips: string[];
  features: string[];
};

const PRODUCTS: Product[] = [
  {
    num: "01",
    markLeft: "Lou",
    markBoxed: "Ka",
    accent: "#d9f26b",
    inkbox: "#141814",
    domain: "www.lou-ka.com",
    url: "https://www.lou-ka.com",
    tagline: "Tous les logements à louer du Québec. Un seul endroit.",
    description:
      "Agrégateur indépendant de logements locatifs : les annonces d'environ 74 gestionnaires immobiliers, normalisées, géolocalisées et synchronisées en continu. Une annonce retirée du site source disparaît du site — rien d'inventé, tout est traçable jusqu'à l'annonce originale.",
    chips: ["7 000+ annonces", "108 connecteurs actifs", "MàJ horaire"],
    features: [
      "Recherche unifiée : ville, secteur, taille (3½…), loyer, gestionnaire",
      "Vue carte interactive en plus de la grille de résultats",
      "Historique des baisses de prix et position face au marché",
      "Aucun traceur publicitaire, aucun témoin tiers",
    ],
  },
  {
    num: "02",
    markLeft: "Immo",
    markBoxed: "Ka",
    accent: "#e23744",
    inkbox: "#1a1214",
    domain: "www.immo-ka.com",
    url: "https://www.immo-ka.com",
    tagline: "Toutes les propriétés à vendre du Québec. Un seul endroit.",
    description:
      "L'inventaire des agences de courtage du Québec — RE/MAX, Sutton, Via Capitale, Proprio Direct et des dizaines d'autres — agrégé à la source, normalisé et géolocalisé. Chaque fiche renvoie à l'inscription originale du courtier ; une propriété vendue disparaît d'elle-même.",
    chips: ["54 000+ propriétés", "65 connecteurs", "2 370 villes"],
    features: [
      "Recherche unifiée : ville, type, prix, terrain, pièces",
      "Vue carte province entière, de Gatineau à Gaspé",
      "Détection automatique des ventes et retraits",
      "Lien direct vers l'inscription originale de l'agence",
    ],
  },
  {
    num: "03",
    markLeft: "Vrai",
    markBoxed: "Prix",
    accent: "#ff5148",
    inkbox: "#141814",
    domain: "www.vrai-prix.com",
    url: "https://www.vrai-prix.com",
    tagline: "La vraie valeur de votre propriété, en toute transparence.",
    description:
      "Estimation résidentielle pour tout le Québec, bâtie sur les rôles d'évaluation foncière du MAMH et 745 119 ventes réelles publiées de 2021 à 2026. Moteur hybride — modèle hédonique + comparables ajustés — dont chaque ajustement est affiché en dollars.",
    chips: ["3 747 008 propriétés", "745 119 ventes réelles", "MdAPE 11 %"],
    features: [
      "Fourchette honnête P10-P90 plutôt qu'un faux prix unique",
      "Indice de confiance A-D affiché sur une jauge, jamais caché",
      "Chaque comparable détaillé : marché, superficie, âge, poids",
      "Rapports PDF de marque, standard à format bancaire",
    ],
  },
  {
    num: "04",
    markLeft: "Valo",
    markBoxed: "Plex",
    accent: "#ff9f45",
    inkbox: "#141814",
    domain: "www.valoplex.com",
    url: "https://www.valoplex.com",
    tagline: "La vraie valeur de votre plex, porte par porte.",
    description:
      "Le moteur d'évaluation spécialisé pour les immeubles à revenus du Québec : entraîné exclusivement sur ~91 060 ventes réelles de plex, avec les variables qui comptent — portes, aire habitable par porte, chambres locatives, mixité commerciale.",
    chips: ["393 867 plex", "1 733 744 portes", "~337 G$ de parc"],
    features: [
      "Valeur totale et valeur par porte, l'unité d'analyse du plex",
      "Fourchette calibrée : 8 fois sur 10, le vrai prix tombe dedans",
      "« Pourquoi ce prix ? » — le calcul montré en entier",
      "Suivi de parc immobilier et rapports institutionnels",
    ],
  },
  {
    num: "05",
    markLeft: "Auto",
    markBoxed: "Ka",
    accent: "#ff5a2a",
    inkbox: "#17181c",
    domain: "www.auto-ka.com",
    url: "https://www.auto-ka.com",
    tagline: "Toutes les voitures usagées à vendre au Québec. Un seul endroit.",
    description:
      "L'inventaire de 124 concessionnaires et marchands d'occasion, lu directement sur leurs sites — jamais via les plateformes d'annonces. Photos complètes, équipements, VIN, kilométrage normalisés ; les baisses de prix et les ventes sont détectées automatiquement.",
    chips: ["15 900+ véhicules", "124 concessionnaires", "18 régions"],
    features: [
      "Filtres complets : marque, modèle, année, km, carburant, région",
      "Suivi des baisses de prix — les aubaines remontent d'elles-mêmes",
      "Fiches enrichies : galeries, équipements, moteur, Carfax",
      "Rapport PDF du marché de l'occasion, téléchargeable",
    ],
  },
  {
    num: "06",
    markLeft: "Fabri",
    markBoxed: "Ka",
    accent: "#C4532E",
    inkbox: "#1E1B16",
    domain: "www.fabri-ka.com",
    url: "https://www.fabri-ka.com",
    tagline: "Tous les produits québécois. Un seul endroit.",
    description:
      "La vitrine des fabricants et artisans d'ici : plus de 280 000 produits provenant de 1 200 boutiques en ligne québécoises, indexés par région et par catégorie. Chaque produit renvoie directement à la boutique du fabricant — acheter local n'a jamais été aussi simple.",
    chips: ["281 000+ produits", "1 204 boutiques", "17 régions"],
    features: [
      "Découverte par région, catégorie et mot-clé",
      "Lien direct vers la boutique du fabricant, sans intermédiaire",
      "Des Îles-de-la-Madeleine à l'Abitibi : tout le Québec",
      "Registre public de 3 200+ boutiques d'ici",
    ],
  },
  {
    num: "07",
    markLeft: "Food",
    markBoxed: "Ka",
    accent: "#d9f26b",
    inkbox: "#14231a",
    domain: "www.food-ka.com",
    url: "https://www.food-ka.com",
    tagline: "Tous les prix d'épicerie du Québec.",
    description:
      "Les produits et circulaires des grandes bannières d'épicerie — Metro, IGA, Maxi, Super C, Provigo et 15 autres — agrégés avec leurs prix, soldes et prix unitaires. Comparer son panier entre bannières devient un réflexe, pas une corvée.",
    chips: ["23 700+ produits", "20 bannières", "2 900+ soldes actifs"],
    features: [
      "Comparaison des prix entre bannières, produit par produit",
      "Prix unitaires normalisés ($/100 g, $/L) pour comparer vraiment",
      "Soldes et circulaires de la semaine en un seul flux",
      "Catégories d'épicerie complètes, du frais au garde-manger",
    ],
  },
];

type Bot = {
  digit: string;
  accent: string;
  inkbox: string;
  domain: string;
  url: string;
  tagline: string;
  description: string;
  chips: string[];
  features: string[];
};

const BOTS: Bot[] = [
  {
    digit: "2",
    accent: "#d9f26b",
    inkbox: "#141814",
    domain: "www.ka2.bot",
    url: "https://www.ka2.bot",
    tagline: "Le web québécois, cartographié entité par entité.",
    description:
      "Ka2 est un bot IA de cartographie : il parcourt le web québécois, identifie les entités — entreprises, organisations, personnes, sites web — et les documente. Propulsé par Claude Haiku 4.5 avec Firecrawl et Scrapfly, il ne copie pas les pages : il les comprend, puis les classe.",
    chips: ["4 types d'entités", "Propulsé par IA", "robots.txt respecté"],
    features: [
      "Découverte et classement : entreprises, organisations, personnes, sites web",
      "Chaque page lue est comprise par un modèle d'IA, pas seulement copiée",
      "Budget quotidien et délais entre requêtes — un crawl qui ménage les sites",
      "Données publiques seulement, Loi 25 et LPRPDE comme plancher",
    ],
  },
  {
    digit: "4",
    accent: "#ff9f45",
    inkbox: "#141814",
    domain: "www.ka4.bot",
    url: "https://www.ka4.bot",
    tagline: "Le deuxième éclaireur, avec l'activité à découvert.",
    description:
      "Ka4 double la flotte de découverte : même moteur IA — Claude Haiku 4.5 avec Firecrawl et Scrapfly —, mais une classification élargie à cinq types d'entités et un tableau de bord où l'exploration se regarde en direct. Deux bots, deux fronts, une seule carte du web québécois.",
    chips: ["5 types d'entités", "Activité en direct", "robots.txt respecté"],
    features: [
      "Classification élargie : entreprises, organisations, personnes, sites web, données",
      "Tableau de bord public : l'activité du bot et ses découvertes, en direct",
      "Bascule automatique entre backends de lecture (Firecrawl → Scrapfly)",
      "Données publiques seulement, Loi 25 et LPRPDE comme plancher",
    ],
  },
];

const MANIFESTO = [
  {
    num: "01",
    title: "Zéro boîte noire",
    body: "Un score magique n'est pas une réponse. Chaque estimation montre ses comparables, ses ajustements en dollars et sa fourchette d'incertitude. Si le calcul ne peut pas être montré, il ne sort pas.",
  },
  {
    num: "02",
    title: "Données réelles",
    body: "Rôles d'évaluation foncière, ventes publiées, annonces vérifiées à la source. Aucun prix inventé : quand la donnée n'existe pas, on affiche qu'elle n'existe pas. Validé sur des ventes jamais vues, pas promis.",
  },
  {
    num: "03",
    title: "Indépendance",
    body: "Aucun courtier ni annonceur ne paie pour influencer un résultat. Pas de traceur publicitaire, pas de revente de données. Le français d'abord, le Québec comme terrain, la Loi 25 comme plancher.",
  },
];

const SOCLE_ROWS: [string, string, string, string][] = [
  [
    "Lou·Ka",
    "Location résidentielle",
    "108 connecteurs sources + synchronisation horaire",
    "www.lou-ka.com",
  ],
  [
    "Immo·Ka",
    "Propriétés à vendre",
    "65 connecteurs d'agences + détection des ventes",
    "www.immo-ka.com",
  ],
  [
    "Vrai-Prix",
    "Résidentiel — tout le Québec",
    "Hédonique LightGBM + comparables réels ajustés",
    "www.vrai-prix.com",
  ],
  [
    "ValoPlex",
    "Immeubles à revenus (plex)",
    "Hédonique monotone + ventes de plex comparables",
    "www.valoplex.com",
  ],
  [
    "Auto·Ka",
    "Voitures usagées",
    "125 connecteurs concessionnaires + suivi des prix",
    "www.auto-ka.com",
  ],
  [
    "Fabri·Ka",
    "Produits québécois",
    "1 204 boutiques en ligne indexées par région",
    "www.fabri-ka.com",
  ],
  [
    "Food·Ka",
    "Épicerie",
    "20 bannières — prix, soldes et prix unitaires",
    "www.food-ka.com",
  ],
];

function Section({
  id,
  kicker,
  title,
  children,
}: {
  id?: string;
  kicker: string;
  title: ReactNode;
  children: ReactNode;
}) {
  return (
    <section id={id} className="mt-16 scroll-mt-24 sm:mt-20">
      <p className="kicker">{kicker}</p>
      <h2 className="gk-display mt-2 text-[22px] font-bold tracking-[-0.03em] uppercase sm:text-[26px]">
        {title}
      </h2>
      {children}
    </section>
  );
}

/* ------------------------------------------------------------------ */
/* Entrée de dictionnaire — l'allusion fondatrice : ·Ka = agréger.     */
/* ------------------------------------------------------------------ */

function KaDefinition() {
  return (
    <aside className="gk-card gk-card-hover rise p-6 sm:p-7 [animation-delay:0.3s]">
      <p className="klabel">Le nom, expliqué</p>
      <p className="gk-display mt-3 text-[30px] font-bold tracking-[-0.03em]">
        ·Ka{" "}
        <span className="gk-mono align-middle text-[13px] font-medium text-ink-3">
          /ka/ suffixe
        </span>
      </p>
      <ol className="mt-4 space-y-3 text-[13.5px] leading-relaxed text-ink-2">
        <li className="flex gap-3">
          <span className="gk-mono font-bold text-green">1.</span>
          <span>
            <strong className="text-ink">Agréger</strong> — rassembler en un
            seul endroit ce qui était éparpillé sur des centaines de sites.
          </span>
        </li>
        <li className="flex gap-3">
          <span className="gk-mono font-bold text-green">2.</span>
          <span>
            Marque de fabrique du groupe : Lou·Ka loge, Immo·Ka vend, Auto·Ka
            roule, Fabri·Ka fabrique, Food·Ka nourrit.
          </span>
        </li>
      </ol>
      <p className="mt-5 border-t-[1.5px] border-dashed border-[rgba(20,24,20,0.25)] pt-4 text-[13px] italic text-ink-2">
        « Tout ce qui finit en <span className="gk-display font-bold not-italic">·Ka</span>{" "}
        agrège. »
      </p>
    </aside>
  );
}

function ProductCard({ p, index }: { p: Product; index: number }) {
  return (
    <article
      className="gk-card gk-card-hover rise p-5 sm:p-7"
      style={{ animationDelay: `${0.1 + index * 0.12}s` }}
    >
      <div className="flex flex-wrap items-baseline justify-between gap-3">
        <span className="gk-mono text-[12px] font-bold text-green">
          {p.num}
        </span>
        <span className="klabel">{p.domain}</span>
      </div>
      <h3 className="gk-display mt-4 inline-flex items-baseline gap-[5px] text-[32px] font-bold tracking-[-0.04em] sm:text-[38px]">
        {p.markLeft}
        <span
          className="inline-block -rotate-2 rounded-md px-[8px] pb-[3px]"
          style={{ background: p.inkbox, color: p.accent }}
        >
          {p.markBoxed}
        </span>
      </h3>
      <p className="gk-display mt-3 text-[17px] font-bold uppercase tracking-[-0.01em]">
        {p.tagline}
      </p>
      <p className="mt-3 text-[13.5px] leading-relaxed text-ink-2">
        {p.description}
      </p>
      <div className="mt-5 flex flex-wrap gap-2">
        {p.chips.map((chip) => (
          <span key={chip} className="stat-chip !text-[11px]">
            {chip}
          </span>
        ))}
      </div>
      <ul className="mt-5 space-y-2 border-t-[1.5px] border-dashed border-[rgba(20,24,20,0.25)] pt-5">
        {p.features.map((f) => (
          <li key={f} className="flex gap-3 text-[13.5px] text-ink-2">
            <span
              aria-hidden="true"
              className="mt-[7px] h-[5px] w-[5px] flex-none rotate-45 border border-ink bg-lime"
            />
            {f}
          </li>
        ))}
      </ul>
      <a
        href={p.url}
        target="_blank"
        rel="noopener noreferrer"
        className="btn btn-primary mt-6 w-full sm:w-auto"
      >
        Visiter {p.domain} ↗
      </a>
    </article>
  );
}

export default function Home() {
  return (
    <main className="mx-auto max-w-6xl px-4 pb-16 sm:px-6">
      {/* ---------- Héros ---------- */}
      <section className="grid items-start gap-8 pt-12 sm:pt-14 lg:grid-cols-[minmax(0,1.4fr)_minmax(0,1fr)]">
        <div className="min-w-0">
          <p className="kicker rise">
            Holding d’agrégateurs automatisés · Québec
          </p>
          <h1 className="gk-display rise mt-4 max-w-4xl text-[clamp(34px,6.4vw,68px)] leading-[0.98] font-bold tracking-[-0.035em] uppercase [animation-delay:0.08s]">
            Mille sites.{" "}
            <span className="outline-txt">Un seul</span>{" "}
            <span className="hl">·Ka.</span>
          </h1>
          <p className="rise mt-5 max-w-xl text-[16.5px] text-ink-2 [animation-delay:0.16s]">
            <strong className="text-ink">Ka, c&apos;est l&apos;agrégation.</strong>{" "}
            Groupe KA est un holding d&apos;agrégateurs entièrement
            automatisés : des centaines de connecteurs lisent les sites à la
            source, normalisent la donnée et se resynchronisent seuls, jour et
            nuit. Se loger, acheter, évaluer, rouler, consommer local, faire
            l&apos;épicerie — sept plateformes, zéro saisie manuelle, zéro
            boîte noire.
          </p>
          <div className="rise mt-7 flex gap-3 overflow-x-auto pb-2 [animation-delay:0.24s]">
            <span className="stat-chip">
              <span className="pulse-dot" aria-hidden="true" />7 agrégateurs en
              ligne
            </span>
            <span className="stat-chip">450+ connecteurs sources</span>
            <span className="stat-chip">22 M+ d&apos;observations immobilières</span>
            <span className="stat-chip">375 000+ annonces &amp; produits agrégés</span>
            <span className="stat-chip">100 % données à la source</span>
          </div>
          <div className="rise mt-6 flex flex-wrap gap-3 [animation-delay:0.3s]">
            <a href="#flux" className="btn btn-primary">
              Voir comment KA agrège ↓
            </a>
            <a href="#produits" className="btn btn-ghost">
              Les sept plateformes
            </a>
          </div>
        </div>
        <KaDefinition />
      </section>

      {/* ---------- La figure d'agrégation ---------- */}
      <Section
        id="flux"
        kicker="Le geste fondateur · agréger"
        title={
          <>
            Plein de sites. <span className="hl">Une seule flèche.</span>
          </>
        }
      >
        <p className="mt-3 max-w-xl text-[14.5px] text-ink-2">
          Chaque plateforme du groupe fonctionne sur le même schéma : un
          faisceau de connecteurs part vers des centaines de sites sources,
          ramène la donnée brute, et KA la transforme en un seul endroit
          propre. Voici la machine, à découvert.
        </p>
        <AggregationFigure />
        <div className="mt-6 grid items-start gap-6 lg:grid-cols-2">
          <PipelineFigure />
          <CycleFigure />
        </div>
      </Section>

      {/* ---------- Les chiffres ---------- */}
      <Section
        id="chiffres"
        kicker="La preuve par les nombres · rien de caché"
        title={
          <>
            Ce que ·Ka <span className="hl">agrège, compté</span>
          </>
        }
      >
        <p className="mt-3 max-w-xl text-[14.5px] text-ink-2">
          Un agrégateur se juge à ce qu&apos;il agrège. Voici l&apos;état des
          lieux, mesuré sur les plateformes elles-mêmes — inventaire vivant,
          flotte de connecteurs, couverture des moteurs d&apos;évaluation.
        </p>
        <div className="mt-7 grid items-stretch gap-6 lg:grid-cols-2">
          <InventoryBars />
          <ConnectorMatrix />
        </div>
        <div className="mt-6 grid items-start gap-6 lg:grid-cols-2">
          <div className="gk-card !bg-ink p-6 text-paper sm:p-7">
            <p className="kicker !text-lime">L&apos;équation ·Ka</p>
            <p className="gk-display mt-4 text-[clamp(26px,3.5vw,38px)] leading-[1.05] font-bold tracking-[-0.03em] uppercase">
              1 000+ sites lus
              <br />
              <span className="text-lime">→ 450+ connecteurs</span>
              <br />→ 7 plateformes
            </p>
            <p className="mt-4 max-w-md text-[13.5px] text-[rgba(245,243,238,0.75)]">
              La donnée entre éparpillée, elle ressort rangée. Entre les deux,
              aucune main humaine — c&apos;est le suffixe ·Ka qui travaille.
            </p>
          </div>
          <CoverageTiles />
        </div>
      </Section>

      {/* ---------- Produits ---------- */}
      <Section
        id="produits"
        kicker="Sept agrégateurs · un écosystème"
        title={
          <>
            Ce que nous <span className="hl">agrégeons</span>
          </>
        }
      >
        <p className="mt-3 max-w-xl text-[14.5px] text-ink-2">
          Chaque agrégateur attaque un angle mort du quotidien québécois : se
          loger, acheter, évaluer, rouler, consommer local, faire
          l&apos;épicerie. Aucune saisie manuelle — les plateformes se
          maintiennent elles-mêmes, annonce par annonce, prix par prix.
        </p>
        <div className="mt-7 grid gap-5 lg:grid-cols-3">
          {PRODUCTS.map((p, i) => (
            <ProductCard key={p.num} p={p} index={i} />
          ))}
        </div>
      </Section>

      {/* ---------- Socle commun ---------- */}
      <Section
        id="socle"
        kicker="Une seule fondation"
        title="Le socle commun"
      >
        <p className="mt-3 max-w-xl text-[14.5px] text-ink-2">
          Les sept plateformes partagent la même colonne vertébrale : données
          publiques et annonces lues directement à la source, connecteurs
          dédiés synchronisés en continu, moteurs statistiques validés, et une
          identité visuelle unique — bordures encre, lime électrique, calcul à
          découvert.
        </p>
        <div className="src-wrap mt-7">
          <table className="src-table">
            <thead>
              <tr>
                <th>Agrégateur</th>
                <th>Marché</th>
                <th>Moteur</th>
                <th>Adresse</th>
              </tr>
            </thead>
            <tbody>
              {SOCLE_ROWS.map(([produit, marche, moteur, adresse]) => (
                <tr key={produit}>
                  <td className="gk-display font-bold whitespace-nowrap">
                    {produit}
                  </td>
                  <td>{marche}</td>
                  <td>{moteur}</td>
                  <td className="gk-mono text-[12px] whitespace-nowrap">
                    <a
                      href={`https://${adresse}`}
                      target="_blank"
                      rel="noopener noreferrer"
                      className="underline decoration-[rgba(20,24,20,0.3)] underline-offset-4 hover:decoration-ink"
                    >
                      {adresse}
                    </a>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </Section>

      {/* ---------- Ka2 & Ka4 — les agents de découverte ---------- */}
      <Section
        id="bots"
        kicker="Les éclaireurs du groupe · découverte web"
        title={
          <>
            Avant d&apos;agréger, <span className="hl">les bots découvrent</span>
          </>
        }
      >
        <p className="mt-3 max-w-xl text-[14.5px] text-ink-2">
          Les connecteurs ·Ka lisent des sources connues. Mais qui trouve les
          sources ? Ka2 et Ka4, les agents de découverte web du groupe : des
          bots IA qui explorent et cartographient le web québécois, entité par
          entité, pour alimenter tout l&apos;écosystème.
        </p>
        <div className="mt-7 grid gap-5 lg:grid-cols-2">
          {BOTS.map((b) => (
            <article key={b.domain} className="gk-card gk-card-hover p-5 sm:p-7">
              <div className="flex flex-wrap items-baseline justify-between gap-3">
                <span className="gk-mono text-[12px] font-bold text-green">
                  BOT
                </span>
                <span className="klabel">{b.domain}</span>
              </div>
              <h3 className="gk-display mt-4 inline-flex items-baseline gap-[5px] text-[32px] font-bold tracking-[-0.04em] sm:text-[38px]">
                Ka
                <span
                  className="inline-block -rotate-2 rounded-md px-[8px] pb-[3px]"
                  style={{ background: b.inkbox, color: b.accent }}
                >
                  {b.digit}
                </span>
              </h3>
              <p className="gk-display mt-3 text-[17px] font-bold uppercase tracking-[-0.01em]">
                {b.tagline}
              </p>
              <p className="mt-3 text-[13.5px] leading-relaxed text-ink-2">
                {b.description}
              </p>
              <div className="mt-5 flex flex-wrap gap-2">
                {b.chips.map((chip) => (
                  <span key={chip} className="stat-chip !text-[11px]">
                    {chip}
                  </span>
                ))}
              </div>
              <ul className="mt-5 space-y-2 border-t-[1.5px] border-dashed border-[rgba(20,24,20,0.25)] pt-5">
                {b.features.map((f) => (
                  <li key={f} className="flex gap-3 text-[13.5px] text-ink-2">
                    <span
                      aria-hidden="true"
                      className="mt-[7px] h-[5px] w-[5px] flex-none rotate-45 border border-ink bg-lime"
                    />
                    {f}
                  </li>
                ))}
              </ul>
              <a
                href={b.url}
                target="_blank"
                rel="noopener noreferrer"
                className="btn btn-primary mt-6 w-full sm:w-auto"
              >
                Visiter {b.domain} ↗
              </a>
            </article>
          ))}
        </div>
        <div className="gk-card mt-6 !bg-ink p-6 text-paper sm:p-7">
          <p className="kicker !text-lime">
            Le rôle des bots dans l&apos;écosystème
          </p>
          <div className="mt-4 grid items-start gap-6 lg:grid-cols-2">
            <p className="gk-display text-[clamp(24px,3.2vw,34px)] leading-[1.05] font-bold tracking-[-0.03em] uppercase">
              Les bots découvrent
              <br />
              <span className="text-lime">→ ·Ka agrège</span>
              <br />→ vous trouvez
            </p>
            <div>
              <p className="max-w-md text-[13.5px] text-[rgba(245,243,238,0.75)]">
                Ka2 et Ka4 sont les éclaireurs du groupe : ils cartographient
                le terrain avant que les connecteurs ne s&apos;y branchent. Une
                nouvelle boutique québécoise, un nouveau gestionnaire
                immobilier, un concessionnaire qui ouvre — les bots les
                repèrent, et les plateformes ·Ka les intègrent.
              </p>
              <ul className="mt-5 space-y-2 border-t border-[rgba(245,243,238,0.15)] pt-5 text-[13px] text-[rgba(245,243,238,0.75)]">
                {[
                  "Respectent systématiquement robots.txt",
                  "Ne traitent que des données publiques",
                  "Zéro boîte noire — leur fonctionnement est documenté sur ka2.bot et ka4.bot",
                ].map((f) => (
                  <li key={f} className="flex gap-3">
                    <span
                      aria-hidden="true"
                      className="mt-[6px] h-[5px] w-[5px] flex-none rotate-45 bg-lime"
                    />
                    {f}
                  </li>
                ))}
              </ul>
            </div>
          </div>
        </div>
      </Section>

      {/* ---------- Manifeste ---------- */}
      <Section id="mission" kicker="Notre manifeste" title="Trois principes, aucune exception">
        <div className="mt-7 grid gap-4 sm:grid-cols-3">
          {MANIFESTO.map((m) => (
            <article key={m.num} className="gk-card gk-card-hover p-5 sm:p-6">
              <span className="gk-mono text-[12px] font-bold text-green">
                {m.num}
              </span>
              <h3 className="gk-display mt-3 text-[17px] font-bold uppercase">
                {m.title}
              </h3>
              <p className="mt-3 text-[13.5px] leading-relaxed text-ink-2">
                {m.body}
              </p>
            </article>
          ))}
        </div>
      </Section>

      {/* ---------- Appel à l'action ---------- */}
      <section className="mt-16 sm:mt-20">
        <div className="gk-card overflow-hidden !bg-ink p-7 text-paper sm:p-10">
          <p className="kicker !text-lime">Un projet · une question</p>
          <h2 className="gk-display mt-3 max-w-2xl text-[clamp(24px,4vw,40px)] leading-[1.02] font-bold tracking-[-0.03em] uppercase">
            Quelque chose à <span className="text-lime">agréger</span> ?{" "}
            Parlons-en.
          </h2>
          <p className="mt-4 max-w-xl text-[14.5px] text-[rgba(245,243,238,0.75)]">
            Partenariats, données, médias ou simple curiosité méthodologique —
            de vraies personnes au bout. C&apos;est notre spécialité : tout
            ramener à un seul endroit.
          </p>
          <div className="mt-7 flex flex-wrap gap-3">
            <a
              href="mailto:contact@groupe-ka.com"
              className="btn btn-lime !border-lime"
            >
              contact@groupe-ka.com
            </a>
            <a
              href="mailto:info@groupe-ka.com"
              className="btn !border-lime !bg-transparent !text-lime hover:!bg-[rgba(217,242,107,0.12)]"
            >
              info@groupe-ka.com
            </a>
          </div>
          <p className="gk-mono mt-5 text-[11px] text-[rgba(245,243,238,0.55)]">
            contact@ — projets &amp; partenariats · info@ — médias &amp;
            questions générales · admin@ — légal &amp; vie privée
          </p>
        </div>
      </section>
    </main>
  );
}