@extends('layouts.app')

@section('title', 'Sports & Wellness Hub — Mzaar Mountain Resort')
@section('description', 'Mini football, basketball, padel, cold plunge, gym, spa and more at Mzaar\'s Sports & Wellness Hub.')

@section('content')

<section class="container-x pt-24 pb-12 md:pt-32">
    <span class="text-xs font-semibold uppercase tracking-[0.25em] text-muted-foreground">On the mountain</span>
    <h1 class="mt-3 max-w-3xl text-4xl md:text-6xl">Sports &amp; Wellness Hub.</h1>
    <p class="mt-4 max-w-2xl text-lg text-muted-foreground">Courts, pools, cold plunges, and a gym at altitude — all year round.</p>
</section>

{{-- Sports Hub --}}
<section class="bg-muted/40 py-20 md:py-24">
    <div class="container-x">
        <h2 class="text-3xl md:text-4xl mb-4">Sports Hub</h2>
        @if($sportsHub->isEmpty())
        <p class="text-muted-foreground">No activities listed yet.</p>
        @else
        <div class="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
            @foreach($sportsHub as $activity)
            <x-activity-card
                :image="$activity->cover_image ?? 'activity-snowboard-BerGN6vg.jpg'"
                :image-alt="$activity->name"
                :category="$activity->category->name ?? 'Sport'"
                :title="$activity->name"
                :description="$activity->short_description ?? $activity->description"
                :href="route('activity.show', $activity->slug)"
            />
            @endforeach
        </div>
        @endif
    </div>
</section>

{{-- Wellness Hub --}}
<section class="container-x py-20 md:py-24">
    <h2 class="text-3xl md:text-4xl mb-4">Wellness Hub</h2>
    @if($wellnessHub->isEmpty())
    <p class="text-muted-foreground">No activities listed yet.</p>
    @else
    <div class="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
        @foreach($wellnessHub as $activity)
        <x-activity-card
            :image="$activity->cover_image ?? 'activity-spa-DWuohTrd.jpg'"
            :image-alt="$activity->name"
            :category="$activity->category->name ?? 'Wellness'"
            :title="$activity->name"
            :description="$activity->short_description ?? $activity->description"
            :href="route('activity.show', $activity->slug)"
        />
        @endforeach
    </div>
    @endif
</section>

@endsection