{#
    Mobile App Showcase Section Partial (Should Have)
    PRD: Feature 9 - Mobile App Showcase (lines 216-220)

    Requirements:
    - Device mockups with Team app and Live app screenshots
    - App store badges linked where available
#}
<section class="modern-section modern-mobile-showcase" data-posthog-section="mobile-apps">
    <div class="modern-container">
        <div class="modern-section__header">
            <span class="modern-section__label">Mobile Apps</span>
            <h2 class="modern-section__title">Manage Your Store From Anywhere</h2>
            <p class="modern-section__subtitle">Native mobile apps for employees and managers to stay connected.</p>
        </div>

        <div class="modern-mobile-showcase__grid">
            {# BuyerKiosk Team App #}
            <div class="modern-mobile-showcase__app">
                <div class="modern-mobile-showcase__device">
                    <img
                        src="/images/front/features/TeamApp@0.25x.png"
                        srcset="/images/front/features/TeamApp@0.25x.png 598w,
                                /images/front/features/TeamApp@0.5x.png 1195w"
                        sizes="(max-width: 767px) 80vw, 360px"
                        alt="BuyerKiosk Team app showing employee schedule, clock-in, and team chat screens"
                        loading="lazy"
                        width="598"
                        height="520"
                    >
                </div>
                <div class="modern-mobile-showcase__info">
                    <img class="modern-mobile-showcase__logo" src="/images/logo/team+_dark@250.png" alt="BuyerKiosk Team">
                    <p class="modern-mobile-showcase__tagline">For Team Members</p>
                    <ul class="modern-mobile-showcase__features">
                        <li>View upcoming shifts</li>
                        <li>Geofenced clock-in/out</li>
                        <li>Break tracking</li>
                        <li>Time-off requests</li>
                        <li>Team Communication</li>
                    </ul>
                    <div class="modern-mobile-showcase__badges">
                        <a href="https://play.google.com/store/apps/details?id=com.buyerkiosk.buyerkiosk_team" target="_blank" rel="noopener">
                            <img src="/images/icons/playstore-lrg.png" alt="Get it on Google Play">
                        </a>
                        <a href="https://apps.apple.com/us/app/buyerkiosk-team/id6758110811" target="_blank" rel="noopener">
                            <img src="/images/icons/appstore-lrg.svg" alt="Download on the App Store">
                        </a>
                    </div>
                </div>
            </div>

            {# BuyerKiosk Live App #}
            <div class="modern-mobile-showcase__app">
                <div class="modern-mobile-showcase__device">
                    <img
                        src="/images/front/features/LiveApp@0.25x.png"
                        srcset="/images/front/features/LiveApp@0.25x.png 598w,
                                /images/front/features/LiveApp@0.5x.png 1195w"
                        sizes="(max-width: 767px) 80vw, 360px"
                        alt="BuyerKiosk Live app showing manager dashboard, stats, and schedule management screens"
                        loading="lazy"
                        width="598"
                        height="520"
                    >
                </div>
                <div class="modern-mobile-showcase__info">
                    <img class="modern-mobile-showcase__logo" src="/images/logo/live_dark@250.png" alt="BuyerKiosk Live">
                    <p class="modern-mobile-showcase__tagline">For Owners/Managers</p>
                    <ul class="modern-mobile-showcase__features">
                        <li>Store metrics at a glance</li>
                        <li>Schedule Management</li>
                        <li>Backstock Management</li>
                        <li>Multi-store switching</li>
                        <li>Team Communication</li>
                    </ul>
                    <div class="modern-mobile-showcase__badges">
                        <a href="https://play.google.com/store/apps/details?id=com.v2ts.BuyerKioskLive" target="_blank" rel="noopener">
                            <img src="/images/icons/playstore-lrg.png" alt="Get it on Google Play">
                        </a>
                        <a href="https://apps.apple.com/us/app/buyerkiosk-live/id993480915" target="_blank" rel="noopener">
                            <img src="/images/icons/appstore-lrg.svg" alt="Download on the App Store">
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>