@extends('layouts.site')

@section('title', __('Contact') . ' - Pierre2.net')
@section('meta_description', __('Contact us'))

@section('content')
<article class="max-w-4xl">
    <header class="mb-6">
        <h1 class="entry-title">{{ __('Contact us') }}</h1>
    </header>

    <div class="prose prose-neutral dark:prose-invert max-w-none">
        <img src="{{ asset('/images/colomb.webp') }}" alt="{{ __('Contact') }}"
             loading="lazy" decoding="async" class="object-contain w-full mb-8 rounded-lg max-h-64">

        @if(session('success'))
            <div class="p-4 mb-6 text-green-700 border border-green-200 rounded-lg bg-green-50 dark:bg-green-900/30 dark:border-green-800 dark:text-green-300">
                {{ session('success') }}
            </div>
        @endif

        <form method="POST" action="{{ url($locale . '/contact') }}" class="space-y-6 not-prose">
            @csrf

            <!-- Name -->
            <div>
                <x-input-label for="name" :value="__('Name')" class="dark:text-gray-300" />
                <x-text-input id="name" name="name" type="text" class="block w-full mt-1 dark:bg-gray-800 dark:text-gray-200 dark:border-gray-600 focus:border-primary focus:ring-primary" :value="old('name')" required />
                <x-input-error :messages="$errors->get('name')" class="mt-2" />
            </div>

            <!-- Email -->
            <div>
                <x-input-label for="email" :value="__('Email')" class="dark:text-gray-300" />
                <x-text-input id="email" name="email" type="email" class="block w-full mt-1 dark:bg-gray-800 dark:text-gray-200 dark:border-gray-600 focus:border-primary focus:ring-primary" :value="old('email')" required />
                <x-input-error :messages="$errors->get('email')" class="mt-2" />
            </div>

            <!-- Subject -->
            <div>
                <x-input-label for="subject" :value="__('Subject')" class="dark:text-gray-300" />
                <x-text-input id="subject" name="subject" type="text" class="block w-full mt-1 dark:bg-gray-800 dark:text-gray-200 dark:border-gray-600 focus:border-primary focus:ring-primary" :value="old('subject')" required />
                <x-input-error :messages="$errors->get('subject')" class="mt-2" />
            </div>

            <!-- Message -->
            <div>
                <x-input-label for="message" :value="__('Message')" class="dark:text-gray-300" />
                <textarea id="message" name="message" rows="6" required
                    class="block w-full mt-1 border-gray-300 rounded-md shadow-sm dark:bg-gray-800 dark:text-gray-200 dark:border-gray-600 focus:border-primary focus:ring-primary">{{ old('message') }}</textarea>
                <x-input-error :messages="$errors->get('message')" class="mt-2" />
            </div>

            <!-- Honeypot -->
            <div class="absolute h-0 overflow-hidden opacity-0" aria-hidden="true">
                <label for="website">Website</label>
                <input type="text" id="website" name="website" tabindex="-1" autocomplete="off">
            </div>

            <div>
                <x-primary-button class="!bg-primary hover:!bg-secondary focus:!bg-secondary focus:!ring-primary">{{ __('Send') }}</x-primary-button>
            </div>
        </form>
    </div>
</article>
@endsection