{% extends "base.html" %}

{% block title %}Archive Guide — Agent Mail{% endblock %}

{% block breadcrumbs %}
<nav class="flex items-center gap-2 text-sm">
  <a href="/mail" class="text-slate-600 dark:text-slate-400 hover:text-primary-600 dark:hover:text-primary-400 transition-colors">
    Projects
  </a>
  <i data-lucide="chevron-right" class="w-4 h-4 text-slate-400"></i>
  <span class="text-slate-900 dark:text-white font-medium">Archive Guide</span>
</nav>
{% endblock %}

{% block content %}
<div class="animate-fade-in">
  <!-- Hero Section - Tasteful Redesign -->
  <div class="relative overflow-hidden rounded-2xl bg-gradient-to-br from-slate-900 to-slate-800 dark:from-slate-800 dark:to-slate-900 p-8 mb-8 shadow-lg border border-slate-700">
    <div class="relative z-10">
      <div class="flex items-center gap-4 mb-6">
        <div class="w-16 h-16 bg-primary-600 rounded-xl flex items-center justify-center shadow-lg">
          <i data-lucide="git-branch" class="w-8 h-8 text-white"></i>
        </div>
        <div>
          <h1 class="text-4xl md:text-5xl font-bold text-white mb-2">
            Git Archive
          </h1>
          <p class="text-xl text-slate-300 font-medium">
            Your Complete Message History, Version-Controlled
          </p>
        </div>
      </div>
      <p class="text-lg text-slate-400 max-w-3xl">
        Every message, file reservation, and agent profile is automatically committed to a Git repository,
        providing an immutable audit trail with cryptographic integrity. Access it via standard Git tools
        or explore it right here in the UI.
      </p>
    </div>

    <!-- Subtle accent gradient -->
    <div class="absolute top-0 right-0 w-96 h-96 bg-gradient-to-br from-primary-500/10 to-purple-500/10 rounded-full blur-3xl pointer-events-none"></div>
  </div>

  <!-- Dual Storage Explainer -->
  <div class="bg-amber-50 dark:bg-amber-900/20 border-2 border-amber-200 dark:border-amber-800 rounded-2xl p-8 mb-8 shadow-soft">
    <div class="flex items-start gap-6">
      <div class="flex-shrink-0">
        <div class="w-16 h-16 bg-amber-500 rounded-2xl flex items-center justify-center shadow-md">
          <i data-lucide="help-circle" class="w-8 h-8 text-white"></i>
        </div>
      </div>
      <div class="flex-1">
        <h3 class="text-2xl font-bold text-slate-900 dark:text-white mb-4">
          How Does Storage Work?
        </h3>
        <div class="grid md:grid-cols-2 gap-6">
          <div class="bg-white dark:bg-slate-800 rounded-xl p-5 border border-slate-200 dark:border-slate-700 shadow-sm">
            <div class="flex items-center gap-3 mb-3">
              <div class="w-10 h-10 bg-blue-500 rounded-lg flex items-center justify-center shadow-sm">
                <i data-lucide="database" class="w-5 h-5 text-white"></i>
              </div>
              <h4 class="font-bold text-slate-900 dark:text-white">SQLite Database</h4>
            </div>
            <ul class="space-y-2 text-sm text-slate-600 dark:text-slate-400">
              <li class="flex items-start gap-2">
                <i data-lucide="zap" class="w-4 h-4 text-blue-500 flex-shrink-0 mt-0.5"></i>
                <span><strong>For live operations:</strong> Fast message queries, search, filtering</span>
              </li>
              <li class="flex items-start gap-2">
                <i data-lucide="inbox" class="w-4 h-4 text-blue-500 flex-shrink-0 mt-0.5"></i>
                <span><strong>Powers your inbox:</strong> Real-time message delivery and threading</span>
              </li>
              <li class="flex items-start gap-2">
                <i data-lucide="refresh-cw" class="w-4 h-4 text-blue-500 flex-shrink-0 mt-0.5"></i>
                <span><strong>Mutable:</strong> Can be edited or deleted by administrators</span>
              </li>
            </ul>
          </div>

          <div class="bg-white dark:bg-slate-800 rounded-xl p-5 border-2 border-emerald-200 dark:border-emerald-700 shadow-sm">
            <div class="flex items-center gap-3 mb-3">
              <div class="w-10 h-10 bg-emerald-500 rounded-lg flex items-center justify-center shadow-sm">
                <i data-lucide="git-branch" class="w-5 h-5 text-white"></i>
              </div>
              <h4 class="font-bold text-slate-900 dark:text-white">Git Archive</h4>
            </div>
            <ul class="space-y-2 text-sm text-slate-600 dark:text-slate-400">
              <li class="flex items-start gap-2">
                <i data-lucide="shield" class="w-4 h-4 text-emerald-500 flex-shrink-0 mt-0.5"></i>
                <span><strong>For audit trail:</strong> Immutable, tamper-proof record</span>
              </li>
              <li class="flex items-start gap-2">
                <i data-lucide="clock" class="w-4 h-4 text-emerald-500 flex-shrink-0 mt-0.5"></i>
                <span><strong>Complete history:</strong> Browse changes over time</span>
              </li>
              <li class="flex items-start gap-2">
                <i data-lucide="hard-drive" class="w-4 h-4 text-emerald-500 flex-shrink-0 mt-0.5"></i>
                <span><strong>Portable:</strong> Clone, backup with standard Git tools</span>
              </li>
            </ul>
          </div>
        </div>

        <div class="mt-6 p-4 bg-gradient-to-r from-primary-50 to-purple-50 dark:from-primary-950/30 dark:to-purple-950/30 rounded-xl border border-primary-200 dark:border-primary-800">
          <div class="flex items-start gap-3">
            <i data-lucide="info" class="w-5 h-5 text-primary-600 dark:text-primary-400 flex-shrink-0 mt-0.5"></i>
            <p class="text-sm text-slate-700 dark:text-slate-300">
              <strong>Think of it like this:</strong> The database is your "working copy" for day-to-day operations,
              while the Git archive is your "permanent record" for compliance, auditing, and forensic analysis.
              Every message exists in BOTH places.
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- Quick Stats -->
  <div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8">
    <div class="bg-gradient-to-br from-blue-50 to-blue-100 dark:from-blue-950/30 dark:to-blue-900/30 rounded-2xl p-6 border-2 border-blue-200 dark:border-blue-800 shadow-soft hover:shadow-medium transition-shadow duration-300">
      <div class="flex items-center justify-between mb-4">
        <div class="w-14 h-14 bg-blue-500 rounded-xl flex items-center justify-center shadow-md">
          <i data-lucide="git-commit" class="w-7 h-7 text-white"></i>
        </div>
        <span class="text-3xl font-bold text-blue-900 dark:text-blue-100">{{ total_commits }}</span>
      </div>
      <h3 class="text-sm font-semibold text-blue-700 dark:text-blue-300 uppercase tracking-wide">Total Commits</h3>
    </div>

    <div class="bg-gradient-to-br from-emerald-50 to-emerald-100 dark:from-emerald-950/30 dark:to-emerald-900/30 rounded-2xl p-6 border-2 border-emerald-200 dark:border-emerald-800 shadow-soft hover:shadow-medium transition-shadow duration-300">
      <div class="flex items-center justify-between mb-4">
        <div class="w-14 h-14 bg-emerald-500 rounded-xl flex items-center justify-center shadow-md">
          <i data-lucide="folder" class="w-7 h-7 text-white"></i>
        </div>
        <span class="text-3xl font-bold text-emerald-900 dark:text-emerald-100">{{ project_count }}</span>
      </div>
      <h3 class="text-sm font-semibold text-emerald-700 dark:text-emerald-300 uppercase tracking-wide">Projects</h3>
    </div>

    <div class="bg-gradient-to-br from-violet-50 to-violet-100 dark:from-violet-950/30 dark:to-violet-900/30 rounded-2xl p-6 border-2 border-violet-200 dark:border-violet-800 shadow-soft hover:shadow-medium transition-shadow duration-300">
      <div class="flex items-center justify-between mb-4">
        <div class="w-14 h-14 bg-violet-500 rounded-xl flex items-center justify-center shadow-md">
          <i data-lucide="database" class="w-7 h-7 text-white"></i>
        </div>
        <span class="text-3xl font-bold text-violet-900 dark:text-violet-100">{{ repo_size }}</span>
      </div>
      <h3 class="text-sm font-semibold text-violet-700 dark:text-violet-300 uppercase tracking-wide">Archive Size</h3>
    </div>

    <div class="bg-gradient-to-br from-amber-50 to-amber-100 dark:from-amber-950/30 dark:to-amber-900/30 rounded-2xl p-6 border-2 border-amber-200 dark:border-amber-800 shadow-soft hover:shadow-medium transition-shadow duration-300">
      <div class="flex items-center justify-between mb-4">
        <div class="w-14 h-14 bg-amber-500 rounded-xl flex items-center justify-center shadow-md">
          <i data-lucide="clock" class="w-7 h-7 text-white"></i>
        </div>
        <span class="text-3xl font-bold text-amber-900 dark:text-amber-100">{{ last_commit_time }}</span>
      </div>
      <h3 class="text-sm font-semibold text-amber-700 dark:text-amber-300 uppercase tracking-wide">Last Commit</h3>
    </div>
  </div>

  <!-- Feature Sections Grid -->
  <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 mb-8">

    <!-- Local Access -->
    <div class="bg-white dark:bg-slate-800 rounded-2xl shadow-soft border-2 border-slate-200 dark:border-slate-700 overflow-hidden hover:border-primary-400 dark:hover:border-primary-600 transition-all duration-300">
      <div class="bg-gradient-to-r from-slate-700 to-slate-600 dark:from-slate-800 dark:to-slate-700 p-6">
        <div class="flex items-center gap-3 mb-2">
          <div class="w-12 h-12 bg-white/20 backdrop-blur-sm rounded-xl flex items-center justify-center">
            <i data-lucide="terminal" class="w-6 h-6 text-white"></i>
          </div>
          <h2 class="text-2xl font-bold text-white">Access Locally</h2>
        </div>
        <p class="text-white/90">Clone the archive and explore with your favorite Git tools</p>
      </div>

      <div class="p-6 space-y-6">
        <!-- Repository Location -->
        <div>
          <label class="block text-sm font-semibold text-slate-700 dark:text-slate-300 mb-2">
            Repository Location
          </label>
          <div class="flex items-center gap-2">
            <code class="flex-1 px-4 py-3 bg-slate-50 dark:bg-slate-900 border border-slate-200 dark:border-slate-700 rounded-lg text-sm font-mono text-slate-900 dark:text-white">{{ storage_root }}</code>
            <button onclick='copyToClipboard({{ storage_root|tojson }})'
                    class="px-4 py-3 bg-primary-500 hover:bg-primary-600 text-white rounded-lg transition-colors shadow-md hover:shadow-lg flex items-center gap-2">
              <i data-lucide="copy" class="w-4 h-4"></i>
              Copy
            </button>
          </div>
        </div>

        <!-- Quick Commands -->
        <div>
          <label class="block text-sm font-semibold text-slate-700 dark:text-slate-300 mb-3">
            Quick Commands
          </label>
          <div class="space-y-3">
            <div class="relative group">
              <div class="flex items-start gap-3 p-4 bg-slate-50 dark:bg-slate-900 rounded-xl border border-slate-200 dark:border-slate-700 hover:border-primary-400 dark:hover:border-primary-600 transition-all">
                <i data-lucide="list" class="w-5 h-5 text-primary-600 dark:text-primary-400 mt-0.5 flex-shrink-0"></i>
                <div class="flex-1 min-w-0">
                  <p class="text-xs font-medium text-slate-600 dark:text-slate-400 mb-1">View recent commits</p>
                  <code class="block text-sm font-mono text-slate-900 dark:text-white break-all">git -C {{ storage_root }} log --oneline -20</code>
                </div>
                <button onclick='copyToClipboard({{ ('git -C ' ~ storage_root ~ ' log --oneline -20')|tojson }})'
                        class="opacity-0 group-hover:opacity-100 transition-opacity p-2 hover:bg-slate-200 dark:hover:bg-slate-700 rounded-lg">
                  <i data-lucide="copy" class="w-4 h-4 text-slate-600 dark:text-slate-400"></i>
                </button>
              </div>
            </div>

            <div class="relative group">
              <div class="flex items-start gap-3 p-4 bg-slate-50 dark:bg-slate-900 rounded-xl border border-slate-200 dark:border-slate-700 hover:border-primary-400 dark:hover:border-primary-600 transition-all">
                <i data-lucide="folder-tree" class="w-5 h-5 text-emerald-600 dark:text-emerald-400 mt-0.5 flex-shrink-0"></i>
                <div class="flex-1 min-w-0">
                  <p class="text-xs font-medium text-slate-600 dark:text-slate-400 mb-1">Browse project structure</p>
                  <code class="block text-sm font-mono text-slate-900 dark:text-white break-all">tree {{ storage_root }}/projects/</code>
                </div>
                <button onclick='copyToClipboard({{ ('tree ' ~ storage_root ~ '/projects/')|tojson }})'
                        class="opacity-0 group-hover:opacity-100 transition-opacity p-2 hover:bg-slate-200 dark:hover:bg-slate-700 rounded-lg">
                  <i data-lucide="copy" class="w-4 h-4 text-slate-600 dark:text-slate-400"></i>
                </button>
              </div>
            </div>

            <div class="relative group">
              <div class="flex items-start gap-3 p-4 bg-slate-50 dark:bg-slate-900 rounded-xl border border-slate-200 dark:border-slate-700 hover:border-primary-400 dark:hover:border-primary-600 transition-all">
                <i data-lucide="search" class="w-5 h-5 text-violet-600 dark:text-violet-400 mt-0.5 flex-shrink-0"></i>
                <div class="flex-1 min-w-0">
                  <p class="text-xs font-medium text-slate-600 dark:text-slate-400 mb-1">Search commit messages</p>
                  <code class="block text-sm font-mono text-slate-900 dark:text-white break-all">git -C {{ storage_root }} log --all --grep="keyword"</code>
                </div>
                <button onclick='copyToClipboard({{ ('git -C ' ~ storage_root ~ ' log --all --grep=\"keyword\"')|tojson }})'
                        class="opacity-0 group-hover:opacity-100 transition-opacity p-2 hover:bg-slate-200 dark:hover:bg-slate-700 rounded-lg">
                  <i data-lucide="copy" class="w-4 h-4 text-slate-600 dark:text-slate-400"></i>
                </button>
              </div>
            </div>

            <div class="relative group">
              <div class="flex items-start gap-3 p-4 bg-slate-50 dark:bg-slate-900 rounded-xl border border-slate-200 dark:border-slate-700 hover:border-primary-400 dark:hover:border-primary-600 transition-all">
                <i data-lucide="file-text" class="w-5 h-5 text-amber-600 dark:text-amber-400 mt-0.5 flex-shrink-0"></i>
                <div class="flex-1 min-w-0">
                  <p class="text-xs font-medium text-slate-600 dark:text-slate-400 mb-1">View specific commit</p>
                  <code class="block text-sm font-mono text-slate-900 dark:text-white break-all">git -C {{ storage_root }} show &lt;commit-sha&gt;</code>
                </div>
                <button onclick='copyToClipboard({{ ('git -C ' ~ storage_root ~ ' show <commit-sha>')|tojson }})'
                        class="opacity-0 group-hover:opacity-100 transition-opacity p-2 hover:bg-slate-200 dark:hover:bg-slate-700 rounded-lg">
                  <i data-lucide="copy" class="w-4 h-4 text-slate-600 dark:text-slate-400"></i>
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- UI Features -->
    <div class="bg-white dark:bg-slate-800 rounded-2xl shadow-soft border-2 border-slate-200 dark:border-slate-700 overflow-hidden hover:border-primary-400 dark:hover:border-primary-600 transition-all duration-300" x-data="{ selectedProject: '' }">
      <div class="bg-gradient-to-r from-slate-700 to-slate-600 dark:from-slate-800 dark:to-slate-700 p-6">
        <div class="flex items-center gap-3 mb-2">
          <div class="w-12 h-12 bg-white/20 backdrop-blur-sm rounded-xl flex items-center justify-center">
            <i data-lucide="layout-grid" class="w-6 h-6 text-white"></i>
          </div>
          <h2 class="text-2xl font-bold text-white">Explore in UI</h2>
        </div>
        <p class="text-white/90">Powerful visualization tools built right into the web interface</p>
      </div>

      <!-- Project Picker -->
      <div class="px-6 pt-6 pb-2">
        <div class="bg-gradient-to-r from-primary-50 to-purple-50 dark:from-primary-950/30 dark:to-purple-950/30 rounded-xl p-5 border-2 border-primary-200 dark:border-primary-800">
          <div class="flex items-start gap-3 mb-4">
            <i data-lucide="layers" class="w-5 h-5 text-primary-600 dark:text-primary-400 flex-shrink-0 mt-1"></i>
            <div class="flex-1">
              <h4 class="font-bold text-slate-900 dark:text-white mb-2">Select a Project</h4>
              <p class="text-sm text-slate-600 dark:text-slate-400 mb-3">
                Most visualization tools require a project context. Choose a project below to explore its archive.
              </p>
              <select x-model="selectedProject" class="w-full px-4 py-3 bg-white dark:bg-slate-900 border-2 border-slate-300 dark:border-slate-600 rounded-xl text-slate-900 dark:text-white focus:ring-2 focus:ring-primary-500 focus:border-transparent transition-all">
                <option value="">— Select a project —</option>
                {% for proj in projects %}
                  <option value="{{ proj.slug }}">{{ proj.human_key }}</option>
                {% endfor %}
              </select>
            </div>
          </div>
        </div>
      </div>

      <div class="p-6 space-y-4">
        <a href="/mail/archive/activity"
           class="flex items-center gap-4 p-4 bg-gradient-to-r from-blue-50 to-indigo-50 dark:from-blue-950/30 dark:to-indigo-950/30 rounded-xl border-2 border-blue-200 dark:border-blue-800 hover:border-blue-400 dark:hover:border-blue-600 transition-all duration-300 group">
          <div class="w-12 h-12 bg-blue-500 rounded-xl flex items-center justify-center shadow-md group-hover:scale-110 transition-transform">
            <i data-lucide="activity" class="w-6 h-6 text-white"></i>
          </div>
          <div class="flex-1">
            <h3 class="font-bold text-slate-900 dark:text-white mb-1 group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors">
              Activity Feed
            </h3>
            <p class="text-sm text-slate-600 dark:text-slate-400 mb-2">Recent commits across all projects</p>
            <div class="flex items-start gap-2 text-xs text-blue-600 dark:text-blue-400">
              <i data-lucide="lightbulb" class="w-3.5 h-3.5 flex-shrink-0 mt-0.5"></i>
              <span class="font-medium">Use when: Monitoring recent activity and changes</span>
            </div>
          </div>
          <i data-lucide="arrow-right" class="w-5 h-5 text-slate-400 group-hover:text-blue-600 dark:group-hover:text-blue-400 group-hover:translate-x-1 transition-all"></i>
        </a>

        <a :href="selectedProject ? `/mail/archive/browser?project=${selectedProject}` : '#'"
           :class="selectedProject ? '' : 'opacity-50 pointer-events-none'"
           class="flex items-center gap-4 p-4 bg-gradient-to-r from-emerald-50 to-green-50 dark:from-emerald-950/30 dark:to-green-950/30 rounded-xl border-2 border-emerald-200 dark:border-emerald-800 hover:border-emerald-400 dark:hover:border-emerald-600 transition-all duration-300 group">
          <div class="w-12 h-12 bg-emerald-500 rounded-xl flex items-center justify-center shadow-md group-hover:scale-110 transition-transform">
            <i data-lucide="folder-tree" class="w-6 h-6 text-white"></i>
          </div>
          <div class="flex-1">
            <h3 class="font-bold text-slate-900 dark:text-white mb-1 group-hover:text-emerald-600 dark:group-hover:text-emerald-400 transition-colors">
              Archive Browser
            </h3>
            <p class="text-sm text-slate-600 dark:text-slate-400 mb-2">Navigate files and view content</p>
            <div class="flex items-start gap-2 text-xs text-emerald-600 dark:text-emerald-400">
              <i data-lucide="lightbulb" class="w-3.5 h-3.5 flex-shrink-0 mt-0.5"></i>
              <span class="font-medium">Use when: Exploring directory structure and reading specific files</span>
            </div>
          </div>
          <i data-lucide="arrow-right" class="w-5 h-5 text-slate-400 group-hover:text-emerald-600 dark:group-hover:text-emerald-400 group-hover:translate-x-1 transition-all"></i>
        </a>

        <a :href="selectedProject ? `/mail/archive/timeline?project=${selectedProject}` : '#'"
           :class="selectedProject ? '' : 'opacity-50 pointer-events-none'"
           class="flex items-center gap-4 p-4 bg-gradient-to-r from-violet-50 to-purple-50 dark:from-violet-950/30 dark:to-purple-950/30 rounded-xl border-2 border-violet-200 dark:border-violet-800 hover:border-violet-400 dark:hover:border-violet-600 transition-all duration-300 group">
          <div class="w-12 h-12 bg-violet-500 rounded-xl flex items-center justify-center shadow-md group-hover:scale-110 transition-transform">
            <i data-lucide="git-branch" class="w-6 h-6 text-white"></i>
          </div>
          <div class="flex-1">
            <h3 class="font-bold text-slate-900 dark:text-white mb-1 group-hover:text-violet-600 dark:group-hover:text-violet-400 transition-colors">
              Communication Timeline
            </h3>
            <p class="text-sm text-slate-600 dark:text-slate-400 mb-2">Visual message flow over time</p>
            <div class="flex items-start gap-2 text-xs text-violet-600 dark:text-violet-400">
              <i data-lucide="lightbulb" class="w-3.5 h-3.5 flex-shrink-0 mt-0.5"></i>
              <span class="font-medium">Use when: Visualizing chronological message history and Git evolution</span>
            </div>
          </div>
          <i data-lucide="arrow-right" class="w-5 h-5 text-slate-400 group-hover:text-violet-600 dark:group-hover:text-violet-400 group-hover:translate-x-1 transition-all"></i>
        </a>

        <a :href="selectedProject ? `/mail/archive/network?project=${selectedProject}` : '#'"
           :class="selectedProject ? '' : 'opacity-50 pointer-events-none'"
           class="flex items-center gap-4 p-4 bg-gradient-to-r from-amber-50 to-orange-50 dark:from-amber-950/30 dark:to-orange-950/30 rounded-xl border-2 border-amber-200 dark:border-amber-800 hover:border-amber-400 dark:hover:border-amber-600 transition-all duration-300 group">
          <div class="w-12 h-12 bg-amber-500 rounded-xl flex items-center justify-center shadow-md group-hover:scale-110 transition-transform">
            <i data-lucide="network" class="w-6 h-6 text-white"></i>
          </div>
          <div class="flex-1">
            <h3 class="font-bold text-slate-900 dark:text-white mb-1 group-hover:text-amber-600 dark:group-hover:text-amber-400 transition-colors">
              Network Graph
            </h3>
            <p class="text-sm text-slate-600 dark:text-slate-400 mb-2">Agent communication patterns</p>
            <div class="flex items-start gap-2 text-xs text-amber-600 dark:text-amber-400">
              <i data-lucide="lightbulb" class="w-3.5 h-3.5 flex-shrink-0 mt-0.5"></i>
              <span class="font-medium">Use when: Analyzing which agents communicate and collaboration patterns</span>
            </div>
          </div>
          <i data-lucide="arrow-right" class="w-5 h-5 text-slate-400 group-hover:text-amber-600 dark:group-hover:text-amber-400 group-hover:translate-x-1 transition-all"></i>
        </a>

        <a href="/mail/archive/time-travel"
           class="flex items-center gap-4 p-4 bg-gradient-to-r from-pink-50 to-rose-50 dark:from-pink-950/30 dark:to-rose-950/30 rounded-xl border-2 border-pink-200 dark:border-pink-800 hover:border-pink-400 dark:hover:border-pink-600 transition-all duration-300 group">
          <div class="w-12 h-12 bg-pink-500 rounded-xl flex items-center justify-center shadow-md group-hover:scale-110 transition-transform">
            <i data-lucide="clock" class="w-6 h-6 text-white"></i>
          </div>
          <div class="flex-1">
            <h3 class="font-bold text-slate-900 dark:text-white mb-1 group-hover:text-pink-600 dark:group-hover:text-pink-400 transition-colors">
              Time Travel
            </h3>
            <p class="text-sm text-slate-600 dark:text-slate-400 mb-2">View history at any point in time</p>
            <div class="flex items-start gap-2 text-xs text-pink-600 dark:text-pink-400">
              <i data-lucide="lightbulb" class="w-3.5 h-3.5 flex-shrink-0 mt-0.5"></i>
              <span class="font-medium">Use when: Auditing inbox state at a specific moment for compliance or debugging</span>
            </div>
          </div>
          <i data-lucide="arrow-right" class="w-5 h-5 text-slate-400 group-hover:text-pink-600 dark:group-hover:text-pink-400 group-hover:translate-x-1 transition-all"></i>
        </a>
      </div>
    </div>
  </div>

  <!-- Benefits Section -->
  <div class="bg-white dark:bg-slate-800 rounded-2xl shadow-soft border-2 border-slate-200 dark:border-slate-700 overflow-hidden">
    <div class="p-8">
      <div class="flex items-center gap-3 mb-6">
        <div class="w-14 h-14 bg-primary-600 rounded-xl flex items-center justify-center shadow-md">
          <i data-lucide="shield-check" class="w-7 h-7 text-white"></i>
        </div>
        <div>
          <h2 class="text-2xl font-bold text-slate-900 dark:text-white">Why Git Archive?</h2>
          <p class="text-slate-600 dark:text-slate-400">Unique benefits beyond the database</p>
        </div>
      </div>

      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        <div class="p-6 bg-gradient-to-br from-blue-50 to-indigo-50 dark:from-blue-950/20 dark:to-indigo-950/20 rounded-xl border border-blue-200 dark:border-blue-800">
          <div class="w-12 h-12 bg-blue-500 rounded-lg flex items-center justify-center mb-4 shadow-md">
            <i data-lucide="lock" class="w-6 h-6 text-white"></i>
          </div>
          <h3 class="font-bold text-slate-900 dark:text-white mb-2">Cryptographic Integrity</h3>
          <p class="text-sm text-slate-600 dark:text-slate-400">Every commit SHA is tamper-proof proof of authenticity</p>
        </div>

        <div class="p-6 bg-gradient-to-br from-emerald-50 to-green-50 dark:from-emerald-950/20 dark:to-green-950/20 rounded-xl border border-emerald-200 dark:border-emerald-800">
          <div class="w-12 h-12 bg-emerald-500 rounded-lg flex items-center justify-center mb-4 shadow-md">
            <i data-lucide="history" class="w-6 h-6 text-white"></i>
          </div>
          <h3 class="font-bold text-slate-900 dark:text-white mb-2">Complete History</h3>
          <p class="text-sm text-slate-600 dark:text-slate-400">Never lose data - full timeline since inception</p>
        </div>

        <div class="p-6 bg-gradient-to-br from-violet-50 to-purple-50 dark:from-violet-950/20 dark:to-purple-950/20 rounded-xl border border-violet-200 dark:border-violet-800">
          <div class="w-12 h-12 bg-violet-500 rounded-lg flex items-center justify-center mb-4 shadow-md">
            <i data-lucide="file-text" class="w-6 h-6 text-white"></i>
          </div>
          <h3 class="font-bold text-slate-900 dark:text-white mb-2">Human Readable</h3>
          <p class="text-sm text-slate-600 dark:text-slate-400">Markdown files browsable without special tools</p>
        </div>

        <div class="p-6 bg-gradient-to-br from-amber-50 to-orange-50 dark:from-amber-950/20 dark:to-orange-950/20 rounded-xl border border-amber-200 dark:border-amber-800">
          <div class="w-12 h-12 bg-amber-500 rounded-lg flex items-center justify-center mb-4 shadow-md">
            <i data-lucide="cloud" class="w-6 h-6 text-white"></i>
          </div>
          <h3 class="font-bold text-slate-900 dark:text-white mb-2">Distributed</h3>
          <p class="text-sm text-slate-600 dark:text-slate-400">Clone, backup, mirror - standard Git workflows</p>
        </div>

        <div class="p-6 bg-gradient-to-br from-pink-50 to-rose-50 dark:from-pink-950/20 dark:to-rose-950/20 rounded-xl border border-pink-200 dark:border-pink-800">
          <div class="w-12 h-12 bg-pink-500 rounded-lg flex items-center justify-center mb-4 shadow-md">
            <i data-lucide="search" class="w-6 h-6 text-white"></i>
          </div>
          <h3 class="font-bold text-slate-900 dark:text-white mb-2">Forensic Analysis</h3>
          <p class="text-sm text-slate-600 dark:text-slate-400">Deep pattern analysis over weeks and months</p>
        </div>

        <div class="p-6 bg-gradient-to-br from-cyan-50 to-teal-50 dark:from-cyan-950/20 dark:to-teal-950/20 rounded-xl border border-cyan-200 dark:border-cyan-800">
          <div class="w-12 h-12 bg-cyan-500 rounded-lg flex items-center justify-center mb-4 shadow-md">
            <i data-lucide="shield" class="w-6 h-6 text-white"></i>
          </div>
          <h3 class="font-bold text-slate-900 dark:text-white mb-2">Compliance Ready</h3>
          <p class="text-sm text-slate-600 dark:text-slate-400">Immutable records for regulated environments</p>
        </div>
      </div>
    </div>
  </div>
</div>

<script>
function copyToClipboard(text) {
  navigator.clipboard.writeText(text).then(() => {
    showToast('Copied to clipboard!', 'success');
  }).catch(() => {
    showToast('Failed to copy', 'error');
  });
}
</script>
{% endblock %}