@extends('layouts.app')

@section('content')
<section class="hero">
    <div class="hero-copy"><p class="eyebrow">RENTAL MOBIL JAKARTA</p><h1>Mobil siap jalan, tanpa urusan berbelit.</h1><p class="lede">Pilih armada yang pas untuk agenda Anda. Reservasi cepat, konfirmasi jelas, dan pembayaran aman.</p><a class="button primary" href="#armada">Lihat armada <span aria-hidden="true">→</span></a></div>
    <img class="hero-image" src="https://images.unsplash.com/photo-1504215680853-026ed2a45def?auto=format&fit=crop&w=1800&q=90" alt="Mobil melaju di jalan terbuka">
</section>
<section class="trust-strip" id="cara-sewa"><div><b>01</b><span>Pilih mobil</span></div><div><b>02</b><span>Atur tanggal</span></div><div><b>03</b><span>Bayar aman</span></div><div><b>04</b><span>Berangkat</span></div></section>
<section class="inventory" id="armada"><div class="section-heading"><div><p class="eyebrow">ARMADA PILIHAN</p><h2>Untuk rencana besar dan perjalanan sehari-hari.</h2></div><p>{{ $cars->count() }} mobil tersedia hari ini</p></div>
    <div class="car-grid">@forelse($cars as $car)
        <article class="car-card"><a class="car-image" href="{{ route('cars.show', $car) }}"><img src="{{ $car->image_url }}" alt="{{ $car->name }}"></a><div class="car-body"><div class="car-title"><div><span class="category">{{ $car->category }}</span><h3>{{ $car->name }}</h3></div><span class="rate">Rp {{ number_format($car->daily_rate, 0, ',', '.') }}<small>/hari</small></span></div><div class="specs"><span>{{ $car->transmission }}</span><span>{{ $car->seats }} kursi</span></div><a class="button outline" href="{{ route('cars.show', $car) }}">Pilih mobil <span aria-hidden="true">→</span></a></div></article>
    @empty <p>Armada sedang diperbarui. Silakan kembali sesaat lagi.</p>@endforelse</div>
</section>
@endsection