@extends('layouts.storefront')

@section('body_attributes', 'data-page="auth-register"')
@section('title', 'Register | ' . config('app.name'))
@section('meta_description', 'Create a Clusterfix account for faster checkout, repair tracking, and invoice access.')

@section('content')
    <x-auth.shell
        eyebrow="INITIALIZE NEW CLIENT NODE"
        title="Create credentials"
        description="Register to unlock priority support, secure order tracking, and faster booking next time."
        :highlights="[
            ['icon' => 'support_agent', 'title' => 'Priority support', 'text' => 'Your account connects to repair updates and billing.'],
            ['icon' => 'verified', 'title' => 'Fast booking', 'text' => 'Reuse contact and shipping details next visit.'],
        ]"
    >
        @if ($errors->any())
            <div class="mb-6 rounded-xl border border-red-500/20 bg-red-500/10 px-4 py-3 text-sm text-red-700">
                <ul class="list-disc pl-5 space-y-1">
                    @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif

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

            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div>
                    <label class="block text-xs font-semibold text-on-surface mb-1.5 uppercase tracking-wider" for="register-name">Full name</label>
                    <input id="register-name" name="name" value="{{ old('name') }}" type="text" class="w-full rounded-xl border border-outline-variant bg-surface-container-low text-body-sm py-3 px-4 focus:ring-primary focus:border-primary" placeholder="e.g. Alex Martinez" required>
                </div>
                <div>
                    <label class="block text-xs font-semibold text-on-surface mb-1.5 uppercase tracking-wider" for="register-phone">Phone</label>
                    <input id="register-phone" name="phone" value="{{ old('phone') }}" type="text" class="w-full rounded-xl border border-outline-variant bg-surface-container-low text-body-sm py-3 px-4 focus:ring-primary focus:border-primary" placeholder="Optional">
                </div>
            </div>

            <div>
                <label class="block text-xs font-semibold text-on-surface mb-1.5 uppercase tracking-wider" for="register-email">Email address</label>
                <input id="register-email" name="email" value="{{ old('email') }}" type="email" class="w-full rounded-xl border border-outline-variant bg-surface-container-low text-body-sm py-3 px-4 focus:ring-primary focus:border-primary" placeholder="you@workshop.com" required>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div>
                    <label class="block text-xs font-semibold text-on-surface mb-1.5 uppercase tracking-wider" for="register-password">Password</label>
                    <input id="register-password" name="password" type="password" class="w-full rounded-xl border border-outline-variant bg-surface-container-low text-body-sm py-3 px-4 focus:ring-primary focus:border-primary" placeholder="At least 8 characters" required>
                </div>
                <div>
                    <label class="block text-xs font-semibold text-on-surface mb-1.5 uppercase tracking-wider" for="register-password-confirmation">Confirm password</label>
                    <input id="register-password-confirmation" name="password_confirmation" type="password" class="w-full rounded-xl border border-outline-variant bg-surface-container-low text-body-sm py-3 px-4 focus:ring-primary focus:border-primary" placeholder="Repeat password" required>
                </div>
            </div>

            <button type="submit" class="bg-primary text-on-primary font-label-md text-label-md px-6 py-3.5 rounded-xl hover:bg-primary-container transition-all active:scale-95 shadow-md shadow-primary/10 glow-button flex items-center justify-center gap-2 w-full font-bold">
                <span>Create account</span>
                <span class="material-symbols-outlined text-base">person_add</span>
            </button>
        </form>

        <div class="mt-6 flex flex-col sm:flex-row gap-3 text-sm">
            <a href="{{ route('auth.login') }}" class="inline-flex items-center justify-center rounded-xl border border-outline-variant px-5 py-3 text-on-surface-variant hover:text-primary hover:border-primary transition-colors">Already have an account?</a>
            <a href="{{ route('auth') }}" class="inline-flex items-center justify-center rounded-xl border border-outline-variant px-5 py-3 text-on-surface-variant hover:text-primary hover:border-primary transition-colors">Back to access chooser</a>
        </div>
    </x-auth.shell>
@endsection