{% extends 'base.twig' %}

{% block content %}
	<section class="_pt-md _pb-40 _text-center">
		<div class="Container"><img src="{{asset('images/colaborative/logo.png')}}" width="358" height="80" alt="Logo Colaborative"></div>
	</section>

	{# Solução #}
	{% set solucao = post.meta('solucao') %}
	<section class="Colaborative _solucao">
		<div class="Container">
			{% if solucao.titulo %}
				<h2 class="Title _sm _text-center _pb-md">{{ solucao.titulo }}</h2>
			{% endif %}

			<div class="grid">
				<div class="coluna">
					<div class="subgrid">
						{% for key, item in solucao.itens %}
							{% if key % 2 == 0 %}
								<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 != 0 %}
								<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>

	{% set empresas = post.meta('beneficios_empresas') %}
	<section class="Colaborative _beneficios _bg-gray _pt-xl _pb-xl">
		<div class="Container">
			<div class="Row _gutters-x _content-between">
				<div class="col-6">
					<h2 class="Title _sm">{{empresas.titulo}}</h2>

					<div class="itens">
						{% for item in empresas.itens %}
							<div class="item">
								<h3 class="_flex _items-center"><img src="{{asset('images/colaborative/check-square.svg')}}" alt="Checkmark">{{item.titulo}}</h3>
								<p class="Body _sm">{{item.texto|nl2br}}</p>
							</div>
						{% endfor %}
					</div>
				</div>
				<div class="col-5 image">
					<img src="{{Image(empresas.imagem).src}}" alt="{{empresas.imagem.alt}}">
				</div>
			</div>
		</div>
	</section>

	{% set colaboradores = post.meta('beneficios_colaboradores') %}
	<section class="Colaborative _beneficios _pt-xl _pb-xl">
		<div class="Container">
			<div class="Row _gutters-x _reversed _content-between">
				<div class="col-6">
					<h2 class="Title _sm">{{colaboradores.titulo}}</h2>

					<div class="itens">
						{% for item in colaboradores.itens %}
							<div class="item">
								<h3 class="_flex _items-center"><img src="{{asset('images/colaborative/check-square.svg')}}" alt="Checkmark">{{item.titulo}}</h3>
								<p class="Body _sm">{{item.texto|nl2br}}</p>
							</div>
						{% endfor %}
					</div>
				</div>
				<div class="col-5 image">
					<img src="{{Image(colaboradores.imagem).src}}" alt="{{colaboradores.imagem.alt}}">
				</div>
			</div>
		</div>
	</section>

	{# Acesso #}
	<section class="Colaborative _acesso _pt-md _pb-md _bg-gray">
		<div class="Container">

			<div class="cabecalho">
				<h2 class="Title _sm">Acompanhe tudo de onde estiver</h2>
				<p class="Body">O Informative foi desenvolvido para oferecer praticidade e acesso rápido às informações importantes para produtores, fornecedores e parceiros agrícolas.
				</p>
			</div>

			<div class="Row _gutters-x">
				<div class="col-6 _flex _flex-column">
					<div class="content">
						<h2 class="Title _sm">Pelo navegador</h2>
						<p class="Body">Acesse a plataforma diretamente pelo navegador do seu computador, seja em casa ou no escritório, com conexão à internet. Basta entrar no site, fazer login e ter acesso a todos os recursos disponíveis.</p>
						<a href="{{ option('links_colaborative').aplicacao }}" target="_blank" class="Button _black">Acessar portal web</a>
					</div>

					<img class="image" src="{{asset('images/colaborative/portal-web.png')}}" alt="Notebook">
				</div>
				<div class="col-6 _flex _flex-column">
					<div class="content">
						<h2 class="Title _sm">Pelo aplicativo</h2>
						<p class="Body">Com o aplicativo do Colaborative, você pode acessar suas informações a qualquer hora e em qualquer lugar, diretamente do seu celular Android ou iPhone. Baixe o app, faça login e aproveite todas as funcionalidades na palma da sua mão.</p>
						<div class="links _flex _items-center">
							<a href="{{option('links_colaborative').google_play}}" target="_blank"><img src="{{asset('images/google-play.png')}}" alt="Google play"></a>
							<a href="{{option('links_colaborative').apple_store}}" target="_blank"><img src="{{asset('images/app-store.png')}}" alt="App store"></a>
						</div>
					</div>

					<img class="image" src="{{asset('images/colaborative/app.png')}}" alt="Celular">
				</div>
			</div>
		</div>
	</section>
{% endblock %}