@extends('layouts.app')

@section('title', "Mzaar Ski Resort — Lebanon's Mountain Playground, All Year")
@section('description', "Skiing, hiking, mountain biking, spa & gastronomy at Lebanon's largest mountain resort. 80 km of slopes in winter, endless trails in summer.")
@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-[92vh] min-h-[640px] w-full overflow-hidden">
    <img src="{{ asset('images/cover.jpg') }}" alt="Mzaar mountains in summer" width="1920" height="1080" class="absolute inset-0 h-full w-full object-cover"/>
    <div class="absolute inset-0 hero-overlay"></div>
    <div style="padding-bottom:calc(var(--spacing) * 30)" class="container-x relative z-10 flex h-full flex-col justify-end pb-20 text-primary-foreground">
        <span class="animate-fade-up text-sm font-semibold uppercase tracking-[0.3em] text-secondary">Mzaar · Lebanon</span>
        <h1 class="animate-fade-up mt-4 max-w-4xl text-5xl leading-[1.05] md:text-7xl lg:text-[5.5rem]">The mountain that<br/>never sleeps.</h1>
        <p class="animate-fade-up mt-6 max-w-xl text-lg text-primary-foreground/85">From first powder turns to summer ridge hikes, Mzaar is Lebanon's year-round mountain playground.</p>
        @php $isWinter = in_array((int)date('n'), [10, 11, 12, 1, 2, 3]); @endphp
        <div class="animate-fade-up mt-10 flex flex-wrap gap-4">
            @if($isWinter)
            <a href="{{ route('winter') }}" class="inline-flex items-center gap-2 rounded-full bg-secondary px-7 py-3.5 text-sm font-semibold text-primary transition hover:-translate-y-0.5">
                Discover winter
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-right h-4 w-4" aria-hidden="true"><path d="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg>
            </a>
            <a href="{{ route('summer') }}" class="inline-flex items-center gap-2 rounded-full border border-primary-foreground/40 bg-primary-foreground/10 px-7 py-3.5 text-sm font-semibold text-primary-foreground backdrop-blur transition hover:bg-primary-foreground/20">
                Summer season
            </a>
            @else
            <a href="{{ route('summer') }}" class="inline-flex items-center gap-2 rounded-full bg-secondary px-7 py-3.5 text-sm font-semibold text-primary transition hover:-translate-y-0.5">
                Discover summer
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-right h-4 w-4" aria-hidden="true"><path d="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg>
            </a>
            <a href="{{ route('winter') }}" class="inline-flex items-center gap-2 rounded-full border border-primary-foreground/40 bg-primary-foreground/10 px-7 py-3.5 text-sm font-semibold text-primary-foreground backdrop-blur transition hover:bg-primary-foreground/20">
                Winter season
            </a>
            @endif
        </div>
    </div>
    <div class="absolute inset-x-0 bottom-0 z-10 hidden border-t border-primary-foreground/15 bg-primary/30 backdrop-blur md:block">
        <div class="container-x grid grid-cols-4 divide-x divide-primary-foreground/15 text-primary-foreground">
            <div class="px-6 py-5"><div class="text-2xl font-display">80 km</div><div class="text-xs uppercase tracking-widest text-primary-foreground/70">of slopes</div></div>
            <div class="px-6 py-5"><div class="text-2xl font-display">2,465 m</div><div class="text-xs uppercase tracking-widest text-primary-foreground/70">summit</div></div>
            <div class="px-6 py-5"><div class="text-2xl font-display">42</div><div class="text-xs uppercase tracking-widest text-primary-foreground/70">lifts &amp; runs</div></div>
            <div class="px-6 py-5"><div class="text-2xl font-display">365</div><div class="text-xs uppercase tracking-widest text-primary-foreground/70">days a year</div></div>
        </div>
    </div>
</section>

{{-- About --}}
<section class="container-x py-24 md:py-32">
    <div class="grid gap-12 md:grid-cols-12">
        <div class="md:col-span-5">
            <span class="text-xs font-semibold uppercase tracking-[0.25em] text-muted-foreground">A resort beyond the snow</span>
            <h2 class="mt-3 text-4xl md:text-5xl">More than a ski station — <em class="text-primary not-italic">a way of life</em>.</h2>
        </div>
        <div class="md:col-span-7 md:pt-12">
            <p class="text-lg leading-relaxed text-muted-foreground">Perched above Kfardebian overlooking the slopes of Mount Sannine, Mzaar reinvents itself with every season. In winter, the largest skiable area of the Middle East. In summer, a high-altitude playground of rocky ridges and limestone mountains for hikers, riders, foodies and families looking to breathe again.</p>
            <div class="mt-8 grid grid-cols-2 gap-6 sm:grid-cols-4">
                <div class="flex flex-col items-start gap-2">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-mountain h-6 w-6 text-secondary-foreground" aria-hidden="true"><path d="m8 3 4 8 5-5 5 15H2L8 3z"/></svg>
                    <span class="text-sm font-medium">All-season trails</span>
                </div>
                <div class="flex flex-col items-start gap-2">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-sparkles h-6 w-6 text-secondary-foreground" aria-hidden="true"><path d="M11.017 2.814a1 1 0 0 1 1.966 0l1.051 5.558a2 2 0 0 0 1.594 1.594l5.558 1.051a1 1 0 0 1 0 1.966l-5.558 1.051a2 2 0 0 0-1.594 1.594l-1.051 5.558a1 1 0 0 1-1.966 0l-1.051-5.558a2 2 0 0 0-1.594-1.594l-5.558-1.051a1 1 0 0 1 0-1.966l5.558-1.051a2 2 0 0 0 1.594-1.594z"/><path d="M20 2v4"/><path d="M22 4h-4"/><circle cx="4" cy="20" r="2"/></svg>
                    <span class="text-sm font-medium">Spa &amp; wellness</span>
                </div>
                <div class="flex flex-col items-start gap-2">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-users h-6 w-6 text-secondary-foreground" aria-hidden="true"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><path d="M16 3.128a4 4 0 0 1 0 7.744"/><path d="M22 21v-2a4 4 0 0 0-3-3.87"/><circle cx="9" cy="7" r="4"/></svg>
                    <span class="text-sm font-medium">Family friendly</span>
                </div>
                <div class="flex flex-col items-start gap-2">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-calendar h-6 w-6 text-secondary-foreground" aria-hidden="true"><path d="M8 2v4"/><path d="M16 2v4"/><rect width="18" height="18" x="3" y="4" rx="2"/><path d="M3 10h18"/></svg>
                    <span class="text-sm font-medium">Live events</span>
                </div>
            </div>
        </div>
    </div>
</section>

{{-- Summer activities (from DB) --}}
<section class="bg-muted/40 py-24 md:py-32">
    <div class="container-x">
        <div class="flex flex-col items-end justify-between gap-6 md:flex-row">
            <div class="max-w-2xl">
                <span class="text-xs font-semibold uppercase tracking-[0.25em] text-secondary-foreground/70">Summer at altitude</span>
                <h2 class="mt-3 text-4xl md:text-5xl">When the snow melts, the mountain awakens.</h2>
            </div>
            <a href="{{ route('activities') }}" class="inline-flex items-center gap-2 text-sm font-semibold text-primary">All summer activities
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-right h-4 w-4" aria-hidden="true"><path d="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg>
            </a>
        </div>
        <div class="mt-12 grid gap-6 md:grid-cols-2 lg:grid-cols-3">
            @forelse($summerActivities as $activity)
                <x-activity-card
                    :image="$activity->cover_image ?? 'activity-hike-BfTbwPp_.jpg'"
                    :image-alt="$activity->name"
                    :category="$activity->category->name ?? ''"
                    :title="$activity->name"
                    :description="$activity->short_description ?? $activity->description"
                    :href="route('activity.show', $activity->slug)"
                />
            @empty
                <p class="text-muted-foreground col-span-3">Activities coming soon.</p>
            @endforelse
        </div>
    </div>
</section>

{{-- Ski banner --}}
<section class="relative overflow-hidden">
    <img src="{{ asset('images/slopes.jpg') }}" alt="Skiing at Mzaar" loading="lazy" class="h-[70vh] min-h-[520px] w-full object-cover"/>
    <div class="absolute inset-0 bg-gradient-to-r from-primary/85 via-primary/50 to-transparent"></div>
    <div class="container-x absolute inset-0 z-10 flex flex-col justify-center text-primary-foreground">
        <span class="text-xs font-semibold uppercase tracking-[0.3em] text-secondary">Ski starts here</span>
        <h2 class="mt-4 max-w-2xl text-4xl md:text-6xl">100+ km of slopes,<br/>one unforgettable horizon.</h2>
        <p class="mt-5 max-w-lg text-primary-foreground/85">From beginners' carpets to high mountain lines overlooking Lebanon. Snow report, lifts and live conditions, every morning.</p>
        <div class="mt-8 flex flex-wrap gap-4">
            <a href="{{ route('winter') }}" class="rounded-full bg-secondary px-7 py-3.5 text-sm font-semibold text-primary">Plan your ski day</a>
            <a href="#slopes" class="rounded-full border border-primary-foreground/40 px-7 py-3.5 text-sm font-semibold">Slopes status</a>
        </div>
    </div>
</section>

{{-- Winter highlights (from DB) --}}
<section class="container-x py-24 md:py-32">
    <div class="flex flex-col items-end justify-between gap-6 md:flex-row">
        <div class="max-w-2xl">
            <span class="text-xs font-semibold uppercase tracking-[0.25em] text-muted-foreground">Winter at Mzaar</span>
            <h2 class="mt-3 text-4xl md:text-5xl">Carve, gather, sleep slope-side.</h2>
        </div>
        <a href="{{ route('winter') }}" class="inline-flex items-center gap-2 text-sm font-semibold text-primary">All winter experiences
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-right h-4 w-4" aria-hidden="true"><path d="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg>
        </a>
    </div>
    <div class="mt-12 grid gap-6 md:grid-cols-3">
        @forelse($winterActivities as $activity)
            <x-activity-card
                :image="$activity->cover_image ?? 'activity-snowboard-BerGN6vg.jpg'"
                :image-alt="$activity->name"
                :category="$activity->category->name ?? ''"
                :title="$activity->name"
                :description="$activity->short_description ?? $activity->description"
                :href="route('activity.show', $activity->slug)"
            />
        @empty
            <p class="text-muted-foreground col-span-3">Activities coming soon.</p>
        @endforelse
    </div>
</section>

{{-- Weather forecast (from DB) --}}
<div class="bg-muted/40">
    <section class="container-x py-20 md:py-24">
        <div class="flex flex-col items-end justify-between gap-4 md:flex-row">
            <div>
                <span class="text-xs font-semibold uppercase tracking-[0.25em] text-muted-foreground">Mountain weather</span>
                <h2 class="mt-3 text-4xl md:text-5xl">5-day forecast at 2,200 m.</h2>
            </div>
            <p class="text-sm text-muted-foreground">Updated daily · Mzaar summit station</p>
        </div>
        <div class="mt-10 grid grid-cols-2 gap-4 md:grid-cols-5">
            @forelse($weather as $day)
            <div class="rounded-2xl border border-border bg-card p-6 text-center shadow-sm transition hover:shadow-lg">
                <div class="text-sm font-semibold uppercase tracking-widest text-primary">{{ $day->day_label }}</div>
                @include('partials.weather-icon', ['icon' => $day->icon])
                <div class="text-xs text-muted-foreground">{{ $day->condition }}</div>
                <div class="mt-3 flex items-baseline justify-center gap-2">
                    <span class="text-3xl font-display">{{ $day->temperature_max }}°</span>
                    <span class="text-sm text-muted-foreground">{{ $day->temperature_min }}°</span>
                </div>
            </div>
            @empty
            <div class="col-span-5 text-center text-muted-foreground py-8">Weather data unavailable.</div>
            @endforelse
        </div>
    </section>
</div>

{{-- Snow conditions banner --}}
@if($snowCondition)
<div class="bg-primary/5 border-y border-border">
    <div class="container-x py-6 flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
        <div class="flex items-center gap-4">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-snowflake h-8 w-8 text-primary shrink-0" aria-hidden="true"><path d="m10 20-1.25-2.5L6 18"/><path d="M10 4 8.75 6.5 6 6"/><path d="m14 20 1.25-2.5L18 18"/><path d="m14 4 1.25 2.5L18 6"/><path d="m17 21-3-6h-4"/><path d="m17 3-3 6 1.5 3"/><path d="M2 12h6.5L10 9"/><path d="m20 10-1.5 2 1.5 2"/><path d="M22 12h-6.5L14 15"/><path d="m4 10 1.5 2L4 14"/><path d="m7 21 3-6-1.5-3"/><path d="m7 3 3 6h4"/></svg>
            <div>
                <p class="text-xs font-semibold uppercase tracking-widest text-muted-foreground">Snow conditions</p>
                <p class="text-lg font-display text-foreground capitalize">{{ str_replace('_', ' ', $snowCondition->snow_type ?? '') }} · {{ $snowCondition->overall_conditions ?? '' }}</p>
            </div>
        </div>
        <div class="flex gap-6 text-sm">
            @if($snowCondition->snow_depth_base_cm)
            <div class="text-center"><div class="text-2xl font-display">{{ $snowCondition->snow_depth_base_cm }} cm</div><div class="text-xs text-muted-foreground uppercase tracking-wider">Base</div></div>
            @endif
            @if($snowCondition->snow_depth_summit_cm)
            <div class="text-center"><div class="text-2xl font-display">{{ $snowCondition->snow_depth_summit_cm }} cm</div><div class="text-xs text-muted-foreground uppercase tracking-wider">Summit</div></div>
            @endif
            @if($snowCondition->last_snowfall_date)
            <div class="text-center"><div class="text-2xl font-display">{{ $snowCondition->last_snowfall_cm ?? '?' }} cm</div><div class="text-xs text-muted-foreground uppercase tracking-wider">Last snowfall</div></div>
            @endif
        </div>
        @if($snowCondition->piste_conditions)
        <p class="text-sm text-muted-foreground max-w-sm">{{ $snowCondition->piste_conditions }}</p>
        @endif
    </div>
</div>
@endif

{{-- Slopes status (from DB) --}}
<div id="slopes">
    <section class="bg-primary py-20 text-primary-foreground md:py-24">
        <div class="container-x">
            <div class="flex flex-col items-end justify-between gap-4 md:flex-row">
                <div>
                    <span class="text-xs font-semibold uppercase tracking-[0.25em] text-secondary">Live conditions</span>
                    <h2 class="mt-3 text-4xl md:text-5xl">Slopes status — today.</h2>
                </div>
                @php
                    $totalSlopes = $slopeDomains->sum(fn($d) => $d->slopes->count());
                    $openSlopes  = $slopeDomains->sum(fn($d) => $d->slopes->filter(fn($s) => $s->isOpen())->count());
                @endphp
                <div class="flex items-center gap-3 rounded-full bg-primary-foreground/10 px-5 py-2.5 text-sm">
                    <span class="inline-block h-2.5 w-2.5 rounded-full bg-emerald-400"></span>
                    {{ $openSlopes }} of {{ $totalSlopes }} lifts open
                </div>
            </div>

            <div class="mt-10 grid gap-6 lg:grid-cols-3">
                @foreach($slopeDomains as $domain)
                <div class="rounded-2xl bg-primary-foreground/5 p-6 ring-1 ring-primary-foreground/10">
                    <h3 class="text-2xl">{{ $domain->name }}</h3>
                    <ul class="mt-4 divide-y divide-primary-foreground/10">
                        @foreach($domain->slopes as $slope)
                        @php $status = $slope->latestStatus(); $isOpen = $slope->isOpen(); @endphp
                        <li class="flex items-center justify-between gap-3 py-3">
                            <div class="flex items-center gap-3">
                                @if($isOpen)
                                    <span class="inline-block h-3 w-3 rounded-full bg-emerald-400 shadow-[0_0_8px_rgb(52,211,153)]" aria-label="open"></span>
                                @else
                                    <span class="inline-block h-3 w-3 rounded-full bg-rose-500" aria-label="closed"></span>
                                @endif
                                <span class="text-sm font-medium">{{ $slope->name }}</span>
                                @if($status && $status->crowd_level)
                                <span class="text-xs text-primary-foreground/50 capitalize">· {{ $status->crowd_level }}</span>
                                @endif
                            </div>
                            <div class="flex items-center gap-2">
                                <span class="rounded-full px-2 py-0.5 text-[10px] font-semibold bg-{{ $slope->levelColor() }}-100 text-{{ $slope->levelColor() }}-700">{{ $slope->levelLabel() }}</span>
                                @if($slope->altitude_m)
                                <span class="w-16 text-right text-xs text-primary-foreground/60">{{ number_format($slope->altitude_m) }} m</span>
                                @else
                                <span class="w-16 text-right text-xs text-primary-foreground/60">—</span>
                                @endif
                            </div>
                        </li>
                        @endforeach
                    </ul>
                </div>
                @endforeach
            </div>

            <div class="mt-6 flex items-center justify-between">
                <p class="text-xs text-primary-foreground/60">Lift status is updated by resort staff and on-slope reporters. Conditions may change throughout the day.</p>
                <a href="{{ route('slopes.index') }}" class="text-xs text-secondary hover:underline">Full slopes board →</a>
            </div>
        </div>
    </section>
</div>

{{-- Emergency banner --}}
<section class="bg-secondary text-primary">
    <div class="container-x flex flex-col items-center justify-between gap-4 py-6 text-center md:flex-row md:text-left">
        <div class="flex items-center gap-3">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-phone-call h-5 w-5" aria-hidden="true"><path d="M13 2a9 9 0 0 1 9 9"/><path d="M13 6a5 5 0 0 1 5 5"/><path d="M13.832 16.568a1 1 0 0 0 1.213-.303l.355-.465A2 2 0 0 1 17 15h3a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2A18 18 0 0 1 2 4a2 2 0 0 1 2-2h3a2 2 0 0 1 2 2v3a2 2 0 0 1-.8 1.6l-.468.351a1 1 0 0 0-.292 1.233 14 14 0 0 0 6.392 6.384"/></svg>
            <p class="text-sm font-semibold">Mountain emergency · on-piste rescue &amp; medical</p>
        </div>
        <a href="tel:+9613771211" class="text-2xl font-display tracking-wide hover:underline">+961 3 771 211</a>
    </div>
</section>

{{-- Book --}}
<section id="book" class="bg-primary py-24 text-primary-foreground">
    <div class="container-x grid items-center gap-10 md:grid-cols-2">
        <div>
            <h2 class="text-4xl md:text-5xl">Plan your escape to Mzaar.</h2>
            <p class="mt-4 max-w-md text-primary-foreground/75">Lift passes, hotel stays, summer experiences and group bookings — all in one place.</p>
        </div>
        <div class="rounded-2xl bg-primary-foreground/5 p-6 ring-1 ring-primary-foreground/15 backdrop-blur">
            <div class="grid gap-4 sm:grid-cols-2">
                <label class="flex flex-col gap-1.5 text-sm">
                    <span class="text-primary-foreground/70">Arrival</span>
                    <input type="date" class="rounded-md bg-primary-foreground/10 px-3 py-2.5 text-primary-foreground outline-none ring-1 ring-primary-foreground/15 focus:ring-secondary"/>
                </label>
                <label class="flex flex-col gap-1.5 text-sm">
                    <span class="text-primary-foreground/70">Departure</span>
                    <input type="date" class="rounded-md bg-primary-foreground/10 px-3 py-2.5 text-primary-foreground outline-none ring-1 ring-primary-foreground/15 focus:ring-secondary"/>
                </label>
                <label class="flex flex-col gap-1.5 text-sm sm:col-span-2">
                    <span class="text-primary-foreground/70">Guests</span>
                    <select class="rounded-md bg-primary-foreground/10 px-3 py-2.5 text-primary-foreground outline-none ring-1 ring-primary-foreground/15 focus:ring-secondary">
                        <option class="text-foreground">2 adults</option>
                        <option class="text-foreground">2 adults · 1 child</option>
                        <option class="text-foreground">2 adults · 2 children</option>
                        <option class="text-foreground">Group / event</option>
                    </select>
                </label>
            </div>
            <button class="mt-5 w-full rounded-full bg-secondary py-3.5 text-sm font-semibold text-primary transition hover:-translate-y-0.5">
                Check availability
            </button>
        </div>
    </div>
</section>

@endsection