@extends('layouts.app')

@section('title', 'Contact — FENNEC')
@section('description', 'Une question sur FENNEC ? Écrivez-nous.')

@section('content')
  <main id="top">
    <section class="contact-page shell">
      <div class="contact-head reveal">
        <p class="section-index">CONTACT</p>
        <h1>Une question ?<br><span>Écrivez-nous.</span></h1>
        <p>Décrivez-nous votre demande, nous vous répondons par e-mail.</p>
        <a class="text-link" href="{{ route('home') }}#experience">Découvrir l’expérience <span>→</span></a>
      </div>

      <form class="contact-form reveal" method="POST" action="{{ route('contact.envoyer') }}" novalidate>
        @csrf

        @if (session('envoye'))
          <p class="retour" role="status">Merci, votre message a bien été envoyé. Nous vous répondons rapidement.</p>
        @endif

        <div class="champ @error('nom') erreur @enderror">
          <label for="nom">Nom</label>
          <input id="nom" name="nom" type="text" value="{{ old('nom') }}" autocomplete="name" required>
          @error('nom') <small>{{ $message }}</small> @enderror
        </div>

        <div class="champ @error('email') erreur @enderror">
          <label for="email">Adresse e-mail</label>
          <input id="email" name="email" type="email" value="{{ old('email') }}" autocomplete="email" required>
          @error('email') <small>{{ $message }}</small> @enderror
        </div>

        <div class="champ large @error('sujet') erreur @enderror">
          <label for="sujet">Sujet</label>
          <select id="sujet" name="sujet" required>
            @foreach (['Question générale', 'Mon compte', 'Un trajet ou un gain', 'Partenariat', 'Autre'] as $option)
              <option value="{{ $option }}" @selected(old('sujet') === $option)>{{ $option }}</option>
            @endforeach
          </select>
          @error('sujet') <small>{{ $message }}</small> @enderror
        </div>

        <div class="champ large @error('message') erreur @enderror">
          <label for="message">Message</label>
          <textarea id="message" name="message" rows="6" required>{{ old('message') }}</textarea>
          @error('message') <small>{{ $message }}</small> @enderror
        </div>

        {{-- Anti-spam : champ invisible que seuls les robots remplissent --}}
        <div class="piege" aria-hidden="true">
          <label for="site">Ne pas remplir</label>
          <input id="site" name="site" type="text" tabindex="-1" autocomplete="off">
        </div>

        <button class="button gold" type="submit">Envoyer le message <span>→</span></button>
      </form>
    </section>
  </main>
@endsection