@extends('layouts.site')

@section('title', ($page->title ?? 'Contact Us') . ' - Visit Sri Lanka 360')

@php
    $heroBg = !empty($page->hero_image)
        ? asset('storage/' . ltrim($page->hero_image, '/'))
        : asset('images/hero/tours-hero.jpg');
@endphp

@section('content')

    {{-- HERO --}}
    <section class="relative">
        <div class="h-[34vh] md:h-[38vh] relative overflow-hidden bg-slate-900 bg-cover bg-center"
            style="background-image: url('{{ $heroBg }}');">
            <div class="absolute inset-0 bg-black/55"></div>
            <div
                class="absolute inset-0 bg-[radial-gradient(900px_500px_at_20%_30%,rgba(215,166,43,.35),transparent_60%),radial-gradient(800px_500px_at_85%_40%,rgba(255,255,255,.10),transparent_55%)]">
            </div>

            <div class="relative container-site h-full flex items-center">
                <div class="max-w-3xl">
                    <div class="text-white/70 text-xs tracking-[.22em] uppercase">
                        Get in Touch
                    </div>
                    <h1 class="mt-3 text-white text-3xl md:text-5xl font-semibold"
                        style="font-family: var(--font-display);">
                        {{ $page->title ?? 'Contact Us' }}
                    </h1>
                    @if($page->subtitle)
                        <p class="mt-3 text-white/80 text-sm md:text-base">
                            {{ $page->subtitle }}
                        </p>
                    @endif
                </div>
            </div>
        </div>
    </section>

    {{-- CONTACT INFO + FORM --}}
    <section class="py-10 md:py-14">
        <div class="container-site">
            <div class="grid lg:grid-cols-12 gap-8 lg:gap-10">

                {{-- LEFT --}}
                <div class="lg:col-span-5 space-y-6">
                    <div class="card p-6">
                        <h2 class="text-2xl font-semibold" style="font-family: var(--font-display);">
                            Let’s Plan Your Journey
                        </h2>

                        @if($page->intro_text)
                            <p class="mt-4 text-slate-600 leading-relaxed">
                                {{ $page->intro_text }}
                            </p>
                        @endif
                    </div>

                    <div class="grid sm:grid-cols-2 lg:grid-cols-1 gap-4">

                        @if($siteSettings?->phone)
                            <div class="card p-5">
                                <div class="text-xs tracking-[.22em] uppercase text-gold-700 font-semibold">
                                    Phone
                                </div>
                                <div class="mt-2 text-slate-900 font-semibold">
                                    <a href="tel:{{ preg_replace('/\D/', '', $siteSettings->phone) }}"
                                        class="hover:text-gold-600">
                                        {{ $siteSettings->phone }}
                                    </a>
                                </div>
                            </div>
                        @endif


                        @if($siteSettings?->email)
                            <div class="card p-5">
                                <div class="text-xs tracking-[.22em] uppercase text-gold-700 font-semibold">
                                    Email
                                </div>
                                <div class="mt-2 text-slate-900 font-semibold">
                                    <a href="mailto:{{ $siteSettings->email }}" class="hover:text-gold-600">
                                        {{ $siteSettings->email }}
                                    </a>
                                </div>
                            </div>
                        @endif


                        @if($siteSettings?->whatsapp)
                            <div class="card p-5">
                                <div class="text-xs tracking-[.22em] uppercase text-gold-700 font-semibold">
                                    WhatsApp
                                </div>
                                <div class="mt-2 text-slate-900 font-semibold">
                                    <a href="https://wa.me/{{ preg_replace('/\D/', '', $siteSettings->whatsapp) }}"
                                        target="_blank" class="hover:text-gold-600">
                                        {{ $siteSettings->whatsapp }}
                                    </a>
                                </div>
                            </div>
                        @endif


                        @if($siteSettings?->address)
                            <div class="card p-5">
                                <div class="text-xs tracking-[.22em] uppercase text-gold-700 font-semibold">
                                    Address
                                </div>
                                <div class="mt-2 text-slate-700 whitespace-pre-line">
                                    {{ $siteSettings->address }}
                                </div>
                            </div>
                        @endif


                        @if($page->office_hours)
                            <div class="card p-5">
                                <div class="text-xs tracking-[.22em] uppercase text-gold-700 font-semibold">
                                    Office Hours
                                </div>
                                <div class="mt-2 text-slate-700 whitespace-pre-line">
                                    {{ $page->office_hours }}
                                </div>
                            </div>
                        @endif

                    </div>
                </div>

                {{-- RIGHT --}}
                <div class="lg:col-span-7">
                    <div class="card p-6 md:p-8">
                        <h3 class="text-2xl font-semibold" style="font-family: var(--font-display);">
                            Send Us a Message
                        </h3>

                        @if(session('success'))
                            <div class="mt-4 rounded-2xl border border-emerald-200 bg-emerald-50 p-4 text-emerald-800 text-sm">
                                {{ session('success') }}
                            </div>
                        @endif

                        <form method="POST" action="{{ route('contact.store') }}" class="mt-6 space-y-5">
                            @csrf

                            <div class="grid md:grid-cols-2 gap-4">
                                <div>
                                    <label class="text-xs font-medium text-slate-600">Full Name</label>
                                    <input type="text" name="name" value="{{ old('name') }}" class="mt-1 input-premium"
                                        required>
                                    @error('name')<div class="text-xs text-rose-600 mt-1">{{ $message }}</div>@enderror
                                </div>

                                <div>
                                    <label class="text-xs font-medium text-slate-600">Email</label>
                                    <input type="email" name="email" value="{{ old('email') }}" class="mt-1 input-premium"
                                        required>
                                    @error('email')<div class="text-xs text-rose-600 mt-1">{{ $message }}</div>@enderror
                                </div>
                            </div>

                            <div class="grid md:grid-cols-2 gap-4">
                                <div>
                                    <label class="text-xs font-medium text-slate-600">Phone</label>
                                    <input type="text" name="phone" value="{{ old('phone') }}" class="mt-1 input-premium">
                                    @error('phone')<div class="text-xs text-rose-600 mt-1">{{ $message }}</div>@enderror
                                </div>

                                <div>
                                    <label class="text-xs font-medium text-slate-600">Subject</label>
                                    <input type="text" name="subject" value="{{ old('subject') }}"
                                        class="mt-1 input-premium">
                                    @error('subject')<div class="text-xs text-rose-600 mt-1">{{ $message }}</div>@enderror
                                </div>
                            </div>

                            <div>
                                <label class="text-xs font-medium text-slate-600">Message</label>
                                <textarea name="message" rows="6" class="mt-1 input-premium"
                                    required>{{ old('message') }}</textarea>
                                @error('message')<div class="text-xs text-rose-600 mt-1">{{ $message }}</div>@enderror
                            </div>

                            <button type="submit" class="btn-gold">
                                Send Message
                            </button>
                        </form>
                    </div>
                </div>

            </div>

            {{-- MAP --}}
            @if($page->map_embed)
                <div class="mt-10 card p-4">
                    <div class="map-embed border border-slate-200 rounded-2xl overflow-hidden">
                        {!! $page->map_embed !!}
                    </div>
                </div>
            @endif
        </div>
    </section>
@endsection