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

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

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

{% block body_attributes %}x-data="heritageShopLayout()" class="overflow-x-hidden bg-background font-body text-base text-primary selection:bg-secondary/20 selection:text-primary" @scroll.window="updateScrollState()"{% 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 shop_catalog_hero_media %}
                <twig:Image
                    mapping="public"
                    pathLandscape="{{ viti_theme_asset('images/hero-homepage.jpg') }}"
                    pathPortrait="{{ viti_theme_asset('images/hero-homepage.jpg') }}"
                    ratioLandscape="16/9"
                    ratioPortrait="2/3"
                    fit="crop"
                    alt="{{ 'theme.shop.hero.image_alt'|trans }}"
                    class="h-full w-full"
                    picture:class="block h-full w-full"
                    img:class="h-full w-full object-cover"
                    lazy="{{ false }}"
                />
            {% endblock %}
            <div class="absolute inset-0 bg-gradient-to-r from-black/40 via-black/10 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.shop.hero.kicker'|trans }}</span>
                <h1 class="mb-6 font-display text-[42px] font-semibold leading-[1.05] [font-optical-sizing:auto] md:text-[64px]">{{ 'theme.shop.hero.title'|trans }}</h1>
                <p class="mx-auto max-w-2xl text-[18px] leading-8 text-white/95 md:mx-0">{{ 'theme.shop.hero.text'|trans }}</p>
            </div>
        </div>
    </section>

    {{ component('shop:Catalog', { template: 'shop/_catalog.html.twig' }) }}
{% endblock %}

{% block mobile_bottom_bar %}
    {{ component('shop:CatalogMobileBar') }}
{% endblock %}
