{% 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;">Sermons</h1>
      <p class="section-subtitle" style="color: rgba(255,255,255,0.9);">Listen to inspiring messages from God's Word</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-play"></i>
      </div>
      <h3 class="card-title">Sermon Player Coming Soon</h3>
      <p>We're working on integrating our sermon player. In the meantime, you can:</p>
      <div style="margin-top: 2rem;">
        <a href="/sermons/archive" class="btn-2025 btn-primary">
          <i class="fas fa-archive"></i>
          Browse Sermon Archive
        </a>
        <a href="https://stream.rockvilletollandsda.church" target="_blank" class="btn-2025 btn-outline">
          <i class="fas fa-video"></i>
          Watch Live Stream
        </a>
      </div>
    </div>
  </div>
</section>
{% endblock %}