@props(['sessions', 'reglage'])

<section id="programme" class="relative overflow-hidden py-12 md:py-20" style="background: linear-gradient(180deg, transparent, oklch(0.28 0.055 238 / 0.5), transparent);">
    <div class="relative mx-auto grid max-w-7xl grid-cols-1 gap-16 px-6 lg:grid-cols-[1.1fr_0.9fr]">
        <div>
            <div class="reveal section-eyebrow">{{ $reglage->trad('prog_eyebrow') }}</div>
            <h2 class="reveal display-title mt-4" data-delay="0.1">The Obvious Way<br /><em>to Mauritius</em></h2>
            <p class="reveal mt-6 max-w-xl text-cream/70" data-delay="0.2">{{ $reglage->trad('prog_intro') }}</p>

            <ol class="mt-12 space-y-3">
                @foreach ($sessions as $i => $session)
                    <li class="reveal glass gold-border group flex items-start gap-4 rounded-2xl p-5" @if($i > 0) data-delay="{{ $i * 0.08 }}" @endif>
                        <div class="grid h-11 w-11 shrink-0 place-items-center rounded-xl border border-gold/40 bg-gold/10 text-gold transition-all duration-500 group-hover:border-gold/70 group-hover:bg-gold/15">
                            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><x-service-icon :icon="$session->prog_icone" /></svg>
                        </div>
                        <div class="min-w-0 flex-1">
                            <div class="flex flex-wrap items-center gap-x-3 gap-y-1">
                                <span class="font-serif italic text-gold">{{ lpick('Session', 'Session', 'Sitzung') }} {{ $session->prog_numero }}</span>
                                <span class="font-serif text-base text-cream">{{ $session->trad('title') }}</span>
                                <span class="ml-auto rounded-full border border-cream/20 px-2 py-0.5 text-[13px] uppercase tracking-widest text-cream/100 text-gold">{{ $session->prog_duree }}</span>
                            </div>
                            <p class="mt-1 text-sm text-cream/65">{{ $session->trad('desc') }}</p>
                        </div>
                    </li>
                @endforeach
            </ol>

            <div class="reveal mt-8 flex items-center gap-4 rounded-2xl border border-gold/25 bg-gold/5 p-5" data-delay="0.2">
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="text-gold"><path d="m12 3-1.912 5.813a2 2 0 0 1-1.275 1.275L3 12l5.813 1.912a2 2 0 0 1 1.275 1.275L12 21l1.912-5.813a2 2 0 0 1 1.275-1.275L21 12l-5.813-1.912a2 2 0 0 1-1.275-1.275L12 3Z"/></svg>
                <div>
                    <div class="font-serif text-lg text-cream">{{ lpick('Appel stratégique individuel 45 min inclus', 'Individual 45-min strategic call included', 'Individuelles 45-minütiges Strategiegespräch inklusive') }}</div>
                    <div class="text-sm text-cream/65">{{ lpick('Un échange privé pour aller plus loin sur votre projet.', 'A private exchange to go further on your project.', 'Ein persönliches Gespräch, um Ihr Projekt weiterzubringen.') }}</div>
                </div>
            </div>
        </div>

        {{-- Colonne droite : image, puis les 3 mini-cartes, puis le bouton --}}
        <div class="reveal" data-delay="0.2">
            <div class="sticky top-32 mx-auto flex w-full max-w-md flex-col">
                <div class="glass-strong gold-border overflow-hidden rounded-3xl">
                    <img src="{{ $reglage->programmeImageUrl() }}" alt="The Obvious Way to Mauritius — Programme" class="h-full w-full object-cover" loading="lazy" width="1000" height="1370" />
                </div>

                <div class="mt-6 grid grid-cols-3 gap-4">
                    <div class="reveal glass rounded-2xl p-4 text-center">
                        <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.4" class="mx-auto mb-2 text-gold" stroke-linecap="round" stroke-linejoin="round"><path d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z"/><path d="m9 12 2 2 4-4"/></svg>
                        <div class="whitespace-pre-line text-[11px] uppercase leading-relaxed tracking-[0.14em] text-cream/70">{{ lpick("Approche 100%\norientée résultats", "100% results-\noriented approach", "100%\nErgebnisfokus") }}</div>
                    </div>
                    <div class="reveal glass rounded-2xl p-4 text-center" data-delay="0.1">
                        <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.4" class="mx-auto mb-2 text-gold" stroke-linecap="round" stroke-linejoin="round"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M22 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>
                        <div class="whitespace-pre-line text-[11px] uppercase leading-relaxed tracking-[0.14em] text-cream/70">{{ lpick("Groupe restreint\n8–10 participants", "Small group\n8–10 participants", "Kleine Gruppe\n8–10 Teilnehmer") }}</div>
                    </div>
                    <div class="reveal glass rounded-2xl p-4 text-center" data-delay="0.2">
                        <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.4" class="mx-auto mb-2 text-gold" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20"/><path d="M2 12h20"/></svg>
                        <div class="whitespace-pre-line text-[11px] uppercase leading-relaxed tracking-[0.14em] text-cream/70">{{ lpick("Maurice, hub\nvers l'Afrique", "Mauritius, hub\nto Africa", "Mauritius, Drehkreuz\nnach Afrika") }}</div>
                    </div>
                </div>

                <div class="mt-6 text-center">
                    <a href="{{ $reglage->set_prog_lien_inscription }}" target="_blank" rel="noopener noreferrer" class="inline-flex group items-center gap-2 shimmer btn-primary-gold">
                        {{ lpick("En savoir plus & s'inscrire", 'Learn more & register', 'Mehr erfahren & anmelden') }}
                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="transition-transform duration-500 group-hover:translate-x-1"><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></svg>
                    </a>
                </div>
            </div>
        </div>
    </div>
</section>