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

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

{% block meta %}
    {{ include('partials/seo.html.twig', {
        title_key: 'depot.title',
        description_key: 'depot.description',
        robots: 'index,follow'
    }) }}
{% endblock %}

{% block body_attributes %}x-data="heritageLayout()" class="overflow-x-hidden bg-background font-body text-base text-primary selection:bg-secondary/20 selection:text-primary"{% endblock %}

{% block main %}
    <section class="relative flex min-h-screen w-full items-center overflow-hidden bg-surface-container-highest">
        <div class="absolute inset-0 z-0">
            {% block depots_hero_media %}
                <twig:Image
                    mapping="public"
                    pathLandscape="{{ viti_theme_asset('images/photo-nous-trouver-hero.jpg') }}"
                    pathPortrait="{{ viti_theme_asset('images/photo-nous-trouver-hero.jpg') }}"
                    ratioLandscape="16/9"
                    ratioPortrait="2/3"
                    fit="crop"
                    alt="{{ 'theme.depot.hero.image_alt'|trans }}"
                    class="h-full w-full"
                    picture:class="block h-full w-full"
                    img:class="h-full w-full object-cover"
                    img:style="object-position:center 50%;"
                    lazy="{{ false }}"
                />
            {% endblock %}
            <div class="absolute inset-0 bg-gradient-to-r from-black/55 via-black/18 to-transparent"></div>
        </div>

        <div class="relative z-10 mx-auto flex min-h-screen w-full max-w-[1440px] flex-col px-4 pb-8 pt-28 md:px-16 md:py-0">
            <div class="my-auto max-w-3xl text-center text-white md:text-left">
                <span class="mb-4 block font-label text-[12px] font-semibold uppercase tracking-[0.2em]">{{ 'theme.depot.hero.kicker'|trans }}</span>
                <h1 class="mb-6 font-display text-[42px] font-bold leading-[1.05] [font-optical-sizing:auto] md:text-[64px]">{{ 'theme.depot.hero.title'|trans }}</h1>
                <p class="mx-auto max-w-2xl text-[18px] leading-8 text-white/90 md:mx-0">{{ 'theme.depot.hero.text'|trans }}</p>
            </div>
        </div>
    </section>

    <section class="mx-auto max-w-[1440px] px-4 py-20 md:px-16 md:py-24">
        <div data-theme-reveal class="mx-auto max-w-4xl text-center opacity-0 translate-y-8 transition-all duration-1000">
            <span class="mb-4 block font-label text-[12px] font-semibold uppercase tracking-[0.24em] text-secondary">{{ 'theme.depot.intro.kicker'|trans }}</span>
            <h2 class="mb-6 font-display text-[40px] font-semibold [font-optical-sizing:auto] text-primary">{{ 'theme.depot.intro.title'|trans }}</h2>
            <p class="mx-auto max-w-3xl text-[18px] leading-8 text-on-surface-variant">{{ 'theme.depot.intro.text'|trans }}</p>
            <a href="{{ path('contact') }}" class="mt-8 inline-flex items-center justify-center bg-primary px-8 py-4 font-label text-[12px] uppercase tracking-[0.18em] text-white transition-colors hover:bg-secondary focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-primary">
                {{ 'theme.depot.intro.cta_contact'|trans }}
            </a>
        </div>
    </section>

    <section id="plan" class="bg-surface-container-low py-20 md:py-24">
        <div class="mx-auto max-w-[1440px] px-4 md:px-16">
            {{ component('depot') }}
        </div>
    </section>
{% endblock %}
