<?php $l = $lang ?? 'fr'; $prefix = "/{$l}"; ?>

<section class="page-hero">
  <div class="container">
    <span class="section-label">QUAADRAA Group</span>
    <h1 class="page-hero-title"><?= $t('about.title') ?></h1>
    <p class="page-hero-sub"><?= $t('about.lead') ?></p>
  </div>
</section>

<section class="section kpi-section">
  <div class="container">
    <div class="kpi-grid">
      <div class="kpi-card" data-scroll-reveal>
        <span class="kpi-number" data-count="20">20</span>
        <span class="kpi-suffix">+</span>
        <span class="kpi-label"><?= $t('about.years') ?></span>
      </div>
      <div class="kpi-card" data-scroll-reveal>
        <span class="kpi-number" data-count="8">8</span>
        <span class="kpi-label"><?= $t('about.companies') ?></span>
      </div>
      <div class="kpi-card" data-scroll-reveal>
        <span class="kpi-number" data-count="5">5</span>
        <span class="kpi-label"><?= $t('about.countries') ?></span>
      </div>
      <div class="kpi-card" data-scroll-reveal>
        <span class="kpi-number" data-count="5">5</span>
        <span class="kpi-label"><?= $l === 'fr' ? 'Pôles d\'activités' : 'Business divisions' ?></span>
      </div>
    </div>
  </div>
</section>

<section class="section about-body-section">
  <div class="container about-body-grid">
    <div class="about-body-text" data-scroll-reveal>
      <span class="section-label"><?= $l === 'fr' ? 'Notre histoire' : 'Our story' ?></span>
      <h2 class="section-title">
        <?= $l === 'fr' ? 'Un groupe panafricain<br>bâti sur la durée' : 'A pan-African group<br>built for the long run' ?>
      </h2>
      <p class="body-text"><?= $t('about.body') ?></p>
      <p class="body-text"><?= $t('about.body2') ?></p>

      <ul class="about-points">
        <?php
        $points = $l === 'fr' ? [
          ['icon' => '◈', 'text' => 'Siège stratégique à Lomé, Togo'],
          ['icon' => '◈', 'text' => 'Bureau international à Dubai, EAU'],
          ['icon' => '◈', 'text' => 'Présence au Togo, Bénin, Niger, Guinée Conakry, Gabon'],
          ['icon' => '◈', 'text' => 'Secteurs : Médias, Télécoms, Communication, Divertissement, Industrie'],
        ] : [
          ['icon' => '◈', 'text' => 'Strategic headquarters in Lomé, Togo'],
          ['icon' => '◈', 'text' => 'International office in Dubai, UAE'],
          ['icon' => '◈', 'text' => 'Presence in Togo, Benin, Niger, Guinea Conakry, Gabon'],
          ['icon' => '◈', 'text' => 'Sectors: Media, Telecoms, Communication, Entertainment, Industry'],
        ];
        foreach ($points as $p): ?>
        <li class="about-point">
          <span class="point-icon" aria-hidden="true"><?= $p['icon'] ?></span>
          <span><?= $p['text'] ?></span>
        </li>
        <?php endforeach; ?>
      </ul>

      <a href="<?= $prefix ?>/vision" class="btn btn-primary" style="margin-top:1.5rem">
        <?= $t('nav.vision') ?>
      </a>
    </div>
    <div class="about-body-visual" data-scroll-reveal>
      <div class="about-visual-stack">
        <div class="visual-card visual-card-main">
          <div class="visual-card-inner">
            <img src="/assets/images/logo-quaadra.png" alt="QUAADRA Group" style="max-width:200px;margin:0 auto;filter:brightness(1.2)">
            <p style="text-align:center;margin-top:1.5rem;color:var(--c-grey-3);font-size:.9rem;">
              <?= $l === 'fr' ? 'Growth Accelerator depuis 2005' : 'Growth Accelerator since 2005' ?>
            </p>
          </div>
        </div>
        <div class="visual-card visual-card-accent">
          <blockquote class="about-quote">
            <p>"<?= $l === 'fr'
              ? 'Accélérer la croissance sur un continent plein d\'avenir.'
              : 'Accelerating growth on a continent full of potential.' ?>"</p>
            <cite>QUAADRA Group</cite>
          </blockquote>
        </div>
      </div>
    </div>

  </div>
</section>

<section class="section presence-section">
  <div class="presence-bg" aria-hidden="true"></div>
  <div class="container">
    <div class="section-header centered">
      <span class="section-label"><?= $t('home.presence_title') ?></span>
      <h2 class="section-title"><?= $t('home.presence_subtitle') ?></h2>
    </div>
    <div class="presence-flags" style="margin-top:3rem">
      <?php
      $countries = [
        ['name' => 'Togo',           'flag' => '🇹🇬', 'role' => $l === 'fr' ? 'Siège stratégique' : 'Strategic HQ'],
        ['name' => 'Bénin',          'flag' => '🇧🇯', 'role' => $l === 'fr' ? 'Opérations' : 'Operations'],
        ['name' => 'Niger',          'flag' => '🇳🇪', 'role' => $l === 'fr' ? 'Opérations' : 'Operations'],
        ['name' => 'Guinée Conakry', 'flag' => '🇬🇳', 'role' => $l === 'fr' ? 'Opérations' : 'Operations'],
        ['name' => 'Gabon',          'flag' => '🇬🇦', 'role' => $l === 'fr' ? 'Afrique Centrale' : 'Central Africa'],
        ['name' => 'Dubai',          'flag' => '🇦🇪', 'role' => $l === 'fr' ? 'Bureau International' : 'International Office'],
      ];
      foreach ($countries as $c): ?>
      <div class="country-card">
        <span class="country-flag"><?= $c['flag'] ?></span>
        <span class="country-name"><?= $c['name'] ?></span>
        <span class="country-role"><?= $c['role'] ?></span>
      </div>
      <?php endforeach; ?>
    </div>
  </div>
</section>

<style>
.kpi-section { background: var(--c-dark); border-bottom: 1px solid rgba(201,168,76,.08); }
.kpi-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 0; }
.kpi-card {
  padding: 3rem 2rem; text-align: center;
  border-right: 1px solid rgba(201,168,76,.1);
  position: relative;
}
.kpi-card:last-child { border-right: none; }
.kpi-number {
  display: inline-block;
  font-family: var(--font-display); font-size: 4.5rem; font-weight: 700;
  color: var(--c-gold); line-height: 1;
}
.kpi-suffix {
  font-family: var(--font-display); font-size: 2.5rem;
  color: var(--c-gold); vertical-align: super;
}
.kpi-label {
  display: block; margin-top: .75rem;
  font-family: var(--font-cond); font-size: .78rem;
  letter-spacing: .15em; text-transform: uppercase; color: var(--c-grey-3);
}
@media(max-width:768px){ .kpi-grid{grid-template-columns:1fr 1fr;} .kpi-card{border-bottom:1px solid rgba(201,168,76,.1);} }

.about-body-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 5rem; align-items: start; }
@media(max-width:900px){ .about-body-grid{grid-template-columns:1fr;} }
.about-points { display: flex; flex-direction: column; gap: .75rem; margin-top: 1.5rem; }
.about-point {
  display: flex; align-items: flex-start; gap: .75rem;
  font-size: .92rem; color: var(--c-grey-4);
}
.point-icon { color: var(--c-gold); font-size: .75rem; margin-top: .3rem; flex-shrink: 0; }
.about-visual-stack { display: flex; flex-direction: column; gap: 1.5rem; }
.visual-card { border: 1px solid var(--c-dark-3); }
.visual-card-main { background: var(--c-dark-2); padding: 3rem 2rem; }
.visual-card-accent { background: var(--c-gold); padding: 2rem; }
.about-quote p {
  font-family: var(--font-display); font-size: 1.4rem; font-style: italic;
  color: var(--c-black); line-height: 1.4; margin-bottom: .75rem;
}
.about-quote cite {
  font-family: var(--font-cond); font-size: .75rem;
  letter-spacing: .15em; text-transform: uppercase; color: rgba(10,10,10,.6);
}
</style>