<?php

use ChurchCRM\dto\SystemURLs;

$sPageTitle = 'About Us - ' . $churchName;
require SystemURLs::getDocumentRoot() . '/Include/HeaderNotLoggedIn.php';
require 'header.php';
?>

<div class="container py-5">
  <div class="row align-items-center mb-5 animate-on-scroll">
    <div class="col-lg-6 mb-4 mb-lg-0">
      <span class="badge bg-primary mb-2">Our Mission</span>
      <h2 class="fw-bold">Welcome to <?= $churchName ?></h2>
      <p class="lead text-secondary">We are a community of believers dedicated to loving God, loving people, and making disciples of Jesus Christ.</p>
      <p>Our doors are open to everyone, regardless of where you are on your spiritual journey. Whether you're exploring faith for the first time or have been walking with Christ for years, you'll find a welcoming family here.</p>
      <p>We believe that the church is not a building — it's the people. Together, we worship, grow, serve, and share the hope of Christ with our community and beyond.</p>
    </div>
    <div class="col-lg-6">
      <div class="bg-light rounded-4 d-flex align-items-center justify-content-center shadow-sm" style="height: 380px;">
        <i class="fa-solid fa-church fa-5x" style="color:#0d6efd; opacity:.3;"></i>
      </div>
    </div>
  </div>
</div>

<div class="website-section">
  <div class="container">
    <h2 class="text-center fw-bold mb-2 animate-on-scroll">What We Believe</h2>
    <p class="text-center text-secondary mb-5 animate-on-scroll">Our faith is rooted in the Bible and centered on Jesus Christ.</p>
    <div class="row g-4">
      <div class="col-md-4 animate-on-scroll">
        <div class="card about-card shadow-sm h-100 p-4">
          <div class="feature-icon bg-primary bg-opacity-10 text-primary">
            <i class="fa-solid fa-cross"></i>
          </div>
          <h5>Jesus Christ</h5>
          <p class="text-secondary mb-0">We believe in Jesus Christ as the Son of God, who died for our sins, rose again, and offers eternal life to all who believe.</p>
        </div>
      </div>
      <div class="col-md-4 animate-on-scroll">
        <div class="card about-card shadow-sm h-100 p-4">
          <div class="feature-icon bg-success bg-opacity-10 text-success">
            <i class="fa-solid fa-book-bible"></i>
          </div>
          <h5>The Bible</h5>
          <p class="text-secondary mb-0">We believe the Bible is the inspired Word of God, our guide for faith and daily living.</p>
        </div>
      </div>
      <div class="col-md-4 animate-on-scroll">
        <div class="card about-card shadow-sm h-100 p-4">
          <div class="feature-icon bg-warning bg-opacity-10 text-warning">
            <i class="fa-solid fa-heart"></i>
          </div>
          <h5>Love & Community</h5>
          <p class="text-secondary mb-0">We believe in showing God's love through authentic community, service, and compassion for all people.</p>
        </div>
      </div>
      <div class="col-md-4 animate-on-scroll">
        <div class="card about-card shadow-sm h-100 p-4">
          <div class="feature-icon bg-info bg-opacity-10 text-info">
            <i class="fa-solid fa-water"></i>
          </div>
          <h5>Baptism</h5>
          <p class="text-secondary mb-0">We believe in baptism by immersion as a public declaration of faith in Jesus Christ.</p>
        </div>
      </div>
      <div class="col-md-4 animate-on-scroll">
        <div class="card about-card shadow-sm h-100 p-4">
          <div class="feature-icon bg-danger bg-opacity-10 text-danger">
            <i class="fa-solid fa-hands-praying"></i>
          </div>
          <h5>Prayer</h5>
          <p class="text-secondary mb-0">We believe in the power of prayer and its ability to transform lives, heal relationships, and draw us closer to God.</p>
        </div>
      </div>
      <div class="col-md-4 animate-on-scroll">
        <div class="card about-card shadow-sm h-100 p-4">
          <div class="feature-icon bg-purple bg-opacity-10" style="color:#6f42c1;">
            <i class="fa-solid fa-hand-holding-heart"></i>
          </div>
          <h5>Service</h5>
          <p class="text-secondary mb-0">We believe every believer is called to serve others using their unique gifts and talents for God's glory.</p>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="website-section" style="background: #f8f9fa;">
  <div class="container">
    <div class="row align-items-center">
      <div class="col-lg-5 mb-4 mb-lg-0 animate-on-scroll">
        <span class="badge bg-success mb-2">Visit Us</span>
        <h2 class="fw-bold">Service Times</h2>
        <p class="text-secondary">We would love to have you join us for worship and fellowship.</p>
        <div class="d-flex align-items-center mb-3 p-3 bg-white rounded-3 shadow-sm">
          <div class="feature-icon bg-primary bg-opacity-10 text-primary me-3" style="width:50px;height:50px;font-size:1.2rem;margin-bottom:0;">
            <i class="fa-solid fa-sun"></i>
          </div>
          <div>
            <strong>Sunday Morning</strong><br>
            <span class="text-secondary">9:00 AM & 10:30 AM</span>
          </div>
        </div>
        <div class="d-flex align-items-center mb-3 p-3 bg-white rounded-3 shadow-sm">
          <div class="feature-icon bg-info bg-opacity-10 text-info me-3" style="width:50px;height:50px;font-size:1.2rem;margin-bottom:0;">
            <i class="fa-solid fa-calendar-week"></i>
          </div>
          <div>
            <strong>Wednesday Bible Study</strong><br>
            <span class="text-secondary">7:00 PM</span>
          </div>
        </div>
        <div class="d-flex align-items-center p-3 bg-white rounded-3 shadow-sm">
          <div class="feature-icon bg-success bg-opacity-10 text-success me-3" style="width:50px;height:50px;font-size:1.2rem;margin-bottom:0;">
            <i class="fa-solid fa-children"></i>
          </div>
          <div>
            <strong>Sunday School (All Ages)</strong><br>
            <span class="text-secondary">9:30 AM</span>
          </div>
        </div>
      </div>
      <div class="col-lg-6 offset-lg-1 animate-on-scroll">
        <div class="bg-light rounded-4 d-flex align-items-center justify-content-center shadow-sm" style="height: 400px;">
          <div class="text-center text-secondary">
            <i class="fa-solid fa-map-location-dot fa-4x mb-3" style="opacity:.3;"></i>
            <p class="mb-0"><?= $churchAddress ?: '123 Church Street' ?><br><?= $churchCity ?>, <?= $churchState ?> <?= $churchZip ?></p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="website-section text-center">
  <div class="container">
    <h2 class="fw-bold mb-3 animate-on-scroll">We'd Love to Meet You</h2>
    <p class="text-secondary mb-4 animate-on-scroll">Whether you're new to the area or looking for a church home, you're welcome here.</p>
    <a href="<?= $rootPath ?>/external/contact" class="btn btn-primary btn-lg animate-on-scroll">Get in Touch</a>
  </div>
</div>

<?php require 'footer.php'; ?>
<?php require SystemURLs::getDocumentRoot() . '/Include/FooterNotLoggedIn.php'; ?>
