---
import GlossaryLayout from "../../layouts/GlossaryLayout.astro";
import GlossaryPortalAside from "../../components/GlossaryPortalAside.astro";
import GlossaryPortalHero from "../../components/GlossaryPortalHero.astro";
import GlossaryPortalSection from "../../components/GlossaryPortalSection.astro";
import GlossaryPortalStickySync from "../../components/GlossaryPortalStickySync.astro";
import { getCollection } from "astro:content";
import {
  buildGlossaryBySlug,
  hrefOfGlossaryEntry,
} from "../../lib/glossary";

const entries = await getCollection("glossaire");

const bySlug = buildGlossaryBySlug(entries);
const hrefOf = hrefOfGlossaryEntry;

const orderedSlugs = [
  "arcalite",
  "cratialite",
  "tension",
  "archicration",
  "co-viabilite",
  "archicratie",
];

const concepts = orderedSlugs
  .map((slug) => bySlug.get(slug))
  .filter(Boolean);

const arcalite = bySlug.get("arcalite");
const cratialite = bySlug.get("cratialite");
const tension = bySlug.get("tension");
const archicration = bySlug.get("archicration");
const coViabilite = bySlug.get("co-viabilite");
const archicratie = bySlug.get("archicratie");

const comparisonCards = [
  {
    title: "Arcalité / Cratialité",
    text:
      "L’arcalité désigne le vecteur de fondation, de cadrage et de légitimation ; la cratialité désigne le vecteur opératoire, transformateur et effectif. L’archicratie ne se comprend qu’à partir de leur coprésence tensionnelle.",
  },
  {
    title: "Archicration / Archicratie",
    text:
      "L’archicration est l’opérateur régulateur qui met en forme, distribue et rend révisables les tensions ; l’archicratie est le méta-régime d’ensemble qui résulte de la composition durable entre arcalité, cratialité et archicration.",
  },
  {
    title: "Co-viabilité / simple stabilité",
    text:
      "La co-viabilité ne renvoie pas à une immobilité ni à un équilibre figé. Elle désigne la capacité d’un ordre collectif à tenir dans la durée en rendant compatibles des tensions qui ne disparaissent pas.",
  },
];

const readingSteps = [
  {
    num: "01",
    title: "Commencer par les deux vecteurs premiers",
    text:
      "Entrer par l’arcalité et la cratialité pour comprendre que toute régulation articule à la fois des forces de cadrage et des forces d’effectuation.",
  },
  {
    num: "02",
    title: "Comprendre la tension comme phénomène général",
    text:
      "La tension n’est pas un accident local mais la condition ordinaire de coexistence entre dynamiques hétérogènes et antagonistes.",
  },
  {
    num: "03",
    title: "Saisir le rôle de l’archicration",
    text:
      "L’archicration désigne l’opérateur par lequel les tensions sont exposées, distribuées, arbitrées ou rendues révisables.",
  },
  {
    num: "04",
    title: "Aboutir à la co-viabilité",
    text:
      "La co-viabilité permet de penser la tenue d’un collectif sans supprimer la pluralité des tensions qui le traversent.",
  },
  {
    num: "05",
    title: "Revenir à l’archicratie",
    text:
      "L’archicratie nomme alors le régime général dans lequel cette composition devient lisible comme structure de régulation.",
  },
];

const pageItems = [
  { href: "#grammaire-minimale", label: "Grammaire minimale du système" },
  { href: "#six-concepts", label: "Les six concepts cardinaux" },
  { href: "#distinctions-decisives", label: "Distinctions décisives" },
  { href: "#ordre-lecture", label: "Ordre conseillé de lecture" },
  { href: "#prolonger-lecture", label: "Prolonger la lecture" },
];

const usefulLinks = [
  { href: "/glossaire/scenes-archicratiques/", label: "Scènes archicratiques" },
  { href: "/glossaire/dynamiques-archicratiques/", label: "Dynamiques archicratiques" },
  { href: "/glossaire/archicrations/", label: "Méta-régimes archicratiques" },
  { href: "/glossaire/paradigmes/", label: "Paradigmes et doctrines" },
  { href: "/glossaire/index-complet/", label: "Index complet" },
];

const prolongerLinks = [
  {
    href: "/glossaire/scenes-archicratiques/",
    title: "Scènes archicratiques",
    text:
      "Comprendre où les tensions deviennent visibles, discutables et révisables.",
  },
  {
    href: "/glossaire/dynamiques-archicratiques/",
    title: "Dynamiques archicratiques",
    text:
      "Explorer les processus de déplacement, d’oblitération et de pathologisation de la régulation.",
  },
  {
    href: "/glossaire/archicrations/",
    title: "Méta-régimes archicratiques",
    text:
      "Parcourir les grandes formes de co-viabilité et leurs modulations historiques.",
  },
  {
    href: "/glossaire/paradigmes/",
    title: "Paradigmes et doctrines",
    text:
      "Situer l’archicratie dans le paysage théorique avec lequel elle dialogue.",
  },
  {
    href: "/glossaire/index-complet/",
    title: "Index complet",
    text:
      "Retrouver l’ensemble des entrées du glossaire dans une navigation alphabétique intégrale.",
  },
];
---

<GlossaryLayout
  title="Concepts fondamentaux"
  version="1.0"
  stickyMode="glossary-portal"
>
  <Fragment slot="aside">
    <GlossaryPortalAside
      ariaLabel="Navigation des concepts fondamentaux"
      title="Concepts fondamentaux"
      meta={`${concepts.length} notion${concepts.length > 1 ? "s" : ""} cardinale${concepts.length > 1 ? "s" : ""}`}
      pageItems={pageItems}
      usefulLinks={usefulLinks}
    />
  </Fragment>

  <section class="cf-page">
    <GlossaryPortalHero
      prefix="cf"
      kicker="Portail du glossaire"
      title="Concepts fondamentaux"
      intro="Cette page rassemble la grammaire minimale de l’archicratie. Elle ne remplace pas les fiches détaillées, mais elle en organise la lecture en montrant comment les six notions cardinales se répondent, se distinguent et composent ensemble un même système."
      moreParagraphs={[
        "Ces concepts ne valent pas comme unités isolées. Ils forment un noyau de lecture à partir duquel peuvent ensuite se comprendre les scènes archicratiques, les dynamiques, les tensions et les méta-régimes de co-viabilité.",
      ]}
      introMaxWidth="76ch"
      followIntroMaxWidth="68ch"
      moreMaxHeight="12rem"
    />

    <GlossaryPortalSection
      id="grammaire-minimale"
      title="Grammaire minimale du système"
      intro="La lecture la plus ramassée du paradigme archicratique peut se formuler comme une chaîne de composition : deux vecteurs premiers entrent en tension, cette tension appelle un opérateur régulateur, cet opérateur vise une co-viabilité, et cette composition prend la forme générale d’une archicratie."
    >
      <div class="cf-map" aria-label="Carte des concepts fondamentaux">
        <div class="cf-map__stage">
          <div class="cf-map__title">Vecteurs premiers</div>
          <div class="cf-map__roots">
            {arcalite ? (
              <a class="cf-node" href={hrefOf(arcalite)}>ARCALITÉ</a>
            ) : (
              <span class="cf-node">ARCALITÉ</span>
            )}

            {cratialite ? (
              <a class="cf-node" href={hrefOf(cratialite)}>CRATIALITÉ</a>
            ) : (
              <span class="cf-node">CRATIALITÉ</span>
            )}
          </div>
        </div>

        <div class="cf-map__arrow" aria-hidden="true">↓</div>

        <div class="cf-map__stage">
          <div class="cf-map__title">Phénomène transversal</div>
          {tension ? (
            <a class="cf-node cf-node--wide" href={hrefOf(tension)}>TENSION</a>
          ) : (
            <span class="cf-node cf-node--wide">TENSION</span>
          )}
        </div>

        <div class="cf-map__arrow" aria-hidden="true">↓</div>

        <div class="cf-map__stage">
          <div class="cf-map__title">Opérateur régulateur</div>
          {archicration ? (
            <a class="cf-node cf-node--wide" href={hrefOf(archicration)}>
              ARCHICRATION
            </a>
          ) : (
            <span class="cf-node cf-node--wide">ARCHICRATION</span>
          )}
        </div>

        <div class="cf-map__arrow" aria-hidden="true">↓</div>

        <div class="cf-map__stage">
          <div class="cf-map__title">Horizon de tenue</div>
          {coViabilite ? (
            <a class="cf-node cf-node--wide" href={hrefOf(coViabilite)}>
              CO-VIABILITÉ
            </a>
          ) : (
            <span class="cf-node cf-node--wide">CO-VIABILITÉ</span>
          )}
        </div>

        <div class="cf-map__arrow" aria-hidden="true">↓</div>

        <div class="cf-map__stage">
          <div class="cf-map__title">Forme d’ensemble</div>
          {archicratie ? (
            <a class="cf-node cf-node--wide" href={hrefOf(archicratie)}>
              ARCHICRATIE
            </a>
          ) : (
            <span class="cf-node cf-node--wide">ARCHICRATIE</span>
          )}
        </div>
      </div>
    </GlossaryPortalSection>

    <GlossaryPortalSection
      id="six-concepts"
      title="Les six concepts cardinaux"
      count={`${concepts.length} fiche${concepts.length > 1 ? "s" : ""}`}
      intro="Chaque fiche peut se lire séparément, mais leur intelligibilité augmente lorsqu’on les aborde comme un ensemble structuré."
    >
      <div class="cf-cards">
        {concepts.map((entry) => (
          <a class="cf-card" href={hrefOf(entry)}>
            <strong>{entry.data.term}</strong>
            <span>{entry.data.definitionShort}</span>
          </a>
        ))}
      </div>
    </GlossaryPortalSection>

    <GlossaryPortalSection
      id="distinctions-decisives"
      title="Distinctions décisives"
      count={`${comparisonCards.length} distinction${comparisonCards.length > 1 ? "s" : ""}`}
      intro="Ce portail ne sert pas seulement à regrouper des définitions : il doit aussi empêcher les confusions qui brouilleraient la lecture du système."
    >
      <div class="cf-comparisons">
        {comparisonCards.map((item) => (
          <section class="cf-card cf-card--text">
            <strong>{item.title}</strong>
            <span>{item.text}</span>
          </section>
        ))}
      </div>
    </GlossaryPortalSection>

    <GlossaryPortalSection
      id="ordre-lecture"
      title="Ordre conseillé de lecture"
      count={`${readingSteps.length} étape${readingSteps.length > 1 ? "s" : ""}`}
      intro="Pour un lecteur qui découvre l’architecture conceptuelle, cet ordre offre le chemin le plus clair."
    >
      <div class="cf-steps">
        {readingSteps.map((step) => (
          <section class="cf-step">
            <div class="cf-step__num">{step.num}</div>
            <div class="cf-step__body">
              <h3>{step.title}</h3>
              <p>{step.text}</p>
            </div>
          </section>
        ))}
      </div>
    </GlossaryPortalSection>

    <GlossaryPortalSection
      id="prolonger-lecture"
      title="Prolonger la lecture"
      intro="Une fois cette grammaire minimale stabilisée, la lecture peut s’élargir vers les familles de méta-régimes, les paradigmes de comparaison, les dynamiques archicratiques et l’index complet."
    >
      <div class="cf-cards">
        {prolongerLinks.map((item) => (
          <a class="cf-card" href={item.href}>
            <strong>{item.title}</strong>
            <span>{item.text}</span>
          </a>
        ))}
      </div>
    </GlossaryPortalSection>

    <GlossaryPortalSection
      id="portee-densemble"
      title="Portée d’ensemble"
      final={true}
    >
      <p>
        Lire ces concepts ensemble permet de comprendre que l’
        <a href="/glossaire/archicratie/">archicratie</a> n’est pas une notion
        isolée, mais une intelligibilité d’ensemble de la régulation collective.
        Les six concepts fondamentaux forment ainsi le noyau à partir duquel
        deviennent lisibles la
        <a href="/glossaire/scene-depreuve/">scène d’épreuve</a>, l’
        <a href="/glossaire/archicration/">archicration</a>, la
        <a href="/glossaire/co-viabilite/">co-viabilité</a> et, plus largement,
        les différentes formes historiques de co-viabilité.
      </p>
    </GlossaryPortalSection>
  </section>

  <GlossaryPortalStickySync
    heroMoreId="cf-hero-more"
    heroToggleId="cf-hero-toggle"
  />
</GlossaryLayout>

<style>
  .cf-page{
    padding: 8px 0 24px;
  }

  .cf-map{
    display: grid;
    justify-items: center;
    gap: 10px;
    margin-top: 14px;
    padding: 16px 18px 18px;
    border: 1px solid rgba(127,127,127,0.22);
    border-radius: 18px;
    background: rgba(127,127,127,0.05);
  }

  .cf-map__stage{
    width: min(580px, 100%);
    display: grid;
    justify-items: center;
    gap: 10px;
  }

  .cf-map__title{
    width: 100%;
    text-align: center;
    font-size: 1.02rem;
    line-height: 1.25;
    font-weight: 800;
    letter-spacing: -.01em;
    opacity: .96;
  }

  .cf-map__roots{
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .cf-node{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 10px 14px;
    border: 1px solid rgba(127,127,127,0.24);
    border-radius: 999px;
    background: rgba(127,127,127,0.05);
    text-decoration: none;
    text-align: center;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .05em;
    line-height: 1.2;
    transition: transform 120ms ease, background 120ms ease;
  }

  .cf-node:hover{
    transform: translateY(-1px);
    background: rgba(127,127,127,0.08);
    text-decoration: none;
  }

  .cf-node--wide{
    width: 100%;
    max-width: 100%;
  }

  .cf-map__arrow{
    font-size: 18px;
    line-height: 1;
    opacity: .65;
  }

  .cf-cards,
  .cf-comparisons{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 12px;
    margin-top: 14px;
  }

  .cf-card{
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 14px 16px;
    border: 1px solid rgba(127,127,127,0.22);
    border-radius: 16px;
    background: rgba(127,127,127,0.05);
    text-decoration: none;
    transition: transform 120ms ease, background 120ms ease, border-color 120ms ease;
  }

  .cf-card:hover{
    transform: translateY(-1px);
    background: rgba(127,127,127,0.08);
    border-color: rgba(0,217,255,0.16);
    text-decoration: none;
  }

  .cf-card strong{
    font-size: 15px;
    line-height: 1.3;
  }

  .cf-card span{
    font-size: 14px;
    line-height: 1.45;
    opacity: .92;
  }

  .cf-card small{
    font-size: 12px;
    line-height: 1.4;
    opacity: .72;
  }

  .cf-card--text{
    cursor: default;
  }

  .cf-card--text:hover{
    transform: none;
  }

  .cf-steps{
    display: grid;
    gap: 12px;
    margin-top: 14px;
  }

  .cf-step{
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    gap: 14px;
    align-items: start;
    padding: 14px 16px;
    border: 1px solid rgba(127,127,127,0.22);
    border-radius: 16px;
    background: rgba(127,127,127,0.05);
  }

  .cf-step__num{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    border: 1px solid rgba(127,127,127,0.28);
    border-radius: 999px;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .08em;
  }

  .cf-step__body h3{
    margin: 0;
    font-size: 15px;
    line-height: 1.3;
  }

  .cf-step__body p{
    margin: 8px 0 0;
    font-size: 14px;
    line-height: 1.45;
    opacity: .92;
  }

  @media (max-width: 720px){
    .cf-map__roots{
      grid-template-columns: 1fr;
    }

    .cf-step{
      grid-template-columns: 1fr;
    }

    .cf-step__num{
      width: fit-content;
      min-width: 64px;
    }
  }

  @media (prefers-color-scheme: dark){
    .cf-map,
    .cf-node,
    .cf-card,
    .cf-step{
      background: rgba(255,255,255,0.04);
    }

    .cf-node:hover,
    .cf-card:hover{
      background: rgba(255,255,255,0.07);
    }
  }
</style>