{% extends 'base.html' %}
{% block title %}TimeWheel Share - Home{% endblock %}
{% block content %}
<section class="hero-section">
    <div class="hero-content">
        <h1>Welcome to TimeWheel Share</h1>
        <p class="hero-subtitle">Match drivers' free time with employees' vehicles for efficient utilization.</p>
        <div class="hero-actions">
            <a href="/vehicles/" class="btn btn-primary">Browse Vehicles</a>
            <a href="/accounts/signup/" class="btn btn-secondary">Get Started</a>
        </div>
    </div>
    <div class="slider" id="heroSlider">
        <div class="slider-track">
            <div class="slide">
                <img src="/static/images/india_car_1.jpg?v={% now 'U' %}" alt="Hatchback on Indian road" onerror="this.onerror=null;this.src='/static/images/hero-car.svg'" loading="lazy">
                <div class="slide-overlay"></div>
            </div>
            <div class="slide">
                <img src="/static/images/india_car_2.jpg?v={% now 'U' %}" alt="City car" onerror="this.onerror=null;this.src='/static/images/hero-car.svg'" loading="lazy">
                <div class="slide-overlay"></div>
            </div>
            <div class="slide">
                <img src="/static/images/india_car_3.jpg?v={% now 'U' %}" alt="SUV on highway" onerror="this.onerror=null;this.src='/static/images/hero-car.svg'" loading="lazy">
                <div class="slide-overlay"></div>
            </div>
            <div class="slide">
                <img src="/static/images/india_car_4.jpg?v={% now 'U' %}" alt="Sedan in traffic" onerror="this.onerror=null;this.src='/static/images/hero-car.svg'" loading="lazy">
                <div class="slide-overlay"></div>
            </div>
            <div class="slide">
                <img src="/static/images/india_car_5.jpg?v={% now 'U' %}" alt="Popular Indian car" onerror="this.onerror=null;this.src='/static/images/hero-car.svg'" loading="lazy">
                <div class="slide-overlay"></div>
            </div>
        </div>
    </div>
    <div class="slider-nav">
        <button type="button" data-dir="-1" aria-label="Previous image">← Previous</button>
        <button type="button" data-dir="1" aria-label="Next image">Next →</button>
    </div>
</section>
    <div class="section">
        <div class="eyebrow">Overview</div>
        <div class="grid">
            <div class="col-6">
                <div class="card">
                    <h4>How TimeWheel Share Works</h4>
                    <ol class="muted">
                        <li>Owners add cars and declare availability windows.</li>
                        <li>Drivers log in and book available vehicles.</li>
                        <li>Approvals confirm bookings; GST-inclusive pricing applied.</li>
                    </ol>
                    <div class="actions">
                        <a href="/accounts/signup/">Create account</a>
                        <a href="/vehicles/new/">Add vehicle</a>
                    </div>
                </div>
            </div>
            <div class="col-6">
                <div class="card">
                    <h4>Benefits</h4>
                    <ul class="muted">
                        <li>Maximize utilization of drivers and vehicles.</li>
                        <li>Lower costs with hourly/daily pricing and GST.</li>
                        <li>Clear policies on insurance and maintenance.</li>
                    </ul>
                    <div class="actions">
                        <a href="/vehicles/">Browse vehicles</a>
                        <a href="/policies/">Read policies</a>
                    </div>
                </div>
            </div>
            <div class="col-12">
                <div class="card">
                    <h4>Get Started</h4>
                    <p class="muted">Sign up, add a vehicle or book one, and manage approvals in minutes.</p>
                    <div class="actions">
                        <a href="/accounts/login/">Login</a>
                        <a href="/accounts/signup/">Sign up</a>
                        <a href="/vehicles/">Find a vehicle</a>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="section">
        <div class="eyebrow">For Drivers</div>
        <div class="card">
            <h4>Make the Most of Your Free Time</h4>
            <p class="muted">Browse vehicles that are available during your idle hours. Transparent pricing, clear policies, and simple approvals let you focus on the job. Track your bookings at <a href="/bookings/mine/">My Bookings</a> and manage changes effortlessly.</p>
            <div class="actions">
                <a href="/vehicles/">Find a vehicle</a>
                <a href="/accounts/login/">Driver login</a>
            </div>
        </div>
    </div>

    <div class="section">
        <div class="eyebrow">For Owners</div>
        <div class="card">
            <h4>Put Your Car to Work</h4>
            <p class="muted">List your car with schedule-based availability, get booking approvals, and receive payouts post-trip. You remain in control—set availability, review policies, and monitor earnings via the admin.</p>
            <div class="actions">
                <a href="/vehicles/new/">Add your vehicle</a>
                <a href="/vehicles/availability/new/">Add availability</a>
                <a href="/policies/">Review policies</a>
            </div>
        </div>
    </div>

    <div class="section">
        <div class="eyebrow">Security & Support</div>
        <div class="grid">
            <div class="col-6">
                <div class="card">
                    <h4>Safety First</h4>
                    <p class="muted">Bookings require approvals and fall strictly within declared availability. Pricing includes GST and clear terms to protect both drivers and owners.</p>
                </div>
            </div>
            <div class="col-6">
                <div class="card">
                    <h4>We’re Here to Help</h4>
                    <p class="muted">Have questions about rates, insurance, or payouts? Visit <a href="/policies/">Policies</a> or contact the admin team via the dashboard.</p>
                </div>
            </div>
        </div>
    </div>
{% endblock %}