---
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 collator = new Intl.Collator("fr", { sensitivity: "base", numeric: true });
const bySlug = buildGlossaryBySlug(entries);
const hrefOf = hrefOfGlossaryEntry;

function resolve(slugs = []) {
  return slugs
    .map((slug) => bySlug.get(slug))
    .filter(Boolean)
    .sort((a, b) => collator.compare(a.data.term, b.data.term));
}

const sections = [
  {
    id: "symboliques-sacrales",
    title: "Archicrations symboliques et sacrales",
    intro:
      "Formes de co-viabilité où l’ordre collectif se stabilise à partir d’ancrages symboliques premiers, de médiations rituelles, de sacralités diffuses ou d’infrastructures de soutien à la tenue du groupe.",
    items: resolve([
      "archicrations-proto-symboliques",
      "archicrations-sacrales-non-etatiques",
      "archicrations-techno-logistiques",
    ]),
  },
  {
    id: "scripturales-theologiques",
    title: "Archicrations scripturales et théologiques",
    intro:
      "Formes où la régulation repose sur l’inscription, l’autorité du texte, la mise en ordre cosmologique du monde ou la médiation théologique.",
    items: resolve([
      "archicrations-scripturo-normatives",
      "archicrations-scripturo-cosmologiques",
      "archicrations-theologiques",
    ]),
  },
  {
    id: "memorielles-epistemiques-symboliques",
    title: "Archicrations mémorielles, épistémiques et symboliques",
    intro:
      "Formes dans lesquelles la tenue du collectif dépend du récit du passé, de l’institution du vrai ou de la circulation de formes symboliques partageables.",
    items: resolve([
      "archicrations-historiographiques",
      "archicrations-epistemiques",
      "archicrations-esthetico-symboliques",
    ]),
  },
  {
    id: "politico-cratiales",
    title: "Archicrations politico-cratiales",
    intro:
      "Formes de régulation dans lesquelles l’ordre collectif se structure principalement autour de la norme, de l’échange ou de la puissance organisée.",
    items: resolve([
      "archicrations-normativo-politiques",
      "archicrations-marchandes",
      "archicrations-guerrieres",
    ]),
  },
  {
    id: "differentielles-hybrides",
    title: "Configurations différentielles et hybrides",
    intro:
      "Formes mixtes, modulées ou composites dans lesquelles plusieurs régimes se superposent, s’inhibent ou s’entrelacent sans se réduire à une forme unifiée.",
    items: resolve([
      "archicrations-differentielles-et-formes-hybrides",
    ]),
  },
];

const totalCount = sections.reduce((sum, section) => sum + section.items.length, 0);

const pageItems = [
  ...sections.map((section) => ({
    href: `#${section.id}`,
    label: section.title,
  })),
  { href: "#prolonger-la-lecture", label: "Prolonger la lecture" },
];

const usefulLinks = [
  { href: "/glossaire/archicration/", label: "Archicration" },
  { href: "/glossaire/archicratie/", label: "Archicratie" },
  { href: "/glossaire/arcalite/", label: "Arcalité" },
  { href: "/glossaire/cratialite/", label: "Cratialité" },
  { href: "/glossaire/co-viabilite/", label: "Co-viabilité" },
];

const prolongerLinks = [
  {
    href: "/glossaire/concepts-fondamentaux/",
    title: "Concepts fondamentaux",
    text:
      "Revenir au noyau minimal : arcalité, cratialité, tension, archicration, co-viabilité et archicratie.",
  },
  {
    href: "/glossaire/paradigmes/",
    title: "Paradigmes et doctrines",
    text:
      "Situer les archicrations dans le paysage théorique au sein duquel l’archicratie se compare et se distingue.",
  },
  {
    href: "/glossaire/tensions-irreductibles/",
    title: "Tensions irréductibles",
    text:
      "Revenir aux foyers structuraux de conflictualité que les archicrations stabilisent sans les abolir.",
  },
  {
    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="Archicrations"
  version="1.0"
  stickyMode="glossary-portal"
>
  <Fragment slot="aside">
    <GlossaryPortalAside
      ariaLabel="Navigation des archicrations"
      title="Archicrations"
      meta={`${totalCount} type${totalCount > 1 ? "s" : ""} cartographié${totalCount > 1 ? "s" : ""}`}
      pageItems={pageItems}
      usefulLinks={usefulLinks}
    />
  </Fragment>

  <section class="archi-page">
    <GlossaryPortalHero
      prefix="archi"
      kicker="Topologie archicratique"
      title="Archicrations"
      intro="Cette page rassemble les principales formes d’archicration distinguées dans le glossaire. Elle propose une vue d’ensemble des grands régimes de co-viabilité à partir desquels un collectif se stabilise, se transmet, se transforme ou se recompose."
      moreParagraphs={[
        "Les catégories proposées ci-dessous ne valent pas comme cases closes, mais comme repères de lecture permettant de situer les différentes topologies de régulation et leurs articulations.",
      ]}
      introMaxWidth="72ch"
      followIntroMaxWidth="68ch"
      moreMaxHeight="18rem"
    />

    {sections.map((section) => (
      <GlossaryPortalSection
        id={section.id}
        title={section.title}
        count={`${section.items.length} fiche${section.items.length > 1 ? "s" : ""}`}
        intro={section.intro}
      >
        <div class="archi-cards">
          {section.items.map((entry) => (
            <a class="archi-card" href={hrefOf(entry)}>
              <strong>{entry.data.term}</strong>
              <span>{entry.data.definitionShort}</span>

              {(entry.data.comparisonTraditions?.length ?? 0) > 0 && (
                <small>
                  Traditions de comparaison : {entry.data.comparisonTraditions.join(" / ")}
                </small>
              )}

              {(entry.data.mobilizedAuthors?.length ?? 0) > 0 && (
                <small>
                  Auteurs mobilisés : {entry.data.mobilizedAuthors.join(" / ")}
                </small>
              )}
            </a>
          ))}
        </div>
      </GlossaryPortalSection>
    ))}

    <GlossaryPortalSection
      id="prolonger-la-lecture"
      title="Prolonger la lecture"
      intro="Cette cartographie des archicrations peut ensuite être replacée dans le noyau conceptuel, dans le paysage théorique général et dans l’index complet du glossaire."
    >
      <div class="archi-cards">
        {prolongerLinks.map((item) => (
          <a class="archi-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>
        Cette cartographie permet de lire les archicrations non comme des formes
        isolées, mais comme des topologies de régulation susceptibles de se
        renforcer, de se concurrencer ou de s’hybrider. Elle éclaire ainsi la
        manière dont l’
        <a href="/glossaire/archicratie/">archicratie</a> peut être pensée comme
        intelligibilité d’ensemble des formes de co-viabilité.
      </p>
    </GlossaryPortalSection>
  </section>

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

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

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

  .archi-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;
  }

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

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

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

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

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

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