{% extends 'base.twig' %}

{% block content %}
	{# Cabeçalho #}
	{% set cabecalho = post.meta('cabecalho') %}
	{% include "componentes/hero.twig" with {
		   links:[
			{
                title: 'Início',
                url: '/'
            },
			{
                title: post.title,
            },
		   ]
	} %}

	<section class="Page-contato">
		<div class="Container">
			<div class="Row _gutters-x _content-between">
				<div class="col-4">
					<div class="cabecalho">
						<h3 class="Title _pb-14">{{post.meta('cabecalho').titulo}}</h3>
						<div class="Body">{{post.meta('cabecalho').texto|wpautop}}</div>
					</div>

					<div class="locais">
						{% for item in post.meta('localizacao') %}
							<div class="locais-container">
								<h4 class="Title _uppercase">{{item.titulo}}</h4>
								{% if item.telefone %}
									<p class="item">
										<span class="icon">
											<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewbox="0 0 18 18" fill="none">
												<g clip-path="url(#clip0_3041_691)">
													<path d="M16.5001 12.6901V14.9401C16.5009 15.1489 16.4581 15.3557 16.3745 15.5471C16.2908 15.7385 16.168 15.9103 16.0141 16.0515C15.8602 16.1927 15.6785 16.3002 15.4806 16.3671C15.2828 16.434 15.0731 16.4589 14.8651 16.4401C12.5572 16.1893 10.3403 15.4007 8.39257 14.1376C6.58044 12.9861 5.04407 11.4497 3.89257 9.63757C2.62506 7.68098 1.83625 5.45332 1.59007 3.13507C1.57133 2.92767 1.59598 2.71864 1.66245 2.52129C1.72892 2.32394 1.83575 2.14259 1.97615 1.98879C2.11654 1.83499 2.28743 1.7121 2.47792 1.62796C2.6684 1.54382 2.87433 1.50027 3.08257 1.50007H5.33257C5.69655 1.49649 6.04942 1.62538 6.32539 1.86272C6.60137 2.10006 6.78163 2.42966 6.83257 2.79007C6.92754 3.51012 7.10366 4.21712 7.35757 4.89757C7.45848 5.16602 7.48032 5.45776 7.4205 5.73823C7.36069 6.01871 7.22172 6.27616 7.02007 6.48007L6.06757 7.43257C7.13524 9.31023 8.68991 10.8649 10.5676 11.9326L11.5201 10.9801C11.724 10.7784 11.9814 10.6395 12.2619 10.5796C12.5424 10.5198 12.8341 10.5417 13.1026 10.6426C13.783 10.8965 14.49 11.0726 15.2101 11.1676C15.5744 11.219 15.9071 11.4025 16.145 11.6832C16.3828 11.9639 16.5092 12.3223 16.5001 12.6901Z" stroke="#4A495C" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
												</g>
												<defs>
													<clipPath id="clip0_3041_691">
														<rect width="18" height="18" fill="white"/>
													</clipPath>
												</defs>
											</svg>
										</span>
										<a href="tel:{{ item.telefone }}">{{item.telefone}}</a>
									{% endif %}
									{% if item.e_mail %}
										<p class="item">
											<span class="icon">
												<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewbox="0 0 18 18" fill="none">
													<path fill-rule="evenodd" clip-rule="evenodd" d="M3.00006 3.75C2.58928 3.75 2.25006 4.08921 2.25006 4.5V13.5C2.25006 13.9108 2.58928 14.25 3.00006 14.25H15.0001C15.4109 14.25 15.7501 13.9108 15.7501 13.5V4.5C15.7501 4.08921 15.4109 3.75 15.0001 3.75H3.00006ZM0.750064 4.5C0.750064 3.26079 1.76085 2.25 3.00006 2.25H15.0001C16.2393 2.25 17.2501 3.26079 17.2501 4.5V13.5C17.2501 14.7392 16.2393 15.75 15.0001 15.75H3.00006C1.76085 15.75 0.750064 14.7392 0.750064 13.5V4.5Z" fill="#4E4D59"/>
													<path fill-rule="evenodd" clip-rule="evenodd" d="M0.88564 4.0699C1.12318 3.73057 1.59082 3.64804 1.93016 3.88558L9.00006 8.83451L16.07 3.88558C16.4093 3.64804 16.877 3.73057 17.1145 4.0699C17.352 4.40924 17.2695 4.87689 16.9302 5.11442L9.43016 10.3644C9.17192 10.5452 8.82821 10.5452 8.56997 10.3644L1.06997 5.11442C0.730631 4.87689 0.648105 4.40924 0.88564 4.0699Z" fill="#4E4D59"/>
												</svg>
											</span>
											<a href="{{ item.e_mail.url }}">{{item.e_mail.title}}</a>
										</p>
									{% endif %}
									{% if item.endereco %}
										<p class="item _endereco">
											<span class="icon">
												<svg xmlns="http://www.w3.org/2000/svg" width="17" height="20" viewbox="0 0 17 20" fill="none">
													<path d="M15.7273 8.36364C15.7273 14.0909 8.36364 19 8.36364 19C8.36364 19 1 14.0909 1 8.36364C1 6.41068 1.77581 4.53771 3.15676 3.15676C4.53771 1.77581 6.41068 1 8.36364 1C10.3166 1 12.1896 1.77581 13.5705 3.15676C14.9515 4.53771 15.7273 6.41068 15.7273 8.36364Z" stroke="#4E4D59" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
													<path d="M8.36373 10.8183C9.71933 10.8183 10.8183 9.71933 10.8183 8.36373C10.8183 7.00812 9.71933 5.90918 8.36373 5.90918C7.00812 5.90918 5.90918 7.00812 5.90918 8.36373C5.90918 9.71933 7.00812 10.8183 8.36373 10.8183Z" stroke="#4E4D59" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
												</svg>
											</span>
											{{item.endereco}}
										</p>
									{% endif %}
								</div>
							{% endfor %}
						</div>
					</div>

					<div class="col-7">
						<form class="Form" action="{{site.url}}/form/contato" method="post" id="form-contato">
							<div class="item-form">
								<label class="label">Nome</label>
								<input type="text" name="nome" required>
							</div>
							<div class="item-form">
								<label class="label">E-mail</label>
								<input type="email" name="email" required>
							</div>
							<div class="Row _gutters-x">
								<div class="col-6">
									<div class="item-form">
										<label class="label">Telefone</label>
										<input type="text" name="telefone" required class="tel">
									</div>
								</div>

								<div class="col-6">
									<div class="item-form">
										<label class="label">Preferência de contato</label>
										<select id="preferencia" name="preferencia" required>
											<option></option>
											<option value="Whatsapp">Whatsapp</option>
											<option value="Telefone">Telefone</option>
											<option value="E-mail">E-mail</option>
										</select>
									</div>
								</div>

							</div>
							<div class="Row _gutters-x">
								<div class="col-6">
									<div class="item-form">
										<label class="label">Empresa</label>
										<input type="text" name="empresa" required>
									</div>
								</div>

								<div class="col-6">
									<div class="item-form">
										<label class="label">Cargo</label>
										<input type="text" name="cargo" required>
									</div>
								</div>

							</div>
							<div class="item-form">
								<label class="label">Mensagem</label>
								<textarea type="text" name="mensagem" required></textarea>
							</div>
							<div class="_w-full">
								<div class="rcp"></div>
								<button class="Button" type="submit">
									<span class="text">Enviar</span>
									<span class="loader"></span>
								</button>
							</div>
						</form>
					</div>
				</div>
			</div>

		</section>
		{% include "componentes/modal-alerta.twig" with {
        title: 'Contato enviado!',
        text: 'Obrigado por entrar em contato! Em breve, nossa equipe retornará sua mensagem.',
        intent: 'success',
    } only %}

		{% include "componentes/modal-alerta.twig" with {
        title: 'Erro no envio!',
        text: 'Houve algum erro no envio do seu contato, por favor tente novamente mais tarde.',
        intent: 'negative',
    } only %}
	{% endblock %}
