{% 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 }}" 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 %}

	{# Beneficios #}
	{% set beneficios = post.meta('beneficios') %}
	<section class="Para _produtor _beneficios _pt-md _pb-md _bg-gray">
		<div class="Container">
			<div class="cabecalho _pb-40">
				<h2 class="Title _sm _pb-16">{{beneficios.titulo}}</h2>
				<p class="Body">{{beneficios.texto|nl2br}}</p>
			</div>

			<div class="Row _gutters-x _gutters-y">
				{% for item in beneficios.itens %}
					<div class="col-6">
						<div class="item">
							<div class="image"><img src="{{Image(item.icone).src}}" alt="{{item.icone.alt}}"></div>
							<div class="content">
								{% if item.titulo %}
									<h3 class="Title">{{item.titulo}}</h3>
								{% endif %}
								{% if item.texto %}
									<div class="Body _sm">{{item.texto}}</div>
								{% endif %}
							</div>
						</div>
					</div>
				{% endfor %}
			</div>
		</div>
	</section>

	{# Funcionalidades #}
	<section class="Para _produtor _funcionalidades _pt-md _pb-md">
		<div class="Container">
			<div class="grid Row _gutters-y-lg _gutters-x">
				{% set linha = 1 %}
				{% for key, item in post.meta('funcionalidades') %}
					{% if key == 0 %}
						<div class="first col-12 _bg-gradient">
							<div class="content">
								{% if item.headline %}
									<span class="Headline _text-white">{{item.headline}}</span>
								{% endif %}
								{% if item.titulo %}
									<h2 class="Title _text-white">{{item.titulo}}</h2>
								{% endif %}
								{% if item.texto %}
									<p class="Body">{{item.texto|nl2br}}</p>
								{% endif %}
							</div>

							<img src="{{Image(item.imagem).src}}" alt="{{item.imagem.alt}}">
						</div>
					{% else %}
						{% if (linha % 2 != 0 and key % 2 == 0 ) or (linha % 2 == 0 and key % 2 != 0) %}
							<div class="item col-5">
								<div class="content">
									{% if item.headline %}
										<span class="Headline">{{item.headline}}</span>
									{% endif %}
									{% if item.titulo %}
										<h2 class="Title _xs">{{item.titulo}}</h2>
									{% endif %}
									{% if item.texto %}
										<p class="Body">{{item.texto|nl2br}}</p>
									{% endif %}
								</div>

								<img src="{{Image(item.imagem).src}}" alt="{{item.imagem.alt}}">
							</div>

						{% elseif (linha % 2 == 0 and key % 2 == 0 ) or (linha % 2 != 0 and key % 2 != 0) %}
							<div class="item col-7">
								<div class="content">
									{% if item.headline %}
										<span class="Headline">{{item.headline}}</span>
									{% endif %}
									{% if item.titulo %}
										<h2 class="Title _xs">{{item.titulo}}</h2>
									{% endif %}
									{% if item.texto %}
										<p class="Body">{{item.texto|nl2br}}</p>
									{% endif %}
								</div>

								<img src="{{Image(item.imagem).src}}" alt="{{item.imagem.alt}}">
							</div>
						{% endif %}
					{% endif %}
					{% if key % 2 == 0 %}
						{% set linha = linha + 1 %}
					{% endif %}
				{% endfor %}
			</div>


		</div>
	</section>

	{# Culturas #}
	<section class="Secao-segmentos _bg-gray">
		<div class="Container">
			<div class="Row _content-between">
				<dic class="col-5">
					<h2 class="Title _sm">{{post.meta('culturas').titulo}}</h2>
				</dic>
				<div class="col-6">
					<div class="Body">{{post.meta('culturas').texto|nl2br}}</div>
				</div>
			</div>

			<div class="Slider-segmentos swiper">
				<div class="swiper-wrapper">
					{% for item in culturas %}
						<div class="swiper-slide">
							<div class="_w-full">
								{% include "componentes/card-segmento.twig" %}
							</div>
						</div>
					{% endfor %}

				</div>

				<div class="swiper-pagination-culturas Slider-progress"></div>
			</div>

			<div class="_text-center _pt-40">
				<a href="{{site.url}}/culturas" class="Button _tertiary">Ver todos os segmentos</a>
			</div>
		</div>
	</section>

	{# Depoimentos #}
	{% set depoimentos = post.meta('depoimentos') %}
	{% if depoimentos.destaques > 0 %}
		<section class="Home _depoimentos">
			<div class="Container">
				<div class=" Slider-depoimentos swiper-depoimentos swiper">
					<div class="Secao-depoimento-header _flex _content-between _items-center">
						<h3 class="Title _md">{{ depoimentos.titulo }}</h3>
						<div class="swiper-navigation Slider-navigation _items-right">
							<button class="button-prev button-navigation" aria-label="Anterior">
								<i class="icon-left"></i>
							</button>
							<button class=" button-next button-navigation" aria-label="Próximo">
								<i class="icon-right"></i>
							</button>
						</div>
					</div>

					<div class="swiper-wrapper">
						{% for depoimento in depoimentos.destaques %}
							<div class="swiper-slide">
								<div>
									{% include "componentes/card-depoimento.twig" %}
								</div>
							</div>
						{% endfor %}
					</div>
					<div class="swiper-pagination-depoimentos Slider-progress"></div>
				</div>
			</div>
		</section>
	{% endif %}

	{# CTA #}
	{% set cadastro = post.meta('cadastro') %}
	{% set app = post.meta('app') %}
	<section class="Para _CTA _pt-md _pb-md">
		<div class="Container">
			<div class="cadastro">
				<h2 class="Title _sm">{{cadastro.titulo|span}}</h2>
				<a href="{{cadastro.botao.url}}" {% if cadastro.botao.target %} target="_blank" {% endif %} class="Button _black">{{cadastro.botao.title}}</a>
			</div>

			<div class="app _flex">
				<div class="content _flex _flex-column">
					<div>
						<h2 class="Title">{{app.titulo}}</h2>
						<p class="Body">{{app.texto|nl2br}}</p>
					</div>

					<div class="links _flex">
						<a href="{{option('links').google_play}}" target="_blank"><img src="{{asset('images/google-play.png')}}" alt="Google play"></a>
						<a href="{{option('links').apple_store}}" target="_blank"><img src="{{asset('images/app-store.png')}}" alt="App store"></a>
					</div>
				</div>

				<div class="image"><img src="{{Image(app.imagem).src}}" alt="{{app.imagem.alt}}"></div>
			</div>
		</div>
	</section>
{% endblock %}