{% extends "index.html" %}

{% block main %}
  {%- if section.content %}
  <section>{{ section.content | safe }}</section>
  {%- endif %}
  
  {%- set announcements_section = get_section(path="announcements/_index.md") %}
  {%- if announcements_section and announcements_section.pages %}
  <section class="mt-16 not-prose">
    <h2 class="text-2xl font-semibold mb-6 text-black dark:text-white">Recent Announcements</h2>
    <div class="grid gap-6 md:grid-cols-1 lg:grid-cols-3">
      {%- for page in announcements_section.pages | slice(end=3) %}
      <article class="border border-gray-200 dark:border-gray-700 rounded-lg p-4 hover:shadow-md transition-shadow">
        <h3 class="text-lg font-medium mb-2">
          <a href="{{ page.permalink | safe }}" class="text-blue-600 dark:text-blue-400 hover:underline">
            {{ page.title }}
          </a>
        </h3>
        <time class="text-sm text-gray-500 dark:text-gray-400 mb-3 block">
          {{ page.date | date(format="%B %d, %Y") }}
        </time>
        <div class="text-gray-700 dark:text-gray-300">
          {{ page.content | striptags | truncate(length=150) }}
        </div>
      </article>
      {%- endfor %}
    </div>
    <div class="mt-6 text-center">
      <a href="/announcements/" class="text-blue-600 dark:text-blue-400 hover:underline font-medium">
        View all announcements →
      </a>
    </div>
  </section>
  {%- endif %}
  
  {% include "partials/page_list.html" %}
{% endblock main %}