@extends('layouts.app')

@section('title', 'Summer — Mzaar Mountain Resort Lebanon')
@section('description', 'Hiking, mountain biking, ziplines, spa and gastronomy at Mzaar in summer. Lebanon\'s high-altitude playground above Kfardebian.')
@section('og_image', asset('images/hero-summer-DHJ752Q0.jpg'))

@push('head')
    <link rel="preload" as="image" href="{{ asset('images/hero-summer-DHJ752Q0.jpg') }}"/>
@endpush

@section('content')

{{-- Hero --}}
<section class="relative h-[75vh] min-h-[520px] w-full overflow-hidden">
    <img src="{{ asset('images/hero-summer-DHJ752Q0.jpg') }}" alt="Summer at Mzaar" width="1920" height="1080" 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-20 text-primary-foreground">
        <span class="text-sm font-semibold uppercase tracking-[0.3em] text-secondary">Summer season</span>
        <h1 class="mt-4 max-w-3xl text-5xl leading-[1.05] md:text-7xl">When the snow melts, the mountain awakens.</h1>
        <p class="mt-6 max-w-xl text-lg text-primary-foreground/85">Hiking, biking, ziplines, wellness and gastronomy — all above 1,850 m.</p>
    </div>
</section>

{{-- Summer activities --}}
<section class="container-x py-24 md:py-32">
    <span class="text-xs font-semibold uppercase tracking-[0.25em] text-muted-foreground">Summer at altitude</span>
    <h2 class="mt-3 text-4xl md:text-5xl">Something for everyone, at every altitude.</h2>
    <div class="mt-12 grid gap-6 md:grid-cols-2 lg:grid-cols-3">
        @forelse($activities as $activity)
        <x-activity-card
            :image="$activity->cover_image ?? 'activity-hike-BfTbwPp_.jpg'"
            :image-alt="$activity->name"
            :category="$activity->category->name ?? 'Activity'"
            :title="$activity->name"
            :description="$activity->short_description ?? $activity->description ?? ''"
            :href="route('activity.show', $activity->slug)"
        />
        @empty
        <x-activity-card image="activity-hike-BfTbwPp_.jpg" image-alt="Ridge & rock-arch trails" category="Hiking" title="Hike trails" description="From gentle family walks to ridge crossings with views over the sea." :href="null"/>
        @endforelse
    </div>
</section>

@endsection