@extends('layouts.base')
{{-- ? Contact page shares the same base layout to keep global navigation consistent --}}

@section('title', __('contact.title'))
{{-- ! Dynamic page title for SEO and localization --}}

@section('content')
    {{-- ! Wrapper with gradient background to echo the legal/terms visual identity --}}
    <div class="min-h-screen bg-gradient-to-br from-indigo-50 via-white to-blue-50">
        <div class="container mx-auto px-4 sm:px-6 py-12 lg:py-20">
            {{-- ? Hero section featuring icon, title and subtitle --}}
            <header class="text-center mb-16">
                <div class="mb-8">
                    <div
                        class="w-20 h-20 bg-gradient-to-r from-indigo-600 to-sky-500 rounded-2xl flex items-center justify-center mx-auto mb-6 shadow-xl"
                    >
                        <svg
                            class="w-10 h-10 text-white"
                            fill="none"
                            stroke="currentColor"
                            viewBox="0 0 24 24"
                        >
                            <path
                                stroke-linecap="round"
                                stroke-linejoin="round"
                                stroke-width="2"
                                d="M21 12.79V6a2 2 0 00-2-2H5a2 2 0 00-2 2v6.79a2 2 0 00.89 1.664l7 4.67a2 2 0 002.22 0l7-4.67A2 2 0 0021 12.79z"
                            />
                        </svg>
                    </div>
                </div>
                <h1
                    class="text-4xl lg:text-6xl font-bold bg-gradient-to-r from-indigo-600 to-sky-500 bg-clip-text text-transparent mb-6"
                >
                    {{ __('contact.title') }}
                </h1>
                <p class="text-xl text-gray-600 max-w-3xl mx-auto leading-relaxed">
                    {{ __('contact.subtitle') }}
                </p>
            </header>

            {{-- ? Informational cards explaining how the team handles messages --}}
            <section class="grid gap-6 md:grid-cols-3 mb-16">
                <article class="bg-white rounded-2xl shadow-xl p-6 h-full">
                    <h2 class="text-lg font-semibold text-gray-900 mb-3">
                        {{ __('contact.highlights.response_title') }}
                    </h2>
                    <p class="text-gray-600 text-sm leading-relaxed">
                        {{ __('contact.highlights.response_body') }}
                    </p>
                </article>
                <article class="bg-white rounded-2xl shadow-xl p-6 h-full">
                    <h2 class="text-lg font-semibold text-gray-900 mb-3">
                        {{ __('contact.highlights.privacy_title') }}
                    </h2>
                    <p class="text-gray-600 text-sm leading-relaxed">
                        {{ __('contact.highlights.privacy_body') }}
                    </p>
                </article>
                <article class="bg-white rounded-2xl shadow-xl p-6 h-full">
                    <h2 class="text-lg font-semibold text-gray-900 mb-3">
                        {{ __('contact.highlights.backoffice_title') }}
                    </h2>
                    <p class="text-gray-600 text-sm leading-relaxed">
                        {{ __('contact.highlights.backoffice_body') }}
                    </p>
                </article>
            </section>

            {{-- ! Main contact form card --}}
            <div class="max-w-4xl mx-auto bg-white rounded-3xl shadow-2xl border border-white/40">
                <div class="p-6 sm:p-10">
                    {{-- ? Feedback banner when a message has been sent successfully --}}
                    @if (session('status'))
                        <div class="mb-6 rounded-xl border border-green-200 bg-green-50 p-4 text-sm text-green-800 flex items-start">
                            <svg class="w-5 h-5 mr-2 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
                            </svg>
                            <span>{{ session('status') }}</span>
                        </div>
                    @endif

                    {{-- ! Contact form uses POST to localized route --}}
                    <form method="POST" action="{{ route('contact.store', app()->getLocale()) }}" class="space-y-6">
                        @csrf

                        {{-- ? Name field --}}
                        <div>
                            <label for="name" class="block text-sm font-semibold text-gray-700 mb-2">
                                {{ __('contact.form.name.label') }}
                            </label>
                            <input
                                id="name"
                                name="name"
                                type="text"
                                value="{{ old('name', auth()->user()->name ?? '') }}"
                                placeholder="{{ __('contact.form.name.placeholder') }}"
                                class="w-full rounded-lg border {{ $errors->has('name') ? 'border-red-300 focus:ring-red-500' : 'border-gray-300 focus:ring-indigo-500' }} px-4 py-3 shadow-sm focus:ring-2 focus:border-transparent transition"
                                required
                            />
                            @error('name')
                                <p class="text-sm text-red-600 mt-2">{{ $message }}</p>
                            @enderror
                        </div>

                        {{-- ? Email field --}}
                        <div>
                            <label for="email" class="block text-sm font-semibold text-gray-700 mb-2">
                                {{ __('contact.form.email.label') }}
                            </label>
                            <input
                                id="email"
                                name="email"
                                type="email"
                                value="{{ old('email', auth()->user()->email ?? '') }}"
                                placeholder="{{ __('contact.form.email.placeholder') }}"
                                class="w-full rounded-lg border {{ $errors->has('email') ? 'border-red-300 focus:ring-red-500' : 'border-gray-300 focus:ring-indigo-500' }} px-4 py-3 shadow-sm focus:ring-2 focus:border-transparent transition"
                                required
                            />
                            @error('email')
                                <p class="text-sm text-red-600 mt-2">{{ $message }}</p>
                            @enderror
                        </div>

                        {{-- ? Category select --}}
                        <div>
                            <label for="category" class="block text-sm font-semibold text-gray-700 mb-2">
                                {{ __('contact.form.category.label') }}
                            </label>
                            <select
                                id="category"
                                name="category"
                                class="w-full rounded-lg border {{ $errors->has('category') ? 'border-red-300 focus:ring-red-500' : 'border-gray-300 focus:ring-indigo-500' }} px-4 py-3 shadow-sm focus:ring-2 focus:border-transparent transition bg-white"
                                required
                            >
                                <option value="" disabled {{ old('category') ? '' : 'selected' }}>
                                    {{ __('contact.form.category.placeholder') }}
                                </option>
                                @foreach ($categories as $value => $label)
                                    <option value="{{ $value }}" {{ old('category') === $value ? 'selected' : '' }}>
                                        {{ $label }}
                                    </option>
                                @endforeach
                            </select>
                            @error('category')
                                <p class="text-sm text-red-600 mt-2">{{ $message }}</p>
                            @enderror
                        </div>

                        {{-- ? Message textarea --}}
                        <div>
                            <label for="message" class="block text-sm font-semibold text-gray-700 mb-2">
                                {{ __('contact.form.message.label') }}
                            </label>
                            <textarea
                                id="message"
                                name="message"
                                rows="6"
                                placeholder="{{ __('contact.form.message.placeholder') }}"
                                class="w-full rounded-lg border {{ $errors->has('message') ? 'border-red-300 focus:ring-red-500' : 'border-gray-300 focus:ring-indigo-500' }} px-4 py-3 shadow-sm focus:ring-2 focus:border-transparent transition"
                                required
                            >{{ old('message') }}</textarea>
                            @error('message')
                                <p class="text-sm text-red-600 mt-2">{{ $message }}</p>
                            @enderror
                        </div>

                        {{-- ! Simple anti-spam captcha --}}
                        <div class="grid gap-4 md:grid-cols-[minmax(0,1.2fr)_minmax(0,0.8fr)] md:items-end">
                            <div class="space-y-2">
                                <label for="captcha_answer" class="block text-sm font-semibold text-gray-700 mb-2">
                                    {{ __('contact.form.captcha.label') }}
                                </label>
                                <div class="flex flex-col sm:flex-row sm:items-center gap-3">
                                    <div class="px-4 py-2 bg-indigo-50 text-indigo-700 rounded-lg font-semibold text-center sm:text-left">
                                        {{ $captcha['question'] ?? '' }}
                                    </div>
                                    <input
                                        id="captcha_answer"
                                        name="captcha_answer"
                                        type="number"
                                        inputmode="numeric"
                                        class="w-full sm:flex-1 rounded-lg border {{ $errors->has('captcha_answer') ? 'border-red-300 focus:ring-red-500' : 'border-gray-300 focus:ring-indigo-500' }} px-4 py-2 shadow-sm focus:ring-2 focus:border-transparent transition"
                                        placeholder="{{ __('contact.form.captcha.placeholder') }}"
                                        required
                                    />
                                </div>
                                @error('captcha_answer')
                                    <p class="text-sm text-red-600 mt-2">{{ $message }}</p>
                                @enderror
                            </div>

                            {{-- ? Submit button with subtle animation --}}
                            <div class="flex flex-col sm:items-end gap-3">
                                <button
                                    type="submit"
                                    class="inline-flex w-full sm:w-auto items-center justify-center px-6 py-3 bg-gradient-to-r from-indigo-600 to-sky-500 hover:from-indigo-700 hover:to-sky-600 text-white font-semibold rounded-xl shadow-lg transition-transform duration-200 hover:-translate-y-0.5 focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-indigo-500"
                                    aria-label="{{ __('contact.form.submit') }}"
                                >
                                    <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8m-9 4v9" />
                                    </svg>
                                    {{ __('contact.form.submit') }}
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection