<section class="home-sections premium-newsletter-cta position-relative reveal-up premium-newsletter-cta--with-doodles" id="premium-newsletter-cta" dir="rtl">
    <div class="premium-newsletter-cta__glow" aria-hidden="true"></div>
    <div class="premium-newsletter-doodles" aria-hidden="true"></div>
    <div class="container py-5 py-lg-50 position-relative">
        <div class="row align-items-center g-4 flex-lg-row-reverse">
            <div class="col-lg-5 text-center">
                <div class="premium-newsletter-cta__art premium-newsletter-cta__art--photo">
                    @php
                        $newsletterCandidates = collect([
                            'newsletter-community-ai-hero.png',
                            'newsletter-illustration.png',
                            'newsletter-illustration.jpg',
                            'footer-newsletter-hero.png',
                        ])
                            ->map(static fn ($f) => 'assets/default/img/montessori-premium/' . $f)
                            ->first(static fn ($rel) => file_exists(public_path($rel)));
                        $newsletterHeroLegacy = collect([
                            'assets/default/img/home/newsletter-illustration.png',
                        ])->first(static fn ($rel) => file_exists(public_path($rel)));
                    @endphp
                    @if ($newsletterCandidates)
                        <img
                            src="{{ asset($newsletterCandidates) }}"
                            alt="{{ trans('home.premium_nl_img_alt') }}"
                            class="premium-newsletter-cta__img img-fluid mx-auto"
                            width="460"
                            height="420"
                            loading="lazy"
                            decoding="async"
                        >
                    @elseif ($newsletterHeroLegacy)
                        <img
                            src="{{ asset($newsletterHeroLegacy) }}"
                            alt="{{ trans('home.premium_nl_img_alt') }}"
                            class="premium-newsletter-cta__img img-fluid mx-auto"
                            width="460"
                            height="420"
                            loading="lazy"
                            decoding="async"
                        >
                    @else
                        <svg class="premium-newsletter-cta__fallback-globe" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 240" aria-hidden="true">
                            <defs>
                                <linearGradient id="pnl-globe-fill" x1="0%" y1="0%" x2="100%" y2="100%">
                                    <stop offset="0%" stop-color="#163b7a"/>
                                    <stop offset="100%" stop-color="#06183d"/>
                                </linearGradient>
                            </defs>
                            <ellipse cx="100" cy="118" rx="72" ry="72" fill="url(#pnl-globe-fill)" stroke="#5786c7" stroke-width="2.5"/>
                            <ellipse cx="100" cy="118" rx="72" ry="72" fill="none" stroke="rgba(255,255,255,0.2)" stroke-width="1"/>
                            <ellipse cx="100" cy="118" rx="28" ry="72" fill="none" stroke="rgba(255,255,255,0.18)" stroke-width="1"/>
                            <path d="M28 118h144M100 52c0 0 24 42 24 66s-24 62-24 62M100 52c0 0-24 42-24 66s24 62 24 62" fill="none" stroke="rgba(255,255,255,0.2)" stroke-width="1"/>
                            <ellipse cx="100" cy="200" rx="56" ry="12" fill="rgba(6,24,61,0.35)"/>
                        </svg>
                    @endif
                </div>
            </div>
            <div class="col-lg-7 text-right">
                <h2 class="premium-newsletter-cta__title">{{ trans('home.premium_nl_title') }}</h2>
                <p class="premium-newsletter-cta__lead">{{ trans('home.premium_nl_hint') }}</p>
                <form action="{{ url('/newsletters') }}" method="post" class="premium-newsletter-form mt-35">
                    {{ csrf_field() }}
                    <div class="premium-newsletter-form__inner">
                        <label class="sr-only" for="premium-newsletter-email">{{ trans('footer.enter_email_here') }}</label>
                        <input id="premium-newsletter-email" type="email" name="newsletter_email" class="premium-newsletter-input" placeholder="{{ trans('footer.enter_email_here') }}" required autocomplete="email" value="">
                        <button type="submit" class="btn-premium-newsletter">{{ trans('home.premium_nl_submit') }}</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</section>
