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

{% block title %}Mentions légales - SMA{% endblock %}

{% block body %}
<div class="bg-gray-50 min-h-screen">
    <div class="container mx-auto px-4 py-12 max-w-4xl">
        <div class="bg-white rounded-xl shadow-lg p-8 md:p-12">
            {# En-tête #}
            <div class="text-center mb-12">
                <h1 class="text-4xl font-bold text-[#045B79] mb-3">Mentions légales</h1>
                <p class="text-xl text-gray-600">Site web SMA</p>
            </div>
            
            {# Section Éditeur #}
            <div class="mb-12">
                <h2 class="text-2xl font-semibold text-[#045B79] mb-6 pb-2 border-b-2 border-[#045B79]/20 flex items-center">
                    <svg class="w-6 h-6 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/>
                    </svg>
                    Éditeur du site
                </h2>
                <div class="space-y-4 text-gray-700">
                    <p class="font-medium text-lg">Le site <span class="text-[#045B79]">www.sma-groupe.fr</span> est édité par :</p>
                    <div class="bg-gray-50 p-8 rounded-lg border border-gray-100 shadow-sm">
                        <p class="font-semibold text-[#045B79] text-xl mb-4">Solutions Médicalisées Adaptées SMA</p>
                        <ul class="space-y-3">
                            <li class="flex items-start">
                                <span class="text-gray-500 min-w-[140px] mt-[2px]">Forme juridique</span>
                                <span class="font-medium">Société à responsabilité limitée (Société à associé unique)</span>
                            </li>
                            <li class="flex items-start">
                                <span class="text-gray-500 min-w-[140px] mt-[2px]">Capital social</span>
                                <span class="font-medium">80 000 €</span>
                            </li>
                            <li class="flex items-start">
                                <span class="text-gray-500 min-w-[140px] mt-[2px]">Siège social</span>
                                <span class="font-medium">11 rue du grand ruage, 59650 Villeneuve d'Ascq</span>
                            </li>
                            <li class="flex items-start">
                                <span class="text-gray-500 min-w-[140px] mt-[2px]">SIREN</span>
                                <span class="font-medium">508156882 RCS LILLE METROPOLE</span>
                            </li>
                            <li class="flex items-start">
                                <span class="text-gray-500 min-w-[140px] mt-[2px]">N° de TVA</span>
                                <span class="font-medium">B 508 156 882</span>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>

            {# Section Contact #}
            <div class="mb-12">
                <h2 class="text-2xl font-semibold text-[#045B79] mb-6 pb-2 border-b-2 border-[#045B79]/20 flex items-center">
                    <svg class="w-6 h-6 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/>
                    </svg>
                    Contact
                </h2>
                <div class="grid md:grid-cols-2 gap-6">
                    <div class="bg-gray-50 p-6 rounded-lg border border-gray-100 shadow-sm hover:shadow-md transition-shadow duration-300">
                        <div class="flex items-center space-x-3 mb-3">
                            <svg class="w-5 h-5 text-[#045B79]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"/>
                            </svg>
                            <span class="font-medium text-lg">Téléphone</span>
                        </div>
                        <a href="tel:+33674753820" class="text-gray-700 ml-8 hover:text-[#045B79] transition-colors duration-300">06 74 75 38 20</a>
                    </div>
                    <div class="bg-gray-50 p-6 rounded-lg border border-gray-100 shadow-sm hover:shadow-md transition-shadow duration-300">
                        <div class="flex items-center space-x-3 mb-3">
                            <svg class="w-5 h-5 text-[#045B79]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/>
                            </svg>
                            <span class="font-medium text-lg">E-mail</span>
                        </div>
                        <a href="mailto:contact@sma.fr" class="text-gray-700 ml-8 hover:text-[#045B79] transition-colors duration-300">contact@sma.fr</a>
                    </div>
                </div>
            </div>

            {# Section Direction #}
            <div class="mb-12">
                <h2 class="text-2xl font-semibold text-[#045B79] mb-6 pb-2 border-b-2 border-[#045B79]/20 flex items-center">
                    <svg class="w-6 h-6 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 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>
                    Direction du site
                </h2>
                <div class="bg-gray-50 p-8 rounded-lg border border-gray-100 shadow-sm">
                    <div class="flex items-start gap-4">
                        <span class="text-gray-500 min-w-[180px]">Directeur de publication</span>
                        <span class="font-medium ml-4">M. WATREMEZ Romain</span>
                    </div>
                </div>
            </div>

            {# Section Hébergeur #}
            <div class="mb-12">
                <h2 class="text-2xl font-semibold text-[#045B79] mb-6 pb-2 border-b-2 border-[#045B79]/20 flex items-center">
                    <svg class="w-6 h-6 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9"/>
                    </svg>
                    Hébergement
                </h2>
                <div class="bg-gray-50 p-8 rounded-lg border border-gray-100 shadow-sm">
                    <p class="text-gray-700">Ce site est hébergé par la société OVH au capital de 189 898 056 euros – 2 rue Kellermann, 59100 Roubaix, France, numéro de téléphone : 1007</p>
                </div>
            </div>

            {# Note de bas de page #}
            <div class="text-sm text-gray-500 text-center mt-12 pt-6 border-t border-gray-200">
                <p> {{ "now"|date("Y") }} SMA - Tous droits réservés</p>
            </div>
        </div>
    </div>
</div>
{% endblock %}