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

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

{% block meta %}
    {{ include('partials/seo.html.twig', {
        title_key: 'contact.title',
        description_key: 'contact.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 contact_hero_media %}
                <twig:Image
                    mapping="public"
                    pathLandscape="{{ viti_theme_asset('images/photo-contact-hero.jpg') }}"
                    pathPortrait="{{ viti_theme_asset('images/photo-contact-hero.jpg') }}"
                    ratioLandscape="16/9"
                    ratioPortrait="2/3"
                    fit="crop"
                    alt="{{ 'theme.contact.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 38%;"
                    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.contact.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.contact.hero.title'|trans }}</h1>
                <p class="mx-auto max-w-2xl text-[18px] leading-8 text-white/90 md:mx-0">{{ 'theme.contact.hero.text'|trans }}</p>
            </div>
        </div>
    </section>

    <section id="formulaire" class="mx-auto max-w-[1440px] px-4 py-20 md:px-16 md:py-24">
        <div class="grid grid-cols-1 gap-12 md:grid-cols-[0.9fr_1.1fr] md:gap-20">
            <div class="space-y-8">
                <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.contact.intro.kicker'|trans }}</span>
                    <h2 class="mb-6 font-display text-[40px] font-semibold [font-optical-sizing:auto] text-primary">{{ 'theme.contact.intro.title'|trans }}</h2>
                    <p class="max-w-xl text-[18px] leading-8 text-on-surface-variant">{{ 'theme.contact.intro.text'|trans }}</p>
                </div>

                <div data-theme-reveal class="border border-primary/10 bg-white p-6 opacity-0 translate-y-8 transition-all duration-1000">
                    <h3 class="mb-4 font-display text-[28px] font-semibold [font-optical-sizing:auto] text-primary">{{ 'theme.contact.domain.title'|trans }}</h3>
                    <div class="space-y-2 text-on-surface-variant">
                        <p>{{ 'theme.contact.domain.address_1'|trans }}</p>
                        <p>{{ 'theme.contact.domain.address_2'|trans }}</p>
                        <p><a href="tel:{{ 'theme.contact.domain.phone_digits'|trans }}" class="transition-colors hover:text-primary">{{ 'theme.contact.domain.phone_label'|trans }}</a></p>
                        <p><a href="mailto:{{ 'theme.contact.email'|trans }}" class="transition-colors hover:text-primary">{{ 'theme.contact.email'|trans }}</a></p>
                    </div>
                </div>

                <div data-theme-reveal class="border border-primary/10 bg-surface-container-low p-6 opacity-0 translate-y-8 transition-all duration-1000">
                    <h3 class="mb-4 font-display text-[26px] font-semibold [font-optical-sizing:auto] text-primary">{{ 'theme.contact.social.title'|trans }}</h3>
                    <div class="flex gap-4">
                        <a href="{{ 'theme.social.instagram_url'|trans }}" target="_blank" rel="noreferrer noopener" aria-label="{{ 'theme.social.instagram_label'|trans }}" class="flex h-12 w-12 items-center justify-center border border-primary/20 text-primary transition-all hover:bg-primary hover:text-white">
                            <svg aria-hidden="true" class="h-4 w-4 fill-current" viewBox="0 0 24 24">
                                <path d="M7.75 2h8.5A5.75 5.75 0 0 1 22 7.75v8.5A5.75 5.75 0 0 1 16.25 22h-8.5A5.75 5.75 0 0 1 2 16.25v-8.5A5.75 5.75 0 0 1 7.75 2Zm0 1.5A4.25 4.25 0 0 0 3.5 7.75v8.5a4.25 4.25 0 0 0 4.25 4.25h8.5a4.25 4.25 0 0 0 4.25-4.25v-8.5a4.25 4.25 0 0 0-4.25-4.25h-8.5Zm8.87 1.13a1.12 1.12 0 1 1 0 2.24 1.12 1.12 0 0 1 0-2.24ZM12 6.5A5.5 5.5 0 1 1 6.5 12 5.5 5.5 0 0 1 12 6.5Zm0 1.5A4 4 0 1 0 16 12a4 4 0 0 0-4-4Z"></path>
                            </svg>
                        </a>
                    </div>
                </div>
            </div>

            <div data-theme-reveal class="opacity-0 translate-y-8 transition-all duration-1000">
                {{ component('site:ContactForm') }}
            </div>
        </div>
    </section>
{% endblock %}
