<?php
$l = $lang ?? 'fr';
$actBase = $l === 'fr' ? '/fr/activites' : '/en/activities';

$poleColors = [
  'communication' => '#FFCE00',
  'medias'        => '#1A6B8A',
  'telecoms'      => '#2E7D4F',
  'divertissement'=> '#8B2FC9',
  'industrie'     => '#C94B2F',
];
$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 2 19.79 19.79 0 01-17.9-17.9A2 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'=> '<circle cx="12" cy="12" r="10"/><polygon points="10 8 16 12 10 16 10 8"/>',
  'industrie'     => '<path d="M2 20h20M4 20V8l4-4 4 4v12M14 20v-8l3-3 3 3v8"/><rect x="8" y="12" width="2" height="3"/>',
];
?>

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

<nav class="poles-tabs-nav" aria-label="Pôles d'activités" id="poles-tabs">
  <div class="container poles-tabs-inner">
    <?php foreach (array_keys($grouped) as $pole): ?>
    <a href="#pole-<?= $pole ?>" class="poles-tab" style="--tab-color:<?= $poleColors[$pole] ?? '#888' ?>">
      <?= $t("poles.{$pole}") ?>
    </a>
    <?php endforeach; ?>
  </div>
</nav>

<?php foreach ($grouped as $pole => $subs):
  $color = $poleColors[$pole] ?? '#888';
  $icon  = $poleIcons[$pole] ?? '<circle cx="12" cy="12" r="10"/>';
?>
<section class="section pole-section" id="pole-<?= $pole ?>" style="--pole-color:<?= $color ?>">
  <div class="container">

    <div class="pole-section-header" data-scroll-reveal>
      <div class="pole-section-icon">
        <svg viewBox="0 0 24 24" width="36" height="36" fill="none" stroke="currentColor" stroke-width="1.5">
          <?= $icon ?>
        </svg>
      </div>
      <div>
        <span class="section-label" style="color:<?= $color ?>"><?= $t('pole_label') ?></span>
        <h2 class="section-title"><?= $t("poles.{$pole}") ?></h2>
      </div>
      <a href="<?= $actBase ?>/<?= $pole ?>" class="pole-see-all">
        <?= $l === 'fr' ? 'Voir tout ce pôle' : 'See full division' ?> →
      </a>
    </div>

    <div class="subs-grid">
      <?php foreach ($subs as $sub): ?>
<article class="sub-card" data-scroll-reveal>
    <div class="sub-card-bar" style="background:<?= $color ?>"></div>
    
    <div class="sub-card-img">
        <img src="/assets/images/activites/<?= htmlspecialchars($sub['slug']) ?>.svg" 
             alt="<?= htmlspecialchars($sub['name']) ?>"
             onerror="this.style.display='none'">
    </div>

    <div class="sub-card-body">
        <h3 class="sub-card-name"><?= htmlspecialchars($sub['name']) ?></h3>
        <p class="sub-card-tagline"><?= htmlspecialchars($sub['tagline'] ?? '') ?></p>
        <p class="sub-card-desc">
            <?= htmlspecialchars(mb_substr($sub['description'] ?? '', 0, 150)) ?>…
        </p>
        <div class="sub-card-footer">
            <a href="<?= $actBase ?>/<?= $pole ?>/<?= htmlspecialchars($sub['slug']) ?>" class="sub-card-link">
                <?= $t('discover') ?>
                <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
            </a>
            <?php if (!empty($sub['website_url'])): ?>
            <a href="<?= htmlspecialchars($sub['website_url']) ?>" target="_blank" rel="noopener"
               class="sub-card-ext" aria-label="Site de <?= htmlspecialchars($sub['name']) ?>">
               <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 13v6a2 2 0 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2h6"/><polyline points="15 3 21 3 21 9"/><line x1="10" y1="14" x2="21" y2="3"/></svg>
               <?= $t('visit_site') ?>
            </a>
            <?php endif; ?>
        </div>
    </div>
</article>
      <?php endforeach; ?>
    </div>

  </div>
</section>
<?php endforeach; ?>

<style>
.poles-tabs-nav {
  background: var(--c-dark-2); border-bottom: 1px solid var(--c-dark-3);
  position: sticky; top: var(--header-h); z-index: 50;
  overflow-x: auto; scrollbar-width: none;
}
.poles-tabs-nav::-webkit-scrollbar { display: none; }
.poles-tabs-inner {
  display: flex; white-space: nowrap;
}
.poles-tab {
  padding: 1rem 1.5rem;
  font-family: var(--font-cond); font-size: .8rem;
  font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--c-grey-3); border-bottom: 2px solid transparent;
  transition: all .25s; flex-shrink: 0;
}
.poles-tab:hover { color: var(--tab-color); border-bottom-color: var(--tab-color); }

.pole-section { border-bottom: 1px solid rgba(255,255,255,.04); }
.pole-section:nth-child(odd) { background: var(--c-dark); }
.pole-section-header {
  display: flex; align-items: flex-start; gap: 1.5rem;
  margin-bottom: 3rem; flex-wrap: wrap;
}
.pole-section-icon {
  width: 72px; height: 72px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--pole-color); color: var(--pole-color);
  background: rgba(255,255,255,.02);
}
.pole-section-header > div:nth-child(2) { flex: 1; }
.pole-section-header .section-title { margin-bottom: 0; }
.pole-see-all {
  font-family: var(--font-cond); font-size: .8rem;
  font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--pole-color); border: 1px solid var(--pole-color);
  padding: .6rem 1.25rem; align-self: flex-end; margin-left: auto;
  transition: all .2s; white-space: nowrap;
}
.pole-see-all:hover { background: var(--pole-color); color: var(--c-black); }

.subs-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.5rem;
}
.sub-card {
  background: var(--c-dark-2); border: 1px solid var(--c-dark-3);
  position: relative; overflow: hidden;
  transition: border-color .3s, transform .3s;
}
.sub-card:hover { border-color: var(--pole-color); transform: translateY(-4px); }
.sub-card-bar { height: 3px; width: 100%; }
.sub-card-body { padding: 1.75rem; }
.sub-card-name {
  font-family: var(--font-display); font-size: 1.5rem;
  font-weight: 700; color: var(--c-white); margin-bottom: .25rem;
}
.sub-card-tagline {
  font-family: var(--font-cond); font-size: .75rem;
  letter-spacing: .12em; text-transform: uppercase; color: var(--pole-color);
  margin-bottom: 1rem;
}
.sub-card-desc {
  font-size: .88rem; color: var(--c-grey-3); line-height: 1.7; margin-bottom: 1.5rem;
}
.sub-card-footer { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; }
.sub-card-link {
  display: inline-flex; align-items: center; gap: .4rem;
  font-family: var(--font-cond); font-size: .78rem;
  font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--pole-color); transition: gap .2s;
}
.sub-card-link:hover { gap: .7rem; }
.sub-card-ext {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .78rem; color: var(--c-grey-2); transition: color .2s;
  font-family: var(--font-cond); text-transform: uppercase; letter-spacing: .08em;
}
.sub-card-ext:hover { color: var(--c-grey-4); }
</style>