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

{% block content %}
{% get_current_language as CURRENT_LANG %}
{% if banners %}
<!-- Custom Manual Slider Section -->
<style>
    .custom-slider-container {
        position: relative;
        width: 100%;
        height: 450px;
        overflow: hidden;
        background-color: #f8f9fa;
        box-shadow: 0 4px 20px rgba(0,0,0,0.15);
    }
    .custom-slide {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.8s ease-in-out;
        z-index: 1;
    }
    .custom-slide.active {
        opacity: 1;
        visibility: visible;
        z-index: 2;
    }
    .custom-slider-indicators {
        position: absolute;
        bottom: 20px;
        left: 50%;
        transform: translateX(-50%);
        z-index: 10;
        display: flex;
        gap: 10px;
        padding: 0;
        margin: 0;
        list-style: none;
    }
    .custom-slider-indicators button {
        width: 12px;
        height: 12px;
        border-radius: 50%;
        border: 2px solid #fff;
        background: rgba(255,255,255,0.5);
        cursor: pointer;
        padding: 0;
        transition: all 0.3s ease;
    }
    .custom-slider-indicators button.active {
        background: #fff;
        transform: scale(1.2);
    }
    .custom-slider-control {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        z-index: 10;
        background: rgba(0,0,0,0.3);
        color: #fff;
        border: none;
        width: 50px;
        height: 50px;
        border-radius: 50%;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: background 0.3s;
    }
    .custom-slider-control:hover {
        background: rgba(0,0,0,0.6);
    }
    .custom-slider-prev { left: 20px; }
    .custom-slider-next { right: 20px; }
    
    .custom-caption {
        background: rgba(0,0,0,0.6);
        backdrop-filter: blur(5px);
        color: #fff;
        padding: 2rem;
        border-radius: 10px;
        max-width: 600px;
        position: absolute;
        bottom: 60px;
        z-index: 15;
    }
    [dir="ltr"] .custom-caption { left: 60px; text-align: left; }
    [dir="rtl"] .custom-caption { right: 60px; text-align: right; }

    @media (max-width: 768px) {
        .custom-slider-container { height: auto; }
        .custom-slide { position: relative; height: auto; display: none; }
        .custom-slide.active { display: block; }
        .custom-caption { position: static; max-width: 100%; border-radius: 0; background: #212529; }
    }
</style>

<section class="mb-4 mt-n1">
    <div id="manualSlider" class="custom-slider-container">
        <div class="custom-slider-indicators">
            {% for banner in banners %}
            <button type="button" class="{% if forloop.first %}active{% endif %}" data-idx="{{ forloop.counter0 }}"></button>
            {% endfor %}
        </div>
        
        <div class="custom-slides-wrapper">
            {% for banner in banners %}
            <div class="custom-slide {% if forloop.first %}active{% endif %}" data-idx="{{ forloop.counter0 }}">
                <img src="{{ banner.image.url }}" class="w-100" style="height: 450px; object-fit: cover;" alt="{{ banner.display_title }}" {% if forloop.first %}loading="eager"{% endif %}>
                <div class="custom-caption d-none d-md-block">
                    <h2 class="fw-bold display-6">{{ banner.display_title }}</h2>
                    <p class="lead">{{ banner.display_subtitle }}</p>
                    {% if banner.link %}
                    <a href="{{ banner.link }}" class="btn btn-primary btn-lg px-4">{% trans "Learn More" %}</a>
                    {% endif %}
                </div>
                <!-- Mobile caption -->
                <div class="d-md-none bg-dark text-white p-4 text-center">
                    <h3 class="fw-bold">{{ banner.display_title }}</h3>
                    <p>{{ banner.display_subtitle }}</p>
                    {% if banner.link %}
                    <a href="{{ banner.link }}" class="btn btn-primary">{% trans "Learn More" %}</a>
                    {% endif %}
                </div>
            </div>
            {% endfor %}
        </div>

        {% if banners.count > 1 %}
        <button class="custom-slider-control custom-slider-prev">
            <i class="fa-solid fa-chevron-left"></i>
        </button>
        <button class="custom-slider-control custom-slider-next">
            <i class="fa-solid fa-chevron-right"></i>
        </button>
        {% endif %}
    </div>
</section>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const slider = document.getElementById('manualSlider');
    if (!slider) return;

    const slides = slider.querySelectorAll('.custom-slide');
    const indicators = slider.querySelectorAll('.custom-slider-indicators button');
    const prevBtn = slider.querySelector('.custom-slider-prev');
    const nextBtn = slider.querySelector('.custom-slider-next');
    
    let currentIdx = 0;
    let isPaused = false;
    const intervalTime = {% if 'ar' in CURRENT_LANG %}15000{% else %}10000{% endif %};

    function showSlide(index) {
        if (index === currentIdx) return;
        
        // Hide current
        slides[currentIdx].classList.remove('active');
        indicators[currentIdx].classList.remove('active');

        // Update index
        currentIdx = (index + slides.length) % slides.length;

        // Show next
        slides[currentIdx].classList.add('active');
        indicators[currentIdx].classList.add('active');
    }

    // Auto-rotate
    let slideInterval = setInterval(() => {
        if (!isPaused) {
            showSlide(currentIdx + 1);
        }
    }, intervalTime);

    // Controls
    if (prevBtn) {
        prevBtn.addEventListener('click', () => {
            showSlide(currentIdx - 1);
        });
    }
    if (nextBtn) {
        nextBtn.addEventListener('click', () => {
            showSlide(currentIdx + 1);
        });
    }

    // Indicators
    indicators.forEach((btn, idx) => {
        btn.addEventListener('click', () => {
            showSlide(idx);
        });
    });

    // Hover pause
    slider.addEventListener('mouseenter', () => isPaused = true);
    slider.addEventListener('mouseleave', () => isPaused = false);

    // Initial check to ensure first is visible
    slides[0].classList.add('active');
});
</script>
{% endif %}

<!-- Hero Section (Only show if no banners) -->
{% if not banners %}
<section class="hero-section py-5">
    <div class="container">
        <div class="row align-items-center">
            <div class="col-lg-6 mb-5 mb-lg-0">
                <h1 class="hero-title display-4 fw-bold mb-4">
                    {% trans "Smart Cargo Solutions" %}<br>
                    <span class="text-primary">{% trans "Locally & Abroad" %}</span>
                </h1>
                <p class="hero-subtitle lead text-muted mb-4">
                    {% trans "The most reliable platform connecting shippers with truck owners across the region. Transparent, fast, and secure." %}
                </p>
                <div class="d-flex gap-3">
                    <a href="{% url 'register' %}" class="btn btn-primary btn-lg px-4">{% trans "Start Shipping" %}</a>
                    <a href="#how-it-works" class="btn btn-outline-primary btn-lg px-4">{% trans "Learn More" %}</a>
                </div>
            </div>
            <div class="col-lg-6">
                <img src="{% static "images/truck_hero.jpg" %}" alt="Logistics" class="img-fluid rounded-4 shadow-lg">
            </div>
        </div>
    </div>
</section>
{% endif %}

<!-- Dynamic Home Sections -->
{% for section in home_sections %}
<section class="py-5 {% if section.background_color == 'light' %}bg-light{% elif section.background_color == 'primary' %}bg-primary text-white{% else %}bg-white{% endif %}">
    <div class="container py-5">
        {% if section.section_type == 'SIMPLE' %}
            <div class="row align-items-center {% if forloop.counter|divisibleby:2 %}flex-row-reverse{% endif %}">
                <div class="col-lg-6 mb-4 mb-lg-0">
                    <h2 class="fw-bold mb-3">{{ section.display_title }}</h2>
                    {% if section.display_subtitle %}
                    <h5 class="{% if section.background_color == 'primary' %}text-white-50{% else %}text-muted{% endif %} mb-4">{{ section.display_subtitle }}</h5>
                    {% endif %}
                    <div class="content lead">
                        {{ section.display_content|linebreaks }}
                    </div>
                </div>
                {% if section.image %}
                <div class="col-lg-6">
                    <img src="{{ section.image.url }}" alt="{{ section.display_title }}" class="img-fluid rounded-4 shadow">
                </div>
                {% endif %}
            </div>
        {% elif section.section_type == 'CTA' %}
            <div class="text-center">
                <h2 class="fw-bold mb-3">{{ section.display_title }}</h2>
                {% if section.display_subtitle %}
                <p class="lead mb-4 opacity-75">{{ section.display_subtitle }}</p>
                {% endif %}
                <div class="mb-4">
                    {{ section.display_content|linebreaks }}
                </div>
                <a href="{% url 'register' %}" class="btn {% if section.background_color == 'primary' %}btn-light text-primary{% else %}btn-primary{% endif %} btn-lg px-5 rounded-pill fw-bold">{% trans "Get Started" %}</a>
            </div>
        {% elif section.section_type == 'FEATURES' %}
            <div class="text-center mb-5">
                <h2 class="fw-bold mb-3">{{ section.display_title }}</h2>
                <p class="lead text-muted">{{ section.display_subtitle }}</p>
            </div>
            <div class="row g-4">
                {{ section.display_content|safe }}
            </div>
        {% endif %}
    </div>
</section>
{% endfor %}

<!-- Role Selection Section -->
<section class="py-5 bg-light" id="how-it-works">
    <div class="container py-5">
        <div class="text-center mb-5">
            <h2 class="fw-bold text-primary">{% trans "How would you like to use MASAR?" %}</h2>
            <p class="text-muted">{% trans "Choose your path to get started with our platform." %}</p>
        </div>
        <div class="row g-4">
            <!-- Shipper Role -->
            <div class="col-md-6">
                <div class="card h-100 border-0 shadow-sm p-4 text-center">
                    <div class="mb-4">
                        <i class="fa-solid fa-box-open fa-3x text-primary"></i>
                    </div>
                    <h3 class="fw-bold">{% trans "I am a Shipper" %}</h3>
                    <p class="text-muted">
                        {% trans "I need to move goods locally or abroad. Post your shipment, receive offers from verified drivers, and track your cargo in real-time." %}
                    </p>
                    <ul class="list-unstyled text-start mb-4 mx-auto" style="max-width: 300px;">
                        <li><i class="fa-solid fa-check text-success me-2"></i> {% trans "Post shipments easily" %}</li>
                        <li><i class="fa-solid fa-check text-success me-2"></i> {% trans "Compare competitive bids" %}</li>
                        <li><i class="fa-solid fa-check text-success me-2"></i> {% trans "Real-time tracking" %}</li>
                    </ul>
                    <a href="{% url 'register' %}" class="btn btn-primary w-100 py-3">{% trans "Find a Truck" %}</a>
                </div>
            </div>
            <!-- Truck Owner Role -->
            <div class="col-md-6">
                <div class="card h-100 border-0 shadow-sm p-4 text-center">
                    <div class="mb-4">
                        <i class="fa-solid fa-truck fa-3x text-primary"></i>
                    </div>
                    <h3 class="fw-bold">{% trans "I am a Truck Owner" %}</h3>
                    <p class="text-muted">
                        {% trans "I have trucks and want to find cargo to transport. Register your fleet, bid on available jobs, and grow your business." %}
                    </p>
                    <ul class="list-unstyled text-start mb-4 mx-auto" style="max-width: 300px;">
                        <li><i class="fa-solid fa-check text-success me-2"></i> {% trans "Access daily cargo leads" %}</li>
                        <li><i class="fa-solid fa-check text-success me-2"></i> {% trans "Flexible bidding system" %}</li>
                        <li><i class="fa-solid fa-check text-success me-2"></i> {% trans "Direct chat with shippers" %}</li>
                    </ul>
                    <a href="{% url 'register' %}" class="btn btn-primary w-100 py-3">{% trans "Register Your Truck" %}</a>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Features Section -->
<section class="bg-white py-5" id="features">
    <div class="container py-5">
        <div class="row g-5 align-items-center">
            <div class="col-lg-5">
                <h2 class="fw-bold mb-4">{% trans "Everything you need for seamless logistics" %}</h2>
                <div class="d-flex mb-4">
                    <div class="flex-shrink-0">
                        <div class="bg-light p-3 rounded-3 text-primary">
                            <i class="fa-brands fa-whatsapp fa-2x"></i>
                        </div>
                    </div>
                    <div class="ms-4">
                        <h5 class="fw-bold">{% trans "WhatsApp Integration" %}</h5>
                        <p class="text-muted">{% trans "Receive instant updates and communicate easily via WhatsApp API." %}</p>
                    </div>
                </div>
                <div class="d-flex mb-4">
                    <div class="flex-shrink-0">
                        <div class="bg-light p-3 rounded-3 text-primary">
                            <i class="fa-solid fa-language fa-2x"></i>
                        </div>
                    </div>
                    <div class="ms-4">
                        <h5 class="fw-bold">{% trans "Multilingual Support" %}</h5>
                        <p class="text-muted">{% trans "Fully accessible in both Arabic and English for all users." %}</p>
                    </div>
                </div>
                <div class="d-flex">
                    <div class="flex-shrink-0">
                        <div class="bg-light p-3 rounded-3 text-primary">
                            <i class="fa-solid fa-shield-halved fa-2x"></i>
                        </div>
                    </div>
                    <div class="ms-4">
                        <h5 class="fw-bold">{% trans "Secure Documentation" %}</h5>
                        <p class="text-muted">{% trans "Digital verification of truck registration and driver licenses." %}</p>
                    </div>
                </div>
            </div>
            <div class="col-lg-7">
                <div class="row g-4">
                    <div class="col-6">
                        <img src="{% static "images/truck_road.jpg" %}" class="img-fluid rounded-4 shadow" alt="Freight truck">
                    </div>
                    <div class="col-6 mt-5">
                        <img src="{% static "images/warehouse.jpg" %}" class="img-fluid rounded-4 shadow" alt="Warehouse interior">
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

{% if testimonials %}
<!-- Testimonials Section -->
<section class="py-5 bg-light">
    <div class="container py-5">
        <div class="text-center mb-5">
            <h2 class="fw-bold">{% trans "What Our Customers Say" %}</h2>
            <p class="text-muted">{% trans "Real stories from shippers and truck owners using MASAR." %}</p>
        </div>
        <div class="row g-4">
            {% for testimonial in testimonials %}
            <div class="col-md-4">
                <div class="card h-100 border-0 shadow-sm p-4">
                    <div class="mb-3 text-warning">
                        {% for i in "12345" %}
                        <i class="fa-solid fa-star {% if forloop.counter > testimonial.rating %}text-muted{% endif %}"></i>
                        {% endfor %}
                    </div>
                    <p class="mb-4 font-italic">"{{ testimonial.display_content }}"</p>
                    <div class="d-flex align-items-center mt-auto">
                        {% if testimonial.image %}
                        <img src="{{ testimonial.image.url }}" alt="{{ testimonial.display_name }}" class="rounded-circle me-3" style="width: 50px; height: 50px; object-fit: cover;">
                        {% else %}
                        <div class="bg-primary text-white rounded-circle d-flex align-items-center justify-content-center me-3" style="width: 50px; height: 50px;">
                            <span class="fw-bold">{{ testimonial.display_name|slice:":1" }}</span>
                        </div>
                        {% endif %}
                        <div class="ms-2">
                            <h6 class="fw-bold mb-0">{{ testimonial.display_name }}</h6>
                            <small class="text-muted">{{ testimonial.display_role }}</small>
                        </div>
                    </div>
                </div>
            </div>
            {% endfor %}
        </div>
    </div>
</section>
{% endif %}

<!-- Call to Action -->
<section class="py-5">
    <div class="container">
        <div class="bg-primary text-white p-5 rounded-5 text-center shadow-lg">
            <h2 class="fw-bold mb-3">{% trans "Ready to move your cargo?" %}</h2>
            <p class="mb-4 opacity-75">{% trans "Join thousands of shippers and drivers on MASAR today." %}</p>
            <a href="{% url 'register' %}" class="btn btn-light btn-lg px-5 rounded-pill fw-bold text-primary">{% trans "Join Now" %}</a>
        </div>
    </div>
</section>

{% endblock %}