@extends('layouts.app', ['title' => __('Contact').' | Nivex'])

@section('content')
    <section class="shell py-20">
        <div class="grid gap-8 lg:grid-cols-[0.9fr_1.1fr]">
            <div>
                <p class="section-kicker">{{ __('Contact') }}</p>
                <h1 class="section-title">{{ $page->localized('hero.title') }}</h1>
                <p class="mt-6 section-copy">{{ $page->localized('hero.description') }}</p>

                <div class="mt-10 space-y-4 text-base text-slate-600 dark:text-slate-300">
                    <a href="https://wa.me/201280600515" class="flex items-center gap-3 hover:text-brand-600 dark:hover:text-brand-300"><i data-lucide="phone" class="h-5 w-5"></i><span>{{ $page->localized('phone') }}</span></a>
                    <a href="mailto:{{ $page->localized('email') }}" class="flex items-center gap-3 hover:text-brand-600 dark:hover:text-brand-300"><i data-lucide="mail" class="h-5 w-5"></i><span>{{ $page->localized('email') }}</span></a>
                </div>
            </div>

            <div class="surface-panel p-6 sm:p-8">
                @if (session('status'))
                    <div class="mb-5 rounded-2xl border border-emerald-200 bg-emerald-50 px-4 py-3 text-sm font-medium text-emerald-700 dark:border-emerald-500/30 dark:bg-emerald-500/10 dark:text-emerald-200">{{ session('status') }}</div>
                @endif
                <form method="POST" action="{{ route('contact.submit') }}" x-data="contactForm" @submit.prevent="submit" class="grid gap-5 sm:grid-cols-2">
                    @csrf
                    <div>
                        <label class="label">{{ __('Name') }}</label>
                        <input type="text" name="name" value="{{ old('name') }}" class="field">
                    </div>
                    <div x-data="{ phoneValue: @js(old('phone', '')), phoneTouched: false, phoneValid: true, validate() { this.phoneTouched = true; this.phoneValid = /^\+?[0-9]{8,15}$/.test(this.phoneValue); } }">
                        <label class="label">{{ __('Phone') }}</label>
                        <input type="tel" name="phone" x-model="phoneValue" @input="validate" @blur="validate" value="{{ old('phone') }}" class="field" inputmode="tel" pattern="^\+?[0-9]{8,15}$" placeholder="+201234567890">
                        <p x-show="phoneTouched && !phoneValid" class="mt-2 text-sm text-rose-500">Please enter a valid phone number.</p>
                        @error('phone')<p class="mt-2 text-sm text-rose-500">{{ $message }}</p>@enderror
                    </div>
                    <div>
                        <label class="label">{{ __('Email') }}</label>
                        <input type="email" name="email" value="{{ old('email') }}" class="field">
                    </div>
                    <div>
                        <label class="label">{{ __('Service') }}</label>
                        <select name="service" class="field">
                            <option>Web Development</option>
                            <option>Mobile App</option>
                            <option>System</option>
                            <option>UI/UX</option>
                            <option>Marketing</option>
                        </select>
                    </div>
                    <div class="sm:col-span-2">
                        <label class="label">{{ __('Project Details') }}</label>
                        <textarea name="details" rows="6" class="field">{{ old('details') }}</textarea>
                    </div>
                    <div class="sm:col-span-2">
                        <button type="submit" class="btn-primary w-full">
                            <span x-show="!loading">{{ __('Send') }}</span>
                            <span x-show="loading">{{ __('Loading...') }}</span>
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </section>
@endsection