{{-- Premium Montessori discovery — seamless visual + formal copy --}}
@push('styles_top')
    <link rel="stylesheet" href="{{ asset('assets/default/css/premium-montessori-experience.css') }}?v=20260612f">
@endpush

@push('scripts_bottom')
    <script src="{{ asset('assets/default/js/premium-montessori-experience.js') }}?v=20260612f" defer></script>
@endpush

@php
    $mmwFormatTitle = static function (?string $raw): string {
        return preg_replace_callback(
            '/\*\*(.+?)\*\*/u',
            static function ($m) {
                return '<span class="mmw-xp__accent">'.e($m[1]).'</span>';
            },
            (string) ($raw ?? '')
        );
    };

    $mmwVideoSrc = asset('assets/video_motion.webm');
    $mmwCtaHref = url('/classes');
@endphp

<section
    class="mmw-xp home-sections reveal-up"
    id="montessori-book-world"
    aria-labelledby="mmw-scene-heading"
    data-mmw-xp
>
    <div class="mmw-xp__ambient" aria-hidden="true">
        <div class="mmw-xp__gradient mmw-xp__gradient--a" data-mmw-layer="bg-a"></div>
        <div class="mmw-xp__gradient mmw-xp__gradient--b" data-mmw-layer="bg-b"></div>
        <div class="mmw-xp__pattern"></div>
        <span class="mmw-xp__orb mmw-xp__orb--1" data-mmw-layer="orb-1"></span>
        <span class="mmw-xp__orb mmw-xp__orb--2" data-mmw-layer="orb-2"></span>
        <span class="mmw-xp__orb mmw-xp__orb--3" data-mmw-layer="orb-3"></span>
        <div class="mmw-xp__particles" data-mmw-particles>
            @for ($i = 0; $i < 20; $i++)
                <span class="mmw-xp__particle" style="--mmw-p-i: {{ $i }};" data-mmw-layer="particle"></span>
            @endfor
        </div>
    </div>

    <div class="container mmw-xp__container">
        <div class="mmw-xp__grid">
            <div class="mmw-xp__copy" dir="rtl">
                <div class="mmw-xp__copy-parallax" data-mmw-depth="0.07">
                <p class="mmw-xp__eyebrow" data-mmw-enter="eyebrow">{{ trans('home.premium_mmw_eyebrow') }}</p>
                <h2 id="mmw-scene-heading" class="mmw-xp__title section-title" data-mmw-enter="title">
                    {!! $mmwFormatTitle(trans('home.premium_mmw_title')) !!}
                </h2>
                <p class="mmw-xp__desc section-hint" data-mmw-enter="desc">{{ trans('home.premium_mmw_sub') }}</p>
                <div class="mmw-xp__cta-wrap" data-mmw-enter="cta">
                    <a href="{{ $mmwCtaHref }}" class="btn btn-premium-hero-primary mmw-xp__cta">
                        <span>{{ trans('home.premium_mmw_cta') }}</span>
                        <i class="fa fa-angle-left mmw-xp__cta-icon" aria-hidden="true"></i>
                    </a>
                </div>
                </div>
            </div>

            <div class="mmw-xp__media-col">
                <div class="mmw-xp__stage" data-mmw-stage>
                    <div class="mmw-xp__visual-shell" data-mmw-video-shell>
                        <div class="mmw-xp__visual-parallax" data-mmw-video-parallax data-mmw-depth="0.14">
                            <div class="mmw-xp__visual-ambient" data-mmw-visual-ambient aria-hidden="true"></div>
                            <div class="mmw-xp__visual-float" data-mmw-video-float>
                                <div class="mmw-xp__visual-tilt" data-mmw-video-tilt>
                                    <video
                                    class="mmw-xp__video"
                                    src="{{ $mmwVideoSrc }}"
                                    autoplay
                                    muted
                                    loop
                                    playsinline
                                    preload="metadata"
                                    aria-label="{{ trans('home.premium_mmw_video_alt') }}"
                                ></video>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
