@extends('layouts.blank')

@section('content')
    <div class="container">
        <div class="row min-vh-100 align-items-center justify-content-center">
            <div class="col-12 col-md-6 col-lg-5">
                <div class="text-center mb-5">
                    <img src="/img/pixelfed-icon-white.svg" width="90">
                </div>

                <div class="card shadow-sm">
                    <div class="card-body p-4">
                        <h2 class="text-center">Join Pixelfed</h2>
                        <p class="lead text-center mb-4">Enter Your Email</p>

                        @if ($errors->any())
                            <div class="alert alert-danger">
                                <ul class="mb-0">
                                    @foreach ($errors->all() as $error)
                                        <li>{{ $error }}</li>
                                    @endforeach
                                </ul>
                            </div>
                        @endif

                        <form method="POST">
                            @csrf

                            <div class="form-group">
                                <label for="email">Email address</label>
                                <input type="email"
                                       class="form-control @error('email') is-invalid @enderror"
                                       id="email"
                                       name="email"
                                       required
                                       autocomplete="email">
                                @error('email')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="form-group text-center">
                                {!! Captcha::display() !!}
                            </div>

                            <button type="submit" class="btn btn-primary btn-block">
                                Send Verification Code
                            </button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('styles')
    <style>
        :root {
            --bg-color: #f8f9fa;
            --card-bg: #ffffff;
            --text-color: #212529;
            --text-muted: #6c757d;
            --input-bg: #ffffff;
            --input-border: #ced4da;
            --input-focus: #80bdff;
            --card-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
        }

        @media (prefers-color-scheme: dark) {
            :root {
                --bg-color: #111827;
                --card-bg: #1f2937;
                --text-color: #f3f4f6;
                --text-muted: #9ca3af;
                --input-bg: #374151;
                --input-border: #4b5563;
                --input-focus: #3b82f6;
                --card-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.3);
            }
        }

        body {
            background-color: var(--bg-color);
            color: var(--text-color);
            transition: background-color 0.3s, color 0.3s;
            min-height: 100vh;
            display: flex;
            align-items: center;
        }

        .card {
            background-color: var(--card-bg);
            border: none;
            border-radius: 1rem;
            box-shadow: var(--card-shadow);
        }

        .benefits-list {
            color: var(--text-muted);
        }

        .benefits-list i {
            color: #3b82f6;
            margin-right: 0.5rem;
        }

        .form-control {
            background-color: var(--input-bg);
            border-color: var(--input-border);
            color: var(--text-color);
            border-radius: 0.5rem;
            padding: 0.75rem 1rem;
            transition: all 0.2s;
        }

        .form-control:focus {
            background-color: var(--input-bg);
            border-color: var(--input-focus);
            color: var(--text-color);
            box-shadow: 0 0 0 0.2rem rgba(59, 130, 246, 0.25);
        }

        .btn-primary {
            padding: 0.75rem 1.5rem;
            border-radius: 0.5rem;
            font-weight: 500;
            transition: transform 0.2s;
            background-color: #3b82f6;
            border-color: #3b82f6;
        }

        .btn-primary:hover {
            transform: translateY(-1px);
            background-color: #2563eb;
            border-color: #2563eb;
        }

        .form-group label {
            font-weight: 500;
            margin-bottom: 0.5rem;
        }

        @media (prefers-color-scheme: dark) {
            a {
                color: #60a5fa;
            }
            a:hover {
                color: #93c5fd;
            }
            .card {
                border: 1px solid rgba(255, 255, 255, 0.1);
            }
        }
    </style>
@endpush