<?php
require_once __DIR__ . '/includes/functions.php';
require_once __DIR__ . '/includes/seo.php';

$seo = [
    'title' => 'About Us | ' . SITE_NAME,
    'description' => 'Kigali Yacu Properties is Rwanda\'s trusted luxury real estate marketplace, connecting buyers, sellers and investors with verified properties across Kigali.',
    'path' => '/about',
];
$agents = get_agents();
$aboutImage = brand_asset('hero-city-day') ?: 'assets/images/about/team-meeting.jpg';
include __DIR__ . '/includes/header.php';
?>
<section class="section-pad-sm">
  <div class="container">
    <?= breadcrumb_html([['name' => 'About', 'url' => '/about']]) ?>
    <div class="grid grid-2" style="align-items:center;">
      <div class="reveal">
        <div class="eyebrow">Our Story</div>
        <h1>Built for Rwanda's Real Estate Future</h1>
        <p class="lede"><?= e(site_content('about.story_paragraph1', '')) ?></p>
        <p><?= e(site_content('about.story_paragraph2', '')) ?></p>
      </div>
      <div class="reveal media-frame rounded-lg aspect-4-3">
        <img src="/<?= e($aboutImage) ?>" alt="Kigali skyline representing Kigali Yacu Properties' local footprint" loading="lazy" width="600" height="450">
      </div>
    </div>
  </div>
</section>

<section class="section-pad-sm" style="background:var(--color-cream);">
  <div class="container">
    <div class="stat-strip">
      <?php for ($i = 1; $i <= 4; $i++): ?>
        <div class="stat-item reveal" data-delay="<?= $i - 1 ?>"><div class="num" data-counter="<?= e(site_content("about.stat{$i}_number", '0')) ?>" data-suffix="<?= e(site_content("about.stat{$i}_suffix", '')) ?>">0</div><div class="label"><?= e(site_content("about.stat{$i}_label", '')) ?></div></div>
      <?php endfor; ?>
    </div>
  </div>
</section>

<section class="section-pad">
  <div class="container">
    <div class="grid grid-3">
      <?php foreach (content_blocks('about', 'values') as $i => $val): ?>
        <div class="card reveal" data-delay="<?= $i ?>" style="padding:var(--space-7);">
          <span class="icon-wrap" style="width:56px;height:56px;border-radius:999px;background:var(--color-cream);display:flex;align-items:center;justify-content:center;color:var(--color-accent-dark);margin-bottom:var(--space-5);"><?= icon($val['icon'], 26) ?></span>
          <h3><?= e($val['title']) ?></h3>
          <p class="text-muted"><?= e($val['description']) ?></p>
        </div>
      <?php endforeach; ?>
    </div>
  </div>
</section>

<section class="section-pad-sm" style="background:var(--color-cream);">
  <div class="container">
    <div class="section-head center">
      <div class="eyebrow" style="justify-content:center;"><?= e(site_content('about.team_eyebrow', 'Our Team')) ?></div>
      <h2><?= e(site_content('about.team_heading', 'Meet Your Advisors')) ?></h2>
    </div>
    <div class="grid grid-4">
      <?php foreach ($agents as $i => $a): ?>
        <div class="agent-card reveal" data-delay="<?= $i + 1 ?>">
          <?= avatar_html($a['name'], 'lg', $a['photo']) ?>
          <h3 style="font-size:var(--fs-md);"><?= e($a['name']) ?></h3>
          <div class="role"><?= e($a['title']) ?></div>
          <p class="text-muted text-sm"><?= e(truncate($a['bio'], 110)) ?></p>
          <div class="contact-row">
            <a href="<?= e(whatsapp_link('Hi ' . explode(' ', $a['name'])[0] . ', I would like to get in touch.')) ?>" class="btn btn-whatsapp btn-sm" target="_blank" rel="noopener"><?= icon('whatsapp', 14) ?></a>
            <a href="<?= e(tel_link()) ?>" class="btn btn-outline btn-sm"><?= icon('phone', 14) ?></a>
          </div>
        </div>
      <?php endforeach; ?>
    </div>
  </div>
</section>

<section class="section-pad-sm">
  <div class="container">
    <div class="cta-band">
      <h2>Ready to Work With Us?</h2>
      <p style="color:var(--color-fog);max-width:52ch;margin-inline:auto;">Whether you're buying, selling or investing, our team is one call or WhatsApp message away.</p>
      <div class="actions">
        <a href="/contact" class="btn btn-accent">Contact Us</a>
        <a href="/properties" class="btn btn-outline-light">Browse Properties</a>
      </div>
    </div>
  </div>
</section>
<?php include __DIR__ . '/includes/footer.php'; ?>
