/**
 * VMO Iframe Placeholder - Premium Showcase Website
 * Uses the same preview shell as generated sites and yields immediately
 * when real website content exists.
 */

(function() {
    'use strict';

    function hasRenderablePreview() {
        if (window.vmoPreviewIsLive) return true;

        if (typeof window.vmoShouldTreatAsRealContent === 'function') {
            const state = window.vmoState && typeof window.vmoState === 'object'
                ? window.vmoState
                : { blocks: [] };
            const combinedStateHtml = Array.isArray(state.blocks)
                ? state.blocks.map(function(block) {
                    return block && block.html ? String(block.html) : '';
                }).join('\n')
                : '';

            if (window.vmoShouldTreatAsRealContent(window.lastContent || '', state)) return true;
            if (window.vmoShouldTreatAsRealContent(combinedStateHtml, state)) return true;
            return false;
        }

        if (window.vmoHasContent) return true;
        if (typeof window.lastContent === 'string' && window.lastContent.trim()) return true;
        if (Array.isArray(window.vmoState?.blocks) && window.vmoState.blocks.length > 0) return true;
        return false;
    }

    function isConsultationReady() {
        return document.querySelector('#vmo-consultation-status .vmo-chip')?.dataset?.ready === 'true';
    }

    function svgToDataUri(markup) {
        return 'data:image/svg+xml;charset=UTF-8,' + encodeURIComponent(
            String(markup || '')
                .replace(/>\s+</g, '><')
                .trim()
        );
    }

    function buildFallbackArtwork(config) {
        const frames = (config.frames || []).map(function(frame) {
            return '<rect x="' + frame.x + '" y="' + frame.y + '" width="' + frame.width + '" height="' + frame.height + '" rx="' + (frame.radius || 30) + '" fill="' + (frame.fill || 'url(#panelFill)') + '" fill-opacity="' + (frame.fillOpacity || 1) + '" stroke="' + (frame.stroke || config.stroke) + '" stroke-opacity="' + (frame.strokeOpacity || 0.34) + '" stroke-width="' + (frame.strokeWidth || 2) + '" />';
        }).join('');

        const accents = (config.accents || []).map(function(accent) {
            return '<rect x="' + accent.x + '" y="' + accent.y + '" width="' + accent.width + '" height="' + accent.height + '" rx="' + (accent.radius || 999) + '" fill="' + accent.fill + '" fill-opacity="' + (accent.fillOpacity || 1) + '" />';
        }).join('');

        const rings = (config.rings || []).map(function(ring) {
            return '<circle cx="' + ring.cx + '" cy="' + ring.cy + '" r="' + ring.r + '" stroke="' + ring.stroke + '" stroke-opacity="' + (ring.strokeOpacity || 0.4) + '" stroke-width="' + (ring.strokeWidth || 2) + '" fill="none" />';
        }).join('');

        return svgToDataUri(
            '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1600 1000" fill="none">'
                + '<defs>'
                + '<linearGradient id="bg" x1="0" y1="0" x2="1600" y2="1000" gradientUnits="userSpaceOnUse">'
                + '<stop stop-color="' + config.bgStart + '" />'
                + '<stop offset="0.54" stop-color="' + config.bgMid + '" />'
                + '<stop offset="1" stop-color="' + config.bgEnd + '" />'
                + '</linearGradient>'
                + '<linearGradient id="panelFill" x1="180" y1="120" x2="1400" y2="900" gradientUnits="userSpaceOnUse">'
                + '<stop stop-color="' + config.panelStart + '" />'
                + '<stop offset="1" stop-color="' + config.panelEnd + '" />'
                + '</linearGradient>'
                + '<radialGradient id="glowOne" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(' + config.glowOne.cx + ' ' + config.glowOne.cy + ') rotate(90) scale(' + config.glowOne.r + ' ' + config.glowOne.r + ')">'
                + '<stop stop-color="' + config.accent + '" stop-opacity="0.72" />'
                + '<stop offset="1" stop-color="' + config.accent + '" stop-opacity="0" />'
                + '</radialGradient>'
                + '<radialGradient id="glowTwo" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(' + config.glowTwo.cx + ' ' + config.glowTwo.cy + ') rotate(90) scale(' + config.glowTwo.r + ' ' + config.glowTwo.r + ')">'
                + '<stop stop-color="' + config.accentTwo + '" stop-opacity="0.68" />'
                + '<stop offset="1" stop-color="' + config.accentTwo + '" stop-opacity="0" />'
                + '</radialGradient>'
                + '</defs>'
                + '<rect width="1600" height="1000" fill="url(#bg)" />'
                + '<g opacity="0.12">'
                + '<path d="M220 0V1000" stroke="#F8FAFC" />'
                + '<path d="M520 0V1000" stroke="#F8FAFC" />'
                + '<path d="M860 0V1000" stroke="#F8FAFC" />'
                + '<path d="M1200 0V1000" stroke="#F8FAFC" />'
                + '<path d="M0 200H1600" stroke="#F8FAFC" />'
                + '<path d="M0 500H1600" stroke="#F8FAFC" />'
                + '<path d="M0 790H1600" stroke="#F8FAFC" />'
                + '</g>'
                + '<circle cx="' + config.glowOne.cx + '" cy="' + config.glowOne.cy + '" r="' + config.glowOne.r + '" fill="url(#glowOne)" />'
                + '<circle cx="' + config.glowTwo.cx + '" cy="' + config.glowTwo.cy + '" r="' + config.glowTwo.r + '" fill="url(#glowTwo)" />'
                + '<rect x="68" y="72" width="1464" height="856" rx="42" fill="#020817" fill-opacity="0.18" stroke="#FFFFFF" stroke-opacity="0.08" />'
                + frames
                + accents
                + rings
                + '</svg>'
        );
    }

    const SHOWCASE_FALLBACK_MEDIA = {
        heroBackdrop: buildFallbackArtwork({
            bgStart: '#07111D',
            bgMid: '#10274A',
            bgEnd: '#060C16',
            panelStart: '#11294A',
            panelEnd: '#0B172B',
            stroke: '#A5F3FC',
            accent: '#6EE7F9',
            accentTwo: '#8B7CFF',
            glowOne: { cx: 290, cy: 190, r: 470 },
            glowTwo: { cx: 1220, cy: 230, r: 430 },
            frames: [
                { x: 146, y: 132, width: 920, height: 542 },
                { x: 1098, y: 162, width: 278, height: 182, fill: '#11253F', fillOpacity: 0.92 },
                { x: 1098, y: 374, width: 338, height: 224, fill: '#0C1A30', fillOpacity: 0.9 },
                { x: 238, y: 712, width: 1086, height: 118, fill: '#0A172A', fillOpacity: 0.82 }
            ],
            accents: [
                { x: 184, y: 176, width: 312, height: 16, fill: '#73F0CB', fillOpacity: 0.92 },
                { x: 184, y: 214, width: 458, height: 14, fill: '#E2E8F0', fillOpacity: 0.78 },
                { x: 184, y: 250, width: 396, height: 14, fill: '#CBD5E1', fillOpacity: 0.56 },
                { x: 1130, y: 198, width: 154, height: 122, radius: 26, fill: '#142C4E', fillOpacity: 0.96 }
            ],
            rings: [
                { cx: 1296, cy: 670, r: 112, stroke: '#73F0CB', strokeOpacity: 0.32 },
                { cx: 1296, cy: 670, r: 154, stroke: '#7BA5FF', strokeOpacity: 0.2 }
            ]
        }),
        heroBrand: buildFallbackArtwork({
            bgStart: '#0A1424',
            bgMid: '#123562',
            bgEnd: '#07111D',
            panelStart: '#173C6C',
            panelEnd: '#0E203C',
            stroke: '#7BA5FF',
            accent: '#7BA5FF',
            accentTwo: '#73F0CB',
            glowOne: { cx: 260, cy: 220, r: 360 },
            glowTwo: { cx: 1100, cy: 180, r: 310 },
            frames: [
                { x: 120, y: 126, width: 964, height: 586 },
                { x: 1118, y: 174, width: 304, height: 212, fill: '#122746', fillOpacity: 0.92 },
                { x: 1118, y: 420, width: 204, height: 208, fill: '#0E1C33', fillOpacity: 0.86 }
            ],
            accents: [
                { x: 164, y: 174, width: 268, height: 18, fill: '#F8FAFC', fillOpacity: 0.88 },
                { x: 164, y: 214, width: 402, height: 16, fill: '#73F0CB', fillOpacity: 0.78 },
                { x: 164, y: 254, width: 522, height: 14, fill: '#CBD5E1', fillOpacity: 0.48 },
                { x: 180, y: 562, width: 428, height: 92, radius: 26, fill: '#112745', fillOpacity: 0.86 }
            ],
            rings: [
                { cx: 1260, cy: 770, r: 124, stroke: '#7BA5FF', strokeOpacity: 0.24 }
            ]
        }),
        heroOverlay: buildFallbackArtwork({
            bgStart: '#09111D',
            bgMid: '#301A53',
            bgEnd: '#090F18',
            panelStart: '#33215B',
            panelEnd: '#131A31',
            stroke: '#F4C77A',
            accent: '#F4C77A',
            accentTwo: '#FF8A9E',
            glowOne: { cx: 360, cy: 250, r: 340 },
            glowTwo: { cx: 1180, cy: 220, r: 280 },
            frames: [
                { x: 144, y: 156, width: 612, height: 286 },
                { x: 786, y: 156, width: 626, height: 420 },
                { x: 224, y: 482, width: 462, height: 192, fill: '#1B233D', fillOpacity: 0.9 }
            ],
            accents: [
                { x: 188, y: 198, width: 232, height: 16, fill: '#F8FAFC', fillOpacity: 0.88 },
                { x: 188, y: 234, width: 326, height: 14, fill: '#F4C77A', fillOpacity: 0.82 },
                { x: 842, y: 212, width: 284, height: 138, radius: 28, fill: '#F8FAFC', fillOpacity: 0.08 }
            ],
            rings: [
                { cx: 1300, cy: 762, r: 104, stroke: '#FF8A9E', strokeOpacity: 0.34 }
            ]
        }),
        editorialLanding: buildFallbackArtwork({
            bgStart: '#07131F',
            bgMid: '#1B355A',
            bgEnd: '#0A1119',
            panelStart: '#1A3B65',
            panelEnd: '#0C1A2D',
            stroke: '#73F0CB',
            accent: '#73F0CB',
            accentTwo: '#7BA5FF',
            glowOne: { cx: 300, cy: 220, r: 340 },
            glowTwo: { cx: 1220, cy: 250, r: 300 },
            frames: [
                { x: 126, y: 120, width: 1348, height: 372 },
                { x: 126, y: 544, width: 412, height: 224 },
                { x: 572, y: 544, width: 418, height: 224 },
                { x: 1024, y: 544, width: 450, height: 224 }
            ],
            accents: [
                { x: 176, y: 172, width: 302, height: 16, fill: '#F8FAFC', fillOpacity: 0.88 },
                { x: 176, y: 206, width: 398, height: 14, fill: '#73F0CB', fillOpacity: 0.78 },
                { x: 176, y: 242, width: 356, height: 14, fill: '#CBD5E1', fillOpacity: 0.54 }
            ]
        }),
        productLaunch: buildFallbackArtwork({
            bgStart: '#06111F',
            bgMid: '#123A6A',
            bgEnd: '#070D16',
            panelStart: '#174477',
            panelEnd: '#0D1C34',
            stroke: '#60A5FA',
            accent: '#60A5FA',
            accentTwo: '#22D3EE',
            glowOne: { cx: 280, cy: 210, r: 350 },
            glowTwo: { cx: 1180, cy: 180, r: 260 },
            frames: [
                { x: 118, y: 128, width: 548, height: 640 },
                { x: 708, y: 128, width: 336, height: 264 },
                { x: 708, y: 424, width: 336, height: 344 },
                { x: 1084, y: 128, width: 392, height: 640 }
            ],
            accents: [
                { x: 166, y: 176, width: 226, height: 16, fill: '#F8FAFC', fillOpacity: 0.84 },
                { x: 166, y: 210, width: 320, height: 14, fill: '#22D3EE', fillOpacity: 0.82 },
                { x: 1136, y: 188, width: 276, height: 152, radius: 26, fill: '#07192E', fillOpacity: 0.5 }
            ]
        }),
        commerceHero: buildFallbackArtwork({
            bgStart: '#110D14',
            bgMid: '#3C1E2A',
            bgEnd: '#0A0912',
            panelStart: '#52303A',
            panelEnd: '#181221',
            stroke: '#F4C77A',
            accent: '#F4C77A',
            accentTwo: '#FF8A9E',
            glowOne: { cx: 340, cy: 200, r: 340 },
            glowTwo: { cx: 1200, cy: 220, r: 280 },
            frames: [
                { x: 144, y: 128, width: 474, height: 640 },
                { x: 654, y: 128, width: 334, height: 640 },
                { x: 1024, y: 128, width: 430, height: 640 }
            ],
            accents: [
                { x: 206, y: 188, width: 196, height: 196, radius: 98, fill: '#FFF7ED', fillOpacity: 0.08 },
                { x: 724, y: 210, width: 192, height: 16, fill: '#F4C77A', fillOpacity: 0.8 },
                { x: 724, y: 246, width: 138, height: 14, fill: '#FFF7ED', fillOpacity: 0.62 }
            ],
            rings: [
                { cx: 1244, cy: 742, r: 120, stroke: '#F4C77A', strokeOpacity: 0.28 }
            ]
        }),
        brandReel: buildFallbackArtwork({
            bgStart: '#07121E',
            bgMid: '#10284A',
            bgEnd: '#08111A',
            panelStart: '#17365F',
            panelEnd: '#0D1B31',
            stroke: '#73F0CB',
            accent: '#73F0CB',
            accentTwo: '#7BA5FF',
            glowOne: { cx: 310, cy: 210, r: 360 },
            glowTwo: { cx: 1220, cy: 260, r: 360 },
            frames: [
                { x: 126, y: 118, width: 1348, height: 322 },
                { x: 126, y: 488, width: 612, height: 280 },
                { x: 774, y: 488, width: 700, height: 280 }
            ],
            accents: [
                { x: 174, y: 170, width: 286, height: 16, fill: '#F8FAFC', fillOpacity: 0.86 },
                { x: 174, y: 204, width: 422, height: 14, fill: '#73F0CB', fillOpacity: 0.84 },
                { x: 174, y: 244, width: 582, height: 12, fill: '#CBD5E1', fillOpacity: 0.44 },
                { x: 844, y: 550, width: 520, height: 152, radius: 28, fill: '#0B1B31', fillOpacity: 0.72 }
            ]
        }),
        offerArchitecture: buildFallbackArtwork({
            bgStart: '#08101A',
            bgMid: '#123256',
            bgEnd: '#09111B',
            panelStart: '#173A65',
            panelEnd: '#0D1A2E',
            stroke: '#60A5FA',
            accent: '#60A5FA',
            accentTwo: '#F8FAFC',
            glowOne: { cx: 260, cy: 170, r: 280 },
            glowTwo: { cx: 1080, cy: 190, r: 240 },
            frames: [
                { x: 116, y: 118, width: 420, height: 688 },
                { x: 578, y: 164, width: 332, height: 286 },
                { x: 578, y: 484, width: 332, height: 238 },
                { x: 954, y: 118, width: 530, height: 688 }
            ],
            accents: [
                { x: 174, y: 170, width: 202, height: 18, fill: '#F8FAFC', fillOpacity: 0.86 },
                { x: 174, y: 208, width: 268, height: 14, fill: '#60A5FA', fillOpacity: 0.82 },
                { x: 1010, y: 180, width: 360, height: 112, radius: 28, fill: '#0A182C', fillOpacity: 0.7 }
            ]
        }),
        proofWall: buildFallbackArtwork({
            bgStart: '#0A101B',
            bgMid: '#27293F',
            bgEnd: '#090E16',
            panelStart: '#2B3558',
            panelEnd: '#111727',
            stroke: '#FF8A9E',
            accent: '#FF8A9E',
            accentTwo: '#F4C77A',
            glowOne: { cx: 300, cy: 180, r: 260 },
            glowTwo: { cx: 1180, cy: 220, r: 220 },
            frames: [
                { x: 118, y: 132, width: 400, height: 248 },
                { x: 554, y: 132, width: 400, height: 248 },
                { x: 990, y: 132, width: 492, height: 248 },
                { x: 118, y: 420, width: 436, height: 322 },
                { x: 592, y: 420, width: 438, height: 322 },
                { x: 1068, y: 420, width: 414, height: 322 }
            ],
            accents: [
                { x: 168, y: 182, width: 186, height: 16, fill: '#FFF1F2', fillOpacity: 0.84 },
                { x: 168, y: 220, width: 222, height: 14, fill: '#FF8A9E', fillOpacity: 0.8 },
                { x: 644, y: 470, width: 220, height: 110, radius: 26, fill: '#0C1523', fillOpacity: 0.7 }
            ]
        })
    };

    function wrapShowcaseDocument(content) {
        if (typeof window.wrapIframeContent === 'function') {
            return window.wrapIframeContent(content);
        }

        return `<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>VMO Preview</title>
</head>
<body>${content}</body>
</html>`;
    }

    function hasRenderableShowcaseHtml(value) {
        const input = String(value || '');
        if (!input) return false;

        if (/id=["']vmo-demo-showcase["']|data-vmo-preview-mode=["']showcase-placeholder["']/i.test(input)) {
            return /id=["']vmo-showcase-stage["']|class=["'][^"']*(?:vmo-showcase-slide|demo-hero|demo-shell)[^"']*["']/i.test(input)
                && (typeof window.vmoHasMeaningfulPreviewHtml !== 'function' || window.vmoHasMeaningfulPreviewHtml(input));
        }

        return typeof window.vmoHasMeaningfulPreviewHtml === 'function'
            ? window.vmoHasMeaningfulPreviewHtml(input)
            : !!input.trim();
    }

    function serializeShowcasePreview() {
        let serialized = '';

        if (typeof window.vmoSerializePreviewDocument === 'function') {
            serialized = window.vmoSerializePreviewDocument();
            if (hasRenderableShowcaseHtml(serialized)) {
                return serialized;
            }
        }

        const iframe = document.getElementById('vmo-preview-iframe');
        if (!iframe) return '';
        serialized = String(iframe.getAttribute('srcdoc') || iframe.srcdoc || '');
        return hasRenderableShowcaseHtml(serialized) ? serialized : '';
    }

    function iframeHasRenderableShowcaseDocument(iframe) {
        let doc = null;

        if (!iframe) return false;

        try {
            doc = iframe.contentDocument || (iframe.contentWindow && iframe.contentWindow.document) || null;
        } catch (_) {
            doc = null;
        }

        if (doc && doc.documentElement) {
            const hasShowcaseRoot = !!doc.getElementById('vmo-demo-showcase');
            const hasShowcaseStage = !!doc.getElementById('vmo-showcase-stage');
            const hasSlides = !!doc.querySelector('.vmo-showcase-slide, .demo-hero, .demo-shell');

            if (hasShowcaseRoot && (hasShowcaseStage || hasSlides)) {
                return true;
            }

            if (typeof window.vmoSerializePreviewDocument === 'function') {
                try {
                    return hasRenderableShowcaseHtml(window.vmoSerializePreviewDocument(iframe));
                } catch (_) {
                    return false;
                }
            }
        }

        return hasRenderableShowcaseHtml(String(iframe.getAttribute('srcdoc') || iframe.srcdoc || ''));
    }

    function recoverShowcasePlaceholder(reason) {
        const iframe = document.getElementById('vmo-preview-iframe');
        const recoveryCount = iframe ? Number(iframe.dataset.vmoShowcaseRecoveryCount || '0') : 0;

        if (!iframe || window.vmoPreviewIsLive) return false;
        if (hasRenderablePreview()) return false;
        if (recoveryCount >= 3) return false;

        iframe.dataset.vmoShowcaseRecoveryCount = String(recoveryCount + 1);
        window.vmoShowcasePreviewHtml = '';
        console.warn('[VMO] Recovering bundled showcase placeholder:', reason || 'unknown', 'attempt', recoveryCount + 1);
        window.showIframePlaceholder({ force: true, rebuild: true, skipPersist: true });
        return true;
    }

    function isShowcasePreviewActive() {
        const iframe = document.getElementById('vmo-preview-iframe');
        if (!iframe) return false;
        if (iframe.dataset && iframe.dataset.vmoPreviewMode === 'showcase-placeholder') return true;

        try {
            return !!iframe.contentDocument?.getElementById('vmo-demo-showcase');
        } catch (_) {
            return false;
        }
    }

    function queueShowcaseMediaGeneration() {
        const iframe = document.getElementById('vmo-preview-iframe');
        if (!iframe || iframe.dataset.vmoPreviewMode !== 'showcase-placeholder') {
            return Promise.resolve({ complete: true, total: 0, completed: 0, failed: [] });
        }

        iframe.dataset.vmoShowcaseMediaState = 'complete';
        window.vmoShowcaseMediaPromise = Promise.resolve({ complete: true, total: 0, completed: 0, failed: [] }).then(function(result) {
            window.vmoShowcasePreviewHtml = serializeShowcasePreview() || window.vmoShowcasePreviewHtml || '';
            if (typeof window.vmoPersistPreviewFrameState === 'function') {
                window.vmoPersistPreviewFrameState('showcase-bundled-ready');
            }
            return result;
        });

        return window.vmoShowcaseMediaPromise;
    }

    function buildBundledShowcaseMarkup(consultationReady) {
        const primaryCta = consultationReady ? 'Open Builder Workspace' : 'Take Business Consultation';
        const secondaryCta = consultationReady ? 'Continue Website Build' : 'Begin With Consultation';

        const slides = [
            {
                eyebrow: 'AI Business Consultation',
                titleTop: 'Speak first.',
                titleBottom: 'Launch sharper.',
                copy: 'VMO learns the business, the goals, and the offer before anything gets built.',
                points: ['AI consultation memory', 'Strategy before production'],
                media: SHOWCASE_FALLBACK_MEDIA.heroBackdrop,
                accent: 'cyan',
                stat: 'Consultation-first system'
            },
            {
                eyebrow: 'Complete Website Creation',
                titleTop: 'Your website.',
                titleBottom: 'Already assembled.',
                copy: 'Pages, branding, layout, navigation, and copy arrive together as one launch-ready build.',
                points: ['Pages and structure', 'Brand and launch flow'],
                media: SHOWCASE_FALLBACK_MEDIA.heroBrand,
                accent: 'blue',
                stat: 'Website creation in one workspace'
            },
            {
                eyebrow: 'Business Phone + AI Receptionist',
                titleTop: 'Answer calls like a',
                titleBottom: 'staffed business.',
                copy: 'A business number and a human-sounding receptionist handle calls, messages, and missed-call summaries.',
                points: ['Call handling and messages', 'Professional branded voice'],
                media: SHOWCASE_FALLBACK_MEDIA.heroOverlay,
                accent: 'gold',
                stat: 'Communications built in'
            },
            {
                eyebrow: 'Payment & Invoicing System',
                titleTop: 'Take payments without',
                titleBottom: 'tool sprawl.',
                copy: 'Payments, invoices, subscriptions, and revenue tracking stay inside the same business suite.',
                points: ['Checkout and invoicing', 'Subscription revenue tracking'],
                media: SHOWCASE_FALLBACK_MEDIA.editorialLanding,
                accent: 'rose',
                stat: 'Revenue operations built in'
            },
            {
                eyebrow: 'Automated Email Marketing',
                titleTop: 'Keep campaigns moving',
                titleBottom: 'after launch.',
                copy: 'AI writes, builds, and schedules newsletters, promos, and follow-ups from the same dashboard.',
                points: ['Campaign drafting', 'Approve and send workflow'],
                media: SHOWCASE_FALLBACK_MEDIA.productLaunch,
                accent: 'cyan',
                stat: 'Email execution inside VMO'
            },
            {
                eyebrow: 'Smart Product Generators',
                titleTop: 'Turn offers into',
                titleBottom: 'sellable pages.',
                copy: 'VMO creates product descriptions, pricing angles, SEO pages, and promotional imagery for the offer.',
                points: ['Offer copy and pricing ideas', 'Lifestyle and promo visuals'],
                media: SHOWCASE_FALLBACK_MEDIA.commerceHero,
                accent: 'gold',
                stat: 'Product creation assistance'
            },
            {
                eyebrow: 'Competitor Tracking & Market Analysis',
                titleTop: 'Watch the market',
                titleBottom: 'while you build.',
                copy: 'Competing offers, pricing shifts, trends, and growth gaps are monitored like an internal research desk.',
                points: ['Competitor and trend scans', 'Growth opportunity signals'],
                media: SHOWCASE_FALLBACK_MEDIA.brandReel,
                accent: 'blue',
                stat: 'Research on repeat'
            },
            {
                eyebrow: 'Automatic SEO Optimization',
                titleTop: 'Keep SEO improving',
                titleBottom: 'without babysitting it.',
                copy: 'Keywords, headings, structure, links, and meta content keep adapting to market patterns.',
                points: ['Continuous SEO adjustments', 'Search-ready page structure'],
                media: SHOWCASE_FALLBACK_MEDIA.offerArchitecture,
                accent: 'cyan',
                stat: 'SEO that keeps moving'
            },
            {
                eyebrow: 'CRM + Business Documents',
                titleTop: 'Run leads, contacts, and',
                titleBottom: 'documents together.',
                copy: 'CRM records, notes, call logs, submissions, plans, and launch documents stay organized in one system.',
                points: ['Contacts and lead tracking', 'Plans, scripts, and reports'],
                media: SHOWCASE_FALLBACK_MEDIA.proofWall,
                accent: 'rose',
                stat: 'Operations and records connected'
            },
            {
                eyebrow: 'Real-Time KPI Dashboard',
                titleTop: 'See momentum in',
                titleBottom: 'real time.',
                copy: 'Traffic, leads, engagement, conversions, and revenue signals stay visible while VMO tells you what to fix next.',
                points: ['Live KPI visibility', 'Decision support in context'],
                media: SHOWCASE_FALLBACK_MEDIA.heroBackdrop,
                accent: 'blue',
                stat: 'Live business telemetry'
            },
            {
                eyebrow: 'Voice + Support + Upload Intelligence',
                titleTop: 'Ask by voice.',
                titleBottom: 'Reply with confidence.',
                copy: 'Talk to the dashboard, generate support replies, and turn uploaded files into actionable next steps.',
                points: ['Voice-led questions and edits', 'Upload-aware business intelligence'],
                media: SHOWCASE_FALLBACK_MEDIA.heroBrand,
                accent: 'gold',
                stat: 'Voice and support assistance'
            },
            {
                eyebrow: 'Strategy System + AI Agent Team',
                titleTop: 'One consultation starts',
                titleBottom: 'the business engine.',
                copy: 'Weekly strategy updates and a team of specialists keep learning, recommending, and helping the business move forward.',
                points: ['10+ AI specialists inside WordPress', 'Recommendations that keep updating'],
                media: SHOWCASE_FALLBACK_MEDIA.heroOverlay,
                accent: 'blue',
                stat: 'VMO as the business engine'
            }
        ];

        const slideMarkup = slides.map(function(slide, index) {
            const points = slide.points.map(function(point) {
                return '<li>' + point + '</li>';
            }).join('');

            return `
                <article class="vmo-showcase-slide${index === 0 ? ' is-active' : ''}" data-slide-index="${index}" data-accent="${slide.accent}">
                    <div class="vmo-showcase-copy">
                        <div class="vmo-showcase-kicker-row">
                            <span class="vmo-showcase-kicker">${slide.eyebrow}</span>
                            <span class="vmo-showcase-stat">${slide.stat}</span>
                        </div>
                        <h1 class="vmo-showcase-title" aria-label="${slide.titleTop} ${slide.titleBottom}">
                            <span class="vmo-showcase-title-line">${slide.titleTop}</span>
                            <span class="vmo-showcase-title-line">${slide.titleBottom}</span>
                        </h1>
                        <p class="vmo-showcase-summary">${slide.copy}</p>
                        <ul class="vmo-showcase-points">${points}</ul>
                        <div class="vmo-showcase-actions">
                            <a href="#" class="vmo-showcase-btn vmo-showcase-btn-primary" data-vmo-consultation-trigger="true">${primaryCta}</a>
                            <a href="#" class="vmo-showcase-btn vmo-showcase-btn-secondary" data-vmo-consultation-trigger="true">${secondaryCta}</a>
                        </div>
                    </div>
                    <div class="vmo-showcase-art-shell">
                        <div class="vmo-showcase-art-frame">
                            <img src="${slide.media}" alt="" loading="${index === 0 ? 'eager' : 'lazy'}" class="vmo-showcase-art-image">
                            <div class="vmo-showcase-art-mist vmo-showcase-art-mist-one"></div>
                            <div class="vmo-showcase-art-mist vmo-showcase-art-mist-two"></div>
                            <div class="vmo-showcase-float-card vmo-showcase-float-card-top">
                                <span>Slide ${String(index + 1).padStart(2, '0')}</span>
                                <strong>${slide.eyebrow}</strong>
                            </div>
                            <div class="vmo-showcase-float-card vmo-showcase-float-card-bottom">
                                <span>VMO Capability</span>
                                <strong>${slide.points[0]}</strong>
                            </div>
                        </div>
                    </div>
                </article>`;
        }).join('');

        return `
<style>
@import url('https://fonts.googleapis.com/css2?family=Syne:wght@500;700;800&family=Manrope:wght@400;500;600;700;800&display=swap');

:root {
    --vmo-showcase-bg: #071019;
    --vmo-showcase-ink: #f5f7fb;
    --vmo-showcase-muted: rgba(231, 238, 247, 0.74);
    --vmo-showcase-line: rgba(255, 255, 255, 0.12);
    --vmo-showcase-cyan: #78edd5;
    --vmo-showcase-blue: #7aa6ff;
    --vmo-showcase-gold: #f2c97d;
    --vmo-showcase-rose: #ff93aa;
    --vmo-showcase-shadow: 0 40px 120px rgba(0, 0, 0, 0.38);
}

* { box-sizing: border-box; }
html, body {
    margin: 0;
    min-height: 100%;
    background:
        radial-gradient(circle at 14% 20%, rgba(120, 237, 213, 0.18), transparent 30%),
        radial-gradient(circle at 86% 12%, rgba(122, 166, 255, 0.24), transparent 28%),
        radial-gradient(circle at 60% 80%, rgba(255, 147, 170, 0.18), transparent 26%),
        linear-gradient(180deg, #03070c 0%, #071019 40%, #08111c 100%);
    color: var(--vmo-showcase-ink);
    font-family: 'Manrope', sans-serif;
}

body { overflow: hidden; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
img { display: block; max-width: 100%; }

#vmo-demo-showcase {
    position: relative;
    min-height: 100vh;
    overflow: hidden;
    isolation: isolate;
}

.vmo-showcase-backdrop-grid,
.vmo-showcase-backdrop-grid::before,
.vmo-showcase-backdrop-grid::after {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.vmo-showcase-backdrop-grid {
    background-image:
        linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
    background-size: 88px 88px;
    opacity: 0.2;
}

.vmo-showcase-backdrop-grid::before,
.vmo-showcase-backdrop-grid::after {
    content: '';
    border-radius: 999px;
    filter: blur(60px);
    mix-blend-mode: screen;
}

.vmo-showcase-backdrop-grid::before {
    top: 8%;
    left: -6%;
    width: 38vw;
    height: 38vw;
    background: rgba(120, 237, 213, 0.14);
    animation: vmoNebulaFloat 18s ease-in-out infinite;
}

.vmo-showcase-backdrop-grid::after {
    right: -10%;
    bottom: 4%;
    width: 44vw;
    height: 44vw;
    background: rgba(122, 166, 255, 0.16);
    animation: vmoNebulaFloat 22s ease-in-out infinite reverse;
}

.vmo-showcase-shell {
    position: relative;
    z-index: 1;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    padding: 28px 28px 22px;
}

.vmo-showcase-pill strong,
.vmo-showcase-rail-copy strong,
.vmo-showcase-float-card strong,
.vmo-showcase-stat,
.vmo-showcase-kicker,
.vmo-showcase-rail-index {
    font-family: 'Syne', sans-serif;
}

.vmo-showcase-stage {
    position: relative;
    display: flex;
    align-items: stretch;
    flex: 1;
    border-radius: 36px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.08);
    background: linear-gradient(180deg, rgba(8, 13, 22, 0.74), rgba(4, 8, 15, 0.88));
    box-shadow: var(--vmo-showcase-shadow);
}

.vmo-showcase-progress {
    position: absolute;
    top: 0;
    left: 0;
    height: 3px;
    width: 100%;
    background: rgba(255,255,255,0.08);
    overflow: hidden;
}

.vmo-showcase-progress-fill {
    display: block;
    height: 100%;
    width: 10%;
    background: linear-gradient(90deg, var(--vmo-showcase-cyan), var(--vmo-showcase-blue), var(--vmo-showcase-gold));
    transition: width 0.45s ease;
}

.vmo-showcase-slides {
    position: relative;
    flex: 1;
    min-height: calc(100vh - 164px);
}

.vmo-showcase-slide {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-columns: minmax(0, 1.02fr) minmax(300px, 0.98fr);
    gap: 32px;
    align-items: center;
    padding: 94px 60px 92px;
    opacity: 0;
    transform: translate3d(0, 40px, 0) scale(0.985);
    pointer-events: none;
    transition: opacity 0.55s ease, transform 0.7s ease;
}

.vmo-showcase-slide.is-active {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    pointer-events: auto;
}

.vmo-showcase-slide[data-accent="cyan"] { --vmo-slide-accent: var(--vmo-showcase-cyan); }
.vmo-showcase-slide[data-accent="blue"] { --vmo-slide-accent: var(--vmo-showcase-blue); }
.vmo-showcase-slide[data-accent="gold"] { --vmo-slide-accent: var(--vmo-showcase-gold); }
.vmo-showcase-slide[data-accent="rose"] { --vmo-slide-accent: var(--vmo-showcase-rose); }

.vmo-showcase-copy {
    position: relative;
    z-index: 1;
    max-width: 620px;
}

.vmo-showcase-kicker-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
}

.vmo-showcase-kicker,
.vmo-showcase-stat {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 999px;
    font-size: 0.78rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.vmo-showcase-kicker {
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.12);
}

.vmo-showcase-stat {
    background: rgba(8, 16, 28, 0.64);
    border: 1px solid rgba(255,255,255,0.08);
    color: var(--vmo-slide-accent);
}

.vmo-showcase-title {
    margin: 28px 0 0;
    font-family: 'Syne', sans-serif;
    font-size: clamp(3.25rem, 7vw, 6.4rem);
    line-height: 0.9;
    letter-spacing: -0.055em;
}

.vmo-showcase-title-line { display: block; overflow: hidden; }
.vmo-showcase-title-line + .vmo-showcase-title-line { margin-top: 0.12em; }

.vmo-showcase-summary {
    margin: 24px 0 0;
    max-width: 52ch;
    font-size: 1.08rem;
    line-height: 1.8;
    color: var(--vmo-showcase-muted);
}

.vmo-showcase-points {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    padding: 0;
    margin: 28px 0 0;
    list-style: none;
}

.vmo-showcase-points li {
    min-height: 96px;
    padding: 18px 18px 18px 22px;
    border-radius: 24px;
    border: 1px solid rgba(255,255,255,0.08);
    background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02));
    color: rgba(245, 247, 251, 0.92);
    font-size: 0.95rem;
    line-height: 1.6;
    position: relative;
}

.vmo-showcase-points li::before {
    content: '';
    position: absolute;
    left: 12px;
    top: 22px;
    width: 5px;
    height: 44px;
    border-radius: 999px;
    background: linear-gradient(180deg, var(--vmo-slide-accent), rgba(255,255,255,0));
}

.vmo-showcase-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 32px;
}

.vmo-showcase-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 220px;
    padding: 16px 22px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.12);
    transition: transform 0.25s ease, border-color 0.25s ease, background 0.25s ease;
}

.vmo-showcase-btn:hover { transform: translateY(-2px); }

.vmo-showcase-btn-primary {
    background: linear-gradient(135deg, rgba(120, 237, 213, 0.94), rgba(122, 166, 255, 0.94));
    color: #06101b;
    font-weight: 800;
}

.vmo-showcase-btn-secondary {
    background: rgba(255,255,255,0.04);
    color: var(--vmo-showcase-ink);
    font-weight: 700;
}

.vmo-showcase-art-shell {
    position: relative;
    display: flex;
    justify-content: flex-end;
}

.vmo-showcase-art-frame {
    position: relative;
    width: min(100%, 560px);
    aspect-ratio: 0.95;
    border-radius: 34px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.14);
    background: rgba(255,255,255,0.03);
    box-shadow: 0 28px 90px rgba(0, 0, 0, 0.42);
    transform: translate3d(calc(var(--vmo-parallax-x, 0px) * 0.35), calc(var(--vmo-parallax-y, 0px) * 0.35), 0);
    transition: transform 0.28s ease;
}

.vmo-showcase-art-frame::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(8, 13, 22, 0.02), rgba(8, 13, 22, 0.45));
}

.vmo-showcase-art-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: saturate(1.06) contrast(1.02);
}

.vmo-showcase-art-mist {
    position: absolute;
    border-radius: 999px;
    filter: blur(22px);
    mix-blend-mode: screen;
    opacity: 0.65;
    animation: vmoPulseMist 9s ease-in-out infinite;
}

.vmo-showcase-art-mist-one {
    top: 10%;
    left: 8%;
    width: 26%;
    height: 26%;
    background: rgba(120, 237, 213, 0.2);
}

.vmo-showcase-art-mist-two {
    right: 10%;
    bottom: 12%;
    width: 30%;
    height: 30%;
    background: rgba(122, 166, 255, 0.22);
    animation-delay: -3s;
}

.vmo-showcase-float-card {
    position: absolute;
    z-index: 2;
    min-width: 180px;
    max-width: 240px;
    padding: 14px 16px;
    border-radius: 20px;
    border: 1px solid rgba(255,255,255,0.12);
    background: linear-gradient(180deg, rgba(8, 13, 22, 0.85), rgba(12, 18, 29, 0.64));
    box-shadow: 0 18px 60px rgba(0, 0, 0, 0.34);
    backdrop-filter: blur(18px);
}

.vmo-showcase-float-card span {
    display: block;
    font-size: 0.72rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(231, 238, 247, 0.64);
}

.vmo-showcase-float-card strong {
    display: block;
    margin-top: 8px;
    font-size: 0.98rem;
    line-height: 1.4;
}

.vmo-showcase-float-card-top { top: 26px; left: 26px; }
.vmo-showcase-float-card-bottom { right: 26px; bottom: 26px; }

.vmo-showcase-rail {
    position: absolute;
    left: 28px;
    right: 28px;
    bottom: 22px;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
}

.vmo-showcase-rail-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 22px;
    border: 1px solid rgba(255,255,255,0.08);
    background: rgba(255,255,255,0.04);
    color: rgba(245,247,251,0.74);
    cursor: pointer;
    text-align: left;
    transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.vmo-showcase-rail-item:hover,
.vmo-showcase-rail-item.is-active {
    transform: translateY(-2px);
    border-color: rgba(255,255,255,0.18);
    background: rgba(255,255,255,0.09);
    color: #fff;
}

.vmo-showcase-rail-copy {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.vmo-showcase-rail-copy strong {
    font-size: 0.78rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.vmo-showcase-rail-copy small {
    display: block;
    font-size: 0.78rem;
    color: rgba(231, 238, 247, 0.68);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.vmo-showcase-controls {
    position: absolute;
    top: 26px;
    right: 26px;
    z-index: 2;
    display: flex;
    gap: 10px;
}

.vmo-showcase-control {
    width: 48px;
    height: 48px;
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 999px;
    display: grid;
    place-items: center;
    background: rgba(8, 13, 22, 0.72);
    color: #fff;
    cursor: pointer;
    transition: transform 0.2s ease, background 0.2s ease;
}

.vmo-showcase-control:hover {
    transform: translateY(-2px);
    background: rgba(255,255,255,0.1);
}

@keyframes vmoNebulaFloat {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
    50% { transform: translate3d(26px, -16px, 0) scale(1.06); }
}

@keyframes vmoPulseMist {
    0%, 100% { transform: scale(1) translate3d(0, 0, 0); opacity: 0.52; }
    50% { transform: scale(1.16) translate3d(8px, -10px, 0); opacity: 0.8; }
}

@media (max-width: 1180px) {
    .vmo-showcase-slide {
        grid-template-columns: 1fr;
        padding: 84px 36px 108px;
        gap: 26px;
    }

    .vmo-showcase-copy { max-width: none; }
    .vmo-showcase-art-shell { justify-content: stretch; }
    .vmo-showcase-art-frame { width: 100%; aspect-ratio: 1.3; }
    .vmo-showcase-rail { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 820px) {
    body { overflow-y: auto; }
    .vmo-showcase-shell { padding: 18px 16px 20px; }
    .vmo-showcase-stage { min-height: auto; border-radius: 28px; }
    .vmo-showcase-slides { min-height: auto; }
    .vmo-showcase-slide {
        position: relative;
        inset: auto;
        min-height: auto;
        padding: 82px 20px 24px;
        display: none;
    }

    .vmo-showcase-slide.is-active { display: grid; }
    .vmo-showcase-title { font-size: clamp(2.6rem, 12vw, 4.1rem); }
    .vmo-showcase-points { grid-template-columns: 1fr; }
    .vmo-showcase-btn { width: 100%; min-width: 0; }
    .vmo-showcase-rail {
        position: relative;
        left: auto;
        right: auto;
        bottom: auto;
        padding: 0 20px 20px;
        margin-top: -2px;
        grid-template-columns: 1fr;
    }

    .vmo-showcase-controls { top: 20px; right: 20px; }
    .vmo-showcase-float-card { min-width: 0; max-width: 64%; }
}
</style>
<section id="vmo-demo-showcase" data-vmo-preview-mode="showcase-placeholder">
    <div class="vmo-showcase-backdrop-grid" aria-hidden="true"></div>
    <div class="vmo-showcase-shell">
        <div class="vmo-showcase-stage" id="vmo-showcase-stage">
            <div class="vmo-showcase-progress" aria-hidden="true"><span class="vmo-showcase-progress-fill" id="vmo-showcase-progress-fill"></span></div>
            <div class="vmo-showcase-controls">
                <button type="button" class="vmo-showcase-control" id="vmo-showcase-prev" aria-label="Previous slide">&#8592;</button>
                <button type="button" class="vmo-showcase-control" id="vmo-showcase-next" aria-label="Next slide">&#8594;</button>
            </div>
            <div class="vmo-showcase-slides">${slideMarkup}</div>
        </div>
    </div>
</section>
<script>
(function() {
    const stage = document.getElementById('vmo-showcase-stage');
    const slides = Array.from(document.querySelectorAll('.vmo-showcase-slide'));
    const railItems = Array.from(document.querySelectorAll('.vmo-showcase-rail-item'));
    const progressFill = document.getElementById('vmo-showcase-progress-fill');
    const prevBtn = document.getElementById('vmo-showcase-prev');
    const nextBtn = document.getElementById('vmo-showcase-next');
    const ctaButtons = Array.from(document.querySelectorAll('[data-vmo-consultation-trigger="true"]'));
    const total = slides.length;
    let activeIndex = 0;
    let autoTimer = null;

    function openConsultation() {
        try {
            const parentDoc = window.parent && window.parent.document;
            const trigger = parentDoc && parentDoc.getElementById('vmo-business-wizard-btn');
            if (trigger && typeof trigger.click === 'function') {
                trigger.click();
                return true;
            }
        } catch (_) {
            return false;
        }
        return false;
    }

    function animateSlide(slide) {
        if (!slide || !window.gsap) return;

        const lines = slide.querySelectorAll('.vmo-showcase-title-line');
        const points = slide.querySelectorAll('.vmo-showcase-points li');
        const art = slide.querySelector('.vmo-showcase-art-frame');
        const cards = slide.querySelectorAll('.vmo-showcase-float-card');

        window.gsap.killTweensOf([lines, points, art, cards]);
        window.gsap.set(lines, { yPercent: 110, opacity: 0 });
        window.gsap.set(points, { y: 24, opacity: 0 });
        window.gsap.set(art, { scale: 0.96, y: 28, opacity: 0 });
        window.gsap.set(cards, { y: 12, opacity: 0 });

        const timeline = window.gsap.timeline();
        timeline.to(lines, { yPercent: 0, opacity: 1, duration: 0.78, stagger: 0.08, ease: 'power3.out' });
        timeline.to(art, { scale: 1, y: 0, opacity: 1, duration: 0.8, ease: 'power3.out' }, 0.06);
        timeline.to(points, { y: 0, opacity: 1, duration: 0.55, stagger: 0.08, ease: 'power2.out' }, 0.16);
        timeline.to(cards, { y: 0, opacity: 1, duration: 0.48, stagger: 0.08, ease: 'power2.out' }, 0.22);
    }

    function setActive(index) {
        activeIndex = (index + total) % total;
        slides.forEach(function(slide, slideIndex) {
            slide.classList.toggle('is-active', slideIndex === activeIndex);
        });
        railItems.forEach(function(item, itemIndex) {
            item.classList.toggle('is-active', itemIndex === activeIndex);
        });
        if (progressFill) {
            progressFill.style.width = (((activeIndex + 1) / total) * 100) + '%';
        }
        animateSlide(slides[activeIndex]);
    }

    function restartAuto() {
        if (autoTimer) {
            window.clearInterval(autoTimer);
        }
        autoTimer = window.setInterval(function() {
            setActive(activeIndex + 1);
        }, 6200);
    }

    if (stage) {
        stage.addEventListener('pointermove', function(event) {
            const rect = stage.getBoundingClientRect();
            const x = ((event.clientX - rect.left) / rect.width) - 0.5;
            const y = ((event.clientY - rect.top) / rect.height) - 0.5;
            stage.style.setProperty('--vmo-parallax-x', (x * 18).toFixed(2) + 'px');
            stage.style.setProperty('--vmo-parallax-y', (y * 18).toFixed(2) + 'px');
        });
        stage.addEventListener('pointerleave', function() {
            stage.style.setProperty('--vmo-parallax-x', '0px');
            stage.style.setProperty('--vmo-parallax-y', '0px');
        });
    }

    railItems.forEach(function(item) {
        item.addEventListener('click', function() {
            setActive(Number(item.getAttribute('data-rail-index') || 0));
            restartAuto();
        });
    });

    if (prevBtn) {
        prevBtn.addEventListener('click', function() {
            setActive(activeIndex - 1);
            restartAuto();
        });
    }

    if (nextBtn) {
        nextBtn.addEventListener('click', function() {
            setActive(activeIndex + 1);
            restartAuto();
        });
    }

    ctaButtons.forEach(function(button) {
        button.addEventListener('click', function(event) {
            event.preventDefault();
            openConsultation();
        });
    });

    if (window.gsap) {
        window.gsap.to('.vmo-showcase-backdrop-grid', {
            backgroundPosition: '44px 44px',
            duration: 18,
            repeat: -1,
            ease: 'none'
        });
    }

    setActive(0);
    restartAuto();

    if (typeof window.VMO !== 'undefined' && typeof window.VMO.refresh === 'function') {
        setTimeout(function() { window.VMO.refresh(); }, 220);
    }
})();
</script>`;
    }

    window.vmoBuildShowcasePreviewHtml = function() {
        return wrapShowcaseDocument(buildBundledShowcaseMarkup(isConsultationReady()));
    };

    window.vmoGetShowcasePreviewHtml = function() {
        const livePreview = isShowcasePreviewActive() ? serializeShowcasePreview() : '';
        const cachedPreview = hasRenderableShowcaseHtml(window.vmoShowcasePreviewHtml || '')
            ? String(window.vmoShowcasePreviewHtml || '')
            : '';

        if (livePreview) {
            window.vmoShowcasePreviewHtml = livePreview;
            return livePreview;
        }

        if (!cachedPreview) {
            window.vmoShowcasePreviewHtml = '';
        }

        return cachedPreview || window.vmoBuildShowcasePreviewHtml();
    };

    window.vmoCaptureShowcasePreview = function() {
        if (!isShowcasePreviewActive()) {
            return window.vmoGetShowcasePreviewHtml();
        }

        window.vmoShowcasePreviewHtml = serializeShowcasePreview() || window.vmoShowcasePreviewHtml || window.vmoBuildShowcasePreviewHtml();
        return window.vmoShowcasePreviewHtml;
    };

    window.vmoIsShowcasePreviewActive = isShowcasePreviewActive;
    window.vmoGenerateShowcaseMedia = queueShowcaseMediaGeneration;

    function buildShowcaseMarkup(consultationReady) {
        const primaryMessage = consultationReady
            ? 'Your consultation is complete! Start building your professional website by typing your ideas in the chat or using voice commands.'
            : 'Your live website preview will appear here after you complete the Business Consultation. Get personalized recommendations and start building your perfect website!';

        const ctaLabel = consultationReady ? 'Start Building Now' : 'Start Business Consultation';
        const statusLabel = consultationReady ? 'Consultation complete' : 'Consultation first';
        const statusNote = consultationReady
            ? 'This showcase will be replaced by the user\'s persistent website as soon as real generation output exists.'
            : 'This showcase is the pre-build experience. The moment real website content exists, it takes over this preview.';

        return `
<style>
@import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;500;700;800&family=Manrope:wght@400;500;600;700;800&display=swap');

:root {
    --demo-bg: #07111a;
    --demo-bg-soft: #0d1b2f;
    --demo-surface: rgba(11, 20, 37, 0.78);
    --demo-surface-strong: rgba(13, 24, 44, 0.94);
    --demo-border: rgba(255, 255, 255, 0.1);
    --demo-ink: #eef4ff;
    --demo-muted: #a7b7d6;
    --demo-accent: #73f0cb;
    --demo-electric: #7ba5ff;
    --demo-gold: #f4c77a;
    --demo-rose: #ff8a9e;
    --demo-shadow: 0 24px 90px rgba(0, 0, 0, 0.34);
    --demo-radius: 28px;
    --demo-max: 1320px;
}

html {
    background:
        radial-gradient(circle at 12% 18%, rgba(123, 165, 255, 0.2), transparent 28%),
        radial-gradient(circle at 82% 12%, rgba(115, 240, 203, 0.18), transparent 24%),
        radial-gradient(circle at 72% 78%, rgba(255, 138, 158, 0.14), transparent 28%),
        linear-gradient(180deg, #060d17 0%, #07111a 35%, #081526 100%);
}

body {
    background: transparent;
    color: var(--demo-ink);
    font-family: 'Manrope', system-ui, sans-serif;
}

#vmo-demo-showcase {
    position: relative;
    overflow-x: clip;
}

.demo-noise {
    position: fixed;
    inset: 0;
    pointer-events: none;
    opacity: 0.16;
    background-image:
        radial-gradient(rgba(255,255,255,0.24) 0.5px, transparent 0.5px),
        radial-gradient(rgba(255,255,255,0.18) 0.5px, transparent 0.5px);
    background-size: 18px 18px, 28px 28px;
    background-position: 0 0, 9px 9px;
    mix-blend-mode: soft-light;
    z-index: 1;
}

.demo-shell {
    position: relative;
    z-index: 2;
}

.demo-sticky-cta {
    position: fixed;
    top: 22px;
    right: 22px;
    z-index: 30;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 20px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    background: rgba(9, 17, 32, 0.8);
    color: var(--demo-ink);
    text-decoration: none;
    font-weight: 700;
    letter-spacing: 0.01em;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.28);
    backdrop-filter: blur(18px);
}

.demo-sticky-cta:hover {
    transform: translateY(-1px);
    background: rgba(13, 24, 44, 0.9);
}

.demo-hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: flex-end;
    padding: clamp(28px, 4vw, 40px);
}

.demo-hero-media,
.demo-hero-overlay {
    position: absolute;
    inset: 0;
}

.demo-hero-media {
    overflow: hidden;
    font-size: 0;
    line-height: 0;
    color: transparent;
}

.demo-hero-backdrop,
.demo-hero-backdrop-video,
.demo-card-video-fill,
.demo-fallback-art {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.demo-hero-backdrop {
    z-index: 0;
    opacity: 0.54;
    filter: saturate(1.08) contrast(1.04);
    transform: scale(1.03);
}

.demo-hero-backdrop-video {
    z-index: 1;
    opacity: 0.9;
}

.demo-card-video-fill,
.demo-stage-video-fill {
    z-index: 1;
    background:
        linear-gradient(135deg, rgba(6, 14, 26, 0.32), rgba(10, 22, 40, 0.12)),
        radial-gradient(circle at 18% 18%, rgba(115,240,203,0.18), transparent 28%);
}

.demo-fallback-art {
    z-index: 0;
    opacity: 0.96;
    filter: saturate(1.08) contrast(1.04);
    transform: scale(1.01);
}

.demo-hero-media::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(7, 17, 26, 0.2) 0%, rgba(7, 17, 26, 0.55) 48%, rgba(7, 17, 26, 0.95) 100%),
        radial-gradient(circle at 18% 28%, rgba(115, 240, 203, 0.22), transparent 28%),
        radial-gradient(circle at 82% 12%, rgba(123, 165, 255, 0.2), transparent 24%);
}

#vmo-demo-cinematic-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    z-index: 2;
}

.demo-grid-lines,
.demo-glow-orb,
.demo-glow-orb::before {
    position: absolute;
    inset: auto;
}

.demo-grid-lines {
    inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.06) 1px, transparent 1px);
    background-size: 84px 84px;
    mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.7) 22%, rgba(0,0,0,1) 100%);
    opacity: 0.24;
}

.demo-glow-orb {
    width: 32vw;
    height: 32vw;
    border-radius: 50%;
    filter: blur(20px);
    opacity: 0.45;
}

.demo-glow-a {
    top: 12%;
    left: -8%;
    background: radial-gradient(circle, rgba(123,165,255,0.55) 0%, rgba(123,165,255,0.08) 62%, transparent 72%);
}

.demo-glow-b {
    right: -12%;
    bottom: 14%;
    background: radial-gradient(circle, rgba(115,240,203,0.42) 0%, rgba(115,240,203,0.08) 62%, transparent 72%);
}

.demo-hero-inner,
.demo-section,
.demo-final-cta-wrap {
    width: min(var(--demo-max), 100%);
    margin: 0 auto;
}

.demo-hero-inner {
    position: relative;
    z-index: 3;
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(320px, 0.85fr);
    gap: 28px;
    align-items: end;
}

.demo-hero-brand-layer {
    position: absolute;
    inset: clamp(22px, 3vw, 36px) clamp(22px, 3vw, 36px) auto;
    z-index: 3;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 18px;
    pointer-events: none;
}

.demo-brand-badge {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.14);
    background: rgba(7, 17, 28, 0.58);
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.22);
    backdrop-filter: blur(18px);
    pointer-events: auto;
}

.demo-brand-mark {
    width: 42px;
    height: 42px;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(115,240,203,0.92), rgba(123,165,255,0.92) 62%, rgba(244,199,122,0.9));
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.36), 0 12px 28px rgba(115,240,203,0.24);
}

.demo-brand-badge strong,
.demo-brand-badge span {
    display: block;
}

.demo-brand-badge strong {
    font-family: 'Syne', system-ui, sans-serif;
    font-size: 15px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.demo-brand-badge span {
    margin-top: 3px;
    color: var(--demo-muted);
    font-size: 12px;
    letter-spacing: 0.04em;
}

.demo-brand-rail {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
    pointer-events: auto;
}

.demo-brand-rail span {
    padding: 11px 14px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.1);
    background: rgba(7, 17, 28, 0.44);
    color: var(--demo-ink);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    backdrop-filter: blur(16px);
}

.demo-hero-stack {
    position: absolute;
    top: clamp(112px, 13vw, 168px);
    right: clamp(24px, 4vw, 42px);
    z-index: 3;
    width: min(360px, 32vw);
    display: grid;
    gap: 16px;
    pointer-events: none;
}

.demo-hero-stack-card {
    border-radius: 24px;
    border: 1px solid rgba(255,255,255,0.12);
    background: linear-gradient(180deg, rgba(14, 25, 44, 0.7), rgba(7, 16, 31, 0.9));
    box-shadow: 0 22px 60px rgba(0, 0, 0, 0.28);
    backdrop-filter: blur(18px);
    overflow: hidden;
}

.demo-hero-stack-visual {
    position: relative;
    min-height: 180px;
}

.demo-hero-stack-visual .demo-card-grid {
    opacity: 0.2;
}

.demo-hero-stack-visual.demo-card-visual::after {
    left: 16px;
    bottom: 16px;
}

.demo-hero-stack-visual-offset {
    margin-left: 46px;
}

.demo-hero-stack-meter {
    padding: 20px 22px 22px;
    pointer-events: auto;
}

.demo-hero-stack-meter strong {
    display: block;
    margin-top: 14px;
    font-family: 'Syne', system-ui, sans-serif;
    font-size: 28px;
    line-height: 0.98;
    letter-spacing: -0.05em;
}

.demo-hero-stack-meter p {
    margin-top: 12px;
    color: var(--demo-muted);
    font-size: 14px;
    line-height: 1.6;
}

.demo-hero-meter {
    position: relative;
    margin-top: 16px;
    height: 10px;
    border-radius: 999px;
    background: rgba(255,255,255,0.08);
    overflow: hidden;
}

.demo-hero-meter span {
    position: absolute;
    inset: 0 auto 0 0;
    width: 78%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--demo-accent), var(--demo-electric), var(--demo-gold));
}

.demo-hero-copy,
.demo-hero-panel,
.demo-card,
.demo-feature-panel,
.demo-process-step,
.demo-final-cta-card,
.demo-slide-card {
    background: linear-gradient(180deg, rgba(14, 25, 44, 0.78), rgba(9, 17, 32, 0.92));
    border: 1px solid var(--demo-border);
    box-shadow: var(--demo-shadow);
    backdrop-filter: blur(16px);
}

.demo-hero-copy,
.demo-hero-panel,
.demo-final-cta-card {
    border-radius: clamp(24px, 3vw, 34px);
}

.demo-hero-copy {
    padding: clamp(28px, 4vw, 48px);
}

.demo-eyebrow,
.demo-section-kicker,
.demo-chip {
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-size: 11px;
    font-weight: 800;
    color: var(--demo-gold);
}

.demo-status-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    margin: 18px 0 20px;
}

.demo-status-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: 999px;
    background: rgba(115, 240, 203, 0.12);
    color: var(--demo-accent);
    border: 1px solid rgba(115, 240, 203, 0.22);
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.demo-status-note {
    max-width: 540px;
    color: var(--demo-muted);
    font-size: 14px;
}

.demo-hero h1,
.demo-section h2,
.demo-slide-card h3,
.demo-final-cta-card h2 {
    font-family: 'Syne', system-ui, sans-serif;
    line-height: 0.94;
    letter-spacing: -0.06em;
}

.demo-hero h1 {
    font-size: clamp(56px, 9vw, 118px);
    max-width: 10ch;
}

.demo-lead,
.demo-hero-panel p,
.demo-section-intro,
.demo-feature-panel p,
.demo-process-step p,
.demo-slide-card p,
.demo-final-cta-card p {
    color: var(--demo-muted);
}

.demo-lead {
    max-width: 58ch;
    font-size: clamp(18px, 2vw, 22px);
    line-height: 1.62;
    margin: 24px 0 0;
}

.demo-action-row {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    align-items: center;
    margin: 28px 0 34px;
}

.demo-primary-btn,
.demo-final-cta-card button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 54px;
    padding: 0 22px;
    border-radius: 999px;
    border: 0;
    background: linear-gradient(135deg, var(--demo-accent), #8ef3ff 60%, #fff2c3 100%);
    color: #08111e;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0.02em;
    cursor: pointer;
    box-shadow: 0 18px 45px rgba(115, 240, 203, 0.2);
}

.demo-secondary-link {
    color: var(--demo-ink);
    text-decoration: none;
    font-weight: 700;
    padding: 16px 0;
}

.demo-benefits {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.demo-benefit {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    font-weight: 700;
}

.demo-benefit-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--demo-accent), var(--demo-electric));
    box-shadow: 0 0 18px rgba(115, 240, 203, 0.55);
}

.demo-hero-panel {
    padding: 24px;
    display: grid;
    gap: 18px;
}

.demo-hero-panel h2,
.demo-section h2,
.demo-final-cta-card h2 {
    font-size: clamp(34px, 4vw, 56px);
}

.demo-mini-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.demo-mini-card {
    padding: 16px;
    border-radius: 20px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
}

.demo-mini-card strong {
    display: block;
    font-size: 28px;
    font-weight: 800;
    margin-bottom: 4px;
}

.demo-section {
    position: relative;
    padding: clamp(76px, 10vw, 140px) clamp(28px, 4vw, 40px) 0;
}

.demo-section-header {
    max-width: 780px;
    margin-bottom: 30px;
}

.demo-section-intro {
    margin-top: 18px;
    font-size: 18px;
    line-height: 1.72;
}

.demo-showcase-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}

.demo-card {
    padding: 24px;
    border-radius: 24px;
    overflow: hidden;
    position: relative;
}

.demo-card::before {
    content: '';
    position: absolute;
    inset: auto auto -32px -32px;
    width: 160px;
    height: 160px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(123,165,255,0.28) 0%, transparent 70%);
}

.demo-card-visual,
.demo-stage-media,
.demo-slide-visual {
    position: relative;
    overflow: hidden;
    min-height: 260px;
    border-radius: 22px;
    font-size: 0;
    line-height: 0;
    color: transparent;
    background:
        radial-gradient(circle at 22% 18%, rgba(255,255,255,0.22), transparent 24%),
        radial-gradient(circle at 82% 20%, rgba(115,240,203,0.3), transparent 24%),
        linear-gradient(160deg, #0f1f38 0%, #162c51 38%, #0d1830 100%);
    border: 1px solid rgba(255,255,255,0.08);
}

.demo-card-visual {
    margin-bottom: 20px;
}

.demo-stage-media,
.demo-slide-visual {
    box-shadow: var(--demo-shadow);
}

.demo-stage-media::before,
.demo-slide-visual::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(6, 14, 26, 0.06) 0%, rgba(6, 14, 26, 0.22) 44%, rgba(6, 14, 26, 0.9) 100%),
        radial-gradient(circle at 18% 24%, rgba(115,240,203,0.16), transparent 28%);
    z-index: 1;
    pointer-events: none;
}

.demo-card-visual::after,
.demo-stage-media::after,
.demo-slide-visual::after {
    content: '';
    display: none;
}

.demo-card-grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,0.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.08) 1px, transparent 1px);
    background-size: 72px 72px;
    opacity: 0.28;
    z-index: 1;
}

.demo-card-bars {
    position: absolute;
    inset: auto 20px 22px 20px;
    display: grid;
    gap: 10px;
    z-index: 1;
}

.demo-card-bars span {
    display: block;
    height: 10px;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(115,240,203,0.8), rgba(123,165,255,0.6));
}

.demo-card-bars span:nth-child(1) { width: 72%; }
.demo-card-bars span:nth-child(2) { width: 48%; }
.demo-card-bars span:nth-child(3) { width: 86%; }

.demo-card-visual > img,
.demo-card-visual > video,
.demo-stage-media > img,
.demo-stage-media > video,
.demo-slide-visual > img,
.demo-slide-visual > video,
.demo-hero-media > img,
.demo-hero-media > video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.demo-stage-overlay,
.demo-slide-overlay {
    position: absolute;
    inset: auto 20px 20px 20px;
    z-index: 2;
    display: grid;
    gap: 8px;
}

.demo-stage-overlay span,
.demo-slide-overlay span {
    display: inline-flex;
    width: fit-content;
    padding: 9px 12px;
    border-radius: 999px;
    background: rgba(8, 14, 28, 0.6);
    color: var(--demo-accent);
    border: 1px solid rgba(255,255,255,0.12);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.demo-stage-overlay strong,
.demo-slide-overlay strong {
    max-width: 30ch;
    font-family: 'Syne', system-ui, sans-serif;
    font-size: clamp(22px, 2.2vw, 32px);
    line-height: 0.98;
    letter-spacing: -0.05em;
    color: var(--demo-ink);
}

.demo-card h3,
.demo-feature-panel h3,
.demo-process-step h3 {
    font-family: 'Syne', system-ui, sans-serif;
    font-size: 28px;
    line-height: 1;
    letter-spacing: -0.04em;
    margin-bottom: 12px;
}

.demo-card p,
.demo-feature-panel p,
.demo-process-step p,
.demo-slide-card p {
    line-height: 1.72;
    font-size: 16px;
}

.demo-stack-band {
    width: 100%;
    padding: 22px clamp(28px, 4vw, 40px) 0;
}

.demo-stack-row {
    width: min(var(--demo-max), 100%);
    margin: 0 auto;
    padding: 18px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.08);
    background: rgba(10, 18, 34, 0.74);
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
}

.demo-stack-pill {
    padding: 10px 14px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.08);
    background: rgba(255,255,255,0.04);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--demo-ink);
}

.demo-story {
    display: grid;
    grid-template-columns: minmax(300px, 0.9fr) minmax(0, 1.1fr);
    gap: 28px;
    align-items: start;
}

.demo-story-copy {
    position: sticky;
    top: 118px;
    padding: 30px;
    border-radius: 24px;
    background: rgba(11, 20, 37, 0.74);
    border: 1px solid rgba(255,255,255,0.08);
    box-shadow: var(--demo-shadow);
}

.demo-story-copy h2 {
    font-size: clamp(34px, 4.6vw, 64px);
    margin: 16px 0 18px;
}

.demo-story-copy p {
    color: var(--demo-muted);
    line-height: 1.72;
}

.demo-progress {
    position: relative;
    width: 4px;
    height: 180px;
    margin: 28px 0;
    border-radius: 999px;
    background: rgba(255,255,255,0.08);
    overflow: hidden;
}

.demo-progress-fill {
    position: absolute;
    inset: auto 0 0;
    height: 100%;
    transform-origin: bottom center;
    transform: scaleY(0.18);
    background: linear-gradient(180deg, var(--demo-electric), var(--demo-accent));
}

.demo-editorial-stage {
    display: grid;
    grid-template-columns: minmax(300px, 0.88fr) minmax(0, 1.12fr);
    gap: 24px;
    align-items: start;
}

.demo-stage-copy {
    position: sticky;
    top: 118px;
    padding: 30px;
    border-radius: 24px;
    background: rgba(11, 20, 37, 0.74);
    border: 1px solid rgba(255,255,255,0.08);
    box-shadow: var(--demo-shadow);
}

.demo-stage-copy h2 {
    font-family: 'Syne', system-ui, sans-serif;
    font-size: clamp(34px, 4.6vw, 64px);
    line-height: 0.95;
    letter-spacing: -0.05em;
    margin: 16px 0 18px;
}

.demo-stage-copy p {
    color: var(--demo-muted);
    line-height: 1.72;
}

.demo-stage-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-top: 24px;
}

.demo-stage-stat {
    padding: 18px;
    border-radius: 20px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
}

.demo-stage-stat strong {
    display: block;
    font-family: 'Syne', system-ui, sans-serif;
    font-size: 34px;
    line-height: 0.95;
    letter-spacing: -0.05em;
    margin-bottom: 8px;
}

.demo-stage-stat span {
    color: var(--demo-muted);
    font-size: 13px;
    line-height: 1.5;
}

.demo-stage-visuals {
    display: grid;
    gap: 18px;
}

.demo-stage-primary {
    min-height: 430px;
}

.demo-stage-secondary-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.demo-stage-secondary {
    min-height: 240px;
}

.demo-feature-track {
    display: grid;
    gap: 18px;
}

.demo-feature-panel {
    padding: 24px;
    border-radius: 24px;
    transform: translateY(0);
    transition: border-color 0.25s ease, transform 0.25s ease, background 0.25s ease;
}

.demo-feature-panel.is-active {
    border-color: rgba(115,240,203,0.35);
    background: linear-gradient(180deg, rgba(16, 30, 54, 0.96), rgba(10, 18, 34, 0.96));
    transform: translateY(-3px);
}

.demo-panel-index {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    border-radius: 16px;
    margin-bottom: 18px;
    background: rgba(123,165,255,0.12);
    border: 1px solid rgba(123,165,255,0.18);
    color: var(--demo-electric);
    font-size: 13px;
    font-weight: 900;
    letter-spacing: 0.12em;
}

.demo-process-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 16px;
}

.demo-process-step {
    padding: 24px 20px;
    border-radius: 22px;
}

.demo-step-number {
    display: inline-block;
    margin-bottom: 16px;
    color: var(--demo-accent);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.demo-proof-slider .splide__track {
    overflow: visible;
}

.demo-proof-slider .splide__slide {
    height: auto;
}

.demo-slide-card {
    min-height: 100%;
    padding: 24px;
    border-radius: 24px;
    display: grid;
    gap: 18px;
    align-content: start;
}

.demo-slide-visual {
    min-height: 240px;
}

.demo-slide-card h3 {
    font-family: 'Syne', system-ui, sans-serif;
    font-size: 34px;
    margin-bottom: 12px;
}

.demo-slide-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 22px;
}

.demo-slide-tags span {
    padding: 10px 12px;
    border-radius: 999px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.demo-final-cta {
    padding: clamp(76px, 10vw, 140px) clamp(28px, 4vw, 40px) clamp(88px, 11vw, 150px);
}

.demo-final-cta-card {
    position: relative;
    overflow: hidden;
    padding: clamp(28px, 4vw, 52px);
}

.demo-final-cta-card::before {
    content: '';
    position: absolute;
    inset: auto -90px -90px auto;
    width: 280px;
    height: 280px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,138,158,0.18) 0%, transparent 70%);
}

.demo-final-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 22px 0 0;
}

.demo-final-meta span {
    padding: 10px 12px;
    border-radius: 999px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.08);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

[data-demo-reveal] {
    opacity: 0;
    transform: translateY(28px);
}

@keyframes demoMediaFloat {
    0%, 100% { transform: translate3d(0, 0, 0); }
    50% { transform: translate3d(0, -10px, 0); }
}

[data-demo-float] {
    animation: demoMediaFloat 10s ease-in-out infinite;
}

[data-demo-float="reverse"] {
    animation-direction: reverse;
    animation-duration: 12s;
}

@media (prefers-reduced-motion: reduce) {
    [data-demo-float] {
        animation: none;
    }
}

@media (max-width: 1180px) {
    .demo-hero-inner,
    .demo-story,
    .demo-editorial-stage {
        grid-template-columns: 1fr;
    }

    .demo-hero-brand-layer {
        position: static;
        margin-bottom: 18px;
        align-items: stretch;
        pointer-events: auto;
    }

    .demo-brand-rail {
        justify-content: flex-start;
    }

    .demo-hero-stack {
        display: none;
    }

    .demo-story-copy {
        position: relative;
        top: auto;
    }

    .demo-stage-copy {
        position: relative;
        top: auto;
    }

    .demo-showcase-grid,
    .demo-process-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .demo-hero-brand-layer {
        flex-direction: column;
    }

    .demo-brand-rail {
        display: none;
    }

    .demo-sticky-cta {
        left: 16px;
        right: 16px;
        top: auto;
        bottom: 16px;
        justify-content: center;
    }

    .demo-hero {
        min-height: auto;
        padding-top: 24px;
        padding-bottom: 120px;
    }

    .demo-mini-grid,
    .demo-benefits,
    .demo-showcase-grid,
    .demo-process-grid,
    .demo-stage-stats,
    .demo-stage-secondary-grid {
        grid-template-columns: 1fr;
    }

    .demo-section,
    .demo-final-cta {
        padding-left: 18px;
        padding-right: 18px;
    }

    .demo-action-row {
        align-items: stretch;
    }

    .demo-primary-btn,
    .demo-final-cta-card button {
        width: 100%;
    }
}
</style>

<main id="vmo-demo-showcase" class="demo-shell" data-consultation-ready="${consultationReady ? 'true' : 'false'}">
    <div class="demo-noise"></div>

    <a href="#demo-final-cta" class="demo-sticky-cta" data-demo-launch>
        <span>${ctaLabel}</span>
    </a>

    <section class="demo-hero">
        <div class="demo-hero-media">
            <img class="demo-hero-backdrop" src="${SHOWCASE_FALLBACK_MEDIA.heroBackdrop}" alt="" loading="eager">
            <video class="demo-hero-backdrop-video" muted loop playsinline preload="none" poster="${SHOWCASE_FALLBACK_MEDIA.heroBackdrop}" data-vmo-legacy-disabled-sora="true" data-vmo-sora-prompt="Cinematic premium background loop for an AI website builder showcase, refined architecture, atmospheric depth, elegant lighting, editorial polish, smooth 8-second seamless motion"></video>
            <div class="demo-hero-brand-layer" data-demo-reveal>
                <div class="demo-brand-badge">
                    <span class="demo-brand-mark" aria-hidden="true"></span>
                    <div>
                        <strong>VMO AI</strong>
                        <span>Layered showcase header</span>
                    </div>
                </div>
                <div class="demo-brand-rail">
                    <span>Media-first hero</span>
                    <span>Overlay brand system</span>
                    <span>Scroll-led persuasion</span>
                </div>
            </div>
            <div class="demo-hero-stack" aria-hidden="true">
                <div class="demo-card-visual demo-hero-stack-card demo-hero-stack-visual" data-demo-float data-vmo-legacy-disabled-generate="true" data-vmo-prompt="Layered premium website hero composition with editorial lighting, glass surfaces, elevated logo lockup, stacked product imagery, no text" data-demo-visual-label="Layered brand composition">
                    <img class="demo-fallback-art" src="${SHOWCASE_FALLBACK_MEDIA.heroBrand}" alt="" loading="lazy">
                    <div class="demo-card-grid"></div>
                    <div class="demo-card-bars"><span></span><span></span><span></span></div>
                </div>
                <div class="demo-hero-stack-card demo-hero-stack-meter">
                    <span class="demo-chip">Above-the-fold system</span>
                    <strong>Video, logo, CTA, proof, and art direction all share one hero canvas.</strong>
                    <div class="demo-hero-meter"><span></span></div>
                    <p>Modern website headers layer media and conversion surfaces together instead of stacking a name bar above a disconnected hero.</p>
                </div>
                <div class="demo-card-visual demo-hero-stack-card demo-hero-stack-visual demo-hero-stack-visual-offset" data-demo-float="reverse" data-vmo-legacy-disabled-generate="true" data-vmo-prompt="Premium AI website hero overlay module with floating proof cards, luminous CTA surface, elegant parallax layers, no text" data-demo-visual-label="Overlay conversion layer">
                    <img class="demo-fallback-art" src="${SHOWCASE_FALLBACK_MEDIA.heroOverlay}" alt="" loading="lazy">
                    <div class="demo-card-grid"></div>
                    <div class="demo-card-bars"><span></span><span></span><span></span></div>
                </div>
            </div>
            <canvas id="vmo-demo-cinematic-canvas" aria-hidden="true"></canvas>
            <div class="demo-grid-lines" aria-hidden="true"></div>
            <div class="demo-glow-orb demo-glow-a" aria-hidden="true"></div>
            <div class="demo-glow-orb demo-glow-b" aria-hidden="true"></div>
        </div>
        <div class="demo-hero-overlay" aria-hidden="true"></div>

        <div class="demo-hero-inner">
            <div class="demo-hero-copy" data-demo-reveal>
                <div class="demo-eyebrow">VMO AI Builder showcase</div>
                <div class="demo-status-row">
                    <span class="demo-status-chip">${statusLabel}</span>
                    <span class="demo-status-note">${statusNote}</span>
                </div>

                <h1>Websites that look commissioned, not assembled.</h1>
                <p class="demo-lead">${primaryMessage}</p>

                <div class="demo-action-row">
                    <button type="button" class="demo-primary-btn" data-demo-launch>${ctaLabel}</button>
                    <a class="demo-secondary-link" href="#demo-story">See how the stack unfolds on scroll</a>
                </div>

                <div class="demo-benefits">
                    <div class="demo-benefit"><span class="demo-benefit-dot"></span><span>AI-Powered Design</span></div>
                    <div class="demo-benefit"><span class="demo-benefit-dot"></span><span>Real-Time Preview</span></div>
                    <div class="demo-benefit"><span class="demo-benefit-dot"></span><span>Modern Animations</span></div>
                    <div class="demo-benefit"><span class="demo-benefit-dot"></span><span>Mobile Responsive</span></div>
                </div>
            </div>

            <aside class="demo-hero-panel" data-demo-reveal>
                <div class="demo-chip">What this preview proves</div>
                <h2>A real showcase site inside the same premium preview shell used for generated websites.</h2>
                <p>This demo is meant to be aspirational and demonstrative at the same time: premium motion, sharp typography, AI-media hooks, scroll storytelling, and consultation-first conversion architecture.</p>

                <div class="demo-mini-grid">
                    <div class="demo-mini-card">
                        <strong data-count-to="5">0</strong>
                        <p>conversion layers above the fold</p>
                    </div>
                    <div class="demo-mini-card">
                        <strong data-count-to="8">0</strong>
                        <p>modern libraries already available in preview</p>
                    </div>
                    <div class="demo-mini-card">
                        <strong data-count-to="3">0</strong>
                        <p>example site modes showcased below</p>
                    </div>
                    <div class="demo-mini-card">
                        <strong data-count-to="1">0</strong>
                        <p>persistent website replaces this demo when ready</p>
                    </div>
                </div>
            </aside>
        </div>
    </section>

    <div class="demo-stack-band">
        <div class="demo-stack-row" data-demo-reveal>
            <span class="demo-stack-pill">GSAP</span>
            <span class="demo-stack-pill">ScrollTrigger</span>
            <span class="demo-stack-pill">Lenis</span>
            <span class="demo-stack-pill">Swiper</span>
            <span class="demo-stack-pill">Splide</span>
            <span class="demo-stack-pill">Three.js</span>
            <span class="demo-stack-pill">GPT Image</span>
            <span class="demo-stack-pill">Sora Video</span>
            <span class="demo-stack-pill">Voice-driven refinement</span>
        </div>
    </div>

    <section class="demo-section">
        <div class="demo-section-header" data-demo-reveal>
            <div class="demo-section-kicker">Website modes</div>
            <h2>The plugin should be able to present multiple premium directions before the real site is even generated.</h2>
            <p class="demo-section-intro">This is the right use of the placeholder window: not an apology screen, but a visual argument for the kind of websites the consultation is about to unlock.</p>
        </div>

        <div class="demo-showcase-grid">
            <article class="demo-card" data-demo-reveal>
                <div class="demo-card-visual" data-demo-float data-vmo-legacy-disabled-generate="true" data-vmo-prompt="Luxury editorial homepage visual for a premium AI website builder showcase, cinematic lighting, architectural depth, glassmorphism layers, sophisticated blue and gold palette" data-demo-visual-label="Editorial landing page">
                    <img class="demo-fallback-art" src="${SHOWCASE_FALLBACK_MEDIA.editorialLanding}" alt="" loading="lazy">
                    <div class="demo-card-grid"></div>
                    <div class="demo-card-bars"><span></span><span></span><span></span></div>
                </div>
                <h3>Brand-first luxury presentation</h3>
                <p>For founders, agencies, and high-end service brands that need atmosphere, authority, and motion-led storytelling without feeling like a template marketplace.</p>
            </article>

            <article class="demo-card" data-demo-reveal>
                <div class="demo-card-visual" data-demo-float="reverse" data-vmo-legacy-disabled-generate="true" data-vmo-prompt="Modern AI SaaS website showcase with layered dashboards, electric blue interface glow, dense product UI snapshots, premium startup art direction" data-demo-visual-label="AI product launch">
                    <img class="demo-fallback-art" src="${SHOWCASE_FALLBACK_MEDIA.productLaunch}" alt="" loading="lazy">
                    <div class="demo-card-grid"></div>
                    <div class="demo-card-bars"><span></span><span></span><span></span></div>
                </div>
                <h3>Product-led SaaS conversion system</h3>
                <p>For software, apps, and AI products that need an above-the-fold offer, moving product proof, architecture clarity, and precise CTA sequencing.</p>
            </article>

            <article class="demo-card" data-demo-reveal>
                <div class="demo-card-visual" data-demo-float data-demo-visual-label="Cinematic commerce hero">
                    <img class="demo-fallback-art" src="${SHOWCASE_FALLBACK_MEDIA.commerceHero}" alt="" loading="lazy">
                    <video class="demo-card-video-fill" muted loop playsinline preload="none" poster="${SHOWCASE_FALLBACK_MEDIA.commerceHero}" data-vmo-legacy-disabled-sora="true" data-vmo-sora-prompt="High-end ecommerce cinematic hero loop, slow motion fabric, reflective surfaces, premium editorial movement, smooth 8 second product showcase"></video>
                    <div class="demo-card-grid"></div>
                    <div class="demo-card-bars"><span></span><span></span><span></span></div>
                </div>
                <h3>Cinematic ecommerce staging</h3>
                <p>For stores and product brands that need Sora-ready hero motion, stronger perceived value, refined merchandising, and a more launch-ready first impression.</p>
            </article>
        </div>
    </section>

    <section class="demo-section" id="demo-story">
        <div class="demo-story">
            <div class="demo-story-copy" data-demo-reveal>
                <div class="demo-section-kicker">Scroll narrative</div>
                <h2>As the user scrolls, the plugin can keep explaining the outcome while it sells the consultation.</h2>
                <p>That is the right UX for this stage. The preview feels alive, the product direction stays obvious, and the CTA never disappears from the user\'s field of view.</p>

                <div class="demo-progress" aria-hidden="true">
                    <span class="demo-progress-fill"></span>
                </div>

                <button type="button" class="demo-primary-btn" data-demo-launch>${ctaLabel}</button>
            </div>

            <div class="demo-feature-track">
                <article class="demo-feature-panel is-active" data-demo-reveal>
                    <span class="demo-panel-index">01</span>
                    <h3>Consultation becomes architecture</h3>
                    <p>The consultation is not filler. It is what lets the builder map offers, proof, tone, page order, CTA sequence, and messaging hierarchy into a site structure that already knows what matters.</p>
                </article>

                <article class="demo-feature-panel" data-demo-reveal>
                    <span class="demo-panel-index">02</span>
                    <h3>Motion becomes persuasion</h3>
                    <p>GSAP reveals, ScrollTrigger choreography, counters, depth cues, pinned storytelling, and premium transitions can make the site feel authored, not merely assembled.</p>
                </article>

                <article class="demo-feature-panel" data-demo-reveal>
                    <span class="demo-panel-index">03</span>
                    <h3>Media becomes art direction</h3>
                    <p>Instead of dead image slots, the system can mark visuals for GPT Image generation and hero zones for Sora loops with detailed prompts that match the site\'s tone and purpose.</p>
                </article>

                <article class="demo-feature-panel" data-demo-reveal>
                    <span class="demo-panel-index">04</span>
                    <h3>Refinement becomes continuous</h3>
                    <p>Once the draft exists, the user can keep pushing it upward through chat, voice, and targeted refinement instead of restarting from scratch every time the vision sharpens.</p>
                </article>

                <article class="demo-feature-panel" data-demo-reveal>
                    <span class="demo-panel-index">05</span>
                    <h3>Draft becomes persistent website</h3>
                    <p>This showcase should never compete with the real site. The real homepage HTML, draft preview URL, or saved block state should replace it immediately and persist as the new source of truth.</p>
                </article>
            </div>
        </div>
    </section>

    <section class="demo-section">
        <div class="demo-editorial-stage">
            <div class="demo-stage-copy" data-demo-reveal>
                <div class="demo-section-kicker">Media runway</div>
                <h2>The placeholder should already prove what happens when premium media, motion, and conversion design work together.</h2>
                <p>These are not decorative mockups. They are real media surfaces for the showcase itself, so the preview can demonstrate branded imagery, campaign motion, proof walls, and layered offer staging before the persistent website replaces this demo.</p>

                <div class="demo-stage-stats">
                    <div class="demo-stage-stat">
                        <strong>3x</strong>
                        <span>media layers working in parallel inside one section</span>
                    </div>
                    <div class="demo-stage-stat">
                        <strong>1</strong>
                        <span>showcase shell that keeps generated assets visible in the preview</span>
                    </div>
                    <div class="demo-stage-stat">
                        <strong>∞</strong>
                        <span>refinement room once the real website takes over this space</span>
                    </div>
                </div>
            </div>

            <div class="demo-stage-visuals" data-demo-reveal>
                <div class="demo-stage-media demo-stage-primary" data-demo-float data-demo-visual-label="Immersive brand reel">
                    <img class="demo-fallback-art" src="${SHOWCASE_FALLBACK_MEDIA.brandReel}" alt="" loading="lazy">
                    <video class="demo-stage-video-fill" muted loop playsinline preload="none" poster="${SHOWCASE_FALLBACK_MEDIA.brandReel}" data-vmo-legacy-disabled-sora="true" data-vmo-sora-prompt="Premium website campaign reel for an AI website builder showcase, floating interface panels, macro brand textures, elegant depth, editorial polish, seamless 8 second motion"></video>
                    <div class="demo-stage-overlay">
                        <span>Showcase motion layer</span>
                        <strong>Video backgrounds, offer overlays, and premium lighting can all live inside the same preview composition.</strong>
                    </div>
                </div>

                <div class="demo-stage-secondary-grid">
                    <div class="demo-stage-media demo-stage-secondary" data-demo-float="reverse" data-demo-visual-label="Offer architecture">
                        <img src="${SHOWCASE_FALLBACK_MEDIA.offerArchitecture}" alt="Offer architecture preview" loading="lazy" data-vmo-legacy-disabled-generate="true" data-vmo-prompt="High-end service website offer architecture board with layered pricing cards, premium typography zones, luminous CTA modules, refined business dashboard atmosphere, no text">
                        <div class="demo-stage-overlay">
                            <span>Conversion structure</span>
                            <strong>Pricing, proof, and CTA surfaces staged as one system.</strong>
                        </div>
                    </div>

                    <div class="demo-stage-media demo-stage-secondary" data-demo-float data-demo-visual-label="Proof wall">
                        <img src="${SHOWCASE_FALLBACK_MEDIA.proofWall}" alt="Proof wall preview" loading="lazy" data-vmo-legacy-disabled-generate="true" data-vmo-prompt="Editorial proof wall for a luxury digital brand website, testimonial cards, trust badges, interface depth, cinematic productized service composition, no text">
                        <div class="demo-stage-overlay">
                            <span>Credibility layer</span>
                            <strong>Authority visuals stay embedded in the same live preview surface.</strong>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="demo-section">
        <div class="demo-section-header" data-demo-reveal>
            <div class="demo-section-kicker">System flow</div>
            <h2>The right sequence is consult, shape, generate, refine, persist, publish.</h2>
            <p class="demo-section-intro">That keeps the placeholder honest, keeps the generator ambitious, and gives the user a clear path from first impression to final persistent website.</p>
        </div>

        <div class="demo-process-grid">
            <article class="demo-process-step" data-demo-reveal>
                <span class="demo-step-number">Step 01</span>
                <h3>Consult</h3>
                <p>Capture business goals, positioning, audience, offers, proof, media, and operational needs.</p>
            </article>
            <article class="demo-process-step" data-demo-reveal>
                <span class="demo-step-number">Step 02</span>
                <h3>Shape</h3>
                <p>Translate that information into pages, hierarchy, stack selection, and conversion strategy.</p>
            </article>
            <article class="demo-process-step" data-demo-reveal>
                <span class="demo-step-number">Step 03</span>
                <h3>Generate</h3>
                <p>Produce homepage HTML, preview assets, draft pages, and media prompts using the premium shell.</p>
            </article>
            <article class="demo-process-step" data-demo-reveal>
                <span class="demo-step-number">Step 04</span>
                <h3>Refine</h3>
                <p>Use voice or chat to tune sections, visuals, interactions, and business messaging in context.</p>
            </article>
            <article class="demo-process-step" data-demo-reveal>
                <span class="demo-step-number">Step 05</span>
                <h3>Publish</h3>
                <p>Promote the real draft into the persistent website and retire the showcase automatically.</p>
            </article>
        </div>
    </section>

    <section class="demo-section">
        <div class="demo-section-header" data-demo-reveal>
            <div class="demo-section-kicker">Capability gallery</div>
            <h2>This is where the demo should feel like a serious website, not a loading state.</h2>
            <p class="demo-section-intro">Each slide below represents a premium output mode the plugin should be able to approach: sharper brand systems, stronger product framing, and more convincing visual depth.</p>
        </div>

        <div class="splide demo-proof-slider" aria-label="VMO showcase capability slides" data-demo-reveal>
            <div class="splide__track">
                <ul class="splide__list">
                    <li class="splide__slide">
                        <article class="demo-slide-card">
                            <div class="demo-slide-visual" data-demo-float data-demo-visual-label="Authority-led brand world">
                                <img src="${SHOWCASE_FALLBACK_MEDIA.editorialLanding}" alt="Authority-led brand preview" loading="lazy" data-vmo-legacy-disabled-generate="true" data-vmo-prompt="Authority driven founder brand website visual, editorial hero composition, premium studio lighting, luxurious service business web design, no text">
                                <div class="demo-slide-overlay">
                                    <span>Hero direction</span>
                                    <strong>Authority-driven editorial landing page</strong>
                                </div>
                            </div>
                            <div class="demo-chip">Founder brand</div>
                            <h3>High-authority service site</h3>
                            <p>Editorial typography, layered proof, animated offer framing, and a CTA path designed to move visitors straight into consultation or booking.</p>
                            <div class="demo-slide-tags">
                                <span>GSAP</span>
                                <span>Story-led hero</span>
                                <span>Premium typography</span>
                            </div>
                        </article>
                    </li>
                    <li class="splide__slide">
                        <article class="demo-slide-card">
                            <div class="demo-slide-visual" data-demo-float="reverse" data-demo-visual-label="Product command center">
                                <img src="${SHOWCASE_FALLBACK_MEDIA.productLaunch}" alt="Product command center preview" loading="lazy" data-vmo-legacy-disabled-generate="true" data-vmo-prompt="Premium AI software launch page visual with glowing dashboards, floating data panels, modern product UI depth, startup-grade art direction, no text">
                                <div class="demo-slide-overlay">
                                    <span>Product framing</span>
                                    <strong>Dashboard storytelling with launch-grade depth</strong>
                                </div>
                            </div>
                            <div class="demo-chip">AI product</div>
                            <h3>Product-first launch page</h3>
                            <p>Dashboard snapshots, feature sequencing, layered credibility, and scroll-triggered reveals that make the product feel technically advanced before signup.</p>
                            <div class="demo-slide-tags">
                                <span>ScrollTrigger</span>
                                <span>Swiper / Splide</span>
                                <span>UI storytelling</span>
                            </div>
                        </article>
                    </li>
                    <li class="splide__slide">
                        <article class="demo-slide-card">
                            <div class="demo-slide-visual" data-demo-float data-demo-visual-label="Cinematic product stage">
                                <img src="${SHOWCASE_FALLBACK_MEDIA.commerceHero}" alt="Cinematic product stage preview" loading="lazy" data-vmo-legacy-disabled-generate="true" data-vmo-prompt="Cinematic premium ecommerce product stage with reflective surfaces, dramatic lighting, luxury merchandising composition, launch-ready website hero scene, no text">
                                <div class="demo-slide-overlay">
                                    <span>Commerce mood</span>
                                    <strong>Merchandising that feels premium before the cart exists</strong>
                                </div>
                            </div>
                            <div class="demo-chip">Commerce</div>
                            <h3>Cinematic premium store</h3>
                            <p>Sora-ready motion staging, persuasive merchandising, richer product framing, and a smoother pathway from discovery to purchase intent.</p>
                            <div class="demo-slide-tags">
                                <span>Sora-ready hero</span>
                                <span>GPT Image prompts</span>
                                <span>Launch-ready polish</span>
                            </div>
                        </article>
                    </li>
                </ul>
            </div>
        </div>
    </section>

    <section class="demo-final-cta" id="demo-final-cta">
        <div class="demo-final-cta-wrap">
            <div class="demo-final-cta-card" data-demo-reveal>
                <div class="demo-section-kicker">Call to action</div>
                <h2>Take the consultation now and turn this showcase into the user\'s actual persistent website.</h2>
                <p>${primaryMessage}</p>
                <div class="demo-action-row">
                    <button type="button" data-demo-launch>${ctaLabel}</button>
                </div>
                <div class="demo-final-meta">
                    <span>Consultation-led generation</span>
                    <span>Persistent draft handoff</span>
                    <span>Premium preview shell</span>
                    <span>Modern stack enabled</span>
                </div>
            </div>
        </div>
    </section>
</main>

<script>
(function() {
    const root = document.getElementById('vmo-demo-showcase');
    if (!root) return;

    function launchPrimaryAction() {
        const ready = root.dataset.consultationReady === 'true';

        if (ready) {
            try {
                const input = parent.document.getElementById('vmo-prompt-input');
                if (input) {
                    input.focus();
                    try { input.scrollIntoView({ behavior: 'smooth', block: 'center' }); } catch (_) {}
                    return;
                }
            } catch (_) {}
        }

        try {
            if (parent.launchBusinessWizard) {
                parent.launchBusinessWizard();
                return;
            }
        } catch (_) {}

        try {
            const button = parent.document.getElementById('vmo-business-wizard-btn');
            if (button) button.click();
        } catch (_) {}
    }

    root.querySelectorAll('[data-demo-launch]').forEach(function(node) {
        node.addEventListener('click', function(event) {
            event.preventDefault();
            launchPrimaryAction();
        });
    });

    function initFallbackReveal() {
        const revealNodes = root.querySelectorAll('[data-demo-reveal]');
        if (!('IntersectionObserver' in window)) {
            revealNodes.forEach(function(node) {
                node.style.opacity = '1';
                node.style.transform = 'translateY(0)';
            });
            return;
        }

        const observer = new IntersectionObserver(function(entries) {
            entries.forEach(function(entry) {
                if (!entry.isIntersecting) return;
                entry.target.style.transition = 'opacity 0.75s ease, transform 0.75s ease';
                entry.target.style.opacity = '1';
                entry.target.style.transform = 'translateY(0)';
                observer.unobserve(entry.target);
            });
        }, { threshold: 0.14 });

        revealNodes.forEach(function(node) { observer.observe(node); });
    }

    function initCounters() {
        const counters = root.querySelectorAll('[data-count-to]');
        counters.forEach(function(counter) {
            const target = parseInt(counter.getAttribute('data-count-to') || '0', 10);
            if (!Number.isFinite(target)) return;
            counter.textContent = '0';

            const animate = function() {
                if (typeof gsap !== 'undefined') {
                    const data = { value: 0 };
                    gsap.to(data, {
                        value: target,
                        duration: 1.4,
                        ease: 'power2.out',
                        onUpdate: function() {
                            counter.textContent = String(Math.round(data.value));
                        }
                    });
                } else {
                    counter.textContent = String(target);
                }
            };

            if (typeof ScrollTrigger !== 'undefined' && typeof gsap !== 'undefined') {
                ScrollTrigger.create({
                    trigger: counter,
                    start: 'top 88%',
                    once: true,
                    onEnter: animate
                });
            } else if ('IntersectionObserver' in window) {
                const observer = new IntersectionObserver(function(entries) {
                    entries.forEach(function(entry) {
                        if (!entry.isIntersecting) return;
                        animate();
                        observer.unobserve(counter);
                    });
                }, { threshold: 0.3 });
                observer.observe(counter);
            } else {
                animate();
            }
        });
    }

    function initProgressPanels() {
        const panels = Array.from(root.querySelectorAll('.demo-feature-panel'));
        const progress = root.querySelector('.demo-progress-fill');
        if (!panels.length || !progress) return;

        function setActive(index) {
            panels.forEach(function(panel, panelIndex) {
                panel.classList.toggle('is-active', panelIndex === index);
            });
            progress.style.transform = 'scaleY(' + String((index + 1) / panels.length) + ')';
        }

        setActive(0);

        if (typeof ScrollTrigger !== 'undefined' && typeof gsap !== 'undefined') {
            panels.forEach(function(panel, index) {
                ScrollTrigger.create({
                    trigger: panel,
                    start: 'top center',
                    end: 'bottom center',
                    onEnter: function() { setActive(index); },
                    onEnterBack: function() { setActive(index); }
                });
            });
            return;
        }

        if ('IntersectionObserver' in window) {
            const observer = new IntersectionObserver(function(entries) {
                entries.forEach(function(entry) {
                    if (!entry.isIntersecting) return;
                    const index = panels.indexOf(entry.target);
                    if (index >= 0) setActive(index);
                });
            }, { threshold: 0.5 });
            panels.forEach(function(panel) { observer.observe(panel); });
        }
    }

    function initGsapReveal() {
        if (typeof gsap === 'undefined' || typeof ScrollTrigger === 'undefined') {
            initFallbackReveal();
            return;
        }

        gsap.utils.toArray(root.querySelectorAll('[data-demo-reveal]')).forEach(function(node, index) {
            gsap.to(node, {
                opacity: 1,
                y: 0,
                duration: 0.8,
                delay: Math.min(index * 0.03, 0.18),
                ease: 'power3.out',
                scrollTrigger: {
                    trigger: node,
                    start: 'top 86%'
                }
            });
        });

        const heroCopy = root.querySelector('.demo-hero-copy');
        const heroPanel = root.querySelector('.demo-hero-panel');
        if (heroCopy && heroPanel) {
            gsap.fromTo(heroCopy, { y: 24, opacity: 0 }, { y: 0, opacity: 1, duration: 1.05, ease: 'power3.out', delay: 0.08 });
            gsap.fromTo(heroPanel, { y: 36, opacity: 0 }, { y: 0, opacity: 1, duration: 1.05, ease: 'power3.out', delay: 0.18 });
        }
    }

    function initProofSlider() {
        const slider = root.querySelector('.demo-proof-slider');
        if (!slider || typeof Splide === 'undefined') return;
        if (slider.dataset.demoSliderReady === 'true') return;

        slider.dataset.demoSliderReady = 'true';

        const splide = new Splide(slider, {
            type: 'loop',
            perPage: 1.35,
            gap: '18px',
            arrows: false,
            pagination: true,
            drag: 'free',
            focus: 0,
            breakpoints: {
                980: { perPage: 1.12 },
                760: { perPage: 1 }
            }
        });

        splide.mount();
    }

    function initCanvasBackground() {
        const canvas = document.getElementById('vmo-demo-cinematic-canvas');
        if (!canvas) return;
        const context = canvas.getContext('2d');
        if (!context) return;

        const orbs = [
            { x: 0.18, y: 0.22, r: 0.22, dx: 0.00016, dy: 0.00012, color: '123,165,255', alpha: 0.34 },
            { x: 0.74, y: 0.18, r: 0.18, dx: -0.00012, dy: 0.00015, color: '115,240,203', alpha: 0.28 },
            { x: 0.66, y: 0.74, r: 0.24, dx: 0.0001, dy: -0.0001, color: '255,138,158', alpha: 0.18 },
            { x: 0.36, y: 0.68, r: 0.16, dx: -0.00008, dy: -0.00012, color: '244,199,122', alpha: 0.18 }
        ];

        function resize() {
            const ratio = window.devicePixelRatio || 1;
            canvas.width = Math.floor(window.innerWidth * ratio);
            canvas.height = Math.floor(window.innerHeight * ratio);
            canvas.style.width = '100%';
            canvas.style.height = '100%';
            context.setTransform(ratio, 0, 0, ratio, 0, 0);
        }

        function drawBackdrop(width, height) {
            const gradient = context.createLinearGradient(0, 0, width, height);
            gradient.addColorStop(0, '#08101c');
            gradient.addColorStop(0.46, '#0c1630');
            gradient.addColorStop(1, '#060c16');
            context.fillStyle = gradient;
            context.fillRect(0, 0, width, height);
        }

        function drawOrb(width, height, orb) {
            const gradient = context.createRadialGradient(
                orb.x * width,
                orb.y * height,
                0,
                orb.x * width,
                orb.y * height,
                orb.r * Math.min(width, height)
            );
            gradient.addColorStop(0, 'rgba(' + orb.color + ',' + String(orb.alpha) + ')');
            gradient.addColorStop(0.45, 'rgba(' + orb.color + ',' + String(orb.alpha * 0.45) + ')');
            gradient.addColorStop(1, 'rgba(' + orb.color + ',0)');
            context.fillStyle = gradient;
            context.beginPath();
            context.arc(orb.x * width, orb.y * height, orb.r * Math.min(width, height), 0, Math.PI * 2);
            context.fill();
        }

        function drawFrame() {
            const width = window.innerWidth;
            const height = window.innerHeight;
            drawBackdrop(width, height);

            context.save();
            context.globalCompositeOperation = 'screen';
            orbs.forEach(function(orb) {
                orb.x += orb.dx;
                orb.y += orb.dy;
                if (orb.x < -0.08 || orb.x > 1.08) orb.dx *= -1;
                if (orb.y < -0.08 || orb.y > 1.08) orb.dy *= -1;
                drawOrb(width, height, orb);
            });
            context.restore();

            requestAnimationFrame(drawFrame);
        }

        resize();
        drawFrame();
        window.addEventListener('resize', resize);
    }

    initGsapReveal();
    initCounters();
    initProgressPanels();
    initProofSlider();
    initCanvasBackground();

    if (typeof window.VMO !== 'undefined' && typeof window.VMO.refresh === 'function') {
        setTimeout(function() { window.VMO.refresh(); }, 250);
    }
})();
</script>`;
    }

    window.showIframePlaceholder = function(options) {
        const settings = options && typeof options === 'object' ? options : {};
        const iframe = document.getElementById('vmo-preview-iframe');
        if (!iframe) return;
        if (!settings.force && hasRenderablePreview()) return;

        const placeholderHtml = settings.rebuild === true
            ? window.vmoBuildShowcasePreviewHtml()
            : (typeof window.vmoGetShowcasePreviewHtml === 'function'
                ? window.vmoGetShowcasePreviewHtml()
                : window.vmoBuildShowcasePreviewHtml());

        const handleLoad = function() {
            setTimeout(function() {
                if (!iframeHasRenderableShowcaseDocument(iframe)) {
                    if (recoverShowcasePlaceholder('iframe-load-empty')) {
                        return;
                    }
                } else {
                    iframe.dataset.vmoShowcaseRecoveryCount = '0';
                }

                window.vmoShowcasePreviewHtml = serializeShowcasePreview() || placeholderHtml;
                setTimeout(function() {
                    queueShowcaseMediaGeneration();
                }, 30);
            }, 40);
        };

        try {
            iframe.addEventListener('load', handleLoad, { once: true });
            iframe.dataset.vmoPreviewMode = 'showcase-placeholder';
            iframe.dataset.vmoShowcaseMediaState = 'complete';
            window.vmoShowcasePreviewHtml = placeholderHtml;
            iframe.srcdoc = placeholderHtml;
            if (settings.skipPersist !== true && typeof window.vmoPersistPreviewFrameState === 'function') {
                window.vmoPersistPreviewFrameState('showcase-placeholder-set');
            }
            console.log('[VMO] Showcase placeholder displayed in iframe');
        } catch (error) {
            console.warn('[VMO] Could not set showcase placeholder', error);
        }
    };

    window.vmoRecoverShowcasePlaceholder = recoverShowcasePlaceholder;

    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', function() {
            setTimeout(window.showIframePlaceholder, 100);
        });
    } else {
        setTimeout(window.showIframePlaceholder, 100);
    }

    console.log('[VMO] Iframe showcase placeholder system loaded');
})();