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

$seo = [
    'title' => 'Our Services | ' . SITE_NAME,
    'description' => 'From buying, selling and Buy & Build to licensed property valuation — explore the full range of real estate services offered by Kigali Yacu Properties.',
    'path' => '/services',
];
include __DIR__ . '/includes/header.php';

$services = content_blocks('services', 'list');
?>
<section class="section-pad-sm">
  <div class="container">
    <?= breadcrumb_html([['name' => 'Services', 'url' => '/services']]) ?>
    <div class="section-head center">
      <div class="eyebrow" style="justify-content:center;"><?= e(t('services.eyebrow')) ?></div>
      <h1><?= e(t('services.h1')) ?></h1>
      <p><?= e(t('services.lede')) ?></p>
      <div class="hero-cta-row" style="justify-content:center;">
        <a href="/contact" class="btn btn-accent"><?= e(t('cta.talk_to_agent')) ?></a>
        <a href="/valuation" class="btn btn-outline"><?= e(t('cta.get_free_valuation')) ?></a>
        <a href="/new-development" class="btn btn-outline"><?= e(t('cta.explore_new_developments')) ?></a>
      </div>
    </div>
  </div>
</section>

<section class="section-pad-sm">
  <div class="container">
    <div class="grid grid-3">
      <?php foreach ($services as $i => $s): ?>
        <div class="card reveal" data-delay="<?= $i % 3 + 1 ?>" 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($s['icon'], 26) ?></span>
          <h3><?= e($s['title']) ?></h3>
          <p class="text-muted"><?= e($s['description']) ?></p>
          <a href="<?= e($s['link_url']) ?>" class="btn-ghost fw-semibold"><?= e($s['link_label'] ?: 'Learn more') ?> <?= icon('arrow-right', 14) ?></a>
        </div>
      <?php endforeach; ?>
    </div>
  </div>
</section>

<section class="section-pad-sm" style="background:var(--color-cream);">
  <div class="container">
    <div class="cta-band" style="background:var(--color-black);">
      <div class="eyebrow" style="justify-content:center;color:var(--color-accent-light);">Talk to an Advisor</div>
      <h2>Not Sure Which Service You Need?</h2>
      <p style="color:var(--color-fog);max-width:52ch;margin-inline:auto;">Tell us your goal and we'll point you to the right service and the right advisor.</p>
      <div class="actions">
        <a href="/contact" class="btn btn-accent">Contact Us</a>
        <a href="<?= e(whatsapp_link('Hi, I would like guidance on your services.')) ?>" class="btn btn-outline-light" target="_blank" rel="noopener">WhatsApp Us</a>
      </div>
    </div>
  </div>
</section>
<?php include __DIR__ . '/includes/footer.php'; ?>
