@extends('layouts.app')

@section('title', 'Inscription')

@section('content')
  <section class="page-hero">
    <p class="eyebrow">Espace utilisateur</p>
    <h1>Créer un compte</h1>
    <p>Votre compte permet de préparer une demande d'adhésion, de vous inscrire aux événements et d'accéder aux contenus réservés lorsqu'ils seront ouverts.</p>
  </section>

  <section class="auth-layout auth-layout-under-hero auth-register-layout">
    <article class="auth-card auth-card-login auth-register-form-card">
      <div class="auth-card-heading">
        <span class="auth-icon"><i class="fi fi-br-user-add" aria-hidden="true"></i></span>
        <div>
          <p class="eyebrow">Nouveau compte</p>
          <h2>Vos informations</h2>
        </div>
      </div>

      @include('partials.form-errors')

      <form class="form-grid auth-register-form" method="post" action="{{ route('register.store') }}">
        @csrf
        <div class="auth-field-pair">
          <label>Prénom
            <input name="first_name" value="{{ old('first_name') }}" autocomplete="given-name" required>
          </label>
          <label>Nom
            <input name="last_name" value="{{ old('last_name') }}" autocomplete="family-name" required>
          </label>
        </div>

        <div class="auth-field-pair">
          <label>E-mail
            <input type="email" name="email" value="{{ old('email') }}" autocomplete="email" required>
          </label>
          <label>Téléphone facultatif
            <input name="phone" value="{{ old('phone') }}" autocomplete="tel">
          </label>
        </div>

        <div class="auth-field-pair">
          <label>Mot de passe
            <input type="password" name="password" autocomplete="new-password" data-password-strength-input required>
          </label>
          <label>Confirmer le mot de passe
            <input type="password" name="password_confirmation" autocomplete="new-password" required>
          </label>
        </div>

        <p class="auth-form-note auth-password-note" data-password-strength-note hidden>Le mot de passe doit contenir au moins 10 caractères, avec majuscules, minuscules et chiffres.</p>

        <div class="auth-consents">
          <label class="auth-checkbox">
            <input type="checkbox" name="newsletter_consent" value="1" @checked(old('newsletter_consent'))>
            <span>J'accepte de recevoir les informations de l'association.</span>
          </label>
          <label class="auth-checkbox">
            <input type="checkbox" name="terms" value="1" required>
            <span>J'accepte les <a href="{{ route('legal.cgu') }}">CGU</a> et la <a href="{{ route('legal.confidentialite') }}">politique de confidentialité</a>.</span>
          </label>
        </div>

        <p class="auth-form-note">Les données collectées servent à créer votre compte, gérer vos inscriptions et vous contacter si nécessaire. Après inscription, vous pourrez demander une adhésion ou signaler que vous êtes déjà adhérent depuis votre espace.</p>

        <button class="button primary auth-submit" type="submit">
          <i class="fi fi-br-arrow-right" aria-hidden="true"></i>
          Créer un compte
        </button>
      </form>
    </article>

    <aside class="auth-card auth-register-callout auth-register-help">
      <span class="auth-icon"><i class="fi fi-br-shield-check" aria-hidden="true"></i></span>
      <p class="eyebrow">À quoi sert le compte ?</p>
      <h2>Un espace personnel simple</h2>
      <p>Le compte ne remplace pas automatiquement l'adhésion : il permet d'abord de vous identifier sur le site, puis de transmettre une demande ou d'accéder aux services ouverts aux membres.</p>
      <ul>
        <li>Faire reconnaître ou demander son adhésion</li>
        <li>S'inscrire aux événements de l'association</li>
        <li>Accéder aux contenus réservés lorsqu'ils seront ouverts</li>
      </ul>
      <a class="button secondary auth-create-button" href="{{ route('login') }}">
        <i class="fi fi-br-arrow-left" aria-hidden="true"></i>
        J'ai déjà un compte
      </a>
    </aside>
  </section>
@endsection