@extends('layouts.app')

@section('title', 'Tours y Experiencias | Cartagena Tours & Viajes')

@section('content')
<section class="max-w-7xl mx-auto px-6 py-16">

    <div class="mb-8">
        <p class="text-xs font-semibold tracking-widest uppercase text-[#0B1F44] mb-2">Tours y Experiencias</p>
        <h1 class="text-3xl font-bold text-[#0B1F44]">Explora Cartagena y sus alrededores</h1>
    </div>

    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
        @forelse($tours as $tour)
            <a href="{{ route('tours.show', $tour->slug) }}"
               class="bg-white rounded-2xl overflow-hidden shadow-sm hover:shadow-lg transition block">
                <div class="h-48 bg-gray-200 bg-cover bg-center"
                     style="background-image:url('{{ $tour->imagen_portada ?? asset('images/categorias/cat-1.jpg') }}')">
                </div>
                <div class="p-5">
                    <p class="text-xs text-[#0B1F44] font-semibold uppercase mb-1">{{ $tour->categoria }}</p>
                    <h3 class="text-lg font-bold text-gray-900 mb-2">{{ $tour->titulo }}</h3>
                    <p class="text-sm text-gray-500 mb-3">📍 {{ $tour->ubicacion }}</p>
                    <div class="flex items-center justify-between">
                        <span class="text-sm">⭐ {{ $tour->rating }} ({{ $tour->total_resenas }})</span>
                        <span class="font-bold text-[#0B1F44]">
                            desde ${{ number_format($tour->precio_minimo, 0, ',', '.') }}
                        </span>
                    </div>
                </div>
            </a>
        @empty
            <p class="col-span-full text-center text-gray-400 py-12">
                Todavía no hay tours registrados. Ejecuta el seeder de prueba para ver datos de ejemplo.
            </p>
        @endforelse
    </div>

</section>
@endsection