<?php
$l = $lang ?? 'fr';
$newsBase = $l === 'fr' ? '/fr/actualites' : '/en/news';
?>

<section class="article-hero">
  <div class="container">
    <nav class="sub-breadcrumb" aria-label="Fil d'Ariane">
      <a href="<?= $l === 'fr' ? '/fr/actualites' : '/en/news' ?>"><?= $t('nav.news') ?></a>
      <span>›</span>
      <span aria-current="page"><?= htmlspecialchars(mb_substr($article['title'], 0, 40)) ?>…</span>
    </nav>

    <?php if ($article['subsidiary_name']): ?>
    <span class="news-tag" style="margin-bottom:1rem;display:inline-block"><?= htmlspecialchars($article['subsidiary_name']) ?></span>
    <?php endif; ?>

    <h1 class="article-title"><?= htmlspecialchars($article['title']) ?></h1>

    <?php if ($article['excerpt']): ?>
    <p class="article-lead"><?= htmlspecialchars($article['excerpt']) ?></p>
    <?php endif; ?>

    <div class="article-meta">
      <?php if ($article['published_at']): ?>
      <time datetime="<?= $article['published_at'] ?>">
        <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><rect x="3" y="4" width="18" height="18" rx="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>
        <?= date($l === 'fr' ? 'd/m/Y' : 'Y-m-d', strtotime($article['published_at'])) ?>
      </time>
      <?php endif; ?>
    </div>
  </div>
</section>

<?php if ($article['cover_image']): ?>
<div class="article-cover">
  <img src="<?= htmlspecialchars($article['cover_image']) ?>"
       alt="<?= htmlspecialchars($article['title']) ?>">
</div>
<?php endif; ?>

<section class="section article-body-section">
  <div class="container article-layout">
    <article class="article-content" data-scroll-reveal>
      <?= $article['content'] ?>
    </article>

    <aside class="article-sidebar">
      <div class="aside-card">
        <h3 class="aside-title"><?= $l === 'fr' ? 'Partager' : 'Share' ?></h3>
        <div class="share-btns">
          <a href="https://www.linkedin.com/sharing/share-offsite/?url=<?= urlencode('https://www.quaadra.com' . $_SERVER['REQUEST_URI']) ?>"
             target="_blank" rel="noopener" class="share-btn share-linkedin" aria-label="Partager sur LinkedIn">
            <svg viewBox="0 0 24 24" width="18" height="18" fill="currentColor"><path d="M16 8a6 6 0 016 6v7h-4v-7a2 2 0 00-2-2 2 2 0 00-2 2v7h-4v-7a6 6 0 016-6zM2 9h4v12H2z"/><circle cx="4" cy="4" r="2"/></svg>
            LinkedIn
          </a>
          <a href="https://twitter.com/intent/tweet?url=<?= urlencode('https://www.quaadra.com' . $_SERVER['REQUEST_URI']) ?>&text=<?= urlencode($article['title']) ?>"
             target="_blank" rel="noopener" class="share-btn share-twitter" aria-label="Partager sur Twitter">
            <svg viewBox="0 0 24 24" width="18" height="18" fill="currentColor"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/></svg>
            Twitter / X
          </a>
          <a href="https://wa.me/?text=<?= urlencode($article['title'] . ' — https://www.quaadra.com' . $_SERVER['REQUEST_URI']) ?>"
             target="_blank" rel="noopener" class="share-btn share-whatsapp" aria-label="Partager sur WhatsApp">
            <svg viewBox="0 0 24 24" width="18" height="18" fill="currentColor"><path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413z"/></svg>
            WhatsApp
          </a>
        </div>
      </div>

      <a href="<?= $l === 'fr' ? '/fr/actualites' : '/en/news' ?>" class="back-btn">
        <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2"><path d="M19 12H5M12 19l-7-7 7-7"/></svg>
        <?= $l === 'fr' ? 'Toutes les actualités' : 'All news' ?>
      </a>
    </aside>
  </div>
</section>

<style>
.article-hero {
  padding-top: calc(var(--header-h) + 4rem);
  padding-bottom: 3rem;
  background: linear-gradient(to bottom, var(--c-dark-2), var(--c-black));
  border-bottom: 1px solid rgba(201,168,76,.08);
}
.article-title {
  font-family: var(--font-display); font-size: clamp(2rem, 5vw, 4rem);
  font-weight: 700; line-height: 1.1; color: var(--c-white);
  margin: .75rem 0 1.25rem;
}
.article-lead {
  font-size: 1.1rem; color: var(--c-grey-4); max-width: 700px; line-height: 1.7;
}
.article-meta {
  display: flex; align-items: center; gap: 1.25rem; margin-top: 1.25rem;
  font-family: var(--font-cond); font-size: .78rem;
  letter-spacing: .1em; text-transform: uppercase; color: var(--c-grey-2);
}
.article-meta time { display: flex; align-items: center; gap: .4rem; }
.article-cover { max-height: 500px; overflow: hidden; background: var(--c-dark-3); }
.article-cover img { width: 100%; height: 100%; object-fit: cover; }

.article-body-section { background: var(--c-black); }
.article-layout { display: grid; grid-template-columns: 1fr 280px; gap: 4rem; align-items: start; }
@media(max-width:900px){ .article-layout{grid-template-columns:1fr;} }

.article-content {
  color: var(--c-grey-4); line-height: 1.9; font-size: 1.02rem;
}
.article-content h2, .article-content h3 {
  font-family: var(--font-display); color: var(--c-white); margin: 2.5rem 0 1rem;
}
.article-content h2 { font-size: 1.8rem; }
.article-content h3 { font-size: 1.3rem; }
.article-content p { margin-bottom: 1.25rem; }
.article-content a { color: var(--c-gold); }
.article-content ul, .article-content ol { margin: 1rem 0 1.25rem 1.5rem; }
.article-content li { margin-bottom: .5rem; }
.article-content blockquote {
  border-left: 3px solid var(--c-gold); padding-left: 1.5rem; margin: 2rem 0;
  font-style: italic; color: var(--c-grey-3);
}
.article-content img { max-width: 100%; height: auto; margin: 1.5rem 0; }

.article-sidebar { position: sticky; top: calc(var(--header-h) + 2rem); }
.share-btns { display: flex; flex-direction: column; gap: .5rem; margin-top: .25rem; }
.share-btn {
  display: flex; align-items: center; gap: .6rem;
  padding: .65rem 1rem; border: 1px solid var(--c-dark-3);
  font-size: .82rem; font-family: var(--font-cond); font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase; color: var(--c-grey-3);
  transition: all .2s;
}
.share-linkedin:hover { border-color: #0077b5; color: #0077b5; }
.share-twitter:hover  { border-color: #1da1f2; color: #1da1f2; }
.share-whatsapp:hover { border-color: #25d366; color: #25d366; }

.back-btn {
  display: flex; align-items: center; gap: .5rem; margin-top: 1.5rem;
  font-family: var(--font-cond); font-size: .78rem;
  font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--c-grey-3); transition: color .2s;
}
.back-btn:hover { color: var(--c-gold); }
</style>