{% extends 'base.twig' %}

{% block content %}
	{% include "componentes/hero.twig" with {
		  titulo: post.title,
		   background: "gradient",
		   dark: true,
           links: [
            {
                title: 'Início',
                url: '/'
            },
			{
                title: post.title,
            },
           ]
	} %}

	{# Banner #}
	<section class="Sobre-nos _banner _dark-mode">
		{% set inicio = post.meta('inicio') %}
		<div class="Container">
			<div class="Row _gutters-x _gutters-y">
				<div class="col-6">
					<h2 class="Title _xl">{{inicio.titulo|span}}</h2>
				</div>
				<div class="col-6">
					<div class="Body">{{inicio.texto|nl2br|span}}</div>
				</div>
			</div>
		</div>

	</section>

	{# Conteúdo #}
	<section class="Sobre-nos _conteudo Container _pt-md _pb-md">
		{% set conteudos = post.meta('conteudo') %}

		{% for key, conteudo in conteudos %}
			<div class="Row _content-between {% if key % 2 == 1 %} _reversed{% endif %}">
				<div class="{% if key % 2 == 1 %} col-6 {% else %} col-5 {% endif %} item-text">
					<h2 class="Title _sm">{{conteudo.titulo}}</h2>
					<div class="Body">{{conteudo.texto|wpautop}}</div>
				</div>
				<div class="{% if key % 2 == 1 %} col-5 {% else %} col-6 {% endif %} item-image">
					<img src="{{ Image(conteudo.imagem).src}}" alt="{{conteudo.imagem.alt }}">
				</div>
			</div>
		{% endfor %}
	</section>

	{# Propósito #}
	<section class="Sobre-nos _proposito _bg-gray _pt-md _pb-md">
		{% set propositos = post.meta('proposito') %}
		<h2 class="Title _sm">Nosso Propósito</h2>

		<div class="Container proposito-cards">
			{% for proposito in propositos %}
				<div class="proposito-card">
					<img src="{{ Image(proposito.icone).src}}" alt="{{proposito.icone.alt }}">
					<h2 class="Title">{{proposito.titulo}}</h2>
					<p class="_text-body">{{proposito.texto|span}}</p>
				</div>
			{% endfor %}
		</div>

	</section>

{% endblock %}