@extends('externo.layout')
@section('contenido')
<style>
    .registro-hero {
        background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
        padding: 120px 0 60px;
        position: relative;
    }
    .registro-hero h1 {
        font-size: 2.5rem;
        font-weight: 800;
        color: #fff;
        margin-bottom: 10px;
    }
    .registro-hero h1 span {
        background: linear-gradient(90deg, #f39c12, #e74c3c);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }
    .registro-hero p {
        color: #b0b0b0;
        font-size: 1.1rem;
    }
    .registro-container {
        background: #fff;
        border-radius: 30px;
        box-shadow: 0 20px 60px rgba(0,0,0,0.15);
        overflow: hidden;
        margin-top: -30px;
        margin-bottom: 60px;
    }
    .registro-left {
        background: linear-gradient(135deg, #f39c12, #e74c3c);
        padding: 50px;
        color: #fff;
        display: flex;
        flex-direction: column;
        justify-content: center;
        min-height: 100%;
    }
    .registro-left h3 {
        font-size: 1.8rem;
        font-weight: 700;
        margin-bottom: 20px;
    }
    .registro-left ul {
        list-style: none;
        padding: 0;
    }
    .registro-left ul li {
        padding: 12px 0;
        display: flex;
        align-items: center;
        gap: 15px;
        font-size: 1.05rem;
    }
    .registro-left ul li i {
        font-size: 24px;
        background: rgba(255,255,255,0.2);
        width: 40px;
        height: 40px;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .registro-right {
        padding: 50px;
    }
    .registro-right h3 {
        font-size: 1.8rem;
        font-weight: 700;
        color: #1a1a2e;
        margin-bottom: 30px;
    }
    .form-floating {
        margin-bottom: 20px;
    }
    .form-floating .form-control {
        border-radius: 12px;
        border: 2px solid #e0e0e0;
        padding: 1rem 1rem;
        height: auto;
        font-size: 1rem;
    }
    .form-floating .form-control:focus {
        border-color: #f39c12;
        box-shadow: 0 0 0 0.2rem rgba(243, 156, 18, 0.15);
    }
    .form-floating label {
        padding: 1rem;
    }
    .form-select {
        border-radius: 12px;
        border: 2px solid #e0e0e0;
        padding: 0.8rem 1rem;
        font-size: 1rem;
        margin-bottom: 20px;
    }
    .form-select:focus {
        border-color: #f39c12;
        box-shadow: 0 0 0 0.2rem rgba(243, 156, 18, 0.15);
    }
    .btn-registro {
        width: 100%;
        padding: 15px;
        background: linear-gradient(135deg, #f39c12, #e74c3c);
        color: #fff;
        border: none;
        border-radius: 12px;
        font-size: 1.1rem;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.3s ease;
    }
    .btn-registro:hover {
        transform: translateY(-2px);
        box-shadow: 0 10px 30px rgba(243, 156, 18, 0.4);
    }
    .plan-selector {
        display: flex;
        gap: 15px;
        margin-bottom: 25px;
    }
    .plan-option {
        flex: 1;
        padding: 20px;
        border: 2px solid #e0e0e0;
        border-radius: 15px;
        text-align: center;
        cursor: pointer;
        transition: all 0.3s ease;
    }
    .plan-option:hover {
        border-color: #f39c12;
    }
    .plan-option.selected {
        border-color: #f39c12;
        background: rgba(243, 156, 18, 0.05);
    }
    .plan-option input {
        display: none;
    }
    .plan-option .plan-name {
        font-weight: 700;
        color: #1a1a2e;
        margin-bottom: 5px;
    }
    .plan-option .plan-price {
        font-size: 1.5rem;
        font-weight: 800;
        color: #f39c12;
    }
    .plan-option .plan-price span {
        font-size: 0.9rem;
        font-weight: 400;
        color: #666;
    }
    .divider {
        display: flex;
        align-items: center;
        margin: 25px 0;
    }
    .divider::before, .divider::after {
        content: '';
        flex: 1;
        height: 1px;
        background: #e0e0e0;
    }
    .divider span {
        padding: 0 15px;
        color: #999;
        font-size: 0.9rem;
    }
    .social-login {
        display: flex;
        gap: 15px;
    }
    .social-btn {
        flex: 1;
        padding: 12px;
        border: 2px solid #e0e0e0;
        border-radius: 12px;
        background: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        cursor: pointer;
        transition: all 0.3s ease;
        text-decoration: none;
        color: #333;
    }
    .social-btn:hover {
        background: #f8f9fa;
        border-color: #ccc;
    }
    .social-btn i {
        font-size: 20px;
    }
    .social-btn.google i { color: #ea4335; }
    .social-btn.apple i { color: #000; }
    .terms-check {
        margin: 20px 0;
    }
    .terms-check label {
        font-size: 0.9rem;
        color: #666;
    }
    .terms-check a {
        color: #f39c12;
    }
    .login-link {
        text-align: center;
        margin-top: 20px;
        color: #666;
    }
    .login-link a {
        color: #f39c12;
        font-weight: 600;
    }
</style>

<!-- Hero Section -->
<section class="registro-hero">
    <div class="container">
        <div class="text-center">
            <h1>Únete a La Llave del <span>Saber</span></h1>
            <p>Crea tu cuenta y comienza a diagnosticar como un experto</p>
        </div>
    </div>
</section>

<!-- Registro Form -->
<div class="container">
    <div class="registro-container">
        <div class="row g-0">
            <div class="col-lg-5">
                <div class="registro-left">
                    <h3>¿Por qué registrarte?</h3>
                    <ul>
                        <li>
                            <i class='bx bx-check-circle'></i>
                            <span>Acceso a IA especializada en mecánica</span>
                        </li>
                        <li>
                            <i class='bx bx-camera'></i>
                            <span>Análisis de fotos con inteligencia artificial</span>
                        </li>
                        <li>
                            <i class='bx bx-chip'></i>
                            <span>Base de datos de códigos DTC completa</span>
                        </li>
                        <li>
                            <i class='bx bx-image'></i>
                            <span>Miles de diagramas técnicos</span>
                        </li>
                        <li>
                            <i class='bx bx-history'></i>
                            <span>Historial de todas tus consultas</span>
                        </li>
                        <li>
                            <i class='bx bx-mobile'></i>
                            <span>App disponible para Android e iOS</span>
                        </li>
                    </ul>
                    <div class="mt-4">
                        <p style="opacity: 0.8; font-size: 0.9rem;">
                            <i class='bx bx-shield-quarter'></i>
                            Tus datos están protegidos y seguros
                        </p>
                    </div>
                </div>
            </div>
            <div class="col-lg-7">
                <div class="registro-right">
                    <h3>Crear cuenta</h3>

                    <form action="{{ route('ia.registro.store') }}" method="POST">
                        @csrf

                        <!-- Selección de Plan -->
                        <label class="mb-2" style="font-weight: 600; color: #1a1a2e;">Selecciona tu plan:</label>
                        <div class="plan-selector">
                            <label class="plan-option" id="plan-basico">
                                <input type="radio" name="plan" value="basico">
                                <div class="plan-name">Básico</div>
                                <div class="plan-price">$99<span>/mes</span></div>
                            </label>
                            <label class="plan-option selected" id="plan-profesional">
                                <input type="radio" name="plan" value="profesional" checked>
                                <div class="plan-name">Profesional</div>
                                <div class="plan-price">$249<span>/mes</span></div>
                            </label>
                            <label class="plan-option" id="plan-empresarial">
                                <input type="radio" name="plan" value="empresarial">
                                <div class="plan-name">Empresarial</div>
                                <div class="plan-price">$499<span>/mes</span></div>
                            </label>
                        </div>

                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-floating">
                                    <input type="text" class="form-control @error('nombre') is-invalid @enderror"
                                           id="nombre" name="nombre" placeholder="Nombre"
                                           value="{{ old('nombre') }}" required>
                                    <label for="nombre">Nombre(s)</label>
                                    @error('nombre')
                                        <span class="text-danger">{{ $message }}</span>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-floating">
                                    <input type="text" class="form-control @error('apellidos') is-invalid @enderror"
                                           id="apellidos" name="apellidos" placeholder="Apellidos"
                                           value="{{ old('apellidos') }}">
                                    <label for="apellidos">Apellidos</label>
                                    @error('apellidos')
                                        <span class="text-danger">{{ $message }}</span>
                                    @enderror
                                </div>
                            </div>
                        </div>

                        <div class="form-floating">
                            <input type="email" class="form-control @error('email') is-invalid @enderror"
                                   id="email" name="email" placeholder="Correo electrónico"
                                   value="{{ old('email') }}" required>
                            <label for="email">Correo electrónico</label>
                            @error('email')
                                <span class="text-danger">{{ $message }}</span>
                            @enderror
                        </div>

                        <div class="form-floating">
                            <input type="tel" class="form-control @error('telefono') is-invalid @enderror"
                                   id="telefono" name="telefono" placeholder="Teléfono"
                                   value="{{ old('telefono') }}">
                            <label for="telefono">Teléfono (WhatsApp)</label>
                            @error('telefono')
                                <span class="text-danger">{{ $message }}</span>
                            @enderror
                        </div>

                        <select name="tipo_cuenta" class="form-select @error('tipo_cuenta') is-invalid @enderror">
                            <option value="">Selecciona tipo de cuenta</option>
                            <option value="mecanico" {{ old('tipo_cuenta') == 'mecanico' ? 'selected' : '' }}>Mecánico independiente</option>
                            <option value="taller" {{ old('tipo_cuenta') == 'taller' ? 'selected' : '' }}>Taller mecánico</option>
                            <option value="estudiante" {{ old('tipo_cuenta') == 'estudiante' ? 'selected' : '' }}>Estudiante</option>
                            <option value="aficionado" {{ old('tipo_cuenta') == 'aficionado' ? 'selected' : '' }}>Aficionado</option>
                        </select>
                        @error('tipo_cuenta')
                            <span class="text-danger">{{ $message }}</span>
                        @enderror

                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-floating">
                                    <input type="password" class="form-control @error('password') is-invalid @enderror"
                                           id="password" name="password" placeholder="Contraseña" required>
                                    <label for="password">Contraseña</label>
                                    @error('password')
                                        <span class="text-danger">{{ $message }}</span>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-floating">
                                    <input type="password" class="form-control"
                                           id="password_confirmation" name="password_confirmation"
                                           placeholder="Confirmar contraseña" required>
                                    <label for="password_confirmation">Confirmar contraseña</label>
                                </div>
                            </div>
                        </div>

                        <div class="terms-check">
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" id="terminos" name="terminos" required>
                                <label class="form-check-label" for="terminos">
                                    Acepto los <a href="{{ route('terminos.condiciones') }}" target="_blank">términos y condiciones</a>
                                    y la <a href="#" target="_blank">política de privacidad</a>
                                </label>
                            </div>
                        </div>

                        <button type="submit" class="btn-registro">
                            <i class='bx bx-user-plus'></i> Crear mi cuenta
                        </button>
                    </form>

                    <div class="divider">
                        <span>o regístrate con</span>
                    </div>

                    <div class="social-login">
                        <a href="#" class="social-btn google">
                            <i class='bx bxl-google'></i>
                            Google
                        </a>
                        <a href="#" class="social-btn apple">
                            <i class='bx bxl-apple'></i>
                            Apple
                        </a>
                    </div>

                    <div class="login-link">
                        ¿Ya tienes cuenta? <a href="#">Inicia sesión</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    // Plan selector
    document.querySelectorAll('.plan-option').forEach(option => {
        option.addEventListener('click', function() {
            document.querySelectorAll('.plan-option').forEach(o => o.classList.remove('selected'));
            this.classList.add('selected');
            this.querySelector('input').checked = true;
        });
    });
</script>
@endsection