@extends('layouts.master')

@section('title', 'Sign Up - DigitalStore')

@push('styles')
<style>
    .register-visual-bg {
        background: radial-gradient(circle at 70% 30%, #1a1a2e 0%, #0c0c10 100%);
    }
    .feature-icon-container {
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid rgba(255, 255, 255, 0.1);
        transition: all 0.3s ease;
    }
    .feature-icon-container:hover {
        background: rgba(108, 99, 255, 0.1);
        border-color: rgba(108, 99, 255, 0.3);
        transform: translateY(-2px);
    }
    .input-group:focus-within .input-icon {
        color: #6c63ff;
    }
    .social-btn {
        transition: all 0.2s ease;
        border: 1px solid #e5e7eb;
    }
    .social-btn:hover {
        background-color: #f9fafb;
        border-color: #d1d5db;
        transform: translateY(-1px);
    }
    @keyframes float {
        0%, 100% { transform: translateY(0); }
        50% { transform: translateY(-10px); }
    }
    .floating-illustration {
        animation: float 4s ease-in-out infinite;
    }
</style>
@endpush

@section('content')
<div class="min-h-screen flex flex-col md:flex-row bg-[#050508]">
    {{-- Left Side: Visual (Hidden on Mobile) --}}
    <div class="hidden md:flex md:w-1/2 register-visual-bg relative overflow-hidden flex-col justify-center px-12 lg:px-20 py-12 border-r border-white/5">
        {{-- Decorative Elements --}}
        <div class="absolute top-0 left-0 w-full h-full opacity-20 pointer-events-none">
            <div class="absolute top-[20%] left-[-10%] w-[500px] h-[500px] rounded-full blur-[120px] bg-brand-500/30"></div>
            <div class="absolute bottom-[20%] right-[-10%] w-[400px] h-[400px] rounded-full blur-[100px] bg-purple-500/20"></div>
        </div>

        <div class="relative z-10 space-y-10">
            {{-- Badge --}}
            <div class="inline-flex items-center gap-2 bg-white/5 backdrop-blur-md border border-white/10 rounded-full px-4 py-2">
                <div class="w-5 h-5 bg-brand-500 rounded-full flex items-center justify-center">
                    <svg class="w-3 h-3 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M12 4v16m8-8H4"/></svg>
                </div>
                <span class="text-white/90 text-xs font-semibold tracking-wide uppercase">Join the community</span>
            </div>

            {{-- Text Content --}}
            <div class="max-w-md">
                <h1 class="text-4xl lg:text-5xl font-800 text-white leading-tight mb-6 tracking-tight">
                    Start your digital<br>journey today
                </h1>
                <p class="text-gray-400 text-lg leading-relaxed">
                    Create an account to browse thousands of premium digital products and start growing your business.
                </p>
            </div>

            {{-- Features --}}
            <div class="space-y-6 max-w-sm">
                <div class="flex items-center gap-4 group">
                    <div class="w-12 h-12 rounded-xl feature-icon-container flex items-center justify-center flex-shrink-0">
                        <svg class="w-6 h-6 text-brand-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M13 10V3L4 14h7v7l9-11h-7z"/></svg>
                    </div>
                    <div>
                        <h3 class="text-white font-700 text-sm">Lightning Fast Access</h3>
                        <p class="text-gray-500 text-xs">Get your products in seconds after purchase</p>
                    </div>
                </div>

                <div class="flex items-center gap-4 group">
                    <div class="w-12 h-12 rounded-xl feature-icon-container flex items-center justify-center flex-shrink-0">
                        <svg class="w-6 h-6 text-brand-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-7.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg>
                    </div>
                    <div>
                        <h3 class="text-white font-700 text-sm">Verified Quality</h3>
                        <p class="text-gray-500 text-xs">Every product is reviewed by our expert team</p>
                    </div>
                </div>

                <div class="flex items-center gap-4 group">
                    <div class="w-12 h-12 rounded-xl feature-icon-container flex items-center justify-center flex-shrink-0">
                        <svg class="w-6 h-6 text-brand-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M18.364 5.636l-3.536 3.536m0 5.656l3.536 3.536M9.172 9.172L5.636 5.636m3.536 9.192l-3.536 3.536M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-5 0a4 4 0 11-8 0 4 4 0 018 0z"/></svg>
                    </div>
                    <div>
                        <h3 class="text-white font-700 text-sm">24/7 Premium Support</h3>
                        <p class="text-gray-500 text-xs">We're here to help you every step of the way</p>
                    </div>
                </div>
            </div>

            {{-- Illustration --}}
            <div class="pt-10">
                <img src="{{ asset('themes/digital_agence/assets/images/signup_visual.png') }}" alt="DigitalStore" class="w-full max-w-[450px] floating-illustration drop-shadow-2xl">
            </div>
        </div>
    </div>

    {{-- Right Side: Form --}}
    <div class="w-full md:w-1/2 bg-[#050508] flex items-center justify-center px-6 md:px-12 lg:px-20 py-12 lg:py-24 relative overflow-hidden">
        {{-- Mobile Background Glow --}}
        <div class="absolute top-0 right-0 w-[300px] h-[300px] bg-brand-500/10 blur-[100px] rounded-full pointer-events-none md:hidden"></div>
        
        <div class="w-full max-w-[440px] relative z-10">
            {{-- Mobile Logo --}}
            <div class="flex justify-center mb-8 md:hidden">
                 @if(setting('site_logo'))
                    <img src="{{ setting('site_logo') }}" alt="{{ config('app.name') }}" class="h-12 w-auto">
                 @else
                    <span class="text-2xl font-black text-white tracking-tighter">⚡ DigitalStore</span>
                 @endif
            </div>

            <div class="mb-8 text-center md:text-left">
                <h2 class="text-3xl font-800 text-white mb-2 tracking-tight">Create Account</h2>
                <p class="text-gray-500 text-sm">Join 50,000+ creators building the future.</p>
            </div>

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

                {{-- Full Name --}}
                <div class="space-y-2">
                    <label for="name" class="text-sm font-600 text-gray-400 block">Full Name</label>
                    <div class="relative input-group">
                        <div class="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">
                            <svg class="w-5 h-5 text-gray-500 input-icon transition-colors" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/></svg>
                        </div>
                        <input type="text" id="name" name="name" value="{{ old('name') }}" required autofocus
                            class="block w-full pl-11 pr-4 py-3.5 bg-white/5 border border-white/10 rounded-xl text-white text-sm focus:ring-2 focus:ring-brand-500/20 focus:border-brand-500 outline-none transition-all placeholder:text-gray-600"
                            placeholder="John Doe">
                    </div>
                    @error('name')
                        <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
                    @enderror
                </div>

                {{-- Email --}}
                <div class="space-y-2">
                    <label for="email" class="text-sm font-600 text-gray-400 block">Email Address</label>
                    <div class="relative input-group">
                        <div class="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">
                            <svg class="w-5 h-5 text-gray-500 input-icon transition-colors" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/></svg>
                        </div>
                        <input type="email" id="email" name="email" value="{{ old('email') }}" required
                            class="block w-full pl-11 pr-4 py-3.5 bg-white/5 border border-white/10 rounded-xl text-white text-sm focus:ring-2 focus:ring-brand-500/20 focus:border-brand-500 outline-none transition-all placeholder:text-gray-600"
                            placeholder="you@example.com">
                    </div>
                    @error('email')
                        <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
                    @enderror
                </div>

                {{-- Password & Confirm Password (Grid) --}}
                <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                    <div class="space-y-2">
                        <label for="password" class="text-sm font-600 text-gray-400 block">Password</label>
                        <div class="relative input-group">
                            <div class="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">
                                <svg class="w-5 h-5 text-gray-500 input-icon transition-colors" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/></svg>
                            </div>
                            <input type="password" id="password" name="password" required
                                class="block w-full pl-11 pr-4 py-3.5 bg-white/5 border border-white/10 rounded-xl text-white text-sm focus:ring-2 focus:ring-brand-500/20 focus:border-brand-500 outline-none transition-all placeholder:text-gray-600"
                                placeholder="••••••••">
                        </div>
                    </div>
                    <div class="space-y-2">
                        <label for="password_confirmation" class="text-sm font-600 text-gray-400 block">Confirm Password</label>
                        <div class="relative input-group">
                            <div class="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">
                                <svg class="w-5 h-5 text-gray-500 input-icon transition-colors" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/></svg>
                            </div>
                            <input type="password" id="password_confirmation" name="password_confirmation" required
                                class="block w-full pl-11 pr-4 py-3.5 bg-white/5 border border-white/10 rounded-xl text-white text-sm focus:ring-2 focus:ring-brand-500/20 focus:border-brand-500 outline-none transition-all placeholder:text-gray-600"
                                placeholder="••••••••">
                        </div>
                    </div>
                </div>
                @error('password')
                    <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
                @enderror

                {{-- Terms --}}
                <div class="flex items-center">
                    <input id="terms" name="terms" type="checkbox" required
                        class="w-4 h-4 text-brand-500 border-white/10 bg-white/5 rounded focus:ring-brand-500 outline-none transition-all">
                    <label for="terms" class="ml-2 block text-sm font-500 text-gray-500">
                        I agree to the <a href="#" class="text-brand-500 font-600">Terms of Service</a> and <a href="#" class="text-brand-500 font-600">Privacy Policy</a>
                    </label>
                </div>

                {{-- Submit --}}
                <button type="submit"
                    class="w-full py-4 bg-brand-500 hover:bg-brand-600 text-white font-bold rounded-xl shadow-lg shadow-brand-500/25 transition-all active:scale-[0.98] focus:ring-4 focus:ring-brand-500/20">
                    Create Account
                </button>

                @if($hasSocialLogins)
                {{-- Divider --}}
                <div class="relative py-4">
                    <div class="absolute inset-0 flex items-center"><div class="w-full border-t border-gray-100"></div></div>
                    <div class="relative flex justify-center text-xs uppercase"><span class="bg-white px-4 text-gray-400 font-500">Or sign up with</span></div>
                </div>
                @endif

                {{-- Social Logins --}}
                @if($hasSocialLogins)
                <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                    @if($socialLogins['google'])
                    <a href="{{ route('social.redirect', 'google') }}" class="social-btn flex items-center justify-center gap-3 py-3 rounded-xl bg-white shadow-sm">
                        <svg class="w-5 h-5" viewBox="0 0 24 24"><path fill="#EA4335" d="M12 5.04c1.94 0 3.46.83 4.21 1.54l3.14-3.08C17.43 1.63 15 1 12 1 7.21 1 3.19 3.84 1.14 7.95l3.65 2.85c.87-2.6 3.28-4.76 7.21-4.76z"/><path fill="#4285F4" d="M23.49 12.27c0-.79-.07-1.54-.19-2.27H12v4.51h6.47c-.29 1.48-1.14 2.73-2.4 3.58l3.7 2.88c2.16-1.99 3.42-4.93 3.42-8.7z"/><path fill="#FBBC05" d="M4.79 14.8c-.23-.68-.37-1.41-.37-2.17s.14-1.49.37-2.17L1.14 7.95C.41 9.42 0 11.05 0 12.78s.41 3.36 1.14 4.83l3.65-2.81z"/><path fill="#34A853" d="M12 23c3.15 0 5.79-1.03 7.72-2.8l-3.7-2.88c-1.03.69-2.35 1.1-4.02 1.1-3.93 0-6.34-2.16-7.21-4.76l-3.65 2.81C3.19 20.16 7.21 23 12 23z"/></svg>
                         <span class="text-sm font-600 text-gray-700">Google</span>
                    </a>
                    @endif
                    
                    @if($socialLogins['apple'])
                    <a href="{{ route('social.redirect', 'apple') }}" class="social-btn flex items-center justify-center gap-3 py-3 rounded-xl bg-white shadow-sm">
                        <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M17.073 2.132c-.754 0-1.714.453-2.261 1.053-.547.6-.967 1.467-.967 2.333 0 .1.013.2.026.3-.967-.04-1.927.467-2.527 1.127-.6.66-.96 1.547-.96 2.427 0 .093.013.187.027.28-1.507-.067-2.86.68-3.667 1.767-.787 1.087-1.08 2.487-1.08 3.88 0 2.227 1.52 5.047 3.333 6.94 1.44 1.507 3.013 2.493 4.467 2.493 1.187 0 2.053-.627 3.347-.627 1.28 0 2.133.627 3.347.627 1.454 0 3.027-.987 4.467-2.493 1.227-1.28 2.373-3.08 2.893-4.64-.32.093-.653.147-.987.147-1.893 0-3.413-1.4-3.413-3.267 0-1.52.987-2.827 2.36-3.267-.28-.707-.733-1.347-1.307-1.867-.84-.76-1.92-1.2-3.093-1.2"/></svg>
                        <span class="text-sm font-600 text-gray-700">Apple</span>
                    </a>
                    @endif

                    @if($socialLogins['facebook'])
                    <a href="{{ route('social.redirect', 'facebook') }}" class="social-btn flex items-center justify-center gap-3 py-3 rounded-xl bg-white shadow-sm">
                        <svg class="w-5 h-5 text-[#1877F2]" fill="currentColor" viewBox="0 0 24 24"><path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/></svg>
                        <span class="text-sm font-600 text-gray-700">Facebook</span>
                    </a>
                    @endif

                    @if($socialLogins['github'])
                    <a href="{{ route('social.redirect', 'github') }}" class="social-btn flex items-center justify-center gap-3 py-3 rounded-xl bg-white shadow-sm">
                        <svg class="w-5 h-5 text-[#181717]" fill="currentColor" viewBox="0 0 24 24"><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg>
                        <span class="text-sm font-600 text-gray-700">GitHub</span>
                    </a>
                    @endif
                </div>
                @endif

                {{-- Login Link --}}
                <div class="pt-8 text-center">
                    <p class="text-sm text-gray-500">
                        Already have an account? 
                        <a href="{{ route('login') }}" class="font-700 text-brand-500 hover:text-brand-600 transition-colors ml-1">Sign in</a>
                    </p>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection