use axum::response::Html;
use crate::layout::layout;

pub async fn ministries_handler() -> Html<String> {
    let content = r#"
    <!-- Ministries Page -->
    <section class="section-2025" style="padding-top: 6rem;">
      <div class="container-2025">
        <div class="section-header scroll-reveal">
          <h1 class="section-title serif" style="font-size: 3rem; margin-bottom: 2rem;">Our Ministries</h1>
          <p class="section-subtitle" style="max-width: 800px; margin: 0 auto 4rem auto;">
            Discover the various ways you can get involved, grow spiritually, and serve in our church community.
            Each ministry is designed to help believers grow in faith and share God's love with others.
          </p>
        </div>
        
        <!-- Ministries Grid -->
        <div class="ministries-grid" style="display: grid; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); gap: 2rem; margin-top: 3rem;">
          
          <!-- Prayer Ministry -->
          <div class="card-2025 scroll-reveal" style="display: flex; flex-direction: column; height: 100%;">
            <div style="aspect-ratio: 4/3; width: 100%; overflow: hidden; border-radius: 16px 16px 0 0; position: relative;">
              <img src="/images/events/prayer.webp" alt="Prayer Ministry" style="width: 100%; height: 100%; object-fit: cover;">
              <div style="position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.6), transparent);"></div>
            </div>
            <div style="padding: 2rem; flex-grow: 1; display: flex; flex-direction: column;">
              <h3 style="color: var(--deep-navy); font-family: 'Playfair Display', serif; font-size: 1.5rem; margin-bottom: 1rem;">Prayer Ministry</h3>
              <p style="color: var(--deep-navy); line-height: 1.6; margin-bottom: 1.5rem; flex-grow: 1;">
                Join one of our many prayer groups or submit your prayer requests. We have multiple opportunities for prayer throughout the week: Daily Prayer Group, Wednesday Prayer Group, BiWeekly Prayer Group, and Monthly Prayer Group.
              </p>
              
              <div style="margin-bottom: 1.5rem; padding: 1.5rem; background: var(--soft-gray); border-radius: 12px;">
                <div style="display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.75rem; color: var(--deep-navy);">
                  <i class="fas fa-calendar" style="color: var(--soft-gold); font-size: 1.1rem;"></i>
                  <span>Daily, Weekly, BiWeekly, and Monthly Groups</span>
                </div>
                <div style="display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.75rem; color: var(--deep-navy);">
                  <i class="fas fa-clock" style="color: var(--soft-gold); font-size: 1.1rem;"></i>
                  <span>Various Times Available</span>
                </div>
                <div style="display: flex; align-items: center; gap: 0.75rem; color: var(--deep-navy);">
                  <i class="fas fa-map-marker-alt" style="color: var(--soft-gold); font-size: 1.1rem;"></i>
                  <span>In Person & Online</span>
                </div>
              </div>
              
              <a href="/contact" class="btn-2025 btn-primary" style="margin-top: auto;">
                <i class="fas fa-envelope" style="margin-right: 0.5rem;"></i>
                Contact Prayer Ministry
              </a>
            </div>
          </div>

          <!-- Gardening Ministry -->
          <div class="card-2025 scroll-reveal" style="display: flex; flex-direction: column; height: 100%;">
            <div style="aspect-ratio: 4/3; width: 100%; overflow: hidden; border-radius: 16px 16px 0 0; position: relative;">
              <img src="/images/garden.webp" alt="Gardening Ministry" style="width: 100%; height: 100%; object-fit: cover;">
              <div style="position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.6), transparent);"></div>
            </div>
            <div style="padding: 2rem; flex-grow: 1; display: flex; flex-direction: column;">
              <h3 style="color: var(--deep-navy); font-family: 'Playfair Display', serif; font-size: 1.5rem; margin-bottom: 1rem;">Gardening Ministry</h3>
              <p style="color: var(--deep-navy); line-height: 1.6; margin-bottom: 1.5rem; flex-grow: 1;">
                Learn about sustainable gardening practices and join our community of gardeners. Watch our gardening series to learn practical tips and techniques for growing your own food.
              </p>
              
              <a href="https://www.youtube.com/playlist?list=PLtVXQJggBMd8p00o3vo5MsGizRy1Dkwca" target="_blank" rel="noopener noreferrer" class="btn-2025 btn-primary" style="margin-top: auto;">
                <i class="fas fa-video" style="margin-right: 0.5rem;"></i>
                Garden Video Series
              </a>
            </div>
          </div>

          <!-- Bible Studies -->
          <div class="card-2025 scroll-reveal" style="display: flex; flex-direction: column; height: 100%;">
            <div style="aspect-ratio: 4/3; width: 100%; overflow: hidden; border-radius: 16px 16px 0 0; position: relative;">
              <img src="/images/bible.webp" alt="Bible Studies" style="width: 100%; height: 100%; object-fit: cover;">
              <div style="position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.6), transparent);"></div>
            </div>
            <div style="padding: 2rem; flex-grow: 1; display: flex; flex-direction: column;">
              <h3 style="color: var(--deep-navy); font-family: 'Playfair Display', serif; font-size: 1.5rem; margin-bottom: 1rem;">Bible Studies</h3>
              <p style="color: var(--deep-navy); line-height: 1.6; margin-bottom: 1.5rem; flex-grow: 1;">
                Deepen your understanding of Scripture through our Bible study programs and resources. Access free Bible study guides and tools to enhance your spiritual journey.
              </p>
              
              <div style="display: flex; flex-direction: column; gap: 0.75rem; margin-top: auto;">
                <a href="/contact" class="btn-2025 btn-primary" style="font-size: 0.9rem; padding: 0.75rem 1rem; text-align: center;">
                  <i class="fas fa-envelope" style="margin-right: 0.5rem;"></i>
                  Request Studies
                </a>
                <div style="display: flex; flex-wrap: wrap; gap: 0.5rem;">
                  <a href="https://www.amazingfacts.org/media-library/read/c/2/t/bible-study-guides" target="_blank" rel="noopener noreferrer" class="btn-2025 btn-outline" style="font-size: 0.8rem; padding: 0.5rem 0.75rem; flex: 1; min-width: 100px; text-align: center; background: white; color: var(--deep-navy); border: 1px solid var(--deep-navy);">
                    <i class="fas fa-external-link-alt" style="margin-right: 0.25rem;"></i>
                    Guides
                  </a>
                  <a href="https://www.e-sword.net/" target="_blank" rel="noopener noreferrer" class="btn-2025 btn-outline" style="font-size: 0.8rem; padding: 0.5rem 0.75rem; flex: 1; min-width: 100px; text-align: center; background: white; color: var(--deep-navy); border: 1px solid var(--deep-navy);">
                    <i class="fas fa-external-link-alt" style="margin-right: 0.25rem;"></i>
                    E-Sword
                  </a>
                  <a href="https://bibleproject.com/app/" target="_blank" rel="noopener noreferrer" class="btn-2025 btn-outline" style="font-size: 0.8rem; padding: 0.5rem 0.75rem; flex: 1; min-width: 100px; text-align: center; background: white; color: var(--deep-navy); border: 1px solid var(--deep-navy);">
                    <i class="fas fa-external-link-alt" style="margin-right: 0.25rem;"></i>
                    Bible Project
                  </a>
                </div>
              </div>
            </div>
          </div>

          <!-- Adventist Youth -->
          <div class="card-2025 scroll-reveal" style="display: flex; flex-direction: column; height: 100%;">
            <div style="aspect-ratio: 4/3; width: 100%; overflow: hidden; border-radius: 16px 16px 0 0; position: relative;">
              <img src="/images/ay.webp" alt="Adventist Youth" style="width: 100%; height: 100%; object-fit: cover;">
              <div style="position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.6), transparent);"></div>
            </div>
            <div style="padding: 2rem; flex-grow: 1; display: flex; flex-direction: column;">
              <h3 style="color: var(--deep-navy); font-family: 'Playfair Display', serif; font-size: 1.5rem; margin-bottom: 1rem;">Adventist Youth</h3>
              <p style="color: var(--deep-navy); line-height: 1.6; margin-bottom: 1.5rem; flex-grow: 1;">
                Join our vibrant youth community for spiritual growth, fellowship, and service opportunities. Experience the joy of growing in faith with other young believers.
              </p>
              
              <a href="/contact" class="btn-2025 btn-primary" style="margin-top: auto;">
                <i class="fas fa-envelope" style="margin-right: 0.5rem;"></i>
                Contact Youth Ministry
              </a>
            </div>
          </div>

          <!-- Health Ministry -->
          <div class="card-2025 scroll-reveal" style="display: flex; flex-direction: column; height: 100%;">
            <div style="aspect-ratio: 4/3; width: 100%; overflow: hidden; border-radius: 16px 16px 0 0; position: relative;">
              <img src="/images/health.webp" alt="Health Ministry" style="width: 100%; height: 100%; object-fit: cover;">
              <div style="position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.6), transparent);"></div>
            </div>
            <div style="padding: 2rem; flex-grow: 1; display: flex; flex-direction: column;">
              <h3 style="color: var(--deep-navy); font-family: 'Playfair Display', serif; font-size: 1.5rem; margin-bottom: 1rem;">Health Ministry</h3>
              <p style="color: var(--deep-navy); line-height: 1.6; margin-bottom: 1.5rem; flex-grow: 1;">
                Discover resources and programs promoting physical, mental, and spiritual well-being through our health ministry. Learn about God's plan for optimal health.
              </p>
              
              <a href="https://www.healthministries.com/articles/" target="_blank" rel="noopener noreferrer" class="btn-2025 btn-primary" style="margin-top: auto;">
                <i class="fas fa-external-link-alt" style="margin-right: 0.5rem;"></i>
                Health Resources
              </a>
            </div>
          </div>

          <!-- Training Ministry -->
          <div class="card-2025 scroll-reveal" style="display: flex; flex-direction: column; height: 100%;">
            <div style="aspect-ratio: 4/3; width: 100%; overflow: hidden; border-radius: 16px 16px 0 0; position: relative;">
              <img src="/images/training.webp" alt="Training Ministry" style="width: 100%; height: 100%; object-fit: cover;">
              <div style="position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.6), transparent);"></div>
            </div>
            <div style="padding: 2rem; flex-grow: 1; display: flex; flex-direction: column;">
              <h3 style="color: var(--deep-navy); font-family: 'Playfair Display', serif; font-size: 1.5rem; margin-bottom: 1rem;">Training & Education</h3>
              <p style="color: var(--deep-navy); line-height: 1.6; margin-bottom: 1.5rem; flex-grow: 1;">
                Develop your spiritual gifts and ministry skills through our training programs. Learn to share your faith effectively and serve others with confidence.
              </p>
              
              <a href="/contact" class="btn-2025 btn-primary" style="margin-top: auto;">
                <i class="fas fa-envelope" style="margin-right: 0.5rem;"></i>
                Learn More
              </a>
            </div>
          </div>

        </div>
        
        <!-- Call to Action -->
        <div style="text-align: center; margin-top: 4rem;">
          <div class="card-2025 scroll-reveal" style="max-width: 600px; margin: 0 auto; padding: 3rem;">
            <h3 style="color: var(--deep-navy); font-family: 'Playfair Display', serif; font-size: 2rem; margin-bottom: 1rem;">Get Involved Today</h3>
            <p style="color: var(--deep-navy); line-height: 1.6; margin-bottom: 2rem;">
              Ready to join one of our ministries? Contact us to learn more about how you can get involved and make a difference in our community.
            </p>
            <a href="/contact" class="btn-2025 btn-primary" style="font-size: 1.1rem; padding: 1rem 2rem;">
              <i class="fas fa-phone" style="margin-right: 0.5rem;"></i>
              Contact Us Today
            </a>
          </div>
        </div>
      </div>
    </section>
    "#;

    Html(layout(content, "Our Ministries"))
}