<!DOCTYPE html>
<html lang="ja">
<head>
    <script async src="https://www.googletagmanager.com/gtag/js?id=G-5CB8Y3HNG9"></script>
    <script>
      window.dataLayer = window.dataLayer || [];
      function gtag(){dataLayer.push(arguments);}
      gtag('js', new Date());

      gtag('config', 'G-5CB8Y3HNG9');
    </script>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>PaletteGen pptx | Studio Edition Final v3.2</title>
    <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=Manrope:wght@300;400;600;800&family=Noto+Sans+JP:wght@300;400;500;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,300,0,0" />
    
    <script src="https://cdn.jsdelivr.net/npm/pptxgenjs@3.12.0/dist/pptxgen.bundle.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>

    <style>
        :root {
            --bg-color: #0b0b0b;
            --surface-color: #141414;
            --border-color: rgba(255, 255, 255, 0.1);
            --border-hover: rgba(255, 255, 255, 0.3);
            --text-primary: #ffffff;
            --text-secondary: #a0a0a0;
            --text-tertiary: #666666;
            --brand-accent: #E14E67;
            
            --ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);
            --transition-smooth: all 0.4s ease-out;
            
            /* Preview Vars */
            --pv-bg: #E6E7EA; --pv-text: #222222; --pv-accent1: #00AA99;
            --pv-fix2: #8B929D; --pv-fix3: #ACB1B8; --pv-fix4: #C5C8CD; --pv-fix5: #E6E7EA;
        }

        * { box-sizing: border-box; outline: none; -webkit-tap-highlight-color: transparent; }
        body { font-family: 'Manrope', 'Noto Sans JP', sans-serif; background-color: var(--bg-color); color: var(--text-primary); margin: 0; height: 100vh; overflow: hidden; display: flex; flex-direction: column; letter-spacing: 0.03em; }

        h1, h2, h3 { margin: 0; font-weight: 400; }
        .label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.15em; color: var(--text-secondary); display: block; margin-bottom: 12px; font-weight: 600; }

        /* Header */
        header { width: 100%; height: 64px; padding: 0 32px; display: flex; justify-content: space-between; align-items: center; z-index: 100; border-bottom: 1px solid var(--border-color); background: rgba(11, 11, 11, 0.8); backdrop-filter: blur(10px); }
        .logo { font-weight: 800; font-size: 18px; display: flex; align-items: center; gap: 10px; color: var(--text-primary); }
        
        .header-meta { display: flex; align-items: center; gap: 20px; }
        .header-link { font-size: 11px; color: var(--text-tertiary); text-decoration: none; transition: 0.3s; letter-spacing: 0.03em; font-weight: 500; }
        .header-link:hover { color: var(--brand-accent); opacity: 1; }
        .version { font-size: 10px; color: var(--text-tertiary); border: 1px solid var(--border-color); padding: 2px 8px; border-radius: 100px; }

        main { flex: 1; width: 100%; display: grid; grid-template-columns: 420px 1fr; overflow: hidden; }

        .panel-controls { border-right: 1px solid var(--border-color); background: var(--bg-color); position: relative; display: flex; flex-direction: column; height: 100%; padding: 0; }
        .panel-scroll-area { flex: 1; overflow-y: auto; padding: 32px; display: flex; flex-direction: column; }
        .panel-scroll-area::-webkit-scrollbar { width: 4px; }
        .panel-scroll-area::-webkit-scrollbar-thumb { background: #333; border-radius: 2px; }

        .panel-canvas { position: relative; background: var(--surface-color); overflow: hidden; display: flex; align-items: center; justify-content: center; }

        /* Upload Area */
        .upload-container { width: 100%; height: 100%; position: relative; display: flex; flex-direction: column; padding: 24px; }
        
        .drop-zone { 
            flex: 1; 
            display: flex; 
            flex-direction: column; 
            align-items: center; 
            justify-content: center; 
            transition: var(--transition-smooth); 
            background-image: radial-gradient(circle at center, #1a1a1a 1px, transparent 1px); 
            background-size: 40px 40px;
            border-radius: 8px;
            border: 2px dashed transparent;
            z-index: 1;
        }
        
        .drop-zone:hover { 
            background-color: rgba(255,255,255,0.03); 
            border-color: var(--text-secondary); 
            cursor: pointer; 
        }
        
        .upload-container.drag-over .drop-zone { 
            background-color: rgba(225, 78, 103, 0.08);
            border-color: var(--brand-accent);
        }

        .upload-content { text-align: center; pointer-events: none; transform: translateY(0); transition: var(--transition-smooth); }
        .drop-zone:hover .upload-content { transform: translateY(-10px); }
        
        .upload-icon { font-size: 64px; color: var(--text-tertiary); margin-bottom: 24px; font-weight: 200; transition: color 0.4s ease; }
        .drop-zone:hover .upload-icon { color: var(--text-primary); }
        .upload-container.drag-over .drop-zone .upload-icon { color: var(--brand-accent); transform: scale(1.05); }

        .upload-title { font-size: 24px; font-weight: 300; margin-bottom: 8px; background: linear-gradient(to right, #fff, #666); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
        .upload-desc { font-size: 13px; color: var(--text-secondary); letter-spacing: 0.05em; }
        
        .image-preview { 
            display: none; 
            width: 100%; 
            height: 100%; 
            background: #000; 
            align-items: center; 
            justify-content: center; 
            position: relative; 
            border-radius: 8px;
            border: 2px solid transparent; 
            transition: var(--transition-smooth);
        }
        
        /* Interactive feedback when image is present */
        .upload-container.drag-over .image-preview {
            border-color: var(--brand-accent);
            box-shadow: 0 0 30px rgba(225, 78, 103, 0.15); 
        }

        #sourceImage { max-width: 90%; max-height: 90%; object-fit: contain; box-shadow: 0 40px 100px -20px rgba(0,0,0,0.5); opacity: 0; animation: fadeUp 1s var(--ease-out-expo) forwards; pointer-events: none; }
        .change-btn-wrap { position: absolute; bottom: 32px; left: 50%; transform: translateX(-50%); opacity: 0; transition: var(--transition-smooth); z-index: 10; }
        .panel-canvas:hover .change-btn-wrap { opacity: 1; bottom: 40px; }
        .btn-secondary { background: rgba(255,255,255,0.1); backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,0.2); color: #fff; padding: 10px 20px; border-radius: 100px; font-size: 11px; font-weight: 600; letter-spacing: 0.05em; cursor: pointer; display: flex; align-items: center; gap: 8px; transition: var(--transition-smooth); }
        .btn-secondary:hover { background: #fff; color: #000; }

        #resultContainer { display: none; opacity: 0; flex-direction: column; gap: 32px; padding-bottom: 20px;}
        #resultContainer.visible { display: flex; opacity: 1; animation: fadeUp 1s 0.2s var(--ease-out-expo) forwards; }

        .preview-frame { width: 100%; aspect-ratio: 16/9; background-color: #ffffff; border-radius: 4px; padding: 24px; display: flex; flex-direction: column; position: relative; box-shadow: 0 20px 40px rgba(0,0,0,0.3); border: 12px solid var(--pv-accent1); overflow: hidden; transition: transform 0.4s var(--ease-out-expo); }
        .preview-frame:hover { transform: scale(1.02); }
        .pv-title { font-size: 16px; font-weight: 800; color: var(--pv-text); text-align: center; margin-bottom: 4px; letter-spacing: 1px; font-family: 'Inter', 'Manrope', sans-serif; }
        .pv-subtitle { font-size: 10px; color: var(--pv-text); text-align: center; margin-bottom: 16px; opacity: 0.7; }
        .pv-content { display: flex; gap: 16px; flex: 1; align-items: center; }
        .pv-chart-bar { flex: 1; height: 100%; display: flex; align-items: flex-end; gap: 6px; border-bottom: 1px solid rgba(0,0,0,0.1); padding-bottom: 4px; }
        .pv-bar-group { display: flex; gap: 2px; align-items: flex-end; height: 100%; flex: 1; }
        .pv-bar { flex: 1; border-radius: 2px 2px 0 0; transition: background 0.3s; }
        .pv-chart-pie-wrap { flex: 0 0 80px; height: 80px; position: relative; }
        .pv-pie { width: 100%; height: 100%; border-radius: 50%; background: conic-gradient(var(--pv-accent1) 0% 35%, var(--pv-fix2) 35% 60%, var(--pv-fix3) 60% 85%, var(--pv-fix4) 85% 100%); }
        .pv-pie::after { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 50%; height: 50%; background: #ffffff; border-radius: 50%; }
        .pv-logo { position: absolute; top: 4%; right: 3%; max-height: 12%; max-width: 25%; object-fit: contain; display: none; z-index: 10; }

        .color-section { margin-bottom: 0; }
        .color-grid-main { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--border-color); border: 1px solid var(--border-color); overflow: hidden; border-radius: 6px; }
        .color-item { background: var(--bg-color); display: flex; align-items: center; padding: 10px 12px; gap: 12px; transition: background 0.2s; position: relative; }
        .color-item:hover { background: #1a1a1a; }
        .swatch-circle { width: 24px; height: 24px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.1); flex-shrink: 0; transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); }
        .color-item:hover .swatch-circle { transform: scale(1.2); }
        .color-info { flex: 1; display: flex; flex-direction: column; justify-content: center; min-width: 0; }
        .color-role { font-size: 9px; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .color-hex { font-family: 'Manrope', monospace; font-size: 12px; color: var(--text-primary); }
        .color-input-hidden { position: absolute; inset: 0; opacity: 0; cursor: pointer; }

        .color-grid-fixed { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--border-color); border: 1px solid var(--border-color); overflow: hidden; border-radius: 4px; }
        .color-item-fixed { background: var(--bg-color); padding: 8px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; }
        .color-item-fixed .swatch-circle { width: 16px; height: 16px; }
        .color-item-fixed .color-hex { font-size: 9px; color: var(--text-secondary); }

        .logo-upload-box { width: 100%; height: 140px; border: 1px dashed var(--text-tertiary); border-radius: 6px; display: flex; flex-direction: column; align-items: center; justify-content: center; cursor: pointer; transition: var(--transition-smooth); background: rgba(255,255,255,0.02); position: relative; overflow: hidden; }
        .logo-upload-box:hover { border-color: var(--text-secondary); background: rgba(255,255,255,0.05); }
        .logo-upload-box.drag-over { border-color: var(--brand-accent); background: rgba(225, 78, 103, 0.1); }
        .logo-placeholder { display: flex; flex-direction: column; align-items: center; color: var(--text-secondary); pointer-events: none; }
        .logo-placeholder span.icon { font-size: 24px; margin-bottom: 4px; opacity: 0.7; }
        .logo-placeholder span.text { font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em; }
        .logo-preview-wrap { display: none; width: 100%; height: 100%; align-items: center; justify-content: center; position: relative; background: #222; }
        .logo-preview-img { max-width: 80%; max-height: 80%; object-fit: contain; }
        .logo-remove-btn { position: absolute; top: 8px; right: 8px; background: rgba(0,0,0,0.7); color: white; border: none; width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 14px; transition: 0.2s; }
        .logo-remove-btn:hover { background: #E14E67; }

        /* Footer / Button Area - Flush Layout */
        .panel-footer { 
            border-top: 1px solid var(--border-color); 
            padding: 0; 
            background: var(--bg-color); 
            z-index: 50; 
            margin-top: auto; 
            /* No extra padding, button fills the space */
        }
        
        .btn-primary { 
            width: 100%; 
            height: 64px; 
            background: var(--text-primary); 
            color: #000; 
            border: none; 
            font-family: 'Manrope', sans-serif; 
            font-weight: 700; 
            font-size: 13px; 
            letter-spacing: 0.05em; 
            cursor: pointer; 
            display: flex; 
            justify-content: space-between; 
            align-items: center; 
            padding: 0 32px; 
            transition: var(--transition-smooth); 
            border-radius: 0; 
        }
        .btn-primary:hover { background: #dcdcdc; padding-right: 40px; }
        .btn-primary span.arrow { font-size: 18px; transition: var(--transition-smooth); }
        .btn-primary:hover span.arrow { transform: translateX(6px); }
        .btn-primary:disabled { background: #1a1a1a; color: #444; cursor: not-allowed; }

        #emptyMessage { height: 100%; display: flex; flex-direction: column; justify-content: center; color: var(--text-tertiary); padding: 32px; }
        .step { display: flex; gap: 16px; margin-bottom: 24px; opacity: 1; align-items: flex-start; }
        .step-num { font-size: 11px; border: 1px solid var(--text-secondary); min-width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-top: 2px; color: var(--text-primary); font-weight: 700; }
        .step-text { font-size: 13px; line-height: 1.6; color: var(--text-primary); opacity: 0.9; }

        @keyframes fadeUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }

        @media (max-width: 900px) {
            header { padding: 0 20px; }
            main { grid-template-columns: 1fr; overflow-y: auto; height: auto; display: block; }
            .panel-canvas { height: 40vh; min-height: 300px; border-bottom: 1px solid var(--border-color); }
            .panel-controls { height: auto; display: block; overflow: visible; }
            .panel-scroll-area { overflow: visible; padding: 24px; }
            .panel-footer { position: sticky; bottom: 0; }
            .header-link { display: none; } 
        }
    </style>
</head>
<body>
    <header>
        <div class="logo">
            PaletteGen <span style="font-weight:300; opacity:0.5; margin-left:4px;">pptx</span>
        </div>
        <div class="header-meta">
            <a href="https://re-presentation.jp/" target="_blank" class="header-link">Powered by re-presentation.jp</a>
            <div class="version">v3.2</div>
        </div>
    </header>
    
    <main>
        <div class="panel-controls" id="leftPanel">
            
            <div class="panel-scroll-area">
                <div id="emptyMessage">
                    <span class="label">Workflow</span>
                    <div class="step">
                        <div class="step-num">1</div>
                        <div class="step-text">右側のエリアにスクリーンショットや<br>参考画像をドラッグ&ドロップ。</div>
                    </div>
                    <div class="step">
                        <div class="step-num">2</div>
                        <div class="step-text">AIロジックが自動でキーカラーを抽出し、<br>PPTテンプレートに適用します。</div>
                    </div>
                    <div class="step">
                        <div class="step-num">3</div>
                        <div class="step-text">必要なら企業ロゴを登録し、<br>Downloadボタンで保存します。</div>
                    </div>
                </div>

                <div id="resultContainer">
                    
                    <div>
                        <span class="label">Live Preview</span>
                        <div class="preview-frame" id="previewFrame">
                            <img id="previewLogo" class="pv-logo" alt="Logo Preview">
                            
                            <div class="pv-title">PaletteGen pptx</div>
                            <div class="pv-subtitle">Generated Template Preview</div>
                            <div class="pv-content">
                                <div class="pv-chart-bar">
                                    <div class="pv-bar-group"><div class="pv-bar" style="height:60%; background:var(--pv-accent1)"></div><div class="pv-bar" style="height:30%; background:var(--pv-fix2)"></div><div class="pv-bar" style="height:20%; background:var(--pv-fix3)"></div></div>
                                    <div class="pv-bar-group"><div class="pv-bar" style="height:40%; background:var(--pv-accent1)"></div><div class="pv-bar" style="height:70%; background:var(--pv-fix2)"></div><div class="pv-bar" style="height:30%; background:var(--pv-fix3)"></div></div>
                                    <div class="pv-bar-group"><div class="pv-bar" style="height:80%; background:var(--pv-accent1)"></div><div class="pv-bar" style="height:50%; background:var(--pv-fix2)"></div><div class="pv-bar" style="height:10%; background:var(--pv-fix4)"></div></div>
                                    <div class="pv-bar-group"><div class="pv-bar" style="height:55%; background:var(--pv-accent1)"></div><div class="pv-bar" style="height:25%; background:var(--pv-fix2)"></div><div class="pv-bar" style="height:40%; background:var(--pv-fix4)"></div></div>
                                </div>
                                <div class="pv-chart-pie-wrap"><div class="pv-pie"></div></div>
                            </div>
                        </div>
                    </div>

                    <div class="color-section">
                        <span class="label">Extracted Palette</span>
                        <div class="color-grid-main" id="mainColorGrid"></div>
                    </div>

                    <div class="color-section">
                        <span class="label">System Grays (Utility)</span>
                        <div class="color-grid-fixed" id="fixedColorGrid"></div>
                    </div>

                    <div class="color-section">
                        <span class="label">Corporate Logo (Opt)</span>
                        <div class="logo-upload-box" id="logoUploadBox">
                            <div class="logo-placeholder">
                                <span class="material-symbols-outlined icon">add_photo_alternate</span>
                                <span class="text">Upload Logo</span>
                            </div>
                            <div class="logo-preview-wrap" id="logoPreviewWrap">
                                <img id="logoPreviewImg" class="logo-preview-img">
                                <button id="removeLogoBtn" class="logo-remove-btn"><span class="material-symbols-outlined" style="font-size:14px">close</span></button>
                            </div>
                            <input type="file" id="logoInput" accept="image/*" style="display:none">
                        </div>
                    </div>
                </div>
            </div>

            <div class="panel-footer">
                <button id="downloadBtn" class="btn-primary" disabled>
                    DOWNLOAD .PPTX
                    <span class="material-symbols-outlined arrow">arrow_forward</span>
                </button>
            </div>
        </div>

        <div class="panel-canvas">
            <div class="upload-container" id="uploadContainer">
                <div class="drop-zone" id="dropZone">
                    <div class="upload-content">
                        <span class="material-symbols-outlined upload-icon">filter_center_focus</span>
                        <div class="upload-title">Drop Image Here</div>
                        <div class="upload-desc">or Paste from Clipboard (Ctrl+V)</div>
                    </div>
                </div>
                <div class="image-preview" id="imagePreviewBox">
                    <img id="sourceImage" alt="Analysis Source">
                    <div class="change-btn-wrap">
                        <button class="btn-secondary" id="changeImageBtn">
                            <span class="material-symbols-outlined" style="font-size:16px">refresh</span>
                            RE-UPLOAD
                        </button>
                    </div>
                </div>
                <input type="file" id="fileInput" accept="image/*" style="display: none;">
            </div>
        </div>
    </main>

    <script>
        const uploadContainer = document.getElementById('uploadContainer');
        const dropZone = document.getElementById('dropZone');
        const fileInput = document.getElementById('fileInput');
        const sourceImage = document.getElementById('sourceImage');
        const changeImageBtn = document.getElementById('changeImageBtn');
        const imagePreviewBox = document.getElementById('imagePreviewBox');
        const mainColorGrid = document.getElementById('mainColorGrid');
        const fixedColorGrid = document.getElementById('fixedColorGrid');
        const downloadBtn = document.getElementById('downloadBtn');
        const root = document.documentElement;
        const resultContainer = document.getElementById('resultContainer');
        const emptyMessage = document.getElementById('emptyMessage');
        const leftPanel = document.querySelector('.panel-scroll-area'); 

        // Logo Elements
        const logoUploadBox = document.getElementById('logoUploadBox');
        const logoInput = document.getElementById('logoInput');
        const logoPreviewWrap = document.getElementById('logoPreviewWrap');
        const logoPreviewImg = document.getElementById('logoPreviewImg');
        const removeLogoBtn = document.getElementById('removeLogoBtn');
        const previewLogo = document.getElementById('previewLogo'); 
        
        let logoDataUrl = null;
        let logoMeta = { w: 0, h: 0 };

        const FIXED_COLORS = { accent2: "#8B929D", accent3: "#ACB1B8", accent4: "#C5C8CD", accent5: "#E6E7EA" };
        let finalPalette = { ...FIXED_COLORS };

        window.addEventListener('DOMContentLoaded', () => { displayFixedColors(); updatePreviewVars(finalPalette); });

        // --- Logo Upload Logic ---
        logoUploadBox.addEventListener('click', (e) => {
            if(!e.target.closest('.logo-remove-btn')) logoInput.click();
        });
        logoUploadBox.addEventListener('dragover', (e) => { e.preventDefault(); logoUploadBox.classList.add('drag-over'); });
        logoUploadBox.addEventListener('dragleave', (e) => { logoUploadBox.classList.remove('drag-over'); });
        logoUploadBox.addEventListener('drop', (e) => {
            e.preventDefault(); logoUploadBox.classList.remove('drag-over');
            if (e.dataTransfer.files[0]) handleLogoFile(e.dataTransfer.files[0]);
        });
        logoInput.addEventListener('change', (e) => {
            const file = e.target.files[0];
            if(file) handleLogoFile(file);
        });
        
        removeLogoBtn.addEventListener('click', (e) => {
            e.stopPropagation(); logoDataUrl = null; logoMeta = { w: 0, h: 0 };
            logoPreviewWrap.style.display = 'none'; logoInput.value = '';
            previewLogo.src = '';
            previewLogo.style.display = 'none';
        });

        function handleLogoFile(file) {
            const reader = new FileReader();
            reader.onload = (e) => {
                logoDataUrl = e.target.result;
                const img = new Image();
                img.onload = () => {
                    logoMeta.w = img.naturalWidth;
                    logoMeta.h = img.naturalHeight;
                    
                    logoPreviewImg.src = logoDataUrl;
                    logoPreviewWrap.style.display = 'flex';

                    previewLogo.src = logoDataUrl;
                    previewLogo.style.display = 'block';
                };
                img.src = logoDataUrl;
            };
            reader.readAsDataURL(file);
        }

        // --- Main Image Logic ---
        function setupDragAndDrop(container) {
            container.addEventListener('click', (e) => { if(e.target.closest('.drop-zone') && !e.target.closest('.change-btn')) fileInput.click(); });
            
            container.addEventListener('dragover', (e) => { 
                e.preventDefault(); 
                container.classList.add('drag-over'); 
            });
            container.addEventListener('dragleave', (e) => { 
                if (!container.contains(e.relatedTarget)) { 
                    container.classList.remove('drag-over'); 
                }
            });
            container.addEventListener('drop', (e) => { 
                e.preventDefault(); 
                container.classList.remove('drag-over'); 
                if (e.dataTransfer.files[0]) processImage(e.dataTransfer.files[0]); 
            });
        }
        setupDragAndDrop(uploadContainer);

        document.addEventListener('paste', (e) => {
            const items = e.clipboardData.items;
            for (let i = 0; i < items.length; i++) { if (items[i].type.indexOf('image') !== -1) { processImage(items[i].getAsFile()); e.preventDefault(); return; } }
        });
        changeImageBtn.addEventListener('click', (e) => { e.stopPropagation(); fileInput.click(); });
        fileInput.addEventListener('change', (e) => { if(e.target.files[0]) processImage(e.target.files[0]); });

        function processImage(file) {
            // Analytics
            if (typeof gtag === 'function') {
                gtag('event', 'analyze_image', { 'event_category': 'ToolUsage', 'event_label': 'v3.2_Studio' });
            }

            const reader = new FileReader();
            reader.onload = (e) => {
                sourceImage.src = e.target.result; 
                dropZone.style.display = 'none';
                imagePreviewBox.style.display = 'flex';
                const img = new Image();
                img.onload = () => {
                    const canvas = document.createElement('canvas'); const ctx = canvas.getContext('2d');
                    const scale = Math.min(1, 500 / img.width);
                    canvas.width = img.width * scale; canvas.height = img.height * scale;
                    ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
                    extractAndAssignColors(ctx.getImageData(0, 0, canvas.width, canvas.height).data);
                    emptyMessage.style.display = 'none'; resultContainer.classList.add('visible'); leftPanel.scrollTop = 0;
                };
                img.src = e.target.result;
            };
            reader.readAsDataURL(file);
        }

        function extractAndAssignColors(data) {
            const colorMap = {};
            for (let i = 0; i < data.length; i += 4 * 10) {
                const r = data[i], g = data[i+1], b = data[i+2], a = data[i+3];
                if (a < 128 || (r>250&&g>250&&b>250) || (r<10&&g<10&&b<10)) continue;
                const key = `${Math.round(r/20)*20},${Math.round(g/20)*20},${Math.round(b/20)*20}`;
                if (!colorMap[key]) { const [h, s, v] = rgbToHsv(r, g, b); colorMap[key] = { r, g, b, h, s, v, count: 0 }; }
                colorMap[key].count++;
            }
            let candidates = Object.values(colorMap);
            candidates.forEach(c => { c.score = c.count * (c.s * c.s) * c.v; });
            candidates.sort((a, b) => b.score - a.score);
            const accent1Color = candidates[0] ? rgbToHex(candidates[0].r, candidates[0].g, candidates[0].b) : '#00AA99';
            if (candidates.length > 0) candidates.shift();
            candidates.sort((a, b) => b.count - a.count);
            let remaining = candidates.slice(0, 3).map(c => rgbToHex(c.r, c.g, c.b));
            while(remaining.length < 3) remaining.push('#888888');
            finalPalette = { ...finalPalette, accent1: accent1Color, dk2: remaining[0], lt2: remaining[1], accent6: remaining[2] };
            displayMainColors(finalPalette); displayFixedColors(); updatePreviewVars(finalPalette); downloadBtn.disabled = false;
        }

        function rgbToHsv(r, g, b) { r/=255,g/=255,b/=255; let max=Math.max(r,g,b),min=Math.min(r,g,b); let h,s,v=max; let d=max-min; s=max==0?0:d/max; if(max==min){h=0}else{switch(max){case r:h=(g-b)/d+(g<b?6:0);break;case g:h=(b-r)/d+2;break;case b:h=(r-g)/d+4;break;}h/=6;} return[h,s,v]; }
        function rgbToHex(r, g, b) { return "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1).toUpperCase(); }

        function displayFixedColors() {
            fixedColorGrid.innerHTML = '';
            [{ k:'accent2' }, { k:'accent3' }, { k:'accent4' }, { k:'accent5' }].forEach(item => {
                const color = FIXED_COLORS[item.k];
                const card = document.createElement('div'); card.className = `color-item-fixed`;
                card.innerHTML = `<div class="swatch-circle" style="background-color: ${color}"></div><span class="color-hex">${color}</span>`;
                fixedColorGrid.appendChild(card);
            });
        }

        function displayMainColors(palette) {
            mainColorGrid.innerHTML = '';
            const mainOrder = [{ k:'accent1', l:'Accent 1' }, { k:'dk2', l:'Text 2' }, { k:'lt2', l:'Bg 2' }, { k:'accent6', l:'Accent 6' }];
            mainOrder.forEach(item => {
                const color = palette[item.k];
                const card = document.createElement('div'); card.className = `color-item`;
                card.innerHTML = `<input type="color" class="color-input-hidden" value="${color}"><div class="swatch-circle" style="background-color: ${color}"></div><div class="color-info"><span class="color-role">${item.l}</span><span class="color-hex">${color}</span></div>`;
                const input = card.querySelector('input');
                card.addEventListener('click', (e) => { input.click(); });
                input.addEventListener('input', (e) => { const newColor = e.target.value.toUpperCase(); updateRowColor(card, newColor, item.k); });
                mainColorGrid.appendChild(card);
            });
        }

        function updateRowColor(card, color, key) {
            card.querySelector('.swatch-circle').style.backgroundColor = color; card.querySelector('.color-hex').textContent = color; finalPalette[key] = color; updatePreviewVars(finalPalette);
        }
        function updatePreviewVars(palette) {
            root.style.setProperty('--pv-bg', FIXED_COLORS.accent5); root.style.setProperty('--pv-accent1', palette.accent1); root.style.setProperty('--pv-accent6', palette.accent6);
            root.style.setProperty('--pv-fix2', FIXED_COLORS.accent2); root.style.setProperty('--pv-fix3', FIXED_COLORS.accent3); root.style.setProperty('--pv-fix4', FIXED_COLORS.accent4); root.style.setProperty('--pv-fix5', FIXED_COLORS.accent5);
        }

        // --- GENERATE ---
        downloadBtn.addEventListener('click', async () => {
            // Analytics
            if (typeof gtag === 'function') {
                gtag('event', 'download_pptx', { 'event_category': 'ToolUsage', 'event_label': 'v3.2_Studio' });
            }

            if (!finalPalette.dk2) return;
            downloadBtn.innerHTML = `GENERATING...`; downloadBtn.style.opacity = 0.7;
            try {
                let pres = new PptxGenJS();
                pres.defineLayout({ name: 'WIDE', width: 13.333333333, height: 7.5 });
                pres.layout = 'WIDE';
                const cm = (val) => val / 2.54;
                const cAcc1 = pres.SchemeColor.accent1; const cText2 = pres.SchemeColor.text2; const cBack2 = pres.SchemeColor.background2; const cAcc6 = pres.SchemeColor.accent6;
                const cText1 = pres.SchemeColor.text1; const cBg1 = pres.SchemeColor.background1; const cAcc2 = pres.SchemeColor.accent2; const cAcc3 = pres.SchemeColor.accent3; const cAcc4 = pres.SchemeColor.accent4;

                const noLine = { color: 'FFFFFF', transparency: 100, width: 0 };
                const masterObjects = [
                    { rect: { x: cm(16.42), y: cm(-16.42), w: cm(1.03), h: cm(33.87), rotate: 90, fill: { color: cAcc1 }, line: noLine } },
                    { rect: { x: cm(16.42), y: cm(1.6), w: cm(1.03), h: cm(33.87), rotate: 90, fill: { color: cAcc1 }, line: noLine } },
                    { rect: { x: 0, y: 0, w: cm(1.03), h: cm(19.05), fill: { color: cAcc1 }, line: noLine } },
                    { rect: { x: cm(32.84), y: 0, w: cm(1.03), h: cm(19.05), fill: { color: cAcc1 }, line: noLine } }
                ];

                if (logoDataUrl && logoMeta.w > 0) {
                    const MARGIN_CM = 1.31;
                    const SLIDE_W_CM = 33.867;
                    const LOGO_FIXED_H_WIDE = 1.02;
                    const LOGO_MAX_DIM_SQUARE = 1.6;
                    const ASPECT_RATIO_THRESHOLD = 1.8;

                    let finalW, finalH;
                    const aspectRatio = logoMeta.w / logoMeta.h;

                    if (aspectRatio >= ASPECT_RATIO_THRESHOLD) {
                        finalH = LOGO_FIXED_H_WIDE;
                        finalW = finalH * aspectRatio;
                    } else {
                        if (logoMeta.w >= logoMeta.h) {
                            finalW = LOGO_MAX_DIM_SQUARE;
                            finalH = finalW / aspectRatio;
                        } else {
                            finalH = LOGO_MAX_DIM_SQUARE;
                            finalW = finalH * aspectRatio;
                        }
                    }

                    masterObjects.push({
                        image: { x: cm(SLIDE_W_CM - MARGIN_CM - finalW), y: cm(MARGIN_CM), w: cm(finalW), h: cm(finalH), data: logoDataUrl }
                    });
                }

                pres.defineSlideMaster({ title: "MASTER_SLIDE", objects: masterObjects });

                let s1 = pres.addSlide({ masterName: "MASTER_SLIDE" }); s1.background = { color: "FFFFFF" };
                s1.addText("PaletteGen pptx", { x: cm(3.55), y: cm(2.42), w: cm(22.21), h: cm(3.08), fontSize: 66, fontFace: "Arial", bold: true, color: cText1, align: 'left', valign: 'top' });
                s1.addText("PaletteGen pptxは、スクリーンショット画像から\n自動的にPowerPointテンプレートを作成します。", { x: cm(3.43), y: cm(6.00), w: cm(21.06), h: cm(2.40), fontSize: 20, fontFace: "Yu Gothic", bold: true, color: cText1, align: 'left', valign: 'top', lineSpacing: 31.2 });
                const circleY = cm(3.60); const circleSize = cm(1.09);
                s1.addShape(pres.ShapeType.ellipse, { x: cm(23.46), y: circleY, w: circleSize, h: circleSize, fill: { color: cAcc1 }, line: noLine });
                s1.addShape(pres.ShapeType.ellipse, { x: cm(25.27), y: circleY, w: circleSize, h: circleSize, fill: { color: cText2 }, line: noLine });
                s1.addShape(pres.ShapeType.ellipse, { x: cm(27.07), y: circleY, w: circleSize, h: circleSize, fill: { color: cBack2 }, line: noLine });
                s1.addShape(pres.ShapeType.ellipse, { x: cm(28.87), y: circleY, w: circleSize, h: circleSize, fill: { color: cAcc6 }, line: noLine });
                s1.addChart(pres.ChartType.bar, [ { name:"S1", labels:["Cat1","Cat2","Cat3","Cat4"], values:[4.3, 2.5, 3.5, 4.5] }, { name:"S2", labels:["Cat1","Cat2","Cat3","Cat4"], values:[2.4, 4.4, 1.8, 2.8] }, { name:"S3", labels:["Cat1","Cat2","Cat3","Cat4"], values:[2.0, 2.0, 3.0, 5.0] } ], { x: cm(3.37), y: cm(9.48), w: cm(17.01), h: cm(6.45), barDir: 'col', chartColors: [cAcc1, cAcc2, cAcc3], barGapWidthPct: 219, barOverlapPct: -27, valAxisLineShow: false, valAxisLabelFont: "Bahnschrift", valAxisLabelColor: cText1, catAxisHidden: true, valAxisLineColor: "none", valAxisGridLineColor: cAcc4, valAxisGridLinewidth: 0.75, valAxisGridLineAlpha: 50, showLegend: false, showTitle: false });
                s1.addChart(pres.ChartType.doughnut, [ { name:"S1", labels:["1","2","3","4"], values:[4.3, 2.5, 3.5, 4.5] } ], { x: cm(20.25), y: cm(8.63), w: cm(12.18), h: cm(8.12), chartColors: [cAcc1, cAcc2, cAcc3, cAcc4], holeSize: 50, showLegend: false, showTitle: false, showLabel: false });

                let s2 = pres.addSlide({ masterName: "MASTER_SLIDE" }); s2.background = { color: "FFFFFF" };
                s2.addText("PaletteGen pptx", { x: cm(3.55), y: cm(2.42), w: cm(22.21), h: cm(3.08), fontSize: 66, fontFace: "Arial", bold: true, color: cText1, align: 'left', valign: 'top' });
                s2.addText("ツールの特徴", { shape: pres.ShapeType.rect, x: cm(3.93), y: cm(6.49), w: cm(10.93), h: cm(2.06), fontSize: 24, fontFace: "Yu Gothic", bold: true, color: cBg1, fill: { color: cAcc1 }, line: { color: cAcc1, width: 2 }, align: 'center', valign: 'middle' });
                s2.addText("PaletteGen pptxは、スクリーンショット画像から自動的にPowerPointテンプレートを作成します。\nテンプレートはカラーパレットも設定済み。", { shape: pres.ShapeType.rect, x: cm(3.93), y: cm(8.55), w: cm(10.93), h: cm(7.83), fontSize: 18, fontFace: "Yu Gothic", bold: true, color: cText1, fill: { color: cBg1 }, line: { color: cAcc1, width: 2 }, align: 'left', valign: 'top', lineSpacing: 26, margin: [15, 20, 15, 15], autoFit: false });
                s2.addText("ご使用時の注意", { shape: pres.ShapeType.rect, x: cm(19.01), y: cm(6.49), w: cm(10.93), h: cm(2.06), fontSize: 24, fontFace: "Yu Gothic", bold: true, color: cBg1, fill: { color: cAcc1 }, line: { color: cAcc1, width: 2 }, align: 'center', valign: 'middle' });
                s2.addText("個人・商用問わずお使いいただけます。\nプレゼンをスピーディに作成する手助けとなればうれしいです。", { shape: pres.ShapeType.rect, x: cm(19.01), y: cm(8.55), w: cm(10.93), h: cm(7.83), fontSize: 18, fontFace: "Yu Gothic", bold: true, color: cText1, fill: { color: cBg1 }, line: { color: cAcc1, width: 2 }, align: 'left', valign: 'top', lineSpacing: 26, margin: [15, 20, 15, 15], autoFit: false });
                s2.addShape(pres.ShapeType.line, { x: cm(15.78), y: cm(11.61), w: cm(2.48), h: 0, line: { color: cAcc1, width: 8, endArrowType: 'triangle', endArrowSize: 5 } });
                s2.addShape(pres.ShapeType.ellipse, { x: cm(23.46), y: circleY, w: circleSize, h: circleSize, fill: { color: cAcc1 }, line: noLine });
                s2.addShape(pres.ShapeType.ellipse, { x: cm(25.27), y: circleY, w: circleSize, h: circleSize, fill: { color: cText2 }, line: noLine });
                s2.addShape(pres.ShapeType.ellipse, { x: cm(27.07), y: circleY, w: circleSize, h: circleSize, fill: { color: cBack2 }, line: noLine });
                s2.addShape(pres.ShapeType.ellipse, { x: cm(28.87), y: circleY, w: circleSize, h: circleSize, fill: { color: cAcc6 }, line: noLine });

                // Slide 3 (Line Spacing Fixed to Points: 23.4 and 18.2)
                let s3 = pres.addSlide({ masterName: "MASTER_SLIDE" }); s3.background = { color: "FFFFFF" };
                
                s3.addText("本テンプレートは、書籍『刺さるプレゼン全書』の著者によって制作されたものです。\n\n書籍の方ではさらに高品質な100枚を超えるスライドテンプレート集がダウンロードいただけます。ぜひチェックしてみてください。", 
                    { x: cm(3.43), y: cm(4.01), w: cm(17.43), h: cm(7), fontSize: 18, fontFace: "Yu Gothic", bold: true, color: cText1, align: 'left', valign: 'top', lineSpacing: 31.2, lineSpacing: 23.4 });
                
                s3.addText("本テンプレートのご利用にあたっては、利用者ご自身の責任においてご判断ください。\n企業向けのカスタマイズを含めた正式な導入をご検討の場合は\n contact@re-presentation.jp までお問い合わせください。", 
                    { x: cm(3.43), y: cm(13.66), w: cm(22.41), h: cm(2.74), fontSize: 14, fontFace: "Yu Gothic", bold: true, color: cText1, align: 'left', valign: 'top', lineSpacing: 18.2, lineSpacing: 18.2 });
                
                try {
                    s3.addImage({ path: "https://re-presentation.jp/tool/Sasaru_01_4.png", x: cm(17.7), y: cm(0), w: cm(16.17), h: cm(19.05) });
                } catch(e) { console.warn("Promo image failed to load", e); }

                const blob = await pres.write("blob");
                const zip = new JSZip(); const zipContent = await zip.loadAsync(blob);
                const themePath = "ppt/theme/theme1.xml";
                let themeXml = await zipContent.file(themePath).async("string");
                Object.keys(finalPalette).forEach(key => { const hex = finalPalette[key].replace('#', ''); themeXml = themeXml.replace(new RegExp(`<a:${key}>[\\s\\S]*?<\\/a:${key}>`, 'g'), `<a:${key}><a:srgbClr val="${hex}"/></a:${key}>`); });
                themeXml = themeXml.replace(/<a:dk1>[\s\S]*?<\/a:dk1>/g, `<a:dk1><a:srgbClr val="222222"/></a:dk1>`);
                zip.file(themePath, themeXml);
                const hackedBlob = await zip.generateAsync({ type: "blob" });
                const url = URL.createObjectURL(hackedBlob);
                const a = document.createElement("a"); a.href = url; a.download = "PaletteGen_Template.pptx"; document.body.appendChild(a); a.click(); document.body.removeChild(a); URL.revokeObjectURL(url);
            } catch (err) { console.error(err); alert("Error: " + err.message); }
            finally { downloadBtn.innerHTML = `DOWNLOAD .PPTX <span class="material-symbols-outlined arrow">arrow_forward</span>`; downloadBtn.style.opacity = 1; }
        });
    </script>
</body>
</html>