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

{% block title %}ARA Solutions - Développement Web sur mesure{% endblock %}

{% block body %}
{# Hero Section #}
<section class="relative min-h-screen flex items-start sm:items-center pt-16 overflow-hidden">
    <div class="absolute inset-0 bg-cover bg-center" style="background-image: url('{{ asset('images/hero/hero-bg.png') }}')"></div>
    <div class="absolute inset-0 bg-gradient-to-br from-primary-dark/90 via-primary/80 to-primary-light/70"></div>
    <div class="absolute inset-0 opacity-10">
        <div class="absolute top-20 left-10 w-72 h-72 bg-accent rounded-full blur-3xl"></div>
        <div class="absolute bottom-20 right-10 w-96 h-96 bg-accent-light rounded-full blur-3xl"></div>
    </div>
    <div class="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20">
        <div class="max-w-3xl">
            <p class="text-accent-light text-sm font-medium tracking-wider uppercase mb-4">Développement Web</p>
            <h1 class="text-4xl sm:text-5xl lg:text-6xl xl:text-7xl font-bold text-white leading-tight mb-6">
                Donnez vie à vos
                <span class="text-accent-light">projets numériques</span>
            </h1>
            <p class="text-lg lg:text-xl text-gray-300 leading-relaxed mb-8 max-w-2xl">
                {{ company.description }}
            </p>
            <div class="flex flex-col sm:flex-row gap-4">
                <a href="{{ path('app_contact') }}" class="inline-flex items-center justify-center px-6 py-3 bg-accent text-white font-medium rounded-lg hover:bg-accent-dark transition-colors">
                    Démarrer un projet
                    <svg class="w-4 h-4 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"/></svg>
                </a>
                <a href="{{ path('app_references') }}" class="inline-flex items-center justify-center px-6 py-3 border border-gray-400 text-white font-medium rounded-lg hover:bg-white/10 transition-colors">
                    Voir nos réalisations
                </a>
            </div>
        </div>
    </div>
</section>

{# Services Section #}
<section class="py-20 bg-surface">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center mb-12">
            <p class="text-accent text-sm font-medium tracking-wider uppercase mb-2">Ce que nous faisons</p>
            <h2 class="text-3xl lg:text-4xl font-bold text-gray-900">Nos services</h2>
        </div>
        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
            {% for service in services %}
                {% include 'components/_service_card.html.twig' %}
            {% endfor %}
        </div>
        <div class="text-center mt-10">
            <a href="{{ path('app_services') }}" class="text-accent font-medium text-sm hover:text-accent-dark transition-colors inline-flex items-center gap-1">
                En savoir plus sur nos services
                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"/></svg>
            </a>
        </div>
    </div>
</section>

{# References Section #}
<section class="py-20 bg-white">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center mb-12">
            <p class="text-accent text-sm font-medium tracking-wider uppercase mb-2">Nos réalisations</p>
            <h2 class="text-3xl lg:text-4xl font-bold text-gray-900">Références à la une</h2>
            <p class="mt-3 text-gray-500 lg:text-lg max-w-xl mx-auto">Découvrez quelques-uns de nos projets récents, du site vitrine à l'application mobile.</p>
        </div>
        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
            {% for reference in references|slice(0, 6) %}
                {% include 'components/_reference_card.html.twig' %}
            {% endfor %}
        </div>
        <div class="text-center mt-10">
            <a href="{{ path('app_references') }}" class="inline-flex items-center px-6 py-3 bg-primary text-white font-medium rounded-lg hover:bg-primary-light transition-colors">
                Voir toutes nos références
                <svg class="w-4 h-4 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"/></svg>
            </a>
        </div>
    </div>
</section>

{# CTA Section #}
<section class="py-20 bg-primary">
    <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
        <h2 class="text-3xl lg:text-4xl font-bold text-white mb-4">Un projet en tête ?</h2>
        <p class="text-gray-300 lg:text-lg mb-8 max-w-2xl mx-auto">Discutons ensemble de votre projet. Nous vous proposons un accompagnement personnalisé pour donner vie à vos idées.</p>
        <a href="{{ path('app_contact') }}" class="inline-flex items-center px-8 py-3 bg-accent text-white font-medium rounded-lg hover:bg-accent-dark transition-colors">
            Contactez-nous
            <svg class="w-4 h-4 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"/></svg>
        </a>
    </div>
</section>
{% endblock %}