{% 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'
    }) }}
{% 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 homepage_hero_media %}
                <twig:Image
                    mapping="public"
                    pathLandscape="{{ viti_theme_asset('images/photo-hero-bouteille.jpg') }}"
                    pathPortrait="{{ viti_theme_asset('images/photo-hero-bouteille.jpg') }}"
                    ratioLandscape="16/9"
                    ratioPortrait="2/3"
                    fit="crop"
                    alt="{{ 'theme.homepage.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: 50% center;"
                    lazy="{{ false }}"
                />
            {% endblock %}
            <div class="absolute inset-0 bg-gradient-to-r from-black/45 via-black/15 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-2xl text-center text-white md:text-left">
                <span class="mb-4 block font-label text-[12px] font-semibold uppercase tracking-[0.2em]">{{ 'theme.homepage.hero.kicker'|trans }}</span>
                <h1 class="mb-6 font-display text-[42px] font-bold leading-[1.1] tracking-[-0.02em] [font-optical-sizing:auto] md:text-[64px]">{{ 'theme.homepage.hero.title'|trans }}</h1>
                <p class="mx-auto mb-8 max-w-lg text-[18px] leading-8 text-white/90 md:mx-0">{{ 'theme.homepage.hero.text'|trans }}</p>
                <div class="hidden gap-4 md:flex">
                    <a href="{{ path('shop') }}" class="inline-flex items-center justify-center bg-white px-8 py-4 font-label text-[12px] uppercase tracking-[0.18em] text-primary transition-all hover:bg-surface-container-high">
                        {{ 'theme.homepage.hero.primary_cta'|trans }}
                    </a>
                    <a href="{{ path('home') }}" class="inline-flex items-center justify-center border border-white px-8 py-4 font-label text-[12px] uppercase tracking-[0.18em] text-white transition-all hover:bg-white hover:text-primary">
                        {{ 'theme.homepage.hero.secondary_cta'|trans }}
                    </a>
                </div>
            </div>

            <div class="flex flex-col gap-4 md:hidden">
                <a href="{{ path('shop') }}" class="inline-flex items-center justify-center bg-white px-8 py-4 font-label text-[12px] uppercase tracking-[0.18em] text-primary transition-all hover:bg-surface-container-high">
                    {{ 'theme.homepage.hero.primary_cta'|trans }}
                </a>
                <a href="{{ path('home') }}" class="inline-flex items-center justify-center border border-white px-8 py-4 font-label text-[12px] uppercase tracking-[0.18em] text-white transition-all hover:bg-white hover:text-primary">
                    {{ 'theme.homepage.hero.secondary_cta'|trans }}
                </a>
            </div>
        </div>
    </section>

    <section class="mx-auto max-w-[1440px] px-4 py-20 md:px-16 md:py-24">
        <div class="grid grid-cols-1 items-center gap-20 md:grid-cols-2">
            <div class="order-2 md:order-1">
                <div class="overflow-hidden rounded-[1rem] border border-primary/15 p-1">
                    <twig:Image
                        mapping="public"
                        pathLandscape="{{ viti_theme_asset('images/photo-vigneron-vignes.jpg') }}"
                        ratio="1/1"
                        alt="{{ 'theme.homepage.house.image_alt'|trans }}"
                        class="aspect-square w-full rounded-[0.75rem]"
                        picture:class="block h-full w-full"
                        img:class="h-full w-full rounded-[0.75rem] object-cover transition duration-700 hover:scale-[1.02]"
                    />
                </div>
            </div>

            <div class="order-1 md:order-2">
                <span class="mb-4 block font-label text-[12px] font-semibold uppercase tracking-[0.24em] text-secondary">{{ 'theme.homepage.house.kicker'|trans }}</span>
                <h2 class="mb-8 font-display text-[40px] font-semibold leading-tight [font-optical-sizing:auto] text-primary">{{ 'theme.homepage.house.title'|trans }}</h2>
                <p class="mb-10 text-[18px] leading-8 text-on-surface-variant">{{ 'theme.homepage.house.text'|trans }}</p>
                <a href="{{ path('home') }}" class="inline-block border-b border-primary pb-1 font-label text-[12px] uppercase tracking-[0.18em] text-primary">
                    {{ 'theme.homepage.house.link'|trans }}
                </a>
            </div>
        </div>
    </section>
    {{ component('collection:ProductCollection', {
        collection: 'champagnes',
        title: 'theme.homepage.collection.title'|trans
    }) }}
    <section class="mx-auto max-w-[1440px] px-4 py-20 md:px-16 md:py-24">
        <div class="grid grid-cols-1 items-center gap-20 md:grid-cols-2">
            <div>
                <span class="mb-4 block font-label text-[12px] font-semibold uppercase tracking-[0.24em] text-secondary">{{ 'theme.homepage.commitment.kicker'|trans }}</span>
                <h2 class="mb-8 font-display text-[40px] font-semibold leading-tight [font-optical-sizing:auto] text-primary">{{ 'theme.homepage.commitment.title'|trans }}</h2>
                <p class="mb-10 text-[18px] leading-8 text-on-surface-variant">{{ 'theme.homepage.commitment.text'|trans }}</p>
                <div class="flex items-start gap-4">
                    <span aria-hidden="true" class="material-symbols-outlined text-primary" style="font-variation-settings:'FILL' 1;">eco</span>
                    <p class="text-on-surface-variant">{{ 'theme.homepage.commitment.point'|trans }}</p>
                </div>
            </div>

            <div data-theme-reveal class="opacity-0 translate-y-8 transition-all duration-1000">
                <div class="overflow-hidden rounded-[1rem] border border-primary/15 p-1">
                    <twig:Image
                        mapping="public"
                        pathLandscape="{{ viti_theme_asset('images/photo-travail-vignes.jpg') }}"
                        ratio="4/3"
                        alt="{{ 'theme.homepage.commitment.image_alt'|trans }}"
                        class="aspect-[4/3] w-full rounded-[0.75rem]"
                        picture:class="block h-full w-full"
                        img:class="h-full w-full rounded-[0.75rem] object-cover transition duration-700 hover:scale-[1.02]"
                    />
                </div>
            </div>
        </div>
    </section>

    <section class="bg-primary py-20 text-white md:py-24">
        <div class="mx-auto grid max-w-[1440px] grid-cols-1 items-center gap-20 px-4 md:grid-cols-2 md:px-16">
            <div class="order-2 md:order-1">
                <twig:Image
                    mapping="public"
                    pathLandscape="{{ viti_theme_asset('images/photo-grand-cru.jpg') }}"
                    ratio="3/4"
                    alt="{{ 'theme.homepage.grand_cru.image_alt'|trans }}"
                    class="h-[600px] w-full rounded-[1rem] shadow-2xl"
                    picture:class="block h-full w-full"
                    img:class="h-full w-full rounded-[1rem] object-cover"
                />
            </div>

            <div class="order-1 md:order-2">
                <span class="mb-4 block font-label text-[12px] font-semibold uppercase tracking-[0.24em] text-primary-fixed">{{ 'theme.homepage.grand_cru.kicker'|trans }}</span>
                <h2 class="mb-8 font-display text-[40px] font-semibold leading-tight [font-optical-sizing:auto]">{{ 'theme.homepage.grand_cru.title'|trans }}</h2>
                <p class="mb-10 text-[18px] leading-8 text-white/85">{{ 'theme.homepage.grand_cru.text'|trans }}</p>
                <a href="{{ path('shop_product', { categorySlug: 'vin-rouge', slug: 'le-bouzy-rouge' }) }}" class="inline-flex items-center justify-center bg-white px-8 py-4 font-label text-[12px] uppercase tracking-[0.18em] text-primary transition-all hover:bg-surface-container-high">
                    {{ 'theme.homepage.grand_cru.cta'|trans }}
                </a>
            </div>
        </div>
    </section>

    <section class="bg-surface py-20 md:py-24">
        <div class="mx-auto max-w-[1440px] px-4 md:px-16">
            <div class="mb-16 text-center">
                <span class="mb-2 block font-label text-[12px] font-semibold uppercase tracking-[0.24em] text-secondary">{{ 'theme.homepage.journal.kicker'|trans }}</span>
                <h2 class="font-display text-[40px] font-semibold [font-optical-sizing:auto] text-primary">{{ 'theme.homepage.journal.title'|trans }}</h2>
            </div>

            <div class="grid grid-cols-1 gap-x-6 gap-y-12 md:grid-cols-2 xl:grid-cols-3">
                {% for item in ['bouzy', 'spring', 'old_vines', 'maturity', 'cellar', 'bottle'] %}
                    <article class="group">
                        <div class="mb-6 aspect-video overflow-hidden rounded-[1rem] bg-surface-variant">
                            <twig:Image
                                mapping="public"
                                pathLandscape="{{ viti_theme_asset('images/' ~ ('theme.homepage.journal.' ~ item ~ '.image')|trans) }}"
                                ratio="16/9"
                                alt="{{ ('theme.homepage.journal.' ~ item ~ '.image_alt')|trans }}"
                                class="h-full w-full"
                                picture:class="block h-full w-full"
                                img:class="h-full w-full object-cover transition-transform duration-500 group-hover:scale-110"
                            />
                        </div>
                        <span class="mb-2 block font-label text-[10px] font-semibold uppercase tracking-[0.2em] text-secondary">{{ ('theme.homepage.journal.' ~ item ~ '.kicker')|trans }}</span>
                        <h3 class="mb-3 font-display text-[24px] font-semibold [font-optical-sizing:auto] text-primary transition-colors group-hover:text-secondary">{{ ('theme.homepage.journal.' ~ item ~ '.title')|trans }}</h3>
                        <p class="text-on-surface-variant">{{ ('theme.homepage.journal.' ~ item ~ '.text')|trans }}</p>
                    </article>
                {% endfor %}
            </div>
        </div>
    </section>
{% endblock %}
