{% extends "base.html" %}

{% block title %}{{ site_name }} - {{ site_tagline }}{% endblock %}

{% block content %}
<!-- Hero Slider -->
{% if banners %}
<div class="relative bg-gray-900 overflow-hidden">
    <div id="heroSlider" class="relative h-64 md:h-96">
        {% for banner in banners %}
        <div class="slider-slide absolute inset-0 transition-opacity duration-500 {% if loop.first %}opacity-100{% else %}opacity-0{% endif %}" data-index="{{ loop.index0 }}">
            <img src="{% if banner.image %}{{ url_for('static', filename='uploads/' + banner.image) }}{% else %}https://placehold.co/1200x400/f97316/ffffff?text=AmarBabu.store{% endif %}" 
                alt="{{ banner.title }}" class="w-full h-full object-cover">
            <div class="absolute inset-0 bg-black bg-opacity-40 flex items-center justify-center">
                <div class="text-center text-white px-4">
                    <h1 class="text-3xl md:text-5xl font-bold mb-2">{{ banner.title }}</h1>
                    <p class="text-lg md:text-xl mb-4">{{ banner.subtitle }}</p>
                    <a href="{{ banner.link or url_for('shop') }}" class="inline-block bg-primary hover:bg-secondary text-white px-8 py-3 rounded-full font-semibold transition">
                        Shop Now <i class="fas fa-arrow-right ml-2"></i>
                    </a>
                </div>
            </div>
        </div>
        {% endfor %}
    </div>
    
    {% if banners|length > 1 %}
    <div class="absolute bottom-4 left-1/2 -translate-x-1/2 flex gap-2">
        {% for banner in banners %}
        <button class="slider-dot w-3 h-3 rounded-full bg-white opacity-50 hover:opacity-100 transition {% if loop.first %}opacity-100{% endif %}" data-index="{{ loop.index0 }}"></button>
        {% endfor %}
    </div>
    {% endif %}
</div>
{% else %}
<!-- Default Hero -->
<div class="bg-gradient-to-r from-primary to-secondary text-white py-16 md:py-24">
    <div class="container mx-auto px-4 text-center">
        <h1 class="text-3xl md:text-5xl font-bold mb-4">Welcome to AmarBabu.store</h1>
        <p class="text-lg md:text-xl mb-6 opacity-90">Your one-stop shop for kids fashion, toys & baby products</p>
        <a href="{{ url_for('shop') }}" class="inline-block bg-white text-primary hover:bg-gray-100 px-8 py-3 rounded-full font-semibold transition">
            Shop Now <i class="fas fa-arrow-right ml-2"></i>
        </a>
    </div>
</div>
{% endif %}

<div class="container mx-auto px-4 py-8">
    <!-- Flash Sale Section -->
    {% if flash_products %}
    <section class="mb-12">
        <div class="flex items-center justify-between mb-6">
            <h2 class="text-2xl font-bold text-gray-800 flex items-center">
                <span class="flash-sale-badge bg-red-500 text-white px-3 py-1 rounded mr-3">
                    <i class="fas fa-bolt"></i> Flash Sale
                </span>
            </h2>
            <a href="{{ url_for('shop') }}" class="text-primary hover:underline">View All <i class="fas fa-arrow-right"></i></a>
        </div>
        
        <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4">
            {% for product in flash_products %}
            <div class="bg-white rounded-lg shadow-sm hover:shadow-lg transition overflow-hidden group">
                <div class="relative">
                    <a href="{{ url_for('product', slug=product.slug) }}">
                        <img src="{% if product.image %}{{ url_for('static', filename='uploads/' + product.image) }}{% else %}https://placehold.co/200x200/f3f4f6/9ca3af?text=No+Image{% endif %}" 
                            alt="{{ product.name }}" class="w-full h-32 md:h-40 object-cover group-hover:scale-105 transition duration-300">
                    </a>
                    <span class="absolute top-2 left-2 bg-red-500 text-white text-xs px-2 py-1 rounded">
                        -{{ ((product.price - product.sale_price) / product.price * 100)|round }}%
                    </span>
                </div>
                <div class="p-3">
                    <a href="{{ url_for('product', slug=product.slug) }}" class="text-sm font-medium text-gray-800 hover:text-primary line-clamp-2">
                        {{ product.name }}
                    </a>
                    <div class="mt-2">
                        <span class="text-primary font-bold">{{ currency }}{{ product.sale_price|round|int }}</span>
                        <span class="text-gray-400 text-sm line-through ml-2">{{ currency }}{{ product.price|round|int }}</span>
                    </div>
                </div>
            </div>
            {% endfor %}
        </div>
    </section>
    {% endif %}

    <!-- Categories Section -->
    {% if categories %}
    <section class="mb-12">
        <h2 class="text-2xl font-bold text-gray-800 mb-6">Shop by Category</h2>
        <div class="grid grid-cols-3 md:grid-cols-6 gap-4">
            {% for category in categories %}
            <a href="{{ url_for('category', slug=category.slug) }}" class="bg-white rounded-lg shadow-sm hover:shadow-lg transition p-4 text-center group">
                <div class="w-16 h-16 mx-auto mb-3 rounded-full bg-primary bg-opacity-10 flex items-center justify-center group-hover:bg-opacity-20 transition">
                    <img src="{% if category.image %}{{ url_for('static', filename='uploads/' + category.image) }}{% else %}https://placehold.co/64x64/f97316/ffffff?text={{ category.name[:1] }}{% endif %}" 
                        alt="{{ category.name }}" class="w-full h-full object-cover rounded-full">
                </div>
                <span class="text-sm font-medium text-gray-800">{{ category.name }}</span>
            </a>
            {% endfor %}
        </div>
    </section>
    {% endif %}

    <!-- Featured Products -->
    {% if featured_products %}
    <section class="mb-12">
        <div class="flex items-center justify-between mb-6">
            <h2 class="text-2xl font-bold text-gray-800">Featured Products</h2>
            <a href="{{ url_for('shop') }}" class="text-primary hover:underline">View All <i class="fas fa-arrow-right"></i></a>
        </div>
        
        <div class="grid grid-cols-2 md:grid-cols-4 gap-4 md:gap-6">
            {% for product in featured_products %}
            <div class="bg-white rounded-lg shadow-sm hover:shadow-lg transition overflow-hidden group">
                <div class="relative">
                    <a href="{{ url_for('product', slug=product.slug) }}">
                        <img src="{% if product.image %}{{ url_for('static', filename='uploads/' + product.image) }}{% else %}https://placehold.co/300x300/f3f4f6/9ca3af?text=No+Image{% endif %}" 
                            alt="{{ product.name }}" class="w-full h-40 md:h-48 object-cover group-hover:scale-105 transition duration-300">
                    </a>
                    {% if product.is_flash_sale and product.sale_price %}
                    <span class="absolute top-2 left-2 bg-red-500 text-white text-xs px-2 py-1 rounded">
                        Sale
                    </span>
                    {% endif %}
                </div>
                <div class="p-4">
                    <a href="{{ url_for('product', slug=product.slug) }}" class="font-medium text-gray-800 hover:text-primary line-clamp-2">
                        {{ product.name }}
                    </a>
                    <div class="mt-2 flex items-center justify-between">
                        <div>
                            {% if product.sale_price %}
                            <span class="text-primary font-bold">{{ currency }}{{ product.sale_price|round|int }}</span>
                            <span class="text-gray-400 text-sm line-through ml-1">{{ currency }}{{ product.price|round|int }}</span>
                            {% else %}
                            <span class="text-primary font-bold">{{ currency }}{{ product.price|round|int }}</span>
                            {% endif %}
                        </div>
                        <form action="{{ url_for('add_to_cart', product_id=product.id) }}" method="POST">
                            <button type="submit" class="bg-primary hover:bg-secondary text-white p-2 rounded-full transition">
                                <i class="fas fa-cart-plus"></i>
                            </button>
                        </form>
                    </div>
                </div>
            </div>
            {% endfor %}
        </div>
    </section>
    {% endif %}

    <!-- Promotional Banners -->
    <section class="mb-12">
        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div class="bg-gradient-to-r from-pink-500 to-rose-500 rounded-xl p-6 text-white">
                <h3 class="text-xl font-bold mb-2">Baby Clothes</h3>
                <p class="mb-4 opacity-90">Comfortable & stylish clothes for your little ones</p>
                <a href="{{ url_for('category', slug='baby-clothes') }}" class="inline-block bg-white text-pink-500 px-6 py-2 rounded-full font-semibold hover:bg-gray-100 transition">
                    Shop Now
                </a>
            </div>
            <div class="bg-gradient-to-r from-blue-500 to-cyan-500 rounded-xl p-6 text-white">
                <h3 class="text-xl font-bold mb-2">Kids Toys</h3>
                <p class="mb-4 opacity-90">Fun & educational toys for all ages</p>
                <a href="{{ url_for('category', slug='kids-toys') }}" class="inline-block bg-white text-blue-500 px-6 py-2 rounded-full font-semibold hover:bg-gray-100 transition">
                    Shop Now
                </a>
            </div>
        </div>
    </section>

    <!-- Features -->
    <section class="mb-12">
        <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
            <div class="bg-white rounded-lg p-4 text-center shadow-sm">
                <i class="fas fa-truck text-3xl text-primary mb-2"></i>
                <h4 class="font-semibold">Free Delivery</h4>
                <p class="text-sm text-gray-500">On orders over ৳500</p>
            </div>
            <div class="bg-white rounded-lg p-4 text-center shadow-sm">
                <i class="fas fa-shield-alt text-3xl text-primary mb-2"></i>
                <h4 class="font-semibold">Secure Payment</h4>
                <p class="text-sm text-gray-500">100% secure checkout</p>
            </div>
            <div class="bg-white rounded-lg p-4 text-center shadow-sm">
                <i class="fas fa-undo text-3xl text-primary mb-2"></i>
                <h4 class="font-semibold">Easy Returns</h4>
                <p class="text-sm text-gray-500">7 days return policy</p>
            </div>
            <div class="bg-white rounded-lg p-4 text-center shadow-sm">
                <i class="fas fa-headset text-3xl text-primary mb-2"></i>
                <h4 class="font-semibold">24/7 Support</h4>
                <p class="text-sm text-gray-500">Dedicated support</p>
            </div>
        </div>
    </section>
</div>

<!-- Slider Script -->
<script>
    document.addEventListener('DOMContentLoaded', function() {
        const slides = document.querySelectorAll('.slider-slide');
        const dots = document.querySelectorAll('.slider-dot');
        
        if (slides.length > 1) {
            let currentSlide = 0;
            
            function showSlide(index) {
                slides.forEach((slide, i) => {
                    slide.classList.toggle('opacity-100', i === index);
                    slide.classList.toggle('opacity-0', i !== index);
                });
                dots.forEach((dot, i) => {
                    dot.classList.toggle('opacity-100', i === index);
                    dot.classList.toggle('opacity-50', i !== index);
                });
            }
            
            // Auto slide
            setInterval(() => {
                currentSlide = (currentSlide + 1) % slides.length;
                showSlide(currentSlide);
            }, 5000);
            
            // Click on dots
            dots.forEach((dot, i) => {
                dot.addEventListener('click', () => {
                    currentSlide = i;
                    showSlide(currentSlide);
                });
            });
        }
    });
</script>
{% endblock %}