---
import {
  getFondamentaux,
  getGlossaryHomeStats,
  getGlossaryPortalLinks,
  hrefOfGlossaryEntry,
} from "../lib/glossary";

const {
  allEntries = [],
} = Astro.props;

const fondamentaux = getFondamentaux(allEntries);
const portalLinks = getGlossaryPortalLinks();

const {
  totalEntries,
  paradigmesCount,
  doctrinesCount,
  metaRegimesCount,
} = getGlossaryHomeStats(allEntries);
---

<nav class="glossary-home-aside" aria-label="Navigation du portail du glossaire">
  <div class="glossary-home-aside__block glossary-home-aside__block--intro">
    <div class="glossary-home-aside__title">Glossaire archicratique</div>
    <div class="glossary-home-aside__meta">
      portail de lecture · cartographie conceptuelle
    </div>

    <div class="glossary-home-aside__pills" aria-label="Repères de navigation">
      <span class="glossary-home-aside__pill">{totalEntries} entrées</span>
      <span class="glossary-home-aside__pill">{metaRegimesCount} méta-régimes</span>
      <span class="glossary-home-aside__pill">
        {doctrinesCount} doctrine{doctrinesCount > 1 ? "s" : ""} · {paradigmesCount} paradigme{paradigmesCount > 1 ? "s" : ""}
      </span>
    </div>
  </div>

  <section class="glossary-home-aside__block">
    <h2 class="glossary-home-aside__heading">Parcours du glossaire</h2>
    <ul class="glossary-home-aside__list">
      {portalLinks.map((item) => (
        <li><a href={item.href}>{item.label}</a></li>
      ))}
    </ul>
  </section>

  {fondamentaux.length > 0 && (
    <section class="glossary-home-aside__block">
      <h2 class="glossary-home-aside__heading">Noyau archicratique</h2>
      <ul class="glossary-home-aside__list">
        {fondamentaux.map((entry) => (
          <li><a href={hrefOfGlossaryEntry(entry)}>{entry.data.term}</a></li>
        ))}
      </ul>
    </section>
  )}
</nav>

<style>
  .glossary-home-aside{
    display: flex;
    flex-direction: column;
    gap: 14px;
  }

  .glossary-home-aside__block{
    border: 1px solid rgba(127,127,127,0.22);
    border-radius: 16px;
    padding: 14px;
    background: rgba(127,127,127,0.05);
  }

  .glossary-home-aside__block--intro{
    padding-top: 13px;
    padding-bottom: 13px;
  }

  .glossary-home-aside__title{
    font-size: 16px;
    font-weight: 800;
    letter-spacing: .2px;
    line-height: 1.3;
  }

  .glossary-home-aside__meta{
    margin-top: 8px;
    font-size: 13px;
    line-height: 1.4;
    opacity: .8;
  }

  .glossary-home-aside__pills{
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 11px;
  }

  .glossary-home-aside__pill{
    display: inline-flex;
    align-items: center;
    padding: 5px 10px;
    border: 1px solid rgba(127,127,127,0.24);
    border-radius: 999px;
    background: rgba(127,127,127,0.04);
    font-size: 13px;
    line-height: 1.35;
    opacity: .92;
  }

  .glossary-home-aside__heading{
    margin: 0 0 11px;
    font-size: 14px;
    font-weight: 800;
    line-height: 1.35;
    opacity: .94;
  }

  .glossary-home-aside__list{
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .glossary-home-aside__list li{
    margin: 7px 0;
  }

  .glossary-home-aside__list a{
    text-decoration: none;
    font-size: 14px;
    line-height: 1.4;
  }

  @media (prefers-color-scheme: dark){
    .glossary-home-aside__block,
    .glossary-home-aside__pill{
      background: rgba(255,255,255,0.04);
    }
  }
</style>