@extends('layouts.app')

@section('title', 'Customer Registration – Japan Auction Bidding | MotoSolution Bangladesh')

@section('content')
<div class="min-h-[85vh] flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8 bg-[#0B0F19] relative overflow-hidden">
    <div class="absolute top-1/3 left-1/2 -translate-x-1/2 w-[500px] h-[500px] bg-red-600/10 rounded-full blur-3xl pointer-events-none"></div>

    <div class="max-w-xl w-full space-y-6 bg-[#111827] border border-white/10 p-8 rounded-2xl shadow-2xl relative z-10">
        <div class="text-center">
            <div class="w-12 h-12 rounded-xl bg-gradient-to-br from-red-600 to-red-800 flex items-center justify-center text-white font-extrabold text-2xl mx-auto shadow-lg shadow-red-900/40">
                M
            </div>
            <h2 class="mt-4 text-2xl font-bold text-white font-heading">Register Customer Account</h2>
            <p class="mt-1 text-xs text-slate-400">Unlock live Japan auction bidding, landed cost calculators, and import tracking</p>
        </div>

        @if($errors->any())
            <div class="bg-rose-500/10 border border-rose-500/20 text-rose-400 text-xs p-3 rounded-xl">
                <ul class="list-disc pl-4 space-y-1">
                    @foreach($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif

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

            <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                <div>
                    <label class="block text-xs font-semibold text-slate-300 uppercase tracking-wider mb-1">Full Name *</label>
                    <input name="name" type="text" required value="{{ old('name') }}" placeholder="e.g. Tanvir Ahmed"
                        class="w-full px-4 py-2.5 bg-black/40 border border-white/10 rounded-xl text-white placeholder-slate-500 focus:outline-none focus:border-red-500 text-sm">
                </div>
                <div>
                    <label class="block text-xs font-semibold text-slate-300 uppercase tracking-wider mb-1">Mobile Number (WhatsApp) *</label>
                    <input name="phone" type="text" required value="{{ old('phone') }}" placeholder="e.g. 01712345678"
                        class="w-full px-4 py-2.5 bg-black/40 border border-white/10 rounded-xl text-white placeholder-slate-500 focus:outline-none focus:border-red-500 text-sm">
                </div>
            </div>

            <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                <div>
                    <label class="block text-xs font-semibold text-slate-300 uppercase tracking-wider mb-1">Email Address *</label>
                    <input name="email" type="email" required value="{{ old('email') }}" placeholder="tanvir@example.com"
                        class="w-full px-4 py-2.5 bg-black/40 border border-white/10 rounded-xl text-white placeholder-slate-500 focus:outline-none focus:border-red-500 text-sm">
                </div>
                <div>
                    <label class="block text-xs font-semibold text-slate-300 uppercase tracking-wider mb-1">City / District</label>
                    <input name="city" type="text" value="{{ old('city', 'Dhaka') }}" placeholder="Dhaka, Chittagong, Sylhet"
                        class="w-full px-4 py-2.5 bg-black/40 border border-white/10 rounded-xl text-white placeholder-slate-500 focus:outline-none focus:border-red-500 text-sm">
                </div>
            </div>

            <div>
                <label class="block text-xs font-semibold text-slate-300 uppercase tracking-wider mb-1">Delivery Address (Optional)</label>
                <input name="address" type="text" value="{{ old('address') }}" placeholder="e.g. Road 11, Block D, Banani, Dhaka"
                    class="w-full px-4 py-2.5 bg-black/40 border border-white/10 rounded-xl text-white placeholder-slate-500 focus:outline-none focus:border-red-500 text-sm">
            </div>

            <div>
                <label class="block text-xs font-semibold text-slate-300 uppercase tracking-wider mb-1">Preferred Contact Channel</label>
                <div class="grid grid-cols-3 gap-2 text-xs">
                    <label class="flex items-center gap-2 p-2.5 bg-black/40 border border-white/10 rounded-xl cursor-pointer text-slate-300 hover:border-red-500">
                        <input type="radio" name="preferred_contact" value="whatsapp" checked class="text-red-600 focus:ring-0">
                        <span>WhatsApp</span>
                    </label>
                    <label class="flex items-center gap-2 p-2.5 bg-black/40 border border-white/10 rounded-xl cursor-pointer text-slate-300 hover:border-red-500">
                        <input type="radio" name="preferred_contact" value="call" class="text-red-600 focus:ring-0">
                        <span>Phone Call</span>
                    </label>
                    <label class="flex items-center gap-2 p-2.5 bg-black/40 border border-white/10 rounded-xl cursor-pointer text-slate-300 hover:border-red-500">
                        <input type="radio" name="preferred_contact" value="email" class="text-red-600 focus:ring-0">
                        <span>Email</span>
                    </label>
                </div>
            </div>

            <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                <div>
                    <label class="block text-xs font-semibold text-slate-300 uppercase tracking-wider mb-1">Password *</label>
                    <input name="password" type="password" required placeholder="Minimum 8 characters"
                        class="w-full px-4 py-2.5 bg-black/40 border border-white/10 rounded-xl text-white placeholder-slate-500 focus:outline-none focus:border-red-500 text-sm">
                </div>
                <div>
                    <label class="block text-xs font-semibold text-slate-300 uppercase tracking-wider mb-1">Confirm Password *</label>
                    <input name="password_confirmation" type="password" required placeholder="Re-enter password"
                        class="w-full px-4 py-2.5 bg-black/40 border border-white/10 rounded-xl text-white placeholder-slate-500 focus:outline-none focus:border-red-500 text-sm">
                </div>
            </div>

            <div class="flex items-start gap-2 pt-2 text-xs text-slate-300">
                <input type="checkbox" name="terms" id="terms" required class="mt-0.5 rounded bg-black/40 border-white/10 text-red-600 focus:ring-0">
                <label for="terms">
                    I agree to the <a href="{{ route('faq') }}" class="text-red-400 hover:underline">Auction Terms</a>, Japan bidding authorization guidelines, and privacy policy of MotoSolution Bangladesh.
                </label>
            </div>

            <button type="submit" class="w-full py-3 px-4 bg-red-600 hover:bg-red-700 text-white text-sm font-bold rounded-xl shadow-lg shadow-red-900/30 transition flex items-center justify-center gap-2">
                <i class="fa-solid fa-user-plus"></i>
                <span>Create Customer Account</span>
            </button>
        </form>

        <p class="text-center text-xs text-slate-400">
            Already registered? 
            <a href="{{ route('login') }}" class="font-bold text-red-400 hover:underline">Sign in here</a>
        </p>
    </div>
</div>
@endsection