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

{% block title %}Contato — {{ site.schoolName }}{% endblock %}
{% block meta_description %}Fale com a secretaria do Colégio Mônaco em Votorantim: telefone {{ site.phone }}, WhatsApp e formulário para matrículas e visitas.{% endblock %}

{% block body %}
{% set phoneHref = site.phone|replace({' ': '', '(': '', ')': '', '-': ''}) %}
{% set mapQuery = (site.address ~ ', ' ~ site.city ~ ' ' ~ site.cep)|url_encode %}
{% set mapSrc = site.mapEmbed %}
{% if mapSrc and 'maps/embed' not in mapSrc and 'maps.google.com' not in mapSrc %}
    {% set mapSrc = 'https://maps.google.com/maps?q=' ~ mapQuery ~ '&hl=pt-BR&z=16&output=embed' %}
{% endif %}

<section class="page-hero">
    <div class="wrap">
        <p class="eyebrow">Secretaria</p>
        <h1>Contato</h1>
        <p class="lead">Matrículas, visitas e o dia a dia da escola. A secretaria responde em horário comercial.</p>
    </div>
</section>

<div class="wrap contact">
    <div class="contact-channels">
        <a class="contact-channel" href="https://www.google.com/maps/search/?api=1&query={{ mapQuery }}" target="_blank" rel="noopener">
            <span class="contact-channel__icon" aria-hidden="true"><i class="fa-solid fa-location-dot"></i></span>
            <span>
                <strong>Endereço</strong>
                <span>{{ site.address }}<br>{{ site.city }}</span>
            </span>
        </a>
        <a class="contact-channel" href="tel:{{ phoneHref }}" data-analytics="phone" data-analytics-location="contact">
            <span class="contact-channel__icon" aria-hidden="true"><i class="fa-solid fa-phone"></i></span>
            <span>
                <strong>Telefone</strong>
                <span>{{ site.phone }}</span>
            </span>
        </a>
        <a class="contact-channel" href="mailto:{{ site.email }}" data-analytics="email" data-analytics-location="contact">
            <span class="contact-channel__icon" aria-hidden="true"><i class="fa-solid fa-envelope"></i></span>
            <span>
                <strong>E-mail</strong>
                <span>{{ site.email|split('@')|first }}@<wbr>{{ site.email|split('@')|last }}</span>
            </span>
        </a>
        <a class="contact-channel contact-channel--whatsapp" href="{{ site.whatsappLink }}" target="_blank" rel="noopener" data-analytics="whatsapp" data-analytics-location="contact">
            <span class="contact-channel__icon" aria-hidden="true"><i class="fa-brands fa-whatsapp"></i></span>
            <span>
                <strong>WhatsApp</strong>
                <span>Falar com a secretaria</span>
            </span>
        </a>
    </div>

    <div class="contact-layout">
        <section class="contact-card">
            <h2>Envie uma mensagem</h2>
            <p>Conte o que você precisa. Campos com asterisco são obrigatórios.</p>
            {{ form_start(form, {attr: {class: 'contact-form'}}) }}
                {{ form_row(form.name) }}
                {{ form_row(form.email) }}
                {{ form_row(form.phone) }}
                {{ form_row(form.subject) }}
                {{ form_row(form.message) }}
                <button class="btn btn-gold" type="submit" data-analytics="contact-form" data-analytics-location="contact">Enviar mensagem</button>
            {{ form_end(form) }}
        </section>
        {% if mapSrc %}
            <section class="contact-map" aria-label="Mapa do colégio">
                <iframe title="Mapa do Colégio Mônaco" src="{{ mapSrc }}" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
            </section>
        {% endif %}
    </div>
</div>
{% endblock %}