@extends('frontend.layouts.app')

@section('content')

<section class="relative py-24 text-center bg-black overflow-hidden border-b border-red-950/50">
    @if(!empty($page?->banner_image))
        <div class="absolute inset-0 bg-cover bg-center opacity-30"
             style="background-image:url('{{ asset('storage/' . $page->banner_image) }}')"></div>
        <div class="absolute inset-0 bg-black/75"></div>
    @endif

    <div class="relative max-w-5xl mx-auto px-6">
        <h1 class="text-7xl">
            {{ $page->title ?? 'Events' }}
        </h1>

        <p class="text-gray-400 mt-3 text-lg">
            {{ $page->meta_description ?? 'Upcoming shows, live appearances and official event information.' }}
        </p>
    </div>
</section>

<section class="max-w-7xl mx-auto px-6 py-16">
    <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
        @forelse($events as $event)
            <a href="{{ route('events.show', $event->slug) }}"
               class="block bg-[#111] rounded-3xl overflow-hidden border border-red-950 hover:-translate-y-1 transition duration-300 shadow-xl">
                <div class="h-72 bg-cover bg-center"
                     style="background-image:url('{{ $event->featured_image ? asset('storage/'.$event->featured_image) : '' }}')">
                    @if(!$event->featured_image)
                        <div class="h-full flex items-center justify-center text-gray-500">Event Poster</div>
                    @endif
                </div>

                <div class="p-6">
                    <p class="text-red-500 uppercase tracking-[0.25em] text-xs mb-2">
                        {{ $event->event_date?->format('M d, Y • h:i A') }}
                    </p>

                    <h3 class="text-3xl mb-3">{{ $event->title }}</h3>

                    <p class="text-gray-400 mb-2">
                        {{ $event->venue }}
                    </p>

                    <p class="text-gray-500 mb-4">
                        {{ trim(($event->city ? $event->city.', ' : '').($event->country ?? ''), ', ') }}
                    </p>

                    @if($event->description)
                        <p class="text-gray-300 leading-7 mb-6">
                            {{ \Illuminate\Support\Str::limit(strip_tags($event->description), 120) }}
                        </p>
                    @endif

                    <div class="flex items-center justify-between">
                        <span class="text-red-500 font-semibold">View Details →</span>

                        @if($event->ticket_link)
                            <span class="text-white/70 text-sm">Tickets Available</span>
                        @endif
                    </div>
                </div>
            </a>
        @empty
            <div class="col-span-full text-center text-gray-500 py-20">
                No events available yet.
            </div>
        @endforelse
    </div>

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

@endsection