<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="robots" content="noindex, nofollow, noarchive, nosnippet" />
    @php
        $siteSettings = \App\Models\GeneralSetting::getContent();
        $siteLogo = $siteSettings['site']['logo'] ?? null;
        $logoUrl = $siteLogo
            ? ((str_starts_with($siteLogo, 'http://') || str_starts_with($siteLogo, 'https://'))
                ? $siteLogo
                : asset('storage/' . ltrim($siteLogo, '/')))
            : null;
    @endphp
    <title>Create Account - {{ config('app.name') }}</title>
    @vite(['resources/css/app.css', 'resources/js/app.js'])
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet" />
    <style>body { font-family: 'Inter', sans-serif; }</style>
</head>
<body class="min-h-screen bg-gradient-to-br from-blue-900 via-blue-800 to-slate-950 flex items-center justify-center p-4">

<div class="w-full max-w-lg">
    <div class="text-center mb-8">
        <div class="inline-flex items-center justify-center w-16 h-16 bg-white rounded-2xl shadow-lg mb-4">
            @if($logoUrl)
                <img src="{{ $logoUrl }}" alt="{{ config('app.name') }} logo" class="max-h-10 w-auto object-contain" />
            @else
                <span class="text-blue-900 font-bold text-2xl">G</span>
            @endif
        </div>
        <h1 class="text-2xl font-bold text-white">GPS Migration</h1>
        <p class="text-blue-200 text-sm mt-1">Create your account to get started</p>
    </div>

    <div class="bg-white rounded-[28px] shadow-2xl overflow-hidden">
        <div class="px-8 pt-8 pb-6 border-b border-blue-50 bg-gradient-to-r from-white to-blue-50/80">
            <span class="inline-flex items-center rounded-full bg-blue-100 px-3 py-1 text-[11px] font-semibold uppercase tracking-[0.24em] text-blue-700">
                Registration
            </span>
            <h2 class="mt-4 text-2xl font-bold text-slate-900">Join the platform</h2>
            <p class="mt-2 text-sm leading-6 text-slate-500">
                Create a new account with your basic details. You can sign in right after registration.
            </p>
        </div>

        <div class="p-8">
            @if ($errors->any())
                <div class="mb-5 rounded-xl border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700">
                    <ul class="space-y-1">
                        @foreach ($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
            @endif

            <form method="POST" action="{{ route('register') }}" class="space-y-5">
                @csrf

                <div>
                    <label for="name" class="block text-sm font-medium text-gray-700 mb-1.5">Full name</label>
                    <input
                        id="name"
                        type="text"
                        name="name"
                        value="{{ old('name') }}"
                        required
                        autofocus
                        autocomplete="name"
                        class="w-full px-4 py-3 rounded-xl border border-gray-300 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition @error('name') border-red-400 @enderror"
                        placeholder="Your full name"
                    />
                    @error('name')
                        <p class="mt-1.5 text-xs text-red-600">{{ $message }}</p>
                    @enderror
                </div>

                <div>
                    <label for="email" class="block text-sm font-medium text-gray-700 mb-1.5">Email address</label>
                    <input
                        id="email"
                        type="email"
                        name="email"
                        value="{{ old('email') }}"
                        required
                        autocomplete="username"
                        class="w-full px-4 py-3 rounded-xl border border-gray-300 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition @error('email') border-red-400 @enderror"
                        placeholder="name@example.com"
                    />
                    @error('email')
                        <p class="mt-1.5 text-xs text-red-600">{{ $message }}</p>
                    @enderror
                </div>

                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div>
                        <label for="password" class="block text-sm font-medium text-gray-700 mb-1.5">Password</label>
                        <input
                            id="password"
                            type="password"
                            name="password"
                            required
                            autocomplete="new-password"
                            class="w-full px-4 py-3 rounded-xl border border-gray-300 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition @error('password') border-red-400 @enderror"
                            placeholder="Create password"
                        />
                        @error('password')
                            <p class="mt-1.5 text-xs text-red-600">{{ $message }}</p>
                        @enderror
                    </div>

                    <div>
                        <label for="password_confirmation" class="block text-sm font-medium text-gray-700 mb-1.5">Confirm password</label>
                        <input
                            id="password_confirmation"
                            type="password"
                            name="password_confirmation"
                            required
                            autocomplete="new-password"
                            class="w-full px-4 py-3 rounded-xl border border-gray-300 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition @error('password_confirmation') border-red-400 @enderror"
                            placeholder="Repeat password"
                        />
                        @error('password_confirmation')
                            <p class="mt-1.5 text-xs text-red-600">{{ $message }}</p>
                        @enderror
                    </div>
                </div>

                <button type="submit" class="w-full bg-blue-600 hover:bg-blue-700 text-white font-semibold py-3 rounded-xl text-sm transition shadow-sm">
                    Create Account
                </button>

                <a href="{{ route('login') }}"
                   class="block w-full text-center border border-gray-200 hover:bg-gray-50 text-gray-700 font-semibold py-3 rounded-xl text-sm transition">
                    Already have an account? Sign In
                </a>
            </form>
        </div>
    </div>

    <p class="text-center text-blue-200 text-xs mt-6">
        &copy; {{ date('Y') }} {{ config('app.name') }}. All rights reserved.
    </p>
</div>

</body>
</html>
