{% extends 'base.twig' %}

{% block content %}
	<section class="Landing-page _cabecalho">
		{% set bg_desktop = asset('images/lp/banner-default.png') %}
		{% set bg_mobile = asset('images/lp/banner-default-mb.png') %}

		{% if post.meta('banner').desktop %}
			{% set bg_desktop = Image(post.meta('banner').desktop).src %}
		{% endif %}

		{% if post.meta('banner').mobile %}
			{% set bg_mobile = Image(post.meta('banner').mobile).src %}
		{% endif %}

		<img class="_bg" src="{{ bg_desktop }}" alt="Banner ilustrativo {{post.title}}" loading="lazy">
		<img class="_bg _mb" src="{{ bg_mobile }}" alt="Banner ilustrativo {{post.title}}" loading="lazy">

		<div class="Container _nrw">
			{% if post.meta.logo %}
				<div class="logo _flex _items-center _content-center" {% if post.meta.logo_type == 'white' %} style="background: {{post.meta.background}}" {% endif %}>
					<img src="{{Image(post.meta.logo).src}}" alt="Logo {{post.title}}" width="{{post.meta.logo.width}}" height="{{post.meta.logo.height}}">
				</div>
			{% endif %}

			<div class="_pt-48 _pb-40">
				{% if post.titulo %}
					<h1 class="Title _sm">{{post.titulo|span}}</h1>
				{% endif %}
				{% if post.texto %}
					<div class="Body _pt-12">{{post.texto|wpautop}}</div>
				{% endif %}
			</div>
			<div class="buttons _flex _space-24">
				<a href="#popup-lp" rel="modal:inline" target="_blank" class="Button ">Clique aqui e faça seu cadastro</a>
				<a href="{{ option('links').aplicacao }}/{{ post.meta('pid_empresa') }}" target="_blank" class="Button _tertiary ">Já tenho cadastro, quero acessar</a>
			</div>
		</div>
	</section>

	<div class="Landing-page _tabs" x-data="MenuClientes()">
		<nav class="menu-itens _hide-mb">
			<ul>
				<span class="underline" x-bind:style="'width:' + underlineWidth + 'px; left:' + underlineLeft + 'px'"></span>
				<li :class="sectionOpen == 'primeiros-passos' ? '_active' : ''" @click="setSection('primeiros-passos')" x-ref="primeiros-passos">Primeiro acesso</li>
				<li :class="sectionOpen == 'relatorios' ? '_active' : ''" @click="setSection('relatorios')" x-ref="relatorios">Meus relatórios</li>
				{% if faq|length > 0 %}
					<li :class="sectionOpen == 'faq' ? '_active' : ''" @click="setSection('faq')" x-ref="faq">Dúvidas frequentes</li>
				{% endif %}
				<li :class="sectionOpen == 'plataformas' ? '_active' : ''" @click="setSection('plataformas')" x-ref="plataformas">Acesso à plataforma</li>
			</ul>
		</nav>

		<div
			class="content-tabs">
			{# Primeiros passos #}
			<div class="section-tab" id="primeiros-passos" :class="sectionOpen == 'primeiros-passos' ? '_open' : ''">
				<div class="header-tab" @click="setAccordion('primeiros-passos')">
					<p>Primeiro acesso</p>
					<i :class="sectionOpen == 'primeiros-passos' ? 'icon-up' : 'icon-down'"></i>
				</div>
				<div class="content-tab primeiros-passos" :class="sectionOpen === 'primeiros-passos' ? '_extraHeigth' : ''" x-ref="container-primeiros-passos" x-bind:style="sectionOpen === 'primeiros-passos' ? 'max-height: ' + $refs['container-primeiros-passos'].scrollHeight + 'px; padding-top: 32px' : '' ">
					<h2 class="Title _sm _pb-40">Siga o passo a passo abaixo para criar sua conta</h2>

					<div class="Row _gutters-x passos">
						<div class="col-4">
							<div class="number _show-mb">1</div>
							<img src="{{asset('images/lp/cadastro.png')}}" alt="Cadastro">
							<div class="item">
								<div class="number _hide-mb">1</div>
								<h3 class="Title">Preencha o formulário</h3>
								<p class="Body _sm">
									<a href="#popup-lp" rel="modal:inline" target="_blank" style="font-weight: bold;">Clique aqui</a>
									e cadastre-se rapidamente informando seu nome, documento, data de nascimento e celular.</p>
							</div>
						</div>
						<div class="col-4">
							<div class="number _show-mb">2</div>
							<img src="{{asset('images/lp/autenticacao.png')}}" alt="Autenticação">
							<div class="item">
								<div class="number _hide-mb">2</div>
								<h3 class="Title">Autenticação segura</h3>
								<p class="Body _sm">Confirme seu número de celular através do código de verificação enviado por SMS.</p>
							</div>
						</div>
						<div class="col-4">
							<div class="number _show-mb">3</div>
							<img src="{{asset('images/lp/seguranca.png')}}" alt="Segurança">
							<div class="item _3">
								<div class="number _hide-mb">3</div>
								<h3 class="Title">Segurança dos seus dados</h3>
								<p class="Body _sm">Crie uma senha segura para proteger seu acesso e manter suas informações confidenciais.</p>
							</div>
						</div>
					</div>

					<div class="cabecalho">
						<h2 class="Title _sm">Veja como é fácil acessar</h2>
						<p class="Body">Siga os passos abaixo para criar sua conta</p>
					</div>
					<div class="video _pt-40">
						<iframe width="100%" height="455px" src="https://www.youtube.com/embed/QHhAqAJmo8o?si=JnqCWGgQlL1lbEVs" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
					</div>
				</div>
			</div>

			{# Relatorios #}
			<section class="section-tab" id="relatorios" :class="sectionOpen == 'relatorios' ? '_open' : ''">
				<div class="header-tab" @click="setAccordion('relatorios')">
					<p>Meus relatórios</p>
					<i :class="sectionOpen == 'relatorios' ? 'icon-up' : 'icon-down'"></i>
				</div>
				<div class="content-tab relatorios" :class="sectionOpen === 'relatorios' ? '_extraHeigth' : ''" x-ref="container-relatorios" x-bind:style="sectionOpen === 'relatorios' ? 'max-height: ' + $refs['container-relatorios'].scrollHeight + 'px; padding-top: 32px' : '' ">
					{% if post.meta('relatorios').titulo or post.meta('relatorios').coluna_1 or post.meta('relatorios').coluna_2 %}
						<div class="cabecalho _pb-40">
							{% if post.meta('relatorios').titulo %}
								<h2 class="Title _sm _pb-40">{{ post.meta('relatorios').titulo|span }}</h2>
							{% endif %}
							<div class="block-relatorios _flex _space-24">
								<ul class="_flex _flex-column {% if not post.meta('relatorios').coluna_2 %}_full{% endif %}">
									{{ post.meta('relatorios').coluna_1|paragraphToList|raw }}
								</ul>
								{% if post.meta('relatorios').coluna_2 %}
									<ul class="_flex _flex-column">{{ post.meta('relatorios').coluna_2|paragraphToList|raw }}</ul>
								{% endif %}
							</div>
						</div>
					{% endif %}
					<div class="video">
						<h2 class="Title _sm _pb-40">Siga os passos abaixo para acessar os relatórios</h2>
						<iframe width="100%" height="455px" src="https://www.youtube.com/embed/7wB34JGJTb0?si=JnqCWGgQlL1lbEVs" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
					</div>
				</div>
			</section>

			{# FAQ #}
			{% if faq|length > 0 %}
				<section class="section-tab" :class="sectionOpen == 'faq' ? '_open' : ''" id="faq">
					<div class="header-tab" @click="setAccordion('faq')">
						<p>Dúvidas frequentes</p>
						<i :class="sectionOpen == 'faq' ? 'icon-up' : 'icon-down'"></i>
					</div>
					<div class="content-tab faq" :class="sectionOpen === 'faq' ? '_extraHeigth' : ''" x-ref="container-faq" x-bind:style="sectionOpen === 'faq' ? 'max-height: ' + $refs['container-faq'].scrollHeight + 'px; padding-top: 32px' : '' ">
						<h2 class="Title _pb-70 _sm _hide-mb">{{post.meta('faq').titulo}}</h2>

						<div class="Lista-expansivel" x-data="{ activeIndex: -1 }">
							{% for item in faq %}
								<div class="lista-expansivel-box" x-data="{ index: {{ loop.index0 }} }">
									<div class="lista-expansivel-header" @click="activeIndex = (activeIndex === index ? null : index)">
										<div class="Title _xs">{{ item.title }}</div>
										<i class="lista-expansivel-toggle-icon" :class="activeIndex === index ? 'icon-minus' : 'icon-plus'"></i>
									</div>
									<div class="lista-expansivel-body" :class="activeIndex === index ? '_opened' : ''" x-ref="texto" x-bind:style="activeIndex === index ? 'max-height: ' + $refs.texto.scrollHeight + 'px' : ''">
										{{ item.resposta | wpautop }}
									</div>
								</div>
							{% endfor %}
						</div>
					</div>
				</section>
			{% endif %}
			{# Plataforma #}
			<section class="section-tab" id="plataformas" :class="sectionOpen == 'plataformas' ? '_open' : ''">
				<div class="header-tab" @click="setAccordion('plataformas')">
					<p>Acesso à plataforma</p>
					<i :class="sectionOpen == 'plataformas' ? 'icon-up' : 'icon-down'"></i>
				</div>
				<div class="content-tab acesso" :class="sectionOpen === 'plataformas' ? '_extraHeigth' : ''" x-ref="container-plataformas" x-bind:style="sectionOpen === 'plataformas' ? 'max-height: ' + $refs['container-plataformas'].scrollHeight + 'px; padding-top: 32px' : '' ">
					<div class="_flex _flex-column _space-12 _pb-40">
						<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 _reversed ">
						<div class="col-6 _flex _flex-column _white">
							<div class="content">
								<h2 class="Title _sm">Pelo seu celular</h2>
								<p class="Body">Com o aplicativo do Informative, 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').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>
							<img class="image" src="{{asset('images/lp/app.png')}}" alt="Celular">
						</div>
						<div class="col-6 _flex _flex-column _dark">
							<div class="content">
								<h2 class="Title _sm">Pelo seu 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').aplicacao }}" target="_blank" class="Button _black">Acessar portal web</a>
							</div>
							<img class="image" src="{{asset('images/lp/portal-web.png')}}" alt="Notebook">
						</div>
					</div>
				</div>
			</section>
		</div>
	</div>

	{% include "snippets/popup-lp.twig" %}
{% endblock %}