motayeb/footer.php

<?php
/**
 * فوتر سایت - مطابق با UI Kolli.html
 *
 * @package Motayeb
 */
?>
</main><!-- پایان main -->

<!-- ===== FOOTER ===== -->
<footer class="bg-forest-500 dark:bg-forest-800 text-white">
    <div class="max-w-7xl mx-auto px-4 md:px-6 py-16">
        <div class="grid grid-cols-2 md:grid-cols-4 gap-8 md:gap-12">
            <!-- Brand -->
            <div class="col-span-2 md:col-span-1">
                <div class="flex items-center gap-2.5 mb-5">
                    <div class="w-10 h-10 bg-white/10 rounded-2xl flex items-center justify-center">
                        <iconify-icon icon="lucide:leaf" width="20" class="text-honey-300"></iconify-icon>
                    </div>
                    <div>
                        <span class="font-extrabold text-xl">مطیب</span>
                        <span class="block text-[9px] text-white/50 font-inter tracking-widest">MOTAYEB</span>
                    </div>
                </div>
                <p class="text-white/70 text-sm leading-relaxed mb-5">ارائه‌دهنده محصولات ارگانیک و طبیعی ایرانی با ضمانت اصالت و کیفیت.</p>
                <div class="flex gap-3">
                    <a href="#" class="w-9 h-9 bg-white/10 rounded-lg flex items-center justify-center hover:bg-white/20 transition"><iconify-icon icon="lucide:instagram" width="18"></iconify-icon></a>
                    <a href="#" class="w-9 h-9 bg-white/10 rounded-lg flex items-center justify-center hover:bg-white/20 transition"><iconify-icon icon="lucide:send" width="18"></iconify-icon></a>
                    <a href="#" class="w-9 h-9 bg-white/10 rounded-lg flex items-center justify-center hover:bg-white/20 transition"><iconify-icon icon="lucide:twitter" width="18"></iconify-icon></a>
                </div>
            </div>
            <!-- Quick Links -->
            <div>
                <h4 class="font-bold mb-5">دسترسی سریع</h4>
                <ul class="space-y-3 text-sm text-white/70">
                    <li><a href="<?php echo esc_url( home_url( '/' ) ); ?>" class="hover:text-honey-300 transition">صفحه اصلی</a></li>
                    <li><a href="<?php echo esc_url( get_permalink( wc_get_page_id( 'shop' ) ) ); ?>" class="hover:text-honey-300 transition">فروشگاه</a></li>
                    <li><a href="<?php echo esc_url( home_url( '/about' ) ); ?>" class="hover:text-honey-300 transition">درباره ما</a></li>
                    <li><a href="<?php echo esc_url( home_url( '/blog' ) ); ?>" class="hover:text-honey-300 transition">مجله سلامت</a></li>
                    <li><a href="<?php echo esc_url( home_url( '/contact' ) ); ?>" class="hover:text-honey-300 transition">تماس با ما</a></li>
                </ul>
            </div>
            <!-- Categories -->
            <div>
                <h4 class="font-bold mb-5">دسته‌بندی‌ها</h4>
                <ul class="space-y-3 text-sm text-white/70">
                    <?php
                    $cat_links = get_terms( array(
                        'taxonomy'   => 'product_cat',
                        'hide_empty' => false,
                        'number'     => 5,
                    ) );
                    if ( ! empty( $cat_links ) && ! is_wp_error( $cat_links ) ) {
                        foreach ( $cat_links as $cat ) {
                            echo '<li><a href="' . esc_url( get_term_link( $cat ) ) . '" class="hover:text-honey-300 transition">' . esc_html( $cat->name ) . '</a></li>';
                        }
                    } else {
                        echo '<li><a href="#" class="hover:text-honey-300 transition">عسل طبیعی</a></li>';
                        echo '<li><a href="#" class="hover:text-honey-300 transition">ارده و حلوا</a></li>';
                        echo '<li><a href="#" class="hover:text-honey-300 transition">سرکه و ترشی</a></li>';
                        echo '<li><a href="#" class="hover:text-honey-300 transition">دمنوش گیاهی</a></li>';
                        echo '<li><a href="#" class="hover:text-honey-300 transition">خشکبار و آجیل</a></li>';
                    }
                    ?>
                </ul>
            </div>
            <!-- Customer Service -->
            <div>
                <h4 class="font-bold mb-5">خدمات مشتریان</h4>
                <ul class="space-y-3 text-sm text-white/70">
                    <li><a href="#" class="hover:text-honey-300 transition">سوالات متداول</a></li>
                    <li><a href="#" class="hover:text-honey-300 transition">شرایط بازگشت</a></li>
                    <li><a href="#" class="hover:text-honey-300 transition">نحوه ارسال</a></li>
                    <li><a href="#" class="hover:text-honey-300 transition">حریم خصوصی</a></li>
                    <li><a href="#" class="hover:text-honey-300 transition">قوانین و مقررات</a></li>
                </ul>
            </div>
        </div>
    </div>
    <!-- Bottom Bar -->
    <div class="border-t border-white/10">
        <div class="max-w-7xl mx-auto px-4 md:px-6 py-5 flex flex-col md:flex-row items-center justify-between gap-4">
            <p class="text-xs text-white/50">© <?php echo date_i18n( 'Y' ); ?> مطیب. تمامی حقوق محفوظ است.</p>
            <div class="flex items-center gap-4">
                <div class="flex items-center gap-2 px-3 py-1.5 bg-white/10 rounded-lg text-xs"><iconify-icon icon="lucide:shield-check" width="14" class="text-honey-300"></iconify-icon> نماد اعتماد</div>
                <div class="flex items-center gap-2 px-3 py-1.5 bg-white/10 rounded-lg text-xs"><iconify-icon icon="lucide:badge-check" width="14" class="text-honey-300"></iconify-icon> ساماندهی</div>
            </div>
        </div>
    </div>
</footer>

<!-- ===== MOBILE BOTTOM NAV ===== -->
<nav class="md:hidden fixed bottom-0 left-0 right-0 z-50 bg-white/90 dark:bg-dark-card/90 backdrop-blur-xl border-t border-cream-200 dark:border-dark-border bottom-nav">
    <div class="flex items-center justify-around py-2">
        <a href="<?php echo esc_url( home_url( '/' ) ); ?>" class="flex flex-col items-center gap-0.5 px-3 py-1.5 text-forest-500 dark:text-forest-300">
            <iconify-icon icon="lucide:home" width="22"></iconify-icon>
            <span class="text-[10px] font-medium">خانه</span>
        </a>
        <a href="<?php echo esc_url( get_permalink( wc_get_page_id( 'shop' ) ) ); ?>" class="flex flex-col items-center gap-0.5 px-3 py-1.5 text-cream-500 dark:text-dark-muted">
            <iconify-icon icon="lucide:grid-3x3" width="22"></iconify-icon>
            <span class="text-[10px] font-medium">دسته‌بندی</span>
        </a>
        <button onclick="openCart()" class="relative flex flex-col items-center gap-0.5 px-3 py-1.5 text-cream-500 dark:text-dark-muted">
            <iconify-icon icon="lucide:shopping-bag" width="22"></iconify-icon>
            <span class="text-[10px] font-medium">سبد خرید</span>
            <span id="mobile-cart-count" class="absolute -top-0.5 right-1 w-4 h-4 bg-honey-400 text-white text-[9px] font-bold rounded-full flex items-center justify-center hidden">0</span>
        </button>
        <button onclick="openMobileMenu()" class="flex flex-col items-center gap-0.5 px-3 py-1.5 text-cream-500 dark:text-dark-muted">            <iconify-icon icon="lucide:user" width="22"></iconify-icon>
            <span class="text-[10px] font-medium">حساب من</span>
        </button>
    </div>
</nav>

<!-- Spacer for mobile nav -->
<div class="md:hidden h-16"></div>

<?php wp_footer(); ?>
</body>
</html>