<swp-online-booking-preview-container>
    <swp-preview-header>
        <swp-preview-title>
            <i class="ph ph-eye"></i>
            <span localize="onlineBooking.preview.title">Preview</span>
        </swp-preview-title>
        <swp-device-toggle>
            <swp-device-btn class="active" data-device="desktop" title="Desktop">
                <i class="ph ph-desktop"></i>
            </swp-device-btn>
            <swp-device-btn data-device="tablet" title="Tablet">
                <i class="ph ph-device-tablet"></i>
            </swp-device-btn>
            <swp-device-btn data-device="mobile" title="Mobil">
                <i class="ph ph-device-mobile"></i>
            </swp-device-btn>
        </swp-device-toggle>
    </swp-preview-header>

    <swp-preview-frame data-device="desktop">
        <swp-preview-content>
            <!-- Placeholder booking UI -->
            <swp-booking-demo>
                <swp-booking-demo-header>
                    <swp-booking-demo-logo>SB</swp-booking-demo-logo>
                    <swp-booking-demo-info>
                        <h2>Salon Beauty</h2>
                        <p>Hovedgaden 123, 2100 København Ø</p>
                    </swp-booking-demo-info>
                </swp-booking-demo-header>

                <swp-booking-demo-section>
                    <h3>Vælg service</h3>
                    <swp-booking-demo-services>
                        <swp-booking-demo-service class="selected">
                            <span class="name">Dame klip</span>
                            <span class="meta">45 min · 450 kr</span>
                        </swp-booking-demo-service>
                        <swp-booking-demo-service>
                            <span class="name">Herre klip</span>
                            <span class="meta">30 min · 350 kr</span>
                        </swp-booking-demo-service>
                        <swp-booking-demo-service>
                            <span class="name">Farvning</span>
                            <span class="meta">90 min · 850 kr</span>
                        </swp-booking-demo-service>
                        <swp-booking-demo-service>
                            <span class="name">Balayage</span>
                            <span class="meta">120 min · 1.450 kr</span>
                        </swp-booking-demo-service>
                    </swp-booking-demo-services>
                </swp-booking-demo-section>

                <swp-booking-demo-section>
                    <h3>Vælg medarbejder</h3>
                    <swp-booking-demo-employees>
                        <swp-booking-demo-employee class="selected">
                            <swp-avatar class="size-sm">MJ</swp-avatar>
                            <span>Maria Jensen</span>
                        </swp-booking-demo-employee>
                        <swp-booking-demo-employee>
                            <swp-avatar class="size-sm purple">AH</swp-avatar>
                            <span>Anna Hansen</span>
                        </swp-booking-demo-employee>
                        <swp-booking-demo-employee>
                            <swp-avatar class="size-sm blue">LP</swp-avatar>
                            <span>Louise Petersen</span>
                        </swp-booking-demo-employee>
                    </swp-booking-demo-employees>
                </swp-booking-demo-section>

                <swp-booking-demo-section>
                    <h3>Vælg dato og tid</h3>
                    <swp-booking-demo-calendar>
                        <swp-booking-demo-month>Januar 2026</swp-booking-demo-month>
                        <swp-booking-demo-days>
                            <span class="day-header">Ma</span>
                            <span class="day-header">Ti</span>
                            <span class="day-header">On</span>
                            <span class="day-header">To</span>
                            <span class="day-header">Fr</span>
                            <span class="day-header">Lø</span>
                            <span class="day-header">Sø</span>
                            <span class="day other">27</span>
                            <span class="day other">28</span>
                            <span class="day other">29</span>
                            <span class="day other">30</span>
                            <span class="day other">31</span>
                            <span class="day">1</span>
                            <span class="day">2</span>
                            <span class="day">3</span>
                            <span class="day">4</span>
                            <span class="day">5</span>
                            <span class="day">6</span>
                            <span class="day">7</span>
                            <span class="day">8</span>
                            <span class="day">9</span>
                            <span class="day">10</span>
                            <span class="day">11</span>
                            <span class="day">12</span>
                            <span class="day">13</span>
                            <span class="day selected">14</span>
                            <span class="day">15</span>
                            <span class="day">16</span>
                        </swp-booking-demo-days>
                    </swp-booking-demo-calendar>
                </swp-booking-demo-section>

                <swp-booking-demo-footer>
                    <swp-btn class="primary full-width">Book tid</swp-btn>
                </swp-booking-demo-footer>
            </swp-booking-demo>
        </swp-preview-content>
    </swp-preview-frame>
</swp-online-booking-preview-container>

<script>
(function() {
    const deviceBtns = document.querySelectorAll('swp-device-btn');
    const previewFrame = document.querySelector('swp-preview-frame');

    deviceBtns.forEach(btn => {
        btn.addEventListener('click', () => {
            deviceBtns.forEach(b => b.classList.remove('active'));
            btn.classList.add('active');
            previewFrame.setAttribute('data-device', btn.getAttribute('data-device'));
        });
    });
})();
</script>
