@extends('layouts.guest')

@section('title', 'Crear cuenta · DeporGestion')

@section('content')
<div class="dg-auth">

    {{-- IZQUIERDA (desktop) --}}
    <div class="dg-auth__media d-none d-lg-block" aria-hidden="true">
        <div class="dg-auth__media-overlay">
            <div class="dg-auth__brand">
                <div class="dg-auth__logo"></div>
                <div>
                    <div class="dg-auth__name">DeporGestion</div>
                    <div class="dg-auth__tagline">Administración & gestión deportiva</div>
                </div>
            </div>

            <div class="dg-auth__quote">
                <div class="dg-auth__quote-title">Comienza hoy</div>
                <div class="dg-auth__quote-text">
                    Crea tu cuenta y organiza tu club, equipos y competencias con control total.
                </div>

                <div class="dg-auth__quote-mini">
                    ✔ Roles & permisos · ✔ Calendario · ✔ Reportes · ✔ Trazabilidad
                </div>
            </div>
        </div>
    </div>

    {{-- DERECHA (form) --}}
    <div class="dg-auth__form-wrap">
        <div class="dg-auth__card">
            <div class="dg-auth__card-head">
                <div class="dg-auth__chip">Registro</div>
                <h1 class="dg-auth__title">Crear cuenta</h1>
                <p class="dg-auth__subtitle">Completa los datos para comenzar.</p>
            </div>

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

                <div class="mb-3">
                    <label for="name" class="form-label dg-label">Nombre completo</label>
                    <input id="name" type="text"
                           class="form-control dg-input @error('name') is-invalid @enderror"
                           name="name" value="{{ old('name') }}"
                           required autofocus autocomplete="name">
                    @error('name')
                        <div class="invalid-feedback d-block">{{ $message }}</div>
                    @enderror
                </div>

                <div class="mb-3">
                    <label for="email" class="form-label dg-label">Correo electrónico</label>
                    <input id="email" type="email"
                           class="form-control dg-input @error('email') is-invalid @enderror"
                           name="email" value="{{ old('email') }}"
                           required autocomplete="email">
                    @error('email')
                        <div class="invalid-feedback d-block">{{ $message }}</div>
                    @enderror
                </div>

                <div class="mb-3">
                    <label for="role" class="form-label dg-label">Tipo de cuenta</label>
                    <select name="role" id="role"
                            class="form-select dg-input @error('role') is-invalid @enderror"
                            required>
                        <option value="novios" {{ old('role','novios') == 'novios' ? 'selected' : '' }}>Novios</option>
                        <option value="comercio" {{ old('role') == 'comercio' ? 'selected' : '' }}>Comercio</option>
                        <option value="planner" {{ old('role') == 'planner' ? 'selected' : '' }}>Wedding Planner</option>
                    </select>
                    @error('role')
                        <div class="invalid-feedback d-block">{{ $message }}</div>
                    @enderror
                </div>

                <div class="mb-3">
                    <label for="password" class="form-label dg-label">Contraseña</label>
                    <input id="password" type="password"
                           class="form-control dg-input @error('password') is-invalid @enderror"
                           name="password" required autocomplete="new-password">
                    @error('password')
                        <div class="invalid-feedback d-block">{{ $message }}</div>
                    @enderror
                </div>

                <div class="mb-2">
                    <label for="password_confirmation" class="form-label dg-label">Confirmar contraseña</label>
                    <input id="password_confirmation" type="password"
                           class="form-control dg-input"
                           name="password_confirmation" required autocomplete="new-password">
                </div>

                <button type="submit" class="btn dg-btn w-100 py-2 mt-2">
                    Registrarse →
                </button>

                <div class="dg-auth__divider"><span>o</span></div>

                <div class="text-center">
                    <a class="dg-link" href="{{ route('login') }}">
                        ¿Ya tienes cuenta? Inicia sesión
                    </a>
                </div>
            </form>

            <div class="dg-auth__foot">
                © {{ date('Y') }} DeporGestion
            </div>
        </div>
    </div>
</div>
@endsection

@push('styles')
<style>
    :root{
        --bg: #ffffff;
        --text: #0f172a;
        --muted: #475569;
        --line: #e5e7eb;
        --accent: #22c55e;
        --accent2: #16a34a;
        --shadow: 0 18px 55px rgba(2, 6, 23, .10);
        --radius: 22px;
    }

    body{
        margin:0;
        background: radial-gradient(1100px 500px at 20% 10%, rgba(34,197,94,.14), transparent 60%),
                    radial-gradient(900px 420px at 85% 20%, rgba(34,197,94,.10), transparent 60%),
                    var(--bg);
        color: var(--text);
    }

    .guest-page-wrapper{ min-height: 100vh; }

    .dg-auth{
        min-height: 100vh;
        display: grid;
        grid-template-columns: 1.05fr .95fr;
        position: relative;
    }
    @media (max-width: 991.98px){
        .dg-auth{ grid-template-columns: 1fr; }
    }

    /* MEDIA SIDE */
    .dg-auth__media{
        position: relative;
        background-image: url('{{ asset("img/estadio.avif") }}'); /* misma imagen del login */
        background-size: cover;
        background-position: center;
        border-right: 1px solid rgba(255,255,255,.10);
    }
    .dg-auth__media:after{
        content:"";
        position:absolute; inset:0;
        background:
            linear-gradient(120deg, rgba(2,6,23,.82), rgba(2,6,23,.32)),
            radial-gradient(520px 320px at 20% 20%, rgba(34,197,94,.35), transparent 60%);
    }
    .dg-auth__media-overlay{
        position: relative;
        z-index: 2;
        height: 100%;
        padding: 34px;
        display:flex;
        flex-direction: column;
        justify-content: space-between;
        color: rgba(255,255,255,.92);
    }
    .dg-auth__brand{
        display:flex; gap: 12px; align-items:center;
    }
    .dg-auth__logo{
        width:44px; height:44px; border-radius: 14px;
        background: radial-gradient(18px 18px at 30% 30%, rgba(255,255,255,.9), rgba(255,255,255,0) 70%),
                    linear-gradient(135deg, var(--accent), var(--accent2));
        box-shadow: 0 18px 40px rgba(34,197,94,.22);
        border: 1px solid rgba(34,197,94,.45);
    }
    .dg-auth__name{ font-weight: 950; letter-spacing: -.4px; }
    .dg-auth__tagline{ font-weight: 700; font-size: 12px; opacity:.85; margin-top:2px; }

    .dg-auth__quote{
        max-width: 46ch;
        border: 1px solid rgba(255,255,255,.16);
        background: rgba(255,255,255,.07);
        border-radius: 18px;
        padding: 18px;
        backdrop-filter: blur(10px);
    }
    .dg-auth__quote-title{
        font-weight: 950;
        letter-spacing: .9px;
        text-transform: uppercase;
        font-size: 12px;
        margin-bottom: 8px;
    }
    .dg-auth__quote-text{
        opacity:.92;
        line-height: 1.6;
        font-weight: 650;
        font-size: 14px;
    }
    .dg-auth__quote-mini{
        margin-top: 10px;
        opacity: .90;
        font-weight: 700;
        font-size: 12px;
        line-height: 1.5;
    }

    /* FORM SIDE */
    .dg-auth__form-wrap{
        display:flex;
        align-items:center;
        justify-content:center;
        padding: 28px;
    }
    .dg-auth__card{
        width: 100%;
        max-width: 460px;
        border: 1px solid var(--line);
        background: rgba(255,255,255,.86);
        border-radius: var(--radius);
        box-shadow: var(--shadow);
        padding: 22px;
        backdrop-filter: blur(10px);
    }

    .dg-auth__chip{
        display:inline-flex; align-items:center;
        padding: 8px 10px;
        border-radius: 999px;
        border: 1px solid rgba(34,197,94,.25);
        background: rgba(34,197,94,.10);
        color: #14532d;
        font-weight: 950;
        text-transform: uppercase;
        letter-spacing: .85px;
        font-size: 11px;
    }
    .dg-auth__title{
        margin: 10px 0 6px;
        font-weight: 950;
        letter-spacing: -1px;
        text-transform: uppercase;
        font-size: 26px;
    }
    .dg-auth__subtitle{
        margin:0 0 8px;
        color: var(--muted);
        font-weight: 650;
        line-height: 1.5;
        font-size: 14px;
    }

    .dg-label{
        font-weight: 900;
        font-size: 12px;
        color: #0f172a;
        letter-spacing: .3px;
        text-transform: uppercase;
    }

    .dg-input{
        border-radius: 14px;
        padding: .7rem .85rem;
        border: 1px solid var(--line);
        background: #fff;
        font-weight: 650;
    }
    .dg-input:focus{
        border-color: rgba(34,197,94,.55);
        box-shadow: 0 0 0 .18rem rgba(34,197,94,.14);
    }

    .dg-link{
        color: #0f172a;
        font-weight: 950;
        text-decoration: none;
    }
    .dg-link:hover{
        text-decoration: underline;
        text-decoration-thickness: 2px;
        text-underline-offset: 4px;
    }

    .dg-btn{
        border: none;
        border-radius: 999px;
        font-weight: 950;
        letter-spacing: .2px;
        background: linear-gradient(135deg, var(--accent), var(--accent2));
        color: #052012;
        box-shadow: 0 16px 34px rgba(34,197,94,.20);
    }
    .dg-btn:hover{ filter: brightness(1.03); transform: translateY(-1px); transition: .2s; }

    .dg-auth__divider{
        margin: 14px 0 10px;
        display:flex;
        align-items:center;
        gap: 10px;
        color: #94a3b8;
        font-weight: 950;
        text-transform: uppercase;
        letter-spacing: 1px;
        font-size: 11px;
    }
    .dg-auth__divider:before,
    .dg-auth__divider:after{
        content:"";
        height:1px;
        background: var(--line);
        flex:1;
    }
    .dg-auth__divider span{ padding: 0 8px; }

    .dg-auth__foot{
        margin-top: 14px;
        text-align:center;
        color: #94a3b8;
        font-weight: 850;
        font-size: 12px;
    }

    /* Mobile: fondo con imagen suave */
    @media (max-width: 991.98px){
        .dg-auth:before{
            content:"";
            position:absolute; inset:0;
            background-image: url('{{ asset("img/estadio.avif") }}');
            background-size: cover;
            background-position: center;
            opacity: .14;
            pointer-events:none;
        }
        .dg-auth__form-wrap{
            position: relative;
            z-index: 2;
            padding: 22px;
        }
        .dg-auth__card{
            background: rgba(255,255,255,.92);
        }
    }
</style>
@endpush