@props(['articles', 'allArticles'])

<section
    id="actualites"
    class="relative py-12 md:py-20"
    x-data="{ allOpen: false }"
    @keydown.escape.window="allOpen = false"
    x-effect="
        document.body.classList.toggle('overflow-hidden', allOpen);
        allOpen ? window.lenis?.stop() : window.lenis?.start();
    "
>
    <div class="mx-auto max-w-7xl px-6">
        <div class="flex flex-wrap items-end justify-between gap-6">
            <div class="max-w-2xl">
                <div class="reveal section-eyebrow">{{ lpick('Actualités & Insights', 'News & Insights', 'Aktuelles & Insights') }}</div>
                <h2 class="reveal display-title mt-4" data-delay="0.1">{{ lpick('Perspectives sur ', 'Perspectives on ', 'Perspektiven auf ') }}<em>{{ lpick("l'Océan Indien et l'Afrique.", 'the Indian Ocean and Africa.', 'den Indischen Ozean und Afrika.') }}</em></h2>
            </div>
            @if ($allArticles->isNotEmpty())
                <div class="reveal" data-delay="0.2">
                    <button type="button" @click="allOpen = true" class="group inline-flex items-center gap-2 text-sm text-gold hover:text-gold-soft">
                        <span class="animated-underline">{{ lpick('Tous les articles', 'All articles', 'Alle Artikel') }}</span>
                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="transition-transform duration-500 group-hover:-translate-y-0.5 group-hover:translate-x-0.5"><line x1="7" y1="17" x2="17" y2="7"/><polyline points="7 7 17 7 17 17"/></svg>
                    </button>
                </div>
            @endif
        </div>

        @forelse ($articles as $article)
            @if ($loop->first)
                <div class="stagger-group mt-14 grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-3">
            @endif
                <a href="{{ $article->url() }}" class="stagger-item glass gold-border group relative flex aspect-square w-full flex-col justify-between overflow-hidden rounded-2xl p-7 text-left">
                    <div>
                        <div class="text-[11px] uppercase tracking-[0.2em] text-gold">{{ $article->tradLabel() }}</div>
                        <h3 class="mt-4 font-serif text-xl leading-tight text-cream">{{ $article->trad('title') }}</h3>
                        <p class="mt-4 line-clamp-4 text-sm leading-relaxed text-cream/65">{{ $article->trad('excerpt') }}</p>
                    </div>
                    <div class="mt-8 flex items-center justify-between">
                        <div class="flex items-center gap-3">
                            <div class="grid h-9 w-9 place-items-center rounded-full text-xs text-navy-deep" style="background: var(--gradient-gold);">{{ $article->art_initiales }}</div>
                            <span class="text-xs text-cream/60">{{ $article->art_auteur ?? $article->trad('meta') }}</span>
                        </div>
                        <span class="inline-flex items-center gap-1 text-xs text-gold transition-transform duration-500 group-hover:translate-x-1">
                            {{ lpick('Lire', 'Read', 'Lesen') }}
                            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="7" y1="17" x2="17" y2="7"/><polyline points="7 7 17 7 17 17"/></svg>
                        </span>
                    </div>
                    <div aria-hidden="true" class="pointer-events-none absolute -right-24 -top-24 h-64 w-64 rounded-full opacity-0 blur-3xl transition-opacity duration-700 group-hover:opacity-100" style="background: radial-gradient(circle, oklch(0.72 0.13 78 / 0.3), transparent 60%);"></div>
                </a>
            @if ($loop->last)
                </div>
            @endif
        @empty
            <div class="reveal glass gold-border mt-14 rounded-3xl px-6 py-20 text-center">
                <p class="mx-auto max-w-2xl font-serif text-3xl leading-relaxed text-cream/70">{{ lpick('Aucun article publié pour le moment. Revenez bientôt !', 'No articles published yet. Come back soon!', 'Noch keine Artikel veröffentlicht. Schauen Sie bald wieder vorbei!') }}</p>
            </div>
        @endforelse

        <div class="reveal glass-strong gold-border mt-14 flex flex-col items-start gap-6 rounded-3xl p-8 md:flex-row md:items-center md:justify-between md:p-10" data-delay="0.1">
            <div>
                <div class="font-serif text-2xl text-cream md:text-3xl">
                    {{ lpick('Restez informé des ', 'Stay informed on ', 'Bleiben Sie informiert über ') }}<em class="text-gradient-gold">{{ lpick('opportunités', 'opportunities', 'Chancen') }}</em>{{ lpick(" dans l'Océan Indien.", ' in the Indian Ocean.', ' im Indischen Ozean.') }}
                </div>
                <p class="mt-2 text-sm text-cream/65">{{ lpick('Insights exclusifs · Actualités réglementaires · Opportunités d\'affaires — une fois par mois.', 'Exclusive insights · Regulatory updates · Business opportunities — once a month.', 'Exklusive Insights · Regulatorische Updates · Geschäftschancen — einmal im Monat.') }}</p>
            </div>
            <div
                x-data="{
                    email: '',
                    siteWeb: '',
                    status: 'idle',
                    message: '',
                    async submit() {
                        this.status = 'loading';
                        try {
                            const response = await fetch('{{ route('newsletter.store', ['locale' => app()->getLocale()]) }}', {
                                method: 'POST',
                                headers: {
                                    'Content-Type': 'application/json',
                                    Accept: 'application/json',
                                    'X-CSRF-TOKEN': document.querySelector('meta[name=csrf-token]').content,
                                },
                                body: JSON.stringify({ email: this.email, site_web: this.siteWeb }),
                            });
                            const data = await response.json();
                            this.message = data.message ?? '';
                            this.status = response.ok ? 'success' : 'error';
                            if (response.ok) this.email = '';
                        } catch (e) {
                            this.status = 'error';
                            this.message = {{ Js::from(lpick('Une erreur est survenue. Veuillez réessayer plus tard.', 'Something went wrong. Please try again later.', 'Ein Fehler ist aufgetreten. Bitte versuchen Sie es später erneut.')) }};
                        }
                    },
                }"
                class="w-full md:w-auto"
            >
                <form @submit.prevent="submit" class="flex w-full items-center gap-2 md:w-auto">
                    <label for="newsletter-email" class="sr-only">Email</label>
                    <input
                        id="newsletter-email"
                        type="email"
                        required
                        x-model="email"
                        :disabled="status === 'loading'"
                        placeholder="{{ lpick('votre@email.com', 'your@email.com', 'ihre@email.com') }}"
                        class="min-w-0 flex-1 rounded-full border border-gold/25 bg-navy-deep/60 px-5 py-3 text-sm text-cream placeholder:text-cream/40 focus:border-gold focus:outline-none focus:ring-2 focus:ring-gold/30 md:w-72"
                    />
                    {{-- Honeypot anti-spam : champ invisible qui doit rester vide. --}}
                    <input type="text" x-model="siteWeb" name="site_web" tabindex="-1" autocomplete="off" class="hidden" aria-hidden="true" />
                    <button type="submit" :disabled="status === 'loading'" class="shimmer btn-primary-gold whitespace-nowrap disabled:cursor-not-allowed disabled:opacity-60">
                        <span x-show="status !== 'loading'">{{ lpick("S'abonner", 'Subscribe', 'Abonnieren') }}</span>
                        <span x-show="status === 'loading'" x-cloak>{{ lpick('Envoi…', 'Sending…', 'Wird gesendet…') }}</span>
                    </button>
                </form>
                <p x-show="status === 'success'" x-cloak x-text="message" class="mt-2 text-xs text-gold"></p>
                <p x-show="status === 'error'" x-cloak x-text="message" class="mt-2 text-xs text-red-400"></p>
            </div>
        </div>
    </div>

    {{-- Modale : tous les articles --}}
    @if ($allArticles->isNotEmpty())
    <div
        x-show="allOpen"
        x-cloak
        x-transition.opacity
        class="fixed inset-0 z-[100] flex items-center justify-center p-4 md:p-8"
        role="dialog"
        aria-modal="true"
    >
        <div class="absolute inset-0 bg-navy-deep/90" @click="allOpen = false"></div>

        <div
            x-show="allOpen"
            x-transition:enter="transition ease-out duration-300"
            x-transition:enter-start="opacity-0 translate-y-4 scale-95"
            x-transition:enter-end="opacity-100 translate-y-0 scale-100"
            class="gold-border relative max-h-[85vh] w-full max-w-3xl overflow-y-auto rounded-2xl bg-navy-deep p-8 shadow-2xl md:p-10"
            data-lenis-prevent
        >
            <button
                type="button"
                @click="allOpen = false"
                aria-label="{{ lpick('Fermer', 'Close', 'Schließen') }}"
                class="absolute right-5 top-5 grid h-9 w-9 place-items-center rounded-full border border-gold/20 text-gold transition-colors hover:bg-gold/10"
            >
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
            </button>

            <h3 class="pr-10 font-serif text-2xl text-cream md:text-3xl">{{ lpick('Tous les articles', 'All articles', 'Alle Artikel') }}</h3>

            <div class="mt-8 flex flex-col divide-y divide-gold/10">
                @foreach ($allArticles as $article)
                    <a href="{{ $article->url() }}" class="group flex w-full items-start justify-between gap-4 py-5 text-left first:pt-0 last:pb-0">
                        <div>
                            <div class="text-[11px] uppercase tracking-[0.2em] text-gold/80">{{ $article->tradLabel() }}</div>
                            <h4 class="mt-2 font-serif text-lg leading-tight text-cream">{{ $article->trad('title') }}</h4>
                            <p class="mt-2 line-clamp-2 text-sm leading-relaxed text-cream/65">{{ $article->trad('excerpt') }}</p>
                        </div>
                        <span class="mt-1 inline-flex shrink-0 items-center gap-1 text-xs text-gold transition-transform duration-500 group-hover:translate-x-1">
                            {{ lpick('Lire', 'Read', 'Lesen') }}
                            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="7" y1="17" x2="17" y2="7"/><polyline points="7 7 17 7 17 17"/></svg>
                        </span>
                    </a>
                @endforeach
            </div>
        </div>
    </div>
    @endif
</section>