{% extends 'base.twig' %}

{% block content %}
	{# Banner #}
	{% set item = post.meta('banner') %}
	{% include "componentes/banner-video.twig" %}

	{# Sobre #}
	{% set sobre = post.meta('sobre') %}
	<section class="Home _sobre">
		<div class="Container">
			<div class="Row _gutters-x _items-center _content-between">
				<div class="col-4">
					{% if sobre.titulo %}
						<h2 class="Title _lg">{{ sobre.titulo|span }}</h2>
					{% endif %}
				</div>
				<div class="col-6 _flex _flex-column _space-40">
					<div class="Body _text-light">
						{{ sobre.texto|wpautop }}
					</div>

					{% if sobre.botao %}
						<a href="{{sobre.botao.url}}" {% if sobre.botao.target %} target="_blank" {% endif %} class="Button _outline">{{sobre.botao.title}}</a>
					{% endif %}
				</div>
			</div>
		</div>
	</section>

	{# Solução #}
	{% set solucao = post.meta('solucao') %}
	<section class="Home _solucao">
		<div class="Container">
			{% if solucao.titulo %}
				<h2 class="Title _text-center _strong _pb-md">{{ solucao.titulo|span }}</h2>
			{% endif %}
			<div class="grid">
				<div class="coluna">
					<div class="subgrid">
						{% for key, item in solucao.itens %}
							{% if key == 0 or key == 1 %}
								<div class="card _flex _flex-column">
									<img src="{{ Image(item.icone).src }}" alt="{{item.icone.alt}}">
									<div>
										<h3 class="Title _xs">{{item.titulo}}</h3>
										<p class="Body _sm">{{item.texto}}</p>
									</div>
								</div>
							{% endif %}
						{% endfor %}
					</div>
				</div>
				<div class="coluna _central">
					<div class="card"><img src="{{ Image(solucao.imagem).src }}" alt="{{ solucao.imagem.alt }}"></div>
				</div>
				<div class="coluna">
					<div class="subgrid">
						{% for key, item in solucao.itens %}
							{% if key == 2 or key == 3 %}
								<div class="card _flex _flex-column">
									<img src="{{ Image(item.icone).src }}" alt="{{item.icone.alt}}">
									<div>
										<h3 class="Title _xs">{{item.titulo}}</h3>
										<p class="Body _sm">{{item.texto}}</p>
									</div>
								</div>
							{% endif %}
						{% endfor %}
					</div>
				</div>
			</div>
		</div>
	</section>

	{# Números #}
	{% set numeros = post.meta('numeros') %}
	{% if numeros.itens|length > 0 %}
		<section class="Home _numeros">
			<div class="Container">
				<div class="Row _gutters-x _items-center">
					<div class="col-6">
						<h2 class="Title _lg _strong">{{numeros.titulo}}</h2>
					</div>
					<div class="col-6">
						<div class="Body">{{numeros.texto|nl2br}}</div>
					</div>
				</div>


				<div class="itens Row _gutters-x _pt-md">
					{% for item in numeros.itens %}
						<div class="item col-3">
							<span>{{item.numero}}</span>
							<p>{{item.texto}}</p>
						</div>
					{% endfor %}
				</div>
			</div>
		</section>
	{% endif %}

	{# Clientes #}
	{% set clientes = post.meta('clientes') %}
	{% if clientes|length > 0 %}
		<section class="Home _clientes">
			<div class="Container">
				<h2>{{clientes.titulo}}</h2>

				<div class="grid-clientes">
					{% for item in clientes.clientes %}
						<div class="cliente">
							{{ getFileContents(item.imagem) }}
						</div>
					{% endfor %}
				</div>
			</div>
		</section>
	{% endif %}

	{# Produtores e empresas #}
	{% set empresas = post.meta('empresas') %}
	{% set produtores = post.meta('produtores') %}
	<section class="Home _empresas">
		<div class="Container _flex _flex-column">
			<div class="Row _gutters-x">
				<div class="col-5">
					{% if empresas.headline %}
						<span class="Headline">{{empresas.headline}}</span>
					{% endif %}
					{% if empresas.titulo %}
						<h2 class="Title _sm _pb-40 _pt-24 _text-purple-dark _strong">{{empresas.titulo}}</h2>
					{% endif %}
					{% if empresas.botao %}
						<a href="{{empresas.botao.url}}" class="Button" {% if empresas.botao.target %} target="_target" {% endif %}>{{empresas.botao.title}}</a>
					{% endif %}

				</div>
				<div class="col-6"><img class="Image" src="{{Image(empresas.imagem).src}}" alt="{{empresas.imagem.alt}}" width="{{empresas.imagem.width}}" height="{{empresas.imagem.height}}"></div>

			</div>
			<div class="Row  _reversed _gutters-x">
				<div class="col-5">
					{% if produtores.headline %}
						<span class="Headline">{{produtores.headline}}</span>
					{% endif %}
					{% if produtores.titulo %}
						<h2 class="Title _sm _pb-40 _pt-24 _text-purple-dark _strong">{{produtores.titulo}}</h2>
					{% endif %}
					{% if produtores.botao %}
						<a href="{{produtores.botao.url}}" class="Button" {% if produtores.botao.target %} target="_target" {% endif %}>{{produtores.botao.title}}</a>
					{% endif %}

				</div>
				<div class="col-6"><img class="Image" src="{{Image(produtores.imagem).src}}" alt="{{produtores.imagem.alt}}" width="{{produtores.imagem.width}}" height="{{produtores.imagem.height}}"></div>
			</div>
		</div>
	</section>

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

			<div class="Slider-segmentos swiper">
				<div class="swiper-navigation Slider-navigation _flex _items-center _content-right _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 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>
	</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 %}

{% endblock %}