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

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

<section class="section vision-intro-section">
  <div class="container vision-intro">
    <p class="vision-lead-text" data-scroll-reveal>
      <?= $t('vision.subtitle') ?>
    </p>
  </div>
</section>

<section class="section vision-pillars-section">
  <div class="container">
    <div class="vision-pillars">

      <?php
      $pillars = [
        [
          'num'   => '01',
          'key'   => 'v1',
          'icon'  => '<path d="M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z"/>',
          'color' => '#1a6b8a',
        ],
        [
          'num'   => '02',
          'key'   => 'v2',
          'icon'  => '<circle cx="12" cy="12" r="10"/><polygon points="10 8 16 12 10 16 10 8"/>',
          'color' => '#8b2fc9',
        ],
        [
          'num'   => '03',
          'key'   => 'v3',
          'icon'  => '<path d="M22 16.92v3a2 2 0 01-2.18 2A19.79 19.79 0 012.1 5.17 2 2 0 014.11 3h3a2 2 0 012 1.72 13 13 0 00.7 2.81 2 2 0 01-.45 2.11L8.09 10.91a16 16 0 006 6z"/>',
          'color' => '#2e7d4f',
        ],
        [
          'num'   => '04',
          'key'   => 'v4',
          'icon'  => '<path d="M2 20h20M4 20V8l4-4 4 4v12M14 20v-8l3-3 3 3v8"/><rect x="8" y="12" width="2" height="3"/><rect x="12" y="12" width="2" height="3"/>',
          'color' => '#FFCE00',
        ],
      ];
      foreach ($pillars as $i => $p):
      ?>
      <div class="vision-pillar" style="--pillar-color:<?= $p['color'] ?>" data-scroll-reveal>
        <div class="pillar-num"><?= $p['num'] ?></div>
        <div class="pillar-icon" aria-hidden="true">
          <svg viewBox="0 0 24 24" width="32" height="32" fill="none" stroke="currentColor" stroke-width="1.5">
            <?= $p['icon'] ?>
          </svg>
        </div>
        <h3 class="pillar-title"><?= $t("vision.{$p['key']}_title") ?></h3>
        <p class="pillar-text"><?= $t("vision.{$p['key']}_text") ?></p>
        <div class="pillar-bar" aria-hidden="true"></div>
      </div>
      <?php endforeach; ?>
    </div>
  </div>
</section>

<section class="section vision-ambition-section">
  <div class="container">
    <div class="ambition-block" data-scroll-reveal>
      <div class="ambition-icon" aria-hidden="true">◈</div>
      <blockquote class="ambition-quote">
        <p><?= $t('vision.ambition') ?></p>
      </blockquote>
    </div>
  </div>
</section>

<section class="cta-section section">
  <div class="container cta-inner">
    <div class="cta-content">
      <h2 class="cta-title">
        <?= $l === 'fr' ? 'Rejoignez notre aventure africaine' : 'Join our African adventure' ?>
      </h2>
      <p class="cta-subtitle">
        <?= $l === 'fr'
          ? 'Découvrez nos pôles d\'activité et nos entreprises membre.'
          : 'Discover our business divisions and member companies.' ?>
      </p>
    </div>
    <a href="<?= $l === 'fr' ? '/fr/activites' : '/en/activities' ?>" class="btn btn-primary btn-large">
      <?= $t('nav.activities') ?>
    </a>
  </div>
</section>

<style>
.vision-hero {
  background: linear-gradient(135deg, var(--c-dark-2) 0%, var(--c-black) 60%),
              radial-gradient(ellipse at 80% 50%, rgba(201,168,76,.06) 0%, transparent 60%);
}
.vision-intro-section { background: var(--c-dark); padding-block: 5rem; }
.vision-intro { max-width: 780px; margin-inline: auto; text-align: center; }
.vision-lead-text {
  font-family: var(--font-display); font-size: clamp(1.3rem, 2.5vw, 1.8rem);
  font-weight: 400; font-style: italic; line-height: 1.6; color: var(--c-grey-4);
}

.vision-pillars-section { background: var(--c-black); }
.vision-pillars {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 2px; background: var(--c-dark-3);
}
.vision-pillar {
  background: var(--c-dark-2); padding: 3.5rem 2.5rem;
  position: relative; overflow: hidden;
  transition: background .3s;
}
.vision-pillar:hover { background: var(--c-dark-3); }
.pillar-num {
  font-family: var(--font-display); font-size: 5rem; font-weight: 700;
  color: rgba(255,255,255,.03); line-height: 1;
  position: absolute; top: 1.5rem; right: 2rem; pointer-events: none;
  user-select: none;
}
.pillar-icon {
  width: 64px; height: 64px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.06);
  color: var(--pillar-color); margin-bottom: 1.5rem;
}
.pillar-title {
  font-family: var(--font-cond); font-size: 1.2rem;
  font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--c-white); margin-bottom: .75rem;
}
.pillar-text { font-size: .92rem; color: var(--c-grey-4); line-height: 1.7; max-width: 380px; }
.pillar-bar {
  position: absolute; bottom: 0; left: 0;
  height: 3px; width: 0; background: var(--pillar-color);
  transition: width .5s var(--ease-out);
}
.vision-pillar:hover .pillar-bar { width: 100%; }

@media(max-width:768px){ .vision-pillars{grid-template-columns:1fr;} }

.vision-ambition-section { background: var(--c-dark); }
.ambition-block {
  max-width: 800px; margin-inline: auto; text-align: center;
  padding: 4rem 3rem; border: 1px solid rgba(201,168,76,.15);
  position: relative;
}
.ambition-icon {
  font-size: 2rem; color: var(--c-gold); margin-bottom: 2rem; display: block;
}
.ambition-quote p {
  font-family: var(--font-display); font-size: clamp(1.2rem, 2.5vw, 1.7rem);
  font-style: italic; line-height: 1.6; color: var(--c-white);
}
</style>