<section class="premium-bento-section py-5 py-lg-50" dir="rtl">
    <div class="container">
        <div class="row g-4 align-items-stretch premium-bento-row">
            {{-- قراءة RTL: الشركاء (الخريطة) ثم المقالات ثم الفعاليات --}}
            <div class="col-lg-4 premium-bento-col premium-bento-col--map">
                <article class="premium-bento-card h-100 d-flex flex-column">
                    <div class="premium-bento-card__head clearfix">
                        <h3 class="premium-bento-card__title">{{ trans('home.premium_bento_partners') }}</h3>
                        <p class="premium-bento-card__hint">{{ trans('home.premium_bento_partners_hint') }}</p>
                    </div>
                    <div class="premium-bento-map-wrap flex-grow-1 d-flex flex-column mt-15">
                        <div class="premium-bento-map flex-grow-1 rounded-lg">
                            <img
                                src="{{ asset('assets/default/img/montessori-premium/premium-bento-world-map.svg') }}"
                                alt="{{ trans('home.premium_bento_partners_map_alt') }}"
                                class="premium-bento-map__img"
                                width="800"
                                height="380"
                                loading="lazy"
                                decoding="async">
                        </div>
                        <a href="{{ url('/organizations') }}" class="btn btn-premium-bento mt-20 align-self-start">{{ trans('home.premium_bento_explore') }}</a>
                    </div>
                </article>
            </div>
            <div class="col-lg-4 premium-bento-col premium-bento-col--articles">
                <article class="premium-bento-card h-100 d-flex flex-column">
                    <div class="premium-bento-card__head clearfix">
                        <h3 class="premium-bento-card__title">{{ trans('home.premium_bento_articles') }}</h3>
                        <a href="{{ url('/blog') }}" class="premium-bento-card__link">{{ trans('home.view_all') }}</a>
                    </div>
                    @if (!empty($blog) && $blog->count())
                        @foreach ($blog->take(3) as $post)
                            @php
                                $plainBlog = strip_tags(trim(((string) ($post->content ?? '')).' '.((string) ($post->description ?? ''))));
                                $wordCount = count(preg_split('/\s+/u', $plainBlog, -1, PREG_SPLIT_NO_EMPTY) ?: []);
                                $readMinutes = max(1, (int) ceil($wordCount / 200));
                            @endphp
                            <div class="premium-bento-blog d-flex align-items-center">
                                <a href="{{ $post->getUrl() }}" class="premium-bento-blog__thumb flex-shrink-0">
                                    <img src="{{ $post->image }}" alt="" loading="lazy" decoding="async" width="72" height="72">
                                </a>
                                <div class="mr-15 text-right">
                                    <a href="{{ $post->getUrl() }}" class="premium-bento-blog__title d-block">{{ $post->title }}</a>
                                    <span class="premium-bento-blog__meta d-block">
                                        {{ trans('home.premium_bento_read_time', ['minutes' => $readMinutes]) }}
                                        <span class="premium-bento-blog__meta-sep" aria-hidden="true"> · </span>
                                        {{ trans('home.premium_bento_read') }}
                                    </span>
                                </div>
                            </div>
                        @endforeach
                    @else
                        <p class="premium-bento-card__hint mb-0">{{ trans('home.premium_bento_empty_blog') }}</p>
                    @endif
                </article>
            </div>
            <div class="col-lg-4 premium-bento-col premium-bento-col--events">
                <article class="premium-bento-card h-100 d-flex flex-column">
                    <div class="premium-bento-card__head clearfix">
                        <h3 class="premium-bento-card__title">{{ trans('home.premium_bento_events') }}</h3>
                        <p class="premium-bento-card__hint mb-0">{{ trans('home.premium_bento_events_hint') }}</p>
                    </div>
                    @if (!empty($upcomingCourses) && $upcomingCourses->count())
                        @foreach ($upcomingCourses->take(4) as $event)
                            <div class="premium-bento-event">
                                <div class="premium-bento-event__date">
                                    {{ !empty($event->publish_date) ? dateTimeFormat($event->publish_date, 'j M') : '—' }}
                                </div>
                                <div>
                                    <a href="{{ $event->getUrl() }}" class="premium-bento-event__title d-block">{{ $event->title }}</a>
                                    <span class="premium-bento-card__hint font-12">{{ trans('home.premium_bento_event_badge') }}</span>
                                </div>
                            </div>
                        @endforeach
                    @else
                        <p class="premium-bento-card__hint mb-0">{{ trans('home.premium_bento_empty_events') }}</p>
                    @endif
                </article>
            </div>
        </div>
    </div>
</section>
