<?php
require_once __DIR__ . '/site_settings.php';
$siteSettings = getSiteSettings();
$footerPhone = $siteSettings['contact_phone'] ?? '+234 800 000 0000';
$footerPhone2 = $siteSettings['contact_phone_2'] ?? '+234 800 111 1111';
$footerEmail = $siteSettings['contact_email'] ?? 'info@stilesenergylpg.com';
$footerLocation = $siteSettings['contact_location'] ?? 'Lagos, Nigeria';
$footerHours = $siteSettings['contact_hours'] ?? 'Mon - Sat, 7:00 AM - 8:00 PM';
$footerPhoneLink = formatPhoneForTel($footerPhone);
$footerPhoneLink2 = formatPhoneForTel($footerPhone2);
?>
<footer style="background:#0f172a;border-top:1px solid rgba(255,255,255,.06);padding:4rem 0 1.75rem">
  <div style="max-width:1200px;margin:0 auto;padding:0 1.5rem">
    <div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:3rem;margin-bottom:3rem">

      <!-- Brand -->
      <div>
        <div style="display:flex;align-items:center;gap:.75rem;margin-bottom:1.25rem">
          <div style="display:flex;align-items:center">
            <img src="/stile-lpg/backend/uploads/footer-image.png" alt="Stiles Energy Logo" style="width:100px;height:auto;object-fit:contain">
          </div>
        </div>
        <p style="color:#64748b;font-size:.875rem;line-height:1.75;margin-bottom:1.25rem;max-width:260px">Safe LPG supply, home delivery &amp; complete gas infrastructure solutions across Nigeria.</p>
        <div style="display:inline-flex;align-items:center;gap:.4rem;background:rgba(249,115,22,.1);border:1px solid rgba(249,115,22,.2);border-radius:50px;padding:.3rem .9rem">
          <div style="width:7px;height:7px;border-radius:50%;background:#22c55e;box-shadow:0 0 6px rgba(34,197,94,.6)"></div>
          <span style="color:#94a3b8;font-size:.75rem;font-weight:600">Deliveries Active Now</span>
        </div>
      </div>

      <!-- Quick Links -->
      <div>
        <h4 style="color:#f97316;font-weight:700;margin-bottom:1.25rem;font-size:.75rem;letter-spacing:2px;text-transform:uppercase">Quick Links</h4>
        <a href="/stile-lpg/index.php" class="footer-link">Home</a>
        <a href="/stile-lpg/services.php" class="footer-link">Services</a>
        <a href="/stile-lpg/accessories.php" class="footer-link">Accessories</a>
        <a href="/stile-lpg/gallery.php" class="footer-link">Gallery</a>
        <a href="/stile-lpg/contact.php" class="footer-link">Contact</a>
      </div>

      <!-- Services -->
      <div>
        <h4 style="color:#f97316;font-weight:700;margin-bottom:1.25rem;font-size:.75rem;letter-spacing:2px;text-transform:uppercase">Services</h4>
        <p style="color:#64748b;font-size:.875rem;margin-bottom:.5rem">LPG Sales &amp; Distribution</p>
        <p style="color:#64748b;font-size:.875rem;margin-bottom:.5rem">Home Delivery</p>
        <p style="color:#64748b;font-size:.875rem;margin-bottom:.5rem">Reticulation</p>
        <p style="color:#64748b;font-size:.875rem;margin-bottom:.5rem">Gas Skid Construction</p>
        <p style="color:#64748b;font-size:.875rem;margin-bottom:.5rem">Industrial Storage and Utilisation</p>
        <p style="color:#64748b;font-size:.875rem;margin-bottom:.5rem">Gas Stations</p>
        <p style="color:#64748b;font-size:.875rem;margin-bottom:.5rem">CNG and LNG</p>
        <p style="color:#64748b;font-size:.875rem;margin-bottom:.5rem">Lubricants &amp; Oil</p>
      </div>

      <!-- Contact -->
      <div>
        <h4 style="color:#f97316;font-weight:700;margin-bottom:1.25rem;font-size:.75rem;letter-spacing:2px;text-transform:uppercase">Contact</h4>
        <div style="display:flex;flex-direction:column;gap:.9rem">
          <a href="tel:<?= htmlspecialchars($footerPhoneLink) ?>" class="footer-contact-link">
            <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="#f97316" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 16.92v3a2 2 0 01-2.18 2 19.79 19.79 0 01-8.63-3.07A19.5 19.5 0 013.07 9.81 19.79 19.79 0 01.06 1.18 2 2 0 012 0h3a2 2 0 012 1.72 12.84 12.84 0 00.7 2.81 2 2 0 01-.45 2.11L6.09 7.91a16 16 0 006 6l1.27-1.27a2 2 0 012.11-.45 12.84 12.84 0 002.81.7A2 2 0 0122 14z"/></svg>
            <?= htmlspecialchars($footerPhone) ?>
          </a>
          <a href="tel:<?= htmlspecialchars($footerPhoneLink2) ?>" class="footer-contact-link">
            <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="#f97316" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 16.92v3a2 2 0 01-2.18 2 19.79 19.79 0 01-8.63-3.07A19.5 19.5 0 013.07 9.81 19.79 19.79 0 01.06 1.18 2 2 0 012 0h3a2 2 0 012 1.72 12.84 12.84 0 00.7 2.81 2 2 0 01-.45 2.11L6.09 7.91a16 16 0 006 6l1.27-1.27a2 2 0 012.11-.45 12.84 12.84 0 002.81.7A2 2 0 0122 14z"/></svg>
            <?= htmlspecialchars($footerPhone2) ?>
          </a>
          <a href="mailto:<?= htmlspecialchars($footerEmail) ?>" class="footer-contact-link">
            <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="#f97316" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
            <?= htmlspecialchars($footerEmail) ?>
          </a>
          <div class="footer-contact-link">
            <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="#f97316" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0118 0z"/><circle cx="12" cy="10" r="3"/></svg>
            <?= htmlspecialchars($footerLocation) ?>
          </div>
          <div class="footer-contact-link">
            <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="#f97316" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
            <?= htmlspecialchars($footerHours) ?>
          </div>
        </div>
      </div>
    </div>

    <div style="border-top:1px solid rgba(255,255,255,.07);padding-top:1.75rem;display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:1rem">
      <p style="color:#334155;font-size:.8rem;font-weight:500">© 2026 STILES ENERGY LPG, Nigeria. All rights reserved.</p>
    </div>
  </div>
</footer>

<!-- Scroll-triggered animation engine -->
<script>
(function(){
  if(!('IntersectionObserver' in window)) {
    document.querySelectorAll('.anim-fade-up,.anim-fade-left,.anim-fade-right,.anim-scale').forEach(function(el){ el.classList.add('anim-visible'); });
    return;
  }
  var io = new IntersectionObserver(function(entries){
    entries.forEach(function(e){
      if(e.isIntersecting){
        var delay = e.target.dataset.delay || 0;
        setTimeout(function(){ e.target.classList.add('anim-visible'); }, +delay);
        io.unobserve(e.target);
      }
    });
  },{threshold:0.12,rootMargin:'0px 0px -40px 0px'});
  document.querySelectorAll('.anim-fade-up,.anim-fade-left,.anim-fade-right,.anim-scale').forEach(function(el){ io.observe(el); });
})();
</script>
</body>
</html>
