<?php // includes/footer.php ?>

<!-- Footer -->
<footer class="bg-dark text-white pt-5 mt-5">
    <!-- Main Footer Content -->
    <div class="container-fluid" style="background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);">
        <div class="container py-5">
            <div class="row g-4 mb-5">
                <!-- Brand Section -->
                <div class="col-lg-3 col-md-6 col-sm-12">
                    <div class="mb-4">
                        <h4 class="text-white mb-3">
                            <i class="fas fa-shopping-bag text-secondary me-2"></i><?= sanitize(getSetting('site_name')) ?>
                        </h4>
                        <p class="text-white-50 small"><?= sanitize(getSetting('site_tagline')) ?></p>
                    </div>
                    <div class="d-flex gap-2">
                        <a href="#" class="btn btn-outline-secondary btn-sm rounded-circle" title="Facebook" style="width:36px;height:36px;display:flex;align-items:center;justify-content:center;">
                            <i class="fab fa-facebook-f"></i>
                        </a>
                        <a href="#" class="btn btn-outline-secondary btn-sm rounded-circle" title="Twitter" style="width:36px;height:36px;display:flex;align-items:center;justify-content:center;">
                            <i class="fab fa-twitter"></i>
                        </a>
                        <a href="#" class="btn btn-outline-secondary btn-sm rounded-circle" title="Instagram" style="width:36px;height:36px;display:flex;align-items:center;justify-content:center;">
                            <i class="fab fa-instagram"></i>
                        </a>
                        <a href="#" class="btn btn-outline-secondary btn-sm rounded-circle" title="LinkedIn" style="width:36px;height:36px;display:flex;align-items:center;justify-content:center;">
                            <i class="fab fa-linkedin-in"></i>
                        </a>
                    </div>
                </div>

                <!-- Quick Links -->
                <div class="col-lg-3 col-md-6 col-sm-12">
                    <h5 class="text-white mb-4">
                        <i class="fas fa-link text-secondary me-2"></i>Quick Links
                    </h5>
                    <ul class="list-unstyled">
                        <li class="mb-2">
                            <a href="<?= SITE_URL ?>/" class="text-white-50 text-decoration-none transition-link">
                                <i class="fas fa-chevron-right me-2" style="font-size:0.7rem;"></i>Home
                            </a>
                        </li>
                        <li class="mb-2">
                            <a href="<?= SITE_URL ?>/shop.php" class="text-white-50 text-decoration-none transition-link">
                                <i class="fas fa-chevron-right me-2" style="font-size:0.7rem;"></i>Products
                            </a>
                        </li>
                        <li class="mb-2">
                            <a href="<?= SITE_URL ?>/contact.php" class="text-white-50 text-decoration-none transition-link">
                                <i class="fas fa-chevron-right me-2" style="font-size:0.7rem;"></i>Contact Us
                            </a>
                        </li>
                        <li class="mb-2">
                            <a href="#" class="text-white-50 text-decoration-none transition-link">
                                <i class="fas fa-chevron-right me-2" style="font-size:0.7rem;"></i>About Us
                            </a>
                        </li>
                    </ul>
                </div>

                <!-- Customer Service -->
                <div class="col-lg-3 col-md-6 col-sm-12">
                    <h5 class="text-white mb-4">
                        <i class="fas fa-headset text-secondary me-2"></i>Support
                    </h5>
                    <ul class="list-unstyled">
                        <li class="mb-2">
                            <a href="#" class="text-white-50 text-decoration-none transition-link">
                                <i class="fas fa-chevron-right me-2" style="font-size:0.7rem;"></i>FAQs
                            </a>
                        </li>
                        <li class="mb-2">
                            <a href="#" class="text-white-50 text-decoration-none transition-link">
                                <i class="fas fa-chevron-right me-2" style="font-size:0.7rem;"></i>Shipping Info
                            </a>
                        </li>
                        <li class="mb-2">
                            <a href="#" class="text-white-50 text-decoration-none transition-link">
                                <i class="fas fa-chevron-right me-2" style="font-size:0.7rem;"></i>Returns & Exchange
                            </a>
                        </li>
                        <li class="mb-2">
                            <a href="#" class="text-white-50 text-decoration-none transition-link">
                                <i class="fas fa-chevron-right me-2" style="font-size:0.7rem;"></i>Privacy Policy
                            </a>
                        </li>
                    </ul>
                </div>

                <!-- Contact Info -->
                <div class="col-lg-3 col-md-6 col-sm-12">
                    <h5 class="text-white mb-4">
                        <i class="fas fa-phone text-secondary me-2"></i>Contact Us
                    </h5>
                    <div class="mb-3">
                        <p class="text-white-50 mb-2 small">
                            <i class="fas fa-phone-alt me-2"></i>Phone:
                        </p>
                        <div class="ms-4">
                            <?php
                            $phones = getAllPhones();
                            if (!empty($phones)) {
                                foreach (array_slice($phones, 0, 2) as $ph) {
                                    echo '<a href="tel:' . sanitize($ph['phone_number']) . '" class="d-block text-white-50 text-decoration-none small transition-link mb-1">' . sanitize($ph['phone_number']) . '</a>';
                                }
                            }
                            ?>
                        </div>
                    </div>
                    <div>
                        <p class="text-white-50 mb-2 small">
                            <i class="fas fa-envelope me-2"></i>Email:
                        </p>
                        <p class="ms-4 mb-0">
                            <a href="mailto:info@electro-shop.com" class="text-white-50 text-decoration-none small transition-link">info@electro-shop.com</a>
                        </p>
                    </div>
                </div>
            </div>

            <!-- Newsletter -->
            <div class="row mb-4">
                <div class="col-12">
                    <div class="bg-darker p-4 rounded" style="background-color:rgba(0,0,0,0.3);">
                        <div class="row align-items-center">
                            <div class="col-lg-6 col-md-12 mb-3 mb-lg-0">
                                <h6 class="text-white mb-2">
                                    <i class="fas fa-bell text-secondary me-2"></i>Subscribe to Our Newsletter
                                </h6>
                                <p class="text-white-50 small mb-0">Get the latest deals, product launches, and special offers delivered to your inbox.</p>
                            </div>
                            <div class="col-lg-6 col-md-12">
                                <form class="d-flex gap-2">
                                    <input type="email" class="form-control form-control-sm" placeholder="Enter your email" required>
                                    <button type="submit" class="btn btn-secondary btn-sm px-4 flex-shrink-0">Subscribe</button>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Bottom Footer / Copyright -->
    <div class="bg-darker" style="background-color:rgba(0,0,0,0.5);">
        <div class="container py-4">
            <div class="row g-3 align-items-center">
                <div class="col-md-6 text-center text-md-start">
                    <p class="text-white-50 small mb-0">
                        &copy; <?= date('Y') ?> <?= sanitize(getSetting('site_name')) ?>. All Rights Reserved.
                    </p>
                </div>
                <div class="col-md-6 text-center text-md-end">
                    <div class="d-flex justify-content-center justify-content-md-end gap-3 flex-wrap">
                        <a href="#" class="text-white-50 text-decoration-none small transition-link">Terms & Conditions</a>
                        <span class="text-white-50">•</span>
                        <a href="#" class="text-white-50 text-decoration-none small transition-link">Privacy Policy</a>
                        <span class="text-white-50">•</span>
                        <a href="#" class="text-white-50 text-decoration-none small transition-link">Sitemap</a>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Payment Methods Badge -->
    <div class="bg-body text-center py-3 border-top">
        <div class="container">
            <p class="text-muted small mb-2">We Accept:</p>
            <div class="d-flex justify-content-center gap-3 flex-wrap align-items-center">
                <span class="badge bg-light text-dark"><i class="fab fa-cc-visa me-1"></i>Visa</span>
                <span class="badge bg-light text-dark"><i class="fab fa-cc-mastercard me-1"></i>Mastercard</span>
                <span class="badge bg-light text-dark"><i class="fab fa-cc-paypal me-1"></i>PayPal</span>
                <span class="badge bg-light text-dark"><i class="fas fa-mobile-alt me-1"></i>UPI</span>
                <span class="badge bg-light text-dark"><i class="fas fa-wallet me-1"></i>Wallets</span>
            </div>
        </div>
    </div>
</footer>

<style>
.transition-link {
    transition: all 0.3s ease;
}
.transition-link:hover {
    color: #fff !important;
    text-decoration: underline !important;
}
</style>

<!-- JS Libraries -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<script src="<?= SITE_URL ?>/assets/lib/owlcarousel/owl.carousel.min.js"></script>
<script src="<?= SITE_URL ?>/assets/lib/lightbox/js/lightbox.min.js"></script>
<script src="<?= SITE_URL ?>/assets/js/main.js"></script>
</body>
</html>
