@extends('layouts.app')

@section('title', 'Contact — Mzaar Ski Resort Lebanon')
@section('description', 'Contact Mzaar Ski Resort Lebanon. Phone, email and directions to Kfardebian, Mount Lebanon.')

@section('content')

{{-- Header --}}
<section class="container-x pt-24 pb-16 md:pt-32">
    <span class="text-xs font-semibold uppercase tracking-[0.25em] text-muted-foreground">Get in touch</span>
    <h1 class="mt-3 max-w-3xl text-4xl md:text-6xl">Contact us.</h1>
    <p class="mt-4 max-w-xl text-lg text-muted-foreground">We're here to help with reservations, group bookings, press enquiries and everything in between.</p>
</section>

{{-- Contact grid --}}
<section class="bg-muted/40 py-20 md:py-24">
    <div class="container-x grid gap-10 md:grid-cols-2">

        {{-- Contact details --}}
        <div class="space-y-8">
            <div>
                <h2 class="text-2xl font-display">General information</h2>
                <ul class="mt-6 space-y-4 text-sm text-muted-foreground">
                    <li class="flex items-start 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-map-pin h-5 w-5 mt-0.5 shrink-0 text-primary" aria-hidden="true"><path d="M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0"/><circle cx="12" cy="10" r="3"/></svg>
                        <span>Kfardebian, Kesrouan District, Mount Lebanon</span>
                    </li>
                    <li class="flex items-start 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 h-5 w-5 mt-0.5 shrink-0 text-primary" aria-hidden="true"><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>
                        <a href="tel:+96193401000" class="hover:text-primary">+961 9 340 100</a>
                    </li>
                    <li class="flex items-start 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-mail h-5 w-5 mt-0.5 shrink-0 text-primary" aria-hidden="true"><path d="m22 7-8.991 5.727a2 2 0 0 1-2.009 0L2 7"/><rect x="2" y="4" width="20" height="16" rx="2"/></svg>
                        <a href="mailto:info@mzaarskiresort.com" class="hover:text-primary">info@mzaarskiresort.com</a>
                    </li>
                </ul>
            </div>

            <div class="rounded-2xl bg-rose-50 border border-rose-200 p-6">
                <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 text-rose-600" 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>
                    <span class="text-sm font-semibold text-rose-700">Mountain emergency — on-piste rescue &amp; medical</span>
                </div>
                <a href="tel:+9613771211" class="mt-3 block text-2xl font-display tracking-wide text-rose-700 hover:underline">+961 3 771 211</a>
            </div>
        </div>

        {{-- Contact form --}}
        <div class="rounded-2xl border border-border bg-card p-8 shadow-sm">
            <h2 class="text-2xl font-display">Send a message</h2>
            <form class="mt-6 space-y-4" method="POST" action="#">
                @csrf
                <label class="flex flex-col gap-1.5 text-sm">
                    <span class="font-medium">Full name</span>
                    <input type="text" name="name" placeholder="Your name" class="rounded-md border border-border bg-background px-3 py-2.5 outline-none focus:ring-2 focus:ring-primary/20"/>
                </label>
                <label class="flex flex-col gap-1.5 text-sm">
                    <span class="font-medium">Email</span>
                    <input type="email" name="email" placeholder="you@example.com" class="rounded-md border border-border bg-background px-3 py-2.5 outline-none focus:ring-2 focus:ring-primary/20"/>
                </label>
                <label class="flex flex-col gap-1.5 text-sm">
                    <span class="font-medium">Subject</span>
                    <select name="subject" class="rounded-md border border-border bg-background px-3 py-2.5 outline-none focus:ring-2 focus:ring-primary/20">
                        <option value="">Select a topic</option>
                        <option>Lift passes &amp; booking</option>
                        <option>Group &amp; event enquiry</option>
                        <option>Press &amp; media</option>
                        <option>General question</option>
                    </select>
                </label>
                <label class="flex flex-col gap-1.5 text-sm">
                    <span class="font-medium">Message</span>
                    <textarea name="message" rows="5" placeholder="How can we help?" class="rounded-md border border-border bg-background px-3 py-2.5 outline-none focus:ring-2 focus:ring-primary/20 resize-none"></textarea>
                </label>
                <button type="submit" class="w-full rounded-full bg-primary py-3.5 text-sm font-semibold text-primary-foreground transition hover:-translate-y-0.5">
                    Send message
                </button>
            </form>
        </div>
    </div>
</section>

@endsection