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

{% block content %}
<!-- Hero Section -->
<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="https://img.freepik.com/free-vector/delivery-truck-with-packages-concept_23-2148464601.jpg" alt="Logistics" class="img-fluid rounded-4 shadow-lg">
            </div>
        </div>
    </div>
</section>

<!-- 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="https://img.freepik.com/free-photo/view-truck-with-cargo_23-2150821510.jpg" class="img-fluid rounded-4 shadow" alt="">
                    </div>
                    <div class="col-6 mt-5">
                        <img src="https://img.freepik.com/free-photo/industrial-port-container-yard-with-cranes-logistic-import-export-business-logistics-background_35641-2693.jpg" class="img-fluid rounded-4 shadow" alt="">
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- 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 %}