{{--
    Product mockup — a self-drawn mini SMM dashboard (sidebar + KPIs + order rows)
    shown under/next to the hero. Pure markup, brand-tinted via CSS variables, no
    screenshots. $appName carries the panel name for the fake URL.
--}}
<div class="lp-mock">
    <div class="lp-mock-bar">
        <span class="lp-mock-dot"></span><span class="lp-mock-dot"></span><span class="lp-mock-dot"></span>
        <span class="lp-mock-url">{{ \Illuminate\Support\Str::slug($appName ?? 'redfamosa') }}.com/admin — Dashboard</span>
    </div>
    <div class="lp-mock-body">
        <div class="lp-mock-side">
            <span class="lp-mock-navitem lp-mock-navitem-on">@include('frontend.partials.icon', ['name' => 'bar-chart-3', 'size' => 15]) {{ __('Dashboard') }}</span>
            <span class="lp-mock-navitem">@include('frontend.partials.icon', ['name' => 'layers', 'size' => 15]) {{ __('Services') }}</span>
            <span class="lp-mock-navitem">@include('frontend.partials.icon', ['name' => 'plug', 'size' => 15]) {{ __('Providers') }}</span>
            <span class="lp-mock-navitem">@include('frontend.partials.icon', ['name' => 'wallet', 'size' => 15]) {{ __('Payments') }}</span>
            <span class="lp-mock-navitem">@include('frontend.partials.icon', ['name' => 'users', 'size' => 15]) {{ __('Users') }}</span>
        </div>
        <div class="lp-mock-main">
            <div class="lp-mock-kpis">
                <div class="lp-mock-kpi"><small>{{ __('Revenue 30d') }}</small><b>$12,480</b></div>
                <div class="lp-mock-kpi"><small>{{ __('Orders') }}</small><b>3,912</b></div>
                <div class="lp-mock-kpi"><small>{{ __('Profit') }}</small><b>$3,140</b></div>
            </div>
            <div class="lp-mock-row"><span>Instagram Followers — 5,000</span><span class="lp-mock-pill lp-mock-pill-ok">{{ __('Completed') }}</span></div>
            <div class="lp-mock-row"><span>TikTok Views — 50,000</span><span class="lp-mock-pill lp-mock-pill-run">{{ __('In progress') }}</span></div>
            <div class="lp-mock-row"><span>YouTube Subscribers — 1,000</span><span class="lp-mock-pill lp-mock-pill-ok">{{ __('Completed') }}</span></div>
            <div class="lp-mock-row"><span>Spotify Plays — 25,000</span><span class="lp-mock-pill lp-mock-pill-run">{{ __('In progress') }}</span></div>
        </div>
    </div>
</div>