{% extends "_layouts/main" %}

{% if currentSite.language == 'es' %}
    {% set esUrl = 'es/' %}
{% else %}
    {% set esUrl = '' %}
{% endif %}

{% block main %}

{% include "_includes/storyHeader" %}

<div class="container main-section white-bg" id="story-intro">
	<div class="row">
		<div class="col-12 col-lg-8 offset-lg-2">
			{{ entry.storyIntro }}
		</div>
	</div>
</div>

{% set storyProductsBg = entry.storyProductsBackground.one() %}

<style type="text/css">
  #story-products {
    background-image: url({{ storyProductsBg.getUrl('headerCell') }});
  }
  @media (min-width: 1200px) {
    #story-products {
      background-image: url({{ storyProductsBg.getUrl('headerHd') }});
    }
  }
  @media (min-width: 2000px) {
    #story-products {
      background-image: url({{ storyProductsBg.getUrl('header4k') }});
    }
  }
</style>

<div class="container-fluid main-section" id="story-products">
	<div class="row">
		<div class="container">
			<div class="row">
				<div class="col-12 col-md-10 offset-md-1 col-lg-6 offset-lg-0">
					{% set teDivina = craft.entries.section('products').slug('tedivina-original').one() %}
					<img src="{{ teDivina.productPng.one().getUrl('productThumb') }}" alt="{{ teDivina.title }}">
				</div>
				<div class="col-12 col-md-10 offset-md-1 col-lg-6 offset-lg-0">
					{{ entry.storyProducts }}
					{% set productsHome = craft.entries.section('productsHome').one() %}
					<a href="{{ productsHome.getUrl }}" class="btn btn-secondary">{{ 'Learn more'|t }}</a>
				</div>
			</div>
		</div>
	</div>
</div>

{% set storyQuoteBg = entry.storyQuoteBackground.one() %}

<div class="container main-section white-bg">
	<div class="row">
		<div class="col-12 col-md-10 offset-md-1 col-lg-7 offset-lg-0">
			<div id="story-rewards">
				<h1>{{ 'Rewards'|t }}</h1>
				{{ entry.storyRewards }}
				<a href="{{ esUrl }}rewards/ways-to-earn" class="btn btn-light">{{ 'Learn more'|t }}</a>
			</div>
		</div>
		<div class="col-12 col-md-10 offset-md-1 col-lg-5 offset-lg-0">
			<div id="story-quote" style="background-image: url({{ storyQuoteBg.getUrl() }});">
				<h1>{{ entry.storyQuote }}</h1>
			</div>
		</div>
	</div>
</div>

{# <div class="container main-section white-bg" id="story-testimonials">
	<div class="row">
		<div class="col-12 col-md-3 offset-md-1 offset-lg-2 testimonial-img">
			<div class="placeholder"></div>
		</div>
		<div class="col-12 col-md-7 col-lg-5 testimonial-body">
			<p>"Aliquam auctor nunc non viverra bibendum. Donec porttitor lectus elit, sed euismod nulla elementum at. Suspendisse egestas lobortis ipsum a mattis!"</p>
			<p><b>- Alice Porto</b></p>
		</div>
	</div>
</div> #}

{# <div class="container main-section white-bg" id="story-team">
	<h1>The Team</h1>
	<div class="row">
		{% for teamMember in craft.entries.section('ourTeam').limit(12).all() %}

		<div class="col-3 story-team-tile">
			<div class="placeholder">
				<h4>{{ teamMember.title }}</h4>
			</div>
		</div>

		{% endfor %}
	</div>
	<a href="brand/our-team" class="btn btn-light">Meet our team</a>
</div> #}

{% endblock %}