@extends('layouts.auth', ['title' => 'Register Business - Booklio'])

@section('content')
    <x-ui.card padding="p-6 sm:p-7">
        <div class="mb-6">
            <x-ui.badge>Start your SaaS workspace</x-ui.badge>
            <h1 class="mt-4 text-3xl font-extrabold tracking-tight text-booklio-dark">Register Business</h1>
            <p class="mt-2 text-sm leading-6 text-booklio-muted">Create your booking, invoice, reminder, and CRM workspace with dummy UI data only.</p>
        </div>

        <form method="POST" action="{{ route('register.store') }}" class="space-y-4">
            @csrf
            <x-form.input name="business_name" label="Business name" value="Booklio Beauty Salon" placeholder="Your business name" />
            <div class="grid gap-4 sm:grid-cols-2">
                <x-form.input name="owner_name" label="Owner name" value="Sarah Johnson" placeholder="Owner full name" />
                <x-form.input name="phone" label="Phone" value="+1 555 123 4567" placeholder="+1 555 000 0000" />
            </div>
            <x-form.input name="email" type="email" label="Email" value="new-owner@booklio.test" placeholder="you@example.com" />
            <div class="grid gap-4 sm:grid-cols-2">
                <x-form.input name="password" type="password" label="Password" value="password" placeholder="Create password" />
                <x-form.input name="password_confirmation" type="password" label="Confirm password" value="password" placeholder="Repeat password" />
            </div>

            <label class="flex items-start gap-3 rounded-lg border border-booklio-border bg-slate-50 p-3 text-sm font-medium leading-5 text-slate-600">
                <input name="terms" type="checkbox" checked class="mt-0.5 h-4 w-4 rounded border-booklio-border text-booklio-primary focus:ring-booklio-primary">
                <span>I agree to the Terms, Privacy Policy, and CodeCanyon license usage terms.</span>
            </label>
            @error('terms')
                <p class="-mt-2 text-xs font-semibold text-red-600">{{ $message }}</p>
            @enderror

            <x-ui.button class="w-full" type="submit">Create account</x-ui.button>
        </form>

        <p class="mt-6 text-center text-sm font-medium text-booklio-muted">
            Already have an account?
            <a href="{{ route('login') }}" class="font-bold text-booklio-primary hover:text-blue-700">Login</a>
        </p>
    </x-ui.card>
@endsection