<?php
//Developer: core tech web designTechnology
//Whatsapp: +2349162671360
//Telegram: @jeditech
?>
</div><!-- /page-body -->

<!-- ─── FOOTER ────────────────────────── -->
<footer style="background:var(--bg2);border-top:1px solid var(--border);padding:3.5rem 2.5rem 2rem;">
  <div style="max-width:1200px;margin:0 auto;">
    <div style="display:grid;grid-template-columns:1.8fr 1fr 1fr 1fr;gap:2.5rem;margin-bottom:3rem;" class="footer-grid-inner">
      <div>
        <div style="display:flex;align-items:center;gap:10px;margin-bottom:.875rem;">

          <div style="font-size:1rem;font-weight:800;letter-spacing:-.02em;color:var(--text);">
            <img src="<?php echo htmlspecialchars(!empty($site_data['logo_url']) ? $site_data['logo_url'] : $site_data['web_url'] . '/images/softbills.png'); ?>" alt="<?php echo $site_data['web_name']; ?>" style="height:22px;width:auto;" onerror="this.style.display='none';this.nextSibling.style.display='block'">
            <span style="display:none;color:var(--g);"><?php echo $site_data['web_name']; ?></span>
          </div>
        </div>
        <p style="font-size:.8rem;line-height:1.75;color:var(--text3);max-width:260px;">
          <?php echo $site_data['web_name']; ?> helps individuals and businesses grow faster with powerful tools, real-time delivery, and reliable support.
        </p>
        <div style="display:flex;gap:12px;margin-top:1.25rem;">
          <?php if (!empty($site_data['web_telegram'])): ?>
          <a href="<?php echo $site_data['web_telegram']; ?>" target="_blank" style="width:34px;height:34px;border-radius:9px;border:1px solid var(--border);background:var(--surface);display:flex;align-items:center;justify-content:center;color:var(--text3);transition:all .2s;" onmouseover="this.style.borderColor='var(--g)';this.style.color='var(--g)'" onmouseout="this.style.borderColor='var(--border)';this.style.color='var(--text3)'">
            <i class="fab fa-telegram-plane" style="font-size:14px;"></i>
          </a>
          <?php endif; ?>
          <?php if (!empty($site_data['web_instagram'])): ?>
          <a href="<?php echo $site_data['web_instagram']; ?>" target="_blank" style="width:34px;height:34px;border-radius:9px;border:1px solid var(--border);background:var(--surface);display:flex;align-items:center;justify-content:center;color:var(--text3);transition:all .2s;" onmouseover="this.style.borderColor='var(--g)';this.style.color='var(--g)'" onmouseout="this.style.borderColor='var(--border)';this.style.color='var(--text3)'">
            <i class="fab fa-instagram" style="font-size:14px;"></i>
          </a>
          <?php endif; ?>
          
        </div>
      </div>

      <div>
        <div style="font-size:.68rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--text);margin-bottom:.875rem;">Links</div>
        <ul style="display:flex;flex-direction:column;gap:7px;">
          <li><a href="<?php echo $site_data['web_url']; ?>/" style="font-size:.8125rem;color:var(--text3);transition:color .2s;" onmouseover="this.style.color='var(--g)'" onmouseout="this.style.color='var(--text3)'">Home</a></li>
          <li><a href="<?php echo $site_data['web_url']; ?>/services" style="font-size:.8125rem;color:var(--text3);transition:color .2s;" onmouseover="this.style.color='var(--g)'" onmouseout="this.style.color='var(--text3)'">Services</a></li>
          <li><a href="<?php echo $site_data['web_url']; ?>/blog" style="font-size:.8125rem;color:var(--text3);transition:color .2s;" onmouseover="this.style.color='var(--g)'" onmouseout="this.style.color='var(--text3)'">Blog</a></li>
          <li><a href="<?php echo $site_data['web_url']; ?>/contact" style="font-size:.8125rem;color:var(--text3);transition:color .2s;" onmouseover="this.style.color='var(--g)'" onmouseout="this.style.color='var(--text3)'">Contact</a></li>
          <li><a href="<?php echo $site_data['web_url']; ?>/terms" style="font-size:.8125rem;color:var(--text3);transition:color .2s;" onmouseover="this.style.color='var(--g)'" onmouseout="this.style.color='var(--text3)'">Terms of Use</a></li>
        </ul>
      </div>

      <div>
        <div style="font-size:.68rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--text);margin-bottom:.875rem;">Services</div>
        <ul style="display:flex;flex-direction:column;gap:7px;">
          <li><a href="#" style="font-size:.8125rem;color:var(--text3);">Facebook</a></li>
          <li><a href="#" style="font-size:.8125rem;color:var(--text3);">Instagram</a></li>
          <li><a href="#" style="font-size:.8125rem;color:var(--text3);">TikTok</a></li>
          <li><a href="#" style="font-size:.8125rem;color:var(--text3);">Twitter</a></li>
          <li><a href="#" style="font-size:.8125rem;color:var(--text3);">Snapchat</a></li>
        </ul>
      </div>

      <div>
        <div style="font-size:.68rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--text);margin-bottom:.875rem;">Contact</div>
        <ul style="display:flex;flex-direction:column;gap:10px;">
          <li style="display:flex;align-items:center;gap:8px;font-size:.8125rem;color:var(--text3);">
            <i class="fas fa-map-marker-alt" style="color:var(--g);font-size:12px;"></i>Nigeria
          </li>
          <li style="display:flex;align-items:center;gap:8px;">
            <i class="fas fa-phone" style="color:var(--g);font-size:12px;"></i>
            <a href="https://wa.me/<?php echo preg_replace('/[^0-9]/', '', $site_data['whatsapp_number'] ?? ''); ?>
" style="font-size:.8125rem;color:var(--text3);transition:color .2s;" onmouseover="this.style.color='var(--g)'" onmouseout="this.style.color='var(--text3)'"><?php echo $site_data['whatsapp_number'] ?? ''; ?></a>
          </li>
          <?php if(!empty($site_data['web_email'])): ?>
          <li style="display:flex;align-items:center;gap:8px;">
            <i class="fas fa-envelope" style="color:var(--g);font-size:12px;"></i>
            <span style="font-size:.8125rem;color:var(--text3);"><?php echo $site_data['web_email']; ?></span>
          </li>
          <?php endif; ?>
        </ul>
      </div>
    </div>

    <div style="padding-top:1.5rem;border-top:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px;">
      <p style="font-size:.775rem;color:var(--text3);">© <?php echo date('Y'); ?> <?php echo $site_data['web_name']; ?>. All rights reserved.</p>
      <div style="display:flex;gap:1.5rem;">
        <a href="<?php echo $site_data['web_url']; ?>/terms" style="font-size:.775rem;color:var(--text3);transition:color .2s;" onmouseover="this.style.color='var(--g)'" onmouseout="this.style.color='var(--text3)'">Terms</a>
        <a href="<?php echo $site_data['web_url']; ?>/faq" style="font-size:.775rem;color:var(--text3);transition:color .2s;" onmouseover="this.style.color='var(--g)'" onmouseout="this.style.color='var(--text3)'">FAQ</a>
        <a href="<?php echo $site_data['web_url']; ?>/contact" style="font-size:.775rem;color:var(--text3);transition:color .2s;" onmouseover="this.style.color='var(--g)'" onmouseout="this.style.color='var(--text3)'">Support</a>
      </div>
    </div>
  </div>
</footer>

<!-- Telegram float button -->
<?php if(!empty($site_data['channel_url'])): ?>
<div style="position:fixed;bottom:24px;left:24px;z-index:10000;">
  <a href="<?php echo $site_data['channel_url']; ?>" target="_blank"
     style="width:54px;height:54px;border-radius:50%;background:var(--g);display:flex;align-items:center;justify-content:center;box-shadow:0 4px 20px var(--g-glow);transition:all .25s;"
     onmouseover="this.style.transform='scale(1.1)';this.style.boxShadow='0 8px 30px var(--g-glow)'"
     onmouseout="this.style.transform='scale(1)';this.style.boxShadow='0 4px 20px var(--g-glow)'">
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="#000" viewBox="0 0 496 512">
      <path d="M248 8C111 8 0 119 0 256S111 504 248 504 496 393 496 256 385 8 248 8zM363 176.7c-3.7 39.2-19.9 134.4-28.1 178.3-3.5 18.6-10.3 24.8-16.9 25.4-14.4 1.3-25.3-9.5-39.3-18.7-21.8-14.3-34.2-23.2-55.3-37.2-24.5-16.1-8.6-25 5.3-39.5 3.7-3.8 67.1-61.5 68.3-66.7 .2-.7 .3-3.1-1.2-4.4s-3.6-.8-5.1-.5q-3.3 .7-104.6 69.1-14.8 10.2-26.9 9.9c-8.9-.2-25.9-5-38.6-9.1-15.5-5-27.9-7.7-26.8-16.3q.8-6.7 18.5-13.7 108.4-47.2 144.6-62.3c68.9-28.6 83.2-33.6 92.5-33.8 2.1 0 6.6 .5 9.6 2.9a10.5 10.5 0 0 1 3.5 6.7A43.8 43.8 0 0 1 363 176.7z"/>
    </svg>
  </a>
</div>
<?php endif; ?>

<style>
@media(max-width:768px){
  .footer-grid-inner { grid-template-columns: 1fr 1fr !important; }
}
@media(max-width:480px){
  .footer-grid-inner { grid-template-columns: 1fr !important; }
  footer { padding: 2.5rem 1.25rem 1.5rem !important; }
}
</style>

<!-- ─── GLOBAL JS ──────────────────────── -->
<script>
(function() {
  /* Theme toggle */
  var html = document.documentElement;
  var moon = document.getElementById('i-moon'), sun = document.getElementById('i-sun');
  var t = localStorage.getItem('bd-t') || 'dark';

  function applyTheme(theme) {
    html.setAttribute('data-theme', theme);
    localStorage.setItem('bd-t', theme);
    if(moon) moon.style.display = theme==='dark' ? 'block' : 'none';
    if(sun)  sun.style.display  = theme==='light'? 'block' : 'none';
  }
  applyTheme(t);

  var themeBtn = document.getElementById('themeBtn');
  if(themeBtn) themeBtn.addEventListener('click', function(){
    t = t==='dark' ? 'light' : 'dark'; applyTheme(t);
  });

  /* Mobile nav */
  var hamBtn = document.getElementById('hamBtn');
  var mobNav = document.getElementById('mob-nav');
  var mobBack = document.getElementById('mob-back');
  var navOpen = false;

  function openNav()  { navOpen=true;  hamBtn.classList.add('open');    mobNav.classList.add('open');    mobBack.classList.add('open');    document.body.style.overflow='hidden'; }
  function closeNav() { navOpen=false; hamBtn.classList.remove('open'); mobNav.classList.remove('open'); mobBack.classList.remove('open'); document.body.style.overflow=''; }

  if(hamBtn)  hamBtn.addEventListener('click',  function(e){ e.stopPropagation(); navOpen ? closeNav() : openNav(); });
  if(mobBack) mobBack.addEventListener('click', closeNav);
  if(mobNav)  mobNav.querySelectorAll('a').forEach(function(a){ a.addEventListener('click', closeNav); });
  document.addEventListener('keydown', function(e){ if(e.key==='Escape' && navOpen) closeNav(); });

  /* Reveal on scroll */
  var ro = new IntersectionObserver(function(entries){
    entries.forEach(function(e){ if(e.isIntersecting) e.target.classList.add('in'); });
  }, { threshold: .12, rootMargin: '0px 0px -40px 0px' });
  document.querySelectorAll('.reveal').forEach(function(el){ ro.observe(el); });
})();
</script>
<a href="https://wa.me/<?php echo preg_replace('/[^0-9]/', '', $site_data['whatsapp_number'] ?? ''); ?>
" target="_blank" class="whatsapp-btn">
    <img src="https://upload.wikimedia.org/wikipedia/commons/6/6b/WhatsApp.svg" alt="WhatsApp">
    <span>Message us</span>
</a>

<style>
.whatsapp-btn {
    position: fixed;
    right: 20px;
    bottom: 20px;
    background: #25D366;
    color: white;
    padding: 10px 14px;
    border-radius: 25px;
    display: flex;
    align-items: center;
    text-decoration: none;
    font-family: Arial, sans-serif;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}

.whatsapp-btn img {
    width: 20px;
    margin-right: 8px;
}
</style>

<!-- Live Chat Widget -->
<div id="chatWidget" style="position:fixed;bottom:24px;right:24px;z-index:999;">
  <div id="chatBubbles" style="display:none;flex-direction:column;gap:8px;margin-bottom:12px;">
    <?php if (!empty($site_data['whatsapp_number'])): ?>
    <a href="https://wa.me/<?php echo preg_replace('/[^0-9]/', '', $site_data['whatsapp_number']); ?>" target="_blank" style="display:flex;align-items:center;gap:10px;background:#25d366;color:#fff;padding:10px 16px;border-radius:12px;font-size:.8rem;font-weight:600;box-shadow:0 4px 12px rgba(37,211,102,.25);text-decoration:none;transition:transform .2s;" onmouseover="this.style.transform='scale(1.03)'" onmouseout="this.style.transform='scale(1)'">
      <i class="fab fa-whatsapp" style="font-size:1.1rem;"></i> WhatsApp
    </a>
    <?php endif; ?>
    <?php if (!empty($site_data['web_telegram'])): ?>
    <a href="<?php echo htmlspecialchars($site_data['web_telegram']); ?>" target="_blank" style="display:flex;align-items:center;gap:10px;background:#0088cc;color:#fff;padding:10px 16px;border-radius:12px;font-size:.8rem;font-weight:600;box-shadow:0 4px 12px rgba(0,136,204,.25);text-decoration:none;transition:transform .2s;" onmouseover="this.style.transform='scale(1.03)'" onmouseout="this.style.transform='scale(1)'">
      <i class="fab fa-telegram" style="font-size:1.1rem;"></i> Telegram
    </a>
    <?php endif; ?>
    <?php if (!empty($site_data['channel_url'])): ?>
    <a href="<?php echo htmlspecialchars($site_data['channel_url']); ?>" target="_blank" style="display:flex;align-items:center;gap:10px;background:#0088cc;color:#fff;padding:10px 16px;border-radius:12px;font-size:.8rem;font-weight:600;box-shadow:0 4px 12px rgba(0,136,204,.2);text-decoration:none;transition:transform .2s;" onmouseover="this.style.transform='scale(1.03)'" onmouseout="this.style.transform='scale(1)'">
      <i class="fab fa-telegram" style="font-size:1.1rem;"></i> Channel
    </a>
    <?php endif; ?>
    <?php if (!empty($site_data['web_facebook'])): ?>
    <a href="<?php echo htmlspecialchars($site_data['web_facebook']); ?>" target="_blank" style="display:flex;align-items:center;gap:10px;background:#1877f2;color:#fff;padding:10px 16px;border-radius:12px;font-size:.8rem;font-weight:600;box-shadow:0 4px 12px rgba(24,119,242,.25);text-decoration:none;transition:transform .2s;" onmouseover="this.style.transform='scale(1.03)'" onmouseout="this.style.transform='scale(1)'">
      <i class="fab fa-facebook" style="font-size:1.1rem;"></i> Facebook
    </a>
    <?php endif; ?>
    <?php if (!empty($site_data['web_x'])): ?>
    <a href="<?php echo htmlspecialchars($site_data['web_x']); ?>" target="_blank" style="display:flex;align-items:center;gap:10px;background:#000;color:#fff;padding:10px 16px;border-radius:12px;font-size:.8rem;font-weight:600;box-shadow:0 4px 12px rgba(0,0,0,.2);text-decoration:none;transition:transform .2s;" onmouseover="this.style.transform='scale(1.03)'" onmouseout="this.style.transform='scale(1)'">
      <i class="fab fa-x-twitter" style="font-size:1.1rem;"></i> X (Twitter)
    </a>
    <?php endif; ?>
    <?php if (!empty($site_data['web_instagram'])): ?>
    <a href="<?php echo htmlspecialchars($site_data['web_instagram']); ?>" target="_blank" style="display:flex;align-items:center;gap:10px;background:linear-gradient(45deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888);color:#fff;padding:10px 16px;border-radius:12px;font-size:.8rem;font-weight:600;box-shadow:0 4px 12px rgba(225,48,108,.25);text-decoration:none;transition:transform .2s;" onmouseover="this.style.transform='scale(1.03)'" onmouseout="this.style.transform='scale(1)'">
      <i class="fab fa-instagram" style="font-size:1.1rem;"></i> Instagram
    </a>
    <?php endif; ?>
    <?php if (!empty($site_data['web_tiktok'])): ?>
    <a href="<?php echo htmlspecialchars($site_data['web_tiktok']); ?>" target="_blank" style="display:flex;align-items:center;gap:10px;background:#000;color:#fff;padding:10px 16px;border-radius:12px;font-size:.8rem;font-weight:600;box-shadow:0 4px 12px rgba(0,0,0,.2);text-decoration:none;transition:transform .2s;" onmouseover="this.style.transform='scale(1.03)'" onmouseout="this.style.transform='scale(1)'">
      <i class="fab fa-tiktok" style="font-size:1.1rem;"></i> TikTok
    </a>
    <?php endif; ?>
    <?php if (!empty($site_data['web_youtube'])): ?>
    <a href="<?php echo htmlspecialchars($site_data['web_youtube']); ?>" target="_blank" style="display:flex;align-items:center;gap:10px;background:#ff0000;color:#fff;padding:10px 16px;border-radius:12px;font-size:.8rem;font-weight:600;box-shadow:0 4px 12px rgba(255,0,0,.25);text-decoration:none;transition:transform .2s;" onmouseover="this.style.transform='scale(1.03)'" onmouseout="this.style.transform='scale(1)'">
      <i class="fab fa-youtube" style="font-size:1.1rem;"></i> YouTube
    </a>
    <?php endif; ?>
  </div>
  <button onclick="toggleChat()" id="chatBtn" style="width:56px;height:56px;border-radius:50%;background:linear-gradient(135deg,#4D148C,#6b23c2);color:#fff;border:none;cursor:pointer;box-shadow:0 6px 24px rgba(77,20,140,.35);display:flex;align-items:center;justify-content:center;transition:all .3s;font-size:1.3rem;">
    <i class="fa-solid fa-headset" id="chatIcon"></i>
  </button>
</div>
<script>
var chatOpen=false;
function toggleChat(){
  chatOpen=!chatOpen;
  document.getElementById('chatBubbles').style.display=chatOpen?'flex':'none';
  document.getElementById('chatIcon').className=chatOpen?'fa-solid fa-xmark':'fa-solid fa-headset';
  document.getElementById('chatBtn').style.transform=chatOpen?'rotate(90deg)':'rotate(0)';
}
</script>

<?php include __DIR__ . '/pwa-install.php'; ?>

</body>
</html>