{% extends 'revervation/base.twig' %}

{% block title %}{{ 'workflow.seo.title'|trans }}{% endblock %}
{% block description %}{{ 'workflow.seo.description'|trans }}{% endblock %}

{% block breadcrumb_json %}
    ,{
    "@type": "ListItem",
    "position": 1,
    "name": "{{ 'workflow.breadcrumb'|trans }}",
    "item": "{{ url('reservation_workflow') }}"
    }
{% endblock %}

{% block body %}
    <div class="min-h-screen bg-white font-sans antialiased pb-20">

        {# --- HEADER --- #}
        <div class="max-w-4xl mx-auto pt-20 pb-16 px-4 text-center">
            <span class="inline-block bg-blue-100 text-blue-600 px-4 py-1.5 rounded-full text-[10px] font-black uppercase tracking-widest mb-6">
                {{ 'workflow.header.badge'|trans }}
            </span>
            <h1 class="text-6xl md:text-8xl font-black text-slate-900 uppercase italic tracking-tighter leading-[0.85] mb-6">
                {{ 'workflow.header.title_part1'|trans }} <br><span class="text-blue-600">{{ 'workflow.header.title_part2'|trans }}</span>
            </h1>
            <p class="text-xl text-slate-500 font-medium italic leading-relaxed">{{ 'workflow.header.subtitle'|trans }}</p>
        </div>

        {# --- TIMELINE --- #}
        <div class="max-w-5xl mx-auto px-4 relative">
            <div class="hidden md:block absolute left-1/2 top-0 bottom-0 w-1 bg-slate-100 -translate-x-1/2 z-0"></div>

            <div class="space-y-24 relative z-10">

                {# 1. SELECTION #}
                <div class="flex flex-col md:flex-row items-center gap-12 group">
                    <div class="flex-1 text-center md:text-right order-2 md:order-1">
                        <h2 class="text-3xl font-black text-slate-900 uppercase italic mb-4 group-hover:text-blue-600 transition-colors">{{ 'workflow.step1.title'|trans }}</h2>
                        <p class="text-slate-500 font-medium leading-relaxed">{{ 'workflow.step1.desc'|trans }}</p>
                    </div>
                    <div class="w-24 h-24 bg-blue-600 rounded-[2rem] flex items-center justify-center shadow-xl shadow-blue-200 order-1 md:order-2 shrink-0 transform group-hover:rotate-12 transition-transform">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" /></svg>
                    </div>
                    <div class="flex-1 hidden md:block order-3"></div>
                </div>

                {# 2. DATES #}
                <div class="flex flex-col md:flex-row items-center gap-12 group">
                    <div class="flex-1 hidden md:block"></div>
                    <div class="w-24 h-24 bg-amber-500 rounded-[2rem] flex items-center justify-center shadow-xl shadow-amber-200 shrink-0 transform group-hover:-rotate-12 transition-transform">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 00-2 2z" /></svg>
                    </div>
                    <div class="flex-1 text-center md:text-left">
                        <h2 class="text-3xl font-black text-slate-900 uppercase italic mb-4 group-hover:text-amber-500 transition-colors">{{ 'workflow.step2.title'|trans }}</h2>
                        <p class="text-slate-500 font-medium leading-relaxed">{{ 'workflow.step2.desc'|trans }}</p>
                    </div>
                </div>

                {# 3. DETAILS & LIVRAISON #}
                <div class="flex flex-col md:flex-row items-center gap-12 group">
                    <div class="flex-1 text-center md:text-right order-2 md:order-1">
                        <h2 class="text-3xl font-black text-slate-900 uppercase italic mb-4 group-hover:text-blue-600 transition-colors">{{ 'workflow.step3.title'|trans }}</h2>
                        <p class="text-slate-500 font-medium leading-relaxed">
                            {{ 'workflow.step3.desc'|trans }}
                            <span class="block mt-2 text-blue-600 font-bold italic">{{ 'workflow.step3.highlight'|trans }}</span>
                        </p>
                    </div>
                    <div class="w-24 h-24 bg-blue-600 rounded-[2rem] flex items-center justify-center shadow-xl shadow-blue-200 order-1 md:order-2 shrink-0 transform group-hover:rotate-12 transition-transform">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" /></svg>
                    </div>
                    <div class="flex-1 hidden md:block order-3"></div>
                </div>

                {# 4. SIGNATURE #}
                <div class="flex flex-col md:flex-row items-center gap-12 group">
                    <div class="flex-1 hidden md:block"></div>
                    <div class="w-24 h-24 bg-indigo-600 rounded-[2rem] flex items-center justify-center shadow-xl shadow-indigo-200 shrink-0 transform group-hover:-rotate-12 transition-transform">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z" /></svg>
                    </div>
                    <div class="flex-1 text-center md:text-left">
                        <h2 class="text-3xl font-black text-slate-900 uppercase italic mb-4 group-hover:text-indigo-600 transition-colors">{{ 'workflow.step4.title'|trans }}</h2>
                        <p class="text-slate-500 font-medium leading-relaxed">{{ 'workflow.step4.desc'|trans }}</p>
                    </div>
                </div>

                {# 5. ARRHES #}
                <div class="flex flex-col md:flex-row items-center gap-12 group">
                    <div class="flex-1 text-center md:text-right order-2 md:order-1">
                        <h2 class="text-3xl font-black text-slate-900 uppercase italic mb-4 group-hover:text-rose-500 transition-colors">{{ 'workflow.step5.title'|trans }}</h2>
                        <p class="text-slate-500 font-medium leading-relaxed">{{ 'workflow.step5.desc'|trans|raw }}</p>
                    </div>
                    <div class="w-24 h-24 bg-rose-500 rounded-[2rem] flex items-center justify-center shadow-xl shadow-rose-200 order-1 md:order-2 shrink-0 transform group-hover:scale-110 transition-transform">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M3 10h18M7 15h1m4 0h1m-7 4h12a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" /></svg>
                    </div>
                    <div class="flex-1 hidden md:block order-3"></div>
                </div>

                {# 6 & 7. RAPPEL & CAUTION #}
                <div class="flex flex-col md:flex-row items-center gap-12 group">
                    <div class="flex-1 hidden md:block"></div>
                    <div class="w-24 h-24 bg-violet-600 rounded-[2rem] flex items-center justify-center shadow-xl shadow-violet-200 shrink-0 transform group-hover:-rotate-12 transition-transform">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" /></svg>
                    </div>
                    <div class="flex-1 text-center md:text-left">
                        <h2 class="text-3xl font-black text-slate-900 uppercase italic mb-4 group-hover:text-violet-600 transition-colors">{{ 'workflow.step6_7.title'|trans }}</h2>
                        <p class="text-slate-500 font-medium leading-relaxed">{{ 'workflow.step6_7.desc'|trans|raw }}</p>
                    </div>
                </div>

                {# 8 & 9. RECEPTION & SOLDE #}
                <div class="flex flex-col md:flex-row items-center gap-12 group">
                    <div class="flex-1 text-center md:text-right order-2 md:order-1">
                        <h2 class="text-3xl font-black text-slate-900 uppercase italic mb-4 group-hover:text-emerald-500 transition-colors">{{ 'workflow.step8_9.title'|trans }}</h2>
                        <p class="text-slate-500 font-medium leading-relaxed">
                            {{ 'workflow.step8_9.desc'|trans }}
                            <span class="block mt-2 text-emerald-600 font-bold">{{ 'workflow.step8_9.highlight'|trans }}</span>
                        </p>
                    </div>
                    <div class="w-24 h-24 bg-emerald-500 rounded-[2rem] flex items-center justify-center shadow-xl shadow-emerald-200 order-1 md:order-2 shrink-0 transform group-hover:scale-110 transition-transform">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M14.828 14.828a4 4 0 01-5.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
                    </div>
                    <div class="flex-1 hidden md:block order-3"></div>
                </div>

                {# 10. POST-LOCATION #}
                <div class="flex flex-col md:flex-row items-center gap-12 group">
                    <div class="flex-1 hidden md:block"></div>
                    <div class="w-24 h-24 bg-blue-900 rounded-[2rem] flex items-center justify-center shadow-xl shadow-slate-300 shrink-0 transform group-hover:rotate-12 transition-transform">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M5 3v4M3 5h4M6 17v4m-2-2h4m5-16l2.286 6.857L21 12l-7.714 2.143L11 21l-2.286-6.857L1 12l7.714-2.143L11 3z" /></svg>
                    </div>
                    <div class="flex-1 text-center md:text-left">
                        <h2 class="text-3xl font-black text-slate-900 uppercase italic mb-4">{{ 'workflow.step10.title'|trans }}</h2>
                        <p class="text-slate-500 font-medium leading-relaxed">{{ 'workflow.step10.desc'|trans }}</p>
                    </div>
                </div>

            </div>
        </div>

        {# --- CTA FINAL --- #}
        <div class="max-w-4xl mx-auto mt-32 px-4">
            <div class="bg-slate-900 rounded-[3rem] p-12 text-center relative overflow-hidden shadow-2xl">
                <div class="relative z-10">
                    <h3 class="text-3xl md:text-5xl font-black text-white uppercase italic mb-8">{{ 'workflow.cta.title'|trans|raw }}</h3>
                    <a href="{{ path('reservation_catalogue') }}" class="inline-flex items-center gap-4 bg-white text-slate-900 px-10 py-5 rounded-2xl font-black uppercase text-xs tracking-widest hover:bg-blue-600 hover:text-white transition-all transform hover:scale-105">
                        {{ 'workflow.cta.button'|trans }}
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M14 5l7 7m0 0l-7 7m7-7H3" /></svg>
                    </a>
                </div>
                <div class="absolute top-0 right-0 -mr-16 -mt-16 w-64 h-64 bg-blue-600/20 rounded-full blur-3xl"></div>
            </div>
        </div>

    </div>
{% endblock %}