{{-- Animated app mockup — the screen auto-cycles through 4 app-screen archetypes and loops seamlessly.
     Reusable across projects: customize the 4 frames + the landing.mock_* strings per project
     (see docs/project-init/landing-site.md). Colors come from the --safe-* brand variables. --}}
<div class="app-mock {{ $class ?? '' }}" role="img" aria-label="{{ __('landing.mock_aria') }}">
    <span class="app-mock__notch" aria-hidden="true"></span>
    <span class="app-mock__btn app-mock__btn--power" aria-hidden="true"></span>
    <span class="app-mock__btn app-mock__btn--vol-up" aria-hidden="true"></span>
    <span class="app-mock__btn app-mock__btn--vol-down" aria-hidden="true"></span>
    <span class="app-mock__btn app-mock__btn--mute" aria-hidden="true"></span>

    <div class="app-mock__screen">
        <div class="app-mock__statusbar" aria-hidden="true">
            <span>9:41</span>
            <span class="app-mock__statusbar-icons"><i></i><i></i><i></i></span>
        </div>

        {{-- The cycling reel: 4 frames, each animates in→hold→out on a shared infinite loop --}}
        <div class="app-mock__reel">

            {{-- 1) Home / dashboard --}}
            <div class="app-mock__frame amf-home">
                <div class="amf-top">
                    <span class="amf-brand">{{ __('landing.brand_name') }}</span>
                    <span class="amf-ava" aria-hidden="true"></span>
                </div>
                <div class="amf-hero">
                    <span class="amf-hero-l">{{ __('landing.mock_total') }}</span>
                    <span class="amf-hero-v">1,250 <small>{{ __('landing.mock_unit') }}</small></span>
                    <span class="amf-hero-glow" aria-hidden="true"></span>
                    <div class="amf-kpis">
                        <span class="amf-kpi k-due"><b>840</b>{{ __('landing.mock_kpi1') }}</span>
                        <span class="amf-kpi k-late"><b>90</b>{{ __('landing.mock_kpi2') }}</span>
                        <span class="amf-kpi k-paid"><b>320</b>{{ __('landing.mock_kpi3') }}</span>
                    </div>
                </div>
                <div class="amf-rows">
                    <div class="amf-row">
                        <span class="amf-dot" aria-hidden="true"></span>
                        <span class="amf-rl"><b>{{ __('landing.mock_row1') }}</b><i>50 {{ __('landing.mock_unit') }}</i></span>
                        <span class="amf-pill p-due">{{ __('landing.mock_status1') }}</span>
                    </div>
                    <div class="amf-row">
                        <span class="amf-dot" aria-hidden="true"></span>
                        <span class="amf-rl"><b>{{ __('landing.mock_row2') }}</b><i>15 {{ __('landing.mock_unit') }}</i></span>
                        <span class="amf-pill p-late">{{ __('landing.mock_status2') }}</span>
                    </div>
                </div>
            </div>

            {{-- 2) Add / create form --}}
            <div class="app-mock__frame amf-add">
                <div class="amf-h2">{{ __('landing.mock_add_title') }}</div>
                <div class="amf-seg" aria-hidden="true">
                    <span class="on">{{ __('landing.mock_seg1') }}</span>
                    <span>{{ __('landing.mock_seg2') }}</span>
                </div>
                <div class="amf-field"><span>{{ __('landing.mock_field1') }}</span><b>80 {{ __('landing.mock_unit') }}</b></div>
                <div class="amf-field"><span>{{ __('landing.mock_field2') }}</span><b>2026 / 02 / 28</b></div>
                <div class="amf-field"><span>{{ __('landing.mock_field3') }}</span><b>{{ __('landing.mock_field3_val') }}</b></div>
                <div class="amf-btn">{{ __('landing.mock_save') }}</div>
            </div>

            {{-- 3) Details + activity log --}}
            <div class="app-mock__frame amf-detail">
                <div class="amf-h2">{{ __('landing.mock_details') }}</div>
                <div class="amf-row amf-party">
                    <span class="amf-dot" aria-hidden="true"></span>
                    <span class="amf-rl"><b>{{ __('landing.mock_row1') }}</b><i>80 {{ __('landing.mock_unit') }}</i></span>
                    <span class="amf-pill p-due">{{ __('landing.mock_status1') }}</span>
                </div>
                <div class="amf-log-t">{{ __('landing.mock_log') }}</div>
                <ul class="amf-log">
                    <li><span aria-hidden="true"></span>{{ __('landing.mock_step1') }}</li>
                    <li><span aria-hidden="true"></span>{{ __('landing.mock_step2') }}</li>
                    <li class="cur"><span aria-hidden="true"></span>{{ __('landing.mock_step3') }}</li>
                </ul>
            </div>

            {{-- 4) Reports & analytics --}}
            <div class="app-mock__frame amf-rep">
                <div class="amf-h2">{{ __('landing.mock_reports') }}</div>
                <div class="amf-rep-grid">
                    <span class="amf-cell c-due"><b>1.2K</b>{{ __('landing.mock_kpi1') }}</span>
                    <span class="amf-cell c-late"><b>90</b>{{ __('landing.mock_kpi2') }}</span>
                </div>
                <div class="amf-chart-t">{{ __('landing.mock_monthly') }}</div>
                <div class="amf-bars" aria-hidden="true">
                    <i style="--h:38%"></i><i style="--h:72%"></i><i style="--h:54%"></i>
                    <i style="--h:92%"></i><i style="--h:64%"></i><i style="--h:80%"></i>
                </div>
                <div class="amf-rep-foot">
                    <span class="amf-donut" aria-hidden="true"></span>
                    <span class="amf-legend" aria-hidden="true"><i></i><i></i><i></i></span>
                </div>
            </div>

        </div>

        {{-- Bottom nav with a highlight that glides to match the active screen --}}
        <div class="app-mock__nav" aria-hidden="true">
            <span class="amf-nav-ind"></span>
            <span class="amf-tab"><i></i>{{ __('landing.mock_nav1') }}</span>
            <span class="amf-tab"><i></i>{{ __('landing.mock_nav2') }}</span>
            <span class="amf-tab"><i></i>{{ __('landing.mock_nav3') }}</span>
            <span class="amf-tab"><i></i>{{ __('landing.mock_nav4') }}</span>
            <span class="amf-tab"><i></i>{{ __('landing.mock_nav5') }}</span>
        </div>
    </div>
</div>