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

{% block title %}Nos Services - ARA Solutions{% endblock %}
{% block meta_description %}Découvrez nos services : conseil, développement web, design et suivi. ARA Solutions vous accompagne dans tous vos projets numériques.{% endblock %}

{% block body %}
{# Header #}
<section class="bg-gradient-to-br from-primary-dark to-primary pt-28 pb-16">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <p class="text-accent-light text-sm font-medium tracking-wider uppercase mb-2">Ce que nous faisons</p>
        <h1 class="text-3xl sm:text-4xl lg:text-5xl font-bold text-white">Nos Services</h1>
        <p class="mt-3 text-gray-300 lg:text-lg max-w-2xl">Un accompagnement complet pour vos projets numériques, du conseil à la mise en ligne et au-delà.</p>
    </div>
</section>

{# Services Detail #}
<section class="py-20">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        {% for service in services %}
        <div class="{% if not loop.first %}mt-20 pt-20 border-t border-gray-100{% endif %}">
            <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center {{ loop.index is even ? 'lg:direction-rtl' : '' }}">
                <div class="text-center lg:text-left {{ loop.index is even ? 'lg:order-2' : '' }}">
                    <div class="w-14 h-14 rounded-xl bg-accent/10 flex items-center justify-center mb-6 mx-auto lg:mx-0">
                        {% if service.icon == 'lightbulb' %}
                            <svg class="w-7 h-7 text-accent" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"/></svg>
                        {% elseif service.icon == 'code' %}
                            <svg class="w-7 h-7 text-accent" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"/></svg>
                        {% elseif service.icon == 'palette' %}
                            <svg class="w-7 h-7 text-accent" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zm0 0h12a2 2 0 002-2v-4a2 2 0 00-2-2h-2.343M11 7.343l1.657-1.657a2 2 0 012.828 0l2.829 2.829a2 2 0 010 2.828l-8.486 8.485M7 17h.01"/></svg>
                        {% elseif service.icon == 'chart' %}
                            <svg class="w-7 h-7 text-accent" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/></svg>
                        {% endif %}
                    </div>
                    <h2 class="text-2xl lg:text-3xl font-bold text-gray-900 mb-4">{{ service.title }}</h2>
                    <p class="text-gray-600 lg:text-lg leading-relaxed mb-6">{{ service.description }}</p>
                    {% if service.features is defined %}
                    <ul class="space-y-3">
                        {% for feature in service.features %}
                        <li class="flex items-center gap-3 text-sm lg:text-base text-gray-600">
                            <svg class="w-5 h-5 text-accent shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
                            {{ feature }}
                        </li>
                        {% endfor %}
                    </ul>
                    {% endif %}
                </div>
                <div class="{{ loop.index is even ? 'lg:order-1' : '' }}">
                    {% set service_images = {'conseil': 'services/conseil.png', 'developpement': 'services/developpement.png', 'design': 'services/design.png', 'suivi': 'services/suivi.png'} %}
                    {% if service.slug in service_images|keys %}
                    <div class="rounded-2xl overflow-hidden max-w-md mx-auto">
                        <img src="{{ asset('images/' ~ service_images[service.slug]) }}"
                             alt="{{ service.title }}"
                             class="w-full h-auto">
                    </div>
                    {% else %}
                    <div class="bg-gradient-to-br from-surface to-surface-alt rounded-2xl p-12 flex items-center justify-center aspect-square max-w-md mx-auto">
                        <svg class="w-32 h-32 text-accent/20" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"/></svg>
                    </div>
                    {% endif %}
                </div>
            </div>
        </div>
        {% endfor %}
    </div>
</section>

{# CTA #}
<section class="py-16 bg-surface">
    <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
        <h2 class="text-2xl lg:text-3xl font-bold text-gray-900 mb-4">Prêt à démarrer votre projet ?</h2>
        <p class="text-gray-500 lg:text-lg mb-8">Contactez-nous pour discuter de vos besoins et obtenir un devis personnalisé.</p>
        <a href="{{ path('app_contact') }}" class="inline-flex items-center px-6 py-3 bg-accent text-white font-medium rounded-lg hover:bg-accent-dark transition-colors">
            Nous contacter
        </a>
    </div>
</section>
{% endblock %}