<?php use App\Helpers\Helper; ?>
<section class="page-header">
  <div class="container">
    <h1 class="fw-700 mb-2"><?= Helper::e($content['about_title'] ?? 'About Us') ?></h1>
    <nav aria-label="breadcrumb"><ol class="breadcrumb mb-0"><li class="breadcrumb-item"><a href="<?= APP_URL ?>/">Home</a></li><li class="breadcrumb-item active">About</li></ol></nav>
  </div>
</section>

<!-- About Intro -->
<section class="py-5">
  <div class="container">
    <div class="row g-5 align-items-center">
      <div class="col-lg-6">
        <span class="badge bg-primary bg-opacity-10 text-primary px-3 py-2 mb-3 fw-600">Who We Are</span>
        <h2 class="fw-800 mb-3" style="line-height:1.3"><?= Helper::e($content['about_subtitle'] ?? "Tanzania's Trusted<br>Residence Management") ?></h2>
        <p class="text-muted mb-4"><?= Helper::e($content['about_body'] ?? 'Zabibu Residence is a premier property management company dedicated to providing quality living spaces across Tanzania.') ?></p>
        <div class="row g-3">
          <?php foreach ([
            ['value'=>'500+','label'=>'Happy Tenants'],
            ['value'=>'50+','label'=>'Properties'],
            ['value'=>'8+','label'=>'Regions Covered'],
            ['value'=>'10+','label'=>'Years Experience'],
          ] as $s): ?>
          <div class="col-6">
            <div class="p-3 bg-light rounded-3 text-center">
              <div class="fw-800 fs-3 text-primary"><?= $s['value'] ?></div>
              <div class="small text-muted"><?= $s['label'] ?></div>
            </div>
          </div>
          <?php endforeach; ?>
        </div>
      </div>
      <div class="col-lg-6">
        <div class="rounded-4 overflow-hidden shadow-lg" style="height:420px">
          <?php $aboutImg = !empty($content['about_image']) ? APP_URL.'/assets/images/'.$content['about_image'] : 'https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?w=800&q=70'; ?>
          <img src="<?= $aboutImg ?>" class="w-100 h-100" style="object-fit:cover" alt="Zabibu Residence">
        </div>
      </div>
    </div>
  </div>
</section>

<!-- Mission & Vision -->
<section class="py-5 bg-light">
  <div class="container">
    <div class="row g-4 justify-content-center">
      <?php foreach ([
        ['icon'=>'bi-bullseye','color'=>'#1a3c5e','title'=>'Our Mission','text'=>'To provide quality, affordable, and well-managed rental properties across Tanzania while delivering exceptional customer service to every tenant and property owner.'],
        ['icon'=>'bi-eye','color'=>'#2d6a9f','title'=>'Our Vision','text'=>'To become Tanzania\'s most trusted and innovative property management platform, setting the standard for transparency, technology-driven service, and community.'],
        ['icon'=>'bi-gem','color'=>'#e67e22','title'=>'Our Values','text'=>'Integrity, transparency, and tenant-first service guide every decision we make. We believe in building lasting relationships built on trust and mutual respect.'],
      ] as $item): ?>
      <div class="col-md-4">
        <div class="card border-0 shadow-sm h-100 text-center p-4">
          <div class="d-flex justify-content-center mb-3">
            <div class="rounded-circle d-flex align-items-center justify-content-center" style="width:70px;height:70px;background:<?= $item['color'] ?>20">
              <i class="bi <?= $item['icon'] ?> fs-2" style="color:<?= $item['color'] ?>"></i>
            </div>
          </div>
          <h5 class="fw-700 mb-2"><?= $item['title'] ?></h5>
          <p class="text-muted small mb-0"><?= $item['text'] ?></p>
        </div>
      </div>
      <?php endforeach; ?>
    </div>
  </div>
</section>

<!-- Why Choose Us -->
<section class="py-5">
  <div class="container">
    <div class="text-center mb-5">
      <h2 class="fw-800">Why Choose Zabibu Residence?</h2>
      <p class="text-muted">We go beyond just renting — we create homes.</p>
    </div>
    <div class="row g-4">
      <?php foreach ([
        ['icon'=>'bi-shield-check','title'=>'Verified Properties','text'=>'Every property is thoroughly inspected and verified before listing.'],
        ['icon'=>'bi-headset','title'=>'24/7 Support','text'=>'Our team is always available for maintenance emergencies and tenant needs.'],
        ['icon'=>'bi-phone','title'=>'Easy Payments','text'=>'Pay rent via M-Pesa, Airtel Money, Tigo Pesa, or bank transfer.'],
        ['icon'=>'bi-file-earmark-check','title'=>'Digital Leases','text'=>'Sign and manage your lease agreement fully online.'],
        ['icon'=>'bi-tools','title'=>'Fast Maintenance','text'=>'Submit and track maintenance requests through our tenant portal.'],
        ['icon'=>'bi-graph-up','title'=>'Transparent Billing','text'=>'Get itemised invoices and digital receipts for every payment.'],
      ] as $f): ?>
      <div class="col-md-4 col-6">
        <div class="d-flex gap-3">
          <div class="flex-shrink-0">
            <div class="rounded-3 bg-primary bg-opacity-10 d-flex align-items-center justify-content-center" style="width:50px;height:50px">
              <i class="bi <?= $f['icon'] ?> text-primary fs-5"></i>
            </div>
          </div>
          <div>
            <div class="fw-700 mb-1"><?= $f['title'] ?></div>
            <div class="text-muted small"><?= $f['text'] ?></div>
          </div>
        </div>
      </div>
      <?php endforeach; ?>
    </div>
  </div>
</section>

<!-- Team -->
<section class="py-5 bg-light">
  <div class="container">
    <div class="text-center mb-5">
      <h2 class="fw-800">Meet Our Team</h2>
      <p class="text-muted">Dedicated professionals committed to your comfort.</p>
    </div>
    <div class="row g-4 justify-content-center">
      <?php foreach ([
        ['name'=>'James Mwangi','role'=>'CEO & Founder','img'=>'https://i.pravatar.cc/150?img=12'],
        ['name'=>'Amina Hassan','role'=>'Head of Operations','img'=>'https://i.pravatar.cc/150?img=47'],
        ['name'=>'Peter Kimani','role'=>'Property Manager','img'=>'https://i.pravatar.cc/150?img=33'],
        ['name'=>'Grace Mollel','role'=>'Customer Relations','img'=>'https://i.pravatar.cc/150?img=48'],
      ] as $member): ?>
      <div class="col-md-3 col-6 text-center">
        <img src="<?= $member['img'] ?>" class="rounded-circle mb-3 shadow" width="90" height="90" style="object-fit:cover" alt="<?= $member['name'] ?>">
        <div class="fw-700"><?= $member['name'] ?></div>
        <div class="text-muted small"><?= $member['role'] ?></div>
      </div>
      <?php endforeach; ?>
    </div>
  </div>
</section>

<!-- CTA -->
<section class="py-5" style="background:linear-gradient(135deg,#1a3c5e,#2d6a9f);color:#fff">
  <div class="container text-center">
    <h2 class="fw-800 mb-3">Ready to Find Your Home?</h2>
    <p class="mb-4 opacity-75">Browse our available units and book a viewing today.</p>
    <div class="d-flex gap-3 justify-content-center flex-wrap">
      <a href="<?= APP_URL ?>/residences" class="btn btn-warning fw-600 px-4">Browse Properties</a>
      <a href="<?= APP_URL ?>/contact" class="btn btn-outline-light px-4">Contact Us</a>
    </div>
  </div>
</section>

<style>
.page-header { background:linear-gradient(135deg,#1a3c5e 0%,#2d6a9f 100%);padding:60px 0;color:#fff; }
.page-header .breadcrumb-item a { color:rgba(255,255,255,0.75); }
.page-header .breadcrumb-item.active { color:#fff; }
.page-header .breadcrumb-item+.breadcrumb-item::before { color:rgba(255,255,255,0.5); }
</style>
