@extends('layouts.app')

@section('title', $activity->name . ' — Mzaar Mountain Resort')
@section('description', $activity->short_description ?? $activity->description ?? '')

@section('content')

{{-- Hero --}}
<section class="relative h-[55vh] min-h-[400px] w-full overflow-hidden">
    <img src="{{ asset('images/' . ($activity->cover_image ?? 'hero-summer-DHJ752Q0.jpg')) }}"
         alt="{{ $activity->name }}"
         class="absolute inset-0 h-full w-full object-cover"/>
    <div class="absolute inset-0 hero-overlay"></div>
    <div class="container-x relative z-10 flex h-full flex-col justify-end pb-16 text-primary-foreground">
        @if($activity->category)
        <span class="text-sm font-semibold uppercase tracking-[0.3em] text-secondary">{{ $activity->category->name }}</span>
        @endif
        <h1 class="mt-3 max-w-3xl text-4xl leading-tight md:text-6xl">{{ $activity->name }}</h1>
    </div>
</section>

{{-- Content --}}
<section class="container-x py-16 md:py-24">
    <div class="grid gap-16 lg:grid-cols-3">

        {{-- Description --}}
        <div class="lg:col-span-2">
            @if($activity->description)
            <div class="prose prose-lg max-w-none text-muted-foreground">
                {!! nl2br(e($activity->description)) !!}
            </div>
            @endif
        </div>

        {{-- Sidebar: pricing + book --}}
        <div class="space-y-6">
            {{-- Pricing --}}
            @if($pricing->isNotEmpty())
            <div class="rounded-2xl border border-border bg-card p-6 shadow-sm">
                <h2 class="text-lg font-semibold mb-4">Pricing</h2>
                <ul class="divide-y divide-border">
                    @foreach($pricing as $price)
                    <li class="flex items-center justify-between py-3 text-sm">
                        <span class="text-muted-foreground">{{ $price->label }}</span>
                        <span class="font-semibold">
                            ${{ number_format($price->price) }}
                            @if($price->duration_minutes)
                            <span class="text-xs font-normal text-muted-foreground">/ {{ $price->duration_minutes }} min</span>
                            @endif
                        </span>
                    </li>
                    @endforeach
                </ul>
            </div>
            @endif

            {{-- CTA --}}
            @if($activity->booking_type === 'redirect' && $activity->external_booking_url)
            <a href="{{ $activity->external_booking_url }}" target="_blank" rel="noopener"
               class="block w-full rounded-full bg-primary py-4 text-center text-sm font-semibold text-primary-foreground transition hover:-translate-y-0.5">
                Book externally
            </a>
            @elseif($activity->booking_type !== 'open_access')
            <a href="{{ route('booking.create', $activity->slug) }}"
               class="block w-full rounded-full bg-primary py-4 text-center text-sm font-semibold text-primary-foreground transition hover:-translate-y-0.5">
                Book now
            </a>
            @endif

            {{-- Quick info chips --}}
            <div class="flex flex-wrap gap-2">
                @if($activity->season && $activity->season !== 'all')
                <span class="rounded-full bg-muted px-3 py-1 text-xs font-medium capitalize">{{ $activity->season }}</span>
                @endif
                @if($activity->min_participants)
                <span class="rounded-full bg-muted px-3 py-1 text-xs font-medium">Min {{ $activity->min_participants }} guests</span>
                @endif
                @if($activity->min_duration_minutes)
                <span class="rounded-full bg-muted px-3 py-1 text-xs font-medium">From {{ $activity->min_duration_minutes }} min</span>
                @endif
            </div>
        </div>
    </div>
</section>

@endsection