{% load css_tags %}{% block_css 'enap_designsystem/blocks/form_contato.css' %}
{% load wagtailimages_tags %}
{% block content %}

<style>
    .form-contato-component {
        --primary: #5e17eb; /* Valor padrão, será sobrescrito pelo valor definido no bloco */
        --primary-light: color-mix(in srgb, var(--primary) 70%, white);
        --primary-dark: color-mix(in srgb, var(--primary) 70%, black);
        --accent: #ff5a5f;
        --text: #192342;
        --text-light: #666a82;
        --bg: #f8f9ff;
        --white: #ffffff;
        --gray-100: #f1f5f9;
        --gray-200: #e2e8f0;
        --gray-300: #cbd5e1;
        --shadow-sm: 0 4px 6px rgba(0, 0, 0, 0.02);
        --shadow: 0 10px 15px rgba(0, 0, 0, 0.04);
        --shadow-lg: 0 20px 25px rgba(0, 0, 0, 0.05);
        --radius-sm: 8px;
        --radius: 12px;
        --radius-lg: 20px;
        --radius-full: 9999px;
        --transition: all 0.3s ease;
    }

    .form-contato-component .page-header {
        background-color: color-mix(in srgb, var(--primary) 5%, transparent);
    }

    .form-contato-component .page-subtitle {
        color: var(--text-light);
    }

    .form-contato-component .contact-form {
        background-color: var(--white);
        border-radius: var(--radius-lg);
        padding: 2.5rem;
        box-shadow: var(--shadow);
    }

    .form-contato-component .contact-info {
        background-color: var(--white);
        border-radius: var(--radius-lg);
        padding: 2.5rem;
        box-shadow: var(--shadow);
    }

    .form-contato-component .form-title {
        color: var(--primary);
    }

    .form-contato-component .form-label::after {
        color: var(--accent);
    }

    .form-contato-component .form-input, 
    .form-contato-component .form-textarea {
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-sm);
    background-color: var(--white);
    color: var(--text);
    transition: var(--transition);
    }

    .form-contato-component .form-input:focus, 
    .form-contato-component .form-textarea:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 10%, transparent);
    }

    .form-contato-component .form-checkbox input {
    accent-color: var(--primary);
    }

    .form-contato-component .checkbox-label {
    color: var(--text-light);
    }

    .form-contato-component .btn {
    background-color: var(--primary);
    color: var(--white);
    padding: 0.75rem 2rem;
    border-radius: var(--radius-full);
    transition: var(--transition);
    }


    .form-contato-component .contact-icon {
    color: var(--primary);
    }

    .form-contato-component .contact-text {
    color: var(--text);
    }

    .form-contato-component .contact-text strong {
    color: var(--text);
    }

    .form-contato-component .map-container {
    border-radius: var(--radius);
    }
    .form-contato-component .map-link {
    color: var(--primary);
    }

    .form-contato-component .newsletter-section {
    background: linear-gradient(135deg, 
        color-mix(in srgb, var(--primary) 5%, transparent) 0%, 
        color-mix(in srgb, var(--accent) 5%, transparent) 100%);
    }

    .form-contato-component .newsletter-title {
    color: var(--primary);
    }

    .form-contato-component .newsletter-input {
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-full) 0 0 var(--radius-full);
    background-color: var(--white);
    color: var(--text);
    }

    .form-contato-component .newsletter-input:focus {
    border-color: var(--primary);
    }


    .form-contato-component .newsletter-btn {
    background-color: var(--primary);
    color: var(--white);
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: 0 var(--radius-full) var(--radius-full) 0;
    font-weight: 500;
    cursor: pointer;
    transition: var(--transition);
    }

    .form-contato-component .newsletter-btn:hover {
    background-color: var(--primary-dark);
    }

    .form-contato-component .newsletter-info {
    font-size: 0.9rem;
    color: var(--text-light);
    margin-top: 1.5rem;
    }


    .form-contato-component .newsletter-checkbox {
    width: 16px;
    height: 16px;
    accent-color: var(--primary);
    }

    .form-contato-component .newsletter-label {
    font-size: 0.95rem;
    color: var(--text);
    }
</style>
<div class="form-contato-component" style="--primary: {{ value.cor_primaria }}">
    <div class="page-header">
        <div class="container">
            <h1 class="page-title"><span>{{ value.titulo}}</span></h1>
            {% if value.subtitulo %}
                <p class="page-subtitle">{{ value.subtitulo }}</p>
            {% endif %}
        </div>
    </div>

    <div class="container">
        <div class="contact-section">
            <div class="contact-form">
                <h2 class="form-title">{{ value.titulo_formulario }}</h2>
                {% if value.mostrar_texto_obrigatorio %}
                    <p class="required-notice">{{ value.texto_obrigatorio }}</p>
                {% endif %}
                
                <form>
                    <div class="form-group">
                        <label for="name" class="form-label">Nome</label>
                        <input type="text" id="name" class="form-input" required>
                    </div>
                    
                    <div class="form-group">
                        <label for="email" class="form-label">E-mail</label>
                        <input type="email" id="email" class="form-input" required>
                    </div>
                    
                    <div class="form-group">
                        <label for="subject" class="form-label">Assunto</label>
                        <input type="text" id="subject" class="form-input" required>
                    </div>
                    
                    <div class="form-group">
                        <label for="message" class="form-label">Mensagem</label>
                        <textarea id="message" class="form-textarea" required></textarea>
                    </div>
                    
                    {% if value.mostrar_checkbox_copia %}
                    <div class="form-checkbox">
                        <input type="checkbox" id="copy">
                        <label for="copy" class="checkbox-label">{{ value.texto_checkbox_copia }}</label>
                    </div>
                    {% endif %}
                    
                    <button type="submit" class="btn btn-submit">
                        {{ value.texto_botao }}
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                            <path d="M15.964.686a.5.5 0 0 0-.65-.65L.767 5.855H.766l-.452.18a.5.5 0 0 0-.082.887l.41.26.001.002 4.995 3.178 3.178 4.995.002.002.26.41a.5.5 0 0 0 .886-.083l6-15Zm-1.833 1.89L6.637 10.07l-.215-.338a.5.5 0 0 0-.154-.154l-.338-.215 7.494-7.494 1.178-.471-.47 1.178Z"/>
                        </svg>
                    </button>
                </form>
            </div>
            
            <div class="contact-info">
                <h2 class="contact-info-title">{{ value.titulo_informacoes }}</h2>
                
                <ul class="contact-info-list">
                    {% if value.endereco %}
                    <li class="contact-info-item">
                        <div class="contact-icon">
                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" />
                            </svg>
                        </div>
                        <div class="contact-text">
                            {% if value.endereco_titulo %}<strong>{{ value.endereco_titulo }}</strong>{% endif %}
                            {{ value.endereco }}
                        </div>
                    </li>
                    {% endif %}
                    
                    {% if value.horario %}
                    <li class="contact-info-item">
                        <div class="contact-icon">
                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
                            </svg>
                        </div>
                        <div class="contact-text">
                            {% if value.horario_titulo %}<strong>{{ value.horario_titulo }}</strong>{% endif %}
                            {{ value.horario }}
                        </div>
                    </li>
                    {% endif %}
                    
                    {% if value.telefone %}
                    <li class="contact-info-item">
                        <div class="contact-icon">
                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" />
                            </svg>
                        </div>
                        <div class="contact-text">
                            {% if value.telefone_titulo %}<strong>{{ value.telefone_titulo }}</strong>{% endif %}
                            {{ value.telefone }}
                        </div>
                    </li>
                    {% endif %}
                    
                    {% if value.email %}
                    <li class="contact-info-item">
                        <div class="contact-icon">
                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
                            </svg>
                        </div>
                        <div class="contact-text">
                            {% if value.email_titulo %}<strong>{{ value.email_titulo }}</strong>{% endif %}
                            {{ value.email }}
                        </div>
                    </li>
                    {% endif %}
                </ul>
                
                {% if value.mostrar_mapa %}
                <div class="map-container">
                    {% if value.imagem_mapa %}
                        {% image value.imagem_mapa fill-600x250 class="map-image" %}
                    {% else %}
                        <img src="/static/images/placeholder-map.jpg" alt="Mapa de localização" class="map-image">
                    {% endif %}
                </div>
                
                {% if value.link_mapa %}
                <a href="{{ value.link_mapa }}" target="_blank" class="map-link">
                    {{ value.texto_link_mapa }}
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                        <path fill-rule="evenodd" d="M8 16s6-5.686 6-10A6 6 0 0 0 2 6c0 4.314 6 10 6 10zm0-7a3 3 0 1 1 0-6 3 3 0 0 1 0 6z"/>
                    </svg>
                </a>
                {% endif %}
                {% endif %}
            </div>
        </div>
    </div>
</div>
{% endblock %}