@extends('layouts.guest')

@section('content')
    <div style="background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 12px; padding: 40px 32px; box-shadow: 0 1px 3px rgba(0,0,0,0.04);">
        <div style="text-align: center; margin-bottom: 32px;">
            <div style="width: 48px; height: 48px; background: var(--primary); border-radius: 12px; display: flex; align-items: center; justify-content: center; color: white; font-family: 'Fraunces', serif; font-weight: 700; font-size: 24px; margin: 0 auto 16px;">V</div>
            <h1 style="font-family: 'Fraunces', serif; font-weight: 600; font-size: 24px; color: var(--text-primary); margin-bottom: 4px;">Create account</h1>
            <p style="font-size: 14px; color: var(--text-muted);">Get started with Vidya</p>
        </div>

        @if ($errors->any())
            <div style="margin-bottom: 20px; padding: 12px 16px; background: #FEF2F2; border: 1px solid #FECACA; border-radius: 8px; font-size: 13px; color: #991B1B;">
                <ul style="list-style: none; padding: 0; margin: 0;">
                    @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif

        <form method="POST" action="{{ route('register') }}">
            @csrf

            <div style="margin-bottom: 20px;">
                <label for="name" style="display: block; font-size: 14px; font-weight: 500; color: var(--text-primary); margin-bottom: 6px;">Name</label>
                <input id="name" type="text" name="name" value="{{ old('name') }}" required autofocus autocomplete="name"
                    style="width: 100%; padding: 10px 14px; border: 1px solid var(--card-border); border-radius: 8px; font-size: 14px; font-family: 'Inter', sans-serif; color: var(--text-primary); background: var(--card-bg); outline: none; transition: border-color 0.15s;"
                    onfocus="this.style.borderColor='var(--primary)'" onblur="this.style.borderColor='var(--card-border)'">
            </div>

            <div style="margin-bottom: 20px;">
                <label for="email" style="display: block; font-size: 14px; font-weight: 500; color: var(--text-primary); margin-bottom: 6px;">Email</label>
                <input id="email" type="email" name="email" value="{{ old('email') }}" required autocomplete="username"
                    style="width: 100%; padding: 10px 14px; border: 1px solid var(--card-border); border-radius: 8px; font-size: 14px; font-family: 'Inter', sans-serif; color: var(--text-primary); background: var(--card-bg); outline: none; transition: border-color 0.15s;"
                    onfocus="this.style.borderColor='var(--primary)'" onblur="this.style.borderColor='var(--card-border)'">
            </div>

            <div style="margin-bottom: 20px;">
                <label for="password" style="display: block; font-size: 14px; font-weight: 500; color: var(--text-primary); margin-bottom: 6px;">Password</label>
                <input id="password" type="password" name="password" required autocomplete="new-password"
                    style="width: 100%; padding: 10px 14px; border: 1px solid var(--card-border); border-radius: 8px; font-size: 14px; font-family: 'Inter', sans-serif; color: var(--text-primary); background: var(--card-bg); outline: none; transition: border-color 0.15s;"
                    onfocus="this.style.borderColor='var(--primary)'" onblur="this.style.borderColor='var(--card-border)'">
            </div>

            <div style="margin-bottom: 24px;">
                <label for="password_confirmation" style="display: block; font-size: 14px; font-weight: 500; color: var(--text-primary); margin-bottom: 6px;">Confirm Password</label>
                <input id="password_confirmation" type="password" name="password_confirmation" required autocomplete="new-password"
                    style="width: 100%; padding: 10px 14px; border: 1px solid var(--card-border); border-radius: 8px; font-size: 14px; font-family: 'Inter', sans-serif; color: var(--text-primary); background: var(--card-bg); outline: none; transition: border-color 0.15s;"
                    onfocus="this.style.borderColor='var(--primary)'" onblur="this.style.borderColor='var(--card-border)'">
            </div>

            <button type="submit"
                style="width: 100%; padding: 11px 20px; background: var(--primary); color: white; font-size: 14px; font-weight: 500; border: none; border-radius: 8px; cursor: pointer; transition: background 0.15s; font-family: 'Inter', sans-serif;"
                onmouseover="this.style.background='var(--primary-dark)'" onmouseout="this.style.background='var(--primary)'">
                Register
            </button>
        </form>

        <p style="text-align: center; margin-top: 24px; font-size: 14px; color: var(--text-muted);">
            Already have an account?
            <a href="{{ route('login') }}" style="color: var(--primary); text-decoration: none; font-weight: 500;">Sign in</a>
        </p>
    </div>
@endsection