{# Contact Section - Brand Kit v2.0 #}
<section id="contact" class="contact">
    <div class="wrap reveal">
        <h2 class="section-title">Hablemos de tu <em>proyecto</em></h2>
        <div class="contact__content">
            <div class="contact__intro">
                <p class="contact__intro-text">
                    ¿Tienes un proyecto de e-commerce, automatización o integración con IA? 
                    Charlemos sobre cómo puedo ayudarte.
                </p>
                <p class="contact__intro-note">
                    <strong>Respondo en 24 horas.</strong> Para proyectos urgentes, contáctame por 
                    <a href="https://www.linkedin.com/in/saulmoralespa/" target="_blank" rel="noopener">LinkedIn</a>.
                </p>
            </div>
            {# Success/Error Messages #}
            <div id="contact-message" class="contact__message" style="display: none;"></div>
            {{ form_start(contact_form, {
                'action': path('new_message'),
                'method': 'POST',
                'attr': {
                    'id': 'contact-form',
                    'class': 'contact__form',
                    'novalidate': 'novalidate'
                }
            }) }}
                <div class="contact__form-grid">
                    {# Name Field #}
                    <div class="contact__form-group">
                        {{ form_label(contact_form.name, 'Tu nombre', {
                            'label_attr': {'class': 'contact__label'}
                        }) }}
                        {{ form_widget(contact_form.name, {
                            'attr': {
                                'class': 'contact__input',
                                'placeholder': 'Ej: María González'
                            }
                        }) }}
                        {{ form_errors(contact_form.name, {
                            'attr': {'class': 'contact__error'}
                        }) }}
                    </div>
                    {# Email Field #}
                    <div class="contact__form-group">
                        {{ form_label(contact_form.email, 'Tu email', {
                            'label_attr': {'class': 'contact__label'}
                        }) }}
                        {{ form_widget(contact_form.email, {
                            'attr': {
                                'class': 'contact__input',
                                'placeholder': 'tu@email.com'
                            }
                        }) }}
                        {{ form_errors(contact_form.email, {
                            'attr': {'class': 'contact__error'}
                        }) }}
                    </div>
                </div>
                {# Message Field - Full Width #}
                <div class="contact__form-group">
                    {{ form_label(contact_form.message, 'Cuéntame sobre tu proyecto', {
                        'label_attr': {'class': 'contact__label'}
                    }) }}
                    {{ form_widget(contact_form.message, {
                        'attr': {
                            'class': 'contact__textarea',
                            'placeholder': 'Describe brevemente tu proyecto, presupuesto estimado y timeline esperado...',
                            'rows': 6
                        }
                    }) }}
                    <p class="contact__hint">Mínimo 60 caracteres para evitar spam</p>
                    {{ form_errors(contact_form.message, {
                        'attr': {'class': 'contact__error'}
                    }) }}
                </div>
                {# reCAPTCHA v3 (invisible) #}
                <input type="hidden" id="recaptcha-token" name="token_recaptcha" value="">
                {# Submit Button #}
                <div class="contact__form-actions">
                    <button type="submit" class="btn btn--primary contact__submit" id="contact-submit">
                        <span class="contact__submit-text">Enviar Mensaje</span>
                        <span class="contact__submit-loader" style="display: none;">
                            <span class="spinner"></span> Enviando...
                        </span>
                    </button>
                    <p class="contact__privacy">
                        Al enviar, aceptas que responderé por email. 
                        No comparto tu información con terceros.
                    </p>
                </div>

                {# CSRF Token - must be rendered #}
                {{ form_row(contact_form._token) }}

            {{ form_end(contact_form, {'render_rest': false}) }}
            {# Additional Contact Info #}
            <div class="contact__info">
                <div class="contact__info-item">
                    <span class="contact__info-icon">📍</span>
                    <div class="contact__info-content">
                        <strong>Ubicación</strong>
                        <p>El Zulia, Norte de Santander, Colombia</p>
                    </div>
                </div>
                <div class="contact__info-item">
                    <span class="contact__info-icon">💼</span>
                    <div class="contact__info-content">
                        <strong>Especialidades</strong>
                        <p>E-commerce · Integraciones · IA · Automatización</p>
                    </div>
                </div>
                <div class="contact__info-item">
                    <span class="contact__info-icon">⏱️</span>
                    <div class="contact__info-content">
                        <strong>Disponibilidad</strong>
                        <p>Freelance · Remoto · Proyectos a medida</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>