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

{% block content %}
<!-- Hero Section -->
<section class="hero-section">
    <div class="container">
        <div class="row align-items-center">
            <div class="col-lg-6 mb-5 mb-lg-0">
                <h1 class="display-3 mb-4">{% trans "Small Shipments," %}<br><span style="color: var(--accent-orange)">{% trans "Smart Delivery." %}</span></h1>
                <p class="lead mb-5 opacity-75">{% trans "masarX connects shippers with local car owners for fast, reliable, and trackable deliveries. Your cargo, our priority." %}</p>
                <div class="d-flex gap-3">
                    <a href="{% url 'shipment_request' %}" class="btn btn-masarx-primary">{% trans "Start Shipping" %}</a>
                    <a href="#how-it-works" class="btn btn-outline-light border-2 px-4 py-2" style="border-radius: 12px;">{% trans "Learn More" %}</a>
                </div>
            </div>
            <div class="col-lg-5 offset-lg-1">
                <div class="glass-card">
                    <h3 class="mb-4">{% trans "Track your Parcel" %}</h3>
                    <form method="GET" action="{% url 'track' %}">
                        <div class="input-group mb-3">
                            <input type="text" name="tracking_number" class="form-control tracking-input" placeholder="{% trans 'Enter Tracking ID (e.g. 5A2B...)' %}" value="{{ tracking_number|default:'' }}">
                            <button class="btn btn-masarx-primary px-4" type="submit">{% trans "Track" %}</button>
                        </div>
                    </form>
                    <p class="small opacity-50 mt-3 mb-0">{% trans "Enter your 10-character tracking ID to see live updates." %}</p>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Features Section -->
<section id="how-it-works" class="py-5 bg-white">
    <div class="container py-5">
        <div class="text-center mb-5">
            <h2 class="display-5">{% trans "How masarX Works" %}</h2>
            <p class="text-muted">{% trans "Simple steps to get your shipment moving" %}</p>
        </div>
        <div class="row g-4">
            <div class="col-md-4">
                <div class="p-4 border-0 card h-100 bg-transparent">
                    <div class="feature-icon">
                        <i class="bi bi-box-seam"></i>
                    </div>
                    <h4>1. {% trans "List your Parcel" %}</h4>
                    <p class="text-muted">{% trans "Enter shipment details, weight, and delivery addresses. It's quick and easy." %}</p>
                </div>
            </div>
            <div class="col-md-4">
                <div class="p-4 border-0 card h-100 bg-transparent">
                    <div class="feature-icon">
                        <i class="bi bi-truck"></i>
                    </div>
                    <h4>2. {% trans "Connect with Driver" %}</h4>
                    <p class="text-muted">{% trans "A verified car owner near you picks up the parcel and starts the journey." %}</p>
                </div>
            </div>
            <div class="col-md-4">
                <div class="p-4 border-0 card h-100 bg-transparent">
                    <div class="feature-icon">
                        <i class="bi bi-shield-check"></i>
                    </div>
                    <h4>3. {% trans "Secure Delivery" %}</h4>
                    <p class="text-muted">{% trans "Track your parcel in real-time until it reaches its destination safely." %}</p>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Top Performers Section -->
<section class="py-5 bg-white border-top">
    <div class="container py-5">
        <div class="row g-5">
            <!-- Top Drivers -->
            <div class="col-lg-6">
                <h3 class="mb-4 text-center">
                    <i class="bi bi-trophy text-warning me-2"></i>{% trans "Top Rated Drivers" %}
                </h3>
                <div class="list-group list-group-flush shadow-sm rounded-3 overflow-hidden">
                    {% for driver in top_drivers %}
                        <div class="list-group-item d-flex align-items-center p-3">
                            <div class="me-3 position-relative">
                                {% if driver.profile_picture %}
                                    <img src="{{ driver.profile_picture.url }}" class="rounded-circle" width="50" height="50" style="object-fit: cover;">
                                {% else %}
                                    <div class="rounded-circle bg-light d-flex align-items-center justify-content-center text-muted fw-bold" style="width: 50px; height: 50px;">
                                        {{ driver.user.first_name|first|upper }}
                                    </div>
                                {% endif %}
                                <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-warning text-dark border border-white">
                                    {{ forloop.counter }}
                                </span>
                            </div>
                            <div class="flex-grow-1">
                                <h6 class="mb-0">{{ driver.user.first_name }} {{ driver.user.last_name|first }}.</h6>
                                <small class="text-muted">{% trans "Driver" %}</small>
                            </div>
                            <div class="text-end">
                                <div class="text-warning small mb-1">
                                    <i class="bi bi-star-fill"></i> {{ driver.avg_rating|floatformat:1 }}
                                </div>
                                <small class="text-muted">({{ driver.rating_count }} {% trans "reviews" %})</small>
                            </div>
                        </div>
                    {% empty %}
                        <div class="list-group-item p-4 text-center text-muted">
                            {% trans "No ratings yet. Be the first!" %}
                        </div>
                    {% endfor %}
                </div>
            </div>

            <!-- Top Shippers -->
            <div class="col-lg-6">
                <h3 class="mb-4 text-center">
                    <i class="bi bi-box-seam text-primary me-2"></i>{% trans "Top Shippers" %}
                </h3>
                <div class="list-group list-group-flush shadow-sm rounded-3 overflow-hidden">
                    {% for shipper in top_shippers %}
                        <div class="list-group-item d-flex align-items-center p-3">
                            <div class="me-3 position-relative">
                                {% if shipper.profile_picture %}
                                    <img src="{{ shipper.profile_picture.url }}" class="rounded-circle" width="50" height="50" style="object-fit: cover;">
                                {% else %}
                                    <div class="rounded-circle bg-light d-flex align-items-center justify-content-center text-muted fw-bold" style="width: 50px; height: 50px;">
                                        {{ shipper.user.first_name|first|upper }}
                                    </div>
                                {% endif %}
                                <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-primary text-white border border-white">
                                    {{ forloop.counter }}
                                </span>
                            </div>
                            <div class="flex-grow-1">
                                <h6 class="mb-0">{{ shipper.user.first_name }} {{ shipper.user.last_name|first }}.</h6>
                                <small class="text-muted">{% trans "Shipper" %}</small>
                            </div>
                            <div class="text-end">
                                <div class="fw-bold text-primary mb-1">
                                    {{ shipper.shipment_count }}
                                </div>
                                <small class="text-muted">{% trans "Shipments" %}</small>
                            </div>
                        </div>
                    {% empty %}
                        <div class="list-group-item p-4 text-center text-muted">
                            {% trans "No shipments yet. Start shipping now!" %}
                        </div>
                    {% endfor %}
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Testimonials Section -->
{% if testimonials %}
<section class="py-5 bg-light">
    <div class="container py-5">
        <div class="text-center mb-5">
            <h2 class="display-5">{% trans "What Our Users Say" %}</h2>
            <p class="text-muted">{% trans "Real stories from our community" %}</p>
        </div>
        <div class="row g-4 justify-content-center">
            {% for testimonial in testimonials %}
            <div class="col-md-6 col-lg-4">
                <div class="card h-100 border-0 shadow-sm">
                    <div class="card-body p-4 text-center">
                        {% if testimonial.image %}
                        <img src="{{ testimonial.image.url }}" alt="{{ testimonial.name }}" class="rounded-circle mb-3" width="80" height="80" style="object-fit: cover;">
                        {% else %}
                        <div class="rounded-circle bg-secondary text-white d-flex align-items-center justify-content-center mx-auto mb-3" style="width: 80px; height: 80px; font-size: 2rem;">
                            {{ testimonial.name|first|upper }}
                        </div>
                        {% endif %}
                        <h5 class="card-title">{{ testimonial.name }}</h5>
                        <p class="text-muted small mb-3">{{ testimonial.role }}</p>
                        <p class="card-text fst-italic">"{{ testimonial.content }}"</p>
                    </div>
                </div>
            </div>
            {% endfor %}
        </div>
    </div>
</section>
{% endif %}

<!-- CTA Section -->
<section class="py-5" style="background-color: var(--primary-dark); color: white;">
    <div class="container py-4 text-center">
        <h2 class="mb-4">{% trans "Ready to join the movement?" %}</h2>
        <div class="row justify-content-center gap-4">
            <div class="col-md-5 text-center">
                <p class="mb-3">{% trans "I want to send a parcel" %}</p>
                <a href="{% url 'register' %}" class="btn btn-masarx-primary">{% trans "Become a Shipper" %}</a>
            </div>
            <div class="col-md-5 text-center">
                <p class="mb-3">{% trans "I have a car and want to earn" %}</p>
                <a href="{% url 'register' %}" class="btn btn-outline-light border-2 px-4 py-2" style="border-radius: 12px;">{% trans "Become a Driver" %}</a>
            </div>
        </div>
    </div>
</section>
{% endblock %}