---
layout: layouts/base.njk
withSidebar: true
---
{# Layout for slash pages (/about, /now, /uses, etc.) #}
{# These are root-level pages created via Indiekit's page post type #}

<article class="h-entry">
  <header class="mb-6 sm:mb-8">
    <h1 class="p-name text-2xl sm:text-3xl font-bold text-surface-900 dark:text-surface-100 mb-2">
      {{ title }}
    </h1>
    {% if summary %}
    <p class="p-summary text-lg text-surface-600 dark:text-surface-400">
      {{ summary }}
    </p>
    {% endif %}
    {% if updated %}
    <p class="text-sm text-surface-500 dark:text-surface-400 mt-2">
      Last updated: <time class="dt-updated" datetime="{{ updated | isoDate }}">{{ updated | dateDisplay }}</time>
    </p>
    {% endif %}
  </header>

  <div class="e-content prose dark:prose-invert prose-lg max-w-none">
    {{ content | safe }}
  </div>

  {# AI post-graph — shown only on the /ai/ page #}
  {% if page.url == "/ai/" and collections.posts %}
  {% set stats = collections.posts | aiStats %}
  {% set aiPostsList = collections.posts | aiPosts %}
  <section class="mt-8 sm:mt-12 p-6 rounded-xl bg-surface-50 dark:bg-surface-800/50 border border-surface-200 dark:border-surface-700">
    <h2 class="text-xl font-bold text-surface-900 dark:text-surface-100 mb-4">AI Usage Across Posts</h2>
    <div class="grid gap-4 sm:grid-cols-4 mb-6">
      <div class="text-center p-3 rounded-lg bg-white dark:bg-surface-800 border border-surface-200 dark:border-surface-700">
        <div class="text-2xl font-bold text-surface-900 dark:text-surface-100">{{ stats.total }}</div>
        <div class="text-xs text-surface-500 dark:text-surface-400">Total posts</div>
      </div>
      <div class="text-center p-3 rounded-lg bg-white dark:bg-surface-800 border border-surface-200 dark:border-surface-700">
        <div class="text-2xl font-bold text-amber-600 dark:text-amber-400">{{ stats.aiCount }}</div>
        <div class="text-xs text-surface-500 dark:text-surface-400">AI-involved</div>
      </div>
      <div class="text-center p-3 rounded-lg bg-white dark:bg-surface-800 border border-surface-200 dark:border-surface-700">
        <div class="text-2xl font-bold text-emerald-600 dark:text-emerald-400">{{ stats.total - stats.aiCount }}</div>
        <div class="text-xs text-surface-500 dark:text-surface-400">Human-only</div>
      </div>
      <div class="text-center p-3 rounded-lg bg-white dark:bg-surface-800 border border-surface-200 dark:border-surface-700">
        <div class="text-2xl font-bold text-surface-900 dark:text-surface-100">{{ stats.percentage }}%</div>
        <div class="text-xs text-surface-500 dark:text-surface-400">AI ratio</div>
      </div>
    </div>

    {# Breakdown by level #}
    <div class="flex flex-wrap gap-3 text-sm mb-6">
      <span class="px-3 py-1 rounded-full bg-surface-100 dark:bg-surface-700 text-surface-600 dark:text-surface-300">
        Level 0 (None): {{ stats.byLevel[0] }}
      </span>
      <span class="px-3 py-1 rounded-full bg-amber-50 dark:bg-amber-900/20 text-amber-700 dark:text-amber-300">
        Level 1 (Editorial): {{ stats.byLevel[1] }}
      </span>
      <span class="px-3 py-1 rounded-full bg-amber-100 dark:bg-amber-900/40 text-amber-800 dark:text-amber-200">
        Level 2 (Co-drafted): {{ stats.byLevel[2] }}
      </span>
      <span class="px-3 py-1 rounded-full bg-amber-200 dark:bg-amber-900/60 text-amber-900 dark:text-amber-100">
        Level 3 (AI-generated): {{ stats.byLevel[3] }}
      </span>
    </div>

    {# Post graph showing AI posts (highlighted) on the full year grid #}
    <h3 class="text-lg font-semibold text-surface-900 dark:text-surface-100 mb-3">AI-Involved Posts Over Time</h3>
    <p class="text-sm text-surface-500 dark:text-surface-400 mb-4">Highlighted days had posts with AI involvement (level 1+). Empty boxes represent days with no AI-involved posts.</p>
    {% postGraph aiPostsList, { prefix: "ai", highlightColorLight: "#d97706", highlightColorDark: "#fbbf24" } %}
  </section>
  {% endif %}

  {# AI usage disclosure #}
  {% set aiTextLevel = aiTextLevel or ai_text_level %}
  {% set aiCodeLevel = aiCodeLevel or ai_code_level %}
  {% set aiTools = aiTools or ai_tools %}
  {% set aiDescription = aiDescription or ai_description %}
  {% if aiTextLevel or aiCodeLevel or aiTools %}
  <aside class="mt-6 p-4 rounded-lg bg-surface-50 dark:bg-surface-800/50 border border-surface-200 dark:border-surface-700">
    <div class="flex items-center gap-2 mb-2">
      <svg class="w-4 h-4 text-surface-500 dark:text-surface-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.75 3.104v5.714a2.25 2.25 0 01-.659 1.591L5 14.5M9.75 3.104c-.251.023-.501.05-.75.082m.75-.082a24.301 24.301 0 014.5 0m0 0v5.714a2.25 2.25 0 00.659 1.591L19 14.5M14.25 3.104c.251.023.501.05.75.082M19 14.5l-2.47 2.47a2.25 2.25 0 01-1.59.659H9.06a2.25 2.25 0 01-1.591-.659L5 14.5m14 0V17a2 2 0 01-2 2H7a2 2 0 01-2-2v-2.5"/>
      </svg>
      <strong class="text-sm font-semibold text-surface-700 dark:text-surface-300">AI Usage</strong>
    </div>
    <div class="flex flex-wrap gap-3 text-xs text-surface-600 dark:text-surface-400">
      {% if aiTextLevel %}
      <span class="inline-flex items-center gap-1 px-2 py-0.5 rounded bg-surface-100 dark:bg-surface-700">
        Text: {% if aiTextLevel === "0" %}None{% elif aiTextLevel === "1" %}Editorial{% elif aiTextLevel === "2" %}Co-drafted{% elif aiTextLevel === "3" %}AI-generated{% endif %}
      </span>
      {% endif %}
      {% if aiCodeLevel %}
      <span class="inline-flex items-center gap-1 px-2 py-0.5 rounded bg-surface-100 dark:bg-surface-700">
        Code: {% if aiCodeLevel === "0" %}Human{% elif aiCodeLevel === "1" %}AI-assisted{% elif aiCodeLevel === "2" %}AI-generated{% endif %}
      </span>
      {% endif %}
      {% if aiTools %}
      <span class="inline-flex items-center gap-1 px-2 py-0.5 rounded bg-surface-100 dark:bg-surface-700">
        Tools: {{ aiTools }}
      </span>
      {% endif %}
    </div>
    {% if aiDescription %}
    <p class="mt-2 text-xs text-surface-500 dark:text-surface-400">{{ aiDescription }}</p>
    {% endif %}
    <p class="mt-2 text-xs"><a href="/ai/" class="text-accent-600 dark:text-accent-400 hover:underline">Learn more about AI usage on this site &rarr;</a></p>
  </aside>
  {% endif %}

  {# Categories/tags if present #}
  {% if category %}
  <footer class="mt-8 pt-6 border-t border-surface-200 dark:border-surface-700">
    <div class="flex flex-wrap gap-2">
      {% if category is string %}
      <a href="/categories/{{ category | slugify }}/" class="p-category text-sm px-3 py-1 bg-surface-100 dark:bg-surface-800 rounded-full hover:bg-surface-200 dark:hover:bg-surface-700 transition-colors">
        {{ category }}
      </a>
      {% else %}
      {% for cat in category %}
      <a href="/categories/{{ cat | slugify }}/" class="p-category text-sm px-3 py-1 bg-surface-100 dark:bg-surface-800 rounded-full hover:bg-surface-200 dark:hover:bg-surface-700 transition-colors">
        {{ cat }}
      </a>
      {% endfor %}
      {% endif %}
    </div>
  </footer>
  {% endif %}

  {# Hidden metadata for microformats #}
  <a class="u-url hidden" href="{{ page.url }}"></a>
  <data class="p-author h-card hidden" value="{{ site.author.name }}"></data>

  {# Pagefind filter metadata #}
  <div hidden>
    <span data-pagefind-filter="type">Page</span>
    {% if category %}
      {% if category is string %}
      <span data-pagefind-filter="category">{{ category }}</span>
      {% else %}
      {% for cat in category %}
      <span data-pagefind-filter="category">{{ cat }}</span>
      {% endfor %}
      {% endif %}
    {% endif %}
  </div>
</article>