{% extends "base.html" %}

{% block title %}Главная - Wanlanda{% endblock %}

{% block content %}
<!-- Слайдшоу -->
<div class="relative mb-8 h-64 sm:h-96 overflow-hidden rounded-lg">
    <div class="absolute inset-0 flex">
        <img src="/static/img/pbanner.jpg" alt="Wanlanda фильтры" class="object-cover w-full">
        <!-- <img src="/static/img/b1.jpg" alt="Производство Wanlanda" class="object-cover w-full">
        <img src="/static/img/slide3.jpg" alt="Качество Wanlanda" class="object-cover w-full"> -->
    </div>
    <!-- <div class="absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center">
        <h1 class="text-3xl sm:text-5xl font-bold text-white text-center">Wanlanda</h1>
    </div> -->
</div>

<!-- Преимущества -->
<section class="mb-12 bg-wanlanda-green text-white py-8 px-4 rounded-lg">
    <div class="container mx-auto">
        <h2 class="text-2xl sm:text-3xl font-bold mb-6 text-center">Наши преимущества</h2>
        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
            <div class="text-center">
                <svg class="w-12 h-12 mx-auto mb-4" 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="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
                <h3 class="font-semibold">Эксклюзивное представительство Wanlanda в Сибири</h3>
            </div>
            <div class="text-center">
                <svg class="w-12 h-12 mx-auto mb-4" 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="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
                <h3 class="font-semibold">Оперативная доставка по всей Сибири</h3>
            </div>
            <div class="text-center">
                <svg class="w-12 h-12 mx-auto mb-4" 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="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01"></path></svg>
                <h3 class="font-semibold">Широкий ассортимент фильтров</h3>
            </div>
            <div class="text-center">
                <svg class="w-12 h-12 mx-auto mb-4" 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="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"></path></svg>
                <h3 class="font-semibold">Гарантия качества на продукцию</h3>
            </div>
            <div class="text-center">
                <svg class="w-12 h-12 mx-auto mb-4" 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="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"></path></svg>
                <h3 class="font-semibold">Собственный склад с большим запасом товаров</h3>
            </div>
            <div class="text-center">
                <svg class="w-12 h-12 mx-auto mb-4" 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="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"></path></svg>
                <h3 class="font-semibold">Ответственная поддержка менеджеров</h3>
            </div>
        </div>
    </div>
</section>

<!-- Типы фильтров -->
<section class="mb-12">
    <h2 class="text-2xl sm:text-3xl font-bold mb-6 text-wanlanda-green">Типы фильтров Wanlanda</h2>
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
        <div class="bg-white p-4 rounded-lg shadow">
            <img src="/static/img/air-filter.jpg" alt="Воздушный фильтр" class="w-fit object-cover mb-4 rounded">
            <h3 class="font-semibold mb-2">Воздушные фильтры</h3>
            <p class="text-sm mb-4">Очищают воздух, поступающий в двигатель, от пыли и других загрязнений.</p>
            <a href="/catalog/air-filters" class="text-wanlanda-green hover:underline">Подробнее</a>
        </div>
        <div class="bg-white p-4 rounded-lg shadow">
            <img src="/static/img/oil-filter.jpg" alt="Масляный фильтр" class="w-fit object-cover mb-4 rounded">
            <h3 class="font-semibold mb-2">Масляные фильтры</h3>
            <p class="text-sm mb-4">Очищают масло от абразивных частиц, продлевая срок службы двигателя.</p>
            <a href="/catalog/oil-filters" class="text-wanlanda-green hover:underline">Подробнее</a>
        </div>
        <div class="bg-white p-4 rounded-lg shadow">
            <img src="/static/img/fuel-filter.jpg" alt="Топливный фильтр" class="w-fit object-cover mb-4 rounded">
            <h3 class="font-semibold mb-2">Топливные фильтры</h3>
            <p class="text-sm mb-4">Защищают двигатель от загрязнений в топливе, обеспечивая его эффективную работу.</p>
            <a href="/catalog/fuel-filters" class="text-wanlanda-green hover:underline">Подробнее</a>
        </div>
        <div class="bg-white p-4 rounded-lg shadow">
            <img src="/static/img/cabin-filter.jpg" alt="Салонный фильтр" class="w-fit object-cover mb-4 rounded">
            <h3 class="font-semibold mb-2">Салонные фильтры</h3>
            <p class="text-sm mb-4">Очищают воздух в салоне от пыльцы, аллергенов и других загрязнений.</p>
            <a href="/catalog/cabin-filters" class="text-wanlanda-green hover:underline">Подробнее</a>
        </div>
    </div>
    <div class="text-center mt-8">
        <a href="/catalog" class="bg-wanlanda-green text-white px-6 py-3 rounded-lg hover:bg-green-600 transition">Смотреть все фильтры</a>
    </div>
</section>

<!-- О компании -->
<section class="mb-12 bg-white p-6 rounded-lg shadow">
    <h2 class="text-2xl sm:text-3xl font-bold mb-6 text-wanlanda-green">О компании</h2>
    <div class="grid sm:grid-cols-2 gap-6">
        <div>
            <h3 class="text-xl font-semibold mb-4">АНТХИЛЛ - официальный дилер Wanlanda в Сибири</h3>
            <p class="mb-4">Компания АНТХИЛЛ является первым  официальным сертифицированным дилером завода-производителя фильтрующих элементов под брендом WANLANDA на территории Сибирского Федерального округа. </p>
            <p class="mb-4">Применение предлагаемых нами фильтров очень обширное, начиная легковых/грузовых автомобилей, заканчивая карьерной спецтехникой. Наши фильтры по качеству сравнимы с оригиналами мировых производителей, таких как: Shantui, Shacman, Shaanxi, Howo, KAMA3 и многих других.</p>
        </div>
        <div>
            <h3 class="text-xl font-semibold mb-4">Wanlanda</h3>
            <p class="mb-4">Компания Guanzhou Wanlanda Auto Parts Co. Ltd. была основана в 1989 году.  Спустя 35 лет завод является огромным предприятием с передовыми производственными и испытательными мощностями.
                Wanlanda Filter специализируется на воздушных, салонных, масляных, топливных, фильтрах  для всех видов автомобилей и инженерной техники.
            </p>
            <p class="mb-4">
                Для обеспечения высокоэффективной фильтрации и длительного срока службы фильтры Wanlanda производятся строго в соответствии с оригинальными заводскими спецификациями.
            </p>
        </div>
    </div>
</section>

<!-- Новости и события -->
<!-- <section class="mb-12">
    <h2 class="text-2xl sm:text-3xl font-bold mb-6 text-wanlanda-green">Новости и события</h2>
    <div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-6">
        <div class="bg-white p-4 rounded-lg shadow">
            <h3 class="font-semibold mb-2">Открытие нового склада в Санкт-Петербурге</h3>
            <p class="text-gray-600 mb-2">15 июня 2024</p>
            <p>Мы рады сообщить об открытии нового логистического центра в Санкт-Петербурге, что позволит нам ускорить доставку по Северо-Западному региону.</p>
        </div>
        <div class="bg-white p-4 rounded-lg shadow">
            <h3 class="font-semibold mb-2">Участие в выставке "АвтоТехЭкспо 2024"</h3>
            <p class="text-gray-600 mb-2">1-5 сентября 2024</p>
            <p>Приглашаем посетить наш стенд на ежегодной выставке "АвтоТехЭкспо 2024" в Москве. Мы представим новинки нашей продукции.</p>
        </div>
        <div class="bg-white p-4 rounded-lg shadow">
            <h3 class="font-semibold mb-2">Запуск новой линейки промышленных фильтров</h3>
            <p class="text-gray-600 mb-2">10 июля 2024</p>
            <p>Wanlanda представляет новую серию высокоэффективных промышленных фильтров для тяжелой техники.</p>
        </div>
    </div>
</section> -->

<!-- Контакты -->
<section class="bg-white  p-6 rounded-lg shadow">
    <h2 class="text-2xl sm:text-3xl font-bold mb-6 text-wanlanda-green">Свяжитесь с нами</h2>
    <div class="grid sm:grid-cols-2 gap-6">
        <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>
            <h3 class="text-xl font-semibold mb-4">Часы работы</h3>
            <p class="mb-2">Пн-Пт: 9:00 - 18:00</p>
            <!-- <p class="mb-2">Сб: 10:00 - 15:00</p> -->
            <p class="mb-2">Сб, Вс: выходной</p>
        </div>
        <div>
            <a href="/contacts" class="text-wanlanda-green px-6 py-2 rounded-lg hover:bg-gray-100 transition">Получить консультацию</a>
        </div>

    </div>
</section>
{% endblock %}

{% block extra_js %}
<script>
    // Простой слайдер
    const slides = document.querySelectorAll('.relative > .flex > img');
    let currentSlide = 0;
    
    function showSlide(n) {
        slides[currentSlide].style.display = 'none';
        currentSlide = (n + slides.length) % slides.length;
        slides[currentSlide].style.display = 'block';
    }
    
    function nextSlide() {
        showSlide(currentSlide + 1);
    }
    
    // Инициализация слайдера
    showSlide(0);
    setInterval(nextSlide, 5000); // Меняем слайд каждые 5 секунд
</script>
{% endblock %}