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

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

{% block meta %}
    {{ include('partials/seo.html.twig', {
        title_key: 'home.title',
        description_key: 'home.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 home_hero_media %}
                <twig:Image
                    mapping="public"
                    pathLandscape="{{ viti_theme_asset('images/photo-histoire-hero.jpg') }}"
                    pathPortrait="{{ viti_theme_asset('images/photo-histoire-hero.jpg') }}"
                    ratioLandscape="16/9"
                    ratioPortrait="2/3"
                    fit="crop"
                    alt="{{ 'theme.home.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 42%;"
                    lazy="{{ false }}"
                />
            {% endblock %}
            <div class="absolute inset-0 bg-gradient-to-r from-black/55 via-black/20 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.home.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.home.hero.title'|trans }}</h1>
                <p class="mx-auto max-w-2xl text-[18px] leading-8 text-white/90 md:mx-0">{{ 'theme.home.hero.text'|trans }}</p>
            </div>
        </div>
    </section>

    <section id="maison" 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-16 md:grid-cols-2 md:gap-20">
            <div data-theme-reveal class="order-2 opacity-0 translate-y-8 transition-all duration-1000 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="4/5"
                        alt="{{ 'theme.home.house.image_alt'|trans }}"
                        class="aspect-[4/5] 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 data-theme-reveal class="order-1 opacity-0 translate-y-8 transition-all duration-1000 md:order-2">
                <span class="mb-4 block font-label text-[12px] font-semibold uppercase tracking-[0.24em] text-secondary">{{ 'theme.home.house.kicker'|trans }}</span>
                <h2 class="mb-8 font-display text-[40px] font-semibold [font-optical-sizing:auto] text-primary">{{ 'theme.home.house.title'|trans }}</h2>
                <div class="space-y-6 text-[18px] leading-8 text-on-surface-variant">
                    <p>{{ 'theme.home.house.text_1'|trans }}</p>
                    <p>{{ 'theme.home.house.text_2'|trans }}</p>
                </div>
            </div>
        </div>
    </section>

    <section id="grand-cru" class="bg-surface-container-low py-20 md:py-24">
        <div class="mx-auto max-w-[1440px] px-4 md:px-16">
            <div data-theme-reveal class="mb-16 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.home.terroir.kicker'|trans }}</span>
                <h2 class="font-display text-[40px] font-semibold [font-optical-sizing:auto] text-primary">{{ 'theme.home.terroir.title'|trans }}</h2>
            </div>

            <div class="grid grid-cols-1 gap-6 md:grid-cols-12 md:grid-rows-[360px_280px]">
                <article data-theme-reveal class="group relative overflow-hidden rounded-[1rem] opacity-0 translate-y-8 transition-all duration-1000 md:col-span-7 md:row-span-2">
                    <twig:Image
                        mapping="public"
                        pathLandscape="{{ viti_theme_asset('images/photo-grand-cru.jpg') }}"
                        ratio="4/5"
                        alt="{{ 'theme.home.terroir.card_1.image_alt'|trans }}"
                        class="h-full w-full"
                        picture:class="block h-full w-full"
                        img:class="h-full w-full object-cover transition duration-700 group-hover:scale-[1.03]"
                    />
                    <div class="absolute inset-0 bg-gradient-to-t from-primary/90 via-primary/25 to-transparent"></div>
                    <div class="absolute bottom-0 left-0 p-8 text-white md:p-10">
                        <span class="mb-3 block font-label text-[12px] font-semibold uppercase tracking-[0.24em] text-primary-fixed">{{ 'theme.home.terroir.card_1.kicker'|trans }}</span>
                        <h3 class="mb-4 font-display text-[28px] font-semibold [font-optical-sizing:auto]">{{ 'theme.home.terroir.card_1.title'|trans }}</h3>
                        <p class="max-w-lg text-white/80">{{ 'theme.home.terroir.card_1.text'|trans }}</p>
                    </div>
                </article>

                {% for key in ['card_2', 'card_3'] %}
                    <article data-theme-reveal class="group relative overflow-hidden rounded-[1rem] opacity-0 translate-y-8 transition-all duration-1000 md:col-span-5">
                        <twig:Image
                            mapping="public"
                            pathLandscape="{{ viti_theme_asset('images/' ~ ('theme.home.terroir.' ~ key ~ '.image')|trans) }}"
                            ratio="16/9"
                            alt="{{ ('theme.home.terroir.' ~ key ~ '.image_alt')|trans }}"
                            class="h-full w-full"
                            picture:class="block h-full w-full"
                            img:class="h-full w-full object-cover transition duration-700 group-hover:scale-[1.03]"
                        />
                        <div class="absolute inset-0 bg-gradient-to-t from-primary/75 via-primary/10 to-transparent"></div>
                        <div class="absolute bottom-0 left-0 p-7 text-white">
                            <h3 class="mb-2 font-display text-[24px] font-semibold [font-optical-sizing:auto]">{{ ('theme.home.terroir.' ~ key ~ '.title')|trans }}</h3>
                            <p class="text-white/80">{{ ('theme.home.terroir.' ~ key ~ '.text')|trans }}</p>
                        </div>
                    </article>
                {% endfor %}
            </div>
        </div>
    </section>

    {{ include('partials/_bouzy_vineyard_map.html.twig') }}

    <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-16 md:grid-cols-2 md:gap-20">
            <div data-theme-reveal class="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.home.craft.kicker'|trans }}</span>
                <h2 class="mb-8 font-display text-[40px] font-semibold [font-optical-sizing:auto] text-primary">{{ 'theme.home.craft.title'|trans }}</h2>
                <div class="space-y-8 text-[18px] leading-8 text-on-surface-variant">
                    <p>{{ 'theme.home.craft.text'|trans }}</p>

                    {% for key in ['ageing', 'gesture'] %}
                        <div class="flex gap-4">
                            <span class="mt-1 h-px w-14 shrink-0 bg-secondary"></span>
                            <div>
                                <h3 class="mb-2 font-label text-[12px] uppercase tracking-[0.2em] text-primary">{{ ('theme.home.craft.' ~ key ~ '.title')|trans }}</h3>
                                <p class="text-base leading-7 text-on-surface-variant/85">{{ ('theme.home.craft.' ~ key ~ '.text')|trans }}</p>
                            </div>
                        </div>
                    {% endfor %}
                </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-cave.jpg') }}"
                        ratio="1/1"
                        alt="{{ 'theme.home.craft.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>
    </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-12 px-4 md:grid-cols-[1.15fr_0.85fr] md:px-16">
            <div data-theme-reveal class="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-primary-fixed">{{ 'theme.home.commitment.kicker'|trans }}</span>
                <h2 class="mb-6 font-display text-[40px] font-semibold [font-optical-sizing:auto]">{{ 'theme.home.commitment.title'|trans }}</h2>
                <p class="max-w-2xl text-[18px] leading-8 text-white/85">{{ 'theme.home.commitment.text'|trans }}</p>
            </div>

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

    <section class="py-20 md:py-24">
        <div class="mx-auto max-w-4xl px-4 text-center md:px-16">
            <div data-theme-reveal class="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.home.collection.kicker'|trans }}</span>
                <h2 class="mb-6 font-display text-[40px] font-semibold [font-optical-sizing:auto] text-primary">{{ 'theme.home.collection.title'|trans }}</h2>
                <p class="mx-auto mb-10 max-w-2xl text-[18px] leading-8 text-on-surface-variant">{{ 'theme.home.collection.text'|trans }}</p>
                <a href="{{ path('shop') }}" class="inline-flex items-center justify-center bg-primary px-8 py-4 font-label text-[12px] uppercase tracking-[0.18em] text-white transition-all hover:bg-secondary">
                    {{ 'theme.home.collection.cta'|trans }}
                </a>
            </div>
        </div>
    </section>
{% endblock %}
