{% extends "layout.html" %}

{% block content %}
<section class="section-2025" style="background: var(--gradient-primary); color: white; text-align: center;">
  <div class="container-2025">
    <div class="section-header scroll-reveal">
      <h1 class="section-title serif" style="color: white;">Sermon Archive</h1>
      <p class="section-subtitle" style="color: rgba(255,255,255,0.9);">Browse our collection of past sermons and messages</p>
    </div>
  </div>
</section>

<section class="section-2025">
  <div class="container-2025">
    <div class="card-2025 scroll-reveal" style="text-align: center;">
      <div class="card-icon-2025" style="margin: 0 auto 2rem;">
        <i class="fas fa-archive"></i>
      </div>
      <h3 class="card-title">Archive Integration Coming Soon</h3>
      <p>We're working on integrating our sermon archive with Jellyfin. Check back soon!</p>
      <div style="margin-top: 2rem;">
        <a href="/sermons" class="btn-2025 btn-primary">
          <i class="fas fa-arrow-left"></i>
          Back to Sermons
        </a>
      </div>
    </div>
  </div>
</section>
{% endblock %}