@extends('layouts.app')

@section('title', 'Winter — Mzaar Ski Resort Lebanon')
@section('description', "Lebanon's largest ski resort. 80+ km of slopes, 42 lifts, snow conditions and lift passes at Mzaar Kfardebian.")
@section('og_image', asset('images/hero-winter-BTchV3EB.jpg'))

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

@section('content')

{{-- Hero --}}
<section class="relative h-[75vh] min-h-[520px] w-full overflow-hidden">
    <img src="{{ asset('images/hero-winter-BTchV3EB.jpg') }}" alt="Winter 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">Winter season</span>
        <h1 class="mt-4 max-w-3xl text-5xl leading-[1.05] md:text-7xl">Lebanon's mountain, in full snow.</h1>
        <p class="mt-6 max-w-xl text-lg text-primary-foreground/85">80+ km of groomed pistes, 42 lifts, and a summit at 2,465 m — the largest ski area in the Middle East.</p>
        <div class="mt-8 flex flex-wrap gap-4">
            <a href="#slopes" class="inline-flex items-center gap-2 rounded-full bg-secondary px-6 py-3 text-sm font-semibold text-primary transition hover:-translate-y-0.5">
                Slopes status
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg>
            </a>
        </div>
    </div>
</section>

{{-- Ski experiences --}}
<section id="slopes" class="container-x py-24 md:py-32">
    <span class="text-xs font-semibold uppercase tracking-[0.25em] text-muted-foreground">On the mountain</span>
    <h2 class="mt-3 text-4xl md:text-5xl">Carve, gather, sleep slope-side.</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-snowboard-BerGN6vg.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-snowboard-BerGN6vg.jpg" image-alt="Skiing & snowboarding" category="On the snow" title="Skiing & snowboarding" description="42 lifts and 100km+ of pistes from Wardeh's wide groomers to the steeps under the Mzaar summit at 2,465 m." :href="null"/>
        <x-activity-card image="apres-ski-Cqt6AUAm.jpg" image-alt="Sun-soaked terraces" category="Après-ski" title="Sun-soaked terraces" description="Mulled wine, Lebanese mezze and live music on slope-side terraces — the day rarely ends at 4 PM." :href="null"/>
        <x-activity-card image="hotel-intercontinental-B9-6SYKD.jpg" image-alt="InterContinental Mzaar" category="Stay" title="InterContinental Mzaar" description="The only ski-in / ski-out resort in Lebanon — five-star comfort steps from the Refuge lift." :href="null"/>
        @endforelse
    </div>
</section>

{{-- Summit --}}
<section class="container-x border-t border-border py-24 md:py-32">
    <span class="text-xs font-semibold uppercase tracking-[0.25em] text-muted-foreground">2,465 m</span>
    <h2 class="mt-3 max-w-3xl text-4xl md:text-5xl">Activities from the top.</h2>
    <p class="mt-4 max-w-2xl text-lg text-muted-foreground">Where the lifts end, a different mountain begins — quieter, wider, and yours alone.</p>
    <div class="mt-12 grid gap-6 md:grid-cols-2 lg:grid-cols-4">
        <x-activity-card image="activity-snowboard-BerGN6vg.jpg" image-alt="Ski from 2,465 m" category="Summit" title="Ski from 2,465 m" description="Drop in from the Mzaar summit lift onto the longest descents of the resort."/>
        <x-activity-card image="top-restaurant-G-kzMTZu.jpg" image-alt="Top-mountain restaurant" category="Altitude dining" title="Top-mountain restaurant" description="Lebanese mezze and Bekaa wines served with a 360° view over Mount Sannine."/>
        <x-activity-card image="hotel-intercontinental-B9-6SYKD.jpg" image-alt="InterContinental retreat" category="Escape" title="InterContinental retreat" description="Heated indoor pool, hammam and fireside lounges — a five-star refuge after the last run."/>
        <x-activity-card image="snowgroomer-sunset-Bdbyp9wE.jpg" image-alt="Snowgroomer to the summit" category="Sunset" title="Snowgroomer to the summit" description="Private ride up the freshly closed slopes at golden hour, sparkling wine waiting at the top."/>
    </div>
</section>

@endsection