@extends('frontend.layouts.app')

@section('content')

<section class="relative py-24 bg-black overflow-hidden border-b border-red-950/50">
    @if($event->featured_image)
        <div class="absolute inset-0 bg-cover bg-center opacity-25"
             style="background-image:url('{{ asset('storage/' . $event->featured_image) }}')"></div>
        <div class="absolute inset-0 bg-black/80"></div>
    @endif

    <div class="relative max-w-6xl mx-auto px-6">
        <p class="text-red-500 uppercase tracking-[0.3em] text-sm mb-4">
            {{ $event->event_date?->format('M d, Y • h:i A') }}
        </p>

        <h1 class="text-5xl md:text-7xl mb-4">
            {{ $event->title }}
        </h1>

        <p class="text-gray-400 text-lg">
            {{ $event->venue }}
            @if($event->city || $event->country)
                • {{ trim(($event->city ? $event->city.', ' : '').($event->country ?? ''), ', ') }}
            @endif
        </p>
    </div>
</section>

<section class="max-w-6xl mx-auto px-6 py-16 grid lg:grid-cols-2 gap-10">
    <div>
        @if($event->featured_image)
            <img src="{{ asset('storage/' . $event->featured_image) }}"
                 alt="{{ $event->title }}"
                 class="w-full rounded-3xl border border-red-950 shadow-xl">
        @endif
    </div>

    <div class="bg-[#111] rounded-3xl border border-red-950 p-8">
        <h2 class="text-3xl mb-6">Event Details</h2>

        <div class="space-y-4 text-gray-300 mb-8">
            <p><strong class="text-white">Title:</strong> {{ $event->title }}</p>
            <p><strong class="text-white">Date:</strong> {{ $event->event_date?->format('F d, Y') }}</p>
            <p><strong class="text-white">Time:</strong> {{ $event->event_date?->format('h:i A') }}</p>
            <p><strong class="text-white">Venue:</strong> {{ $event->venue ?: 'TBA' }}</p>
            <p><strong class="text-white">Location:</strong> {{ trim(($event->city ? $event->city.', ' : '').($event->country ?? 'TBA'), ', ') }}</p>
        </div>

        @if($event->description)
            <div class="prose prose-invert max-w-none text-gray-300 leading-8 mb-8">
                {!! nl2br(e($event->description)) !!}
            </div>
        @endif

        <div class="flex flex-wrap gap-4">
            @if($event->ticket_link)
                <a href="{{ $event->ticket_link }}" target="_blank"
                   class="bg-red-600 hover:bg-red-700 px-6 py-3 rounded-full font-semibold">
                    Get Tickets
                </a>
            @endif

            <a href="{{ route('events') }}"
               class="border border-red-600 px-6 py-3 rounded-full font-semibold hover:bg-red-600 transition">
                Back to Events
            </a>
        </div>
    </div>
</section>

@endsection