@extends('layouts.app')

@section('title', 'Blog de OfertasViajes - ofertasviajes.cl')

@section('content')
<style>
    .blog-travel-page {
        background: linear-gradient(180deg, #f5fbff 0%, #ffffff 100%);
        min-height: 100vh;
        padding-top: 30px;
        padding-bottom: 60px;
    }

    .travel-hero {
        position: relative;
        border-radius: 24px;
        overflow: hidden;
        min-height: 380px;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        color: #fff;
        padding: 40px 20px;
        background:
            linear-gradient(rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.45)),
            url('https://images.unsplash.com/photo-1507525428034-b723cf961d3e?auto=format&fit=crop&w=1600&q=80') center/cover no-repeat;
        box-shadow: 0 18px 40px rgba(0,0,0,0.12);
        margin-bottom: 50px;
    }

    .travel-hero h1 {
        font-size: 2.8rem;
        font-weight: 800;
        margin-bottom: 12px;
    }

    .travel-hero p {
        font-size: 1.08rem;
        max-width: 760px;
        margin: 0 auto;
        opacity: .95;
    }

    .section-title {
        font-size: 2rem;
        font-weight: 800;
        color: #17324d;
        text-align: center;
        margin-bottom: 10px;
    }

    .section-subtitle {
        text-align: center;
        color: #6c757d;
        margin-bottom: 35px;
    }

    .travel-card {
        border: none;
        border-radius: 22px;
        overflow: hidden;
        background: #fff;
        box-shadow: 0 10px 28px rgba(0,0,0,0.08);
        transition: all .3s ease;
        height: 100%;
    }

    .travel-card:hover {
        transform: translateY(-8px);
        box-shadow: 0 18px 38px rgba(0,0,0,0.12);
    }

    .travel-card-image {
        position: relative;
        height: 240px;
        overflow: hidden;
    }

    .travel-card-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform .45s ease;
    }

    .travel-card:hover .travel-card-image img {
        transform: scale(1.06);
    }

    .travel-badge {
        position: absolute;
        top: 16px;
        left: 16px;
        background: rgba(255,255,255,.92);
        color: #0d6efd;
        font-size: .82rem;
        font-weight: 700;
        padding: 8px 14px;
        border-radius: 999px;
    }

    .travel-card-body {
        padding: 1.4rem;
    }

    .travel-meta {
        font-size: .85rem;
        color: #8a949e;
        margin-bottom: 10px;
    }

    .travel-card-title {
        font-size: 1.18rem;
        font-weight: 800;
        color: #17324d;
        line-height: 1.4;
        margin-bottom: 12px;
    }

    .travel-card-text {
        color: #5f6b76;
        font-size: 0.96rem;
        line-height: 1.7;
        margin-bottom: 1rem;
    }

    .travel-btn {
        display: inline-block;
        background: linear-gradient(135deg, #0d6efd, #00bcd4);
        color: #fff;
        padding: 10px 18px;
        border-radius: 999px;
        font-weight: 700;
        text-decoration: none;
        transition: .3s ease;
    }

    .travel-btn:hover {
        color: #fff;
        opacity: .95;
        transform: translateY(-1px);
    }

    .pagination {
        justify-content: center;
    }

    @media (max-width: 768px) {
        .travel-hero {
            min-height: 290px;
            border-radius: 18px;
        }

        .travel-hero h1 {
            font-size: 2rem;
        }

        .travel-hero p {
            font-size: 1rem;
        }
    }
</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>

<div class="blog-travel-page">
    <div class="container">

        {{-- HERO --}}
        <section class="travel-hero">
            <div>
                <h1>Descubre tu próximo destino</h1>
                <p>
                    Inspírate con nuestras recomendaciones, guías y artículos para planificar viajes inolvidables por Chile y el mundo.
                </p>
            </div>
        </section>

        {{-- TITULO --}}
        <div class="mb-4">
            <h2 class="section-title">Últimas recomendaciones del blog</h2>
            <p class="section-subtitle">
                Artículos pensados para inspirarte, informarte y ayudarte a encontrar tu próxima aventura
            </p>
        </div>

        {{-- POSTS --}}
        <div class="row g-4">
            @foreach($posts as $post)
                <div class="col-md-6 col-lg-4">
                    <div class="travel-card">
                        <div class="travel-card-image">
                             @if($post->featured_image)
                                <img src="{{ asset($post->featured_image) }}" class="card-img-top" alt="{{ $post->title }}">
                            @else
                                <img src="https://images.unsplash.com/photo-1502602898657-3e91760cbb34?auto=format&fit=crop&w=600&q=80" class="card-img-top" alt="Destino turístico">
                            @endif
                            <span class="travel-badge">
                                {{ $post->category->name ?? 'Viajes' }}
                            </span>
                        </div>

                        <div class="travel-card-body">
                            <div class="travel-meta">
                                {{ $post->created_at ? $post->created_at->format('d M Y') : '' }}
                            </div>

                            <h3 class="travel-card-title">{{ $post->title }}</h3>

                            <p class="travel-card-text">
                                {{ $post->excerpt }}
                            </p>

                            <a href="{{ route('blog.show', $post->slug) }}" class="travel-btn">
                                Leer más
                            </a>
                        </div>
                    </div>
                </div>
            @endforeach
        </div>

        {{-- PAGINACION --}}
        <div class="mt-5">
            {{ $posts->links() }}
        </div>

    </div>
</div>
@endsection