---
import GlossaryLayout from "../../layouts/GlossaryLayout.astro";
import GlossaryHomeAside from "../../components/GlossaryHomeAside.astro";
import GlossaryHomeHero from "../../components/GlossaryHomeHero.astro";
import GlossaryHomeSection from "../../components/GlossaryHomeSection.astro";
import GlossaryCardGrid from "../../components/GlossaryCardGrid.astro";
import GlossaryPortalGrid from "../../components/GlossaryPortalGrid.astro";
import { getCollection } from "astro:content";
import {
  buildGlossaryBySlug,
  countGlossaryEntriesByKind,
  familyOf,
  getGlossaryEntriesByFamily,
  hrefOfGlossaryEntry,
  sortGlossaryEntries,
} from "../../lib/glossary";

const entries = await getCollection("glossaire");

const bySlug = buildGlossaryBySlug(entries);

const fondamentaux = getGlossaryEntriesByFamily(entries, "concept-fondamental");
const scenes = getGlossaryEntriesByFamily(entries, "scene");
const dynamiques = sortGlossaryEntries(
  entries.filter((entry) =>
    ["dynamique", "pathologie"].includes(familyOf(entry)),
  ),
);
const metaRegimes = getGlossaryEntriesByFamily(entries, "meta-regime");

const paradigmesCount = countGlossaryEntriesByKind(entries, "paradigme");
const doctrinesCount = countGlossaryEntriesByKind(entries, "doctrine");

const metaRegimesPreview = metaRegimes.slice(0, 6);

const arcalite = bySlug.get("arcalite");
const cratialite = bySlug.get("cratialite");
const tension = bySlug.get("tension");
const sceneDepreuve = bySlug.get("scene-depreuve");
const archicration = bySlug.get("archicration");

const conceptsPageHref = "/glossaire/concepts-fondamentaux/";
const scenesPageHref = "/glossaire/scenes-archicratiques/";
const dynamiquesPageHref = "/glossaire/dynamiques-archicratiques/";
const paradigmeArchicratiquePageHref = "/glossaire/paradigme-archicratique/";
const metaRegimesPageHref = "/glossaire/archicrations/";
const tensionsPageHref = "/glossaire/tensions-irreductibles/";
const verbesPageHref = "/glossaire/verbes-de-la-scene/";
const paradigmesPageHref = "/glossaire/paradigmes/";
const indexCompletPageHref = "/glossaire/index-complet/";

const paradigmePortalItems = [
  {
    href: paradigmeArchicratiquePageHref,
    title: "Paradigme archicratique",
    description:
      "Saisir la logique d’ensemble du système archicratique : de l’arcalité et de la cratialité jusqu’aux scènes, aux tensions, aux formes de co-viabilité et aux traditions de comparaison mobilisées.",
    meta: "Portail de synthèse générale",
  },
];

const approfondirPortalItems = [
  {
    href: tensionsPageHref,
    title: "Tensions irréductibles",
    description:
      "Parcourir les dix tensions ontologiquement irréductibles et politiquement fondatrices à partir desquelles la co-viabilité doit être pensée.",
    meta: "10 tensions structurantes",
  },
  {
    href: verbesPageHref,
    title: "Verbes de la scène",
    description:
      "Disposer d’un mini-glossaire opératoire pour décrire l’ouverture, l’entrave, la capture, la fermeture ou la remise en scène des architectures régulatrices.",
    meta: "19 verbes d’analyse",
  },
  {
    href: paradigmesPageHref,
    title: "Cartographie théorique",
    description:
      "Situer l’archicratie dans son paysage de doctrines fondatrices et de paradigmes régulateurs.",
    meta: `${doctrinesCount} doctrine${doctrinesCount > 1 ? "s" : ""} · ${paradigmesCount} paradigme${paradigmesCount > 1 ? "s" : ""}`,
  },
  {
    href: indexCompletPageHref,
    title: "Index complet",
    description:
      "Retrouver l’ensemble des entrées du glossaire dans une navigation alphabétique intégrale.",
    meta: `${entries.length} entrée${entries.length > 1 ? "s" : ""}`,
  },
];
---

<GlossaryLayout
  title="Glossaire archicratique"
  version="1.0"
  stickyMode="glossary-home"
>
  <Fragment slot="aside">
    <GlossaryHomeAside allEntries={entries} />
  </Fragment>

  <section class="glossary-home">
    <GlossaryHomeHero />

    <section
      class="glossary-map-block glossary-section"
      aria-labelledby="glossary-map-title"
    >
      <div class="glossary-map-block__head">
        <h2
          id="glossary-map-title"
          data-follow-section="Cartographie du système archicratique"
        >
          Cartographie du système archicratique
        </h2>
        <p>
          La lecture la plus simple du système part de deux vecteurs premiers,
          l’arcalité et la cratialité, dont la rencontre produit des tensions.
          Ces tensions doivent être mises en scène, traitées par l’archicration,
          puis stabilisées dans des méta-régimes de co-viabilité.
        </p>
      </div>

      <div class="glossary-map" aria-label="Carte conceptuelle du glossaire">
        <div class="glossary-map__stage">
          <div class="glossary-map__title">Forces en composition</div>
          <div class="glossary-map__roots">
            {arcalite ? (
              <a class="glossary-map__node" href={hrefOfGlossaryEntry(arcalite)}>
                ARCALITÉ
              </a>
            ) : (
              <span class="glossary-map__node">ARCALITÉ</span>
            )}

            {cratialite ? (
              <a class="glossary-map__node" href={hrefOfGlossaryEntry(cratialite)}>
                CRATIALITÉ
              </a>
            ) : (
              <span class="glossary-map__node">CRATIALITÉ</span>
            )}
          </div>
        </div>

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

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

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

        <div class="glossary-map__stage">
          <div class="glossary-map__title">Comparution</div>
          {sceneDepreuve ? (
            <a
              class="glossary-map__node glossary-map__node--wide"
              href={hrefOfGlossaryEntry(sceneDepreuve)}
            >
              MISE EN SCÈNE
            </a>
          ) : (
            <span class="glossary-map__node glossary-map__node--wide">
              MISE EN SCÈNE
            </span>
          )}
        </div>

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

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

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

        <div class="glossary-map__stage">
          <div class="glossary-map__title">Formes de stabilisation</div>
          <a
            class="glossary-map__node glossary-map__node--wide"
            href={metaRegimesPageHref}
          >
            MÉTA-RÉGIMES
          </a>
        </div>
      </div>
    </section>

    {fondamentaux.length > 0 && (
      <GlossaryHomeSection
        id="concepts-fondamentaux"
        title="Concepts fondamentaux"
        followSection="Concepts fondamentaux"
        intro="Ces notions forment la grammaire minimale de l’archicratie. Elles donnent accès à la structure générale du système."
        ctaHref={conceptsPageHref}
        ctaLabel="Ouvrir le portail"
      >
        <GlossaryCardGrid entries={fondamentaux} />
      </GlossaryHomeSection>
    )}

    <GlossaryHomeSection
      id="paradigme-archicratique"
      title="Paradigme archicratique"
      followSection="Paradigme archicratique"
      intro="Cette page de synthèse offre une vue d’ensemble du système archicratique. Elle articule le noyau conceptuel, les scènes de comparution, les dynamiques, les tensions irréductibles, les méta-régimes de co-viabilité et le paysage théorique dans lequel l’archicratie se situe et se distingue."
      ctaHref={paradigmeArchicratiquePageHref}
      ctaLabel="Ouvrir la synthèse"
    >
      <GlossaryPortalGrid items={paradigmePortalItems} />
    </GlossaryHomeSection>

    {scenes.length > 0 && (
      <GlossaryHomeSection
        id="scenes-archicratiques"
        title="Scènes archicratiques"
        followSection="Scènes archicratiques"
        intro="Les scènes archicratiques rendent possible la comparution des architectures de régulation. Elles sont le lieu où l’ordre peut être exposé, discuté et révisé."
        ctaHref={scenesPageHref}
        ctaLabel="Ouvrir le portail"
      >
        <GlossaryCardGrid entries={scenes} wide={true} />
      </GlossaryHomeSection>
    )}

    {dynamiques.length > 0 && (
      <GlossaryHomeSection
        id="dynamiques-archicratiques"
        title="Dynamiques archicratiques"
        followSection="Dynamiques archicratiques"
        intro="Cette famille rassemble les processus de déplacement, les dérives et les formes de pathologisation de la régulation archicratique."
        ctaHref={dynamiquesPageHref}
        ctaLabel="Ouvrir le portail"
      >
        <GlossaryCardGrid entries={dynamiques} />
      </GlossaryHomeSection>
    )}

    <GlossaryHomeSection
      id="meta-regimes-archicratiques"
      title="Méta-régimes archicratiques"
      followSection="Méta-régimes archicratiques"
      intro="Les méta-régimes décrivent les grandes formes historiques et topologiques par lesquelles une société organise durablement ses tensions et sa co-viabilité."
      ctaHref={metaRegimesPageHref}
      ctaLabel="Explorer la cartographie complète"
    >
      {metaRegimesPreview.length > 0 && (
        <GlossaryCardGrid entries={metaRegimesPreview} />
      )}
    </GlossaryHomeSection>

    <GlossaryHomeSection
      id="approfondir"
      title="Prolonger la lecture"
      followSection="Prolonger la lecture"
      intro="Quatre parcours complémentaires permettent d’élargir la lecture : l’un vers les tensions irréductibles, l’un vers les verbes de la scène archicratique, l’un vers le paysage théorique dans lequel l’archicratie se situe et se distingue, l’autre vers l’ensemble alphabétique complet des entrées du glossaire."
    >
      <GlossaryPortalGrid items={approfondirPortalItems} secondary={true} />
    </GlossaryHomeSection>
  </section>

  <script is:inline>
    (() => {
      const header = document.querySelector("header");
      const hero = document.getElementById("glossary-hero");
      const follow = document.getElementById("glossary-hero-follow");
      const headings = Array.from(document.querySelectorAll("[data-follow-section]"));

      if (!header || !hero || !follow || headings.length === 0) return;

      let raf = 0;
      let activeHeading = null;
      let clearTimer = 0;

      function syncStickyTop() {
        const headerHeight = header.getBoundingClientRect().height || 0;
        document.documentElement.style.setProperty(
          "--glossary-sticky-top",
          `${Math.round(headerHeight + 8)}px`
        );
      }

      function applyHeadingMetrics(fromEl, toEl) {
        const cs = window.getComputedStyle(fromEl);

        const sourceFontSize = Number.parseFloat(cs.fontSize) || 40;
        const sourceLineHeight =
          Number.parseFloat(cs.lineHeight) ||
          Math.round(sourceFontSize * 1.06 * 100) / 100;

        const scaledFontSize = Math.max(28, sourceFontSize * 0.9);
        const scaledLineHeight = Math.max(scaledFontSize * 1.04, sourceLineHeight * 0.92);

        toEl.style.fontSize = `${scaledFontSize}px`;
        toEl.style.lineHeight = `${scaledLineHeight}px`;
        toEl.style.fontWeight = cs.fontWeight;
        toEl.style.letterSpacing = cs.letterSpacing;
        toEl.style.fontFamily = cs.fontFamily;

        document.documentElement.style.setProperty(
          "--glossary-follow-height",
          `${Math.ceil(scaledLineHeight)}px`
        );
      }

      function getCurrentHeading() {
        const heroRect = hero.getBoundingClientRect();
        let candidate = null;

        for (const heading of headings) {
          const rect = heading.getBoundingClientRect();
          const trigger = heroRect.bottom - Math.min(rect.height * 0.42, 18);

          if (rect.top <= trigger) {
            candidate = heading;
          } else {
            break;
          }
        }

        return candidate;
      }

      function hideFollow() {
        if (!follow.classList.contains("is-visible")) return;

        follow.classList.remove("is-visible");
        follow.setAttribute("aria-hidden", "true");

        window.clearTimeout(clearTimer);
        clearTimer = window.setTimeout(() => {
          if (!follow.classList.contains("is-visible")) {
            follow.textContent = "";
          }
        }, 260);
      }

      function showFollow(heading) {
        const nextText = (heading.dataset.followSection || heading.textContent || "").trim();
        if (!nextText) {
          hideFollow();
          return;
        }

        if (activeHeading !== heading) {
          activeHeading = heading;
          follow.textContent = nextText;
          applyHeadingMetrics(heading, follow);
        }

        window.clearTimeout(clearTimer);

        if (!follow.classList.contains("is-visible")) {
          requestAnimationFrame(() => {
            follow.classList.add("is-visible");
            follow.setAttribute("aria-hidden", "false");
          });
        } else {
          follow.setAttribute("aria-hidden", "false");
        }
      }

      function updateFollow() {
        syncStickyTop();

        const active = getCurrentHeading();

        if (!active) {
          activeHeading = null;
          hideFollow();
          return;
        }

        const heroRect = hero.getBoundingClientRect();
        const activeRect = active.getBoundingClientRect();
        const showThreshold = heroRect.bottom - Math.min(activeRect.height * 0.34, 14);
        const shouldShow = activeRect.top <= showThreshold;

        if (!shouldShow) {
          activeHeading = null;
          hideFollow();
          return;
        }

        showFollow(active);
      }

      function schedule() {
        if (raf) return;
        raf = requestAnimationFrame(() => {
          raf = 0;
          updateFollow();
        });
      }

      window.addEventListener("scroll", schedule, { passive: true });
      window.addEventListener("resize", schedule);

      if (document.fonts?.ready) {
        document.fonts.ready.then(schedule).catch(() => {});
      }

      schedule();
    })();
  </script>

  <style>
    :root{
      --glossary-accent: #00d9ff;
      --glossary-bg-soft: rgba(127,127,127,0.05);
      --glossary-bg-soft-strong: rgba(127,127,127,0.08);
      --glossary-border: rgba(127,127,127,0.22);
      --glossary-border-strong: rgba(127,127,127,0.30);
      --glossary-sticky-top: 64px;
      --glossary-follow-height: 2.5rem;
    }

    .glossary-home-shell__main,
    .glossary-home-shell__aside{
      grid-column: auto;
    }

    .glossary-home-shell__aside-inner{
      position: static;
    }

    .glossary-map-block__head h2,
    .glossary-section h2{
      margin: 0;
      font-size: clamp(2rem, 3vw, 2.55rem);
      line-height: 1.06;
      letter-spacing: -.03em;
      font-weight: 800;
    }

    .glossary-map-block{
      padding: 18px 18px 20px;
      border: 1px solid var(--glossary-border);
      border-radius: 24px;
      background: rgba(127,127,127,0.04);
    }

    .glossary-map-block__head p{
      max-width: 76ch;
      margin: 12px 0 0;
      font-size: 1rem;
      line-height: 1.55;
      opacity: .94;
    }

    .glossary-map{
      display: grid;
      justify-items: center;
      gap: 10px;
      margin-top: 18px;
    }

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

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

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

    .glossary-map__node{
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 50px;
      padding: 10px 14px;
      border: 1px solid var(--glossary-border-strong);
      border-radius: 999px;
      background: var(--glossary-bg-soft);
      color: var(--glossary-accent);
      text-decoration: none;
      text-align: center;
      font-size: .99rem;
      font-weight: 800;
      letter-spacing: .04em;
      transition: transform 120ms ease, background 120ms ease, border-color 120ms ease;
    }

    .glossary-map__node:hover{
      background: var(--glossary-bg-soft-strong);
      border-color: rgba(0,217,255,0.22);
      text-decoration: none;
      transform: translateY(-1px);
    }

    .glossary-map__node--wide{
      width: 100%;
      max-width: 100%;
    }

    .glossary-map__arrow{
      font-size: 1.45rem;
      line-height: 1;
      opacity: .72;
    }

    .glossary-portal-card strong{
      color: var(--glossary-accent);
      font-size: 1.08rem;
      line-height: 1.28;
    }

    .glossary-portal-card span{
      color: inherit;
      font-size: 1rem;
      line-height: 1.5;
      opacity: .94;
    }

    .glossary-portal-card small{
      color: var(--glossary-accent);
      font-size: .94rem;
      line-height: 1.35;
      opacity: .9;
    }

    @media (max-width: 980px){
      .glossary-home-shell{
        grid-template-columns: 1fr;
      }

      .glossary-home-shell__aside-inner{
        position: static;
      }
    }

    @media (max-width: 760px){
      .glossary-hero{
        top: calc(var(--glossary-sticky-top) - 2px);
        padding: 12px 14px 16px;
      }

      .glossary-map__roots{
        grid-template-columns: 1fr;
      }

      .glossary-section__head{
        flex-direction: column;
        align-items: stretch;
      }

      .glossary-cta{
        width: fit-content;
      }
    }

    @media (prefers-color-scheme: dark){
      .glossary-map-block,
      .glossary-map__node,
      .glossary-card,
      .glossary-portal-card{
        background: rgba(255,255,255,0.04);
      }

      .glossary-map__node:hover,
      .glossary-card:hover,
      .glossary-portal-card:hover,
      .glossary-cta:hover{
        background: rgba(255,255,255,0.07);
      }
    }
  </style>
</GlossaryLayout>