{# Contact Section - Brand Kit v2.0 #}
<section id="contact" class="contact">
    <div class="wrap reveal">
        <h2 class="section-title">{{ 'contact.title'|trans }} <em>{{ 'contact.title_em'|trans }}</em></h2>
        <div class="contact__content">
            <div class="contact__intro">
                <p class="contact__intro-text">
                    {{ 'contact.intro'|trans }}
                </p>
                <p class="contact__intro-note">
                    {{ 'contact.intro_note'|trans|raw }} 
                    <a href="https://www.linkedin.com/in/saulmoralespa/" target="_blank" rel="noopener">{{ 'contact.intro_link'|trans }}</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',
                    'data-error-name': 'contact.form.error_name'|trans,
                    'data-error-email': 'contact.form.error_email'|trans,
                    'data-error-message': 'contact.form.error_message'|trans,
                    'data-error-network': 'contact.form.error_network'|trans
                }
            }) }}
                <div class="contact__form-grid">
                    {# Name Field #}
                    <div class="contact__form-group">
                        {{ form_label(contact_form.name, 'contact.form.name'|trans, {
                            'label_attr': {'class': 'contact__label'}
                        }) }}
                        {{ form_widget(contact_form.name, {
                            'attr': {
                                'class': 'contact__input',
                                'placeholder': 'contact.form.name_placeholder'|trans
                            }
                        }) }}
                        {{ form_errors(contact_form.name, {
                            'attr': {'class': 'contact__error'}
                        }) }}
                    </div>
                    {# Email Field #}
                    <div class="contact__form-group">
                        {{ form_label(contact_form.email, 'contact.form.email'|trans, {
                            'label_attr': {'class': 'contact__label'}
                        }) }}
                        {{ form_widget(contact_form.email, {
                            'attr': {
                                'class': 'contact__input',
                                'placeholder': 'contact.form.email_placeholder'|trans
                            }
                        }) }}
                        {{ 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, 'contact.form.message'|trans, {
                        'label_attr': {'class': 'contact__label'}
                    }) }}
                    {{ form_widget(contact_form.message, {
                        'attr': {
                            'class': 'contact__textarea',
                            'placeholder': 'contact.form.message_placeholder'|trans,
                            'rows': 6
                        }
                    }) }}
                    <p class="contact__hint">{{ 'contact.form.hint'|trans }}</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">{{ 'contact.form.submit'|trans }}</span>
                        <span class="contact__submit-loader" style="display: none;">
                            <span class="spinner"></span> {{ 'contact.form.sending'|trans }}
                        </span>
                    </button>
                    <p class="contact__privacy">
                        {{ 'contact.form.privacy'|trans }}
                    </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>{{ 'contact.info.location'|trans }}</strong>
                        <p>{{ 'contact.info.location_text'|trans }}</p>
                    </div>
                </div>
                <div class="contact__info-item">
                    <span class="contact__info-icon">💼</span>
                    <div class="contact__info-content">
                        <strong>{{ 'contact.info.specialties'|trans }}</strong>
                        <p>{{ 'contact.info.specialties_text'|trans }}</p>
                    </div>
                </div>
                <div class="contact__info-item">
                    <span class="contact__info-icon">⏱️</span>
                    <div class="contact__info-content">
                        <strong>{{ 'contact.info.availability'|trans }}</strong>
                        <p>{{ 'contact.info.availability_text'|trans }}</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>