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

pub async fn about_handler() -> Html<String> {
    let content = r#"
    <!-- About 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;">About Our Church</h1>
          <div style="text-align: center; margin-bottom: 3rem;">
            <img src="/images/sda-logo.webp" alt="Seventh-day Adventist Church Logo" style="height: 8rem; width: auto;">
          </div>
        </div>
        
        <div class="card-2025 scroll-reveal" style="max-width: 1000px; margin: 0 auto;">
          <div style="padding: 3rem;">
            <p style="font-size: 1.25rem; line-height: 1.8; margin-bottom: 2rem; color: var(--deep-navy);">
              Welcome to the <strong>Rockville-Tolland Seventh-day Adventist Church</strong>. We are a vibrant community
              of believers dedicated to sharing God's love and the hope of His soon return. Our church
              family is committed to spiritual growth, fellowship, and service to our local community.
            </p>

            <h2 style="color: var(--deep-navy); font-family: 'Playfair Display', serif; font-size: 2.5rem; margin: 3rem 0 1.5rem 0; border-bottom: 3px solid var(--soft-gold); padding-bottom: 0.5rem; display: inline-block;">Our Mission</h2>
            <p style="font-size: 1.1rem; line-height: 1.7; margin-bottom: 2rem; color: var(--deep-navy);">
              Our mission is to share the everlasting gospel of Jesus Christ in the context of the <strong>Three
              Angels' Messages of Revelation 14</strong>, leading people to accept Jesus as their personal Savior
              and unite with His remnant church in preparation for His soon return.
            </p>

            <h2 style="color: var(--deep-navy); font-family: 'Playfair Display', serif; font-size: 2.5rem; margin: 3rem 0 1.5rem 0; border-bottom: 3px solid var(--soft-gold); padding-bottom: 0.5rem; display: inline-block;">What We Believe</h2>
            <p style="font-size: 1.1rem; line-height: 1.7; margin-bottom: 1.5rem; color: var(--deep-navy);">
              As Seventh-day Adventists, we believe in:
            </p>
            <div class="beliefs-grid" style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem; margin: 2rem 0;">
              <div class="belief-card" style="background: var(--soft-gray); padding: 2rem; border-radius: 16px; border-left: 4px solid var(--soft-gold);">
                <div style="display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem;">
                  <i class="fas fa-book" style="color: var(--soft-gold); font-size: 1.5rem;"></i>
                  <h4 style="color: var(--deep-navy); font-weight: 600; margin: 0;">The Bible</h4>
                </div>
                <p style="color: var(--deep-navy); margin: 0;">The inspired Word of God and our only rule of faith and practice</p>
              </div>
              
              <div class="belief-card" style="background: var(--soft-gray); padding: 2rem; border-radius: 16px; border-left: 4px solid var(--soft-gold);">
                <div style="display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem;">
                  <i class="fas fa-cross" style="color: var(--soft-gold); font-size: 1.5rem;"></i>
                  <h4 style="color: var(--deep-navy); font-weight: 600; margin: 0;">Salvation</h4>
                </div>
                <p style="color: var(--deep-navy); margin: 0;">Through faith in Jesus Christ alone, by grace, not by works</p>
              </div>
              
              <div class="belief-card" style="background: var(--soft-gray); padding: 2rem; border-radius: 16px; border-left: 4px solid var(--soft-gold);">
                <div style="display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem;">
                  <i class="fas fa-cloud" style="color: var(--soft-gold); font-size: 1.5rem;"></i>
                  <h4 style="color: var(--deep-navy); font-weight: 600; margin: 0;">Second Coming</h4>
                </div>
                <p style="color: var(--deep-navy); margin: 0;">The blessed hope and grand climax of the gospel</p>
              </div>
              
              <div class="belief-card" style="background: var(--soft-gray); padding: 2rem; border-radius: 16px; border-left: 4px solid var(--soft-gold);">
                <div style="display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem;">
                  <i class="fas fa-calendar-week" style="color: var(--soft-gold); font-size: 1.5rem;"></i>
                  <h4 style="color: var(--deep-navy); font-weight: 600; margin: 0;">The Sabbath</h4>
                </div>
                <p style="color: var(--deep-navy); margin: 0;">God's holy day of rest and worship from Friday sunset to Saturday sunset</p>
              </div>
              
              <div class="belief-card" style="background: var(--soft-gray); padding: 2rem; border-radius: 16px; border-left: 4px solid var(--soft-gold);">
                <div style="display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem;">
                  <i class="fas fa-heart" style="color: var(--soft-gold); font-size: 1.5rem;"></i>
                  <h4 style="color: var(--deep-navy); font-weight: 600; margin: 0;">Wholistic Health</h4>
                </div>
                <p style="color: var(--deep-navy); margin: 0;">Caring for body, mind, and spirit as God's temple</p>
              </div>
              
              <div class="belief-card" style="background: var(--soft-gray); padding: 2rem; border-radius: 16px; border-left: 4px solid var(--soft-gold);">
                <div style="display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem;">
                  <i class="fas fa-hands-helping" style="color: var(--soft-gold); font-size: 1.5rem;"></i>
                  <h4 style="color: var(--deep-navy); font-weight: 600; margin: 0;">Service</h4>
                </div>
                <p style="color: var(--deep-navy); margin: 0;">To God and humanity, following Christ's example</p>
              </div>
            </div>

            <h2 style="color: var(--deep-navy); font-family: 'Playfair Display', serif; font-size: 2.5rem; margin: 3rem 0 1.5rem 0; border-bottom: 3px solid var(--soft-gold); padding-bottom: 0.5rem; display: inline-block;">Our Community</h2>
            <p style="font-size: 1.1rem; line-height: 1.7; margin-bottom: 2rem; color: var(--deep-navy);">
              We are blessed to serve the communities of <strong>Rockville, Tolland, and surrounding areas</strong>. Our
              church offers various programs and ministries for all age groups, providing opportunities
              for worship, fellowship, and spiritual growth.
            </p>

            <h2 style="color: var(--deep-navy); font-family: 'Playfair Display', serif; font-size: 2.5rem; margin: 3rem 0 1.5rem 0; border-bottom: 3px solid var(--soft-gold); padding-bottom: 0.5rem; display: inline-block;">The Three Angels' Messages</h2>
            <p style="font-size: 1.1rem; line-height: 1.7; margin-bottom: 2rem; color: var(--deep-navy);">
              Central to our identity as Seventh-day Adventists are the Three Angels' Messages found in Revelation 14:6-12:
            </p>
            
            <div style="background: var(--soft-gray); padding: 2rem; border-radius: 16px; margin: 2rem 0; border-left: 4px solid var(--soft-gold);">
              <h4 style="color: var(--deep-navy); font-weight: 600; margin-bottom: 1rem;">
                <i class="fas fa-dove" style="color: var(--soft-gold); margin-right: 0.5rem;"></i>
                First Angel's Message
              </h4>
              <p style="font-style: italic; color: var(--deep-navy); margin-bottom: 1rem;">
                "Fear God and give glory to Him, for the hour of His judgment has come; and worship Him who made heaven and earth, the sea and springs of water."
              </p>
              <p style="color: var(--deep-navy); margin: 0; font-size: 0.95rem;">
                The everlasting gospel calls all people to worship the Creator God.
              </p>
            </div>
            
            <div style="background: var(--soft-gray); padding: 2rem; border-radius: 16px; margin: 2rem 0; border-left: 4px solid var(--soft-gold);">
              <h4 style="color: var(--deep-navy); font-weight: 600; margin-bottom: 1rem;">
                <i class="fas fa-bullhorn" style="color: var(--soft-gold); margin-right: 0.5rem;"></i>
                Second Angel's Message
              </h4>
              <p style="font-style: italic; color: var(--deep-navy); margin-bottom: 1rem;">
                "Babylon is fallen, is fallen, that great city, because she has made all nations drink of the wine of the wrath of her fornication."
              </p>
              <p style="color: var(--deep-navy); margin: 0; font-size: 0.95rem;">
                A warning about false religious systems and a call to choose truth over tradition.
              </p>
            </div>
            
            <div style="background: var(--soft-gray); padding: 2rem; border-radius: 16px; margin: 2rem 0; border-left: 4px solid var(--soft-gold);">
              <h4 style="color: var(--deep-navy); font-weight: 600; margin-bottom: 1rem;">
                <i class="fas fa-scroll" style="color: var(--soft-gold); margin-right: 0.5rem;"></i>
                Third Angel's Message
              </h4>
              <p style="font-style: italic; color: var(--deep-navy); margin-bottom: 1rem;">
                "Here is the patience of the saints; here are those who keep the commandments of God and the faith of Jesus."
              </p>
              <p style="color: var(--deep-navy); margin: 0; font-size: 0.95rem;">
                A call to remain faithful to God's commandments, including the Sabbath, while maintaining faith in Jesus.
              </p>
            </div>

            <h2 style="color: var(--deep-navy); font-family: 'Playfair Display', serif; font-size: 2.5rem; margin: 3rem 0 1.5rem 0; border-bottom: 3px solid var(--soft-gold); padding-bottom: 0.5rem; display: inline-block;">Join Us</h2>
            <p style="font-size: 1.1rem; line-height: 1.7; margin-bottom: 2rem; color: var(--deep-navy);">
              Whether you're a long-time Adventist, new to the faith, or simply seeking to learn more
              about God, we welcome you to join us. Our services are designed to be inclusive and
              meaningful for everyone, regardless of where you are in your spiritual journey.
            </p>
            
            <div style="text-align: center; margin-top: 3rem;">
              <a href="/contact" class="btn-2025 btn-primary" style="font-size: 1.1rem; padding: 1rem 2rem;">
                <i class="fas fa-envelope" style="margin-right: 0.5rem;"></i>
                Contact Us
              </a>
              <a href="/events" class="btn-2025 btn-outline" style="font-size: 1.1rem; padding: 1rem 2rem; margin-left: 1rem; background: white; color: var(--deep-navy); border: 2px solid var(--deep-navy);">
                <i class="fas fa-calendar" style="margin-right: 0.5rem;"></i>
                Upcoming Events
              </a>
            </div>
          </div>
        </div>
      </div>
    </section>
    "#;

    Html(layout(content, "About Our Church"))
}