@extends('layouts.app')

@section('content')
<style>
    html { scroll-behavior: smooth; }

    body {
        background-color: #f8f9fa;
        font-family: 'Segoe UI', sans-serif;
    }

    .hero-flights {
        background: url('https://images.unsplash.com/photo-1507525428034-b723cf961d3e?auto=format&fit=crop&w=1600&q=80') center center / cover no-repeat;
        min-height: 500px;
        position: relative;
    }

    .hero-flights::before {
        content: '';
        position: absolute;
        inset: 0;
        background-color: rgba(0, 123, 255, 0.5);
        z-index: 1;
    }

    .hero-flights .hero-content {
        position: relative;
        z-index: 2;
        color: white;
        text-shadow: 1px 1px 6px rgba(0, 0, 0, 0.7);
    }

    .section-title {
        color: #0077cc;
        font-weight: bold;
    }

    .section-soft {
        background: #f8fbff;
    }

    .badge-flight {
        background-color: #eaf7ee;
        color: #198754;
        border: 1px solid #198754;
    }

    .card-img-top.offer-img {
        height: 250px;
        object-fit: cover;
    }

    .price-badge {
        font-size: 1rem;
        font-weight: 700;
        color: #198754;
    }

    .offer-meta {
        font-size: 0.95rem;
        color: #6c757d;
        line-height: 1.6;
    }

    .hero-flights .btn-outline-light:hover {
        background-color: #fff;
        color: #0d6efd;
    }
</style>

<nav class="navbar navbar-expand-lg navbar-light bg-white shadow-sm sticky-top">
  <div class="container">
    <a class="navbar-brand fw-bold text-primary" href="{{ route('home') }}">
      <img src="{{ asset('storage/images/logoOfertasViajes.png') }}" alt="Logo Ofertas Viajes" height="120" class="me-2">
    </a>

    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarMenu">
      <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbarMenu">
      <ul class="navbar-nav ms-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link active fw-semibold text-primary" href="{{ route('home') }}">Inicio</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#vuelos">Vuelos</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#blog">Blog</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#servicios">Destinos</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

<header class="hero d-flex align-items-center text-center">
  <div class="container hero-content">
    
  </div>
</header>


<section class="py-5 section-soft" id="ofertas">
    <div class="container">
        <div class="d-flex justify-content-between align-items-center flex-wrap mb-4">
            <div>
                <h2 class="section-title mb-2">Ofertas de vuelos destacadas</h2>
                <p class="text-muted mb-0">Actualmente hay {{ $offers->total() }} ofertas disponibles.</p>
            </div>

            <a href="{{ route('home') }}#blog" class="btn btn-outline-primary">
                Ver recomendaciones
            </a>
        </div>

        <div class="row g-4">
            @forelse($offers as $offer)
                <div class="col-md-6 col-lg-4">
                    <article class="card border-0 shadow-sm h-100">
                        @if(!empty($offer->image))
                            <img
                                src="{{ asset('storage/' . $offer->image) }}"
                                class="card-img-top offer-img"
                                alt="{{ $offer->title ?? 'Oferta de vuelo' }}"
                            >
                        @else
                            <img
                                src="https://images.unsplash.com/photo-1436491865332-7a61a109cc05?auto=format&fit=crop&w=900&q=80"
                                class="card-img-top offer-img"
                                alt="Oferta de vuelo"
                            >
                        @endif

                        <div class="card-body d-flex flex-column">
                            <span class="badge badge-flight mb-2">Vuelo</span>

                            <h5 class="card-title text-primary mb-2">
                                @if($offer->route)
                                    {{ $offer->route->origin ?? 'Origen' }} → {{ $offer->route->destination ?? 'Destino' }}
                                @else
                                    {{ $offer->title ?? 'Oferta de vuelo' }}
                                @endif
                            </h5>

                            @if(!empty($offer->price))
                                <p class="mb-2 price-badge">
                                    ${{ number_format($offer->price, 0, ',', '.') }}
                                </p>
                            @endif

                            <div class="offer-meta mb-3">
                                @if(!empty($offer->airline))
                                    <div><strong>Aerolínea:</strong> {{ $offer->airline }}</div>
                                @endif

                                @if(!empty($offer->departure_date))
                                    <div><strong>Salida:</strong> {{ \Carbon\Carbon::parse($offer->departure_date)->format('d-m-Y') }}</div>
                                @endif

                                @if(!empty($offer->return_date))
                                    <div><strong>Regreso:</strong> {{ \Carbon\Carbon::parse($offer->return_date)->format('d-m-Y') }}</div>
                                @endif

                                @if(isset($offer->stops) && $offer->stops !== null)
                                    <div>
                                        <strong>Escalas:</strong>
                                        @if((int) $offer->stops === 0)
                                            Directo
                                        @elseif((int) $offer->stops === 1)
                                            1 escala
                                        @else
                                            {{ $offer->stops }} escalas
                                        @endif
                                    </div>
                                @endif

                                @if(!empty($offer->detected_at))
                                    <div><strong>Detectado:</strong> {{ \Carbon\Carbon::parse($offer->detected_at)->format('d-m-Y') }}</div>
                                @endif
                            </div>

                            <div class="mt-auto">
                                @if(!empty($offer->slug))
                                    <a href="{{ route('flights.offers.show', ['slug' => $offer->slug]) }}" class="btn btn-success w-100">
                                        Ver oferta
                                    </a>
                                @else
                                    <button class="btn btn-outline-secondary w-100" disabled>
                                        Oferta no disponible
                                    </button>
                                @endif
                            </div>
                        </div>
                    </article>
                </div>
            @empty
                <div class="col-12">
                    <div class="alert alert-light border text-center">
                        Aún no hay ofertas de vuelos disponibles.
                    </div>
                </div>
            @endforelse
        </div>

        <div class="d-flex justify-content-center mt-5">
            {{ $offers->links() }}
        </div>
    </div>
</section>
@endsection