{% extends 'base.twig' %}

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

	{# Vídeo #}
	{% if cabecalho.url_youtube or cabecalho.imagem %}
		<section class="Para _video">
			{% if cabecalho.url_youtube %}
				<a class="Thumb-video" href="https://www.youtube.com/watch?v={{ cabecalho.url_youtube | youtube_id }}?autoplay=1" rel="modal:video" aria-label="Ver vídeo">
				{% endif %}
				<div class="Thumb _full">
					<img src="{{ Image(cabecalho.imagem).src|resize(1920,544)}}" alt="{{cabecalho.imagem.alt }}">
				</div>
				{% if cabecalho.url_youtube %}
					<span class="Button-play">
						<i class="icon-play"></i>
					</span>
				</a>
			{% endif %}
		</section>
	{% endif %}

	{# Clientes #}
	{% if post.clientes %}
	<section class="Para _clientes">
		<div class="Slider-clientes swiper">
			<div class="swiper-wrapper">
				{% for item in post.clientes %}
					<div class="swiper-slide">
						<div class="cliente">{{ getFileContents(item.imagem) }}</div>
					</div>
				{% endfor %}
			</div>
		</div>
	</section>
	{% endif %}
	
	{# Beneficios #}
	{% set beneficios = post.meta('beneficios') %}
	<section class="Para _beneficios _pt-md _pb-md">
		<div class="Container">
			<div class="Row _content-between">
				<div class="col-8 _flex _flex-column _space-16">
					<h2 class="Title _sm">{{beneficios.titulo}}</h2>
					<p class="Body">{{beneficios.texto|nl2br}}</p>
				</div>

				<div class="Slider-navigation  _flex _items-right">
					<button class="btn-prev button-navigation" aria-label="Anterior">
						<i class="icon-left"></i>
					</button>
					<button class="btn-next button-navigation" aria-label="Próximo">
						<i class="icon-right"></i>
					</button>
				</div>
			</div>
			<div class="Slider-beneficios swiper">
				<div class="swiper-wrapper">
					{% for item in beneficios.itens %}
						<div class="swiper-slide">
							<div class="card-beneficio">
								<img src="{{Image(item.imagem).src}}" alt="{{site.title}} {{item.imagem.alt}}">

								<div>
									<h3 class="Title _sm">{{item.titulo}}</h3>
									<div class="Body">{{item.texto|wpautop}}</div>
								</div>
							</div>
						</div>
					{% endfor %}
				</div>
				<div class="swiper-pagination-beneficios Slider-progress"></div>
			</div>
		</div>
	</section>

	{# Demonstração #}
	{% set demonstracao = post.meta('demonstracao') %}
	<section class="Para _demonstracao">
		<div class="Container _flex _flex-column _items-center ">
			{% if demonstracao.titulo %}
				<h2 class="Title _text-white _text-center">{{demonstracao.titulo}}</h2>
			{% endif %}
			{% if demonstracao.botao %}
				<a href="{{demonstracao.botao.url}}" {% if demonstracao.botao.target %} target="_blank" {% endif %} class="Button _black">{{demonstracao.botao.title}}</a>
			{% endif %}
		</div>
	</section>

	{# Diferenciais #}
	{% set diferenciais = post.meta('diferenciais') %}
	<section class="_bg-gray _pt-md _pb-md Para _diferenciais">
		<div class="Container">
			<h3 class="Title _text-center _sm _pb-40">{{diferenciais.titulo}}</h3>
			<div class="Row _gutters-x _gutters-y">
				{% for card in diferenciais.itens %}
					<div class="col-4 diferencial">
						<div class="content-icon _flex _flex-column">
							{% if card.imagem %}
								<img class="icon" src="{{ Image(card.imagem).src }} " alt="{{ card.imagem.alt }}">
							{% endif %}
						</div>
						<div class="text _flex _flex-column">
							<h3 class="Title _xs">{{card.titulo}}</h3>
							<div class="Body _sm">{{card.texto|nl2br}}</div>
						</div>
					</div>

				{% endfor %}
			</div>
		</div>
	</section>

	{# Funcionalidades #}
	{% set funcionalidades = post.meta('funcionalidades') %}
	{% include "secoes/secao-funcionalidades.twig" %}

	{# FAQ #}
	<section class="_pt-md _pb-md _bg-gray">
		<div class="Container">
			<h3 class="Title _sm _pb-48">{{post.meta('faq').titulo}}</h3>

			{% include "componentes/lista-expansivel.twig" with {items: faq} only %}
		</div>
	</section>
{% endblock %}