<!DOCTYPE html>

<head>

<title>DemandSync™ ROI Simulator & Strategic Report</title>

<!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>
    
    <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>
    
    
    <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; 
        }

.app-view-wrapper {
            width: 300vw; 
            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;
        }

.industry-selector {
            background: rgba(255, 255, 255, 0.07);
            color: #ffffff;
            border: 2px solid rgba(88, 130, 1, 0.8);
            padding: 12px 24px;
            border-radius: 8px;
            font-size: 15px; 
            font-weight: 700;
            cursor: pointer;
            outline: none;
            backdrop-filter: blur(4px);
            transition: all 0.2s ease;
            margin-right: 24px; 
        }

.industry-selector option {
            background-color: var(--pine-green);
            color: #ffffff;
        }

.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); }

/* ========================================== */
        /* STRATEGIC PRESENTATION REPORT STYLES       */
        /* ========================================== */
        
        .report-page-container {
            width: 1280px;
            height: 720px;
            background-color: var(--report-bg);
            border-radius: 24px;
            padding: 40px 64px 32px 64px; 
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            box-shadow: 0 25px 60px rgba(15, 23, 42, 0.3); 
            border: 1px solid rgba(255, 255, 255, 0.08);
            position: relative;
            overflow: hidden;
            color: var(--report-text-light);
        }

.report-page-container::before {
            content: '';
            position: absolute;
            top: -10%;
            right: -10%;
            width: 50%;
            height: 70%;
            background: radial-gradient(circle, rgba(56, 189, 248, 0.05) 0%, transparent 70%);
            pointer-events: none;
            z-index: 0;
        }

.report-watermark-overlay {
            position: absolute;
            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: 1; 
            opacity: 0.28; 
            display: flex;
            flex-direction: column;
            gap: 12px;
            transition: opacity 0.2s ease; 
        }

.watermark-main {
            font-size: 64px; 
            font-weight: 800;
            letter-spacing: 5px;
            color: rgba(255, 255, 255, 0.95); 
            line-height: 1.1;
            text-shadow: 0px 4px 20px rgba(15, 23, 42, 1); 
        }

.report-watermark-strip {
            position: absolute;
            bottom: 84px; 
            right: 64px;  
            text-align: right;
            pointer-events: none;
            user-select: none;
            -webkit-user-select: none;
            z-index: 5; 
            opacity: 0.85; 
            transition: opacity 0.2s ease;
        }

.watermark-sub {
            font-size: 13.5px; 
            font-weight: 800;
            letter-spacing: 1.5px;
            color: #22d3ee; 
            text-transform: uppercase;
            text-shadow: 0px 2px 8px rgba(15, 23, 42, 0.95);
        }

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

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

.report-title-area h2 span {
            color: var(--report-accent-blue);
            font-weight: 600;
        }

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

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

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

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

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

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

.report-text-block p {
            font-size: 17px; 
            line-height: 1.65;
            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: 32px;
            margin-bottom: 18px;
            font-size: 16px; 
            line-height: 1.65; 
            color: var(--report-text-light);
        }

.report-bullet-list li i {
            position: absolute;
            left: 0;
            top: 4px;
            color: var(--report-accent-green);
            font-size: 16px;
        }

.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: rgba(30, 41, 59, 0.5);
            border: 1px solid var(--report-border);
            border-radius: 16px;
            padding: 24px;
            position: relative;
            overflow: hidden;
            backdrop-filter: blur(8px);
        }

.report-data-card::before {
            content: '';
            position: absolute;
            top: 0; left: 0; width: 4px; height: 100%;
            background: var(--report-accent-green);
        }

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

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

.report-card-value {
            font-size: 34px;
            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-green);
        }

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

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

.mirror-card {
            background: rgba(255, 255, 255, 0.03);
            border: 1px solid rgba(255, 255, 255, 0.06);
            border-radius: 14px;
            padding: 20px;
            text-align: center;
            transition: all 0.3s ease;
        }

.mirror-card.highlighted {
            background: rgba(163, 230, 53, 0.04);
            border-color: rgba(163, 230, 53, 0.15);
        }

.mirror-card-icon {
            font-size: 22px;
            color: var(--report-accent-blue);
            margin-bottom: 12px;
        }

.mirror-card.highlighted .mirror-card-icon {
            color: var(--report-accent-green);
        }

.mirror-card h4 {
            margin: 0 0 6px 0;
            font-size: 15px;
            font-weight: 700;
            color: #ffffff;
        }

.mirror-card p {
            margin: 0;
            font-size: 13.5px; 
            color: var(--report-text-muted);
            line-height: 1.5;
        }

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

.report-meta {
            font-size: 12px;
            letter-spacing: 0.5px;
            color: var(--report-text-muted);
            font-weight: 500;
        }

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

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

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

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

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

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

.report-btn.share-btn {
            background: rgba(56, 189, 248, 0.1);
            border-color: rgba(56, 189, 248, 0.2);
            color: var(--report-accent-blue);
        }
        .report-btn.share-btn:hover {
            background: var(--report-accent-blue);
            color: #0f172a;
            border-color: var(--report-accent-blue);
        }

.report-btn.exit-btn {
            background: rgba(239, 68, 68, 0.08);
            border-color: rgba(239, 68, 68, 0.15);
            color: #fca5a5;
        }

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

.report-slide {
            display: none;
            width: 100%;
            height: 100%; 
        }

.report-slide.active-slide {
            display: block;
        }
    </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">
                    <select class="industry-selector" id="inp-industry">
                        <option value="default">Select Industry / Sector</option>
                        <option value="fmcg">FMCG & Fast-Moving Goods</option>
                        <option value="retail">Retail & E-Commerce</option>
                        <option value="automotive">Automotive & Heavy Industry</option>
                        <option value="pharma">Pharma & Life Sciences</option>
                    </select>
                    <img decoding="async" 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">Gartner & APQC data shows that average forecast errors and dynamics vary significantly by sector:</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>
                            <button class="create-report-btn" onclick="togglePageFlow(2)">
                                <span>Present Report</span>
                                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20M4 19.5A2.5 2.5 0 0 0 6.5 22H20M4 19.5V3a1 1 0 0 1 1-1h13a1 1 0 0 1 1 1v14.5a1.5 1.5 0 0 1-1.5 1.5L4 19.5z"/></svg>
                            </button>
                        </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 class="page" style="background-color: var(--bg-main);">
        <div class="report-page-container" id="pdfReportContent">
            
            
            <div class="report-watermark-overlay" id="reportWatermarkBg">
                <span class="watermark-main">STRICTLY CONFIDENTIAL - NEWITERA</span>
            </div>

<div class="report-watermark-strip" id="reportWatermarkStrip">
                <span class="watermark-sub">USE SHARE OPTION FOR YOUR WATERMARK FREE PERSONALIZED REPORT</span>
            </div>
            
            <div class="report-header" id="reportHeader">
                <div class="report-title-area">
                    <h2 id="report-sector-main-title">DemandSync™ Strategic Diagnostic: <span>FMCG</span></h2>
                    <div class="report-subtitle">Corporate Reality & Operational Value Mirror</div>
                </div>
                <img decoding="async" src="https://newitera.nl/wp-content/uploads/2021/06/newitera-logo-white-uai-258x112.png" alt="NewItera Logo" style="height: 46px; opacity: 0.95;">
            </div>

<div class="report-slide active-slide" id="rep-slide-1">
                <div class="report-slide-content">
                    <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">
                                    <div class="mirror-card-icon"><i class="fa-solid fa-chart-line"></i></div>
                                    <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 class="mirror-card highlighted">
                                    <div class="mirror-card-icon"><i class="fa-solid fa-wave-square"></i></div>
                                    <h4>What the Warehouse Feels</h4>
                                    <p>Severe volatility, frantic scheduling changes, wrong safety stocks, and sudden emergency re-handling.</p>
                                </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">
                    <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: var(--report-accent-blue);">€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">
                    <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-green);">€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-green);">€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-footer" id="pdfReportFooter">
                <div class="report-meta" id="reportFooterMeta">CONFIDENTIAL | GENERATED VIA DEMANDSYNC™ <span class="app-version-text-upper"></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>
                    <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-share-nodes"></i> Share</button>
                    <button class="report-btn exit-btn" onclick="togglePageFlow(0)"><i class="fa-solid fa-right-from-bracket"></i> Exit</button>
                </div>
            </div>

</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>

<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: 14.5px; line-height: 1.5; margin-bottom: 20px; color: var(--text-main);">
                Receive your Strategic ROI Presentation without watermarks by email.
            </p>
            
            <form id="shareForm" onsubmit="processShareReport(event)">
                <div style="margin-bottom: 20px;">
                    <label for="inp-email" style="display:block; font-weight:700; font-size:13.5px; margin-bottom:8px; color:var(--vibrant-blue);">
                        Business Email:
                    </label>
                    <input type="email" id="inp-email" required placeholder="name@company.com" style="width:100%; padding:14px; border-radius:10px; border:2px solid var(--border-color); font-size:15px; font-family:inherit; outline:none;" onfocus="this.style.borderColor='var(--avocado)'" onblur="this.style.borderColor='var(--border-color)'">
                </div>
                
                <div id="shareStatus" style="display:none; padding:12px 16px; border-radius:8px; font-size:14px; margin-bottom:16px; font-weight:600;"></div>

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

const industryBenchmarks = {
        default:    { invRed: 0.15, expRed: 0.40, stockRed: 0.25, errorRed: 40, revenue: 50000000, margin: 35, inventory: 7500000, carrying: 22, expedite: 250000, stockout: 3, name: "General Enterprise" },
        fmcg:       { invRed: 0.12, expRed: 0.35, stockRed: 0.30, errorRed: 35, revenue: 35000000, margin: 28, inventory: 4800000, carrying: 24, expedite: 180000, stockout: 4, name: "FMCG & Fast-Moving Goods" }, 
        retail:     { invRed: 0.18, expRed: 0.50, stockRed: 0.40, errorRed: 45, revenue: 20000000, margin: 42, inventory: 3600000, carrying: 21, expedite: 120000, stockout: 5, name: "Retail & E-Commerce" }, 
        automotive: { invRed: 0.22, expRed: 0.30, stockRed: 0.15, errorRed: 30, revenue: 65000000, margin: 18, inventory: 14000000, carrying: 25, expedite: 450000, stockout: 2, name: "Automotive & Heavy Industry" }, 
        pharma:     { invRed: 0.10, expRed: 0.45, stockRed: 0.35, errorRed: 50, revenue: 40000000, margin: 65, inventory: 9000000, carrying: 28, expedite: 300000, stockout: 3, name: "Pharma & Life Sciences" }  
    };

const modalContent = {
        0: {
            title: "Inventory Holding Waste",
            html: `<p><strong>Definition:</strong> Total financial waste tied up in excess safety stock and inventory padding due to high forecast uncertainty.</p>
                   <strong>Cost Drivers & Factors:</strong>
                   <ul>
                       <li><strong>Capital Costs (~10-15%):</strong> Tied-up cash flow that cannot be deployed for strategic business growth.</li>
                       <li><strong>Storage Costs (~4-7%):</strong> Facility rent, utilities, physical handling, and warehouse labor.</li>
                       <li><strong>Risk Costs (~3-6%):</strong> Expiry dates, product degradation, obsolescence, and material write-offs.</li>
                       <li><strong>Insurance & Taxes (~1-2%):</strong> Premiums scaled across the total capital value stored in the warehouse.</li>
                   </ul>
                   <p><em>Calculation: Current Inventory Value × Annual Carrying Cost Rate</em></p>`
        },
        1: {
            title: "Premium Freight Spend",
            html: `<p><strong>Definition:</strong> Unplanned expedited shipping fees, air freight, or ad-hoc couriers utilized to resolve sudden material or stock shortages.</p>
                   <strong>Cost Drivers & Factors:</strong>
                   <ul>
                       <li><strong>Ad-Hoc Premium Surcharges:</strong> Non-contracted emergency rates driven by panic-buying constraints.</li>
                       <li><strong>Inefficient Load Factors:</strong> Dispatching half-empty trucks because arrival speed outweighs route consolidation.</li>
                       <li><strong>Accelerated Transport Modes:</strong> Forced utilization of overnight road or air delivery instead of cheaper ocean/intermodal options.</li>
                   </ul>
                   <p><em>Calculation: Total annual ad-hoc logistics freight expedite fees. DemandSync™ preempts these via early horizon alignment.</em></p>`
        },
        2: {
            title: "Lost Stockout Margin",
            html: `<p><strong>Definition:</strong> Uncaptured gross margin that evaporates when a customer tries to purchase a product that is currently out of stock.</p>
                   <strong>Cost Drivers & Factors:</strong>
                   <ul>
                       <li><strong>Direct Revenue Leakage:</strong> Immediate demand loss as the buyer turns directly to a competitor's portfolio.</li>
                       <li><strong>Margin Asymmetry:</strong> Inventory shortages frequently strike volatile, high-margin SKU lines.</li>
                       <li><strong>Contractual Service Penalties:</strong> Tight OTIF (On-Time In-Full) financial claims or commercial retail fines.</li>
                   </ul>
                   <p><em>Calculation: Annual Revenue × Stock-out Rate (%) × Gross Margin (%)</em></p>`
        }
    };

const sliderTextContent = {
        revenue: {
            title: "Annual Revenue",
            html: `<p><strong>Definition:</strong> The total gross sales generated by the enterprise within a fiscal year before deductions.</p>
                   <p><strong>Strategic Relevance:</strong> Serves as the foundation scale factor. High revenue baselines magnify the absolute financial impacts of small improvements in stock levels and availability metrics.</p>`
        },
        margin: {
            title: "Average Gross Margin (%)",
            html: `<p><strong>Definition:</strong> The percentage of total sales revenue that the company retains after incurring the direct costs associated with producing or purchasing the goods sold.</p>
                   <p><strong>Strategic Relevance:</strong> Directly defines the cost of a stock-out. High-margin profiles cause exponential profit leakages when availability gaps occur.</p>`
        },
        inventory: {
            title: "Current Total Inventory Value",
            html: `<p><strong>Definition:</strong> The cumulative book value (at cost) of all raw materials, work-in-progress (WIP), and finished goods sitting inside your supply chain facilities.</p>
                   <p><strong>Strategic Relevance:</strong> Represents the frozen capital target. Decreasing planning margins safely releases a fixed percentage of this cash directly back into operating liquidity.</p>`
        },
        carrying: {
            title: "Inventory Carrying Cost Rate",
            html: `<p><strong>Definition:</strong> The fully loaded annual rate representing what it truly costs an organization to hold physical stock (expressed as a percentage of total stock value).</p>
                   <p><strong>Strategic Relevance:</strong> Covers storage, opportunity costs of frozen capital, scrap, degradation, and logistics handling. Standard industries track this heavily between 18% and 30% per annum.</p>`
        },
        expedite: {
            title: "Annual Freight Expedite Fees",
            html: `<p><strong>Definition:</strong> Total aggregated annual costs paid out to premium logistics carriers for rush transport, ad-hoc hot-shots, and urgent courier tracking.</p>
                   <p><strong>Strategic Relevance:</strong> Direct operational friction cost. These fees are deployed defensively to mask underlying scheduling, routing, and demand alignment blind spots.</p>`
        },
        stockout: {
            title: "Revenue Leakage Rate from Stock-outs",
            html: `<p><strong>Definition:</strong> The estimated percentage of potential total customer orders that fail to materialize or close purely due to lack of immediate item availability.</p>
                   <p><strong>Strategic Relevance:</strong> Tracks directly into competitive churn. In B2B or digital retail environments, an unfulfilled item often causes the transaction to shift instantly to a competitor.</p>`
        }
    };

const inputs = {
        revenue: document.getElementById('inp-revenue'),
        margin: document.getElementById('inp-margin'),
        inventory: document.getElementById('inp-inventory'),
        carrying: document.getElementById('inp-carrying'),
        expedite: document.getElementById('inp-expedite'),
        stockout: document.getElementById('inp-stockout'),
        industry: document.getElementById('inp-industry')
    };

const labels = {
        revenue: document.getElementById('lbl-revenue'),
        margin: document.getElementById('lbl-margin'),
        inventory: document.getElementById('lbl-inventory'),
        carrying: document.getElementById('lbl-carrying'),
        expedite: document.getElementById('lbl-expedite'),
        stockout: document.getElementById('lbl-stockout')
    };

const kpis = {
        workingCapital: document.getElementById('kpi-working-capital'),
        annualSavings: document.getElementById('kpi-annual-savings'),
        payback: document.getElementById('kpi-payback'),
        forecastOpt: document.getElementById('kpi-forecast-opt'),
        descCapital: document.getElementById('desc-working-capital')
    };

let industryChanging = false;
    let currentSlideIndex = 1;

function togglePageFlow(pageIndex) {
        document.getElementById('appPortal').style.transform = `translateX(-${pageIndex * 100}vw)`;
    }

function openModal(index) {
        const content = modalContent[index];
        if (content) {
            document.getElementById('modalTitle').innerHTML = content.title;
            document.getElementById('modalBody').innerHTML = content.html;
            document.getElementById('infoModal').classList.add('active');
        }
    }

function openSliderTextModal(key) {
        const content = sliderTextContent[key];
        if (content) {
            document.getElementById('modalTitle').innerHTML = content.title;
            document.getElementById('modalBody').innerHTML = content.html;
            document.getElementById('infoModal').classList.add('active');
        }
    }

/* ====================================================== */
/* CREATE PDF AND HAND OVER TO WORDPRESS PARENT           */
/* ====================================================== */

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 = '#0284c7';
    statusDiv.innerHTML =
        '<i class="fa-solid fa-spinner fa-spin"></i> Generating your report...';

submitBtn.disabled = true;

try {

const bgWatermark = document.getElementById('reportWatermarkBg');
        const stripWatermark = document.getElementById('reportWatermarkStrip');
        const navControls = document.getElementById('reportNavControls');

bgWatermark.style.display = 'none';
        stripWatermark.style.display = 'none';
        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 = '40px 64px 32px 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';

const footerClone = document.createElement('div');
            footerClone.className = 'report-footer';
            footerClone.style.height = '50px';

footerClone.innerHTML = `
                <div class="report-meta">
                    CONFIDENTIAL | GENERATED VIA DEMANDSYNC™ ${appVersion.toUpperCase()}
                </div>

<div class="report-meta">
                    PAGE ${idx + 1} OF 3
                </div>
            `;

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',
                0.95
            );

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

pdf.addImage(
                imgData,
                'JPEG',
                0,
                0,
                1280,
                720
            );
        }

/* Herstel normale presentatie */

bgWatermark.style.display = 'flex';
        stripWatermark.style.display = 'block';
        navControls.style.display = 'flex';

jumpToSlide(originalSlide);

/* PDF maken */

const pdfBlob = pdf.output('blob');

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

statusDiv.innerHTML =
            '<i class="fa-solid fa-spinner fa-spin"></i> Sending your report...';

/*
         * Stuur PDF + email naar de echte
         * WordPress pagina buiten het iframe.
         */

const parentOrigin = window.parent.location.origin;

window.parent.postMessage({
            type: 'DEMANDSYNC_SEND_REPORT',
            email: email,
            pdfBlob: pdfBlob,
            fileName: fileName
        }, parentOrigin);

} catch (err) {

console.error('PDF generation error:', err);

document.getElementById('reportWatermarkBg').style.display = 'flex';
        document.getElementById('reportWatermarkStrip').style.display = 'block';
        document.getElementById('reportNavControls').style.display = 'flex';

statusDiv.style.backgroundColor =
            'rgba(239, 68, 68, 0.15)';

statusDiv.style.color = '#dc2626';

statusDiv.innerHTML =
            '<i class="fa-solid fa-triangle-exclamation"></i> ' +
            'Report generation failed: ' +
            (err.message || 'Unknown error');

submitBtn.disabled = false;
    }
}

/* ====================================================== */
/* RECEIVE RESULT FROM WORDPRESS                          */
/* ====================================================== */

window.addEventListener('message', function(event) {

if (event.origin !== window.parent.location.origin) {
        return;
    }

if (
        !event.data ||
        event.data.type !== 'DEMANDSYNC_SEND_RESULT'
    ) {
        return;
    }

const statusDiv =
        document.getElementById('shareStatus');

const submitBtn =
        document.getElementById('btn-submit-share');

if (event.data.success) {

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-circle-check"></i> ' +
            '<strong>Sent!</strong> Your personalized report has been emailed successfully.';

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

} else {

statusDiv.style.display = 'block';

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: ' +
            (event.data.message || 'Please try again.');
    }

submitBtn.disabled = false;
});

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

function updateBenchmarkUI(selectedSector) {
        document.querySelectorAll('.sector-box').forEach(box => box.classList.remove('active'));
        const activeBox = document.getElementById(`box-${selectedSector}`);
        if (activeBox) activeBox.classList.add('active');
    }

function selectSectorFromBlock(sectorId) {
        inputs.industry.value = sectorId;
        inputs.industry.dispatchEvent(new Event('change'));
    }

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

function updateVersionText() {
        document.querySelectorAll('.app-version-text').forEach(el => el.innerText = appVersion);
        document.querySelectorAll('.app-version-text-upper').forEach(el => el.innerText = appVersion.toUpperCase());
    }

function recalculateModel() {
        updateVersionText();
        const selectedInd = inputs.industry.value;
        const bench = industryBenchmarks[selectedInd] || industryBenchmarks['default'];

updateBenchmarkUI(selectedInd);

if (industryChanging && selectedInd !== 'default') {
            inputs.revenue.value = bench.revenue;
            inputs.margin.value = bench.margin;
            inputs.inventory.value = bench.inventory;
            inputs.carrying.value = bench.carrying;
            inputs.expedite.value = bench.expedite;
            inputs.stockout.value = bench.stockout;
        }

const rev = parseFloat(inputs.revenue.value);
        const margin = parseFloat(inputs.margin.value) / 100;
        const inv = parseFloat(inputs.inventory.value);
        const carryingRate = parseFloat(inputs.carrying.value) / 100;
        const exp = parseFloat(inputs.expedite.value);
        const stockoutRate = parseFloat(inputs.stockout.value) / 100;

labels.revenue.innerText = formatEuro(rev);
        labels.margin.innerText = inputs.margin.value + '%';
        labels.inventory.innerText = formatEuro(inv);
        labels.carrying.innerText = inputs.carrying.value + '%';
        labels.expedite.innerText = formatEuro(exp);
        labels.stockout.innerText = inputs.stockout.value + '%';

const currentCarryingCost = inv * carryingRate;
        const currentStockoutLoss = rev * stockoutRate * margin;

const freedWorkingCapital = inv * bench.invRed;
        const annualCarryingSavings = freedWorkingCapital * carryingRate;
        const annualLogisticsSavings = exp * bench.expRed;
        const annualMarginRecovered = rev * stockoutRate * bench.stockRed * margin;

const totalAnnualHardSavings = annualCarryingSavings + annualLogisticsSavings + annualMarginRecovered;
        const totalOpportunityLeakage = currentCarryingCost + exp + currentStockoutLoss;
         
        const softwareLicence = Math.max(30000, Math.min(160000, rev * 0.0007));
        const implementationInvestment = softwareLicence * 2.35; 
         
        const paybackMonths = totalAnnualHardSavings > 0 ? (implementationInvestment / totalAnnualHardSavings) * 12 : 0;
        const costOfInactionMonthly = totalAnnualHardSavings / 12;

kpis.workingCapital.innerText = formatEuro(freedWorkingCapital);
        kpis.descCapital.innerText = `Freed potential capital via ${(bench.invRed * 100).toFixed(0)}% reduction in safety stock`;
        kpis.annualSavings.innerText = formatEuro(totalAnnualHardSavings);
        kpis.forecastOpt.innerText = bench.errorRed + '%';
        kpis.payback.innerText = paybackMonths.toFixed(1) + ' Months';

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);

roiChart.data.datasets[0].data = [currentCarryingCost, exp, currentStockoutLoss];
        roiChart.data.datasets[1].data = [currentCarryingCost - annualCarryingSavings, exp - annualLogisticsSavings, currentStockoutLoss - annualMarginRecovered];
        roiChart.update();
    }

Object.keys(inputs).forEach(key => {
        if (key !== 'industry') {
            inputs[key].addEventListener('input', () => {
                industryChanging = false;
                recalculateModel();
            });
        }
    });
    
    inputs.industry.addEventListener('change', () => {
        industryChanging = true;
        recalculateModel();
    });

recalculateModel();
</script>
</body>
</html>

</body>

</html>