<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DemandSync™ ROI Simulator & Strategic Report</title>
    
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">

* {
            box-shadow: none;
            box-sizing: border-box;
        }

.app-view-wrapper {
            width: 200vw;
            height: 100vh;
            display: flex;
            transition: transform 0.6s cubic-bezier(0.76, 0, 0.24, 1);
        }

.page {
            width: 100vw;
            height: 100vh;
            flex-shrink: 0;
            padding: 24px;
            display: flex;
            justify-content: center;
            align-items: center;
            overflow: auto;
        }

.container {
            width: calc(100vw - 48px);
            max-width: 1600px;
            height: 925px;
            display: flex;
            flex-direction: column;
            gap: 20px;
            flex-shrink: 0;
        }

header {
            background: linear-gradient(135deg, var(--pine-green) 0%, var(--kombu-green) 100%);
            color: #ffffff;
            padding: 20px 32px;
            border-radius: 16px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            box-shadow: 0 12px 36px 0 rgba(14, 20, 0, 0.25);
            border: 1px solid rgba(255, 255, 255, 0.08);
            position: relative;
            flex-shrink: 0;
        }

header::after {
            content: '';
            position: absolute;
            top: 0; left: 0; right: 0; height: 50%;
            background: linear-gradient(rgba(255,255,255,0.08), rgba(255,255,255,0));
            pointer-events: none;
        }

header h1 {
            margin: 0;
            font-size: 30px;
            font-weight: 800;
            letter-spacing: -0.5px;
            text-shadow: 0 2px 4px rgba(0,0,0,0.2);
        }

header p {
            margin: 6px 0 0 0;
            color: #c2d6a4;
            font-size: 15px;
            font-weight: 500;
        }

.header-controls {
            display: flex;
            align-items: center;
            gap: 20px;
        }

.logo-white {
            height: 48px;
            width: auto;
            object-fit: contain;
            filter: brightness(0) invert(1);
            opacity: 0.95;
        }

.benchmark-panel {
            background: linear-gradient(135deg, #ffffff, #f4f7f0);
            border-left: 6px solid var(--avocado);
            padding: 16px 24px;
            border-radius: 14px;
            box-shadow: 0 6px 20px rgba(0,0,0,0.02);
            border: 1px solid var(--border-color);
            flex-shrink: 0;
        }
        
        .benchmark-text {
            font-size: 15px;
            color: var(--vibrant-blue);
            margin: 0 0 10px 0;
            font-weight: 800;
        }
        
        .benchmark-sectors {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 16px;
        }
        
        .sector-box {
            background: #ffffff;
            padding: 12px 16px;
            border-radius: 10px;
            border: 1px solid var(--border-color);
            font-size: 14px;
            line-height: 1.4;
            color: var(--text-main);
            cursor: pointer;
            transition: all 0.2s ease;
        }
        
        .sector-box strong {
            color: var(--vibrant-blue);
            font-size: 15px;
            display: block;
            margin-bottom: 4px;
        }

.sector-box.active {
            border-color: var(--avocado);
            background: linear-gradient(135deg, #ffffff 0%, rgba(88, 130, 1, 0.08) 100%);
            box-shadow: 0 6px 18px var(--gloss-glow);
        }

.grid-2 {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 20px;
            flex: 1;
            min-height: 0;
        }

.panel {
            background-color: var(--panel-bg);
            border: 1px solid var(--border-color);
            border-radius: 16px;
            padding: 24px 32px;
            box-shadow: 0 6px 24px rgba(31, 46, 0, 0.03);
            display: flex;
            flex-direction: column;
            min-height: 0;
            overflow-x: hidden;
        }

.panel-title {
            font-size: 17px;
            font-weight: 800;
            margin-top: 0;
            margin-bottom: 16px;
            border-bottom: 2px solid var(--border-color);
            padding-bottom: 10px;
            color: var(--vibrant-blue);
            text-transform: uppercase;
            letter-spacing: 0.5px;
            flex-shrink: 0;
        }

.controls-container {
            overflow-y: hidden;
            overflow-x: hidden;
            padding-right: 0;
            display: flex;
            flex-direction: column;
            gap: 14px;
            flex: 1;
        }

.control-group {
            display: flex;
            flex-direction: column;
        }

.control-label {
            display: flex;
            justify-content: space-between;
            font-size: 14px;
            font-weight: 700;
            margin-bottom: 6px;
            color: var(--text-main);
        }

.clickable-label {
            cursor: pointer;
            position: relative;
            transition: color 0.2s ease;
        }
        
        .clickable-label:hover {
            color: var(--avocado);
            text-decoration: underline dotted;
        }

.control-label span.value {
            color: var(--avocado);
            font-weight: 800;
            background: rgba(88, 130, 1, 0.08);
            padding: 2px 12px;
            border-radius: 6px;
            font-size: 14px;
        }

input[type="range"] {
            width: 100%;
            height: 8px;
            background: #e2e8df;
            border-radius: 5px;
            outline: none;
            accent-color: var(--avocado);
        }

.chart-container {
            position: relative;
            flex: 1;
            width: 100%;
            min-height: 0;
        }
        
        .chart-hint {
            font-size: 11px;
            color: var(--text-muted);
            text-align: right;
            margin-top: -10px;
            margin-bottom: 5px;
            font-weight: 600;
        }

.bottom-action-row {
            display: block;
            flex-shrink: 0;
        }

.kpi-section-wrapper {
            display: flex;
            flex-direction: column;
            gap: 6px;
            width: 100%;
        }

.potential-notice {
            font-size: 13px;
            font-weight: 800;
            color: var(--avocado);
            text-transform: uppercase;
            letter-spacing: 1px;
            margin: 0 0 2px 4px;
        }

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

.kpi-card {
            background: linear-gradient(135deg, #ffffff 0%, #fcfdfa 100%);
            border: 1px solid var(--border-color);
            border-radius: 14px;
            padding: 16px 12px;
            text-align: center;
            box-shadow: 0 6px 16px rgba(31, 46, 0, 0.02);
            display: flex;
            flex-direction: column;
            justify-content: center;
            height: 115px;
            width: 100%;
        }

.kpi-card.highlight { border-top: 5px solid var(--avocado); }
        .kpi-card.payback { border-top: 5px solid var(--vibrant-blue); }
        .kpi-label { font-size: 11px; font-weight: 800; color: var(--vibrant-blue); text-transform: uppercase; margin-bottom: 6px; letter-spacing: 0.5px; }
        .kpi-value { font-size: 26px; font-weight: 800; color: var(--text-main); margin-bottom: 4px; line-height: 1.1; }
        .kpi-card.highlight .kpi-value { color: var(--avocado); }
        .kpi-card.payback .kpi-value { color: var(--vibrant-blue); }
        .kpi-grid .kpi-card .kpi-desc { font-size: 11px; color: var(--text-muted); line-height: 1.3; }

.action-button-group {
            display: flex;
            flex-direction: column;
            gap: 9px;
            height: 115px;
            justify-content: center;
            width: 100%;
        }

.view-insights-btn, .create-report-btn {
            color: #ffffff;
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 14px;
            padding: 0 16px;
            height: 53px;
            font-size: 12px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.8px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            box-shadow: 0 4px 12px rgba(0, 34, 68, 0.1);
            transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
            width: 100%;
        }

.view-insights-btn {
            background-color: #002e5b;
        }

.create-report-btn {
            background-color: #4c6e03;
        }

.view-insights-btn:hover, .create-report-btn:hover {
            transform: translateY(-2px);
            background: linear-gradient(135deg, var(--vibrant-blue) 0%, var(--avocado) 100%);
            border-color: rgba(255, 255, 255, 0.25);
            box-shadow: 0 12px 26px rgba(0, 34, 68, 0.3);
        }

.boardroom-container {
            background: linear-gradient(135deg, #ffffff 0%, #f4f7f0 100%);
            border: 1px solid var(--border-color);
            border-radius: 20px;
            width: 1200px;
            height: 700px;
            padding: 40px;
            box-shadow: 0 24px 60px rgba(14, 20, 0, 0.08);
            position: relative;
            display: flex;
            flex-direction: column;
            flex-shrink: 0;
        }

.boardroom-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom: 2px solid var(--border-color);
            padding-bottom: 16px;
            margin-bottom: 24px;
            flex-shrink: 0;
        }

.boardroom-title { font-size: 22px; font-weight: 800; color: var(--vibrant-blue); text-transform: uppercase; margin: 0; }
        
        .back-btn {
            background-color: var(--pine-green);
            color: #ffffff;
            border: 1px solid rgba(255, 255, 255, 0.1);
            padding: 10px 20px;
            border-radius: 12px;
            font-size: 13px;
            font-weight: 700;
            cursor: pointer;
            box-shadow: 0 4px 12px rgba(0, 34, 68, 0.1);
            transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
        }

.back-btn:hover {
            transform: translateY(-2px);
            background: linear-gradient(135deg, var(--vibrant-blue) 0%, var(--avocado) 100%);
            border-color: rgba(255, 255, 255, 0.25);
            box-shadow: 0 10px 22px rgba(0, 34, 68, 0.25);
        }

.insights-large-list { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; flex: 1; overflow-y: auto; }
        .insights-large-list li { background: #ffffff; border: 1px solid var(--border-color); padding: 24px; border-radius: 14px; font-size: 14px; line-height: 1.5; color: var(--text-main); }
        .insights-large-list li strong { font-size: 16px; display: block; margin-bottom: 10px; color: var(--vibrant-blue); border-left: 4px solid var(--avocado); padding-left: 12px; }

.modal-overlay {
            position: fixed;
            top: 0; left: 0; width: 100vw; height: 100vh;
            background: rgba(0, 34, 68, 0.4);
            backdrop-filter: blur(5px);
            z-index: 10000;
            display: flex;
            justify-content: center;
            align-items: center;
            opacity: 0; pointer-events: none;
            transition: opacity 0.3s ease;
        }
        .modal-overlay.active { opacity: 1; pointer-events: auto; }
        .modal-card {
            background: #ffffff;
            border: 1px solid var(--border-color);
            border-radius: 16px;
            width: 600px;
            padding: 32px;
            box-shadow: 0 20px 50px rgba(14, 20, 0, 0.15);
            transform: scale(0.9);
            transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            position: relative;
        }
        .modal-overlay.active .modal-card { transform: scale(1); }
        .modal-card h3 { margin: 0 0 16px 0; color: var(--vibrant-blue); font-size: 20px; font-weight: 800; text-transform: uppercase; border-bottom: 2px solid var(--border-color); padding-bottom: 8px; }
        .modal-body { font-size: 14px; line-height: 1.6; color: var(--text-main); }
        .modal-body ul { margin: 12px 0; padding-left: 20px; }
        .modal-body li { margin-bottom: 8px; }
        .close-modal-btn { position: absolute; top: 20px; right: 24px; background: none; border: none; font-size: 24px; color: var(--text-muted); cursor: pointer; font-weight: 700; }
        .close-modal-btn:hover { color: var(--avocado); }

/* Safe responsive fallback - desktop styling stays unchanged */
        @media (max-width: 900px) {
            .page {
                padding: 16px;
                align-items: flex-start;
            }

.container {
                width: calc(100vw - 32px);
                height: auto;
                min-height: 925px;
            }

.benchmark-sectors {
                grid-template-columns: repeat(2, 1fr);
            }

.grid-2 {
                grid-template-columns: 1fr;
            }

.kpi-grid {
                grid-template-columns: repeat(2, 1fr);
            }

.action-button-group {
                grid-column: 1 / -1;
            }

.boardroom-container {
                width: calc(100vw - 32px);
                height: auto;
                min-height: 700px;
            }
        }

@media (max-width: 600px) {
            header {
                padding: 18px 20px;
            }

header h1 {
                font-size: 22px;
            }

.benchmark-sectors,
            .kpi-grid,
            .insights-large-list {
                grid-template-columns: 1fr;
            }

.panel {
                padding: 20px;
            }
        }
    </style>
</head>
<body>

<div class="app-view-wrapper" id="appPortal">
    
    
    <div class="page">
        <div class="container">
            <header>
                <div class="header-left">
                    <div>
                        <h1><span style="margin-right: 20px;">DemandSync™</span>ROI Simulator <span class="app-version-text"></span></h1>
                        <p>Why accurate data still leaves your forecast 40% off — Gartner & APQC Supply Chain Benchmarks.</p>
                    </div>
                </div>
                <div class="header-controls">
                    <img src="https://newitera.nl/wp-content/uploads/2021/06/newitera-logo-white-uai-258x112.png" alt="NewItera Logo" class="logo-white" onerror="this.style.display='none';">
                </div>
            </header>

<div class="benchmark-panel">
                <p class="benchmark-text">Choose specific Industry / Sector to show Benchmark:</p>
                <div class="benchmark-sectors">
                    <div class="sector-box" id="box-fmcg" onclick="selectSectorFromBlock('fmcg')">
                        <strong>FMCG / Food & Beverage:</strong> Stable at aggregate levels (ca. 25% error), but highly volatile during promotions. Correcting planner bias unlocks massive margins.
                    </div>
                    <div class="sector-box" id="box-retail" onclick="selectSectorFromBlock('retail')">
                        <strong>Retail & E-Commerce:</strong> Highly dynamic due to fast-moving trends. SKU-level errors easily exceed 35-40%. Frequent stock-outs create direct leakages.
                    </div>
                    <div class="sector-box" id="box-automotive" onclick="selectSectorFromBlock('automotive')">
                        <strong>Automotive & Industrial:</strong> Severely hit by extended global lead times. Excess defensive safety stocks tie up vital corporate working capital.
                    </div>
                    <div class="sector-box" id="box-pharma" onclick="selectSectorFromBlock('pharma')">
                        <strong>Pharma & Life Sciences:</strong> Rigid shelf-life requirements. Over-forecasting and system safety padding lead directly to destructive inventory write-offs.
                    </div>
                </div>
            </div>

<div class="grid-2">
                <div class="panel">
                    <h2 class="panel-title">Operational & Financial Scale Inputs</h2>
                    <div class="controls-container">
                        <div class="control-group">
                            <div class="control-label">
                                <span class="clickable-label" onclick="openSliderTextModal('revenue')">Annual Revenue 💡</span>
                                <span class="value" id="lbl-revenue">50.000.000 €</span>
                            </div>
                            <input type="range" id="inp-revenue" min="5000000" max="500000000" step="500000" value="50000000">
                        </div>

<div class="control-group">
                            <div class="control-label">
                                <span class="clickable-label" onclick="openSliderTextModal('margin')">Average Gross Margin (%) 💡</span>
                                <span class="value" id="lbl-margin">35%</span>
                            </div>
                            <input type="range" id="inp-margin" min="10" max="70" step="1" value="35">
                        </div>

<div class="control-group">
                            <div class="control-label">
                                <span class="clickable-label" onclick="openSliderTextModal('inventory')">Current Total Inventory Value 💡</span>
                                <span class="value" id="lbl-inventory">7.500.000 €</span>
                            </div>
                            <input type="range" id="inp-inventory" min="1000000" max="150000000" step="500000" value="7500000">
                        </div>

<div class="control-group">
                            <div class="control-label">
                                <span class="clickable-label" onclick="openSliderTextModal('carrying')">Inventory Carrying Cost Rate per Annum 💡</span>
                                <span class="value" id="lbl-carrying">22%</span>
                            </div>
                            <input type="range" id="inp-carrying" min="15" max="35" step="1" value="22">
                        </div>

<div class="control-group">
                            <div class="control-label">
                                <span class="clickable-label" onclick="openSliderTextModal('expedite')">Annual Freight Expedite Fees 💡</span>
                                <span class="value" id="lbl-expedite">250.000 €</span>
                            </div>
                            <input type="range" id="inp-expedite" min="50000" max="5000000" step="50000" value="250000">
                        </div>

<div class="control-group">
                            <div class="control-label">
                                <span class="clickable-label" onclick="openSliderTextModal('stockout')">Revenue Leakage Rate from Stock-outs 💡</span>
                                <span class="value" id="lbl-stockout">3%</span>
                            </div>
                            <input type="range" id="inp-stockout" min="1" max="10" step="1" value="3">
                        </div>
                    </div>
                </div>

<div class="panel">
                    <h2 class="panel-title">Cost Impact Matrix: Status Quo vs. DemandSync Layer</h2>
                    <div class="chart-hint">💡 Click on any bar to see its breakdown</div>
                    <div class="chart-container">
                        <canvas id="roiChart"></canvas>
                    </div>
                </div>
            </div>

<div class="bottom-action-row">
                <div class="kpi-section-wrapper">
                    <div class="potential-notice">✦ Potential Business Case & ROI Projection</div>
                    <div class="kpi-grid">
                        <div class="kpi-card highlight">
                            <div class="kpi-label">One-Time Cash Released</div>
                            <div class="kpi-value" id="kpi-working-capital">-</div>
                            <div class="kpi-desc" id="desc-working-capital">Freed potential capital via 15% reduction in safety stock</div>
                        </div>
                        <div class="kpi-card highlight">
                            <div class="kpi-label">Annual Recurring Savings</div>
                            <div class="kpi-value" id="kpi-annual-savings">-</div>
                            <div class="kpi-desc">Total structural EBITDA improvement per year</div>
                        </div>
                        
                        <div class="kpi-card">
                            <div class="kpi-label">Forecast Optimization</div>
                            <div class="kpi-value" id="kpi-forecast-opt">-</div>
                            <div class="kpi-desc">Average reduction in standard forecast error rates</div>
                        </div>
                        <div class="kpi-card payback">
                            <div class="kpi-label">Payback Period</div>
                            <div class="kpi-value" id="kpi-payback">-</div>
                            <div class="kpi-desc">Time required to fully offset licence & deployment costs</div>
                        </div>
                        <div class="action-button-group">
                            <button class="view-insights-btn" onclick="togglePageFlow(1)">
                                <span>Boardroom Notes</span>
                                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
                            </button>
                          <a href="#" class="create-report-btn" onclick="openReportWithParams(event)"><span>Personal Report</span><i class="fa-solid fa-id-card"></i></a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

<div class="page">
        <div class="boardroom-container">
            <div class="boardroom-header">
                <h2 class="boardroom-title">Boardroom Key Insights & Strategic Value Drivers</h2>
                <button class="back-btn" onclick="togglePageFlow(0)">← Back to Simulator</button>
            </div>
            <ul class="insights-large-list">
                <li id="insight-wc">
                    <strong>Working Capital Optimization:</strong> Shrinking the forecasting error margin enables an immediate, defensive reduction in safety stock without degrading service levels. This generates a massive, one-time cash injection directly back into the balance sheet.
                </li>
                <li id="insight-ebitda">
                    <strong>Structural EBITDA Boost:</strong> Beyond logistics freight fees, the true cost mitigation stems from stopping inventory degradation, lower warehouse holding requirements (scaled at your custom rate), and eliminating high-priority warehouse re-handling fees.
                </li>
                <li id="insight-sop">
                    <strong>Cross-Functional S&OP Alignment:</strong> Eliminate internal frictions and data siloes between Sales forecasting targets and Financial cash allocation. Providing a single mathematically objective truth reduces cycle bottlenecks, saving leadership hours and unifying enterprise-wide execution.
                </li>
                <li id="insight-recovery">
                    <strong>Defending Market Share & CLV:</strong> Stock-outs do far more than leak immediate margin—they trigger direct customer churn to agile competitors. Securing structural OTIF (On-Time In-Full) reliability fiercely protects digital shelf placements, wholesale partnership metrics, and contract retention.
                </li>
                <li id="insight-coi" style="border-left: 4px solid #cc0000; padding-left: 12px;">
                    <strong>Cost of Inaction (COI):</strong> Every strategic project competes for organizational priority, but waiting has a direct compounding cost. Based on your inputs, delay results in a leakage of ... per month in avoidable overhead and missed gross profits until this layer is deployed.
                </li>
                <li id="insight-opportunity">
                    <strong>Strategic Opportunity Costs:</strong> the one-time capital release of ... is not a hypothetical accounting adjustment. This immediate injection enables the enterprise to self-fund strategic growth initiatives and innovation pipelines without taking on additional bank financing or corporate interest burdens.
                </li>
            </ul>
        </div>
    </div>

</div>

<div class="modal-overlay" id="infoModal" onclick="closeModal()">
    <div class="modal-card" onclick="event.stopPropagation()">
        <button class="close-modal-btn" onclick="closeModal()">⨉</button>
        <h3 id="modalTitle">Parameter Explanation</h3>
        <div class="modal-body" id="modalBody"></div>
    </div>
</div>

event.preventDefault();
        event.stopImmediatePropagation();

var getValue = function (id, fallback) {
            var el = document.getElementById(id);
            return el ? el.value : fallback;
        };

var params = new URLSearchParams({
            sector: localStorage.getItem('demandsync_sector') || 'default',
            revenue: getValue('inp-revenue', '50000000'),
            margin: getValue('inp-margin', '35'),
            inventory: getValue('inp-inventory', '7500000'),
            carrying: getValue('inp-carrying', '22'),
            expedite: getValue('inp-expedite', '250000'),
            stockout: getValue('inp-stockout', '3')
        });

parent.postMessage({
            type: 'demandsync-open-report',
            query: params.toString()
        }, '*');
    }, true);
})();
</script>

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DemandSync™ Strategic Diagnostic Report</title>
    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>
    
    
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">

* {
            box-shadow: none;
            box-sizing: border-box;
        }

body {
            font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
            background-color: var(--bg-main);
            color: var(--text-main);
            margin: 0;
            padding: 0;
            width: 100vw;
            height: 100vh;
            overflow: hidden; 
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            position: relative;
        }

/* GLOBALE ON-TOP WATERMARK LAAG (BUITEN CONTAINER, BOVEN ALLES) */
        .report-watermark-overlay {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%) rotate(-28deg);
            width: 140%;
            text-align: center;
            pointer-events: none; 
            user-select: none; 
            -webkit-user-select: none;
            z-index: 999999; 
            opacity: 0.12; 
            display: flex;
            flex-direction: column;
            gap: 12px;
        }

.watermark-main {
            font-size: 64px; 
            font-weight: 800;
            letter-spacing: 8px;
            color: rgba(255, 255, 255, 0.85); 
            line-height: 1.1;
            text-shadow: 0px 4px 20px rgba(0, 0, 0, 0.8); 
        }

.report-watermark-strip {
            position: fixed;
            bottom: calc(50vh - 360px + 84px); 
            right: calc(50vw - 640px + 64px);  
            text-align: right;
            pointer-events: none;
            user-select: none;
            -webkit-user-select: none;
            z-index: 1000000; 
            opacity: 0.75; 
            display: none; 
        }

.watermark-sub {
            font-size: 12px; 
            font-weight: 700;
            letter-spacing: 2px;
            color: var(--report-accent-blue); 
            text-transform: uppercase;
            text-shadow: 0px 2px 8px rgba(0, 0, 0, 0.9);
        }

.report-page-container {
            width: 1280px;
            height: 720px;
            background-color: var(--report-bg);
            border-radius: 16px;
            padding: 44px 64px 36px 64px; 
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            box-shadow: 0 30px 70px rgba(0, 0, 0, 0.6); 
            border: 1px solid rgba(212, 175, 55, 0.3); 
            position: relative;
            overflow: hidden;
            color: var(--report-text-light);
        }

.report-page-container::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 4px;
            background: linear-gradient(90deg, #1e3a8a, #38bdf8, var(--report-accent-blue)); 
        }

.report-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom: 1px solid var(--report-border);
            padding-bottom: 20px;
            margin-bottom: 40px; 
            z-index: 2;
            height: 64px; 
            flex-shrink: 0;
        }

.report-title-area h2 {
            font-size: 24px;
            font-weight: 800;
            margin: 0;
            color: var(--report-text-light);
            letter-spacing: -0.3px;
        }

.report-title-area h2 span {
            color: var(--avocado);[cite: 1]
            font-weight: 600;
        }

.report-subtitle {
            font-size: 12.5px;
            text-transform: uppercase;
            letter-spacing: 2px;
            color: var(--report-text-muted);
            margin-top: 4px;
            font-weight: 600;
        }

.report-slide {
            flex: 1; 
            display: none;
            align-items: center;
            min-height: 0; 
            z-index: 2;
            padding-bottom: 16px; 
        }

.report-slide.active-slide {
            display: block;
        }

.report-two-col {
            display: grid;
            grid-template-columns: 1.15fr 0.85fr;
            gap: 56px; 
            width: 100%;
            align-items: center;
            max-height: 100%;
        }

.report-text-block {
            max-height: 480px;
            overflow-y: auto;
            padding-right: 8px;
        }

.report-text-block h3 {
            font-size: 34px;
            line-height: 1.2;
            margin-top: 0;
            margin-bottom: 20px;
            color: var(--report-text-light);
            font-weight: 800;
            letter-spacing: -0.5px;
        }

.report-text-block h3 em {
            font-style: normal;
            color: var(--report-accent-blue); 
        }

.report-text-block p {
            font-size: 15px; 
            line-height: 1.7;
            color: var(--report-text-muted);
            margin-bottom: 24px;
        }

.report-bullet-list {
            list-style: none;
            padding: 0;
            margin: 0;
        }

.report-bullet-list li {
            position: relative;
            padding-left: 30px;
            margin-bottom: 18px; 
            font-size: 14px; 
            line-height: 1.6; 
            color: var(--report-text-light);
        }

.report-bullet-list li i {
            position: absolute;
            left: 0;
            top: 4px;
            color: #38bdf8;
            font-size: 14px;
        }

.report-bullet-list li strong {
            color: #ffffff;
            font-weight: 700;
        }

.report-visual-block {
            display: flex;
            flex-direction: column;
            gap: 20px; 
            max-height: 480px;
            justify-content: center;
        }

.report-data-card {
            background: var(--report-card-bg);
            border: 1px solid var(--report-border);
            border-radius: 12px;
            padding: 22px 26px;
            position: relative;
            overflow: hidden;
            box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
        }

.report-data-card::before {
            content: '';
            position: absolute;
            top: 0; left: 0; width: 3px; height: 100%;
            background: #38bdf8;
        }

.report-data-card.secondary::before {
            background: var(--report-accent-blue); 
        }

.report-card-title {
            font-size: 11.5px; 
            text-transform: uppercase;
            letter-spacing: 1.2px;
            color: var(--report-text-muted);
            margin-bottom: 8px;
            font-weight: 700;
        }

.report-card-value {
            font-size: 30px;
            font-weight: 800;
            color: var(--report-text-light);
            margin-bottom: 6px;
            letter-spacing: -0.5px;
        }

.report-data-card.highlight-card .report-card-value {
            color: var(--report-accent-blue); 
        }

.report-card-desc {
            font-size: 13px; 
            line-height: 1.55;
            color: var(--report-text-muted);
        }

.mirror-grid {
            display: grid;
            grid-template-columns: 1fr;
            gap: 12px;
        }

.mirror-card {
            background: linear-gradient(135deg, rgba(19, 27, 46, 0.9) 0%, rgba(11, 15, 23, 0.95) 100%);
            border: 1px solid rgba(255, 255, 255, 0.08);
            border-radius: 12px;
            padding: 16px 20px;
            position: relative;
            overflow: hidden;
            display: flex;
            align-items: flex-start;
            gap: 16px;
            transition: all 0.3s ease;
        }

.mirror-card::before {
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            width: 3px;
            height: 100%;
            background: #38bdf8;
        }

.mirror-card.highlighted {
            background: linear-gradient(135deg, rgba(212, 175, 55, 0.1) 0%, rgba(19, 27, 46, 0.9) 100%);
            border-color: rgba(212, 175, 55, 0.35);
        }

.mirror-card.highlighted::before {
            background: var(--report-accent-blue);
        }

.mirror-card.executive-avocado {
            background: linear-gradient(135deg, rgba(88, 130, 1, 0.12) 0%, rgba(19, 27, 46, 0.9) 100%);
            border: 1px solid rgba(88, 130, 1, 0.4);
        }

.mirror-card.executive-avocado::before {
            background: var(--avocado);
        }

.mirror-card-icon-box {
            width: 38px;
            height: 38px;
            border-radius: 8px;
            background: rgba(56, 189, 248, 0.1);
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            color: #38bdf8;
            font-size: 16px;
        }

.mirror-card.executive-avocado .mirror-card-icon-box {
            background: rgba(88, 130, 1, 0.25);
            color: var(--avocado);
        }

.mirror-card.highlighted .mirror-card-icon-box {
            background: rgba(212, 175, 55, 0.2);
            color: var(--report-accent-blue);
        }

.mirror-card-content h4 {
            margin: 0 0 4px 0;
            font-size: 13px;
            font-weight: 700;
            color: var(--text-muted);
            text-transform: uppercase;
            letter-spacing: 0.8px;
        }

.mirror-card-content p {
            margin: 0;
            font-size: 13px; 
            color: var(--text-muted); 
            line-height: 1.55;
            font-weight: 400;
        }

/* Stijl voor Slide 4 elementen */
        .assessment-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 24px;
            width: 100%;
        }

.assessment-card {
            background: var(--report-card-bg);
            border: 1px solid var(--report-border);
            border-radius: 14px;
            padding: 24px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            position: relative;
            overflow: hidden;
            box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
        }

.assessment-card::before {
            content: '';
            position: absolute;
            top: 0; left: 0; width: 3px; height: 100%;
            background: var(--avocado);
        }

.assessment-card.consult-card::before {
            background: var(--report-accent-blue);
        }

.qr-container {
            display: flex;
            align-items: center;
            gap: 16px;
            margin-top: 12px;
            background: rgba(11, 15, 23, 0.6);
            padding: 12px;
            border-radius: 10px;
            border: 1px solid rgba(255,255,255,0.05);
        }

#qrcodeCanvas img {
            display: block;
            border-radius: 6px;
        }

.report-footer {
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-top: 1px solid var(--report-border);
            padding-top: 18px;
            margin-top: 24px; 
            z-index: 2;
            height: 54px; 
            flex-shrink: 0;
        }

.report-meta {
            font-size: 11.5px;
            letter-spacing: 1px;
            color: var(--avocado); 
            font-weight: 700;
            text-transform: uppercase;
        }

.report-nav-controls {
            display: flex;
            align-items: center;
            gap: 12px;
        }

.report-dot-indicators {
            display: flex;
            gap: 8px;
            margin-right: 8px;
        }

.report-dot {
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.2);
            cursor: pointer;
            transition: all 0.3s ease;
        }

.report-dot.active {
            background: var(--report-accent-blue); 
            transform: scale(1.4);
        }

.report-btn {
            background: rgba(255, 255, 255, 0.04);
            border: 1px solid rgba(255, 255, 255, 0.1);
            color: var(--report-text-light);
            padding: 6px 12px;
            border-radius: 8px;
            font-size: 13px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.2s ease;
            display: flex;
            align-items: center;
            justify-content: center;
            height: 34px;
            text-decoration: none;
        }

.report-btn:hover {
            background: rgba(255, 255, 255, 0.1);
            border-color: rgba(255, 255, 255, 0.2);
        }

.report-btn.share-btn {
            background: var(--avocado); 
            border-color: var(--avocado);
            color: #ffffff;
        }
        .report-btn.share-btn:hover {
            background: #669601;
            border-color: #669601;
            color: #fff;
        }

.report-btn.exit-btn {
            background: rgba(239, 68, 68, 0.1);
            border-color: rgba(239, 68, 68, 0.2);
            color: #ef4444;
        }

.report-btn.exit-btn:hover {
            background: #ef4444;
            color: #fff;
            border-color: #ef4444;
        }

.create-report-btn {
            color: #ffffff;
            border: 1px solid var(--avocado);
            border-radius: 10px;
            padding: 0 16px;
            height: 40px;
            font-size: 11.5px; 
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 1px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            background-color: var(--avocado);
            transition: all 0.3s ease;
        }
        .create-report-btn:hover {
            transform: translateY(-1px);
            background: #669601;
        }

.page-external-note {
            width: 1280px;
            margin-top: 14px;
            text-align: right;
            font-size: 11.5px;
            color: var(--text-muted);
            font-weight: 500;
            letter-spacing: 0.2px;
        }

.modal-overlay {
            position: fixed;
            top: 0; left: 0; width: 100vw; height: 100vh;
            background: rgba(5, 8, 15, 0.7);
            backdrop-filter: blur(6px);
            z-index: 10000;
            display: flex;
            justify-content: center;
            align-items: center;
            opacity: 0; pointer-events: none;
            transition: opacity 0.3s ease;
        }
        .modal-overlay.active { opacity: 1; pointer-events: auto; }
        .modal-card {
            background: #111827;
            border: 1px solid rgba(88, 130, 1, 0.4); 
            border-radius: 14px;
            width: 540px;
            padding: 28px;
            box-shadow: 0 25px 60px rgba(0, 0, 0, 0.5);
            transform: scale(0.95);
            transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            position: relative;
        }
        .modal-overlay.active .modal-card { transform: scale(1); }
        .modal-card h3 { margin: 0 0 14px 0; color: #f9fafb; font-size: 18px; font-weight: 800; text-transform: uppercase; border-bottom: 1px solid rgba(255,255,255,0.08); padding-bottom: 8px; letter-spacing: 0.5px; }
        .modal-body { font-size: 13.5px; line-height: 1.55; color: var(--text-muted); }
        .close-modal-btn { position: absolute; top: 20px; right: 24px; background: none; border: none; font-size: 20px; color: var(--text-muted); cursor: pointer; font-weight: 700; }
        .close-modal-btn:hover { color: var(--avocado); }
    </style>

function DemandSyncURLSearchParams(init) {
        if (
            window.__DEMANDSYNC_QUERY__ &&
            typeof init === 'string' &&
            init === window.location.search
        ) {
            init = window.__DEMANDSYNC_QUERY__;
        }
        return new NativeURLSearchParams(init);
    }

DemandSyncURLSearchParams.prototype = NativeURLSearchParams.prototype;
    window.URLSearchParams = DemandSyncURLSearchParams;
})();
</script>

function uid(prefix) {
        counter++;
        return prefix + '-' + Date.now() + '-' + counter;
    }

window.addEventListener('message', function (event) {
        if (event.source !== parent || !event.data) return;

if (event.data.type === 'demandsync-recaptcha-response') {
            var job = pendingCaptcha[event.data.requestId];
            if (!job) return;
            delete pendingCaptcha[event.data.requestId];

if (event.data.ok) job.resolve(event.data.token);
            else job.reject(new Error(event.data.error || 'reCAPTCHA failed.'));
            return;
        }

if (event.data.type === 'demandsync-cf7-response') {
            var fetchJob = pendingFetch[event.data.requestId];
            if (!fetchJob) return;
            delete pendingFetch[event.data.requestId];

if (!event.data.ok) {
                fetchJob.reject(new Error(event.data.error || 'CF7 request failed.'));
                return;
            }

var result = event.data.result || {};

if (result.status && result.status !== 'mail_sent' && result.message) {
                result.message += ' [CF7 status: ' + result.status + ']';
            }

fetchJob.resolve({
                ok: true,
                status: 200,
                json: function () { return Promise.resolve(result); }
            });
        }
    });

// Compatibility API for the existing Report code.
    window.grecaptcha = {
        ready: function (callback) {
            if (typeof callback === 'function') callback();
        },

execute: function () {
            return new Promise(function (resolve, reject) {
                var requestId = uid('ds-captcha');
                pendingCaptcha[requestId] = { resolve: resolve, reject: reject };

parent.postMessage({
                    type: 'demandsync-recaptcha-request',
                    requestId: requestId
                }, '*');

setTimeout(function () {
                    if (!pendingCaptcha[requestId]) return;
                    delete pendingCaptcha[requestId];
                    reject(new Error('reCAPTCHA token request timed out.'));
                }, 15000);
            });
        }
    };

// Route only CF7 through the real WordPress parent.
    window.fetch = function (input, init) {
        var url = typeof input === 'string'
            ? input
            : (input && input.url ? input.url : '');

if (url !== CF7_ENDPOINT || !init || !(init.body instanceof FormData)) {
            return NativeFetch(input, init);
        }

return new Promise(function (resolve, reject) {
            var requestId = uid('ds-cf7');
            pendingFetch[requestId] = { resolve: resolve, reject: reject };

var entries = [];
            init.body.forEach(function (value, key) {
                entries.push([key, value]);
            });

parent.postMessage({
                type: 'demandsync-cf7-request',
                requestId: requestId,
                entries: entries
            }, '*');

setTimeout(function () {
                if (!pendingFetch[requestId]) return;
                delete pendingFetch[requestId];
                reject(new Error('CF7 request timed out.'));
            }, 30000);
        });
    };
})();
</script>

</head>
<body>

<div class="report-watermark-overlay" id="reportWatermarkBg">
    <span class="watermark-main">DRAFT - DRAFT - DRAFT - DRAFT - DRAFT</span>
</div>
<div class="report-watermark-strip" id="reportWatermarkStrip" style="display: none;"></div>

<div class="report-page-container" id="pdfReportContent">
    
    <div class="report-header" id="reportHeader">
        <div class="report-title-area">
            <h2 id="report-sector-main-title">DemandSync™ Strategic Diagnostic: <span style="color: var(--avocado);">General Enterprise</span></h2>
            <div class="report-subtitle">Executive Corporate Reality & Operational Value Mirror</div>
        </div>
        <img src="https://newitera.nl/wp-content/uploads/2021/06/newitera-logo-white-uai-258x112.png" alt="NewItera Logo" style="height: 48px; opacity: 0.95;" onerror="this.style.display='none';">
    </div>

<div class="report-slide active-slide" id="rep-slide-1">
        <div class="report-slide-content" style="width:100%;">
            <div class="report-two-col">
                <div class="report-text-block">
                    <h3>The Forecast <em>Accuracy Mirage</em></h3>
                    <p>Most organizations evaluate S&OP effectiveness using <strong>aggregate forecast metrics</strong>. This top-level arithmetic creates a false sense of security, masking structural operational disconnects.</p>
                    <ul class="report-bullet-list">
                        <li>
                            <i class="fa-solid fa-triangle-exclamation"></i>
                            <strong>The Aggregation Trap:</strong> High accuracy at the category/brand level naturally cancels out heavy over- and under-forecasting errors that crash operational stability.
                        </li>
                        <li>
                            <i class="fa-solid fa-arrows-split-up-and-left"></i>
                            <strong>SKU-Location Volatility:</strong> Execution occurs at the shelf and warehouse level. Your actual SKU-level error rate is historically estimated to be <strong><span id="slide1-sku-error">40%</span> higher</strong> than aggregate S&OP assumptions.
                        </li>
                        <li>
                            <i class="fa-solid fa-ban"></i>
                            <strong>Planner Bias Penalty:</strong> Planners routinely over-forecast to secure safety buffers, inadvertently driving systemic stock accumulation and sudden cash locks.
                        </li>
                    </ul>
                </div>
                <div class="report-visual-block">
                    <div class="mirror-grid">
                        <div class="mirror-card executive-avocado">
                            <div class="mirror-card-icon-box"><i class="fa-solid fa-chart-line"></i></div>
                            <div class="mirror-card-content">
                                <h4>What Executive Meetings See</h4>
                                <p>An elegant, smooth, aggregated trend line showing stable 75% to 80% category-level demand matching.</p>
                            </div>
                        </div>
                        <div class="mirror-card highlighted">
                            <div class="mirror-card-icon-box"><i class="fa-solid fa-wave-square"></i></div>
                            <div class="mirror-card-content">
                                <h4>What the Warehouse Feels</h4>
                                <p>Severe volatility, frantic scheduling changes, wrong safety stocks, and sudden emergency re-handling.</p>
                            </div>
                        </div>
                    </div>
                    <div class="report-data-card">
                        <div class="report-card-title">Target Operational Improvement</div>
                        <div class="report-card-value" id="slide1-err-reduction">40%</div>
                        <div class="report-card-desc">Reduction in structural planning errors by substituting manual Excel padding with mathematically synchronized intelligence.</div>
                    </div>
                </div>
            </div>
        </div>
    </div>

<div class="report-slide" id="rep-slide-2">
        <div class="report-slide-content" style="width:100%;">
            <div class="report-two-col">
                <div class="report-text-block">
                    <h3>The Direct Cost of <em>Defensive Padding</em></h3>
                    <p>To shield the business from poor SKU forecasting, the organization acts defensively, keeping massive safety inventories. This safety margin creates immediate balance sheet leakages.</p>
                    <ul class="report-bullet-list">
                        <li>
                            <i class="fa-solid fa-receipt"></i>
                            <strong>Carrying Waste:</strong> Storing <strong id="slide2-total-inv">€7.500.000</strong> in inventory drains your cash. At your loaded carrying rate, you pay <strong id="slide2-holding-cost" style="color: #38bdf8;">€1.650.000</strong> annually on storage, insurance, and degradation.
                        </li>
                        <li>
                            <i class="fa-solid fa-hand-holding-dollar"></i>
                            <strong>Double Indemnity:</strong> Despite excess safety inventory, you still lose <strong id="slide2-stockout-loss">€525.000</strong> in gross margin to stockouts yearly due to carrying the *wrong* items.
                        </li>
                        <li>
                            <i class="fa-solid fa-truck-fast"></i>
                            <strong>Emergency Surcharges:</strong> You burn <strong id="slide2-freight">€250.000</strong> in premium, unplanned, ad-hoc freight expedite fees just to chase delayed shipments.
                        </li>
                    </ul>
                </div>
                <div class="report-visual-block">
                    <div class="report-data-card highlight-card">
                        <div class="report-card-title">Total Yearly Opportunity Leakage</div>
                        <div class="report-card-value" id="slide2-total-leakage">€2.425.000</div>
                        <div class="report-card-desc">Calculated sum of active inventory holding costs, avoidable expedite penalties, and uncaptured stockout sales margins under the Status Quo.</div>
                    </div>
                    <div class="report-data-card secondary">
                        <div class="report-card-title">Monthly Cost of Inaction (COI)</div>
                        <div class="report-card-value" id="slide2-coi-monthly">€202.083</div>
                        <div class="report-card-desc">The structural penalty of delaying deployment. Cash that actively evaporates every 30 days the business operates on manual planning.</div>
                    </div>
                </div>
            </div>
        </div>
    </div>

<div class="report-slide" id="rep-slide-3">
        <div class="report-slide-content" style="width:100%;">
            <div class="report-two-col">
                <div class="report-text-block">
                    <h3>The Strategic <em>Value Path</em></h3>
                    <p>Unifying operational demand alignment doesn't just cut costs—it transforms cash flows. Transitioning to a synchronized mathematical layer yields immediate boardroom impact.</p>
                    <ul class="report-bullet-list">
                        <li>
                            <i class="fa-solid fa-money-bill-transfer"></i>
                            <strong>One-Time Balance Sheet Release:</strong> Releasing defensive safety stocks instantly injects <strong id="slide3-freed-cash" style="color: var(--report-accent-blue);">€1.125.000</strong> back into operating cash reserves.
                        </li>
                        <li>
                            <i class="fa-solid fa-shield-halved"></i>
                            <strong>Structural EBITDA Uplift:</strong> Unlocks <strong id="slide3-annual-savings" style="color: var(--report-accent-blue);">€450.000</strong> in permanent annual cost reductions across logistics operations and gross margins.
                        </li>
                        <li>
                            <i class="fa-solid fa-bolt"></i>
                            <strong>Rapid Self-Funding Project:</strong> With a projected payback of <strong id="slide3-payback">X.X Months</strong>, the implementation pays for itself, self-funding strategic IT modernization.
                        </li>
                    </ul>
                </div>
                <div class="report-visual-block">
                    <div class="report-data-card highlight-card">
                        <div class="report-card-title">Hard EBITDA Contribution (Yearly)</div>
                        <div class="report-card-value" id="slide3-ebitda-val">€450.000</div>
                        <div class="report-card-desc">Permanent EBITDA boost representing structural margin recovery, waste containment, and freight spend discipline.</div>
                    </div>
                    <div class="report-data-card secondary">
                        <div class="report-card-title">Cash-to-Cash Cycle Acceleration</div>
                        <div class="report-card-value" id="slide3-working-cap-val">€1.125.000</div>
                        <div class="report-card-desc">One-time working capital extraction from previously frozen warehouse shelves. Relieves pressures on external corporate credit lines.</div>
                    </div>
                </div>
            </div>
        </div>
    </div>

<div class="report-slide" id="rep-slide-4">
        <div class="report-slide-content" style="width:100%;">
            <div class="report-text-block" style="max-height: none; margin-bottom: 20px;">
                <h3>Next Steps: Assessment & <em>Executive Consultation</em></h3>
                <p>Unlock your organization's full supply chain potential through digital maturity benchmarking and tailored strategic roadmaps.</p>
            </div>
            <div class="assessment-grid">
                <div class="assessment-card">
                    <div>
                        <div class="report-card-title" style="color: var(--avocado);">Interactive Self-Assessment</div>
                        <h4 style="margin: 6px 0 10px 0; font-size: 18px; color: #f9fafb;">Benchmark Your Maturity</h4>
                        <p style="font-size: 13.5px; color: var(--text-muted); line-height: 1.55; margin: 0;">Validate your organizational readiness. Scan the QR-code to initiate an instant maturity assessment against industry standards.</p>
                    </div>
                    <div class="qr-container">
                        <div id="qrcodeCanvas"></div>
                        <div style="font-size: 12px; color: var(--text-muted); line-height: 1.4;">
                            <strong style="color: #f9fafb; display: block; margin-bottom: 2px;">Scan with mobile camera</strong>
                            Opens Microsoft Forms readiness assessment directly.
                        </div>
                    </div>
                </div>
                <div class="assessment-card consult-card">
                    <div>
                        <div class="report-card-title" style="color: var(--report-accent-blue);">Expert Support</div>
                        <h4 style="margin: 6px 0 10px 0; font-size: 18px; color: #f9fafb;">Need Deeper Insights?</h4>
                        <p style="font-size: 13.5px; color: var(--text-muted); line-height: 1.55; margin: 0 0 20px 0;">Connect with our enterprise supply chain strategists to review your diagnostic results, address friction points, and explore a tailored roadmap.</p>
                    </div>
                    <div>
                        <button type="button" class="create-report-btn" onclick="openConsultModal()" style="width: 100%;">
                            <i class="fa-solid fa-calendar-check"></i> Request Executive Briefing
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>

<div class="report-footer" id="pdfReportFooter">
        <div class="report-meta" id="reportFooterMeta">CONFIDENTIAL | DEMANDSYNC™ <span class="app-version-text-upper">V1.3</span></div>
        <div class="report-nav-controls" id="reportNavControls">
            <div class="report-dot-indicators">
                <div class="report-dot active" onclick="jumpToSlide(1)" id="dot-s1"></div>
                <div class="report-dot" onclick="jumpToSlide(2)" id="dot-s2"></div>
                <div class="report-dot" onclick="jumpToSlide(3)" id="dot-s3"></div>
                <div class="report-dot" onclick="jumpToSlide(4)" id="dot-s4"></div>
            </div>
            <button class="report-btn" id="btn-prev-slide" onclick="moveSlide(-1)"><i class="fa-solid fa-arrow-left"></i></button>
            <button class="report-btn" id="btn-next-slide" onclick="moveSlide(1)"><i class="fa-solid fa-arrow-right"></i></button>
            <button class="report-btn share-btn" onclick="openShareModal()"><i class="fa-solid fa-arrow-down"></i> Download</button>
            <a href="ROI Simulator.html" class="report-btn exit-btn"><i class="fa-solid fa-right-from-bracket"></i> Exit</a>
        </div>
    </div>

</div>

<div class="page-external-note">
    Utilize the download option to acquire an executive-grade, watermark-free strategic report tailored for C-level presentation.
</div>

<div class="modal-overlay" id="shareModal" onclick="closeShareModal()">
    <div class="modal-card" onclick="event.stopPropagation()">
        <button class="close-modal-btn" onclick="closeShareModal()">⨉</button>
        <h3>Personalized Strategic Report</h3>
        <div class="modal-body">
            <p style="font-size: 13.5px; line-height: 1.5; margin-bottom: 20px; color: var(--text-muted);">
                Receive your Strategic ROI Presentation without watermarks by email.
            </p>
            
            <form id="shareForm" onsubmit="processShareReport(event)">
                <div style="margin-bottom: 16px;">
                    <label for="inp-email" style="display:block; font-weight:700; font-size:12.5px; margin-bottom:6px; color:#f9fafb; text-transform:uppercase; letter-spacing:0.5px;">
                        Business Email:
                    </label>
                    <input type="email" id="inp-email" required style="width:100%; padding:12px 14px; border-radius:8px; border:1px solid rgba(255,255,255,0.15); background:#0b0f17; color:#f9fafb; font-size:14px; font-family:inherit; outline:none;" onfocus="this.style.borderColor='var(--avocado)'" onblur="this.style.borderColor='rgba(255,255,255,0.15)'">
                </div>
                
                <div id="shareStatus" style="display:none; padding:10px 14px; border-radius:6px; font-size:13.5px; margin-bottom:14px; font-weight:600;"></div>

<div style="display: flex; justify-content: flex-end; gap: 10px; margin-top: 8px;">
                    <button type="button" class="report-btn exit-btn" onclick="closeShareModal()" style="padding: 8px 16px; height: 40px;">Cancel</button>
                    <button type="submit" id="btn-submit-share" class="create-report-btn" style="height: 40px; width: auto; padding: 0 20px;">
                        <i class="fa-solid fa-paper-plane"></i> Email Report
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<div class="modal-overlay" id="consultModal" onclick="closeConsultModal()">
    <div class="modal-card" onclick="event.stopPropagation()">
        <button class="close-modal-btn" onclick="closeConsultModal()">⨉</button>
        <h3>Schedule Executive Briefing</h3>
        <div class="modal-body">
            <p style="font-size: 13.5px; line-height: 1.5; margin-bottom: 20px; color: var(--text-muted);">
                Connect directly with our enterprise supply chain strategists to review your diagnostic results and discuss a tailored implementation roadmap.
            </p>
            
            <form id="consultForm" onsubmit="processConsultRequest(event)">
                <div style="margin-bottom: 14px;">
                    <label for="consult-name" style="display:block; font-weight:700; font-size:12px; margin-bottom:4px; color:#f9fafb; text-transform:uppercase; letter-spacing:0.5px;">Full Name:</label>
                    <input type="text" id="consult-name" required style="width:100%; padding:10px 14px; border-radius:8px; border:1px solid rgba(255,255,255,0.15); background:#0b0f17; color:#f9fafb; font-size:14px; font-family:inherit; outline:none;" onfocus="this.style.borderColor='var(--avocado)'" onblur="this.style.borderColor='rgba(255,255,255,0.15)'">
                </div>
                <div style="margin-bottom: 14px;">
                    <label for="consult-company" style="display:block; font-weight:700; font-size:12px; margin-bottom:4px; color:#f9fafb; text-transform:uppercase; letter-spacing:0.5px;">Company Name:</label>
                    <input type="text" id="consult-company" required style="width:100%; padding:10px 14px; border-radius:8px; border:1px solid rgba(255,255,255,0.15); background:#0b0f17; color:#f9fafb; font-size:14px; font-family:inherit; outline:none;" onfocus="this.style.borderColor='var(--avocado)'" onblur="this.style.borderColor='rgba(255,255,255,0.15)'">
                </div>
                <div style="margin-bottom: 16px;">
                    <label for="consult-email" style="display:block; font-weight:700; font-size:12px; margin-bottom:4px; color:#f9fafb; text-transform:uppercase; letter-spacing:0.5px;">Business Email:</label>
                    <input type="email" id="consult-email" required style="width:100%; padding:10px 14px; border-radius:8px; border:1px solid rgba(255,255,255,0.15); background:#0b0f17; color:#f9fafb; font-size:14px; font-family:inherit; outline:none;" onfocus="this.style.borderColor='var(--avocado)'" onblur="this.style.borderColor='rgba(255,255,255,0.15)'">
                </div>
                
                <div id="consultStatus" style="display:none; padding:10px 14px; border-radius:6px; font-size:13.5px; margin-bottom:14px; font-weight:600;"></div>

<div style="display: flex; justify-content: flex-end; gap: 10px; margin-top: 8px;">
                    <button type="button" class="report-btn exit-btn" onclick="closeConsultModal()" style="padding: 8px 16px; height: 40px;">Cancel</button>
                    <button type="submit" id="btn-submit-consult" class="create-report-btn" style="height: 40px; width: auto; padding: 0 20px;">
                        <i class="fa-solid fa-paper-plane"></i> Confirm Briefing Request
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

const industryBenchmarks = {
        default:    { invRed: 0.15, expRed: 0.40, stockRed: 0.25, errorRed: 40, name: "General Enterprise" },
        fmcg:       { invRed: 0.12, expRed: 0.35, stockRed: 0.30, errorRed: 35, name: "FMCG & Fast-Moving Goods" }, 
        retail:     { invRed: 0.18, expRed: 0.50, stockRed: 0.40, errorRed: 45, name: "Retail & E-Commerce" }, 
        automotive: { invRed: 0.22, expRed: 0.30, stockRed: 0.15, errorRed: 30, name: "Automotive & Heavy Industry" }, 
        pharma:     { invRed: 0.10, expRed: 0.45, stockRed: 0.35, errorRed: 50, name: "Pharma & Life Sciences" }  
    };

const formatEuro = (val) => {
        return new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR', maximumFractionDigits: 0 }).format(val);
    };

function loadReportDataFromURL() {
        const urlParams = new URLSearchParams(window.location.search);
        
        const sector = urlParams.get('sector') || 'default';
        const revenue = parseFloat(urlParams.get('revenue')) || 50000000;
        const margin = parseFloat(urlParams.get('margin')) / 100 || 0.35;
        const inventory = parseFloat(urlParams.get('inventory')) || 7500000;
        const carryingRate = parseFloat(urlParams.get('carrying')) / 100 || 0.22;
        const expedite = parseFloat(urlParams.get('expedite')) || 250000;
        const stockoutRate = parseFloat(urlParams.get('stockout')) / 100 || 0.03;

const bench = industryBenchmarks[sector] || industryBenchmarks['default'];

// Calculations
        const currentCarryingCost = inventory * carryingRate;
        const currentStockoutLoss = revenue * stockoutRate * margin;
        const totalOpportunityLeakage = currentCarryingCost + expedite + currentStockoutLoss;

const freedWorkingCapital = inventory * bench.invRed;
        const annualCarryingSavings = freedWorkingCapital * carryingRate;
        const annualLogisticsSavings = expedite * bench.expRed;
        const annualMarginRecovered = revenue * stockoutRate * bench.stockRed * margin;
        const totalAnnualHardSavings = annualCarryingSavings + annualLogisticsSavings + annualMarginRecovered;

const softwareLicence = Math.max(30000, Math.min(160000, revenue * 0.0007));
        const implementationInvestment = softwareLicence * 2.35;
        const paybackMonths = totalAnnualHardSavings > 0 ? (implementationInvestment / totalAnnualHardSavings) * 12 : 0;
        const costOfInactionMonthly = totalAnnualHardSavings / 12;

// Populate DOM elements
        document.getElementById('report-sector-main-title').innerHTML = `DemandSync™ Strategic Diagnostic: <span style="color: var(--avocado);">${bench.name}</span>`;
        document.getElementById('slide1-sku-error').innerText = `${bench.errorRed}%`;
        document.getElementById('slide1-err-reduction').innerText = `${bench.errorRed}%`;

document.getElementById('slide2-total-inv').innerText = formatEuro(inventory);
        document.getElementById('slide2-holding-cost').innerText = formatEuro(currentCarryingCost);
        document.getElementById('slide2-stockout-loss').innerText = formatEuro(currentStockoutLoss);
        document.getElementById('slide2-freight').innerText = formatEuro(expedite);
        document.getElementById('slide2-total-leakage').innerText = formatEuro(totalOpportunityLeakage);
        document.getElementById('slide2-coi-monthly').innerText = `${formatEuro(costOfInactionMonthly)} / mo`;

document.getElementById('slide3-freed-cash').innerText = formatEuro(freedWorkingCapital);
        document.getElementById('slide3-annual-savings').innerText = formatEuro(totalAnnualHardSavings);
        document.getElementById('slide3-payback').innerText = `${paybackMonths.toFixed(1)} Months`;
        document.getElementById('slide3-ebitda-val').innerText = formatEuro(totalAnnualHardSavings);
        document.getElementById('slide3-working-cap-val').innerText = formatEuro(freedWorkingCapital);
    }

function moveSlide(dir) {
        let target = currentSlideIndex + dir;
        if (target >= 1 && target <= totalSlides) {
            jumpToSlide(target);
        }
    }

function openShareModal() { document.getElementById('shareStatus').style.display = 'none'; document.getElementById('shareModal').classList.add('active'); }
    function closeShareModal() { document.getElementById('shareModal').classList.remove('active'); }

function openConsultModal() { document.getElementById('consultStatus').style.display = 'none'; document.getElementById('consultModal').classList.add('active'); }
    function closeConsultModal() { document.getElementById('consultModal').classList.remove('active'); }

// Genereer QR-code via qrcode.min.js
    function renderQRCode() {
        const container = document.getElementById('qrcodeCanvas');
        if (container && container.childElementCount === 0) {
            new QRCode(container, {
                text: "https://forms.cloud.microsoft/pages/responsepage.aspx?id=it5xF_U7Ukit4EptP74FVxZ8ROgtBe9Ll76zVZjcnqFUMElEUEM1ODBQNEFaQ0ZKTkxaWU5VTjI0Ri4u&route=shorturl",
                width: 95,
                height: 95,
                colorDark: "#0b0f17",
                colorLight: "#f9fafb",
                correctLevel: QRCode.CorrectLevel.M
            });
        }
    }

async function processConsultRequest(event) {
        event.preventDefault();
        const name = document.getElementById('consult-name').value.trim();
        const company = document.getElementById('consult-company').value.trim();
        const email = document.getElementById('consult-email').value.trim();
        const statusDiv = document.getElementById('consultStatus');
        const submitBtn = document.getElementById('btn-submit-consult');

if (!name || !company || !email) return;

statusDiv.style.display = 'block';
        statusDiv.style.backgroundColor = 'rgba(88, 130, 1, 0.15)';
        statusDiv.style.color = 'var(--avocado)';
        statusDiv.innerHTML = '<i class="fa-solid fa-spinner fa-spin"></i> Submitting request...';
        submitBtn.disabled = true;

try {
            const recaptchaSiteKey = '6LfsmXgtAAAAAG_o-JNY1_EDjG9nFnKOg3UNeZbI';
            const recaptchaToken = await new Promise((resolve, reject) => {
                if (typeof grecaptcha === 'undefined') {
                    reject(new Error('reCAPTCHA failed.'));
                    return;
                }
                grecaptcha.ready(async () => {
                    try {
                        const token = await grecaptcha.execute(recaptchaSiteKey, { action: 'contact_form' });
                        resolve(token);
                    } catch (err) {
                        reject(err);
                    }
                });
            });

const formData = new FormData();
            formData.append('_wpcf7', '158719');
            formData.append('_wpcf7_unit_tag', 'wpcf7-f158719-p1-o1');
            formData.append('_wpcf7_locale', 'nl_NL');
            formData.append('_wpcf7_recaptcha_response', recaptchaToken);
            formData.append('your-name', name);
            formData.append('your-company', company);
            formData.append('your-email', email);
            formData.append('request-type', 'Executive Briefing Consultation');

const apiUrl = 'https://newitera.nl/wp-json/contact-form-7/v1/contact-forms/158719/feedback';
            const cf7Response = await fetch(apiUrl, {method: 'POST', body: formData});
            const cf7Result = await cf7Response.json();

if (cf7Result.status !== 'mail_sent') {
                let errorMsg = cf7Result.message || 'Failed to submit request';
                if (cf7Result.invalid_fields && cf7Result.invalid_fields.length > 0) {
                    errorMsg += ' (' + cf7Result.invalid_fields.map(f => f.message).join(', ') + ')';
                }
                throw new Error(errorMsg);
            }

statusDiv.style.backgroundColor = 'rgba(88, 130, 1, 0.15)';
            statusDiv.style.color = 'var(--avocado)';
            statusDiv.innerHTML = `<i class="fa-solid fa-circle-check"></i> <strong>Requested!</strong> We will contact <u>${email}</u> within 24 hours.`;
            submitBtn.disabled = false;

setTimeout(() => { closeConsultModal(); }, 3500);

} catch (err) {
            console.error("Verzendfout:", err);
            statusDiv.style.backgroundColor = 'rgba(239, 68, 68, 0.15)';
            statusDiv.style.color = '#dc2626';
            statusDiv.innerHTML = `<i class="fa-solid fa-triangle-exclamation"></i> Failed: ${err.message || 'Try again'}`;
            submitBtn.disabled = false;
        }
    }

async function processShareReport(event) {
        event.preventDefault();
        const email = document.getElementById('inp-email').value.trim();
        const statusDiv = document.getElementById('shareStatus');
        const submitBtn = document.getElementById('btn-submit-share');

if (!email) return;

statusDiv.style.display = 'block';
        statusDiv.style.backgroundColor = 'rgba(56, 189, 248, 0.15)';
        statusDiv.style.color = '#38bdf8';
        statusDiv.innerHTML = '<i class="fa-solid fa-spinner fa-spin"></i> Generating and verifying...';
        submitBtn.disabled = true;

try {
            const recaptchaSiteKey = '6LfsmXgtAAAAAG_o-JNY1_EDjG9nFnKOg3UNeZbI';
            
            const recaptchaToken = await new Promise((resolve, reject) => {
                if (typeof grecaptcha === 'undefined') {
                    reject(new Error('reCAPTCHA failed.'));
                    return;
                }
                grecaptcha.ready(async () => {
                    try {
                        const token = await grecaptcha.execute(recaptchaSiteKey, { action: 'contact_form' });
                        resolve(token);
                    } catch (err) {
                        reject(err);
                    }
                });
            });

const navControls = document.getElementById('reportNavControls');
            navControls.style.display = 'none';

const slides = document.querySelectorAll('.report-slide');
            const originalSlide = currentSlideIndex;

const { jsPDF } = window.jspdf;
            const pdf = new jsPDF({ orientation: 'landscape', unit: 'px', format: [1280, 720] });

for (let idx = 0; idx < slides.length; idx++) {
                const slide = slides[idx];

const pageBox = document.createElement('div');
                pageBox.style.width = '1280px';
                pageBox.style.height = '720px';
                pageBox.style.backgroundColor = 'var(--report-bg)';
                pageBox.style.padding = '44px 64px 36px 64px';
                pageBox.style.boxSizing = 'border-box';
                pageBox.style.display = 'flex';
                pageBox.style.flexDirection = 'column';
                pageBox.style.justifyContent = 'space-between';
                pageBox.style.position = 'fixed';
                pageBox.style.top = '0';
                pageBox.style.left = '-9999px';
                pageBox.style.zIndex = '-9999';

const headerClone = document.getElementById('reportHeader').cloneNode(true);
                const slideClone = slide.cloneNode(true);
                slideClone.style.display = 'block';

pageBox.appendChild(headerClone);
                pageBox.appendChild(slideClone);
                pageBox.appendChild(footerClone);
                document.body.appendChild(pageBox);

const canvas = await html2canvas(pageBox, { 
                    scale: 3, 
                    useCORS: true, 
                    logging: false, 
                    width: 1280, 
                    height: 720 
                });
                document.body.removeChild(pageBox);

const imgData = canvas.toDataURL('image/jpeg');

if (idx > 0) {
                    pdf.addPage([1280, 720], 'landscape');
                }
                pdf.addImage(imgData, 'JPEG', 0, 0, 1280, 720);
            }

const pdfBlob = pdf.output('blob');
            const fileName = `DemandSync_Report_${email.split('@')[0]}.pdf`;

const formData = new FormData();
            formData.append('_wpcf7', '158719');
            formData.append('_wpcf7_unit_tag', 'wpcf7-f158719-p1-o1');
            formData.append('_wpcf7_locale', 'nl_NL');
            formData.append('_wpcf7_recaptcha_response', recaptchaToken);
            
            formData.append('your-email', email);
            formData.append('report-pdf', pdfBlob, fileName);

if (cf7Result.status !== 'mail_sent') {
                let errorMsg = cf7Result.message || 'Failed to send via email';
                if (cf7Result.invalid_fields && cf7Result.invalid_fields.length > 0) {
                    errorMsg += ' (' + cf7Result.invalid_fields.map(f => f.message).join(', ') + ')';
                }
                throw new Error(errorMsg);
            }

navControls.style.display = 'flex';
            jumpToSlide(originalSlide);

statusDiv.style.backgroundColor = 'rgba(88, 130, 1, 0.15)';
            statusDiv.style.color = 'var(--avocado)';
            statusDiv.innerHTML = `<i class="fa-solid fa-circle-check"></i> <strong>Sent!</strong> Report successfully sent to <u>${email}</u>.`;
            submitBtn.disabled = false;

setTimeout(() => { closeShareModal(); }, 3000);

} catch (err) {
            console.error("Verzendfout:", err);
            statusDiv.style.backgroundColor = 'rgba(239, 68, 68, 0.15)';
            statusDiv.style.color = '#dc2626';
            statusDiv.innerHTML = `<i class="fa-solid fa-triangle-exclamation"></i> Failed to send: ${err.message || 'Try again'}`;
            
            document.getElementById('reportNavControls').style.display = 'flex';
            submitBtn.disabled = false;
        }
    }

// Initialize report data and QR code on load
    loadReportDataFromURL();
    renderQRCode();
</script>

event.preventDefault();
        event.stopImmediatePropagation();

parent.postMessage({
            type: 'demandsync-back-to-simulator'
        }, '*');
    }, true);
})();
</script>

</body>
</html>