{% extends 'marketing/base.html' %}

{% block title %}{{ title }}{% endblock %}
{% block description %}{{ description }}{% endblock %}

{% block content %}
<section class="bg-brand-bg py-16 px-4 min-h-[60vh]" aria-labelledby="legal-index-title">
  <div class="max-w-3xl mx-auto">
    <header class="mb-8 text-center">
      <p class="text-xs uppercase tracking-wider text-brand-navy/70 mb-2">DictIA Inc.</p>
      <h1 id="legal-index-title" class="text-3xl md:text-4xl font-black text-brand-navy mb-3">Documents légaux</h1>
      <p class="text-sm text-brand-navy/70">Version {{ legal_version }} de l'ensemble des documents.</p>
    </header>

    <ul class="space-y-3" role="list">
      {% for page in pages %}
      <li>
        <a href="{{ url_for('legal.legal_page', page=page.slug) }}" class="block p-5 bg-white border border-brand-border rounded-[12px] hover:border-brand-b1 hover:shadow-cta transition focus-visible:outline-2 focus-visible:outline-brand-b1 focus-visible:outline-offset-2">
          <h2 class="text-lg font-semibold text-brand-navy mb-1">{{ page.title }}</h2>
          <p class="text-sm text-brand-navy/70">{{ page.description }}</p>
        </a>
      </li>
      {% endfor %}
    </ul>
  </div>
</section>
{% endblock %}