{% set heroHeight = (page.page == 'ACCUEIL') ? '85vh' : '60vh' %}

<section class="relative flex items-center bg-accent text-accent-foreground" 
         style="min-height: {{ heroHeight }};">

    <div class="absolute inset-0 bg-cover bg-center opacity-20"
         style="background-color: {{ page.heroCouleurArrierePlan|default('#000000') }};
                background-image: url('{{ page.heroImage ? asset('uploads/website/' ~ page.heroImage) : 'https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?auto=format&fit=crop&w=2000&q=80' }}');">
    </div>

    <div class="container relative mx-auto px-4 py-20">
        <div data-aos="fade-up" data-aos-duration="700" class="max-w-2xl">
            <span class="mb-4 inline-block rounded-full bg-primary/20 px-4 py-1 font-heading text-xs font-semibold uppercase tracking-widest text-primary">
                {{ page.heroTitre|default("")}}
            </span>
            
            <h1 class="mb-6 font-heading text-5xl font-black leading-tight md:text-6xl lg:text-5xl">
                {{ page.heroSousTitre|raw}}
            </h1>
            
            <p class="mb-8 text-lg leading-relaxed text-accent-foreground/70 md:text-xl">
                {{ page.heroDescription|default("")}}
            </p>
            
            <div class="flex flex-wrap gap-4">
                <a href="{{ path('app_programmes') }}" class="inline-flex items-center justify-center rounded-md bg-primary px-8 py-3 text-sm font-heading font-semibold text-primary-foreground shadow transition-colors hover:bg-primary/90 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 gap-2">
                    Nos programmes 
                    <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg>
                </a>
                <a href="{{ path('app_contact') }}" class="inline-flex items-center justify-center rounded-md border border-accent-foreground/30 bg-transparent px-8 py-3 text-sm font-heading font-semibold text-white shadow-sm transition-colors hover:bg-accent-foreground/10 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring gap-2">
                    Nous contacter
                </a>
            </div>
        </div>
    </div>
</section>