{% extends 'base.twig' %}

{% block title %}{{'hosting_page_title'|trans}}{% endblock %}
{% block meta_description %}{{'hosting_page_title'|trans}}{% endblock %}

{% block body %}
    <main id="hosting" class="max-w-6xl mx-auto px-4 py-12 font-sans text-gray-800 bg-[#fbfbfb]">

        {# Header Dynamique Style Esport #}
        <header class="mb-20 relative py-10">
            <div class="relative z-10">
                <h1 class="text-4xl md:text-6xl font-black text-gray-900 tracking-tighter uppercase italic leading-none esrgaa-voice">
                    {{ 'hosting_main_title'|trans }}
                </h1>
                <div class="mt-4 flex items-center gap-2">
                    <div class="h-2 w-24 bg-yellow-500 skew-x-[-20deg]"></div>
                    <div class="h-2 w-12 bg-gray-900 skew-x-[-20deg]"></div>
                </div>
            </div>
        </header>

        <div class="space-y-24">

            {# SECTION 1 : INFRASTRUCTURE CLOUD #}
            <section class="relative">
                <div class="inline-block bg-[#0f172a] text-yellow-500 px-6 py-3 font-black italic skew-x-[-15deg] mb-6 shadow-xl border-b-2 border-yellow-600">
                <span class="skew-x-[15deg] block uppercase tracking-wider text-lg">
                    // 1. {{ 'hosting_infrastructure_title'|trans }}
                </span>
                </div>
                <div class="bg-gray-900 text-white p-8 rounded-lg border-r-8 border-yellow-500 shadow-xl overflow-hidden">
                    <div class="flex flex-col md:flex-row justify-between items-start md:items-center gap-6">
                        <div>
                            <p class="text-yellow-500 font-black text-2xl italic uppercase mb-2">{{ 'hosting_cloud_provider'|trans }}</p>
                            <p class="text-sm italic text-gray-400 leading-relaxed">{{ 'hosting_location_detail'|trans }}</p>
                        </div>
                        <div class="flex gap-4">
                            <span class="text-[10px] bg-white/10 px-3 py-1 font-mono uppercase border border-white/20">Region: eu-west4</span>
                            <span class="text-[10px] bg-green-500/20 text-green-400 px-3 py-1 font-mono uppercase border border-green-500/30">Tier 3+ Compliance</span>
                        </div>
                    </div>
                </div>
            </section>

            {# SECTION 2 : ÉDITEUR DU SITE #}
            <section class="relative">
                <div class="inline-block bg-[#0f172a] text-yellow-500 px-6 py-3 font-black italic skew-x-[-15deg] mb-6 shadow-xl border-b-2 border-yellow-600">
                <span class="skew-x-[15deg] block uppercase tracking-wider text-lg">
                    // 2. {{ 'hosting_editor_title'|trans }}
                </span>
                </div>
                <div class="bg-white border-2 border-gray-900 p-8 rounded-lg shadow-[8px_8px_0px_rgba(0,0,0,1)] grid grid-cols-1 md:grid-cols-2 gap-8">
                    <div>
                        <p class="font-black text-gray-900 uppercase text-xl italic mb-4">{{ 'hosting_editor_name'|trans }}</p>
                        <p class="text-sm italic text-gray-600 leading-relaxed">
                            {{ 'hosting_editor_address'|trans|raw }}
                        </p>
                        <p class="text-xs text-gray-400 mt-4 italic">{{ 'hosting_editor_note'|trans }}</p>
                    </div>
                    <div class="flex flex-col justify-center items-start md:items-end">
                        <a href="mailto:{{ 'hosting_editor_email'|trans }}" class="group bg-yellow-500 text-gray-900 px-8 py-4 font-black italic uppercase hover:bg-gray-900 hover:text-white transition-all skew-x-[-10deg] shadow-[4px_4px_0px_rgba(0,0,0,1)]">
                            <span class="skew-x-[10deg] block tracking-tighter">{{ 'hosting_editor_email'|trans }}</span>
                        </a>
                    </div>
                </div>
            </section>

            {# SECTION 3 : STACK TECHNIQUE & SÉCURITÉ #}
            <section class="relative">
                <div class="inline-block bg-[#0f172a] text-yellow-500 px-6 py-3 font-black italic skew-x-[-15deg] mb-6 shadow-xl border-b-2 border-yellow-600">
                <span class="skew-x-[15deg] block uppercase tracking-wider text-lg">
                    // 3. {{ 'hosting_security_title'|trans }}
                </span>
                </div>
                <div class="bg-white border-2 border-gray-900 p-8 rounded-lg shadow-[8px_8px_0px_rgba(0,0,0,1)] grid grid-cols-1 md:grid-cols-3 gap-6">
                    <div class="p-6 border-l-4 border-orange-500 bg-orange-50/50 italic">
                        <strong class="block text-gray-900 uppercase text-xs tracking-widest mb-2">{{ 'hosting_cloudflare_label'|trans }}</strong>
                        <p class="text-[11px] text-gray-600">{{ 'hosting_cloudflare_desc'|trans }}</p>
                    </div>
                    <div class="p-6 border-l-4 border-purple-600 bg-purple-50/50 italic">
                        <strong class="block text-gray-900 uppercase text-xs tracking-widest mb-2">{{ 'hosting_registrars_label'|trans }}</strong>
                        <p class="text-[11px] text-gray-600">{{ 'hosting_registrar_name'|trans }} / {{ 'hosting_dns_provider'|trans }}</p>
                    </div>
                    <div class="p-6 border-l-4 border-blue-600 bg-blue-50/50 italic">
                        <strong class="block text-gray-900 uppercase text-xs tracking-widest mb-2">{{ 'hosting_monitoring_label'|trans }}</strong>
                        <p class="text-[11px] text-gray-600">{{ 'hosting_monitoring_desc'|trans }}</p>
                    </div>
                </div>
            </section>

            {# SECTION 4 : SYSTÈME DE MESSAGERIE #}
            <section class="relative">
                <div class="inline-block bg-[#0f172a] text-yellow-500 px-6 py-3 font-black italic skew-x-[-15deg] mb-6 shadow-xl border-b-2 border-yellow-600">
                <span class="skew-x-[15deg] block uppercase tracking-wider text-lg">
                    // 4. {{ 'hosting_mail_system_title'|trans }}
                </span>
                </div>
                <div class="bg-gray-900 text-white p-8 rounded-lg border-l-8 border-red-600 shadow-xl">
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-10 items-center">
                        <p class="text-sm italic text-gray-300 leading-relaxed">{{ 'hosting_mail_system_desc'|trans }}</p>
                        <div class="bg-white/5 p-5 border border-white/10 italic">
                            <p class="text-red-500 font-black uppercase text-xs mb-2 tracking-widest">{{ 'hosting_privacy_alert_label'|trans }}</p>
                            <p class="text-[10px] text-gray-400 leading-normal">{{ 'hosting_privacy_alert_desc'|trans }}</p>
                        </div>
                    </div>
                </div>
            </section>

            {# SECTION 5 : CONFORMITÉ & SIGNALEMENT #}
            <section class="relative">
                <div class="inline-block bg-[#0f172a] text-yellow-500 px-6 py-3 font-black italic skew-x-[-15deg] mb-6 shadow-xl border-b-2 border-yellow-600">
                <span class="skew-x-[15deg] block uppercase tracking-wider text-lg">
                    // 5. {{ 'hosting_compliance_title'|trans }}
                </span>
                </div>
                <div class="bg-white border-2 border-gray-900 p-8 rounded-lg shadow-[8px_8px_0px_rgba(0,0,0,1)] grid grid-cols-1 md:grid-cols-2 gap-12">
                    <div class="flex flex-col justify-center">
                        <p class="text-sm italic text-gray-600 leading-relaxed">{{ 'hosting_compliance_desc'|trans }}</p>
                    </div>
                    <div class="bg-gray-50 p-8 flex flex-col justify-center items-center border-2 border-dashed border-gray-300 text-center">
                        <p class="text-[10px] font-black uppercase mb-4 text-gray-400 tracking-widest italic">{{ 'hosting_signalement_label'|trans }}</p>
                        <a href="mailto:{{ 'hosting_signalement_email'|trans }}" class="text-red-600 font-black italic text-xl hover:text-gray-900 transition-colors">
                            {{ 'hosting_signalement_email'|trans }}
                        </a>
                    </div>
                </div>
            </section>

        </div>
    </main>
{% endblock %}