@extends('layouts.app')

@section('content')
<section class="section">
    <div class="container" style="max-width:960px">
        <div class="split" style="grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:34px;align-items:stretch">
            <div class="panel" style="padding:32px">
                <h1 style="font-size:1.6rem">Connexion</h1>
                <p class="muted small" style="margin:8px 0 22px">Accédez à vos annonces, vos favoris et votre messagerie.</p>

                <form method="post" action="{{ url('/connexion') }}" class="stack">
                    @csrf
                    <div class="field-group">
                        <label class="label" for="email">Adresse e-mail</label>
                        <div class="input-icon">
                            <x-icon name="mail"/>
                            <input class="input @error('email') is-invalid @enderror" id="email" type="email" name="email"
                                   value="{{ old('email') }}" placeholder="vous@exemple.fr" required autofocus autocomplete="email">
                        </div>
                        @error('email')<span class="field-error">{{ $message }}</span>@enderror
                    </div>
                    <div class="field-group">
                        <label class="label" for="password">Mot de passe</label>
                        <div class="input-icon">
                            <x-icon name="lock"/>
                            <input class="input @error('password') is-invalid @enderror" id="password" type="password"
                                   name="password" placeholder="••••••••" required autocomplete="current-password">
                        </div>
                        @error('password')<span class="field-error">{{ $message }}</span>@enderror
                    </div>
                    <div class="row-between">
                        <label class="check"><input type="checkbox" name="remember" value="1" checked> Rester connecté</label>
                        <a href="{{ url('/mot-de-passe-oublie') }}" class="small" style="color:var(--orange-700)">Mot de passe oublié ?</a>
                    </div>
                    <button class="btn btn-primary btn-lg btn-block" type="submit">Se connecter</button>
                </form>

                <p class="small center muted" style="margin-top:20px">
                    Pas encore de compte ? <a href="{{ url('/inscription') }}" style="color:var(--orange-700);font-weight:600">Créer un compte gratuit</a>
                </p>
            </div>

            <div class="panel" style="background:var(--ink-900);color:#fff;border-color:transparent;padding:32px;display:flex;flex-direction:column;justify-content:center">
                <h2 style="color:#fff">Un compte, tout CityMag</h2>
                <div class="stack" style="margin-top:20px">
                    @foreach([
                        ['tag', 'Gérez vos annonces', 'Modifiez, remontez ou clôturez vos annonces en un clic.'],
                        ['heart', 'Favoris synchronisés', 'Retrouvez vos coups de cœur sur tous vos appareils.'],
                        ['bell', 'Alertes personnalisées', 'Soyez prévenu dès qu\'une annonce correspond à vos critères.'],
                        ['message', 'Messagerie sécurisée', 'Échangez sans jamais dévoiler votre numéro.'],
                    ] as [$i, $t, $d])
                        <div class="row" style="gap:12px">
                            <span class="usp-icon" style="background:rgba(255,255,255,.1);color:var(--orange-300)"><x-icon :name="$i"/></span>
                            <div>
                                <strong style="display:block;font-size:.95rem">{{ $t }}</strong>
                                <span class="small" style="color:rgba(255,255,255,.65)">{{ $d }}</span>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
        </div>
    </div>
</section>
@endsection