@extends('site_builder.layouts.app')

@section('title', 'Registrarse')

@section('content')
    <div class="mx-auto max-w-md">
        <h1 class="font-display text-3xl font-semibold text-ink-900">Kayıt Ol</h1>
        <p class="mt-2 text-sm text-ink-700">Birkaç adımda kendi astroloji sitenin sahibi ol.</p>

        <form method="POST" action="{{ route('sitebuilder.auth.register.post') }}" class="mt-8 space-y-5">
            @csrf

            <div>
                <label for="name" class="block text-sm font-medium text-ink-800">Ad Soyad</label>
                <input
                    type="text"
                    name="name"
                    id="name"
                    value="{{ old('name') }}"
                    required
                    class="mt-1 block w-full rounded-lg border border-brand-200 bg-white px-3 py-2 text-sm text-ink-900 shadow-sm focus:border-brand-500 focus:outline-none focus:ring-1 focus:ring-brand-500"
                >
                @error('name')
                    <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                @enderror
            </div>

            <div>
                <label for="email" class="block text-sm font-medium text-ink-800">E-posta</label>
                <input
                    type="email"
                    name="email"
                    id="email"
                    value="{{ old('email') }}"
                    required
                    class="mt-1 block w-full rounded-lg border border-brand-200 bg-white px-3 py-2 text-sm text-ink-900 shadow-sm focus:border-brand-500 focus:outline-none focus:ring-1 focus:ring-brand-500"
                >
                @error('email')
                    <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                @enderror
            </div>

            <div>
                <label for="password" class="block text-sm font-medium text-ink-800">Şifre</label>
                <input
                    type="password"
                    name="password"
                    id="password"
                    required
                    class="mt-1 block w-full rounded-lg border border-brand-200 bg-white px-3 py-2 text-sm text-ink-900 shadow-sm focus:border-brand-500 focus:outline-none focus:ring-1 focus:ring-brand-500"
                >
                @error('password')
                    <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                @enderror
            </div>

            <div>
                <label for="password_confirmation" class="block text-sm font-medium text-ink-800">Şifre (Tekrar)</label>
                <input
                    type="password"
                    name="password_confirmation"
                    id="password_confirmation"
                    required
                    class="mt-1 block w-full rounded-lg border border-brand-200 bg-white px-3 py-2 text-sm text-ink-900 shadow-sm focus:border-brand-500 focus:outline-none focus:ring-1 focus:ring-brand-500"
                >
            </div>

            <div>
                <div class="flex items-start gap-2">
                    <input type="checkbox" name="kvkk" id="kvkk" value="1" class="mt-0.5 h-4 w-4 rounded border-brand-300 text-brand-600 focus:ring-brand-500">
                    <label for="kvkk" class="text-sm text-ink-700">KVKK Aydınlatma Metni'ni okudum, onaylıyorum.</label>
                </div>
                @error('kvkk')
                    <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                @enderror
            </div>

            <button
                type="submit"
                class="w-full rounded-lg bg-brand-600 px-4 py-2.5 text-sm font-semibold text-white shadow-glow transition hover:bg-brand-700"
            >
                Kayıt Ol
            </button>
        </form>

        <p class="mt-6 text-center text-sm text-ink-700">
            Zaten hesabın var mı?
            <a href="{{ route('sitebuilder.auth.login') }}" class="font-medium text-brand-600 hover:text-brand-700">Giriş yap</a>
        </p>
    </div>
@endsection