@extends('layouts_web.hader')
@section('content')
    <section class="contact" id="register" style="min-height: 100vh; padding-top: 10rem;">
        <div class="main">
            <div class="container" style="display: flex; justify-content: center; align-items: center;">
                <div class="form-area" style="max-width: 600px; width: 100%;">
                    <h2 style="text-align: center; font-size: 3rem; color: #043d13; margin-bottom: 2rem;">Crear Cuenta</h2>
                    <p style="text-align: center; font-size: 1.5rem; color: #666; margin-bottom: 3rem;">
                        Regístrate para acceder a todos nuestros servicios
                    </p>

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

                        <input id="name" type="text"
                               class="@error('name') is-invalid @enderror"
                               name="name"
                               value="{{ old('name') }}"
                               placeholder="Nombre completo"
                               required
                               autocomplete="name"
                               autofocus>

                        @error('name')
                            <span style="color: #e74c3c; font-size: 1.4rem; display: block; margin-top: 0.5rem; margin-bottom: 1rem;">
                                {{ $message }}
                            </span>
                        @enderror

                        <input id="email" type="email"
                               class="@error('email') is-invalid @enderror"
                               name="email"
                               value="{{ old('email') }}"
                               placeholder="Correo electrónico"
                               required
                               autocomplete="email">

                        @error('email')
                            <span style="color: #e74c3c; font-size: 1.4rem; display: block; margin-top: 0.5rem; margin-bottom: 1rem;">
                                {{ $message }}
                            </span>
                        @enderror

                        <input id="password" type="password"
                               class="@error('password') is-invalid @enderror"
                               name="password"
                               placeholder="Contraseña"
                               required
                               autocomplete="new-password">

                        @error('password')
                            <span style="color: #e74c3c; font-size: 1.4rem; display: block; margin-top: 0.5rem; margin-bottom: 1rem;">
                                {{ $message }}
                            </span>
                        @enderror

                        <input id="password-confirm" type="password"
                               name="password_confirmation"
                               placeholder="Confirmar contraseña"
                               required
                               autocomplete="new-password">

                        <input type="submit" class="btn" value="Registrarse" style="width: 100%; margin-top: 2rem;">
                    </form>

                    <div style="text-align: center; margin-top: 2rem; font-size: 1.5rem;">
                        <p style="color: #666;">
                            ¿Ya tienes una cuenta?
                            <a href="{{ route('login') }}" style="color: #07941e; font-weight: 600; text-decoration: underline;">Inicia sesión aquí</a>
                        </p>
                    </div>

                    <div class="social-icons" style="margin-top: 3rem;">
                        <a href="https://www.facebook.com/profile.php?id=100064124861619" target="_blank"><i
                                class="facebook fab fa-facebook-f"></i></a>
                        <a href="https://www.instagram.com/omitech_servicios_tecnologicos/" target="_blank"><i
                                class="instagram fab fa-instagram"></i></a>
                        <a href="https://www.linkedin.com/company/omitechservicios/" target="_blank"><i
                                class="linkedin fab fa-linkedin-in"></i></a>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <style>
        .contact .form-area input[type="text"],
        .contact .form-area input[type="email"],
        .contact .form-area input[type="password"] {
            width: 100%;
            padding: 1.5rem;
            margin: 1rem 0;
            font-size: 1.6rem;
            border: 0.1rem solid #ccc;
            border-radius: 0.5rem;
            background: #f9f9f9;
            transition: all 0.3s ease;
        }

        .contact .form-area input[type="text"]:focus,
        .contact .form-area input[type="email"]:focus,
        .contact .form-area input[type="password"]:focus {
            border-color: #07941e;
            background: #fff;
            box-shadow: 0 0 0.5rem rgba(7, 148, 30, 0.2);
        }

        .contact .form-area .btn {
            background: linear-gradient(90deg, #043d13, #07941e);
            transition: transform 0.3s ease;
        }

        .contact .form-area .btn:hover {
            transform: scale(1.05);
        }

        .is-invalid {
            border-color: #e74c3c !important;
        }

        @media (max-width: 768px) {
            .contact {
                padding-top: 8rem !important;
            }

            .form-area h2 {
                font-size: 2.5rem !important;
            }
        }
    </style>

    @include('layouts_web.footer')
@endsection