@php
    [$firstName, $secondName] = config('site.couple_names');
@endphp

<x-layout>
    <main class="flex flex-1 flex-col">
        <section class="px-6 pt-16 text-center">
            <p class="font-display text-[50px] leading-[1.02] tracking-tight">
                {{ $firstName }}
                <span class="block font-display text-[27px] italic font-light text-mousse my-[5px]">et</span>
                {{ $secondName }}
            </p>
            <p class="mt-[18px] font-mono text-[11px] uppercase tracking-[0.13em] text-ink-2 leading-[2]">
                {{ $dateLabel }}
                <br>
                {{ config('site.venue') }} &middot; {{ config('site.city') }}
            </p>
        </section>

        <section class="mx-6 mt-7 border-y border-rule py-5 text-center">
            <p class="font-mono text-[58px] font-bold leading-none tracking-tighter text-foret">
                {{ $daysRemaining }}
            </p>
            <p class="mt-[9px] font-mono text-[10px] uppercase tracking-[0.2em] text-ink-3">
                {{ $daysRemaining <= 1 ? 'jour' : 'jours' }}
            </p>
        </section>

        <section class="px-6 pt-8 pb-10">
            <p class="text-[15px] leading-relaxed text-ink-2">
                Nous nous marions, en pleine forêt de Crécy, à 25 km à l&rsquo;est de Paris. Notez la
                date &mdash; l&rsquo;invitation détaillée arrivera au printemps.
            </p>
            <a
                href="{{ route('calendar') }}"
                class="mt-4 block rounded-[9px] border border-rule px-[14px] py-[15px] text-center text-[15.5px] font-medium text-foret transition-colors hover:border-foret hover:bg-foret/[.045]"
            >
                Ajouter à mon calendrier
            </a>
        </section>

        <section class="mt-auto px-6 pb-10 pt-6 border-t border-rule text-center">
            <p class="text-[13px] text-ink-2">
                Une question ?
                <a href="mailto:{{ config('site.contact_email') }}" class="font-mono">{{ config('site.contact_email') }}</a>
            </p>
            <p class="mt-3 text-[12px] text-ink-3">
                <a href="{{ route('privacy') }}" class="hover:text-ink-2">Politique de confidentialité</a>
            </p>
        </section>
    </main>
</x-layout>