<?php
$stmt_menu_cats = $pdo->query("SELECT * FROM categories ORDER BY id DESC");
$menu_categories = $stmt_menu_cats->fetchAll();
?>
<div id="mobile-menu" onclick="if(event.target === this) this.classList.remove('active')">
    <div class="mobile-menu-content">
        <div class="mobile-menu-header" style="display: flex; justify-content: space-between; align-items: center; padding: 15px 20px; border-bottom: 1px solid #e2e8f0;">
            <h3 style="margin: 0; font-size: 1.2rem; color: #1e3a8a;">Menu</h3>
            <div onclick="document.getElementById('mobile-menu').classList.remove('active')" style="cursor: pointer; padding: 5px; color: #64748b;">
                <svg width="24" height="24" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" /></svg>
            </div>
        </div>
        <div class="mobile-menu-body" style="padding: 10px 0;">
            <ul style="list-style: none; padding: 0; margin: 0;">
                <li>
                    <a href="/" style="display: flex; align-items: center; padding: 12px 20px; text-decoration: none; color: #333; border-bottom: 1px solid #f1f5f9;">
                        <svg width="24" height="24" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" style="margin-right: 15px; color: #1e3a8a;"><path stroke-linecap="round" stroke-linejoin="round" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" /></svg>
                        <span style="font-size: 1rem; font-weight: 500;">Home</span>
                    </a>
                </li>
                
                <li style="padding: 15px 20px 5px; font-size: 0.85rem; text-transform: uppercase; color: #64748b; font-weight: bold;">Categories</li>
                
                <?php foreach($menu_categories as $m_cat): ?>
                    <li>
                        <a href="products?category=<?php echo $m_cat['id']; ?>" style="display: flex; align-items: center; padding: 12px 20px; text-decoration: none; color: #333; border-bottom: 1px solid #f1f5f9;">
                            <img src="<?php echo get_image_url('categories', $m_cat['icon']); ?>" alt="<?php echo htmlspecialchars($m_cat['name']); ?>" style="width: 24px; height: 24px; object-fit: contain; margin-right: 15px; border-radius: 4px;">
                            <span style="font-size: 1rem; font-weight: 500;"><?php echo htmlspecialchars($m_cat['name']); ?></span>
                        </a>
                    </li>
                <?php endforeach; ?>
                
                <?php if(count($menu_categories) == 0): ?>
                    <li style="padding: 15px 20px; color: #64748b; font-size: 0.9rem;">No categories found.</li>
                <?php endif; ?>
            </ul>
        </div>
    </div>
</div>

<style>
    #mobile-menu {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        background: rgba(0,0,0,0.5);
        z-index: 2000;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s ease, visibility 0.3s ease;
    }
    #mobile-menu.active {
        opacity: 1;
        visibility: visible;
    }
    .mobile-menu-content {
        width: 80%;
        max-width: 320px;
        height: 100%;
        background: #ffffff;
        box-shadow: 2px 0 10px rgba(0,0,0,0.1);
        overflow-y: auto;
        position: absolute;
        left: -100%;
        transition: left 0.3s ease;
    }
    #mobile-menu.active .mobile-menu-content {
        left: 0;
    }
</style>
