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

{% block title %}Home - Taiya Detergents{% endblock %}

{% block content %}
<!-- Hero Carousel Section -->
<div id="productCarousel" class="carousel slide" data-bs-ride="carousel">
    <!-- Indicators -->
    <div class="carousel-indicators">
        {% for product in featured_products %}
        <button type="button" data-bs-target="#productCarousel" data-bs-slide-to="{{ forloop.counter0 }}" 
                {% if forloop.first %}class="active"{% endif %} aria-label="Slide {{ forloop.counter }}"></button>
        {% endfor %}
    </div>
    
    <!-- Carousel items -->
    <div class="carousel-inner">
        {% for product in featured_products %}
        <div class="carousel-item {% if forloop.first %}active{% endif %}">
            <div class="carousel-image" style="
                height: 500px;
                background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), 
                            url('{{ product.display_image }}');
                background-size: cover;
                background-position: center;
            "></div>
            <div class="carousel-caption d-none d-md-block">
                <h2 class="display-4">{{ product.name }}</h2>
                <p class="lead">{{ product.description|truncatewords:15 }}</p>
                <a href="{% url 'product_detail' product.id %}" class="btn btn-primary btn-lg">
                    Learn More
                </a>
            </div>
        </div>
        {% endfor %}
        
        <!-- Default slide if no products -->
        {% if not featured_products %}
        <div class="carousel-item active">
            <div class="carousel-image" style="
                height: 500px;
                background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), 
                            url('https://images.unsplash.com/photo-1600857062241-98c2aae9d15f?ixlib=rb-4.0.3&auto=format&fit=crop&w=1950&q=80');
                background-size: cover;
                background-position: center;
            "></div>
            <div class="carousel-caption d-none d-md-block">
                <h2 class="display-4">Taiya Detergents</h2>
                <p class="lead">Premium Cleaning Solutions for Kenyan Homes</p>
                <a href="{% url 'product_list' %}" class="btn btn-primary btn-lg">
                    View Products
                </a>
            </div>
        </div>
        {% endif %}
    </div>
    
    <!-- Controls -->
    <button class="carousel-control-prev" type="button" data-bs-target="#productCarousel" data-bs-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Previous</span>
    </button>
    <button class="carousel-control-next" type="button" data-bs-target="#productCarousel" data-bs-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Next</span>
    </button>
</div>
<!-- Main Content Section -->
<div class="container mt-5">
    <!-- Welcome Section -->
    <div class="row">
        <div class="col-12 text-center mb-5">
            <h1 class="display-4 text-taiya-green">Premium Detergents for Sparkling Clean Results</h1>
            <p class="lead">Discover our range of eco-friendly and powerful cleaning solutions</p>
            <a href="{% url 'product_list' %}" class="btn btn-primary btn-lg me-3">
                <i class="fas fa-shopping-bag me-2"></i>Shop Now
            </a>
            <a href="{% url 'contact_us' %}" class="btn btn-outline-primary btn-lg">
                <i class="fas fa-phone me-2"></i>Contact Us
            </a>
        </div>
    </div>

    <!-- Features Section -->
    <div class="row">
        <div class="col-md-4 mb-4">
            <div class="card text-center h-100">
                <div class="card-body">
                    <i class="fas fa-tshirt fa-3x text-taiya-green mb-3"></i>
                    <h5 class="card-title">Versatile</h5>
                    <p class="card-text">Perfect for laundry, dishes, and general cleaning. One soap for all your needs.</p>
                </div>
            </div>
        </div>
        <div class="col-md-4 mb-4">
            <div class="card text-center h-100">
                <div class="card-body">
                    <i class="fas fa-leaf fa-3x text-taiya-green mb-3"></i>
                    <h5 class="card-title">Eco-Friendly</h5>
                    <p class="card-text">Made with natural ingredients, biodegradable and gentle on the environment.</p>
                </div>
            </div>
        </div>
        <div class="col-md-4 mb-4">
            <div class="card text-center h-100">
                <div class="card-body">
                    <i class="fas fa-coins fa-3x text-taiya-green mb-3"></i>
                    <h5 class="card-title">Cost-Effective</h5>
                    <p class="card-text">Long-lasting formula provides excellent value for money. Economical and efficient.</p>
                </div>
            </div>
        </div>
    </div>

    <!-- Available Sizes Section -->
    <div class="row mt-5">
        <div class="col-12 text-center">
            <h2 class="text-taiya-green">Available Sizes</h2>
            <p class="lead">Choose the perfect size for your family's needs</p>
            <div class="row mt-4 justify-content-center">
                <!-- 1kg Size -->
                <div class="col-lg-3 col-md-6 col-6 mb-4">
                    <div class="card product-card text-center h-100">
                        <div class="card-body">
                            <h4 class="text-taiya-green">1kg</h4>
                            <p class="text-muted">Family Size</p>
                            <span class="badge bg-success">Most Popular</span>
                            <p class="small mt-2">Ideal for large families and heavy usage</p>
                        </div>
                    </div>
                </div>
                
                <!-- 800gms Size -->
                <div class="col-lg-3 col-md-6 col-6 mb-4">
                    <div class="card product-card text-center h-100">
                        <div class="card-body">
                            <h4 class="text-taiya-green">800gms</h4>
                            <p class="text-muted">Standard Size</p>
                            <p class="small mt-2">Perfect for medium-sized families</p>
                        </div>
                    </div>
                </div>
                
                <!-- 600gms Size -->
                <div class="col-lg-3 col-md-6 col-6 mb-4">
                    <div class="card product-card text-center h-100">
                        <div class="card-body">
                            <h4 class="text-taiya-green">600gms</h4>
                            <p class="text-muted">Economy Size</p>
                            <p class="small mt-2">Great for small to medium families</p>
                        </div>
                    </div>
                </div>
                
                <!-- 200gms Size -->
                <div class="col-lg-3 col-md-6 col-6 mb-4">
                    <div class="card product-card text-center h-100">
                        <div class="card-body">
                            <h4 class="text-taiya-green">200gms</h4>
                            <p class="text-muted">Travel Size</p>
                            <p class="small mt-2">Convenient for individuals and travel</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Call to Action Section -->
    <div class="row mt-5">
        <div class="col-12">
            <div class="card bg-light">
                <div class="card-body text-center py-5">
                    <h2 class="text-taiya-green">Ready to Experience Taiya Quality?</h2>
                    <p class="lead mb-4">Join thousands of satisfied customers across Kenya</p>
                    <div class="d-flex justify-content-center flex-wrap gap-3">
                        <a href="{% url 'product_list' %}" class="btn btn-primary btn-lg">
                            <i class="fas fa-shopping-bag me-2"></i>Browse Products
                        </a>
                        <a href="{% url 'contact_us' %}" class="btn btn-outline-primary btn-lg">
                            <i class="fas fa-phone me-2"></i>Place Order
                        </a>
                        <a href="{% url 'about_us' %}" class="btn btn-outline-secondary btn-lg">
                            <i class="fas fa-info-circle me-2"></i>Learn More
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Testimonials Section -->
    <div class="row mt-5">
        <div class="col-12 text-center mb-4">
            <h2 class="text-taiya-green">What Our Customers Say</h2>
        </div>
        <div class="col-md-4 mb-4">
            <div class="card h-100">
                <div class="card-body text-center">
                    <div class="text-warning mb-3">
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                    </div>
                    <p class="card-text">"Taiya detergent has transformed my laundry experience. Clothes come out cleaner and smell fresher!"</p>
                    <p class="text-muted">- Mary from Nairobi</p>
                </div>
            </div>
        </div>
        <div class="col-md-4 mb-4">
            <div class="card h-100">
                <div class="card-body text-center">
                    <div class="text-warning mb-3">
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                    </div>
                    <p class="card-text">"The multipurpose bar soap is amazing! I use it for dishes, laundry, and even general cleaning."</p>
                    <p class="text-muted">- John from Mombasa</p>
                </div>
            </div>
        </div>
        <div class="col-md-4 mb-4">
            <div class="card h-100">
                <div class="card-body text-center">
                    <div class="text-warning mb-3">
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                    </div>
                    <p class="card-text">"Eco-friendly and effective! Love that I'm using a product that's good for my family and the environment."</p>
                    <p class="text-muted">- Sarah from Kisumu</p>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}