gasemi_tier/includes/footer.php

<?php
// includes/footer.php
?>
    <!-- Footer Section -->
    <footer class="mt-auto bg-slate-950 border-t border-slate-800 text-slate-400 text-sm">
        <!-- Main Footer Content -->
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-14">
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-10">
                
                <!-- Col 1: About & Info -->
                <div class="space-y-4">
                    <div class="flex items-center gap-3">
                        <div class="w-10 h-10 rounded-xl bg-brand-600 flex items-center justify-center text-white shadow-lg shadow-brand-900/30">
                            <i data-lucide="disc-3" class="w-6 h-6"></i>
                        </div>
                        <div>
                            <span class="text-xl font-black text-white">تایر</span>
                            <span class="text-xl font-black text-brand-500">قاسمی</span>
                        </div>
                    </div>
                    <p class="text-xs leading-relaxed text-slate-400">
                        مجموعه تخصصی تایر قاسمی با بیش از دو دهه تجربه در زمینه تامین، توزیع و خدمات تخصصی انواع لاستیک‌های سبک، اسپرت، SUV و سنگین از برترین برندهای ایرانی و بین‌المللی همراه با گارانتی اصالت کالا.
                    </p>
                    <div class="flex items-center gap-3 pt-2">
                        <a href="#" class="w-9 h-9 rounded-lg bg-slate-900 border border-slate-800 flex items-center justify-center hover:text-brand-400 hover:border-brand-500/50 transition-colors"><i data-lucide="instagram" class="w-4 h-4"></i></a>
                        <a href="#" class="w-9 h-9 rounded-lg bg-slate-900 border border-slate-800 flex items-center justify-center hover:text-brand-400 hover:border-brand-500/50 transition-colors"><i data-lucide="send" class="w-4 h-4"></i></a>
                        <a href="#" class="w-9 h-9 rounded-lg bg-slate-900 border border-slate-800 flex items-center justify-center hover:text-brand-400 hover:border-brand-500/50 transition-colors"><i data-lucide="phone" class="w-4 h-4"></i></a>
                    </div>
                </div>

                <!-- Col 2: Quick Links -->
                <div>
                    <h4 class="text-white font-bold text-base mb-4 flex items-center gap-2">
                        <span class="w-2 h-2 rounded-full bg-brand-500"></span>
                        دسترسی سریع
                    </h4>
                    <ul class="space-y-2.5 text-xs">
                        <li><a href="index.php" class="hover:text-brand-400 transition-colors flex items-center gap-1.5"><i data-lucide="chevron-left" class="w-3.5 h-3.5"></i> صفحه اصلی و کاتالوگ</a></li>
                        <li><a href="calculator.php" class="hover:text-brand-400 transition-colors flex items-center gap-1.5"><i data-lucide="chevron-left" class="w-3.5 h-3.5"></i> محاسبه‌گر و تبدیل سایز تایر</a></li>
                        <li><a href="compare.php" class="hover:text-brand-400 transition-colors flex items-center gap-1.5"><i data-lucide="chevron-left" class="w-3.5 h-3.5"></i> مقایسه هوشمند مشخصات</a></li>
                        <li><a href="guide.php" class="hover:text-brand-400 transition-colors flex items-center gap-1.5"><i data-lucide="chevron-left" class="w-3.5 h-3.5"></i> جدول فشار باد و راهنمای DOT</a></li>
                        <li><a href="contact.php" class="hover:text-brand-400 transition-colors flex items-center gap-1.5"><i data-lucide="chevron-left" class="w-3.5 h-3.5"></i> آدرس شعب و درخواست خدمات</a></li>
                    </ul>
                </div>

                <!-- Col 3: Popular Brands -->
                <div>
                    <h4 class="text-white font-bold text-base mb-4 flex items-center gap-2">
                        <span class="w-2 h-2 rounded-full bg-amber-500"></span>
                        برندهای طرف قرارداد
                    </h4>
                    <div class="grid grid-cols-2 gap-2 text-xs">
                        <span class="p-2 rounded-lg bg-slate-900 border border-slate-800/80 text-center">بارز (Barez)</span>
                        <span class="p-2 rounded-lg bg-slate-900 border border-slate-800/80 text-center">کویر تایر (Kavir)</span>
                        <span class="p-2 rounded-lg bg-slate-900 border border-slate-800/80 text-center">یزد تایر (Yazd)</span>
                        <span class="p-2 rounded-lg bg-slate-900 border border-slate-800/80 text-center">هانکوک (Hankook)</span>
                        <span class="p-2 rounded-lg bg-slate-900 border border-slate-800/80 text-center">کومهو (Kumho)</span>
                        <span class="p-2 rounded-lg bg-slate-900 border border-slate-800/80 text-center">میشلن (Michelin)</span>
                        <span class="p-2 rounded-lg bg-slate-900 border border-slate-800/80 text-center">پیرلی (Pirelli)</span>
                        <span class="p-2 rounded-lg bg-slate-900 border border-slate-800/80 text-center">مکسس (Maxxis)</span>
                    </div>
                </div>

                <!-- Col 4: Contact and Address -->
                <div>
                    <h4 class="text-white font-bold text-base mb-4 flex items-center gap-2">
                        <span class="w-2 h-2 rounded-full bg-emerald-500"></span>
                        اطلاعات تماس و نشانی
                    </h4>
                    <ul class="space-y-3 text-xs">
                        <li class="flex items-start gap-2.5">
                            <i data-lucide="map-pin" class="w-4 h-4 text-brand-500 shrink-0 mt-0.5"></i>
                            <span>شعبه مرکزی: تهران، خیابان آزادی، تقاطع یادگار امام، مجتمع خدمات خودرویی تایر قاسمی</span>
                        </li>
                        <li class="flex items-center gap-2.5">
                            <i data-lucide="phone" class="w-4 h-4 text-brand-500 shrink-0"></i>
                            <span>تلفن فروش و استعلام: ۰۲۱-۸۸۸۸۹۹۰۰</span>
                        </li>
                        <li class="flex items-center gap-2.5">
                            <i data-lucide="smartphone" class="w-4 h-4 text-brand-500 shrink-0"></i>
                            <span>پشتیبانی واتساپ / تلگرام: ۰۹۱۲۳۴۵۶۷۸۹</span>
                        </li>
                        <li class="flex items-center gap-2.5">
                            <i data-lucide="clock" class="w-4 h-4 text-brand-500 shrink-0"></i>
                            <span>ساعت کاری: همه‌روزه از ۸:۳۰ الی ۲۰:۳۰</span>
                        </li>
                    </ul>
                </div>

            </div>
        </div>

        <!-- Bottom Copyright and Badge Bar -->
        <div class="border-t border-slate-800/80 bg-[#060910] py-6 px-4">
            <div class="max-w-7xl mx-auto flex flex-col sm:flex-row items-center justify-between gap-4 text-xs text-slate-500">
                <p>© <?= date('Y') ?> تمامی حقوق مادی و معنوی متعلق به وب‌سایت تخصصی <strong>تایر قاسمی</strong> می‌باشد.</p>
                <div class="flex items-center gap-4 text-slate-400">
                    <span class="flex items-center gap-1.5"><i data-lucide="shield-check" class="w-4 h-4 text-emerald-400"></i> ضمانت تاریخ تولید روز</span>
                    <span class="flex items-center gap-1.5"><i data-lucide="wrench" class="w-4 h-4 text-amber-400"></i> خدمات نصب و بالانس لیزری</span>
                </div>
            </div>
        </div>
    </footer>

    <!-- Compare Drawer & Modals Global Script -->
    <script>
        // Init Lucide Icons
        lucide.createIcons();

        // Mobile menu toggle
        const mobileBtn = document.getElementById('mobile-menu-btn');
        const mobileMenu = document.getElementById('mobile-menu');
        if (mobileBtn && mobileMenu) {
            mobileBtn.addEventListener('click', () => {
                mobileMenu.classList.toggle('hidden');
            });
        }

        // Compare Manager (LocalStorage)
        const CompareStore = {
            getKey: () => 'gasemi_compare_tires',
            getList: function() {
                try {
                    return JSON.parse(localStorage.getItem(this.getKey())) || [];
                } catch(e) {
                    return [];
                }
            },
            add: function(tireId) {
                let list = this.getList();
                if (!list.includes(tireId)) {
                    if (list.length >= 4) {
                        alert('حداکثر می‌توانید ۴ تایر را همزمان با یکدیگر مقایسه نمایید.');
                        return false;
                    }
                    list.push(tireId);
                    localStorage.setItem(this.getKey(), JSON.stringify(list));
                    this.updateBadge();
                    return true;
                }
                return false;
            },
            remove: function(tireId) {
                let list = this.getList().filter(id => id !== tireId);
                localStorage.setItem(this.getKey(), JSON.stringify(list));
                this.updateBadge();
            },
            clear: function() {
                localStorage.removeItem(this.getKey());
                this.updateBadge();
            },
            updateBadge: function() {
                const list = this.getList();
                const badge = document.getElementById('compare-badge');
                if (badge) {
                    badge.innerText = list.length;
                    if (list.length > 0) {
                        badge.classList.remove('hidden');
                    } else {
                        badge.classList.add('hidden');
                    }
                }
            }
        };

        // Initialize compare badge on load
        document.addEventListener('DOMContentLoaded', () => {
            CompareStore.updateBadge();
        });
    </script>
</body>
</html>