{% extends 'theme/base.html' %}
{% load static %}

{% block title %}AL WASAY{% endblock %}

{% block content %}
<div id="thank-you-modal" class="fixed inset-0 z-50 hidden">
    <div class="absolute inset-0 bg-black/60 backdrop-blur-sm"></div>
    <div class="relative min-h-screen flex items-center justify-center p-4">
        <div class="bg-white rounded-2xl shadow-2xl max-w-md w-full p-8 text-center transform scale-95 opacity-0 transition-all duration-300" id="modal-content">
            <div class="w-20 h-20 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-6">
                <svg class="w-10 h-10 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                </svg>
            </div>
            <h3 class="text-2xl font-semibold font-poppins text-primary-dark mb-3">Thank You!</h3>
            <p class="text-secondary font-poppins mb-6">Your enquiry has been submitted successfully. Our team will get back to you within 24-48 hours.</p>
            <a href="{% url 'home:index' %}" class="inline-block px-8 py-3 bg-primary rounded-md text-accent text-sm font-medium font-poppins capitalize hover:bg-primary-dark transition-all duration-300">
                Back to Website
            </a>
        </div>
    </div>
</div>

<button id="back-to-top" class="fixed bottom-6 right-6 z-50 w-12 h-12 bg-primary text-accent rounded-full shadow-lg flex items-center justify-center opacity-0 invisible translate-y-4 transition-all duration-300 hover:bg-primary-dark hover:shadow-xl">
    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 10l7-7m0 0l7 7m-7-7v18"></path>
    </svg>
</button>

<section class="relative min-h-screen bg-accent overflow-hidden">
    <div id="hero-slider" class="absolute inset-0 w-full h-full">
        <div class="hero-slides relative w-full h-full">
            <div class="hero-slide active absolute inset-0 w-full h-full">
                <img src="{% static 'images/landingpage/1.png' %}" alt="Auto parts background" class="absolute inset-0 w-full h-full object-cover">
            </div>
            <div class="hero-slide absolute inset-0 w-full h-full">
                <img src="{% static 'images/landingpage/2.png' %}" alt="Auto parts background" class="absolute inset-0 w-full h-full object-cover">
            </div>
            <div class="hero-slide absolute inset-0 w-full h-full">
                <img src="{% static 'images/landingpage/3.png' %}" alt="Auto parts background" class="absolute inset-0 w-full h-full object-cover">
            </div>
            <div class="hero-slide absolute inset-0 w-full h-full">
                <img src="{% static 'images/landingpage/4.png' %}" alt="Auto parts background" class="absolute inset-0 w-full h-full object-cover">
            </div>
        </div>
    </div>

    <div class="absolute inset-0 bg-gradient-to-r from-black/80 via-black/50 to-transparent z-[5]"></div>
    <div class="absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-black/30 z-[5]"></div>

    <div class="absolute bottom-8 left-1/2 -translate-x-1/2 z-20 flex items-center gap-3">
        <button class="hero-progress-btn active group relative h-1.5 w-12 lg:w-16 bg-white/30 rounded-full overflow-hidden transition-all duration-300 hover:bg-white/40" data-slide="0">
            <span class="hero-progress-bar absolute left-0 top-0 h-full bg-accent rounded-full"></span>
        </button>
        <button class="hero-progress-btn group relative h-1.5 w-12 lg:w-16 bg-white/30 rounded-full overflow-hidden transition-all duration-300 hover:bg-white/40" data-slide="1">
            <span class="hero-progress-bar absolute left-0 top-0 h-full bg-accent rounded-full"></span>
        </button>
        <button class="hero-progress-btn group relative h-1.5 w-12 lg:w-16 bg-white/30 rounded-full overflow-hidden transition-all duration-300 hover:bg-white/40" data-slide="2">
            <span class="hero-progress-bar absolute left-0 top-0 h-full bg-accent rounded-full"></span>
        </button>
        <button class="hero-progress-btn group relative h-1.5 w-12 lg:w-16 bg-white/30 rounded-full overflow-hidden transition-all duration-300 hover:bg-white/40" data-slide="3">
            <span class="hero-progress-bar absolute left-0 top-0 h-full bg-accent rounded-full"></span>
        </button>
    </div>

    <div class="relative z-10 px-6 lg:px-20 xl:px-32 py-20 lg:py-32 min-h-screen flex items-center">
        <div class="max-w-3xl">
            <p class="hero-text text-accent text-xl lg:text-2xl font-normal font-poppins uppercase mb-3">
                Your Trusted Partner
            </p>
            <h1 class="hero-text text-accent text-4xl lg:text-5xl xl:text-7xl font-semibold font-poppins uppercase leading-tight mb-6">
                In Auto Spare Parts
            </h1>
            <p class="hero-text text-accent/90 text-base lg:text-lg font-normal font-poppins leading-relaxed mb-10 max-w-2xl">
                Established in 2020, Al Wasay Auto Spare Parts is backed by over 15 years of industry expertise. We deliver genuine automotive components with honesty, technical excellence, and unmatched customer care across the UAE and beyond.
            </p>
            <a href="{% url 'users:login' %}" class="hero-text inline-block px-8 py-3.5 bg-accent rounded-md text-primary text-sm font-medium font-poppins capitalize hover:bg-primary hover:text-accent transition-all duration-300">
                Get Started
            </a>
        </div>
    </div>
</section>

<style>
    .hero-slide {
        opacity: 0;
        visibility: hidden;
        transition: opacity 1.2s cubic-bezier(0.4, 0, 0.2, 1), visibility 1.2s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .hero-slide.active {
        opacity: 1;
        visibility: visible;
    }
    .hero-slide img {
        transform: scale(1);
        transition: transform 0.5s ease-out;
    }
    .hero-slide.active img {
        animation: kenBurnsZoom 6s ease-out forwards;
    }
    @keyframes kenBurnsZoom {
        0% { transform: scale(1); }
        100% { transform: scale(1.12); }
    }
    .hero-text {
        opacity: 0;
        transform: translateY(30px);
        animation: textFadeIn 0.8s ease-out forwards;
    }
    .hero-text:nth-child(1) { animation-delay: 0.2s; }
    .hero-text:nth-child(2) { animation-delay: 0.4s; }
    .hero-text:nth-child(3) { animation-delay: 0.6s; }
    .hero-text:nth-child(4) { animation-delay: 0.8s; }
    @keyframes textFadeIn {
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
    .hero-progress-bar {
        width: 0%;
        transition: width 0.3s ease-out;
    }
    .hero-progress-btn.active .hero-progress-bar {
        animation: progressFill 5s linear forwards;
    }
    .hero-progress-btn.completed .hero-progress-bar {
        width: 100%;
        animation: none;
    }
    .hero-progress-btn.paused .hero-progress-bar {
        animation-play-state: paused;
    }
    @keyframes progressFill {
        from { width: 0%; }
        to { width: 100%; }
    }
</style>

<section class="bg-accent pt-20">
    <div class="px-6 lg:px-20 xl:px-32">
        <div class="mb-10">
            <h2 class="text-primary-dark text-2xl lg:text-3xl font-medium font-poppins mb-3">Why Us</h2>
            <p class="text-secondary text-base font-normal font-poppins max-w-2xl">
                Backed by 15+ years of industry expertise, we deliver genuine parts, reliability, and unmatched service to customers across the UAE and beyond.
            </p>
        </div>
        
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-5">
            <div class="group bg-white rounded-xl border border-stone-200 p-6 hover:shadow-lg hover:border-primary/30 transition-all duration-300">
                <div class="w-14 h-14 bg-primary rounded-xl flex items-center justify-center mb-5 group-hover:scale-105 transition-transform duration-300">
                    <svg class="w-7 h-7 text-accent" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" 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>
                </div>
                <h3 class="text-primary-dark text-lg font-semibold font-poppins mb-2">Genuine Parts</h3>
                <p class="text-secondary text-sm font-normal font-poppins leading-relaxed">
                    100% authentic OEM and aftermarket parts sourced directly from trusted manufacturers worldwide.
                </p>
            </div>
            
            <div class="group bg-white rounded-xl border border-stone-200 p-6 hover:shadow-lg hover:border-primary/30 transition-all duration-300">
                <div class="w-14 h-14 bg-primary rounded-xl flex items-center justify-center mb-5 group-hover:scale-105 transition-transform duration-300">
                    <svg class="w-7 h-7 text-accent" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M13 10V3L4 14h7v7l9-11h-7z"></path>
                    </svg>
                </div>
                <h3 class="text-primary-dark text-lg font-semibold font-poppins mb-2">Fast Delivery</h3>
                <p class="text-secondary text-sm font-normal font-poppins leading-relaxed">
                    Swift delivery across Dubai and UAE with real-time tracking. Get your parts delivered quickly and reliably.
                </p>
            </div>
            
            <div class="group bg-white rounded-xl border border-stone-200 p-6 hover:shadow-lg hover:border-primary/30 transition-all duration-300">
                <div class="w-14 h-14 bg-primary rounded-xl flex items-center justify-center mb-5 group-hover:scale-105 transition-transform duration-300">
                    <svg class="w-7 h-7 text-accent" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 12l2 2 4-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 014.438 0 3.42 3.42 0 001.946.806 3.42 3.42 0 013.138 3.138 3.42 3.42 0 00.806 1.946 3.42 3.42 0 010 4.438 3.42 3.42 0 00-.806 1.946 3.42 3.42 0 01-3.138 3.138 3.42 3.42 0 00-1.946.806 3.42 3.42 0 01-4.438 0 3.42 3.42 0 00-1.946-.806 3.42 3.42 0 01-3.138-3.138 3.42 3.42 0 00-.806-1.946 3.42 3.42 0 010-4.438 3.42 3.42 0 00.806-1.946 3.42 3.42 0 013.138-3.138z"></path>
                    </svg>
                </div>
                <h3 class="text-primary-dark text-lg font-semibold font-poppins mb-2">Certified Expertise</h3>
                <p class="text-secondary text-sm font-normal font-poppins leading-relaxed">
                    Certified Kaizen (Kodawari) expertise with Toyota National Pricing Department experience.
                </p>
            </div>
            
            <div class="group bg-white rounded-xl border border-stone-200 p-6 hover:shadow-lg hover:border-primary/30 transition-all duration-300">
                <div class="w-14 h-14 bg-primary rounded-xl flex items-center justify-center mb-5 group-hover:scale-105 transition-transform duration-300">
                    <svg class="w-7 h-7 text-accent" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M18.364 5.636l-3.536 3.536m0 5.656l3.536 3.536M9.172 9.172L5.636 5.636m3.536 9.192l-3.536 3.536M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-5 0a4 4 0 11-8 0 4 4 0 018 0z"></path>
                    </svg>
                </div>
                <h3 class="text-primary-dark text-lg font-semibold font-poppins mb-2">24/7 Support</h3>
                <p class="text-secondary text-sm font-normal font-poppins leading-relaxed">
                    Round-the-clock customer support to assist you with orders, inquiries, and technical questions.
                </p>
            </div>
        </div>
    </div>
</section>

<section class="bg-accent pt-20 overflow-hidden">
    <div class="px-6 lg:px-20 xl:px-32 mb-8">
        <h2 class="text-primary-dark text-2xl lg:text-3xl font-medium font-poppins">Our Brands</h2>
    </div>
    
    <div class="relative">
        <div class="absolute left-0 top-0 bottom-0 w-20 lg:w-32 bg-gradient-to-r from-accent to-transparent z-10 pointer-events-none"></div>
        <div class="absolute right-0 top-0 bottom-0 w-20 lg:w-32 bg-gradient-to-l from-accent to-transparent z-10 pointer-events-none"></div>
        
        <div class="brands-scroll flex gap-8 lg:gap-12 animate-scroll">
            <div class="flex gap-4 lg:gap-8 flex-shrink-0">
                <div class="brand-card bg-white rounded-xl border border-stone-200 p-6 lg:p-8 flex flex-col items-center justify-center w-36 h-36 lg:w-44 lg:h-44 hover:shadow-lg hover:border-primary/30 transition-all duration-300">
                    <img src="{% static 'images/brands/toyota.png' %}" alt="Toyota" class="w-16 h-16 lg:w-20 lg:h-20 object-contain mb-3">
                    <span class="text-primary text-xs lg:text-sm font-bold font-poppins uppercase">Toyota</span>
                </div>
                <div class="brand-card bg-white rounded-xl border border-stone-200 p-6 lg:p-8 flex flex-col items-center justify-center w-36 h-36 lg:w-44 lg:h-44 hover:shadow-lg hover:border-primary/30 transition-all duration-300">
                    <img src="{% static 'images/brands/lexus.png' %}" alt="Lexus" class="w-16 h-16 lg:w-20 lg:h-20 object-contain mb-3">
                    <span class="text-primary text-xs lg:text-sm font-bold font-poppins uppercase">Lexus</span>
                </div>
                <div class="brand-card bg-white rounded-xl border border-stone-200 p-6 lg:p-8 flex flex-col items-center justify-center w-36 h-36 lg:w-44 lg:h-44 hover:shadow-lg hover:border-primary/30 transition-all duration-300">
                    <img src="{% static 'images/brands/nissan.png' %}" alt="Nissan" class="w-16 h-16 lg:w-20 lg:h-20 object-contain mb-3">
                    <span class="text-primary text-xs lg:text-sm font-bold font-poppins uppercase">Nissan</span>
                </div>
                <div class="brand-card bg-white rounded-xl border border-stone-200 p-6 lg:p-8 flex flex-col items-center justify-center w-36 h-36 lg:w-44 lg:h-44 hover:shadow-lg hover:border-primary/30 transition-all duration-300">
                    <img src="{% static 'images/brands/infiniti.png' %}" alt="Infiniti" class="w-16 h-16 lg:w-20 lg:h-20 object-contain mb-3">
                    <span class="text-primary text-xs lg:text-sm font-bold font-poppins uppercase">Infiniti</span>
                </div>
                <div class="brand-card bg-white rounded-xl border border-stone-200 p-6 lg:p-8 flex flex-col items-center justify-center w-36 h-36 lg:w-44 lg:h-44 hover:shadow-lg hover:border-primary/30 transition-all duration-300">
                    <img src="{% static 'images/brands/mitsubishi.png' %}" alt="Mitsubishi" class="w-16 h-16 lg:w-20 lg:h-20 object-contain mb-3">
                    <span class="text-primary text-xs lg:text-sm font-bold font-poppins uppercase">Mitsubishi</span>
                </div>
                <div class="brand-card bg-white rounded-xl border border-stone-200 p-6 lg:p-8 flex flex-col items-center justify-center w-36 h-36 lg:w-44 lg:h-44 hover:shadow-lg hover:border-primary/30 transition-all duration-300">
                    <img src="{% static 'images/brands/mazda.png' %}" alt="Mazda" class="w-16 h-16 lg:w-20 lg:h-20 object-contain mb-3">
                    <span class="text-primary text-xs lg:text-sm font-bold font-poppins uppercase">Mazda</span>
                </div>
                <div class="brand-card bg-white rounded-xl border border-stone-200 p-6 lg:p-8 flex flex-col items-center justify-center w-36 h-36 lg:w-44 lg:h-44 hover:shadow-lg hover:border-primary/30 transition-all duration-300">
                    <img src="{% static 'images/brands/hyundai.png' %}" alt="Hyundai" class="w-16 h-16 lg:w-20 lg:h-20 object-contain mb-3">
                    <span class="text-primary text-xs lg:text-sm font-bold font-poppins uppercase">Hyundai</span>
                </div>
                <div class="brand-card bg-white rounded-xl border border-stone-200 p-6 lg:p-8 flex flex-col items-center justify-center w-36 h-36 lg:w-44 lg:h-44 hover:shadow-lg hover:border-primary/30 transition-all duration-300">
                    <img src="{% static 'images/brands/kia.png' %}" alt="Kia" class="w-16 h-16 lg:w-20 lg:h-20 object-contain mb-3">
                    <span class="text-primary text-xs lg:text-sm font-bold font-poppins uppercase">Kia</span>
                </div>
            </div>
            <div class="flex gap-4 lg:gap-8 flex-shrink-0">
                <div class="brand-card bg-white rounded-xl border border-stone-200 p-6 lg:p-8 flex flex-col items-center justify-center w-36 h-36 lg:w-44 lg:h-44 hover:shadow-lg hover:border-primary/30 transition-all duration-300">
                    <img src="{% static 'images/brands/toyota.png' %}" alt="Toyota" class="w-16 h-16 lg:w-20 lg:h-20 object-contain mb-3">
                    <span class="text-primary text-xs lg:text-sm font-bold font-poppins uppercase">Toyota</span>
                </div>
                <div class="brand-card bg-white rounded-xl border border-stone-200 p-6 lg:p-8 flex flex-col items-center justify-center w-36 h-36 lg:w-44 lg:h-44 hover:shadow-lg hover:border-primary/30 transition-all duration-300">
                    <img src="{% static 'images/brands/lexus.png' %}" alt="Lexus" class="w-16 h-16 lg:w-20 lg:h-20 object-contain mb-3">
                    <span class="text-primary text-xs lg:text-sm font-bold font-poppins uppercase">Lexus</span>
                </div>
                <div class="brand-card bg-white rounded-xl border border-stone-200 p-6 lg:p-8 flex flex-col items-center justify-center w-36 h-36 lg:w-44 lg:h-44 hover:shadow-lg hover:border-primary/30 transition-all duration-300">
                    <img src="{% static 'images/brands/nissan.png' %}" alt="Nissan" class="w-16 h-16 lg:w-20 lg:h-20 object-contain mb-3">
                    <span class="text-primary text-xs lg:text-sm font-bold font-poppins uppercase">Nissan</span>
                </div>
                <div class="brand-card bg-white rounded-xl border border-stone-200 p-6 lg:p-8 flex flex-col items-center justify-center w-36 h-36 lg:w-44 lg:h-44 hover:shadow-lg hover:border-primary/30 transition-all duration-300">
                    <img src="{% static 'images/brands/infiniti.png' %}" alt="Infiniti" class="w-16 h-16 lg:w-20 lg:h-20 object-contain mb-3">
                    <span class="text-primary text-xs lg:text-sm font-bold font-poppins uppercase">Infiniti</span>
                </div>
                <div class="brand-card bg-white rounded-xl border border-stone-200 p-6 lg:p-8 flex flex-col items-center justify-center w-36 h-36 lg:w-44 lg:h-44 hover:shadow-lg hover:border-primary/30 transition-all duration-300">
                    <img src="{% static 'images/brands/mitsubishi.png' %}" alt="Mitsubishi" class="w-16 h-16 lg:w-20 lg:h-20 object-contain mb-3">
                    <span class="text-primary text-xs lg:text-sm font-bold font-poppins uppercase">Mitsubishi</span>
                </div>
                <div class="brand-card bg-white rounded-xl border border-stone-200 p-6 lg:p-8 flex flex-col items-center justify-center w-36 h-36 lg:w-44 lg:h-44 hover:shadow-lg hover:border-primary/30 transition-all duration-300">
                    <img src="{% static 'images/brands/mazda.png' %}" alt="Mazda" class="w-16 h-16 lg:w-20 lg:h-20 object-contain mb-3">
                    <span class="text-primary text-xs lg:text-sm font-bold font-poppins uppercase">Mazda</span>
                </div>
                <div class="brand-card bg-white rounded-xl border border-stone-200 p-6 lg:p-8 flex flex-col items-center justify-center w-36 h-36 lg:w-44 lg:h-44 hover:shadow-lg hover:border-primary/30 transition-all duration-300">
                    <img src="{% static 'images/brands/hyundai.png' %}" alt="Hyundai" class="w-16 h-16 lg:w-20 lg:h-20 object-contain mb-3">
                    <span class="text-primary text-xs lg:text-sm font-bold font-poppins uppercase">Hyundai</span>
                </div>
                <div class="brand-card bg-white rounded-xl border border-stone-200 p-6 lg:p-8 flex flex-col items-center justify-center w-36 h-36 lg:w-44 lg:h-44 hover:shadow-lg hover:border-primary/30 transition-all duration-300">
                    <img src="{% static 'images/brands/kia.png' %}" alt="Kia" class="w-16 h-16 lg:w-20 lg:h-20 object-contain mb-3">
                    <span class="text-primary text-xs lg:text-sm font-bold font-poppins uppercase">Kia</span>
                </div>
            </div>
        </div>
    </div>
</section>

<style>
    @keyframes scroll {
        0% { transform: translateX(0); }
        100% { transform: translateX(calc(-50% - 1.5rem)); }
    }
    .animate-scroll {
        animation: scroll 25s linear infinite;
    }
    .brands-scroll:hover {
        animation-play-state: paused;
    }
</style>

<section class="bg-accent pt-20">
    <div class="px-6 lg:px-20 xl:px-32">
        <h2 class="text-primary-dark text-2xl lg:text-3xl font-medium font-poppins mb-8">Top Rated Products</h2>
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            {% for product in top_rated_products %}
            <div class="relative rounded-xl overflow-hidden h-64 lg:h-80 bg-gradient-to-b from-gray-200 to-gray-100">
                {% if product.main_image %}
                <img src="{{ product.main_image.url }}" alt="{{ product.name }}" class="absolute inset-0 w-full h-full object-cover">
                {% else %}
                <div class="absolute inset-0 w-full h-full flex items-center justify-center bg-gray-200">
                    <svg class="w-16 h-16 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
                    </svg>
                </div>
                {% endif %}
                <div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent"></div>
                <div class="absolute top-6 left-6 bottom-6 right-6 flex flex-col justify-between">
                    <div>
                        <h3 class="text-white text-xl lg:text-2xl font-bold font-poppins capitalize">{{ product.name }}</h3>
                        {% if product.short_description %}
                        <p class="text-white/80 text-sm font-poppins mt-2 line-clamp-2">{{ product.short_description }}</p>
                        {% endif %}
                    </div>
                    <a href="{% url 'products:product_list' %}" class="self-start px-4 py-2 bg-accent rounded-md text-primary text-sm font-normal font-poppins capitalize hover:bg-primary hover:text-accent transition">Read More</a>
                </div>
            </div>
            {% empty %}
            <div class="col-span-full text-center py-12">
                <p class="text-secondary font-poppins">No top rated products available at the moment.</p>
            </div>
            {% endfor %}
        </div>
    </div>
</section>

<section class="bg-accent pt-20">
    <div class="px-6 lg:px-20 xl:px-32">
        <h2 class="text-primary-dark text-2xl lg:text-3xl font-medium font-poppins mb-8">Featured Category</h2>
        <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 lg:gap-5">
            {% for category in featured_categories %}
            <div class="relative rounded-xl overflow-hidden aspect-square group cursor-pointer">
                {% if category.image %}
                <img src="{{ category.image.url }}" alt="{{ category.name }}" class="w-full h-full object-cover group-hover:scale-105 transition duration-300">
                {% else %}
                <img src="{% static 'images/category/category.png' %}" alt="{{ category.name }}" class="w-full h-full object-cover group-hover:scale-105 transition duration-300">
                {% endif %}
                <div class="absolute inset-0 bg-gradient-to-t from-black/50 to-transparent group-hover:opacity-0 transition duration-300"></div>
                <span class="absolute bottom-4 right-4 text-white text-xl lg:text-2xl font-medium font-poppins group-hover:opacity-0 transition duration-300">{{ category.name }}</span>
                <div class="absolute inset-0 bg-stone-950/95 flex flex-col justify-center items-center p-6 text-center opacity-0 group-hover:opacity-100 transition duration-300">
                    <h3 class="text-zinc-100 text-lg lg:text-xl font-semibold font-poppins capitalize mb-2">{{ category.name }}</h3>
                    <p class="text-zinc-100 text-xs lg:text-sm font-normal font-poppins capitalize leading-5 mb-4">
                        {% if category.description %}{{ category.description|truncatewords:12 }}{% else %}Quality auto spare parts for {{ category.name|lower }}. Browse our collection.{% endif %}
                    </p>
                    <a href="{% url 'products:category_products' category.slug %}" class="inline-block px-8 py-3 bg-accent rounded-md text-primary text-sm font-normal font-poppins capitalize hover:bg-primary hover:text-accent transition">Read More</a>
                </div>
            </div>
            {% empty %}
            {% for i in "1234" %}
            <div class="relative rounded-xl overflow-hidden aspect-square group cursor-pointer">
                <img src="{% static 'images/category/category.png' %}" alt="Category" class="w-full h-full object-cover group-hover:scale-105 transition duration-300">
                <div class="absolute inset-0 bg-gradient-to-t from-black/50 to-transparent group-hover:opacity-0 transition duration-300"></div>
                <span class="absolute bottom-4 right-4 text-white text-xl lg:text-2xl font-medium font-poppins group-hover:opacity-0 transition duration-300">Filters</span>
                <div class="absolute inset-0 bg-stone-950/95 flex flex-col justify-center items-center p-6 text-center opacity-0 group-hover:opacity-100 transition duration-300">
                    <h3 class="text-zinc-100 text-lg lg:text-xl font-semibold font-poppins capitalize mb-2">Filters</h3>
                    <p class="text-zinc-100 text-xs lg:text-sm font-normal font-poppins capitalize leading-5 mb-4">Tellus Fringilla Posuere Facilisis Pulvinar. Cursus Elit Sodales Orci</p>
                    <a href="#" class="inline-block px-8 py-3 bg-accent rounded-md text-primary text-sm font-normal font-poppins capitalize hover:bg-primary hover:text-accent transition">Read More</a>
                </div>
            </div>
            {% endfor %}
            {% endfor %}
        </div>
    </div>
</section>

<section class="bg-accent py-20">
    <div class="px-6 lg:px-20 xl:px-32">
        <h2 class="text-primary-dark text-2xl lg:text-3xl font-medium font-poppins mb-8">Latest Blogs</h2>
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            {% for post in latest_posts %}
            <div class="bg-white rounded-xl p-5">
                {% if post.featured_image %}
                <img src="{{ post.featured_image.url }}" alt="{{ post.title }}" class="w-full h-44 object-cover rounded-md mb-5">
                {% else %}
                <div class="w-full h-44 bg-stone-800 rounded-md flex items-center justify-center mb-5">
                    <svg class="w-12 h-12 text-stone-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
                    </svg>
                </div>
                {% endif %}
                <div class="space-y-3">
                    <div>
                        <p class="text-primary text-sm font-semibold font-poppins">{% if post.category %}{{ post.category.name }}{% else %}Blog{% endif %}</p>
                        <p class="text-secondary text-sm font-normal font-poppins">{{ post.published_at|date:"F d, Y" }}</p>
                    </div>
                    <h3 class="text-primary-dark text-lg lg:text-xl font-semibold font-poppins">{{ post.title|truncatewords:6 }}</h3>
                    <p class="text-secondary text-sm font-normal font-poppins leading-relaxed">{{ post.excerpt|truncatewords:10 }}</p>
                    <a href="{{ post.get_absolute_url }}" class="block w-full py-3 bg-white rounded-md border border-primary text-secondary text-sm font-normal font-poppins capitalize text-center hover:bg-primary hover:text-accent hover:border-primary transition">Read More</a>
                </div>
            </div>
            {% empty %}
            <div class="col-span-3 text-center py-8">
                <p class="text-secondary font-poppins">No blog posts available yet.</p>
            </div>
            {% endfor %}
        </div>
    </div>
</section>

<section class="relative min-h-screen" id="enquiry">
    <img src="{% static 'images/enquiry.png' %}" alt="Background" class="absolute inset-0 h-full w-full object-center object-cover">
    <div class="relative z-10 px-6 lg:px-20 xl:px-32 py-16 lg:py-28">
        <div class="max-w-xl">
            <h2 class="text-accent text-2xl lg:text-3xl font-semibold font-poppins capitalize mb-12">Enquiry Form</h2>
            <form method="post" action="{% url 'home:index' %}#enquiry" class="space-y-5" id="enquiry-form">
                {% csrf_token %}
                <div class="grid grid-cols-1 md:grid-cols-2 gap-5">
                    <input type="text" name="title" placeholder="Title" class="w-full p-3.5 bg-transparent rounded-md border border-accent/30 text-accent text-sm font-poppins placeholder-accent focus:outline-none focus:border-accent">
                    <input type="text" name="customer_name" placeholder="Customer Name" required class="w-full p-3.5 bg-transparent rounded-md border border-accent/30 text-accent text-sm font-poppins placeholder-accent focus:outline-none focus:border-accent">
                </div>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-5">
                    <input type="text" name="business_name" placeholder="Business Name" class="w-full p-3.5 bg-transparent rounded-md border border-accent/30 text-accent text-sm font-poppins placeholder-accent focus:outline-none focus:border-accent">
                    <input type="email" name="email" placeholder="Email" required class="w-full p-3.5 bg-transparent rounded-md border border-accent/30 text-accent text-sm font-poppins placeholder-accent focus:outline-none focus:border-accent">
                </div>
                {% include 'components/phone_input.html' with name='phone' required=True %}
                <div class="grid grid-cols-1 md:grid-cols-2 gap-5">
                    {% include 'components/country_select.html' with name='country' required=True %}
                    <input type="text" name="vin_chasis_number" placeholder="VIN/Chasis Number" class="w-full p-3.5 bg-transparent rounded-md border border-accent/30 text-accent text-sm font-poppins placeholder-accent focus:outline-none focus:border-accent">
                </div>
                <textarea name="comments" rows="6" placeholder="Comments" required class="w-full p-3.5 bg-transparent rounded-md border border-accent/30 text-accent text-sm font-poppins placeholder-accent focus:outline-none focus:border-accent resize-none"></textarea>
                <button type="submit" class="px-8 py-3 bg-accent rounded-md text-primary text-sm font-normal font-poppins capitalize hover:bg-primary hover:text-accent transition">Submit Request</button>
            </form>
        </div>
    </div>
</section>

<section class="bg-accent pt-20">
    <div class="px-6 lg:px-20 xl:px-32">
        <h2 class="text-primary-dark text-2xl lg:text-3xl font-medium font-poppins mb-10">Testimonials</h2>
        
        <div class="relative overflow-hidden">
            <div id="testimonial-slider" class="flex transition-transform duration-500 ease-in-out">
                <div class="w-full flex-shrink-0 grid grid-cols-1 md:grid-cols-3 gap-6 lg:gap-8 px-1">
                    <div class="testimonial-card bg-accent p-6 rounded-lg transition-all duration-300">
                        <div class="text-center mb-4">
                            <h3 class="card-name text-primary-dark text-base font-bold font-poppins uppercase">Khalid Al-Mansoori</h3>
                            <p class="card-title text-secondary text-sm font-normal font-poppins">Workshop Owner, Al Quoz</p>
                        </div>
                        <p class="card-text text-secondary text-sm font-normal font-poppins italic leading-relaxed mb-6">
                            Al Wasay has been our trusted supplier for over 3 years. Their genuine Toyota parts and fast delivery across Dubai have helped us maintain our reputation for quality repairs.
                        </p>
                        <div class="flex items-center justify-center gap-1">
                            <svg class="w-4 h-4 text-yellow-400 fill-current" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z"/></svg>
                            <svg class="w-4 h-4 text-yellow-400 fill-current" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z"/></svg>
                            <svg class="w-4 h-4 text-yellow-400 fill-current" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z"/></svg>
                            <svg class="w-4 h-4 text-yellow-400 fill-current" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z"/></svg>
                            <svg class="w-4 h-4 text-secondary/30 fill-current" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z"/></svg>
                            <span class="card-rating ml-2 text-secondary text-sm font-poppins">4.0</span>
                        </div>
                    </div>
                    
                    <div class="testimonial-card active bg-primary p-6 rounded-lg transition-all duration-300">
                        <div class="text-center mb-4">
                            <h3 class="card-name text-accent text-base font-bold font-poppins uppercase">Mohammed Rashid</h3>
                            <p class="card-title text-accent text-sm font-normal font-poppins">Fleet Manager, Dubai</p>
                        </div>
                        <p class="card-text text-accent text-sm font-normal font-poppins italic leading-relaxed mb-6">
                            Managing a fleet of 50+ vehicles requires reliable parts. Al Wasay consistently delivers authentic spare parts with competitive prices. Their team understands our urgent needs.
                        </p>
                        <div class="flex items-center justify-center gap-1">
                            <svg class="w-4 h-4 text-yellow-400 fill-current" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z"/></svg>
                            <svg class="w-4 h-4 text-yellow-400 fill-current" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z"/></svg>
                            <svg class="w-4 h-4 text-yellow-400 fill-current" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z"/></svg>
                            <svg class="w-4 h-4 text-yellow-400 fill-current" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z"/></svg>
                            <svg class="w-4 h-4 text-accent/30 fill-current" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z"/></svg>
                            <span class="card-rating ml-2 text-accent text-sm font-poppins">4.0</span>
                        </div>
                    </div>
                    
                    <div class="testimonial-card bg-accent p-6 rounded-lg transition-all duration-300">
                        <div class="text-center mb-4">
                            <h3 class="card-name text-primary-dark text-base font-bold font-poppins uppercase">Fatima Al-Hassan</h3>
                            <p class="card-title text-secondary text-sm font-normal font-poppins">Auto Service Center Owner</p>
                        </div>
                        <p class="card-text text-secondary text-sm font-normal font-poppins italic leading-relaxed mb-6">
                            Outstanding customer service and product knowledge. The team at Al Wasay always helps me find the right parts for Japanese vehicles. Highly recommend for any garage in the UAE.
                        </p>
                        <div class="flex items-center justify-center gap-1">
                            <svg class="w-4 h-4 text-yellow-400 fill-current" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z"/></svg>
                            <svg class="w-4 h-4 text-yellow-400 fill-current" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z"/></svg>
                            <svg class="w-4 h-4 text-yellow-400 fill-current" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z"/></svg>
                            <svg class="w-4 h-4 text-yellow-400 fill-current" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z"/></svg>
                            <svg class="w-4 h-4 text-secondary/30 fill-current" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z"/></svg>
                            <span class="card-rating ml-2 text-secondary text-sm font-poppins">4.0</span>
                        </div>
                    </div>
                </div>
                
                <div class="w-full flex-shrink-0 grid grid-cols-1 md:grid-cols-3 gap-6 lg:gap-8 px-1">
                    <div class="testimonial-card bg-accent p-6 rounded-lg transition-all duration-300">
                        <div class="text-center mb-4">
                            <h3 class="card-name text-primary-dark text-base font-bold font-poppins uppercase">Omar Al-Farsi</h3>
                            <p class="card-title text-secondary text-sm font-normal font-poppins">Garage Owner, Sharjah</p>
                        </div>
                        <p class="card-text text-secondary text-sm font-normal font-poppins italic leading-relaxed mb-6">
                            Exceptional service and quality parts. Our fleet maintenance costs dropped significantly since we started working with Al Wasay. Their prices are competitive in the UAE market.
                        </p>
                        <div class="flex items-center justify-center gap-1">
                            <svg class="w-4 h-4 text-yellow-400 fill-current" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z"/></svg>
                            <svg class="w-4 h-4 text-yellow-400 fill-current" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z"/></svg>
                            <svg class="w-4 h-4 text-yellow-400 fill-current" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z"/></svg>
                            <svg class="w-4 h-4 text-yellow-400 fill-current" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z"/></svg>
                            <svg class="w-4 h-4 text-yellow-400 fill-current" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z"/></svg>
                            <span class="card-rating ml-2 text-secondary text-sm font-poppins">5.0</span>
                        </div>
                    </div>
                    
                    <div class="testimonial-card active bg-primary p-6 rounded-lg transition-all duration-300">
                        <div class="text-center mb-4">
                            <h3 class="card-name text-accent text-base font-bold font-poppins uppercase">Ahmed Al-Rashid</h3>
                            <p class="card-title text-accent text-sm font-normal font-poppins">Workshop Owner, Deira</p>
                        </div>
                        <p class="card-text text-accent text-sm font-normal font-poppins italic leading-relaxed mb-6">
                            Best supplier in the UAE. Fast delivery, genuine parts, and excellent customer support. Highly recommended for any auto business in Dubai.
                        </p>
                        <div class="flex items-center justify-center gap-1">
                            <svg class="w-4 h-4 text-yellow-400 fill-current" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z"/></svg>
                            <svg class="w-4 h-4 text-yellow-400 fill-current" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z"/></svg>
                            <svg class="w-4 h-4 text-yellow-400 fill-current" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z"/></svg>
                            <svg class="w-4 h-4 text-yellow-400 fill-current" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z"/></svg>
                            <svg class="w-4 h-4 text-yellow-400 fill-current" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z"/></svg>
                            <span class="card-rating ml-2 text-accent text-sm font-poppins">5.0</span>
                        </div>
                    </div>
                    
                    <div class="testimonial-card bg-accent p-6 rounded-lg transition-all duration-300">
                        <div class="text-center mb-4">
                            <h3 class="card-name text-primary-dark text-base font-bold font-poppins uppercase">Hassan Al-Maktoum</h3>
                            <p class="card-title text-secondary text-sm font-normal font-poppins">Fleet Manager, Abu Dhabi</p>
                        </div>
                        <p class="card-text text-secondary text-sm font-normal font-poppins italic leading-relaxed mb-6">
                            Working with Al Wasay since they started. Their expertise in Japanese vehicle parts is unmatched in the region. Reliable and professional team.
                        </p>
                        <div class="flex items-center justify-center gap-1">
                            <svg class="w-4 h-4 text-yellow-400 fill-current" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z"/></svg>
                            <svg class="w-4 h-4 text-yellow-400 fill-current" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z"/></svg>
                            <svg class="w-4 h-4 text-yellow-400 fill-current" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z"/></svg>
                            <svg class="w-4 h-4 text-yellow-400 fill-current" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z"/></svg>
                            <svg class="w-4 h-4 text-secondary/30 fill-current" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z"/></svg>
                            <span class="card-rating ml-2 text-secondary text-sm font-poppins">4.0</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="flex justify-center items-center gap-2 mt-8">
            <button class="testimonial-dot w-2 h-2 bg-primary rounded-full transition-all duration-300" data-slide="0"></button>
            <button class="testimonial-dot w-2 h-2 bg-secondary rounded-full transition-all duration-300" data-slide="1"></button>
        </div>
    </div>
</section>

<section class="bg-accent py-16 lg:py-20">
    <div class="px-6 lg:px-20 xl:px-32">
        <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-4 lg:gap-6">
            <div class="relative bg-white rounded-2xl p-6 lg:p-8 shadow-sm border border-gray-100 overflow-hidden group hover:shadow-md transition-shadow duration-300">
                <div class="absolute -bottom-4 -left-4 opacity-10">
                    <svg class="w-24 h-24 text-primary" fill="currentColor" viewBox="0 0 24 24">
                        <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/>
                    </svg>
                </div>
                <div class="relative z-10">
                    <p class="counter text-3xl lg:text-4xl font-bold font-poppins text-primary mb-1" data-target="15">0+</p>
                    <p class="text-secondary text-xs lg:text-sm font-normal font-poppins">Years in the Market</p>
                </div>
            </div>
            
            <div class="relative bg-white rounded-2xl p-6 lg:p-8 shadow-sm border border-gray-100 overflow-hidden group hover:shadow-md transition-shadow duration-300">
                <div class="absolute -bottom-4 -left-4 opacity-10">
                    <svg class="w-24 h-24 text-primary" fill="currentColor" viewBox="0 0 24 24">
                        <path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/>
                    </svg>
                </div>
                <div class="relative z-10">
                    <p class="counter text-3xl lg:text-4xl font-bold font-poppins text-primary mb-1" data-target="10">0+</p>
                    <p class="text-secondary text-xs lg:text-sm font-normal font-poppins">Active Brands</p>
                </div>
            </div>
            
            <div class="relative bg-white rounded-2xl p-6 lg:p-8 shadow-sm border border-gray-100 overflow-hidden group hover:shadow-md transition-shadow duration-300">
                <div class="absolute -bottom-4 -left-4 opacity-10">
                    <svg class="w-24 h-24 text-primary" fill="currentColor" viewBox="0 0 24 24">
                        <path d="M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5c-1.66 0-3 1.34-3 3s1.34 3 3 3zm-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5C6.34 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5c0-2.33-4.67-3.5-7-3.5zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.97 1.97 3.45V19h6v-2.5c0-2.33-4.67-3.5-7-3.5z"/>
                    </svg>
                </div>
                <div class="relative z-10">
                    <p class="counter text-3xl lg:text-4xl font-bold font-poppins text-primary mb-1" data-target="600">0+</p>
                    <p class="text-secondary text-xs lg:text-sm font-normal font-poppins">Satisfied Clients</p>
                </div>
            </div>
            
            <div class="relative bg-white rounded-2xl p-6 lg:p-8 shadow-sm border border-gray-100 overflow-hidden group hover:shadow-md transition-shadow duration-300">
                <div class="absolute -bottom-4 -left-4 opacity-10">
                    <svg class="w-24 h-24 text-primary" fill="currentColor" viewBox="0 0 24 24">
                        <path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z"/>
                    </svg>
                </div>
                <div class="relative z-10">
                    <p class="counter text-3xl lg:text-4xl font-bold font-poppins text-primary mb-1" data-target="28">0+</p>
                    <p class="text-secondary text-xs lg:text-sm font-normal font-poppins">Countries We Ship</p>
                </div>
            </div>
            
            <div class="relative bg-white rounded-2xl p-6 lg:p-8 shadow-sm border border-gray-100 overflow-hidden group hover:shadow-md transition-shadow duration-300 col-span-2 md:col-span-1">
                <div class="absolute -bottom-4 -right-4 opacity-10">
                    <svg class="w-24 h-24 text-primary" fill="currentColor" viewBox="0 0 24 24">
                        <path d="M20 8h-3V4H3c-1.1 0-2 .9-2 2v11h2c0 1.66 1.34 3 3 3s3-1.34 3-3h6c0 1.66 1.34 3 3 3s3-1.34 3-3h2v-5l-3-4zM6 18.5c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5zm13.5-9l1.96 2.5H17V9.5h2.5zm-1.5 9c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5z"/>
                    </svg>
                </div>
                <div class="relative z-10">
                    <p class="text-3xl lg:text-4xl font-bold font-poppins text-primary mb-1">3<span class="text-xl lg:text-2xl">Days</span></p>
                    <p class="text-secondary text-xs lg:text-sm font-normal font-poppins">Average Shipping</p>
                </div>
            </div>
        </div>
    </div>
</section>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const counters = document.querySelectorAll('.counter');
    
    const observerOptions = {
        threshold: 0.5,
        rootMargin: '0px'
    };
    
    const counterObserver = new IntersectionObserver((entries) => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                entry.target.classList.add('animate');
                animateCounter(entry.target);
                counterObserver.unobserve(entry.target);
            }
        });
    }, observerOptions);
    
    counters.forEach(counter => {
        counterObserver.observe(counter);
    });
    
    function animateCounter(element) {
        const target = parseInt(element.getAttribute('data-target'));
        const duration = 2000;
        const step = target / (duration / 16);
        let current = 0;
        
        const updateCounter = () => {
            current += step;
            if (current < target) {
                element.textContent = Math.floor(current) + '+';
                requestAnimationFrame(updateCounter);
            } else {
                element.textContent = target + '+';
            }
        };
        
        updateCounter();
    }
});
</script>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const backToTopBtn = document.getElementById('back-to-top');
    
    window.addEventListener('scroll', function() {
        if (window.scrollY > 300) {
            backToTopBtn.classList.remove('opacity-0', 'invisible', 'translate-y-4');
            backToTopBtn.classList.add('opacity-100', 'visible', 'translate-y-0');
        } else {
            backToTopBtn.classList.add('opacity-0', 'invisible', 'translate-y-4');
            backToTopBtn.classList.remove('opacity-100', 'visible', 'translate-y-0');
        }
    });
    
    backToTopBtn.addEventListener('click', function() {
        window.scrollTo({
            top: 0,
            behavior: 'smooth'
        });
    });

    const modal = document.getElementById('thank-you-modal');
    const modalContent = document.getElementById('modal-content');
    
    {% if messages %}
    {% for message in messages %}
    {% if message.tags == 'success' %}
    modal.classList.remove('hidden');
    setTimeout(() => {
        modalContent.classList.remove('scale-95', 'opacity-0');
        modalContent.classList.add('scale-100', 'opacity-100');
    }, 100);
    {% endif %}
    {% endfor %}
    {% endif %}
    
    modal?.addEventListener('click', function(e) {
        if (e.target === modal) {
            modalContent.classList.remove('scale-100', 'opacity-100');
            modalContent.classList.add('scale-95', 'opacity-0');
            setTimeout(() => {
                modal.classList.add('hidden');
            }, 300);
        }
    });

    const heroSlides = document.querySelectorAll('.hero-slide');
    const heroProgressBtns = document.querySelectorAll('.hero-progress-btn');
    const currentSlideNum = document.getElementById('current-slide-num');
    let currentHeroSlide = 0;
    const totalHeroSlides = heroSlides.length;
    let heroAutoSlideInterval;
    const heroSlideDuration = 5000;
    let isPaused = false;

    function goToHeroSlide(index) {
        heroSlides.forEach((slide) => {
            slide.classList.remove('active');
            const img = slide.querySelector('img');
            if (img) img.style.transform = 'scale(1)';
        });

        heroSlides[index].classList.add('active');

        heroProgressBtns.forEach((btn, i) => {
            btn.classList.remove('active', 'completed', 'paused');
            const bar = btn.querySelector('.hero-progress-bar');
            if (bar) bar.style.width = '0%';
            
            if (i < index) {
                btn.classList.add('completed');
                if (bar) bar.style.width = '100%';
            } else if (i === index) {
                btn.classList.add('active');
                if (isPaused) btn.classList.add('paused');
            }
        });

        if (currentSlideNum) {
            currentSlideNum.textContent = String(index + 1).padStart(2, '0');
        }

        currentHeroSlide = index;
    }

    function nextHeroSlide() {
        const nextIndex = (currentHeroSlide + 1) % totalHeroSlides;
        goToHeroSlide(nextIndex);
    }

    function startHeroAutoSlide() {
        clearInterval(heroAutoSlideInterval);
        heroAutoSlideInterval = setInterval(nextHeroSlide, heroSlideDuration);
    }

    function resetHeroAutoSlide() {
        clearInterval(heroAutoSlideInterval);
        startHeroAutoSlide();
    }

    heroProgressBtns.forEach((btn, index) => {
        btn.addEventListener('click', () => {
            goToHeroSlide(index);
            resetHeroAutoSlide();
        });
    });

    const heroSlider = document.getElementById('hero-slider');
    if (heroSlider) {
        heroSlider.addEventListener('mouseenter', () => {
            isPaused = true;
            clearInterval(heroAutoSlideInterval);
            const activeBtn = document.querySelector('.hero-progress-btn.active');
            if (activeBtn) activeBtn.classList.add('paused');
        });

        heroSlider.addEventListener('mouseleave', () => {
            isPaused = false;
            const activeBtn = document.querySelector('.hero-progress-btn.active');
            if (activeBtn) activeBtn.classList.remove('paused');
            startHeroAutoSlide();
        });
    }

    goToHeroSlide(0);
    startHeroAutoSlide();

    const testimonialSlider = document.getElementById('testimonial-slider');
    const testimonialDots = document.querySelectorAll('.testimonial-dot');
    let currentTestimonial = 0;
    const totalTestimonials = 2;
    let testimonialInterval;

    function goToTestimonial(index) {
        currentTestimonial = index;
        if (testimonialSlider) {
            testimonialSlider.style.transform = `translateX(-${currentTestimonial * 100}%)`;
        }
        
        testimonialDots.forEach((dot, i) => {
            if (i === currentTestimonial) {
                dot.classList.remove('bg-secondary');
                dot.classList.add('bg-primary', 'w-8');
            } else {
                dot.classList.remove('bg-primary', 'w-8');
                dot.classList.add('bg-secondary');
            }
        });
    }

    function nextTestimonial() {
        currentTestimonial = (currentTestimonial + 1) % totalTestimonials;
        goToTestimonial(currentTestimonial);
    }

    testimonialDots.forEach((dot, index) => {
        dot.addEventListener('click', () => {
            goToTestimonial(index);
            clearInterval(testimonialInterval);
            startTestimonialAutoSlide();
        });
    });

    function startTestimonialAutoSlide() {
        testimonialInterval = setInterval(nextTestimonial, 5000);
    }

    goToTestimonial(0);
    startTestimonialAutoSlide();

    if (testimonialSlider) {
        testimonialSlider.addEventListener('mouseenter', () => clearInterval(testimonialInterval));
        testimonialSlider.addEventListener('mouseleave', startTestimonialAutoSlide);
    }
});
</script>

{% endblock %}