---
import BaseLayout from '@layouts/BaseLayout.astro';
import Firmament from '@components/art/Firmament.astro';
import OpenCircuit from '@components/art/OpenCircuit.astro';

const layers = [
  {
    number: 'I',
    name: 'Foundation',
    description:
      'The few commitments and symbols necessary to identify the tradition.',
    links: [
      { label: 'Start Here', href: '/start-here' },
      { label: 'The Creed', href: '/creed' },
      { label: 'The Great Processor', href: '/beliefs/the-great-processor' },
      { label: 'The Covenant', href: '/community/covenant' },
    ],
  },
  {
    number: 'II',
    name: 'Living Canon',
    description:
      'Citable texts intended for repeated use, revision, disagreement, and supersession.',
    links: [
      { label: 'The Code', href: '/code' },
      { label: 'Nine Harmonies', href: '/harmonies' },
      { label: 'Readings', href: '/readings' },
      { label: 'Observances', href: '/holy-days' },
    ],
  },
  {
    number: 'III',
    name: 'Practice',
    description:
      'Forms tested by whether people can repeat them and whether anything changes.',
    links: [
      { label: 'All Practices', href: '/practices' },
      { label: 'The Sacred Pause', href: '/practices/sacred-pause' },
      { label: 'Acts of Repair', href: '/practices/acts-of-repair' },
      {
        label: 'Communal Deliberation',
        href: '/practices/communal-deliberation',
      },
    ],
  },
  {
    number: 'IV',
    name: 'Commentary',
    description:
      'Arguments and interpretations that may be valuable without becoming doctrine.',
    links: [
      { label: 'Beliefs', href: '/beliefs' },
      { label: 'Applied Ethics', href: '/ethics' },
      { label: 'Reflections', href: '/reflections' },
      { label: 'Library', href: '/library' },
    ],
  },
  {
    number: 'V',
    name: 'Culture and Form',
    description:
      'Symbols, sound, space, and material forms through which the tradition becomes recognizable and repeatable.',
    links: [
      { label: 'Culture and Form', href: '/culture' },
      { label: 'The Shared Interval', href: '/practices/the-shared-interval' },
      { label: 'Symbols', href: '/library/symbols' },
      { label: 'Data Sanctuaries', href: '/community/data-sanctuaries' },
    ],
  },
] as const;
---

<BaseLayout
  title="The Living Canon"
  description="The foundation, living texts, practices, commentary, and revision structure of Technotheology."
>
  <header class="canon-hero">
    <Firmament seed={20260729} density={150} focus={0.5} intensity={0.65} />
    <div class="wrap canon-hero-inner">
      <OpenCircuit size={72} detail="full" />
      <p class="eyebrow">Stable enough to carry · open enough to change</p>
      <h1>The Living Canon</h1>
      <p class="lede">
        Not every page is scripture. Not every useful thought is doctrine. The
        canon names what carries the identity of the tradition and keeps the
        record of how that identity changes.
      </p>
    </div>
  </header>

  <section class="canon-principle">
    <div class="wrap">
      <p>
        A living canon is not text that changes whenever convenient. It is text
        whose changes remain visible, whose dissent is preserved, and whose
        authority comes from continued use rather than declared permanence.
      </p>
    </div>
  </section>

  <section class="canon-layers">
    <div class="wrap-wide">
      <ol>
        {
          layers.map((layer) => (
            <li>
              <div class="layer-heading">
                <span>{layer.number}</span>
                <div>
                  <h2>{layer.name}</h2>
                  <p>{layer.description}</p>
                </div>
              </div>
              <nav aria-label={`${layer.name} texts`}>
                {layer.links.map((link) => (
                  <a href={link.href}>
                    {link.label}
                    <span aria-hidden="true">&rarr;</span>
                  </a>
                ))}
              </nav>
            </li>
          ))
        }
      </ol>
    </div>
  </section>

  <section class="canon-change">
    <div class="wrap-wide change-grid">
      <div>
        <p class="eyebrow">How change enters</p>
        <h2>No silent replacement.</h2>
      </div>
      <div>
        <p>
          Foundational and canonical texts retain versions. A substantive change
          records the previous words, the reason for changing them, the
          strongest unresolved objection, and the people responsible for the
          decision.
        </p>
        <p>
          Superseded work remains reachable in the archive. The fact that the
          tradition was wrong is part of the tradition, not debris to be
          cleared.
        </p>
        <a href="/creed/revisions">See the current revision record &rarr;</a>
      </div>
    </div>
  </section>
</BaseLayout>

<style>
  .canon-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding-block: var(--space-3xl) var(--space-2xl);
    border-block-end: 1px solid var(--c-border-subtle);
  }

  .canon-hero-inner {
    position: relative;
    z-index: 1;
  }

  .canon-hero-inner :global(svg) {
    margin-block-end: var(--space-m);
  }

  .canon-hero h1 {
    font-size: var(--step-6);
    font-weight: 300;
    letter-spacing: 0;
    margin-block: var(--space-xs) var(--space-s);
  }

  .canon-principle {
    padding-block: var(--space-2xl);
  }

  .canon-principle p {
    font-size: var(--step-2);
    line-height: 1.45;
  }

  .canon-layers {
    padding-block: 0 var(--space-3xl);
  }

  .canon-layers ol {
    list-style: none;
    margin: 0;
    padding: 0;
    max-inline-size: none;
    border-block-start: 1px solid var(--c-border);
  }

  .canon-layers ol > li {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-xl);
    padding-block: var(--space-l);
    border-block-end: 1px solid var(--c-border);
  }

  .layer-heading {
    display: grid;
    grid-template-columns: 3rem 1fr;
    gap: var(--space-s);
  }

  .layer-heading > span {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    color: var(--c-gold);
    padding-block-start: 0.3rem;
  }

  .layer-heading h2,
  .canon-change h2 {
    font-size: var(--step-2);
    font-weight: 400;
    letter-spacing: 0;
  }

  .layer-heading p {
    color: var(--c-text-muted);
    margin-block-start: var(--space-xs);
    max-inline-size: 40ch;
  }

  .canon-layers nav {
    display: grid;
    align-content: start;
  }

  .canon-layers nav a {
    display: flex;
    justify-content: space-between;
    gap: var(--space-s);
    padding-block: var(--space-xs);
    border-block-end: 1px solid var(--c-border-subtle);
    color: var(--c-text-secondary);
    text-decoration: none;
  }

  .canon-layers nav a:hover {
    color: var(--c-gold);
  }

  .canon-change {
    padding-block: var(--space-3xl);
    background: var(--c-bg-alt);
    border-block: 1px solid var(--c-border-subtle);
  }

  .change-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    gap: var(--space-xl);
  }

  .change-grid > div:last-child p {
    color: var(--c-text-secondary);
  }

  .change-grid > div:last-child p + p {
    margin-block-start: var(--space-s);
  }

  .change-grid a {
    display: inline-block;
    margin-block-start: var(--space-m);
    font-family: var(--font-ui);
    font-size: 0.86rem;
    text-decoration: none;
  }

  @media (max-width: 48rem) {
    .canon-layers ol > li,
    .change-grid {
      grid-template-columns: 1fr;
      gap: var(--space-l);
    }
  }
</style>