<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{% block title %}Wanlanda{% endblock %}</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        'wanlanda-green': '#4CAF50',
                    }
                }
            }
        }
    </script>
</head>
<body class="flex flex-col min-h-screen bg-gray-100">
    <header class="bg-black text-white shadow-md">
        <nav class="container mx-auto px-4 py-4">
            <div class="flex justify-between items-center">
                <a href="/" class="text-2xl font-bold flex items-center">
                    <!-- <span class="bg-wanlanda-green text-black px-2 py-1 mr-2">W</span> -->
                    <span class="sm:inline">WANLANDA</span>
                </a>
                <button id="mobile-menu-button" class="sm:hidden">
                    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7"></path>
                    </svg>
                </button>
                <ul class="hidden sm:flex space-x-6">
                    <a href="/" class="hover:text-wanlanda-green transition">Главная</a>
                    <a href="/catalog" class="hover:text-wanlanda-green transition">Каталог</a>
                    <a href="/about" class="hover:text-wanlanda-green transition">О компании</a>
                    <a href="/certificates" class="hover:text-wanlanda-green transition">Сертификаты</a>
                    <a href="/contacts" class="hover:text-wanlanda-green transition">Контакты</a>
                </ul>
            </div>
            <div id="mobile-menu" class="hidden sm:hidden mt-4">
                <ul class="flex flex-col space-y-2">
                    <a href="/" class="block hover:text-wanlanda-green transition">Главная</a>
                    <a href="/catalog" class="block hover:text-wanlanda-green transition">Каталог</a>
                    <a href="/about" class="block hover:text-wanlanda-green transition">О компании</a>
                    <a href="/certificates" class="block hover:text-wanlanda-green transition">Сертификаты</a>
                    <a href="/contacts" class="block hover:text-wanlanda-green transition">Контакты</a>
                </ul>
            </div>
        </nav>
    </header>

    <main class="flex-grow container mx-auto px-4 py-8">
        {% block content %}{% endblock %}
    </main>

    <footer class="bg-black text-white py-8">
        <div class="container mx-auto px-4">
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
                <div>
                    <h3 class="text-xl font-semibold mb-4">О компании</h3>
                    <p class="mb-4">Anthill - официальный дилер Wanlanda в Сибирском федеральном округе. Мы поставляем высококачественные фильтры для автомобильной и промышленной техники.</p>
                    <p>&copy; 2024 Anthill. Все права защищены.</p>
                </div>
                <div>
                    <h3 class="text-xl font-semibold mb-4">Продукция</h3>
                    <ul class="space-y-2">
                        <li><a href="/catalog/air-filters" class="hover:text-wanlanda-green transition">Воздушные фильтры</a></li>
                        <li><a href="/catalog/oil-filters" class="hover:text-wanlanda-green transition">Масляные фильтры</a></li>
                        <li><a href="/catalog/fuel-filters" class="hover:text-wanlanda-green transition">Топливные фильтры</a></li>
                        <li><a href="/catalog/cabin-filters" class="hover:text-wanlanda-green transition">Салонные фильтры</a></li>
                    </ul>
                </div>
                <div>
                    <h3 class="text-xl font-semibold mb-4">Информация</h3>
                    <ul class="space-y-2">
                        <li><a href="/about" class="hover:text-wanlanda-green transition">О нас</a></li>
                        <li><a href="/catalog" class="hover:text-wanlanda-green transition">Каталог</a></li>
                        <li><a href="/certificates" class="hover:text-wanlanda-green transition">Сертификаты</a></li>

                        <!-- <li><a href="/news" class="hover:text-wanlanda-green transition">Новости</a></li> -->
                        <!-- <li><a href="/delivery" class="hover:text-wanlanda-green transition">Доставка</a></li> -->
                        <!-- <li><a href="/warranty" class="hover:text-wanlanda-green transition">Гарантия</a></li> -->
                        <li><a href="/contacts" class="hover:text-wanlanda-green transition">Контакты</a></li>
                    </ul>
                </div>
                <div>
                    <h3 class="text-xl font-semibold mb-4">Контакты</h3>
                    <p class="mb-2">Адрес: г. Новокузнецк, ул. Тольятти, д. 5Б, пом. 10</p>
                    <p class="mb-2">Телефон: +7 (905) 906-84-65</p>
                    <p class="mb-2">Email: anthillsib@gmail.com</p>
                </div>
            </div>
        </div>
    </footer>

    <script>
        document.getElementById('mobile-menu-button').addEventListener('click', function() {
            document.getElementById('mobile-menu').classList.toggle('hidden');
        });
    </script>
    {% block extra_js %}{% endblock %}

</body>
</html>