@extends('layouts.site')

@section('title', 'Destinations - Visit Sri Lanka 360')

@php
    // hero background (use your existing path)
    $heroBg = asset('assets/img/hero/destinations.jpg');
@endphp

@section('content')

    {{-- HERO (EXACT same as Tours hero style) --}}
    <section class="relative">
        <div class="h-[34vh] md:h-[38vh] relative overflow-hidden bg-slate-900 bg-cover bg-center"
            style="background-image: url('{{ $heroBg }}');">

            {{-- overlays --}}
            <div class="absolute inset-0 bg-black/55"></div>
            <div class="absolute inset-0
                        bg-[radial-gradient(900px_500px_at_20%_30%,rgba(215,166,43,.35),transparent_60%),
                            radial-gradient(800px_500px_at_85%_40%,rgba(255,255,255,.10),transparent_55%)]">
            </div>

            <div class="relative container-site h-full flex items-center">
                <div class="max-w-3xl">
                    <div class="text-white/70 text-xs tracking-[.22em] uppercase">
                        Explore Sri Lanka
                    </div>

                    <h1 class="mt-3 text-white text-3xl md:text-5xl font-semibold"
                        style="font-family: var(--font-display);">
                        Destinations
                    </h1>

                    <p class="mt-3 text-white/80 text-sm md:text-base">
                        Explore Sri Lanka’s best places — beaches, mountains, culture, wildlife and hidden gems.
                    </p>
                </div>
            </div>
        </div>
    </section>

    {{-- SUMMARY BAR (same positioning as Tours filter bar style) --}}
    <section class="-mt-10 md:-mt-12 relative z-10">
        <div class="container-site">
            <div class="rounded-3xl border border-slate-200 bg-white shadow-soft overflow-hidden">
                <div class="grid grid-cols-2 md:grid-cols-4">
                    <div class="p-5 md:p-6 border-b md:border-b-0 md:border-r border-slate-200">
                        <div class="tour-klabel">Total</div>
                        <div class="mt-2 text-slate-900 font-semibold">
                            {{ method_exists($destinations, 'total') ? $destinations->total() : $destinations->count() }}
                            Destinations
                        </div>
                    </div>

                    <div class="p-5 md:p-6 border-b md:border-b-0 md:border-r border-slate-200">
                        <div class="tour-klabel">Best for</div>
                        <div class="mt-2 text-slate-900 font-semibold">
                            Beaches • Hills • Wildlife
                        </div>
                    </div>

                    <div class="p-5 md:p-6 border-r border-slate-200">
                        <div class="tour-klabel">Plan</div>
                        <div class="mt-2 text-slate-900 font-semibold">
                            Browse • Save • Book
                        </div>
                    </div>

                    <div class="p-5 md:p-6 flex items-center justify-between gap-4">
                        <a href="{{ url('/tours') }}" class="btn-gold w-full justify-center">
                            View Tours
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </section>

    {{-- LIST --}}
    <section class="py-10 md:py-14">
        <div class="container-site">
            <div class="mt-6 grid sm:grid-cols-2 lg:grid-cols-3 gap-6">
                @foreach($destinations as $d)
                    @php
                        $img = $d->cover_image ? asset('storage/' . ltrim($d->cover_image, '/')) : null;
                    @endphp

                    <a href="{{ route('destinations.show', $d->slug) }}"
                        class="group rounded-3xl overflow-hidden border border-slate-200 bg-white hover:shadow-soft transition">

                        <div class="relative h-56 bg-slate-100 overflow-hidden">
                            @if($img)
                                <img src="{{ $img }}" alt="{{ $d->name }}"
                                    class="absolute inset-0 h-full w-full object-cover transition duration-700 group-hover:scale-[1.04]">
                                <div class="absolute inset-0 bg-gradient-to-t from-black/20 via-transparent to-transparent"></div>
                            @else
                                <div class="absolute inset-0 bg-slate-200"></div>
                            @endif
                        </div>

                        <div class="p-5">
                            <div class="text-xs tracking-[.22em] uppercase text-slate-500">
                                {{ $d->type ? ucwords(str_replace('-', ' ', $d->type)) : 'Destination' }}
                            </div>

                            <div class="mt-2 text-xl font-semibold" style="font-family: var(--font-display);">
                                {{ $d->name }}
                            </div>

                            @if($d->excerpt)
                                <div class="mt-2 text-sm text-slate-600 line-clamp-2">
                                    {{ $d->excerpt }}
                                </div>
                            @endif

                            <div class="mt-4 text-[11px] font-semibold tracking-[.22em] uppercase text-gold-700">
                                Explore <i class="fa-solid fa-arrow-right ml-1"></i>
                            </div>
                        </div>
                    </a>
                @endforeach
            </div>

            <div class="mt-10">
                {{ $destinations->links() }}
            </div>
        </div>
    </section>
@endsection