@props(['temoignages'])

<section class="relative py-8 md:py-16">
    <div class="mx-auto max-w-7xl px-6">
        <div class="mx-auto max-w-3xl text-center">
            <div class="reveal section-eyebrow justify-center">{{ lpick('Références & Témoignages', 'References & Testimonials', 'Referenzen & Kundenstimmen') }}</div>
            <h2 class="reveal display-title mt-4" data-delay="0.1">{{ lpick('Ils nous ont fait ', 'They trusted ', 'Sie haben uns ') }}<em>{{ lpick('confiance.', 'us.', 'vertraut.') }}</em></h2>
            <p class="reveal mt-6 text-cream/70" data-delay="0.2">{{ lpick("Pour leur implantation ou leurs projets dans l'Océan Indien.", 'For their business setup or projects in the Indian Ocean.', 'Für ihre Ansiedlung oder ihre Projekte im Indischen Ozean.') }}</p>
        </div>

        <div class="stagger-group mt-16 grid grid-cols-1 gap-5 md:grid-cols-3">
            @foreach ($temoignages as $temoignage)
                <figure class="stagger-item tilt-card glass gold-border relative flex flex-col justify-between overflow-hidden rounded-2xl p-8">
                    <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" class="text-gold/40" aria-hidden="true"><path d="M3 21c3 0 7-1 7-8V5c0-1.25-.756-2.017-2-2H4c-1.25 0-2 .75-2 1.972V11c0 1.25.75 2 2 2 1 0 1 0 1 1v1c0 1-1 2-2 2s-1 .008-1 1.031V21z"/><path d="M15 21c3 0 7-1 7-8V5c0-1.25-.757-2.017-2-2h-4c-1.25 0-2 .75-2 1.972V11c0 1.25.75 2 2 2h.75c0 2.25.25 4-2.75 4v3c0 1 0 1 1 1z"/></svg>
                    <blockquote class="mt-4 flex-1 font-serif text-lg italic leading-relaxed text-cream/85">&ldquo;{{ $temoignage->trad('citation') }}&rdquo;</blockquote>
                    <figcaption class="mt-6 flex items-center gap-3 border-t border-gold/15 pt-5">
                        <div class="grid h-11 w-11 place-items-center rounded-full font-sans text-sm text-navy-deep" style="background: var(--gradient-gold);">{{ $temoignage->tst_initiales }}</div>
                        <div>
                            <div class="text-[10px] text-cream">{{ $temoignage->tst_auteur }}</div>
                            <div class="text-[9px] text-cream/60">{{ $temoignage->trad('role') }}</div>
                        </div>
                    </figcaption>
                </figure>
            @endforeach
        </div>
    </div>
</section>