{% extends 'base.twig' %}

{% block title %}{{'dons.title'|trans}}{% endblock %}
{% block meta_description %}{{'dons.description'|trans}}{% endblock %}

{% block canonical_url %}<link rel="canonical" href="{{ url('app_dons') }}" />{% endblock %}

{% block breadcrumb_schema %}
    <script type="application/ld+json">
        {
            "@context": "https://schema.org",
            "@type": "BreadcrumbList",
            "itemListElement": [
                {
                    "@type": "ListItem",
                    "position": 1,
                    "name": "{{ 'breadcrumb.home'|trans }}",
                    "item": "{{ app.request.schemeAndHttpHost }}"
                },
                {
                    "@type": "ListItem",
                    "position": 2,
                    "name": "{{ 'breadcrumb.dons'|trans }}",
                    "item": "{{ app.request.schemeAndHttpHost }}{{ app.request.pathInfo }}"
                }
            ]
        }
    </script>
{% endblock %}

{% block body %}
    <div class="bg-[#fbfbfb] min-h-screen font-sans text-gray-900 overflow-x-hidden">

        {# --- HEADER --- #}
        <header class="relative pt-16 pb-20 px-4 border-b-4 border-gray-900 bg-white">
            <div class="max-w-7xl mx-auto relative z-10">
                <h1 class="text-6xl md:text-8xl font-black italic uppercase tracking-tighter leading-none">
                    {{ 'dons.page_title'|trans }}
                </h1>
                <div class="h-3 w-48 bg-yellow-500 skew-x-[-20deg] mt-6 shadow-[4px_4px_0px_rgba(0,0,0,1)]"></div>
                <p class="mt-8 text-2xl font-bold italic text-gray-600 max-w-2xl border-l-8 border-indigo-600 pl-6">
                    {{ 'dons.introduction'|trans|raw }}
                </p>
            </div>
            <div class="absolute top-0 right-0 opacity-[0.03] pointer-events-none select-none hidden lg:block">
                <span class="text-[20rem] font-black italic uppercase leading-none">SUPPORT</span>
            </div>
        </header>

        <div class="max-w-5xl mx-auto px-4 py-16">

            {# --- IMPACT SECTION (RE-SUPPLY) --- #}
            <section class="grid md:grid-cols-1 gap-12 mb-20">
                <div class="bg-white border-4 border-gray-900 p-8 md:p-12 shadow-[12px_12px_0px_#4f46e5] italic">
                    <h2 class="text-4xl font-black uppercase tracking-tighter mb-6 flex items-center gap-4">
                        <span class="bg-indigo-600 text-white px-3 py-1 skew-x-[-15deg]">#</span>
                        {{ 'dons.impact_title'|trans }}
                    </h2>
                    <p class="text-xl font-bold text-gray-700 mb-10 leading-relaxed">{{ 'dons.impact_text'|trans }}</p>

                    <div class="grid sm:grid-cols-2 gap-6">
                        {% set items = [
                            {'icon': 'fas fa-trophy', 'title': 'dons.item.events_title', 'desc': 'dons.item.events'},
                            {'icon': 'fas fa-tools', 'title': 'dons.item.equipment_title', 'desc': 'dons.item.equipment'},
                            {'icon': 'fas fa-server', 'title': 'dons.item.website_hosting_title', 'desc': 'dons.item.website_hosting'},
                            {'icon': 'fas fa-plus-circle', 'title': 'dons.item.other_needs_title', 'desc': 'dons.item.other_needs'}
                        ] %}

                        {% for item in items %}
                            <div class="group border-2 border-gray-900 p-6 hover:bg-indigo-50 transition-colors">
                                <div class="w-12 h-12 bg-yellow-500 border-2 border-gray-900 flex items-center justify-center text-xl mb-4 group-hover:rotate-12 transition-transform">
                                    <i class="{{ item.icon }}"></i>
                                </div>
                                <h4 class="font-black uppercase tracking-tight text-indigo-600 mb-1">{{ item.title|trans }}</h4>
                                <p class="text-sm font-bold text-gray-500">{{ item.desc|trans }}</p>
                            </div>
                        {% endfor %}
                    </div>
                </div>
            </section>

            {# --- DONATION FORM (GEAR INTERFACE) --- #}
            <section class="relative">
                {# Background Decorative Element #}
                <div class="absolute inset-0 bg-gray-900 skew-y-1 transform origin-bottom-right -z-10"></div>

                <div class="bg-white border-4 border-gray-900 p-8 md:p-12 shadow-[16px_16px_0px_#eab308] italic">
                    <div class="text-center mb-12">
                        <h2 class="text-5xl font-black uppercase tracking-tighter mb-4">{{ 'dons.make_a_donation_title'|trans }}</h2>
                        <p class="text-indigo-600 font-black uppercase tracking-widest">{{ 'dons.call_to_action_text'|trans }}</p>
                    </div>

                    <form data-turbo="false" action="{{ path('app_dons') }}" method="post" class="space-y-8 max-w-2xl mx-auto">

                        <div class="grid md:grid-cols-2 gap-8">
                            {# Nom / Pseudo #}
                            <div class="space-y-2">
                                <label for="name" class="block font-black uppercase tracking-tight text-sm">
                                    [01] {{ 'form.name_label'|trans }} <span class="text-red-600">*</span>
                                </label>
                                <input type="text" id="name" name="name" required
                                       placeholder="{{ 'form.name_placeholder'|trans }}"
                                       class="w-full bg-gray-50 border-4 border-gray-900 p-4 font-bold focus:bg-white focus:ring-0 focus:border-indigo-600 outline-none transition-all">
                            </div>

                            {# Email #}
                            <div class="space-y-2">
                                <label for="email" class="block font-black uppercase tracking-tight text-sm">
                                    [02] {{ 'form.email_label'|trans }} <span class="text-red-600">*</span>
                                </label>
                                <input type="email" id="email" name="email" required
                                       placeholder="{{ 'form.email_placeholder'|trans }}"
                                       class="w-full bg-gray-50 border-4 border-gray-900 p-4 font-bold focus:bg-white focus:ring-0 focus:border-indigo-600 outline-none transition-all">
                            </div>
                        </div>

                        {# Montant #}
                        <div class="space-y-2">
                            <label for="amount" class="block font-black uppercase tracking-tight text-sm">
                                [03] {{ 'form.amount_label'|trans }} (€) <span class="text-red-600">*</span>
                            </label>
                            <div class="relative">
                                <input type="number" id="amount" name="amount" required min="1" step="0.01"
                                       placeholder="0.00"
                                       class="w-full bg-indigo-600 text-white text-4xl font-black p-6 border-4 border-gray-900 placeholder-white/50 focus:bg-indigo-700 outline-none transition-all skew-x-[-2deg]">
                                <span class="absolute right-6 top-1/2 -translate-y-1/2 text-2xl font-black opacity-50">EUR</span>
                            </div>
                        </div>

                        {# Message #}
                        <div class="space-y-2">
                            <label for="message" class="block font-black uppercase tracking-tight text-sm">
                                [04] {{ 'form.message_label'|trans }} <span class="text-gray-400">({{ 'form.optional'|trans }})</span>
                            </label>
                            <textarea id="message" name="message" rows="4"
                                      placeholder="{{ 'form.message_placeholder'|trans }}"
                                      class="w-full bg-gray-50 border-4 border-gray-900 p-4 font-bold focus:bg-white focus:ring-0 focus:border-indigo-600 outline-none transition-all"></textarea>
                        </div>

                        {# Bouton de soumission #}
                        <div class="text-center pt-8">
                            <button type="submit"
                                    class="group relative inline-block w-full md:w-auto">
                                <div class="absolute inset-0 bg-gray-900 translate-x-3 translate-y-3 group-hover:translate-x-0 group-hover:translate-y-0 transition-transform"></div>
                                <div class="relative bg-yellow-500 text-gray-900 px-16 py-6 font-black uppercase italic tracking-widest text-2xl border-4 border-gray-900 flex items-center justify-center gap-4">
                                    <i class="fas fa-heart text-red-600 group-hover:scale-125 transition-transform"></i>
                                    {{ 'form.submit_button_dons'|trans }}
                                </div>
                            </button>
                        </div>
                    </form>

                    <p class="mt-12 text-center text-xs font-black uppercase tracking-[0.3em] text-gray-400">
                        // {{ 'dons.thanks_note'|trans }} //
                    </p>
                </div>
            </section>
        </div>

        {# --- DECORATIVE MARQUEE --- #}
        <div class="mt-20 bg-indigo-600 py-6 overflow-hidden border-y-4 border-gray-900">
            <div class="whitespace-nowrap flex animate-marquee italic">
                {% for i in 1..10 %}
                    <span class="text-white font-black uppercase mx-8 text-2xl opacity-30">
                    {{ 'dons_roll'|trans }}
                </span>
                {% endfor %}
            </div>
        </div>

    </div>

    <style>
        @keyframes marquee {
            0% { transform: translateX(0); }
            100% { transform: translateX(-50%); }
        }
        .animate-marquee {
            display: flex;
            width: 200%;
            animation: marquee 35s linear infinite;
        }
        input::-webkit-outer-spin-button,
        input::-webkit-inner-spin-button {
            -webkit-appearance: none;
            margin: 0;
        }
    </style>
{% endblock %}