{% extends "base.html" %}

{% block content %}
<!-- Hero Section -->
<section class="bg-gradient-to-r from-blue-500 to-purple-600 text-white py-20 mb-12 rounded-lg">
    <div class="container mx-auto text-center">
        <h1 class="text-5xl font-bold mb-4">Find Your Dream Car</h1>
        <p class="text-xl mb-8">Browse through our extensive collection of quality vehicles</p>
        {% if session.get('user_id') and session.get('role') == 'buyer' %}
        <a href="#cars" class="bg-white text-blue-600 px-8 py-3 rounded-full font-semibold hover:bg-gray-100 transition duration-300">
            Browse Cars
        </a>
        {% else %}
        <a href="{{ url_for('register') }}" class="bg-white text-blue-600 px-8 py-3 rounded-full font-semibold hover:bg-gray-100 transition duration-300">
            Get Started
        </a>
        {% endif %}
    </div>
</section>

<!-- Cars Section -->
<section id="cars" class="mb-12">
    <h2 class="text-3xl font-bold text-center mb-8">Available Cars</h2>
    
    {% if cars %}
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
        {% for car in cars %}
        <div class="bg-white rounded-lg shadow-lg overflow-hidden hover:shadow-xl transition duration-300">
            <div class="p-6">
                <h3 class="text-xl font-bold mb-2">{{ car.name }}</h3>
                <p class="text-gray-600 mb-2">Year: {{ car.year }}</p>
                <p class="text-2xl font-bold text-blue-600 mb-4">${{ car.price }}</p>
                <p class="text-gray-700 mb-4">{{ car.description }}</p>
                
                {% if session.get('user_id') and session.get('role') == 'buyer' %}
                <a href="{{ url_for('book_appointment', car_id=car._id) }}" 
                   class="bg-blue-600 text-white px-6 py-2 rounded-full hover:bg-blue-700 transition duration-300 block text-center">
                    Book Appointment
                </a>
                {% elif not session.get('user_id') %}
                <p class="text-red-500 text-center">Please login as buyer to book appointment</p>
                {% endif %}
            </div>
        </div>
        {% endfor %}
    </div>
    {% else %}
    <div class="text-center py-12">
        <p class="text-xl text-gray-600">No cars available at the moment. Check back later!</p>
    </div>
    {% endif %}
</section>
{% endblock %}