<x-guest-layout>
    <div class="flex flex-col md:flex-row h-full">
        
        <!-- Left Side: Branding/Image -->
        <div class="hidden md:flex flex-col justify-center items-center w-1/2 bg-gradient-to-br from-purple-600 to-indigo-700 text-white p-12 rounded-l-2xl relative overflow-hidden">
            <div class="relative z-10 text-center">
                <svg class="w-20 h-20 mx-auto mb-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 4v16m8-8H4"></path></svg>
                <h1 class="text-4xl font-extrabold mb-4">Join Us Today</h1>
                <p class="text-indigo-100 text-lg mb-8">Start broadcasting your voice messages to thousands of contacts in just a few clicks.</p>
            </div>
            <!-- Decorative Elements -->
            <div class="absolute top-0 left-0 -ml-16 -mt-16 w-64 h-64 rounded-full bg-white opacity-10"></div>
            <div class="absolute bottom-0 right-0 -mr-16 -mb-16 w-48 h-48 rounded-full bg-white opacity-10"></div>
        </div>

        <!-- Right Side: Register Form -->
        <div class="flex flex-col justify-center w-full md:w-1/2 p-8 md:p-14 bg-white rounded-r-2xl shadow-xl z-10">
            <div class="max-w-md w-full mx-auto">
                <div class="text-center mb-8">
                    <h2 class="text-3xl font-bold text-gray-900 mb-2">Create an Account</h2>
                    <p class="text-gray-500 text-sm">Sign up to get started with Call Broadcasting.</p>
                </div>

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

                    <!-- Name -->
                    <div>
                        <label for="name" class="block text-sm font-medium text-gray-700 mb-1">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-lg border border-gray-300 focus:ring-2 focus:ring-indigo-600 focus:border-indigo-600 outline-none transition-colors" placeholder="Enter your name">
                        <x-input-error :messages="$errors->get('name')" class="mt-2 text-red-500" />
                    </div>

                    <!-- Email Address -->
                    <div>
                        <label for="email" class="block text-sm font-medium text-gray-700 mb-1">Email Address</label>
                        <input id="email" type="email" name="email" value="{{ old('email') }}" required autocomplete="username" class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-indigo-600 focus:border-indigo-600 outline-none transition-colors" placeholder="Enter your email">
                        <x-input-error :messages="$errors->get('email')" class="mt-2 text-red-500" />
                    </div>

                    <!-- Phone Number -->
                    <div>
                        <label for="phone" class="block text-sm font-medium text-gray-700 mb-1">Mobile Number</label>
                        <input id="phone" type="text" name="phone" value="{{ old('phone') }}" required autocomplete="tel" class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-indigo-600 focus:border-indigo-600 outline-none transition-colors" placeholder="Enter your mobile number">
                        <x-input-error :messages="$errors->get('phone')" class="mt-2 text-red-500" />
                    </div>

                    <!-- Password -->
                    <div>
                        <label for="password" class="block text-sm font-medium text-gray-700 mb-1">Password</label>
                        <input id="password" type="password" name="password" required autocomplete="new-password" class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-indigo-600 focus:border-indigo-600 outline-none transition-colors" placeholder="Create a password">
                        <x-input-error :messages="$errors->get('password')" class="mt-2 text-red-500" />
                    </div>

                    <!-- Confirm Password -->
                    <div>
                        <label for="password_confirmation" class="block text-sm font-medium text-gray-700 mb-1">Confirm Password</label>
                        <input id="password_confirmation" type="password" name="password_confirmation" required autocomplete="new-password" class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-indigo-600 focus:border-indigo-600 outline-none transition-colors" placeholder="Confirm your password">
                        <x-input-error :messages="$errors->get('password_confirmation')" class="mt-2 text-red-500" />
                    </div>

                    <button type="submit" class="w-full flex justify-center py-3 px-4 border border-transparent rounded-lg shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-600 transition-colors">
                        Create Account
                    </button>
                </form>

                <div class="mt-8 text-center">
                    <p class="text-sm text-gray-600">
                        Already have an account? 
                        <a href="{{ route('login') }}" class="font-semibold text-indigo-600 hover:text-indigo-500 transition-colors">Sign in here</a>
                    </p>
                </div>
            </div>
        </div>
    </div>
</x-guest-layout>
