@extends('public.layouts.guest')

@section('nav_explore', 'text-teal-700 font-semibold')
@section('nav_attractions', 'text-teal-700 font-semibold bg-teal-50/50')
@section('title', 'Explore Cagayan de Oro — ' . \App\Models\Setting::get('property_name','Parkview Hotel CDO'))
@section('meta_description', 'Top attractions and things to do near ' . \App\Models\Setting::get('property_name','Parkview Hotel CDO') . ' in Cagayan de Oro — adventure, dining, shopping and landmarks.')

@section('content')

<div class="bg-gradient-to-br from-teal-700 to-teal-900 py-16">
    <div class="max-w-6xl mx-auto px-4 sm:px-6 text-center">
        <p class="text-teal-300 text-xs font-semibold tracking-[0.2em] uppercase mb-2">Explore CDO</p>
        <h1 class="text-4xl font-bold text-white">Things to Do Nearby</h1>
        <p class="text-teal-200 mt-3 text-sm">Discover the best of Cagayan de Oro — all within reach of your stay.</p>
    </div>
</div>

<div class="py-16 bg-gray-50">
    <div class="max-w-6xl mx-auto px-4 sm:px-6">
        @if($attractions->isEmpty())
        <div class="text-center py-16">
            <div class="w-16 h-16 bg-teal-50 rounded-2xl flex items-center justify-center mx-auto mb-4">
                <svg class="w-8 h-8 text-teal-300" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"/></svg>
            </div>
            <p class="text-gray-500 text-sm">Our local guide is coming soon.</p>
        </div>
        @else
        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
            @foreach($attractions as $a)
            <div class="bg-white rounded-2xl border-[0.5px] border-gray-200 overflow-hidden flex flex-col hover:shadow-md transition-shadow">
                <div class="relative aspect-video bg-gradient-to-br from-teal-50 to-teal-100">
                    @if($a->image_path)
                    <img src="{{ \Illuminate\Support\Facades\Storage::url($a->image_path) }}" alt="{{ $a->name }}" class="w-full h-full object-cover">
                    @else
                    <div class="w-full h-full flex items-center justify-center"><svg class="w-10 h-10 text-teal-200" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"/></svg></div>
                    @endif
                    @if($a->category)<span class="absolute top-3 left-3 bg-white/90 backdrop-blur-sm text-teal-700 text-[11px] font-bold px-2.5 py-1 rounded-lg">{{ $a->category }}</span>@endif
                </div>
                <div class="p-5 flex flex-col flex-1">
                    <h3 class="font-bold text-gray-900">{{ $a->name }}</h3>
                    @if($a->distance_label)
                    <p class="flex items-center gap-1.5 text-xs text-gray-400 mt-1">
                        <svg class="w-3.5 h-3.5 text-teal-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"/></svg>
                        {{ $a->distance_label }}
                    </p>
                    @endif
                    @if($a->description)<p class="text-sm text-gray-500 mt-2 leading-relaxed flex-1">{{ $a->description }}</p>@endif
                    @if($a->map_url)
                    <a href="{{ $a->map_url }}" target="_blank" rel="noopener" class="inline-flex items-center gap-1.5 text-teal-600 hover:text-teal-800 font-semibold text-sm mt-4">
                        View on map
                        <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"/></svg>
                    </a>
                    @endif
                </div>
            </div>
            @endforeach
        </div>
        @endif
    </div>
</div>
@endsection