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

{% block title %}Tarifs - E-Ticket{% endblock %}
{% block description %}Tarifs et commissions de la plateforme E-Ticket pour les organisateurs d'evenements{% endblock %}

{% block stylesheets %}
<script type="application/ld+json">
[
    {
        "@context": "https://schema.org",
        "@type": "Product",
        "name": "E-Ticket Gratuit",
        "description": "Offre gratuite : 1 evenement, billets standards, QR Code securise, paiement Stripe",
        "brand": {"@type": "Organization", "name": "E-Ticket"},
        "offers": {
            "@type": "Offer",
            "price": "0",
            "priceCurrency": "EUR",
            "availability": "https://schema.org/OnlineOnly",
            "url": "https://ticket.e-cosplay.fr/tarifs"
        }
    },
    {
        "@context": "https://schema.org",
        "@type": "Product",
        "name": "E-Ticket Basic",
        "description": "Offre Basic : evenements illimites, generation PDF, QR Code, paiement Stripe",
        "brand": {"@type": "Organization", "name": "E-Ticket"},
        "offers": {
            "@type": "Offer",
            "price": "0",
            "priceCurrency": "EUR",
            "availability": "https://schema.org/OnlineOnly",
            "url": "https://ticket.e-cosplay.fr/tarifs"
        }
    },
    {
        "@context": "https://schema.org",
        "@type": "Product",
        "name": "E-Ticket Sur-mesure",
        "description": "Offre sur-mesure : evenements illimites, design personnalise, image par billet, accompagnement dedie",
        "brand": {"@type": "Organization", "name": "E-Ticket"},
        "offers": {
            "@type": "AggregateOffer",
            "lowPrice": "0",
            "priceCurrency": "EUR",
            "availability": "https://schema.org/OnlineOnly",
            "url": "https://ticket.e-cosplay.fr/tarifs"
        }
    }
]
</script>
{% endblock %}

{% block body %}
<div class="bg-[#fbfbfb] overflow-x-hidden italic font-sans">

    <section class="relative bg-white border-b-8 border-gray-900 px-4 pt-20 pb-16">
        <div class="absolute inset-0 opacity-[0.03] pointer-events-none select-none overflow-hidden">
            <span class="text-[8rem] md:text-[20rem] font-black uppercase leading-none block -rotate-12 translate-y-10">TARIFS</span>
        </div>
        <div class="max-w-4xl mx-auto relative z-10 text-center">
            <h1 class="text-4xl md:text-6xl font-black uppercase tracking-tighter leading-[0.85] mb-4">Tarifs transparents</h1>
            <p class="text-lg font-bold text-gray-600">Commission uniquement sur les ventes realisees.</p>
        </div>
    </section>

    <section class="py-12 px-4">
        <div class="max-w-5xl mx-auto">
            <h2 class="text-2xl font-black uppercase tracking-tighter text-center mb-8">Nos offres</h2>

            <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-12">
                <div class="border-4 border-gray-900 p-6 bg-white shadow-[6px_6px_0px_rgba(0,0,0,1)]">
                    <div class="inline-block px-3 py-1 border-2 border-gray-900 bg-gray-100 text-[10px] font-black uppercase tracking-widest mb-4">Gratuit</div>
                    <p class="text-4xl font-black mb-1">0 &euro;</p>
                    <p class="text-xs font-bold text-gray-400 mb-6">Aucun frais fixe</p>
                    <ul class="space-y-3 text-sm font-bold mb-6">
                        <li class="text-green-600">&#10003; 1 evenement</li>
                        <li class="text-green-600">&#10003; Billets standards</li>
                        <li class="text-green-600">&#10003; QR code et verification</li>
                        <li class="text-green-600">&#10003; Paiement Stripe</li>
                        <li class="text-green-600">&#10003; Email de confirmation</li>
                        <li class="text-gray-300">&#10005; Evenements illimites</li>
                        <li class="text-gray-300">&#10005; Generation PDF</li>
                        <li class="text-gray-300">&#10005; Image par billet</li>
                        <li class="text-gray-300">&#10005; Design personnalise</li>
                    </ul>
                    <a href="mailto:contact@e-cosplay.fr?subject=Offre Gratuit" class="block text-center px-4 py-3 border-3 border-gray-900 bg-white font-black uppercase text-xs tracking-widest hover:bg-gray-100 transition-all">Nous contacter</a>
                </div>

                <div class="border-4 border-gray-900 p-6 bg-white shadow-[6px_6px_0px_rgba(0,0,0,1)] relative">
                    <div class="absolute top-0 right-0 bg-indigo-600 text-white font-black uppercase text-[10px] tracking-widest px-3 py-1">Populaire</div>
                    <div class="inline-block px-3 py-1 border-2 border-gray-900 bg-[#fabf04] text-[10px] font-black uppercase tracking-widest mb-4">Basic</div>
                    <p class="text-4xl font-black mb-1">20 &euro;<span class="text-sm font-bold text-gray-500"> / mois</span></p>
                    <p class="text-xs font-bold text-gray-400 mb-6">+ commission sur les ventes</p>
                    <ul class="space-y-3 text-sm font-bold mb-6">
                        <li class="text-green-600">&#10003; Evenements illimites</li>
                        <li class="text-green-600">&#10003; Billets standards</li>
                        <li class="text-green-600">&#10003; QR code et verification</li>
                        <li class="text-green-600">&#10003; Paiement Stripe</li>
                        <li class="text-green-600">&#10003; Email de confirmation</li>
                        <li class="text-green-600">&#10003; Generation PDF automatique</li>
                        <li class="text-green-600">&#10003; Invitations gratuites</li>
                        <li class="text-green-600">&#10003; Reservation brocantes</li>
                        <li class="text-green-600">&#10003; Vote en ligne</li>
                        <li class="text-gray-300">&#10005; Image par billet</li>
                        <li class="text-gray-300">&#10005; Design personnalise</li>
                    </ul>
                    <a href="mailto:contact@e-cosplay.fr?subject=Offre Basic" class="block text-center px-4 py-3 border-3 border-gray-900 bg-[#fabf04] font-black uppercase text-xs tracking-widest hover:bg-yellow-500 transition-all">Nous contacter</a>
                </div>

                <div class="border-4 border-gray-900 p-6 bg-gray-900 text-white shadow-[6px_6px_0px_rgba(0,0,0,1)]">
                    <div class="inline-block px-3 py-1 border-2 border-white bg-indigo-600 text-[10px] font-black uppercase tracking-widest mb-4">Sur-mesure</div>
                    <p class="text-4xl font-black mb-1">Sur devis</p>
                    <p class="text-xs font-bold text-gray-400 mb-6">Commission et fonctionnalites personnalisees</p>
                    <ul class="space-y-3 text-sm font-bold mb-6">
                        <li class="text-green-400">&#10003; Evenements illimites</li>
                        <li class="text-green-400">&#10003; Design de billets personnalise</li>
                        <li class="text-green-400">&#10003; Image par billet</li>
                        <li class="text-green-400">&#10003; QR code et verification</li>
                        <li class="text-green-400">&#10003; Generation PDF automatique</li>
                        <li class="text-green-400">&#10003; Categories illimitees</li>
                        <li class="text-green-400">&#10003; Invitations gratuites</li>
                        <li class="text-green-400">&#10003; Reservation brocantes</li>
                        <li class="text-green-400">&#10003; Vote en ligne</li>
                        <li class="text-green-400">&#10003; Accompagnement dedie</li>
                    </ul>
                    <a href="mailto:contact@e-cosplay.fr?subject=Offre Sur-mesure" class="block text-center px-4 py-3 border-2 border-white bg-white text-gray-900 font-black uppercase text-xs tracking-widest hover:bg-[#fabf04] transition-all">Nous contacter</a>
                </div>
            </div>
        </div>
    </section>

    <section class="py-12 px-4 bg-white border-t-8 border-gray-900">
        <div class="max-w-5xl mx-auto">
            <h2 class="text-2xl font-black uppercase tracking-tighter text-center mb-8">Commissions</h2>

            <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
                <div class="border-4 border-gray-900 p-6 bg-white shadow-[6px_6px_0px_rgba(0,0,0,1)] text-center">
                    <p class="text-[10px] font-black uppercase tracking-widest text-gray-400 mb-2">Commission E-Ticket</p>
                    <p class="text-5xl font-black text-indigo-600">3%</p>
                    <p class="text-sm font-bold text-gray-500 mt-2">Par transaction, sur le montant HT</p>
                    <p class="text-xs font-bold text-gray-400 mt-1">Negociable selon votre profil</p>
                </div>
                <div class="border-4 border-gray-900 p-6 bg-white shadow-[6px_6px_0px_rgba(0,0,0,1)] text-center">
                    <p class="text-[10px] font-black uppercase tracking-widest text-gray-400 mb-2">Frais Stripe</p>
                    <p class="text-5xl font-black">1.5% + 0.25 &euro;</p>
                    <p class="text-sm font-bold text-gray-500 mt-2">Par transaction, cartes europeennes</p>
                    <p class="text-xs font-bold text-gray-400 mt-1">Non negociable, fixe par Stripe</p>
                </div>
            </div>

            <div class="border-4 border-gray-900 p-6 bg-white shadow-[6px_6px_0px_rgba(0,0,0,1)] overflow-x-auto" id="commission-simulator">
                <div class="flex flex-wrap items-center gap-4 mb-6">
                    <p class="text-sm font-black uppercase tracking-widest text-gray-400">Simulateur de commission</p>
                    <div class="flex items-center gap-3 flex-1 min-w-[200px]">
                        <label for="rate-slider" class="text-xs font-black uppercase tracking-widest text-gray-500">Taux E-Ticket</label>
                        <input type="range" id="rate-slider" min="0" max="3" step="0.1" value="3" class="flex-1 accent-indigo-600 cursor-pointer">
                        <span id="rate-display" class="text-xl font-black text-indigo-600 w-16 text-right">3%</span>
                    </div>
                </div>
                <table class="w-full text-sm font-bold" style="min-width: 500px;">
                    <thead>
                        <tr class="border-b-3 border-gray-900">
                            <th class="py-2 text-left text-gray-400 uppercase tracking-widest text-xs">Prix billet</th>
                            <th class="py-2 text-right text-gray-400 uppercase tracking-widest text-xs">E-Ticket (<span id="th-rate">3</span>%)</th>
                            <th class="py-2 text-right text-gray-400 uppercase tracking-widest text-xs">Stripe</th>
                            <th class="py-2 text-right text-gray-400 uppercase tracking-widest text-xs">Total frais</th>
                            <th class="py-2 text-right text-green-600 uppercase tracking-widest text-xs">Vous recevez</th>
                        </tr>
                    </thead>
                    <tbody id="commission-tbody">
                    </tbody>
                </table>
            </div>
            <script>
            (function() {
                var prices = [1, 2, 5, 10, 15, 20]
                var slider = document.getElementById('rate-slider')
                var display = document.getElementById('rate-display')
                var thRate = document.getElementById('th-rate')
                var tbody = document.getElementById('commission-tbody')

                function fmt(v) { return v.toFixed(2).replace('.', ',') + ' \u20AC' }

                function update() {
                    var rate = parseFloat(slider.value)
                    display.textContent = rate.toFixed(1) + '%'
                    thRate.textContent = rate.toFixed(1)
                    var html = ''
                    for (var i = 0; i < prices.length; i++) {
                        var p = prices[i]
                        var ef = p * rate / 100
                        var sf = p * 0.015 + 0.25
                        var tf = ef + sf
                        var net = p - tf
                        html += '<tr class="border-b border-gray-100">'
                        html += '<td class="py-2 text-left">' + fmt(p) + '</td>'
                        html += '<td class="py-2 text-right text-red-600">' + fmt(ef) + '</td>'
                        html += '<td class="py-2 text-right text-red-600">' + fmt(sf) + '</td>'
                        html += '<td class="py-2 text-right text-red-600">' + fmt(tf) + '</td>'
                        html += '<td class="py-2 text-right text-green-600 font-black">' + fmt(Math.max(0, net)) + '</td>'
                        html += '</tr>'
                    }
                    tbody.innerHTML = html
                }

                slider.addEventListener('input', update)
                update()
            })()
            </script>

            <div class="border-4 border-gray-900 p-6 bg-[#fabf04] shadow-[6px_6px_0px_rgba(0,0,0,1)] mt-6 text-center">
                <p class="font-black uppercase text-sm tracking-widest mb-2">Billets gratuits = 0 &euro; de commission</p>
                <p class="text-sm font-bold text-gray-700">Aucune commission E-Ticket ni Stripe sur les billets a 0 &euro; et les invitations.</p>
            </div>
        </div>
    </section>

    <section class="py-12 px-4">
        <div class="max-w-5xl mx-auto">
            <h2 class="text-2xl font-black uppercase tracking-tighter text-center mb-8">Inclus dans toutes les offres</h2>
            <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6">
                <div class="border-4 border-gray-900 p-5 bg-white shadow-[4px_4px_0px_rgba(0,0,0,1)]">
                    <div class="text-2xl mb-2">&#128274;</div>
                    <h3 class="font-black uppercase text-xs tracking-widest mb-1">Paiement securise</h3>
                    <p class="text-xs font-bold text-gray-500">Via Stripe, conforme PCI DSS</p>
                </div>
                <div class="border-4 border-gray-900 p-5 bg-white shadow-[4px_4px_0px_rgba(0,0,0,1)]">
                    <div class="text-2xl mb-2">&#127903;</div>
                    <h3 class="font-black uppercase text-xs tracking-widest mb-1">Billets QR code</h3>
                    <p class="text-xs font-bold text-gray-500">Billets electroniques avec cle de securite</p>
                </div>
                <div class="border-4 border-gray-900 p-5 bg-white shadow-[4px_4px_0px_rgba(0,0,0,1)]">
                    <div class="text-2xl mb-2">&#128231;</div>
                    <h3 class="font-black uppercase text-xs tracking-widest mb-1">Emails signes</h3>
                    <p class="text-xs font-bold text-gray-500">S/MIME pour l'authenticite</p>
                </div>
                <div class="border-4 border-gray-900 p-5 bg-white shadow-[4px_4px_0px_rgba(0,0,0,1)]">
                    <div class="text-2xl mb-2">&#128200;</div>
                    <h3 class="font-black uppercase text-xs tracking-widest mb-1">Statistiques</h3>
                    <p class="text-xs font-bold text-gray-500">Ventes en temps reel</p>
                </div>
                <div class="border-4 border-gray-900 p-5 bg-white shadow-[4px_4px_0px_rgba(0,0,0,1)]">
                    <div class="text-2xl mb-2">&#128737;</div>
                    <h3 class="font-black uppercase text-xs tracking-widest mb-1">RGPD</h3>
                    <p class="text-xs font-bold text-gray-500">Donnees hebergees en France</p>
                </div>
                <div class="border-4 border-gray-900 p-5 bg-white shadow-[4px_4px_0px_rgba(0,0,0,1)]">
                    <div class="text-2xl mb-2">&#9889;</div>
                    <h3 class="font-black uppercase text-xs tracking-widest mb-1">Cloudflare</h3>
                    <p class="text-xs font-bold text-gray-500">HTTPS, CDN, protection DDoS</p>
                </div>
            </div>
        </div>
    </section>

    <section class="py-8 px-4 bg-gray-900 text-white text-center">
        <p class="font-bold text-sm">Une question ? <a href="mailto:contact@e-cosplay.fr" class="text-[#fabf04] hover:underline">contact@e-cosplay.fr</a></p>
        <p class="text-xs font-bold text-gray-500 mt-2">Tarifs exprimes en euros HT. E-Ticket by E-Cosplay.</p>
    </section>
</div>
{% endblock %}
