@extends('layouts.app')
@section('content')
    <section class="relative py-10 sm:py-14">
        <div class="absolute inset-0 -z-10">
            <div class="h-full w-full bg-gradient-to-b from-blue-50 to-white dark:from-gray-900 dark:to-gray-950"></div>
        </div>


        <div class="mx-auto max-w-7xl px-4 grid lg:grid-cols-2 gap-10 items-center">
            <!-- Left: Marketing copy -->
            <div class="hidden lg:block">
                <h1 class="text-3xl sm:text-4xl font-bold tracking-tight">Create your account</h1>
                <p class="mt-3 text-gray-600 dark:text-gray-400">Track, plan, and achieve your financial goals with a
                    beautiful dark/light UI.</p>
                <ul class="mt-6 space-y-2 text-sm text-gray-700 dark:text-gray-300">
                    <li class="flex items-start gap-2"><span
                            class="mt-1 inline-block h-2 w-2 rounded-full bg-blue-600"></span> Real-time dashboards</li>
                    <li class="flex items-start gap-2"><span
                            class="mt-1 inline-block h-2 w-2 rounded-full bg-blue-600"></span> Budget planning & alerts</li>
                    <li class="flex items-start gap-2"><span
                            class="mt-1 inline-block h-2 w-2 rounded-full bg-blue-600"></span> Export to Excel & PDF</li>
                </ul>
            </div>


            <!-- Right: Card -->
            <div class="mx-auto w-full max-w-md">
                <div class="rounded-2xl border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900 shadow-sm">
                    <div class="p-6 sm:p-8">
                        <h2 class="text-xl font-semibold">Register</h2>
                        <form class="mt-6 space-y-4" method="POST" action="{{ route('register') }}">
                            @csrf
                            <div>
                                <label class="block text-sm mb-1" for="name">Name</label>
                                <input id="name" name="name" type="text" required autocomplete="name"
                                    class="w-full rounded-lg border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-700 text-gray-900 dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500" />
                            </div>
                            <div>
                                <label class="block text-sm mb-1" for="email">Email</label>
                                <input id="email" name="email" type="email" required autocomplete="email"
                                    class="w-full rounded-lg border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-700 text-gray-900 dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500" />
                            </div>
                            <div>
                                <label class="block text-sm mb-1" for="password">Password</label>
                                <input id="password" name="password" type="password" required autocomplete="new-password"
                                    class="w-full rounded-lg border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-700 text-gray-900 dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500" />
                            </div>
                            <div>
                                <label class="block text-sm mb-1" for="password_confirmation">Confirm Password</label>
                                <input id="password_confirmation" name="password_confirmation" type="password" required
                                    autocomplete="new-password"
                                    class="w-full rounded-lg border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-700 text-gray-900 dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500" />
                            </div>


                            <button type="submit"
                                class="mt-2 w-full rounded-lg bg-blue-600 px-4 py-2.5 text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 bg-blue-600 hover:bg-blue-700 text-white dark:bg-blue-600 dark:hover:bg-blue-500 rounded-lg px-4 py-2 transition">Create
                                account</button>


                            <p class="text-center text-sm text-gray-600 dark:text-gray-400">Already have an account?
                                <a href="{{ route('login') }}" class="text-blue-600 hover:underline">Log in</a>
                            </p>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection