{% extends 'base.html.twig' %}

{% block title %}{{ 'homepage.title'|trans({}, 'meta') }}{% endblock %}

{% block meta %}
    {{ include('partials/seo.html.twig', {
        title_key: 'homepage.title',
        description_key: 'homepage.description',
        robots: 'index,follow',
        seo_image_url: absolute_url(asset_glide(viti_theme_asset('images/logo_600x450.jpg'), 'public', {
            fm: 'jpg',
            q: 80,
            fit: 'cover',
            w: 600,
            h: 450
        })),
        seo_image_alt: 'seo.social_image_alt'|trans({}, 'meta')
    }) }}
{% endblock %}

{% block page_hero %}
    {% set hero_image_path %}{% block hero_image %}{{ viti_theme_asset('images/headers/header-homepage.jpg') }}{% endblock %}{% endset %}
    {% include 'partials/_hero.html.twig' with {
        page_key: 'homepage',
        target_id: 'homepage',
        image: 'images/headers/header-homepage.jpg',
        image_path: hero_image_path|trim,
        image_alt: 'background-header.homepage'
    } %}
{% endblock %}

{% block main %}
    <section id="homepage" class="theme-page theme-homepage-page">
        <div class="theme-container">
            <div class="theme-homepage-grid">
                <div class="theme-homepage-content-5">
                    {% block homepage_brand %}
                        <twig:theme:BrandMark variant="logo" alt="{{ 'balise.logo'|trans({}, 'meta') }}" />
                    {% endblock %}
                    <h3>{{ 'homepage.presentation-home-title'|trans }}</h3>
                    <p>
                        {{ 'homepage.presentation-home-text'|trans }}
                        <br><span>{{ 'homepage.presentation-home-author'|trans }}</span>
                    </p>
                </div>
                <div class="theme-discover-link">
                    <a class="theme-hover-link-effect-2" href="{{ path('home') }}" title="{{ 'home.balise'|trans({}, 'meta') }}">
                        {{ 'homepage.presentation-home-button'|trans }}<i aria-hidden="true"></i>
                    </a>
                    <twig:Image
                        mapping="public"
                        class="theme-picture theme-picture--landscape"
                        alt="{{ 'homepage.home'|trans({}, 'img') }}"
                        lazy="{{ false }}"
                        picture:style="width: 100%; height: 100%;"
                        path="{{ viti_theme_asset('images/homepage/homepage-home.jpg') }}"
                        pathLandscape="{{ viti_theme_asset('images/homepage/homepage-home.jpg') }}"
                        ratio="3/2"
                        imageWidth="1123"
                        imageHeight="749"
                    />
                </div>

                <div class="theme-homepage-cuvee-content">
                    <div class="theme-homepage-cuvee-row">
                        <div class="theme-homepage-cuvee-img">
                            <div class="theme-homepage-cuvee-bottle">
                                <twig:Image
                                    mapping="public"
                                    alt="{{ 'homepage.cuvee'|trans({}, 'img') }}"
                                    fit="contain"
                                    fm="png"
                                    row:class="theme-homepage-cuvee-bottle__row"
                                    row:style="width: 100%; max-width: 100%; height: 100%;"
                                    img:class="theme-homepage-cuvee-bottle__image"
                                    lazy="{{ false }}"
                                    responsive="{{ false }}"
                                    path="{{ viti_theme_asset('images/homepage/homepage-cuvee.png') }}"
                                    imageWidth="334"
                                    imageHeight="1200"
                                />
                            </div>
                        </div>
                        <div class="theme-homepage-cuvee-text">
                            <p>{{ 'homepage.presentation-cuvee-text'|trans }}</p>
                            <a class="theme-button-stroke theme-hover-link-effect" href="{{ path('cuvees') }}" title="{{ 'cuvee.balise'|trans({}, 'meta') }}">
                                {{ 'homepage.presentation-cuvee-button'|trans }}
                            </a>
                        </div>
                    </div>
                    <div class="theme-homepage-cuvee-title-back">
                        <div>
                            <h3>{{ 'homepage.presentation-cuvee-title'|trans }}</h3>
                        </div>
                        <div>
                            <span>{{ 'homepage.presentation-cuvee-title-back'|trans }}</span>
                        </div>
                    </div>
                </div>

                <div class="theme-homepage-shop-image">
                    <twig:Image
                        mapping="public"
                        class="theme-picture theme-picture--landscape"
                        alt="{{ 'homepage.shop'|trans({}, 'img') }}"
                        lazy="{{ false }}"
                        picture:style="width: 100%; height: 100%;"
                        path="{{ viti_theme_asset('images/homepage/homepage-shop.jpg') }}"
                        pathLandscape="{{ viti_theme_asset('images/homepage/homepage-shop.jpg') }}"
                        ratio="3/2"
                        imageWidth="1685"
                        imageHeight="1123"
                    />
                </div>
                <div class="theme-homepage-content-5 theme-homepage-shop-text">
                    <h3>{{ 'homepage.presentation-shop-title'|trans }}</h3>
                    <p>{{ 'homepage.presentation-shop-text'|trans }}</p>
                    <a class="theme-button-fill theme-hover-link-effect" href="{{ path('shop') }}" title="{{ 'shop.balise'|trans({}, 'meta') }}">
                        {{ 'homepage.presentation-shop-button_1'|trans }}
                    </a>
                </div>

                <div class="theme-homepage-contact-content">
                    <h3>{{ 'homepage.presentation-contact-title'|trans }}</h3>
                    <p>{{ 'homepage.presentation-contact-text'|trans|nl2br }}</p>
                    <a class="theme-button-fill theme-hover-link-effect" href="{{ path('contact') }}" title="{{ 'contact.balise'|trans({}, 'meta') }}">
                        {{ 'homepage.presentation-contact-button_2'|trans }}
                    </a>
                    <a class="theme-button-stroke theme-hover-link-effect" href="{{ path('contact') }}" title="{{ 'contact.balise'|trans({}, 'meta') }}">
                        {{ 'homepage.presentation-contact-button_1'|trans }}
                    </a>
                </div>
            </div>
        </div>
    </section>
{% endblock %}
