@extends('layouts.frontend')

@section('title','Pizza Ndeso - Home')

@section('content')
  <div class="container">
    <!-- HERO -->
    <div id="heroCarousel" class="carousel slide my-4 hero" data-bs-ride="carousel">
      <div class="carousel-inner w-100">
        <div class="carousel-item active">
          <div class="row g-0">
            <div class="col-lg-7 d-flex align-items-center">
              <div class="p-4">
                <h1 class="display-5 fw-bold text-dark">Pizza terbaik di kotamu</h1>
                <p class="lead text-muted">Resep rahasia, bahan segar — pesan sekarang dan rasakan bedanya.</p>
                <a href="#" class="btn btn-primary btn-lg">Order Online</a>
              </div>
            </div>
            <div class="col-lg-5 d-none d-lg-block">
              <img src="{{ asset('images/hero1.jpg') }}" class="img-fluid rounded-end" alt="hero">
            </div>
          </div>
        </div>

        <div class="carousel-item">
          <div class="row g-0">
            <div class="col-lg-7 d-flex align-items-center">
              <div class="p-4">
                <h2 class="fw-bold">Rasa Autentik, Harga Terjangkau</h2>
                <p class="text-muted">Diskon khusus setiap akhir pekan.</p>
                <a href="#" class="btn btn-outline-primary">Lihat Menu</a>
              </div>
            </div>
            <div class="col-lg-5 d-none d-lg-block">
              <img src="{{ asset('images/hero2.jpg') }}" class="img-fluid rounded-end" alt="hero2">
            </div>
          </div>
        </div>
      </div>

      <button class="carousel-control-prev" type="button" data-bs-target="#heroCarousel" data-bs-slide="prev">
        <span class="carousel-control-prev-icon"></span>
      </button>
      <button class="carousel-control-next" type="button" data-bs-target="#heroCarousel" data-bs-slide="next">
        <span class="carousel-control-next-icon"></span>
      </button>
    </div>

    <!-- MENU KARTU -->
    <h3 class="mb-3">Menu Pilihan</h3>
    <div class="row">
      @for ($i=1; $i<=4; $i++)
        <div class="col-md-3 mb-4">
          <div class="card card-menu shadow-sm">
            <img src="{{ asset('images/hero1.jpg') }}" class="card-img-top" alt="item">
            <div class="card-body">
              <h5 class="card-title">Pizza Spesial {{ $i }}</h5>
              <p class="card-text text-muted">Bahan: keju, saus, topping istimewa.</p>
              <div class="d-flex justify-content-between align-items-center">
                <span class="fw-bold">Rp 45.000</span>
                <a href="#" class="btn btn-sm btn-primary">Order</a>
              </div>
            </div>
          </div>
        </div>
      @endfor
    </div>
  </div>
@endsection