<?php $attributes ??= new \Illuminate\View\ComponentAttributeBag;

$__newAttributes = [];
$__propNames = \Illuminate\View\ComponentAttributeBag::extractPropNames((['articles', 'allArticles']));

foreach ($attributes->all() as $__key => $__value) {
    if (in_array($__key, $__propNames)) {
        $$__key = $$__key ?? $__value;
    } else {
        $__newAttributes[$__key] = $__value;
    }
}

$attributes = new \Illuminate\View\ComponentAttributeBag($__newAttributes);

unset($__propNames);
unset($__newAttributes);

foreach (array_filter((['articles', 'allArticles']), 'is_string', ARRAY_FILTER_USE_KEY) as $__key => $__value) {
    $$__key = $$__key ?? $__value;
}

$__defined_vars = get_defined_vars();

foreach ($attributes->all() as $__key => $__value) {
    if (array_key_exists($__key, $__defined_vars)) unset($$__key);
}

unset($__defined_vars, $__key, $__value); ?>

<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"><?php echo e(app()->getLocale() === 'en' ? 'News & Insights' : 'Actualités & Insights'); ?></div>
                <h2 class="reveal display-title mt-4" data-delay="0.1"><?php echo e(app()->getLocale() === 'en' ? 'Perspectives on ' : 'Perspectives sur '); ?><em><?php echo e(app()->getLocale() === 'en' ? 'the Indian Ocean and Africa.' : "l'Océan Indien et l'Afrique."); ?></em></h2>
            </div>
            <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"><?php echo e(app()->getLocale() === 'en' ? 'All articles' : 'Tous les articles'); ?></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>
        </div>

        <div class="stagger-group mt-14 grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-3">
            <?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if BLOCK]><![endif]--><?php endif; ?><?php $__currentLoopData = $articles; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $article): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                <a href="<?php echo e($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"><?php echo e($article->tradLabel()); ?></div>
                        <h3 class="mt-4 font-serif text-xl leading-tight text-cream"><?php echo e($article->trad('title')); ?></h3>
                        <p class="mt-4 line-clamp-4 text-sm leading-relaxed text-cream/65"><?php echo e($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);"><?php echo e($article->art_initiales); ?></div>
                            <span class="text-xs text-cream/60"><?php echo e($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">
                            <?php echo e(app()->getLocale() === 'en' ? 'Read' : 'Lire'); ?>

                            <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>
            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if ENDBLOCK]><![endif]--><?php endif; ?>
        </div>

        <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">
                    <?php echo e(app()->getLocale() === 'en' ? 'Stay informed on ' : 'Restez informé des '); ?><em class="text-gradient-gold"><?php echo e(app()->getLocale() === 'en' ? 'opportunities' : 'opportunités'); ?></em><?php echo e(app()->getLocale() === 'en' ? ' in the Indian Ocean.' : " dans l'Océan Indien."); ?>

                </div>
                <p class="mt-2 text-sm text-cream/65"><?php echo e(app()->getLocale() === 'en' ? 'Exclusive insights · Regulatory updates · Business opportunities — once a month.' : 'Insights exclusifs · Actualités réglementaires · Opportunités d\'affaires — une fois par mois.'); ?></p>
            </div>
            <div
                x-data="{
                    email: '',
                    siteWeb: '',
                    status: 'idle',
                    message: '',
                    async submit() {
                        this.status = 'loading';
                        try {
                            const response = await fetch('<?php echo e(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 = <?php echo e(Js::from(app()->getLocale() === 'en' ? 'Something went wrong. Please try again later.' : 'Une erreur est survenue. Veuillez réessayer plus tard.')); ?>;
                        }
                    },
                }"
                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="<?php echo e(app()->getLocale() === 'en' ? 'your@email.com' : 'votre@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"
                    />
                    
                    <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'"><?php echo e(app()->getLocale() === 'en' ? 'Subscribe' : "S'abonner"); ?></span>
                        <span x-show="status === 'loading'" x-cloak><?php echo e(app()->getLocale() === 'en' ? 'Sending…' : 'Envoi…'); ?></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>

    
    <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="<?php echo e(app()->getLocale() === 'en' ? 'Close' : 'Fermer'); ?>"
                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"><?php echo e(app()->getLocale() === 'en' ? 'All articles' : 'Tous les articles'); ?></h3>

            <div class="mt-8 flex flex-col divide-y divide-gold/10">
                <?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if BLOCK]><![endif]--><?php endif; ?><?php $__currentLoopData = $allArticles; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $article): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                    <a href="<?php echo e($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"><?php echo e($article->tradLabel()); ?></div>
                            <h4 class="mt-2 font-serif text-lg leading-tight text-cream"><?php echo e($article->trad('title')); ?></h4>
                            <p class="mt-2 line-clamp-2 text-sm leading-relaxed text-cream/65"><?php echo e($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">
                            <?php echo e(app()->getLocale() === 'en' ? 'Read' : 'Lire'); ?>

                            <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>
                <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if ENDBLOCK]><![endif]--><?php endif; ?>
            </div>
        </div>
    </div>
</section>
<?php /**PATH D:\Manao_Client\Guichet\obvious_way\resources\views/components/articles.blade.php ENDPATH**/ ?>