<?php
/**
 * DiscordBooster — Universal Footer Include
 * ─────────────────────────────────────────
 * Include at the very bottom of every page, after all content:
 *   <?php include 'footer.php'; ?>
 *
 * Optional variables (set before include):
 *   $footer_disclaimer = "Not affiliated with Acme Corp.";
 *   // Defaults to generic platform disclaimer
 */

$footer_disclaimer = $footer_disclaimer
  ?? 'Not affiliated with Instagram, TikTok, YouTube, Twitter, Facebook, Reddit, Spotify, Telegram, Twitch, Threads, Discord, or any social platform. All brand names and logos are trademarks of their respective owners.';

$current_year = date('Y');
?>

<!-- ══════════════════════════════════════
     GLOBAL PAGE STYLES
     (placed here so they load after nav
      styles but before page-specific CSS)
══════════════════════════════════════ -->
<style>
  /* ── Utility classes used across pages ─────────────────────────────────── */
  .page-body    { max-width: 1240px; margin: 0 auto; padding: 0 5%; }
  .section      { padding: 80px 0; }
  .section-header { margin-bottom: 3.5rem; }
  .section-header.centered { text-align: center; }
  .section-header.centered .section-sub { margin: 0 auto; }
  .section-label {
    display: inline-block;
    font-size: 0.72rem; font-weight: 700;
    letter-spacing: 2px; text-transform: uppercase;
    margin-bottom: 0.7rem;
  }
  .section-title { font-size: clamp(1.8rem, 3vw, 2.6rem); font-weight: 900; margin-bottom: 1rem; letter-spacing: -0.8px; }
  .section-sub   { color: var(--muted); max-width: 520px; font-size: 1.03rem; }

  /* ── Footer shell ───────────────────────────────────────────────────────── */
  #site-footer {
    background: var(--ink);
    color: rgba(255,255,255,0.55);
    padding: 5rem 5% 2rem;
  }
  .footer-inner { max-width: 1240px; margin: 0 auto; }

  /* Top grid */
  .footer-top {
    display: grid;
    grid-template-columns: 2fr repeat(5, 1fr);
    gap: 2.5rem;
    margin-bottom: 3.5rem;
  }

  /* Brand column */
  .footer-brand {}
  .footer-logo {
    font-family: 'Playfair Display', serif;
    font-weight: 900; font-size: 1.35rem;
    color: #fff; margin-bottom: 0.8rem;
    letter-spacing: -0.5px;
  }
  .footer-logo em { color: #ff4500; font-style: italic; }
  .footer-tagline { font-size: 0.88rem; line-height: 1.7; margin-bottom: 1.2rem; }

  /* Trust badges */
  .footer-badges { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.4rem; }
  .footer-badge {
    display: inline-flex; align-items: center; gap: 0.3rem;
    background: rgba(255,255,255,0.07);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 100px;
    padding: 0.22rem 0.7rem;
    font-size: 0.73rem; font-weight: 600;
    color: rgba(255,255,255,0.6);
  }

  /* Social icons row */
  .footer-socials { display: flex; gap: 0.6rem; }
  .footer-social-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; border-radius: 8px;
    background: rgba(255,255,255,0.07);
    border: 1px solid rgba(255,255,255,0.1);
    font-size: 0.9rem;
    transition: background 0.15s;
    text-decoration: none;
  }
  .footer-social-icon:hover { background: rgba(255,255,255,0.14); }

  /* Link columns */
  .footer-col h5 {
    font-size: 0.72rem; font-weight: 800;
    text-transform: uppercase; letter-spacing: 1.8px;
    color: rgba(255,255,255,0.3);
    margin-bottom: 0.9rem;
    font-family: 'Outfit', sans-serif;
  }
  .footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 0.4rem; }
  .footer-col a {
    font-size: 0.84rem;
    color: rgba(255,255,255,0.5);
    transition: color 0.15s;
  }
  .footer-col a:hover { color: #fff; }
  .footer-col a.new::after {
    content: 'NEW';
    font-size: 0.58rem;
    font-weight: 800;
    background: #ff4500;
    color: #fff;
    border-radius: 3px;
    padding: 0.06rem 0.28rem;
    margin-left: 0.35rem;
    vertical-align: middle;
    letter-spacing: 0.3px;
  }

  /* Divider */
  .footer-divider {
    border: none;
    border-top: 1px solid rgba(255,255,255,0.08);
    margin-bottom: 2rem;
  }

  /* Platform grid (second row) */
  .footer-platforms { margin-bottom: 3rem; }
  .footer-platforms-title {
    font-size: 0.7rem; font-weight: 800;
    text-transform: uppercase; letter-spacing: 2px;
    color: rgba(255,255,255,0.25);
    margin-bottom: 0.8rem;
    font-family: 'Outfit', sans-serif;
  }
  .footer-platforms-grid {
    display: grid;
    grid-template-columns: repeat(11, 1fr);
    gap: 0.5rem;
  }
  .footer-platform-pill {
    display: flex; flex-direction: column; align-items: center;
    gap: 0.25rem;
    padding: 0.6rem 0.4rem;
    border-radius: 10px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.07);
    transition: background 0.15s;
    text-decoration: none;
  }
  .footer-platform-pill:hover { background: rgba(255,255,255,0.09); }
  .footer-platform-pill-icon { font-size: 1.1rem; }
  .footer-platform-pill-label {
    font-size: 0.62rem; font-weight: 600;
    color: rgba(255,255,255,0.4);
    text-align: center; letter-spacing: 0.2px;
  }

  /* Bottom bar */
  .footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1.5rem;
    flex-wrap: wrap;
  }
  .footer-copyright { font-size: 0.78rem; }
  .footer-disclaimer { font-size: 0.73rem; max-width: 640px; line-height: 1.6; color: rgba(255,255,255,0.3); }
  .footer-legal-links { display: flex; gap: 1rem; flex-wrap: wrap; }
  .footer-legal-links a { font-size: 0.75rem; color: rgba(255,255,255,0.4); transition: color 0.15s; }
  .footer-legal-links a:hover { color: #fff; }

  /* ── Responsive ─────────────────────────────────────────────────────────── */
  @media (max-width: 1100px) {
    .footer-top { grid-template-columns: 1fr 1fr 1fr; }
    .footer-platforms-grid { grid-template-columns: repeat(6, 1fr); }
  }
  @media (max-width: 768px) {
    .footer-top { grid-template-columns: 1fr 1fr; }
    .footer-platforms-grid { grid-template-columns: repeat(4, 1fr); }
    .footer-bottom { flex-direction: column; }
  }
  @media (max-width: 480px) {
    .footer-top { grid-template-columns: 1fr; }
    .footer-platforms-grid { grid-template-columns: repeat(3, 1fr); }
    #site-footer { padding: 3.5rem 5% 2rem; }
  }

  /* ── Global keyframes (used across pages) ─────────────────────────────── */
  @keyframes fadeIn {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  @keyframes fadeInFast {
    from { opacity: 0; }
    to   { opacity: 1; }
  }
</style>

<!-- ══════════════════════════════════════
     FOOTER
══════════════════════════════════════ -->
<footer id="site-footer" role="contentinfo">
  <div class="footer-inner">

    <!-- ── Top grid ── -->
    <div class="footer-top">

      <!-- Brand -->
      <div class="footer-brand">
        <div class="footer-logo">Discord<em>Booster</em></div>
        <p class="footer-tagline">The world's most trusted multi-platform social growth partner since 2019. Real engagement. Real results. 120,000+ happy customers across 90+ countries.</p>
        <div class="footer-badges">
          <span class="footer-badge">✓ Since 2019</span>
          <span class="footer-badge">✓ 120K+ orders</span>
          <span class="footer-badge">✓ 4.9★ rating</span>
          <span class="footer-badge">✓ 30-day refill</span>
        </div>
        <div class="footer-socials" aria-label="DiscordBooster social media">
          <a href="https://twitter.com/discordbooster" class="footer-social-icon" aria-label="Twitter / X" title="Twitter / X">𝕏</a>
          <a href="https://instagram.com/discordbooster" class="footer-social-icon" aria-label="Instagram" title="Instagram">📸</a>
          <a href="https://tiktok.com/@discordbooster" class="footer-social-icon" aria-label="TikTok" title="TikTok">🎵</a>
          <a href="https://youtube.com/@discordbooster" class="footer-social-icon" aria-label="YouTube" title="YouTube">▶</a>
          <a href="https://t.me/discordbooster" class="footer-social-icon" aria-label="Telegram" title="Telegram">✈</a>
        </div>
      </div>

      <!-- Instagram -->
      <div class="footer-col">
        <h5>Instagram</h5>
        <ul>
          <li><a href="buy-instagram-followers">Followers</a></li>
          <li><a href="buy-instagram-likes">Likes</a></li>
          <li><a href="buy-instagram-views">Video Views</a></li>
          <li><a href="buy-instagram-reels-views">Reels Views</a></li>
        </ul>
      </div>

      <!-- TikTok -->
      <div class="footer-col">
        <h5>TikTok</h5>
        <ul>
          <li><a href="buy-tiktok-followers">Followers</a></li>
          <li><a href="buy-tiktok-likes">Likes</a></li>
          <li><a href="buy-tiktok-views">Views</a></li>
          <li><a href="buy-tiktok-comments">Comments</a></li>
        </ul>
      </div>

      <!-- YouTube -->
      <div class="footer-col">
        <h5>YouTube</h5>
        <ul>
          <li><a href="buy-youtube-subscribers">Subscribers</a></li>
          <li><a href="buy-youtube-views">Views</a></li>
          <li><a href="buy-youtube-watch-hours">Watch Hours</a></li>
          <li><a href="buy-youtube-likes">Likes</a></li>
        </ul>
      </div>

      <!-- Twitter / Facebook -->
      <div class="footer-col">
        <h5>Twitter / X</h5>
        <ul>
          <li><a href="buy-twitter-followers">Followers</a></li>
          <li><a href="buy-twitter-likes">Likes</a></li>
          <li><a href="buy-twitter-retweets">Retweets</a></li>
          <li><a href="buy-twitter-impressions">Impressions</a></li>
          <li><a href="buy-twitter-bookmarks">Bookmarks</a></li>
          <li><a href="buy-twitter-poll-votes">Poll Votes</a></li>
        </ul>
      </div>

      <!-- Company -->
      <div class="footer-col">
        <h5>Company</h5>
        <ul>
          <li><a href="https://discordbooster.com/blog">Blog</a></li>
          <li><a href="/support">Support</a></li>
          <li><a href="/faq">FAQ</a></li>
          <li><a href="/affiliates" class="new">Affiliates</a></li>
          <li><a href="/refund-policy">Refund Policy</a></li>
          <li><a href="/privacy-policy">Privacy Policy</a></li>
          <li><a href="/terms-of-service">Terms of Service</a></li>
          <li><a href="/contact">Contact Us</a></li>
        </ul>
      </div>

    </div><!-- /footer-top -->

    <hr class="footer-divider" />

    <!-- ── Full platform grid ── -->
    <div class="footer-platforms">
      <div class="footer-platforms-title">All Platforms</div>
      <div class="footer-platforms-grid">
        <a href="instagram-services" class="footer-platform-pill" title="Instagram services">
          <span class="footer-platform-pill-icon">📸</span>
          <span class="footer-platform-pill-label">Instagram</span>
        </a>
        <a href="tiktok-services" class="footer-platform-pill" title="TikTok services">
          <span class="footer-platform-pill-icon">🎵</span>
          <span class="footer-platform-pill-label">TikTok</span>
        </a>
        <a href="youtube-services" class="footer-platform-pill" title="YouTube services">
          <span class="footer-platform-pill-icon">▶️</span>
          <span class="footer-platform-pill-label">YouTube</span>
        </a>
        <a href="twitter-services" class="footer-platform-pill" title="Twitter / X services">
          <span class="footer-platform-pill-icon">𝕏</span>
          <span class="footer-platform-pill-label">Twitter / X</span>
        </a>
        <a href="facebook-services" class="footer-platform-pill" title="Facebook services">
          <span class="footer-platform-pill-icon">📘</span>
          <span class="footer-platform-pill-label">Facebook</span>
        </a>
        <a href="reddit-services" class="footer-platform-pill" title="Reddit services">
          <span class="footer-platform-pill-icon">🤖</span>
          <span class="footer-platform-pill-label">Reddit</span>
        </a>
        <a href="spotify-services" class="footer-platform-pill" title="Spotify services">
          <span class="footer-platform-pill-icon">🎧</span>
          <span class="footer-platform-pill-label">Spotify</span>
        </a>
        <a href="telegram-services" class="footer-platform-pill" title="Telegram services">
          <span class="footer-platform-pill-icon">✈️</span>
          <span class="footer-platform-pill-label">Telegram</span>
        </a>
        <a href="twitch-services" class="footer-platform-pill" title="Twitch services">
          <span class="footer-platform-pill-icon">🎮</span>
          <span class="footer-platform-pill-label">Twitch</span>
        </a>
        <a href="threads-services" class="footer-platform-pill" title="Threads services">
          <span class="footer-platform-pill-icon">@</span>
          <span class="footer-platform-pill-label">Threads</span>
        </a>
        <a href="#" class="footer-platform-pill" title="Discord services">
          <span class="footer-platform-pill-icon">💬</span>
          <span class="footer-platform-pill-label">Discord</span>
        </a>
      </div>
    </div>

    <!-- ── More services row ── -->
    <div style="display:flex;flex-wrap:wrap;gap:1.5rem;margin-bottom:2rem;">
      <div>
        <p style="font-size:0.7rem;font-weight:800;text-transform:uppercase;letter-spacing:1.8px;color:rgba(255,255,255,0.25);margin-bottom:0.5rem;font-family:'Outfit',sans-serif;">Facebook</p>
        <div style="display:flex;flex-wrap:wrap;gap:0.35rem 0.8rem;">
          <?php
          $fb = ['Page Likes'=>'buy-facebook-page-likes','Followers'=>'buy-facebook-followers','Post Likes'=>'buy-facebook-post-likes','Video Views'=>'buy-facebook-video-views','Comments'=>'buy-facebook-comments','Group Members'=>'buy-facebook-group-members'];
          foreach ($fb as $name => $url): ?>
          <a href="<?= $url ?>" style="font-size:0.8rem;color:rgba(255,255,255,0.4);transition:color 0.15s;" onmouseover="this.style.color='#fff'" onmouseout="this.style.color='rgba(255,255,255,0.4)'"><?= $name ?></a>
          <?php endforeach; ?>
        </div>
      </div>
      <div>
        <p style="font-size:0.7rem;font-weight:800;text-transform:uppercase;letter-spacing:1.8px;color:rgba(255,255,255,0.25);margin-bottom:0.5rem;font-family:'Outfit',sans-serif;">Spotify</p>
        <div style="display:flex;flex-wrap:wrap;gap:0.35rem 0.8rem;">
          <?php
          $sp = ['Followers'=>'buy-spotify-followers','Monthly Listeners'=>'buy-spotify-monthly-listeners','Playlist Plays'=>'buy-spotify-playlist-plays','Playlist Followers'=>'buy-spotify-playlist-followers'];
          foreach ($sp as $name => $url): ?>
          <a href="<?= $url ?>" style="font-size:0.8rem;color:rgba(255,255,255,0.4);transition:color 0.15s;" onmouseover="this.style.color='#fff'" onmouseout="this.style.color='rgba(255,255,255,0.4)'"><?= $name ?></a>
          <?php endforeach; ?>
        </div>
      </div>
      <div>
        <p style="font-size:0.7rem;font-weight:800;text-transform:uppercase;letter-spacing:1.8px;color:rgba(255,255,255,0.25);margin-bottom:0.5rem;font-family:'Outfit',sans-serif;">Telegram</p>
        <div style="display:flex;flex-wrap:wrap;gap:0.35rem 0.8rem;">
          <?php
          $tg = ['Members'=>'buy-telegram-members','Views'=>'buy-telegram-views','Reactions'=>'buy-telegram-reactions'];
          foreach ($tg as $name => $url): ?>
          <a href="<?= $url ?>" style="font-size:0.8rem;color:rgba(255,255,255,0.4);transition:color 0.15s;" onmouseover="this.style.color='#fff'" onmouseout="this.style.color='rgba(255,255,255,0.4)'"><?= $name ?></a>
          <?php endforeach; ?>
        </div>
      </div>
      <div>
        <p style="font-size:0.7rem;font-weight:800;text-transform:uppercase;letter-spacing:1.8px;color:rgba(255,255,255,0.25);margin-bottom:0.5rem;font-family:'Outfit',sans-serif;">Twitch</p>
        <div style="display:flex;flex-wrap:wrap;gap:0.35rem 0.8rem;">
          <?php
          $tw = ['Followers'=>'buy-twitch-followers','Live Viewers'=>'buy-twitch-viewers','Chatters'=>'buy-twitch-chatters','Clip Views'=>'buy-twitch-clip-views','Channel Points'=>'buy-twitch-channel-points'];
          foreach ($tw as $name => $url): ?>
          <a href="<?= $url ?>" style="font-size:0.8rem;color:rgba(255,255,255,0.4);transition:color 0.15s;" onmouseover="this.style.color='#fff'" onmouseout="this.style.color='rgba(255,255,255,0.4)'"><?= $name ?></a>
          <?php endforeach; ?>
        </div>
      </div>
      <div>
        <p style="font-size:0.7rem;font-weight:800;text-transform:uppercase;letter-spacing:1.8px;color:rgba(255,255,255,0.25);margin-bottom:0.5rem;font-family:'Outfit',sans-serif;">Threads</p>
        <div style="display:flex;flex-wrap:wrap;gap:0.35rem 0.8rem;">
          <?php
          $th = ['Followers'=>'buy-threads-followers','Likes'=>'buy-threads-likes','Reposts'=>'buy-threads-reposts','Views'=>'buy-threads-views'];
          foreach ($th as $name => $url): ?>
          <a href="<?= $url ?>" style="font-size:0.8rem;color:rgba(255,255,255,0.4);transition:color 0.15s;" onmouseover="this.style.color='#fff'" onmouseout="this.style.color='rgba(255,255,255,0.4)'"><?= $name ?></a>
          <?php endforeach; ?>
        </div>
      </div>
      <div>
        <p style="font-size:0.7rem;font-weight:800;text-transform:uppercase;letter-spacing:1.8px;color:rgba(255,255,255,0.25);margin-bottom:0.5rem;font-family:'Outfit',sans-serif;">Reddit</p>
        <div style="display:flex;flex-wrap:wrap;gap:0.35rem 0.8rem;">
          <?php
          $rd = ['Upvotes'=>'buy-reddit-upvotes','Followers'=>'buy-reddit-followers','Comments'=>'buy-reddit-comments','Account Karma'=>'buy-reddit-account-karma'];
          foreach ($rd as $name => $url): ?>
          <a href="<?= $url ?>" style="font-size:0.8rem;color:rgba(255,255,255,0.4);transition:color 0.15s;" onmouseover="this.style.color='#fff'" onmouseout="this.style.color='rgba(255,255,255,0.4)'"><?= $name ?></a>
          <?php endforeach; ?>
        </div>
      </div>
    </div>

    <hr class="footer-divider" />

    <!-- ── Bottom bar ── -->
    <div class="footer-bottom">
      <div>
        <p class="footer-copyright">© <?= $current_year ?> DiscordBooster. All rights reserved.</p>
        <div class="footer-legal-links" style="margin-top:0.4rem;">
          <a href="/privacy-policy">Privacy Policy</a>
          <a href="/terms-of-service">Terms of Service</a>
          <a href="/refund-policy">Refund Policy</a>
          <a href="/cookie-policy">Cookie Policy</a>
          <a href="/sitemap.xml">Sitemap</a>
        </div>
      </div>
      <p class="footer-disclaimer"><?= htmlspecialchars($footer_disclaimer) ?></p>
    </div>

  </div><!-- /footer-inner -->
</footer>

</body>
</html>
