/**
 * Publieke AI Social Media Banner Generator – itlive.nl/social-media-banner-ai
 * Geen login. Roept /api/ai-visuals-proxy.php aan (forward naar admin API met public header).
 */
if (!ob_get_level()) ob_start();
header('Cache-Control: no-cache, no-store, must-revalidate');
$api_base = '/api/ai-visuals-proxy.php?';
?>    <meta name="description" content="Maak AI-banners voor Instagram, Facebook, LinkedIn en TikTok. Snelle vragen, platform kiezen, caption en hashtags – direct downloaden of als PDF.">    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body { font-family: 'Inter', system-ui, sans-serif; background: linear-gradient(180deg, #1e1b4b 0%, #312e81 40%, #0d9488 120%); min-height: 100vh; color: #e2e8f0; }
        .topbar { background: rgba(30, 27, 75, 0.95); color: #fff; padding: 12px 20px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; border-bottom: 1px solid rgba(167,139,250,0.2); }
        .topbar a { color: #c4b5fd; text-decoration: none; font-weight: 500; }
        .topbar a:hover { color: #fff; }
        .container { max-width: 720px; margin: 0 auto; padding: 24px 20px; }
        .banner-hero { background: rgba(55, 48, 163, 0.35); border: 1px solid rgba(167,139,250,0.3); color: #fff; padding: 1.5rem; border-radius: 16px; margin-bottom: 1.5rem; }
        .banner-hero h1 { margin: 0 0 0.5rem 0; font-size: 1.5rem; }
        .banner-hero p { margin: 0; opacity: 0.95; font-size: 0.95rem; color: #c4b5fd; }
        .banner-hero a { color: #a78bfa; }
        .banner-form { background: rgba(30, 27, 75, 0.5); border: 1px solid rgba(167,139,250,0.25); border-radius: 14px; padding: 1.25rem; margin-bottom: 1rem; }
        .banner-form label { display: block; margin-bottom: 6px; font-weight: 600; color: #e2e8f0; }
        .banner-form textarea { width: 100%; min-height: 90px; padding: 12px; border: 2px solid rgba(167,139,250,0.3); border-radius: 10px; font-size: 1rem; resize: vertical; background: rgba(30,27,75,0.9); color: #fff; }
        .banner-form textarea:focus { outline: none; border-color: #a78bfa; }
        .banner-form select { padding: 10px 12px; border: 2px solid rgba(167,139,250,0.3); border-radius: 8px; font-size: 1rem; min-width: 200px; background: rgba(30,27,75,0.9); color: #fff; }
        .banner-form .row { display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-end; margin-bottom: 12px; }
        .banner-form .step { margin-bottom: 1.25rem; padding-bottom: 1rem; border-bottom: 1px solid rgba(167,139,250,0.2); }
        .btn-primary { padding: 12px 24px; background: #0d9488; color: #fff; border: none; border-radius: 8px; font-weight: 600; cursor: pointer; font-size: 1rem; }
        .btn-primary:hover { background: #0f766e; }
        .btn-primary:disabled { opacity: 0.6; cursor: not-allowed; }
        .btn-secondary { padding: 10px 18px; background: #475569; color: #fff; border: none; border-radius: 8px; font-weight: 600; cursor: pointer; }
        .banner-result { margin-top: 1.5rem; padding: 1rem; background: rgba(30, 27, 75, 0.5); border-radius: 14px; border: 1px solid rgba(167,139,250,0.3); }
        .banner-result img { max-width: 100%; height: auto; border-radius: 10px; display: block; margin-top: 12px; }
        .banner-error { background: rgba(127,29,29,0.4); color: #fca5a5; border-color: #b91c1c; }
        .cost-hint { font-size: 0.85rem; color: #64748b; margin-top: 4px; }
        .platform-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; }
        .platform-opt { padding: 12px; border: 2px solid rgba(167,139,250,0.3); border-radius: 10px; cursor: pointer; text-align: center; background: rgba(30,27,75,0.6); color: #e2e8f0; transition: all 0.2s; }
        .platform-opt:hover { border-color: #a78bfa; background: rgba(167,139,250,0.15); }
        .platform-opt.selected { border-color: #a78bfa; background: rgba(167,139,250,0.3); color: #fff; }
        .caption-box { margin-top: 1rem; padding: 12px; background: rgba(30,27,75,0.5); border-radius: 10px; font-size: 0.95rem; white-space: pre-wrap; color: #e2e8f0; border: 1px solid rgba(167,139,250,0.2); }
        .caption-extras { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; margin-top: 8px; }
        .caption-extras input { width: 100%; padding: 8px 10px; border: 2px solid rgba(167,139,250,0.3); border-radius: 6px; font-size: 0.95rem; background: rgba(30,27,75,0.8); color: #fff; }
        @media (max-width: 560px) { .caption-extras { grid-template-columns: 1fr; } }
        .variants-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1rem; margin-top: 12px; }
        .variant-card { background: rgba(30, 27, 75, 0.6); border: 2px solid rgba(167,139,250,0.3); border-radius: 12px; overflow: hidden; }
        .variant-card.chosen { border-color: #a78bfa; box-shadow: 0 0 0 2px rgba(167,139,250,0.4); }
        .variant-card img { width: 100%; height: auto; display: block; }
        .variant-card .actions { padding: 10px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
        .variant-card .actions a, .variant-card .actions button { font-size: 0.85rem; padding: 6px 12px; border-radius: 6px; text-decoration: none; border: none; cursor: pointer; background: rgba(167,139,250,0.25); color: #e2e8f0; transition: background 0.2s; }
        .variant-card .actions a:hover, .variant-card .actions button:hover { background: rgba(167,139,250,0.45); }
        .variant-card .actions .btn-dl { background: #0d9488; color: #fff; }
        .variant-card .actions .btn-dl:hover { background: #0f766e; }
        .variant-card .actions .btn-pdf { background: #475569 !important; color: #fff !important; }
        .variant-card .actions .btn-pdf:hover { background: #64748b !important; }
        .variant-card .actions .btn-pick { background: #8b5cf6; color: #fff; }
        .refine-row { margin-top: 8px; display: none; }
        .refine-row.visible { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
        .refine-row input { flex: 1; min-width: 180px; padding: 8px 10px; border: 2px solid rgba(167,139,250,0.3); border-radius: 6px; background: rgba(30,27,75,0.8); color: #fff; }
        .progress-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 12px 14px; background: rgba(30, 27, 75, 0.5); border: 1px solid rgba(167,139,250,0.3); border-radius: 12px; margin-bottom: 1rem; font-size: 0.9rem; }
        .progress-strip .step-dot { width: 24px; height: 24px; border-radius: 50%; background: #475569; color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 0.75rem; }
        .progress-strip .step-dot.done { background: #0d9488; }
        .progress-strip .step-dot.current { background: #8b5cf6; }
        .progress-strip .tip { color: #c4b5fd; margin-left: 4px; flex: 1; min-width: 200px; }
        .quick-questions { margin-top: 12px; padding: 14px; background: rgba(30,27,75,0.4); border: 2px dashed rgba(167,139,250,0.3); border-radius: 12px; }
        .quick-questions label { font-weight: 500; font-size: 0.9rem; color: #e2e8f0; }
        .quick-questions input, .quick-questions select { margin-top: 4px; padding: 8px 10px; border: 2px solid rgba(167,139,250,0.3); border-radius: 6px; width: 100%; max-width: 280px; background: rgba(30,27,75,0.8); color: #fff; }
        .quick-questions .q-row { margin-bottom: 12px; }
        .thoughts-box { margin-top: 10px; padding: 10px 12px; background: rgba(30,27,75,0.5); border-radius: 10px; font-size: 0.9rem; color: #c4b5fd; border-left: 4px solid #a78bfa; }
        .thoughts-box.empty { border-left-color: #64748b; }
        .color-blocks { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
        .color-block { width: 36px; height: 36px; border-radius: 10px; border: 2px solid rgba(167,139,250,0.4); cursor: pointer; padding: 0; transition: transform 0.15s, box-shadow 0.15s; }
        .color-block:hover { transform: scale(1.1); box-shadow: 0 2px 12px rgba(0,0,0,0.3); }
        .color-block.selected { border-color: #fff; box-shadow: 0 0 0 3px #a78bfa; }
        .color-block[data-hex=""] { background: linear-gradient(135deg, #64748b 50%, #94a3b8 50%); }
        .advanced-details { margin-top: 12px; margin-bottom: 8px; }
        .advanced-summary { cursor: pointer; font-size: 0.9rem; color: #94a3b8; padding: 0.5rem 0; }
        .advanced-summary:hover { color: #c4b5fd; }
        .advanced-body { padding-top: 0.5rem; padding-left: 0.5rem; border-left: 2px solid rgba(167,139,250,0.3); margin-top: 0.5rem; }
        .chat-hulp-wrap { position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 100; }
        .chat-hulp-toggle { padding: 0.75rem 1.25rem; border-radius: 14px; background: linear-gradient(135deg, #0d9488, #14b8a6); color: #fff; border: none; font-weight: 600; cursor: pointer; box-shadow: 0 4px 20px rgba(13,148,136,0.4); }
        .chat-hulp-toggle:hover { opacity: 0.95; }
        .chat-hulp-panel { display: none; position: absolute; bottom: 100%; right: 0; margin-bottom: 8px; width: 320px; max-width: calc(100vw - 2rem); background: rgba(30,27,75,0.98); border: 1px solid rgba(167,139,250,0.4); border-radius: 16px; padding: 1rem; box-shadow: 0 12px 40px rgba(0,0,0,0.4); }
        .chat-hulp-panel.open { display: block; }
        .chat-hulp-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.75rem; }
        .chat-hulp-header strong { font-size: 0.95rem; }
        .chat-hulp-close { background: none; border: none; color: #94a3b8; font-size: 1.5rem; cursor: pointer; line-height: 1; padding: 0 4px; }
        .chat-hulp-close:hover { color: #fff; }
        .chat-hulp-intro { font-size: 0.85rem; color: #c4b5fd; margin-bottom: 0.75rem; line-height: 1.45; }
        .chat-hulp-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 0.75rem; }
        .chat-chip { padding: 0.5rem 0.75rem; border-radius: 10px; border: 1px solid rgba(167,139,250,0.4); background: rgba(167,139,250,0.15); color: #e2e8f0; font-size: 0.8rem; cursor: pointer; }
        .chat-chip:hover { background: rgba(167,139,250,0.3); color: #fff; }
        .chat-hulp-link { display: block; padding: 0.65rem 1rem; border-radius: 10px; background: rgba(13,148,136,0.25); color: #5eead4; text-decoration: none; font-size: 0.9rem; font-weight: 600; text-align: center; }
        .chat-hulp-link:hover { background: rgba(13,148,136,0.4); color: #fff; }
        .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
    </style>
<nav class="topbar">
    <a href="https://itlive.nl/">IT Live</a>
    <a href="/ai-visuals">AI Visuals</a>
    <a href="/visuals">Visuals &amp; Logo (alles-in-één)</a>
    <span style="margin-left:auto;">📱 Social Media Banner AI</span>
</nav>
<div class="container">
    <p style="font-size:0.9rem; margin-bottom:0.5rem;"><a href="/ai-visuals" style="color:#c4b5fd; text-decoration:none;">← Terug naar AI Visuals</a></p>
    <div class="banner-hero">
        <h1>📱 AI Social Media Banner Generator</h1>
        <p>Maak razendsnel banners in de juiste formaten voor Instagram, Facebook, LinkedIn en TikTok. Voer een onderwerp of link in → de AI maakt een ontwerp met bijpassende caption en hashtags.</p>
    </div>
    <div id="banner-progress" class="progress-strip">
        <span class="step-dot" id="prog-1" title="Beschrijving">1</span>
        <span class="step-dot" id="prog-2" title="Platform">2</span>
        <span class="step-dot" id="prog-3" title="Stijl &amp; varianten">3</span>
        <span class="tip" id="banner-tip">Vul een beschrijving in (vrije tekst) of de snelle vragen hieronder → kies platform → genereer.</span>
    </div>
    <div class="banner-form">
        <div class="step">
            <label for="banner-prompt">Stap 1 – Beschrijf je banner</label>
            <textarea id="banner-prompt" placeholder="bijv. Vrolijke Instagram-post voor pizza-aanbieding, warme kleuren, moderne typografie"></textarea>
            <p class="cost-hint" style="margin: 6px 0 8px 0;">Of vul de <strong>snelle vragen</strong> in en klik op <strong>Bouw prompt</strong>. Daarna kun je de prompt nog verbeteren.</p>
            <div class="quick-questions" id="quick-questions">
                <div class="q-row">
                    <label for="banner-onderwerp">Bedrijf of onderwerp</label><br>
                    <input type="text" id="banner-onderwerp" placeholder="bijv. pizzeria, beddenwinkel, kapper">
                </div>
                <div class="q-row">
                    <label for="banner-doel">Doel van de post</label><br>
                    <select id="banner-doel">
                        <option value="">— kies —</option>
                        <option value="aanbieding">Aanbieding / actie</option>
                        <option value="merkbekendheid">Merkbekendheid</option>
                        <option value="nieuws">Nieuws / update</option>
                        <option value="evenement">Evenement</option>
                        <option value="product">Product in de kijker</option>
                        <option value="dienst">Dienst presenteren</option>
                        <option value="overig">Overig</option>
                    </select>
                </div>
                <div class="q-row">
                    <label for="banner-sfeer">Sfeer / stijl</label><br>
                    <select id="banner-sfeer">
                        <option value="">— kies —</option>
                        <option value="warm">Warm en uitnodigend</option>
                        <option value="professioneel">Professioneel</option>
                        <option value="speels">Speels en vrolijk</option>
                        <option value="luxe">Luxe / premium</option>
                        <option value="minimalistisch">Minimalistisch</option>
                        <option value="kleurrijk">Kleurrijk en opvallend</option>
                    </select>
                </div>
                <button type="button" id="banner-build-prompt-btn" class="btn-secondary">📝 Bouw prompt van antwoorden</button>
            </div>
            <p class="cost-hint" style="margin: 10px 0 10px 0;">Klik op <strong>✨ Maak betere prompt</strong> om je invoer om te zetten naar een professionele prompt.</p>
            <button type="button" id="banner-enhance-btn" class="btn-secondary">✨ Maak betere prompt</button>
            <label style="display:inline-flex;align-items:center;gap:8px;margin-left:12px;cursor:pointer;">
                <input type="checkbox" id="banner-enhance-check">
                <span>Verbeter automatisch bij genereren</span>
            </label>
        </div>
        <div class="step">
            <label>Stap 2 – Platform & formaat</label>
            <div class="platform-grid" id="platform-grid">
                <div class="platform-opt" data-platform="instagram-post" data-size="1024x1024">📷 Instagram post<br><small>1080×1080</small></div>
                <div class="platform-opt" data-platform="instagram-story" data-size="1024x1792">📱 Instagram Story<br><small>1080×1920</small></div>
                <div class="platform-opt" data-platform="tiktok" data-size="1024x1792">🎵 TikTok<br><small>1080×1920</small></div>
                <div class="platform-opt" data-platform="facebook-cover" data-size="1792x1024">📘 Facebook cover<br><small>landscape</small></div>
                <div class="platform-opt" data-platform="linkedin-header" data-size="1792x1024">💼 LinkedIn header<br><small>landscape</small></div>
            </div>
        </div>
        <div class="step">
            <label>Stijl &amp; opties</label>
            <div class="row">
                <div>
                    <label for="banner-style" style="font-weight:500;">Stijl</label>
                    <select id="banner-style">
                        <option value="modern">Modern</option>
                        <option value="minimalistisch">Minimalistisch</option>
                        <option value="speels">Speels</option>
                        <option value="professioneel">Professioneel</option>
                    </select>
                </div>
                <div>
                    <label for="banner-variants" style="font-weight:500;">Aantal varianten</label>
                    <select id="banner-variants">
                        <option value="1">1 afbeelding</option>
                        <option value="2">2 varianten</option>
                        <option value="3">3 varianten</option>
                        <option value="4">4 varianten</option>
                    </select>
                </div>
            </div>
            <div class="row" style="margin-top: 12px;">
                <label style="font-weight:500;">Sfeerkleur / accentkleur (optioneel)</label>
                <div class="color-blocks" id="banner-color-blocks" role="group" aria-label="Kies een sfeerkleur">
                    <button type="button" class="color-block" data-hex="0d9488" style="background:#0d9488" title="Teal"><span class="sr-only">Teal</span></button>
                    <button type="button" class="color-block" data-hex="8b5cf6" style="background:#8b5cf6" title="Paars"><span class="sr-only">Paars</span></button>
                    <button type="button" class="color-block" data-hex="3b82f6" style="background:#3b82f6" title="Blauw"><span class="sr-only">Blauw</span></button>
                    <button type="button" class="color-block" data-hex="ef4444" style="background:#ef4444" title="Rood"><span class="sr-only">Rood</span></button>
                    <button type="button" class="color-block" data-hex="22c55e" style="background:#22c55e" title="Groen"><span class="sr-only">Groen</span></button>
                    <button type="button" class="color-block" data-hex="f59e0b" style="background:#f59e0b" title="Oranje"><span class="sr-only">Oranje</span></button>
                    <button type="button" class="color-block" data-hex="ec4899" style="background:#ec4899" title="Roze"><span class="sr-only">Roze</span></button>
                    <button type="button" class="color-block" data-hex="1e293b" style="background:#1e293b" title="Donker"><span class="sr-only">Donker</span></button>
                    <button type="button" class="color-block" data-hex="" title="Geen vaste kleur"><span class="sr-only">Geen</span></button>
                </div>
                <input type="text" id="banner-accent-color" placeholder="of vul hex in (bijv. 0d9488)" style="max-width:160px; margin-top:8px; padding:8px 10px; border:2px solid rgba(167,139,250,0.3); border-radius:6px; background:rgba(30,27,75,0.8); color:#fff; font-size:0.95rem;" aria-label="Accentkleur hex optioneel">
            </div>
            <details class="advanced-details">
                <summary class="advanced-summary">Extra opties (provider, kwaliteit)</summary>
                <div class="advanced-body">
                    <div class="row">
                        <div>
                            <label for="banner-provider" style="font-weight:500;">Provider</label>
                            <select id="banner-provider">
                                <option value="auto" selected>Automatisch (aanbevolen)</option>
                                <option value="openai">OpenAI (DALL·E 3)</option>
                                <option value="fal">fal.ai</option>
                                <option value="replicate">Replicate</option>
                                <option value="imagine">ImagineAPI</option>
                            </select>
                        </div>
                        <div>
                            <label for="banner-quality" style="font-weight:500;">Kwaliteit (OpenAI)</label>
                            <select id="banner-quality">
                                <option value="standard">Standaard</option>
                                <option value="hd">HD</option>
                            </select>
                        </div>
                    </div>
                </div>
            </details>
        </div>
        <div class="row" style="margin-top: 1rem;">
            <button type="button" id="banner-generate" class="btn-primary">🎨 Genereer banner</button>
        </div>
        <div id="banner-out" class="banner-result" style="display: none; margin-top: 1.5rem;"></div>

    <div class="chat-hulp-wrap">
        <button type="button" class="chat-hulp-toggle" id="banner-chat-toggle" aria-label="Open hulp en chat">💬 Hulp &amp; tips</button>
        <div class="chat-hulp-panel" id="banner-chat-panel">
            <div class="chat-hulp-header">
                <strong>💬 Hulp bij banners</strong>
                <button type="button" class="chat-hulp-close" id="banner-chat-close" aria-label="Sluiten">&times;</button>
            </div>
            <p class="chat-hulp-intro">Gebruik de snelle vragen om een prompt te bouwen, kies een platform en eventueel een sfeerkleur. Voor uitgebreide chat en tekenen: open Visuals &amp; Logo.</p>
            <div class="chat-hulp-chips">
                <button type="button" class="banner-chat-chip" data-tip="Professionele social media banner, moderne typografie, hoogwaardige kwaliteit">Tip: professioneel</button>
                <button type="button" class="banner-chat-chip" data-tip="Speelse Instagram-post, vrolijke kleuren, aantrekkelijk voor jong publiek">Tip: speels</button>
                <button type="button" class="banner-chat-chip" data-tip="Minimalistische banner, strakke lijnen, rustige kleuren">Tip: minimalistisch</button>
            </div>
            <a href="/visuals" class="chat-hulp-link">🎨 Open Visuals &amp; Logo (chat + genereren)</a>
        </div>
    </div>

        <div class="step" style="margin-top: 1.5rem;">
            <label>Optioneel – Caption & hashtags</label>
            <p class="cost-hint" style="margin: 4px 0 8px 0;">Vul eventueel merk, tags en keywords in voor een betere caption en hashtags.</p>
            <div id="caption-thoughts" class="thoughts-box empty">💬 Tip: vul merk en keywords in voor een caption en hashtags op maat.</div>
            <div class="caption-extras">
                <div><label for="banner-brand" style="font-size:0.85rem;font-weight:500;">Merk / brand</label><input type="text" id="banner-brand" placeholder="bijv. Mijn Bedrijf"></div>
                <div><label for="banner-tags" style="font-size:0.85rem;font-weight:500;">Tags (komma)</label><input type="text" id="banner-tags" placeholder="bijv. aanbieding, zomer"></div>
                <div><label for="banner-keywords" style="font-size:0.85rem;font-weight:500;">Keywords (SEO)</label><input type="text" id="banner-keywords" placeholder="bijv. slaapkamer, bedden"></div>
            </div>
            <button type="button" id="banner-caption-btn" class="btn-secondary" style="margin-top:10px;">💬 Genereer caption</button>
            <div id="banner-caption-out" class="caption-box" style="display: none; margin-top: 12px;"></div>
        </div>
    </div>
    <p style="font-size:1rem; margin-top:1.5rem; font-weight:600; color:#e2e8f0;">Ook handig:</p>
    <p style="margin:0 0 0.5rem; font-size:0.95rem;"><a href="/visuals" style="color:#a78bfa;">🎨 Visuals &amp; Logo</a> – flyer, social en logo in één flow · <a href="/ai-icon-generator" style="color:#a78bfa;">🔷 AI Icon Generator</a> · <a href="/ai-logo-maker" style="color:#a78bfa;">🖼️ AI Logo Maker</a> · <a href="/ai-visuals" style="color:#a78bfa;">Overzicht AI Visuals</a> · <a href="/admin_portal/ai-visuals-dashboard.php" style="color:#94a3b8;">⚙️ Beheerders: Dashboard</a></p>
</div>
<script>
(function(){
    var API = '';
    function escapeHtml(s) { if (!s) return ''; var d = document.createElement('div'); d.textContent = s; return d.innerHTML; }
    var promptEl = document.getElementById('banner-prompt');
    var enhanceBtn = document.getElementById('banner-enhance-btn');
    var enhanceCheckbox = document.getElementById('banner-enhance-check');
    var platformGrid = document.getElementById('platform-grid');
    var styleEl = document.getElementById('banner-style');
    var providerEl = document.getElementById('banner-provider');
    var qualityEl = document.getElementById('banner-quality');
    var generateBtn = document.getElementById('banner-generate');
    var outEl = document.getElementById('banner-out');
    var captionBtn = document.getElementById('banner-caption-btn');
    var captionOut = document.getElementById('banner-caption-out');
    var variantsEl = document.getElementById('banner-variants');
    var selectedPlatform = 'instagram-post', selectedSize = '1024x1024', userRefinedPrompt = false;
    var lastPromptUsed = '';
    var styleSuffix = { modern: ', modern design, clean lines, contemporary social media graphic, high quality', minimalistisch: ', minimalist style, simple composition, elegant, professional social media', speels: ', playful and fun style, vibrant colors, engaging social media post', professioneel: ', professional corporate style, polished, business-appropriate visual' };
    var onderwerpEl = document.getElementById('banner-onderwerp');
    var doelEl = document.getElementById('banner-doel');
    var sfeerEl = document.getElementById('banner-sfeer');
    var buildPromptBtn = document.getElementById('banner-build-prompt-btn');
    var tipEl = document.getElementById('banner-tip');
    var prog1 = document.getElementById('prog-1');
    var prog2 = document.getElementById('prog-2');
    var prog3 = document.getElementById('prog-3');
    var captionThoughts = document.getElementById('caption-thoughts');
    var accentColorEl = document.getElementById('banner-accent-color');
    var bannerColorBlocks = document.getElementById('banner-color-blocks');
    if (bannerColorBlocks && accentColorEl) {
        bannerColorBlocks.querySelectorAll('.color-block').forEach(function(btn){
            btn.addEventListener('click', function(){
                bannerColorBlocks.querySelectorAll('.color-block').forEach(function(b){ b.classList.remove('selected'); });
                btn.classList.add('selected');
                var hex = (btn.getAttribute('data-hex') || '').trim();
                accentColorEl.value = hex ? '#' + hex.replace(/^#/, '') : '';
            });
        });
    }
    var bannerChatToggle = document.getElementById('banner-chat-toggle');
    var bannerChatPanel = document.getElementById('banner-chat-panel');
    var bannerChatClose = document.getElementById('banner-chat-close');
    if (bannerChatToggle && bannerChatPanel) {
        bannerChatToggle.addEventListener('click', function(){ bannerChatPanel.classList.toggle('open'); });
        if (bannerChatClose) bannerChatClose.addEventListener('click', function(){ bannerChatPanel.classList.remove('open'); });
    }
    document.querySelectorAll('.banner-chat-chip').forEach(function(chip){
        chip.addEventListener('click', function(){
            var tip = chip.getAttribute('data-tip');
            if (tip && promptEl) { promptEl.value = tip; promptEl.focus(); }
            if (bannerChatPanel) bannerChatPanel.classList.remove('open');
        });
    });
    function getAccentColorSuffix() {
        var hex = (accentColorEl && accentColorEl.value) ? accentColorEl.value.trim().replace(/^#/, '') : '';
        if (!hex || !/^[0-9a-fA-F]{3,6}$/.test(hex)) return '';
        return ' Accentkleur of kleurensfeer: #' + hex + '.';
    }
    function buildPromptFromQuestions() {
        var o = (onderwerpEl && onderwerpEl.value) ? onderwerpEl.value.trim() : '';
        var d = (doelEl && doelEl.value) ? doelEl.value : '';
        var s = (sfeerEl && sfeerEl.value) ? sfeerEl.value : '';
        if (!o) return '';
        var parts = ['Professionele social media banner voor ' + o];
        if (d) {
            var doelLabels = { aanbieding: 'voor een aanbieding of actie', merkbekendheid: 'voor merkbekendheid', nieuws: 'voor een nieuwsbericht', evenement: 'voor een evenement', product: 'om een product in de kijker te zetten', dienst: 'om een dienst te presenteren', overig: '' };
            if (doelLabels[d]) parts.push(doelLabels[d]);
        }
        if (s) {
            var sfeerLabels = { warm: 'warme, uitnodigende sfeer', professioneel: 'professionele uitstraling', speels: 'speelse, vrolijke sfeer', luxe: 'luxe, premium uitstraling', minimalistisch: 'minimalistisch en strak', kleurrijk: 'kleurrijk en opvallend' };
            if (sfeerLabels[s]) parts.push(sfeerLabels[s]);
        }
        return parts.join(', ') + '. Hoogwaardige kwaliteit, geschikt voor sociale media.';
    }
    function getEffectivePrompt() {
        var p = (promptEl && promptEl.value) ? promptEl.value.trim() : '';
        if (p) return p;
        return buildPromptFromQuestions();
    }
    function updateProgress() {
        var hasPrompt = !!getEffectivePrompt();
        if (prog1) { prog1.className = 'step-dot' + (hasPrompt ? ' done' : ' current'); }
        if (prog2) { prog2.className = 'step-dot' + (hasPrompt ? ' done' : ''); }
        if (prog3) { prog3.className = 'step-dot'; }
        if (tipEl) {
            if (hasPrompt) tipEl.textContent = 'Beschrijving staat. Kies platform en stijl, dan kun je genereren.';
            else {
                var o = (onderwerpEl && onderwerpEl.value) ? onderwerpEl.value.trim() : '';
                if (o) tipEl.textContent = 'Klik op "Bouw prompt van antwoorden" of vul doel en sfeer in.';
                else tipEl.textContent = 'Vul een beschrijving in (vrije tekst) of de snelle vragen → kies platform → genereer.';
            }
        }
    }
    function savePromptToStorage() {
        try { if (promptEl && promptEl.value) localStorage.setItem('banner_prompt', promptEl.value); } catch(e) {}
    }
    if (buildPromptBtn && promptEl) {
        buildPromptBtn.addEventListener('click', function(){
            var built = buildPromptFromQuestions();
            if (!built) { alert('Vul minimaal bedrijf/onderwerp in.'); return; }
            promptEl.value = built;
            userRefinedPrompt = false;
            savePromptToStorage();
            updateProgress();
            if (outEl) { outEl.style.display = 'block'; outEl.className = 'banner-result'; outEl.innerHTML = '✅ Prompt opgebouwd. Pas aan indien nodig en klik op <strong>Genereer banner</strong>.'; }
        });
    }
    [promptEl, onderwerpEl, doelEl, sfeerEl].forEach(function(el){
        if (el) { el.addEventListener('input', updateProgress); el.addEventListener('change', updateProgress); }
    });
    ['banner-brand', 'banner-tags', 'banner-keywords'].forEach(function(id){
        var el = document.getElementById(id);
        if (el && captionThoughts) { el.addEventListener('input', function(){ if ((el.value || '').trim()) captionThoughts.textContent = 'Merk, tags of keywords ingevuld – klik "Genereer caption" voor caption en hashtags op maat.'; }); el.addEventListener('change', function(){ if ((el.value || '').trim()) captionThoughts.textContent = 'Merk, tags of keywords ingevuld – klik "Genereer caption" voor caption en hashtags op maat.'; }); }
    });
    try { if (promptEl && localStorage.getItem('banner_prompt')) promptEl.value = localStorage.getItem('banner_prompt'); } catch(e) {}
    updateProgress();
    if (platformGrid) {
        platformGrid.querySelectorAll('.platform-opt').forEach(function(el){
            el.addEventListener('click', function(){
                platformGrid.querySelectorAll('.platform-opt').forEach(function(o){ o.classList.remove('selected'); });
                el.classList.add('selected');
                selectedPlatform = el.getAttribute('data-platform');
                selectedSize = el.getAttribute('data-size') || '1024x1024';
                if (prog2) prog2.className = 'step-dot done';
                if (tipEl && getEffectivePrompt()) tipEl.textContent = 'Platform gekozen. Kies stijl en aantal varianten, dan genereren.';
            });
        });
        var first = platformGrid.querySelector('.platform-opt'); if (first) { first.classList.add('selected'); selectedPlatform = first.getAttribute('data-platform'); selectedSize = first.getAttribute('data-size') || '1024x1024'; if (prog2) prog2.className = 'step-dot done'; }
    }
    if (enhanceBtn && promptEl) {
        enhanceBtn.addEventListener('click', function(){
            var prompt = (promptEl.value || '').trim();
            if (!prompt) { alert('Voer eerst een prompt in.'); return; }
            enhanceBtn.disabled = true; enhanceBtn.textContent = '⏳ Bezig…';
            fetch(API + '&e=prompt-enhance', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ prompt: prompt }) })
            .then(function(r){ return r.json(); })
            .then(function(d){
                enhanceBtn.disabled = false; enhanceBtn.textContent = '✨ Maak betere prompt';
                if (d.success && d.enhanced_prompt) { promptEl.value = d.enhanced_prompt; userRefinedPrompt = true; outEl.style.display = 'block'; outEl.className = 'banner-result'; outEl.innerHTML = '<strong>✅ Verbeterde prompt</strong> – pas aan indien nodig en klik op <strong>Genereer banner</strong>.'; }
                else { alert(d.error || 'Prompt kon niet worden verbeterd.'); }
            })
            .catch(function(e){ enhanceBtn.disabled = false; enhanceBtn.textContent = '✨ Maak betere prompt'; alert('Fout: ' + (e.message || 'Netwerk')); });
        });
    }
    function renderVariantCard(item, index, promptUsed) {
            var card = document.createElement('div');
            card.className = 'variant-card';
            card.dataset.index = index;
            var img = document.createElement('img');
            img.src = item.image_url;
            img.alt = 'Banner ' + (index + 1);
            card.appendChild(img);
            var actions = document.createElement('div');
            actions.className = 'actions';
            var dl = document.createElement('a');
            dl.href = item.image_url;
            dl.download = 'social-banner-' + selectedPlatform + '-' + (index + 1) + '.png';
            dl.className = 'btn-dl';
            dl.textContent = '📥 Download';
            dl.target = '_blank';
            actions.appendChild(dl);
            var pdfUrl = (typeof window !== 'undefined' ? window.location.origin : '') + '/visuals/flyer-print.php?image_url=' + encodeURIComponent(item.image_url);
            var pdfLink = document.createElement('a');
            pdfLink.href = pdfUrl;
            pdfLink.target = '_blank';
            pdfLink.rel = 'noopener';
            pdfLink.className = 'btn-pdf';
            pdfLink.textContent = '📄 PDF';
            actions.appendChild(pdfLink);
            var pickBtn = document.createElement('button');
            pickBtn.type = 'button';
            pickBtn.className = 'btn-pick';
            pickBtn.textContent = '👍 Kies deze';
            pickBtn.addEventListener('click', function(){ card.classList.add('chosen'); document.querySelectorAll('.variant-card').forEach(function(c){ if (c !== card) c.classList.remove('chosen'); }); });
            actions.appendChild(pickBtn);
            var refineWrap = document.createElement('div');
            refineWrap.className = 'refine-row';
            var refineInput = document.createElement('input');
            refineInput.placeholder = 'Wat wil je aanpassen? bijv. meer blauw, rustiger';
            refineInput.type = 'text';
            var refineBtn = document.createElement('button');
            refineBtn.type = 'button';
            refineBtn.textContent = '✨ Verbeter deze';
            refineBtn.addEventListener('click', function(){
                var txt = (refineInput.value || '').trim();
                if (!txt) { alert('Schrijf wat je wilt aanpassen.'); return; }
                refineBtn.disabled = true;
                var refinePrompt = (promptUsed || lastPromptUsed) + '. Aanpassingen: ' + txt;
                fetch(API + '&e=image-generate', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ provider: (providerEl && providerEl.value) || 'openai', prompt: refinePrompt, size: selectedSize, quality: (qualityEl && qualityEl.value) || 'standard', enhance_prompt: false }) })
                .then(function(r){ return r.text(); })
                .then(function(t){
                    var d = { success: false }; try { d = JSON.parse(t || '{}'); } catch(e) {}
                    refineBtn.disabled = false;
                    if (d.success && d.image_url) {
                        img.src = d.image_url;
                        dl.href = d.image_url;
                        card.dataset.promptUsed = d.prompt_used || refinePrompt;
                    } else { alert(d.error || 'Verbeteren mislukt.'); }
                })
                .catch(function(e){ refineBtn.disabled = false; alert('Fout: ' + (e.message || 'Netwerk')); });
            });
            refineWrap.appendChild(refineInput);
            refineWrap.appendChild(refineBtn);
            var showRefineBtn = document.createElement('button');
            showRefineBtn.type = 'button';
            showRefineBtn.textContent = '✨ Verbeter deze';
            showRefineBtn.addEventListener('click', function(){ refineWrap.classList.add('visible'); showRefineBtn.style.display = 'none'; });
            actions.appendChild(showRefineBtn);
            actions.appendChild(refineWrap);
            card.appendChild(actions);
            card.dataset.promptUsed = promptUsed || '';
            return card;
        }
    if (generateBtn && promptEl && outEl) {
        generateBtn.addEventListener('click', function(){
            var prompt = getEffectivePrompt();
            if (!prompt) {
                outEl.style.display = 'block';
                outEl.className = 'banner-result';
                outEl.innerHTML = '📌 <strong>Eerst beschrijven</strong> – Vul een beschrijving in (vrije tekst) of de snelle vragen hierboven en klik op <strong>Bouw prompt van antwoorden</strong>. Daarna kun je genereren.';
                if (tipEl) tipEl.textContent = 'Vul een beschrijving in of de snelle vragen → Bouw prompt → genereer.';
                return;
            }
            if (prompt !== (promptEl.value || '').trim()) promptEl.value = prompt;
            var doEnhance = !userRefinedPrompt && enhanceCheckbox && enhanceCheckbox.checked;
            var styleSuf = (styleEl && styleSuffix[styleEl.value]) ? styleSuffix[styleEl.value] : '';
            var accentSuf = getAccentColorSuffix();
            var finalPrompt = prompt + styleSuf + accentSuf;
            var numVariants = 1;
            if (variantsEl) { var v = parseInt(variantsEl.value, 10); if (v >= 1 && v <= 4) numVariants = v; }
            generateBtn.disabled = true;
            outEl.style.display = 'block';
            outEl.innerHTML = '⏳ Bezig met genereren… ' + (numVariants > 1 ? numVariants + ' varianten' : '') + (doEnhance ? ' (eerst prompt verbeteren…)' : '');
            outEl.className = 'banner-result';
            var provider = (providerEl && providerEl.value) || 'auto';
            var quality = (qualityEl && qualityEl.value) || 'standard';
            function runGenerates(usePrompt) {
                var payload = { provider: provider, prompt: usePrompt, size: selectedSize, quality: quality, enhance_prompt: false };
                var promises = [];
                for (var i = 0; i < numVariants; i++) promises.push(
                    fetch(API + '&e=image-generate', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(payload) }).then(function(r){ return r.text(); })
                );
                return Promise.all(promises);
            }
            var work = doEnhance && numVariants > 1
                ? fetch(API + '&e=prompt-enhance', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ prompt: prompt }) })
                    .then(function(r){ return r.json(); })
                    .then(function(d){ var p = (d.success && d.enhanced_prompt) ? d.enhanced_prompt : finalPrompt; return runGenerates(p + styleSuf); })
                : doEnhance && numVariants === 1
                    ? fetch(API + '&e=image-generate', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ provider: provider, prompt: finalPrompt, size: selectedSize, quality: quality, enhance_prompt: true }) }).then(function(r){ return r.text(); }).then(function(t){ return [t]; })
                    : runGenerates(finalPrompt);
            work.then(function(results){
                var items = [];
                var errors = [];
                for (var j = 0; j < results.length; j++) {
                    var d = { success: false }; try { d = JSON.parse(results[j] || '{}'); } catch(e) {}
                    if (d.success && d.image_url) {
                        items.push({ image_url: d.image_url, provider: d.provider, prompt_used: d.prompt_used || d.prompt, original_prompt: d.original_prompt });
                        if (d.prompt_used) lastPromptUsed = d.prompt_used;
                    } else errors.push(d.error || 'Fout');
                }
                generateBtn.disabled = false;
                userRefinedPrompt = false;
                if (items.length === 0) {
                    outEl.className = 'banner-result banner-error';
                    outEl.innerHTML = '<strong>❌ Fout</strong><br>' + escapeHtml(errors[0] || 'Geen afbeeldingen gegenereerd.');
                    return;
                }
                savePromptToStorage();
                if (tipEl) tipEl.textContent = 'Klaar. Kies een variant of verfijn met "Verbeter deze".';
                var html = '<strong>✅ ' + items.length + ' banner(s)</strong> <span style="color:#64748b;">(' + (items[0].provider || provider) + ')</span>';
                if (items[0].original_prompt) html += '<p style="margin:8px 0 4px 0;font-size:0.9rem;color:#64748b;"><strong>Origineel:</strong> ' + escapeHtml(items[0].original_prompt) + '</p>';
                if (items[0].prompt_used) html += '<p style="margin:4px 0 0 0;font-size:0.9rem;color:#475569;"><strong>Gebruikte prompt:</strong> ' + escapeHtml(items[0].prompt_used) + '</p>';
                outEl.className = 'banner-result';
                outEl.innerHTML = html;
                var grid = document.createElement('div');
                grid.className = 'variants-grid';
                for (var k = 0; k < items.length; k++) grid.appendChild(renderVariantCard(items[k], k, items[k].prompt_used));
                outEl.appendChild(grid);
            }).catch(function(e){
                generateBtn.disabled = false;
                outEl.className = 'banner-result banner-error';
                outEl.innerHTML = '<strong>❌ Fout</strong><br>' + (e.message || 'Netwerkfout');
            });
        });
    }
    if (captionBtn && promptEl && captionOut) {
        captionBtn.addEventListener('click', function(){
            var prompt = getEffectivePrompt();
            if (!prompt) { if (outEl) { outEl.style.display = 'block'; outEl.className = 'banner-result'; outEl.innerHTML = '📌 Vul eerst een beschrijving in of de snelle vragen en bouw je prompt.'; } alert('Voer eerst een beschrijving in of vul de snelle vragen in.'); return; }
            var brand = (document.getElementById('banner-brand') && document.getElementById('banner-brand').value) ? document.getElementById('banner-brand').value.trim() : '';
            var tags = (document.getElementById('banner-tags') && document.getElementById('banner-tags').value) ? document.getElementById('banner-tags').value.trim() : '';
            var keywords = (document.getElementById('banner-keywords') && document.getElementById('banner-keywords').value) ? document.getElementById('banner-keywords').value.trim() : '';
            captionBtn.disabled = true; captionOut.style.display = 'block'; captionOut.textContent = '⏳ Caption genereren…';
            if (captionThoughts) { captionThoughts.textContent = 'Caption wordt gegenereerd met je ' + (brand ? 'merk' : '') + (keywords ? ' en keywords' : '') + '…'; captionThoughts.classList.remove('empty'); }
            fetch(API + '&e=caption', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ prompt: prompt, platform: selectedPlatform, brand: brand, tags: tags, keywords: keywords }) })
            .then(function(r){ return r.json(); })
            .then(function(d){
                captionBtn.disabled = false;
                if (d.success && d.caption) {
                    captionOut.textContent = d.caption + (d.hashtags ? '\n\n' + d.hashtags : '');
                    if (captionThoughts) { captionThoughts.textContent = '✅ Caption gegenereerd. Vul merk en keywords in voor nog betere resultaten.'; captionThoughts.classList.remove('empty'); }
                } else { captionOut.textContent = d.error || 'Caption kon niet worden gegenereerd.'; }
            })
            .catch(function(e){ captionBtn.disabled = false; captionOut.textContent = 'Fout: ' + (e.message || 'Netwerk'); });
        });
    }
})();
</script>
</body>
</html>