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

{% block title %}À propos - ARA Solutions{% endblock %}
{% block meta_description %}Découvrez ARA Solutions, votre partenaire en développement web à Cenon. Nous accompagnons PME, artisans et associations dans leur transformation numérique.{% 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">Qui sommes-nous</p>
        <h1 class="text-3xl sm:text-4xl lg:text-5xl font-bold text-white">À propos d'ARA Solutions</h1>
    </div>
</section>

{# About Content #}
<section class="py-20">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="max-w-3xl">
            <h2 class="text-2xl lg:text-3xl font-bold text-gray-900 mb-6">Notre mission</h2>
            <p class="text-gray-600 lg:text-lg leading-relaxed mb-6">
                {{ company.description }}
            </p>
            <p class="text-gray-600 lg:text-lg leading-relaxed mb-6">
                Depuis notre création, nous avons accompagné de nombreuses entreprises, artisans, clubs et associations dans leur transformation numérique. Notre approche repose sur l'écoute, la transparence et l'engagement à fournir des solutions de qualité.
            </p>
            <p class="text-gray-600 lg:text-lg leading-relaxed">
                Basés à Cenon, en Gironde, nous intervenons dans toute la France pour des projets de toutes tailles. Du site vitrine à l'application mobile, en passant par les solutions SaaS, nous mettons notre expertise au service de vos ambitions.
            </p>
        </div>
    </div>
</section>

{# Values #}
<section class="py-20 bg-surface">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <h2 class="text-2xl lg:text-3xl font-bold text-gray-900 mb-12 text-center">Nos valeurs</h2>
        <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
            <div class="text-center">
                <div class="w-14 h-14 rounded-xl bg-accent/10 flex items-center justify-center mx-auto mb-4">
                    <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="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"/></svg>
                </div>
                <h3 class="text-lg lg:text-xl font-semibold text-gray-900 mb-2">Proximité</h3>
                <p class="text-sm lg:text-base text-gray-500 leading-relaxed">
                    Nous privilégions une relation de confiance avec nos clients. Chaque projet bénéficie d'un suivi personnalisé et d'un interlocuteur dédié.
                </p>
            </div>
            <div class="text-center">
                <div class="w-14 h-14 rounded-xl bg-accent/10 flex items-center justify-center mx-auto mb-4">
                    <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 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg>
                </div>
                <h3 class="text-lg lg:text-xl font-semibold text-gray-900 mb-2">Qualité</h3>
                <p class="text-sm lg:text-base text-gray-500 leading-relaxed">
                    Nous utilisons les meilleures technologies et pratiques de développement pour garantir des solutions performantes, sécurisées et pérennes.
                </p>
            </div>
            <div class="text-center">
                <div class="w-14 h-14 rounded-xl bg-accent/10 flex items-center justify-center mx-auto mb-4">
                    <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="M13 10V3L4 14h7v7l9-11h-7z"/></svg>
                </div>
                <h3 class="text-lg lg:text-xl font-semibold text-gray-900 mb-2">Réactivité</h3>
                <p class="text-sm lg:text-base text-gray-500 leading-relaxed">
                    Nous nous engageons à respecter les délais et à être disponibles pour répondre à vos questions tout au long du projet.
                </p>
            </div>
        </div>
    </div>
</section>

{# Stats #}
<section class="py-20 bg-primary">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="grid grid-cols-2 md:grid-cols-4 gap-8 text-center">
            <div>
                <p class="text-4xl font-bold text-white">25+</p>
                <p class="text-sm lg:text-base text-gray-300 mt-1">Projets réalisés</p>
            </div>
            <div>
                <p class="text-4xl font-bold text-white">4</p>
                <p class="text-sm lg:text-base text-gray-300 mt-1">Services proposés</p>
            </div>
            <div>
                <p class="text-4xl font-bold text-white">100%</p>
                <p class="text-sm lg:text-base text-gray-300 mt-1">Sur mesure</p>
            </div>
            <div>
                <p class="text-4xl font-bold text-white">33</p>
                <p class="text-sm lg:text-base text-gray-300 mt-1">Gironde, France</p>
            </div>
        </div>
    </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">Envie de travailler ensemble ?</h2>
        <p class="text-gray-500 lg:text-lg mb-8">Contactez-nous pour discuter de votre projet.</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 %}