{% extends 'base.html.twig' %}

{% block title %}Centro de Pensamiento - Estudiante{% endblock %}

{% block stylesheets %}
    <style>
        *, *::before, *::after {
            box-sizing: border-box;
        }

        html {
            min-height: 100%;
        }

        body {
            margin: 0;
            min-height: 100vh;
            font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
            background: linear-gradient(180deg, #F6FCFF 0%, #FFFFFF 40%, #E8F3FF 100%);
            color: #163E75;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 24px;
        }

        .page-shell {
            width: min(560px, 100%);
            max-width: 560px;
            padding: 16px;
            margin: 0 auto;
        }

        .phone-card {
            width: 100%;
            position: relative;
            background: #ffffff;
            border: 1px solid rgba(33, 60, 144, 0.1);
            border-radius: 40px;
            box-shadow: 0 30px 80px rgba(33, 60, 144, 0.12);
            overflow: hidden;
        }

        .phone-frame {
            padding: 24px 20px 28px;
        }

        .hero-header {
            display: grid;
            gap: 18px;
            padding-bottom: 18px;
        }

        .logo-row {
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .logo-mark {
            width: 48px;
            height: 48px;
            flex-shrink: 0;
            border-radius: 16px;
            background: radial-gradient(circle at top left, #1A3070 0%, #213C90 100%);
            display: grid;
            place-items: center;
            color: #ffffff;
            font-weight: 800;
            font-size: 1.2rem;
        }

        .logo-text {
            display: grid;
            gap: 4px;
        }

        .logo-text strong {
            font-size: 1rem;
            letter-spacing: -0.03em;
        }

        .logo-text small {
            color: #556A85;
            font-size: 0.82rem;
        }

        .hero-copy {
            display: grid;
            gap: 8px;
        }

        .hero-copy .eyebrow {
            display: inline-block;
            padding: 8px 14px;
            background: #F0F4F9;
            border-radius: 8px;
            color: #213C90;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.18em;
            font-size: 0.86rem;
        }

        .hero-copy h1 {
            margin: 0;
            font-size: clamp(2rem, 3.2vw, 2.6rem);
            line-height: 1.05;
            letter-spacing: -0.04em;
            color: #0F255B;
        }

        .hero-copy h1 span {
            display: block;
        }

        .highlight {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 0 10px;
            border-radius: 999px;
            background: #FFCC00;
            color: #213C90;
        }

        .cover-panel {
            display: grid;
            grid-template-columns: 1fr;
            gap: 0;
            margin: 0 -24px 28px -24px;
            padding: 0;
            border-radius: 0;
            background: transparent;
            box-shadow: none;
        }

        .cover-card {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0;
        }

        .cover-image {
            width: 100%;
            height: 280px;
            border-radius: 0;
            background: #ffffff;
            position: relative;
            overflow: hidden;
            box-shadow: 0 8px 24px rgba(33, 60, 144, 0.15);
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .cover-image img {
            width: 100%;
            height: 100%;
            object-fit: contain;
            border-radius: 0;
        }

        form {
            display: grid;
            gap: 18px;
        }

        .field-group {
            display: grid;
            gap: 10px;
        }

        label {
            font-size: 0.92rem;
            font-weight: 600;
            color: #22355E;
        }

        select,
        input {
            width: 100%;
            border: 1px solid #D6E2F1;
            border-radius: 18px;
            background: #ffffff;
            padding: 16px 18px;
            font-size: 0.96rem;
            color: #172E52;
            outline: none;
            box-shadow: inset 0 1px 2px rgba(22, 50, 97, 0.05);
            transition: border-color 0.2s ease, box-shadow 0.2s ease;
        }

        select:focus,
        input:focus {
            border-color: #213C90;
            box-shadow: 0 0 0 4px rgba(33, 60, 144, 0.12);
        }

        .button-row {
            display: flex;
            justify-content: center;
        }

        .submit-button {
            width: 100%;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            padding: 18px;
            background: linear-gradient(90deg, #1A3070 0%, #213C90 100%);
            border: none;
            border-radius: 18px;
            color: #ffffff;
            text-transform: uppercase;
            font-weight: 700;
            letter-spacing: 0.05em;
            cursor: pointer;
            box-shadow: 0 18px 30px rgba(33, 60, 144, 0.18);
            transition: transform 0.2s ease, filter 0.2s ease;
        }

        .submit-button:hover,
        .submit-button:focus-visible {
            transform: translateY(-1px);
            filter: brightness(1.05);
        }

        .submit-button:disabled {
            opacity: 0.7;
            cursor: wait;
        }

        .submit-button svg {
            width: 18px;
            height: 18px;
            fill: #ffffff;
        }

        .notification {
            display: none;
            padding: 16px 18px;
            border-radius: 16px;
            font-size: 0.94rem;
            text-align: center;
        }

        .notification.success {
            background: #E8F7E7;
            color: #0B6639;
        }

        .notification.error {
            background: #FEE7E7;
            color: #9C1D1D;
        }

        @media (max-width: 600px) {
            body {
                padding: 16px;
            }

            .page-shell {
                padding: 12px;
            }

            .phone-frame {
                padding: 20px 16px 24px;
            }

            .hero-header {
                gap: 16px;
            }

            .cover-panel {
                margin: 0 -20px 28px -20px;
            }

            .cover-image {
                width: 100%;
                height: 240px;
            }

            .cover-image img {
                width: 100%;
                height: 100%;
                object-fit: contain;
            }

            .hero-copy h1 {
                font-size: 2rem;
            }

            .submit-button {
                padding: 16px;
            }
        }
    </style>
{% endblock %}

{% block body %}
    <main class="page-shell">
        <article class="phone-card">
            <section class="phone-frame">
                <div class="hero-header">
                    <div class="logo-row">
                        <div class="logo-mark">J&J</div>
                        <div class="logo-text">
                            <strong>Centro de Pensamiento</strong>
                            <small>El conocimiento puesto a su servicio</small>
                        </div>
                    </div>

                    <div class="cover-panel">
                        <div class="cover-card">
                            <div class="cover-image" aria-hidden="true">
                                <img src="{{ asset('assets/images/cartilla.png') }}" alt="Guía de Tesis" loading="lazy" />
                            </div>
                        </div>
                    </div>

                    <div class="hero-copy">
                        <span class="eyebrow">GRATIS</span>
                        <h1>Guía para crear el título de tu tesis <span class="highlight">ONLINE</span></h1>
                    </div>
                </div>

                <form id="estudiante-form" action="#" method="post">
                    <div class="field-group">
                        <label for="nivelAcademico">Nivel Académico</label>
                        <select id="nivelAcademico" name="nivelAcademico" required>
                            <option value="" disabled selected>Pregrado</option>
                            <option value="1">Pregrado</option>
                            <option value="2">Posgrado</option>
                            <option value="3">Doctorado</option>
                        </select>
                    </div>

                    <div class="field-group">
                        <label for="nombre">¿Cómo te llamas?</label>
                        <input id="nombre" name="nombre" type="text" placeholder="Escribe tu nombre" required />
                    </div>

                    <div class="field-group">
                        <label for="email">¿A qué correo deseas recibir la cartilla?</label>
                        <input id="email" name="email" type="email" placeholder="tu@email.com" required />
                    </div>

                    <div class="field-group">
                        <label for="whatsapp">Número de WhatsApp</label>
                        <input id="whatsapp" name="whatsapp" type="tel" placeholder="+57 300 000 0000" />
                    </div>

                    <div class="notification success" id="successMessage">¡Gracias! Tu solicitud se ha enviado correctamente.</div>
                    <div class="notification error" id="errorMessage">Ocurrió un error. Intenta nuevamente más tarde.</div>

                    <div class="button-row">
                        <button id="submitButton" type="button" class="submit-button">
                            <svg viewBox="0 0 24 24" aria-hidden="true">
                                <path d="M5 12h14M12 5l7 7-7 7" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
                            </svg>
                            Enviar Cartilla
                        </button>
                    </div>
                </form>
            </section>
        </article>
    </main>
{% endblock %}

{% block javascripts %}
    <script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
    <script>
        $(function () {
            var endpoint = "{{ path('cronometros_api_timer') }}";
            var $form = $('#estudiante-form');
            var $success = $('#successMessage');
            var $error = $('#errorMessage');
            var $submit = $('#submitButton');

            function resetAlerts() {
                $success.hide();
                $error.hide();
            }

            function toggleSubmit(disabled) {
                $submit.prop('disabled', disabled);
            }

            $submit.on('click', function (event) {
                event.preventDefault();
                resetAlerts();

                var nivel = $('#nivelAcademico').val() || '1';
                var nombre = $('#nombre').val().trim();
                var email = $('#email').val().trim();
                var movil = $('#whatsapp').val().trim();


                if (!nombre || !email) {
                    $error.text('Por favor completa todos los campos requeridos.').show();
                    return;
                }

                toggleSubmit(true);
                $submit.text('Enviando...');

                $.post(endpoint, {
                    nivelAcademico: nivel,
                    nombre: nombre,
                    email: email,
                    movil: movil
                }, function (response) {
                    if (response && response.status === true) {
                        $success.text('¡Gracias! Tu cartilla se ha enviado correctamente.Revisa tu email').show();
                        $form[0].reset();
                        $('#nivelAcademico').val('1');
                    } else {
                        $error.text('Ocurrió un error en el servidor. Intenta nuevamente.').show();
                    }
                }, 'json')
                .fail(function () {
                    $error.text('No se pudo enviar la solicitud. Revisa tu conexión e intenta otra vez.').show();
                })
                .always(function () {
                    toggleSubmit(false);
                    $submit.text('Enviar Cartilla');
                });
            });
        });
    </script>
{% endblock %}