@extends('layouts.app')
@section('content')
<div class="min-h-screen flex items-center justify-center px-4 py-24 bengali-pattern">
    <div class="glass-card p-8 md:p-12 max-w-lg w-full shadow-2xl relative overflow-hidden" data-aos="zoom-in">
        <div class="absolute -top-10 -left-10 w-32 h-32 bg-gold/10 rounded-full blur-3xl"></div>
        <div class="absolute -bottom-10 -right-10 w-32 h-32 bg-bo/10 rounded-full blur-3xl"></div>

        <div class="text-center mb-8 relative">
            <div class="w-16 h-16 rounded-full bg-gradient-to-br from-gold to-bo flex items-center justify-center mx-auto mb-4 shadow-lg">
                <span class="text-white font-playfair font-bold text-2xl">শ</span>
            </div>
            <h1 class="font-playfair text-3xl text-cream font-bold">Join the Family</h1>
            <p class="text-cream/50 text-sm mt-1">Create your Shalik account today</p>
        </div>

        @if($errors->any())
        <div class="bg-red-500/20 border border-red-500/40 text-red-400 p-4 rounded-xl mb-6 text-sm">
            <ul class="list-disc list-inside">
                @foreach($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
        @endif

        <form action="{{ route('register.post') }}" method="POST" class="space-y-5 relative">
            @csrf
            <div>
                <label class="block text-cream/70 text-xs uppercase tracking-widest mb-2 font-semibold">Full Name *</label>
                <div class="relative">
                    <span class="absolute inset-y-0 left-4 flex items-center text-gold/50"><i class="fas fa-user"></i></span>
                    <input type="text" name="name" value="{{ old('name') }}" required
                           class="w-full bg-deep-green/60 border border-gold/20 text-cream placeholder-cream/20 rounded-xl pl-12 pr-4 py-3 focus:outline-none focus:border-gold transition-colors"
                           placeholder="Enter your name">
                </div>
            </div>

            <div class="grid sm:grid-cols-2 gap-5">
                <div>
                    <label class="block text-cream/70 text-xs uppercase tracking-widest mb-2 font-semibold">Email *</label>
                    <div class="relative">
                        <span class="absolute inset-y-0 left-4 flex items-center text-gold/50"><i class="fas fa-envelope"></i></span>
                        <input type="email" name="email" value="{{ old('email') }}" required
                               class="w-full bg-deep-green/60 border border-gold/20 text-cream placeholder-cream/20 rounded-xl pl-12 pr-4 py-3 focus:outline-none focus:border-gold transition-colors"
                               placeholder="email@example.com">
                    </div>
                </div>
                <div>
                    <label class="block text-cream/70 text-xs uppercase tracking-widest mb-2 font-semibold">Phone</label>
                    <div class="relative">
                        <span class="absolute inset-y-0 left-4 flex items-center text-gold/50"><i class="fas fa-phone"></i></span>
                        <input type="text" name="phone" value="{{ old('phone') }}"
                               class="w-full bg-deep-green/60 border border-gold/20 text-cream placeholder-cream/20 rounded-xl pl-12 pr-4 py-3 focus:outline-none focus:border-gold transition-colors"
                               placeholder="+880...">
                    </div>
                </div>
            </div>

            <div class="grid sm:grid-cols-2 gap-5">
                <div>
                    <label class="block text-cream/70 text-xs uppercase tracking-widest mb-2 font-semibold">Password *</label>
                    <div class="relative">
                        <span class="absolute inset-y-0 left-4 flex items-center text-gold/50"><i class="fas fa-lock"></i></span>
                        <input type="password" name="password" required
                               class="w-full bg-deep-green/60 border border-gold/20 text-cream placeholder-cream/20 rounded-xl pl-12 pr-4 py-3 focus:outline-none focus:border-gold transition-colors"
                               placeholder="••••••••">
                    </div>
                </div>
                <div>
                    <label class="block text-cream/70 text-xs uppercase tracking-widest mb-2 font-semibold">Confirm *</label>
                    <div class="relative">
                        <span class="absolute inset-y-0 left-4 flex items-center text-gold/50"><i class="fas fa-lock"></i></span>
                        <input type="password" name="password_confirmation" required
                               class="w-full bg-deep-green/60 border border-gold/20 text-cream placeholder-cream/20 rounded-xl pl-12 pr-4 py-3 focus:outline-none focus:border-gold transition-colors"
                               placeholder="••••••••">
                    </div>
                </div>
            </div>

            <p class="text-cream/30 text-[10px] uppercase tracking-tighter leading-relaxed">
                By signing up, you agree to our <a href="{{ route('terms') }}" class="text-gold">Terms</a> and <a href="{{ route('privacy') }}" class="text-gold">Privacy Policy</a>.
            </p>

            <button type="submit" class="btn-gold w-full py-4 text-base shadow-xl">
                Create Account <i class="fas fa-user-plus ml-2"></i>
            </button>
        </form>

        <div class="mt-8 text-center text-sm text-cream/40 border-t border-white/5 pt-6 relative">
            Already have an account? 
            <a href="{{ route('login') }}" class="text-gold hover:text-light-gold font-semibold">Sign In Instead</a>
        </div>
    </div>
</div>
@endsection