<?php
$l = $lang ?? 'fr';
$prefix = "/{$l}";
$actBase = $l === 'fr' ? '/fr/activites' : '/en/activities';
$about_images = $about_images_from_admin ?? [
  '/assets/images/about-1.jpeg',
  '/assets/images/about-2.jpeg',
  '/assets/images/about-3.jpeg'
];

$hero_images = $hero_images_from_admin ?? [
  '/assets/images/bg-hero-admin.jpeg'
];

$single_hero_image = is_array($hero_images) ? $hero_images[0] : $hero_images;

$poleIcons = [
  'communication' => '<path d="M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z"/>',
  'medias'         => '<path d="M1 6l11 6L1 18V6z"/><rect x="14" y="4" width="8" height="16" rx="1"/>',
  'telecoms'       => '<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 6l1.27-1.27a2 2 0 012.11-.45 13 13 0 002.81.7A2 2 0 0122 17z"/>',
  'divertissement'=> '<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 14.5v-9l6 4.5-6 4.5z"/>',
  'industrie'      => '<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"/>',
];
?>

<style>
.section {
  padding-top: 2.5rem !important;
  padding-bottom: 2.5rem !important;
}
.about-grid {
  margin-top: 1rem !important;
  margin-bottom: 1rem !important;
}

#groupe {
  margin-top: 60px !important;
}

.about-carousel-container {
  position: relative;
  width: 100%;
  height: 400px;
  overflow: hidden;
  border-radius: 8px;
}
.about-carousel-slide {
  display: flex;
  transition: transform 0.5s ease-in-out;
  height: 100%;
}
.about-carousel-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  flex-shrink: 0;
}

@media (min-width: 992px) {
  .poles-grid {
    display: grid !important;
    grid-template-columns: repeat(5, 1fr) !important;
    gap: 1rem !important;
    align-items: stretch !important;
    justify-content: center !important;
    width: 100% !important;
    margin-top: 1.5rem !important;
  }
}

.pole-card {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  padding: 1.5rem 1rem !important;
  margin: 0 !important;
  height: 100% !important;
}

.pole-card-header {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  margin-bottom: 1rem !important;
  width: 100% !important;
}

.pole-icon {
  margin: 0 auto 0.75rem auto !important;
  display: inline-flex !important;
  justify-content: center !important;
  align-items: center !important;
}

.pole-title {
  text-align: center !important;
  width: 100% !important;
  margin: 0 !important;
}

.poles-subs {
  padding: 0 !important;
  margin: 0 0 auto 0 !important;
  list-style: none !important;
  width: 100% !important;
}

.pole-sub-item {
  text-align: center !important;
  margin-bottom: 0.75rem !important;
}

.pole-sub-link {
  display: inline-flex !important;
  justify-content: center !important;
  align-items: center !important;
  width: 100% !important;
}

.pole-sub-link .sub-arrow {
  display: none !important;
}

.sub-tagline {
  text-align: center !important;
  margin: 0.25rem 0 0 0 !important;
}

.pole-cta {
  margin-top: 1rem !important;
  align-self: center !important;
}

#hero {
  margin-top: 0 !important;
  display: flex !important;
  align-items: center !important;
}

.hero-bg img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

.hero-eyebrow {
  display: inline-flex !important;
  justify-content: center !important;
  align-items: center !important;
  width: 100% !important;
  margin-bottom: 0.5rem !important;
}

.hero-title {
  text-align: center !important;
  width: 100% !important;
  color: #ffffff !important;
  font-weight: 800;
}

.hero-subtitle {
  text-align: center !important;
  max-width: 800px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  color: rgba(255, 255, 255, 0.9) !important;
}

.hero-stats {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  width: 100% !important;
  max-width: 1000px !important;
  margin: 3rem auto 0 auto !important;
  padding: 1.75rem 2rem !important;
  background: rgba(0, 0, 0, 0.75) !important;
  border-radius: 12px !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6) !important;
}

.cta-section {
  padding-top: 2rem !important;
  padding-bottom: 2rem !important;
  min-height: auto !important;
}
.cta-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1.5rem;
}

.gold-shine-text {
  position: relative;
  display: inline-block;
  background: linear-gradient(to right, currentColor 20%, #FFCE00 40%, #FFFFFF 50%, #FFCE00 60%, currentColor 80%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: goldSweep 4s linear infinite;
}
@keyframes goldSweep {
  0% { background-position: 200% center; }
  100% { background-position: 0% center; }
}
</style>

<section class="about-split section" id="groupe">
  <div class="container about-grid">
    <div class="about-visual">
      <div class="about-frame">
        <div class="frame-accent frame-accent-1" aria-hidden="true"></div>
        <div class="frame-accent frame-accent-2" aria-hidden="true"></div>
        
        <div class="about-carousel-container" id="about-group-carousel">
          <div class="about-carousel-slide">
            <?php foreach ($about_images as $image_url): ?>
              <img src="<?= htmlspecialchars($image_url) ?>" alt="QUAADRAA Group">
            <?php endforeach; ?>
          </div>
        </div>

        <div class="about-badge">
          <span class="badge-number">20+</span>
          <span class="badge-text"><?= $l === 'fr' ? 'ans en Afrique' : 'years in Africa' ?></span>
        </div>
      </div>
    </div>
    
    <div class="about-content" data-scroll-reveal>
      <span class="section-label"><?= $t('home.about_title') ?></span>
      <h2 class="section-title">
        <span class="gold-shine-text">
          <?= $l === 'fr' ? 'QUAADRAA, le groupe panafricain basé à Lomé.' : 'QUAADRAA, the pan-African group based in Lomé.' ?>
        </span>
      </h2>
      <p class="body-text"><?= $t('about.body') ?></p>
      <p class="body-text"><?= $t('about.body2') ?></p>
    </div>
  </div>
</section>

<section class="poles-section section" id="activites">
  <div class="container">
    <div class="section-header centered">
      <span class="section-label"><?= $t('home.activities_title') ?></span>
      <h2 class="section-title">
        <?= $l === 'fr' 
          ? "Des solutions innovantes au service de l'accélération de la croissance en Afrique." 
          : "Innovative solutions driving growth acceleration in Africa." ?>
      </h2>
    </div>

    <div class="poles-grid">
      <?php
      $orderedPoles = [
        'telecoms'       => ['title_fr' => 'Télécoms', 'title_en' => 'Telecoms', 'color' => '#2E7D4F'],
        'medias'         => ['title_fr' => 'Médias', 'title_en' => 'Medias', 'color' => '#1A6B8A'],
        'divertissement' => ['title_fr' => 'Divertissement', 'title_en' => 'Entertainment', 'color' => '#8B2FC9'],
        'industrie'      => ['title_fr' => 'Industrie et représentation', 'title_en' => 'Industry & Representation', 'color' => '#C94B2F'],
        'communication'  => ['title_fr' => 'Communication et événementiel', 'title_en' => 'Communication & Events', 'color' => '#FFCE00']
      ];

      foreach ($orderedPoles as $poleKey => $poleMeta):
        if (!isset($grouped[$poleKey])) continue;
        $subs = $grouped[$poleKey];
        $displayTitle = $l === 'fr' ? $poleMeta['title_fr'] : $poleMeta['title_en'];
        $actPole = $actBase . '/' . $poleKey;
      ?>
      <div class="pole-card" style="--pole-color: <?= $poleMeta['color'] ?>;">
        <div class="pole-card-header">
          <div class="pole-icon" aria-hidden="true">
            <svg viewBox="0 0 24 24" width="28" height="28" fill="none" stroke="currentColor" stroke-width="1.5">
              <?= $poleIcons[$poleKey] ?? '<circle cx="12" cy="12" r="10"/>' ?>
            </svg>
          </div>
          <h3 class="pole-title" style="font-size: 1.1rem; line-height: 1.3;"><?= htmlspecialchars($displayTitle) ?></h3>
        </div>
        <ul class="poles-subs" role="list">
          <?php foreach ($subs as $sub): ?>
          <li class="pole-sub-item">
            <a href="<?= $actPole ?>/<?= htmlspecialchars($sub['slug']) ?>" class="pole-sub-link">
              <?= htmlspecialchars($sub['name']) ?>
            </a>
            <p class="sub-tagline"><?= htmlspecialchars($sub['tagline'] ?? '') ?></p>
          </li>
          <?php endforeach; ?>
        </ul>
        <a href="<?= $actPole ?>" class="pole-cta"><?= $t('discover') ?></a>
      </div>
      <?php endforeach; ?>
    </div>
  </div>
</section>

<?php require dirname(__DIR__) . '/components/subsidiaries-strip.php'; ?>

<section class="hero" id="hero" aria-label="Introduction QUAADRAA" style="position: relative !important; overflow: hidden !important; min-height: 85vh !important; background-color: #000000 !important; padding-top: 5rem !important; padding-bottom: 5rem !important;">
  
  <div class="hero-bg" style="position: absolute !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; z-index: 1 !important;">
    <img src="<?= htmlspecialchars($single_hero_image) ?>" alt="Background" style="width: 100% !important; height: 100% !important; object-fit: cover !important;">
    
    <div style="position: absolute !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; background: linear-gradient(to bottom, #000000 0%, rgba(0, 0, 0, 0.45) 20%, rgba(0, 0, 0, 0.55) 50%, #000000 68%, #000000 100%) !important; z-index: 2 !important; pointer-events: none !important;"></div>
  </div>

  <div class="hero-content container" style="position: relative !important; z-index: 3 !important; display: flex !important; flex-direction: column !important; align-items: center !important;">
   <div class="hero-eyebrow">
    <span class="eyebrow-text"><?= $t('home.eyebrow') ?></span>
   </div>
    <h1 class="hero-title">
      <span class="title-line" data-reveal><?= $t('home.hero_title') ?></span>
    </h1>
    <p class="hero-subtitle" data-reveal-delay="200">
      <?= $l === 'fr' 
        ? 'Groupe international regroupant innovation, communication et stimulation de la croissance en Afrique.' 
        : 'International group combining innovation, communication, and growth stimulation in Africa.' ?>
    </p>

    <div class="hero-stats" data-reveal-delay="600">
      <div class="stat-item">
        <span class="stat-number" data-count="20">20</span>
        <span class="stat-label"><?= $l === 'fr' ? 'ans en Afrique' : 'years in Africa' ?></span>
      </div>
      <div class="stat-divider" aria-hidden="true"></div>
      <div class="stat-item">
        <span class="stat-number" data-count="12">12</span>
        <span class="stat-label"><?= $l === 'fr' ? 'entreprises membres et partenaires' : 'member companies & partners' ?></span>
      </div>
      <div class="stat-divider" aria-hidden="true"></div>
      <div class="stat-item">
        <span class="stat-number" data-count="8">8</span>
        <span class="stat-label"><?= $l === 'fr' ? 'pays couverts' : 'countries covered' ?></span>
      </div>
      <div class="stat-divider" aria-hidden="true"></div>
      <div class="stat-item">
        <span class="stat-number" data-count="212">212</span>
        <span class="stat-label"><?= $l === 'fr' ? 'collaborateurs' : 'team members' ?></span>
      </div>
    </div>
  </div>
</section>

<?php if (!empty($featured)): ?>
<section class="news-banner section" id="actualites">
  <div class="container section-header">
    <span class="section-label"><?= $t('nav.news') ?></span>
    <h2 class="section-title"><?= $t('home.news_title') ?></h2>
    <p class="section-subtitle"><?= $t('home.news_subtitle') ?></p>
  </div>

  <div class="news-carousel-wrapper">
    <div class="news-carousel" id="news-carousel" role="list">
      <?php foreach ($featured as $i => $article): ?>
      <article class="news-card" role="listitem" data-index="<?= $i ?>">
        <div class="news-card-inner">
          <?php if ($article['cover_image']): ?>
          <div class="news-card-img">
            <img src="<?= htmlspecialchars($article['cover_image']) ?>" alt="<?= htmlspecialchars($article['title']) ?>" loading="lazy">
          </div>
          <?php else: ?>
          <div class="news-card-img news-card-placeholder">
            <span class="placeholder-icon">◈</span>
          </div>
          <?php endif; ?>

          <div class="news-card-body">
            <?php if ($article['subsidiary_name']): ?>
            <span class="news-tag"><?= htmlspecialchars($article['subsidiary_name']) ?></span>
            <?php endif; ?>
            <h3 class="news-card-title"><?= htmlspecialchars($article['title']) ?></h3>
            <p class="news-card-excerpt"><?= htmlspecialchars($article['excerpt']) ?></p>
            <a href="<?= $prefix . ($l === 'fr' ? '/actualites/' : '/news/') . htmlspecialchars($article['slug']) ?>" class="news-card-cta">
              <?= $t('read_more') ?>
              <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
                <path d="M5 12h14M12 5l7 7-7 7"/>
              </svg>
            </a>
          </div>
        </div>
      </article>
      <?php endforeach; ?>
    </div>

    <div class="carousel-controls" aria-label="Contrôles du carrousel">
      <button class="carousel-prev" aria-label="Article précédent">
        <svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="2"><path d="M19 12H5M12 19l-7-7 7-7"/></svg>
      </button>
      <div class="carousel-dots" role="tablist" aria-label="Actualités"></div>
      <button class="carousel-next" aria-label="Article suivant">
        <svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 12h14M12 5l7 7-7 7"/>
      </svg>
      </button>
    </div>
  </div>

  <div class="container section-footer">
    <a href="<?= $prefix . ($l === 'fr' ? '/actualites' : '/news') ?>" class="btn btn-outline">
      <?= $t('home.news_cta') ?>
    </a>
  </div>
</section>
<?php endif; ?>

<section class="cta-section section" id="cta-contact">
  <div class="container cta-inner">
    <div class="cta-content">
      <h2 class="cta-title" style="margin-bottom: 0.5rem;">
        <?= $l === 'fr' ? 'Travaillons ensemble' : 'Let\'s work together' ?>
      </h2>
      <p class="cta-subtitle" style="margin-bottom: 0;">
        <?= $l === 'fr'
          ? 'Vous avez un projet, un partenariat ou une question ? Notre équipe est à votre disposition.'
          : 'Have a project, partnership or question? Our team is at your disposal.' ?>
      </p>
    </div>
    <a href="<?= $prefix ?>/contact" class="btn btn-primary btn-large">
      <?= $t('nav.contact') ?>
    </a>
  </div>
</section>

<script>
document.addEventListener("DOMContentLoaded", function() {
  const aboutSlide = document.querySelector('#about-group-carousel .about-carousel-slide');
  if(aboutSlide && aboutSlide.children.length > 1) {
    let aboutIndex = 0;
    setInterval(() => {
      aboutIndex = (aboutIndex + 1) % aboutSlide.children.length;
      aboutSlide.style.transform = `translateX(-${aboutIndex * 100}%)`;
    }, 3500);
  }
});
</script>