@extends('layouts.guest')

@section('title', 'Login — Swagvio')

@section('header-right')
    Don't have an account? <a href="{{ route('register') }}">Register Free</a>
@endsection

@section('content')
<div class="auth-card">
    <div class="auth-title">Welcome back</div>
    <div class="auth-subtitle">Sign in to your Swagvio account</div>

    @if($errors->any())
        <div class="alert alert-error"><i class="fi fi-rr-triangle-warning"></i> {{ $errors->first() }}</div>
    @endif
    @if(session('success'))
        <div class="alert alert-success"><i class="fi fi-rr-check-circle"></i> {{ session('success') }}</div>
    @endif

    <form method="POST" action="{{ route('login.post') }}">
        @csrf
        <div class="form-group">
            <label class="form-label">Email</label>
            <input type="email" name="email" id="email" class="form-control {{ $errors->has('email') ? 'is-invalid' : '' }}"
                placeholder="you@example.com" value="{{ old('email') }}" required>
            @error('email')<div class="invalid-feedback">{{ $message }}</div>@enderror
        </div>
        <div class="form-group">
            <label class="form-label">Password</label>
            <input type="password" name="password" id="password" class="form-control {{ $errors->has('password') ? 'is-invalid' : '' }}"
                placeholder="Your password" required>
            @error('password')<div class="invalid-feedback">{{ $message }}</div>@enderror
        </div>
        <div class="remember-row">
            <label class="remember-label">
                <input type="checkbox" name="remember"> Remember me
            </label>
            <a href="#" class="forgot-link">Forgot password?</a>
        </div>
        <button type="submit" class="btn btn-pink">Sign In</button>
    </form>

    <div class="divider"><span>or</span></div>

    <div class="alt-btn-row">
        <button class="alt-btn"><i class="fi fi-rr-mobile"></i> OTP Login</button>
        <button class="alt-btn"><i class="fi fi-brands-google"></i> Google</button>
    </div>

    <div class="auth-switch">
        New here? <a href="{{ route('register') }}">Create a free account →</a>
    </div>

    <div class="terms-note">
        By signing in, you confirm you are <strong>18+</strong> and agree to our
        <a href="#">Terms</a> & <a href="#">Privacy Policy</a>.
    </div>
</div>
@endsection