{#
    Video Demo Section Partial (Should Have)
    PRD: Feature 8 - Demo Video (lines 209-213)
    SDD: Performance Strategy (line 1059)

    Requirements:
    - Poster image, lazy-load video on click
    - onerror handler to show poster, hide play button on failure
#}
<section class="modern-section modern-video" data-posthog-section="video">
    <div class="modern-container">
        <div class="modern-section__header">
            <span class="modern-section__label">See It In Action</span>
            <h2 class="modern-section__title">Watch BuyerKiosk Demo</h2>
            <p class="modern-section__subtitle">A quick overview of how BuyerKiosk streamlines your buying process.</p>
        </div>

        <div class="modern-video__wrapper">
            <div class="modern-video__container" id="videoContainer">
                {# Poster image shown initially #}
                <img
                    src="/images/front/main-feature2.png"
                    alt="Click to play BuyerKiosk demo video"
                    class="modern-video__poster"
                    id="videoPoster"
                    width="800"
                    height="450"
                >
                {# Play button overlay #}
                <button class="modern-video__play" id="videoPlayBtn" type="button" aria-label="Play demo video">
                    <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24">
                        <path d="M8 5v14l11-7z"/>
                    </svg>
                </button>
                {# Video element - lazy loaded on click #}
                <video
                    id="demoVideo"
                    class="modern-video__player"
                    poster="/images/front/main-feature2.png"
                    preload="none"
                    controls
                    hidden
                >
                    <source src="/videos/buyerkiosk-demo.mp4" type="video/mp4">
                    Your browser does not support the video tag.
                </video>
            </div>
        </div>
    </div>
</section>

<script>
(function() {
    const container = document.getElementById('videoContainer');
    const poster = document.getElementById('videoPoster');
    const playBtn = document.getElementById('videoPlayBtn');
    const video = document.getElementById('demoVideo');

    if (!container || !playBtn || !video) return;

    // Track video progress
    let lastReportedPercent = 0;

    playBtn.addEventListener('click', function() {
        // Hide poster and play button
        poster.hidden = true;
        playBtn.hidden = true;
        video.hidden = false;

        // Play video
        video.play().catch(function(error) {
            console.error('Video playback error:', error);
            // Show poster and play button again on error
            poster.hidden = false;
            playBtn.hidden = false;
            video.hidden = true;
        });

        // Track PostHog event
        if (typeof posthog !== 'undefined') {
            posthog.capture('video_played', {
                video_name: 'buyerkiosk-demo',
                watch_percent: 0
            });
        }
    });

    // Handle video errors
    video.addEventListener('error', function() {
        poster.hidden = false;
        playBtn.hidden = true; // Hide play button on error
        video.hidden = true;
    });

    // Track watch progress
    video.addEventListener('timeupdate', function() {
        if (video.duration) {
            const percent = Math.floor((video.currentTime / video.duration) * 100);
            // Report at 25%, 50%, 75%, 100%
            const milestones = [25, 50, 75, 100];
            milestones.forEach(function(milestone) {
                if (percent >= milestone && lastReportedPercent < milestone) {
                    lastReportedPercent = milestone;
                    if (typeof posthog !== 'undefined') {
                        posthog.capture('video_played', {
                            video_name: 'buyerkiosk-demo',
                            watch_percent: milestone
                        });
                    }
                }
            });
        }
    });
})();
</script>