<!-- AI Generation Panel: Two-column layout -->
<div class="ai-gen-panel">
    <div class="ai-gen-header">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 2a4 4 0 0 1 4 4v1a1 1 0 0 0 1 1h1a4 4 0 0 1 0 8h-1a1 1 0 0 0-1 1v1a4 4 0 0 1-8 0v-1a1 1 0 0 0-1-1H6a4 4 0 0 1 0-8h1a1 1 0 0 0 1-1V6a4 4 0 0 1 4-4z"/><circle cx="12" cy="12" r="2"/></svg>
        AI 智能生成完整模板
        <span style="font-size:11px;font-weight:600;padding:2px 8px;border-radius:5px;margin-left:8px;<?php echo $packType === 'standard' ? 'background:#f1f5f9;color:#64748b;' : 'background:#eef2ff;color:#4f46e5;'; ?>"><?php echo $packType === 'standard' ? '常规模式 · CSS写死' : '变体模式 · CSS变量适配'; ?></span>
        <span style="font-size:12px;font-weight:400;color:#94a3b8;margin-left:auto;">一次性生成页头、页脚、首页、文章页、栏目页、CSS 共 6 个文件</span>
    </div>
    <div class="ai-gen-body">
        <!-- Left: Prompt input -->
        <div class="ai-gen-left">
            <div class="ai-gen-label">快速选择风格</div>
            <div class="ai-presets">
                <button type="button" class="ai-preset-btn" data-prompt="蓝色科技风，简洁大气的企业官网，经典企业型布局（全屏Hero → 服务展示 → 核心亮点 → CTA → 文章列表），重视SEO和用户转化。导航采用左Logo右菜单，Hero使用全屏沉浸式渐变背景。">蓝色科技企业</button>
                <button type="button" class="ai-preset-btn" data-prompt="深色豪华风格，金色/琥珀色点缀，适合高端服务行业。使用左右分栏型布局（左文右图Hero → 统计数字 → 服务展示 → 评价 → CTA），导航透明浮动滚动变色，卡片使用毛玻璃效果。">深色豪华高端</button>
                <button type="button" class="ai-preset-btn" data-prompt="清新极简风格，绿色主调，大留白设计，适合健康/教育行业。使用极简单栏型布局（纯文字极简Hero → 2列大卡片服务 → 单条大字评价 → 文章列表），导航居中，无多余装饰。">清新极简绿色</button>
                <button type="button" class="ai-preset-btn" data-prompt="现代杂志编辑风格，大图封面式Hero，双栏杂志排版（主内容+侧边栏），横向滚动评价卡片，信息密度较高。适合新闻资讯、博客类站点。导航使用双层导航。">杂志资讯风格</button>
                <button type="button" class="ai-preset-btn" data-prompt="数据驱动仪表盘风格，紧凑布局，带统计数字横条的Hero，不规则网格服务展示（1大+2小），编号列表式特性区块。适合金融/数据/SaaS行业，色调偏冷色系。">数据仪表盘风</button>
                <button type="button" class="ai-preset-btn" data-prompt="温暖橙色调，卡片堆叠型布局，浮动大卡片Hero，错位堆叠的服务卡片，4列紧凑网格亮点区。适合创业公司/餐饮/生活服务。导航使用汉堡菜单全屏展开。">温暖活力橙色</button>
                <button type="button" class="ai-preset-btn" data-prompt="紫色渐变创意风，斜切波浪分割型布局，Hero使用斜切分割两个色块，服务区深色背景，波浪分割线过渡到浅色评价区。适合设计工作室/创意公司。字体大小对比强烈。">紫色创意波浪</button>
                <button type="button" class="ai-preset-btn" data-prompt="网格拼贴型布局，大小混排的不规则网格，Hero占2/3宽度右侧小卡片，服务区使用瀑布流排列。色调中性灰+单色强调色。适合综合门户/多业务公司。">网格拼贴门户</button>
                <button type="button" class="ai-preset-btn" data-prompt="新闻资讯门户风格，首页按菜单栏目分区展示文章列表（使用{{menu_articles_sections}}），简洁顶部搜索区，三栏布局（左分类导航+中主内容+右热门推荐）。适合新闻站、博客、CMS资讯站。">新闻资讯门户</button>
                <button type="button" class="ai-preset-btn" data-prompt="简约博客风格，首页使用{{menu_articles_sections}}展示文章列表，顶部简洁Logo+搜索，卡片式文章展示，干净白色背景，蓝色或深色文字强调。适合个人博客、技术博客。">简约博客风格</button>
                <button type="button" class="ai-preset-btn" data-prompt="WordPress新闻主题风格，首页按菜单分栏展示文章列表（{{menu_articles_sections}}），顶部大图轮播+分类导航，卡片式文章带缩略图和摘要，侧边栏热门文章+标签云。">WordPress新闻主题</button>
            </div>
            <div class="ai-gen-label" style="margin-top:4px;">自定义提示词</div>
            <textarea id="wfInstruction" class="ai-gen-textarea" placeholder="输入你的整体风格要求，例如：&#10;&#10;• 描述色彩风格（蓝色科技风 / 暖色商务风 / 深色极客风）&#10;• 描述目标行业（企业官网 / 教育培训 / 电商 / 医疗健康）&#10;• 描述布局偏好（极简单栏 / 左右分栏 / 杂志排版 / 数据仪表盘）&#10;• 描述特殊要求（大留白 / 信息密集 / 动效丰富 / 暗色模式）&#10;&#10;AI会根据提示词一次性生成风格统一的全套模板（页头、页脚、首页、文章页、栏目页、CSS）"></textarea>
            <div class="ai-gen-model-select" style="margin-top:8px;display:flex;align-items:center;gap:8px;">
                <label style="font-size:13px;color:#64748b;white-space:nowrap;">AI 模型</label>
                <select id="wfModelSelect" style="flex:1;height:36px;border:1px solid #e2e8f0;border-radius:8px;padding:0 10px;font-size:13px;color:#1e293b;background:#fff;outline:none;">
                    <option value="">自动选择（第一个启用的模型）</option>
                    <?php if (!empty($aiModels)): foreach ($aiModels as $m): ?>
                    <option value="<?php echo (int)$m['id']; ?>"><?php echo e($m['name']); ?>（<?php echo e(isset($m['provider']) ? $m['provider'] : ''); ?> / <?php echo e(isset($m['model_name']) ? $m['model_name'] : ''); ?>）</option>
                    <?php endforeach; endif; ?>
                </select>
            </div>
            <div class="ai-gen-actions">
                <button type="button" id="btnWfStart" class="btn-ai" data-pack-code="<?php echo e($packCode); ?>">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M13 10V3L4 14h7v7l9-11h-7z"/></svg>
                    开始生成全部模板
                </button>
                <button type="button" id="wfCancel" class="btn-ghost" style="display:none;">取消</button>
            </div>
        </div>
        <!-- Right: Progress -->
        <div class="ai-gen-right">
            <div class="ai-gen-label">生成进度</div>
            <div class="wf-progress">
                <div class="wf-progress-bar"><div class="wf-progress-fill" id="wfProgressFill"></div></div>
                <div class="wf-progress-text" id="wfProgressText">等待开始…</div>
            </div>
            <ul class="wf-steps" id="wfSteps">
                <li class="wf-step" data-key="header"><span class="wf-icon">1</span><span class="wf-step-label">页头模板 (header.html)</span><span class="wf-step-status">等待中</span></li>
                <li class="wf-step" data-key="footer"><span class="wf-icon">2</span><span class="wf-step-label">页脚模板 (footer.html)</span><span class="wf-step-status">等待中</span></li>
                <li class="wf-step" data-key="homepage"><span class="wf-icon">3</span><span class="wf-step-label">首页模板 (homepage.html)</span><span class="wf-step-status">等待中</span></li>
                <li class="wf-step" data-key="article"><span class="wf-icon">4</span><span class="wf-step-label">文章页模板 (article.html)</span><span class="wf-step-status">等待中</span></li>
                <li class="wf-step" data-key="archive"><span class="wf-icon">5</span><span class="wf-step-label">栏目页模板 (archive.html)</span><span class="wf-step-status">等待中</span></li>
                <li class="wf-step" data-key="css"><span class="wf-icon">6</span><span class="wf-step-label">公共样式 (style.css)</span><span class="wf-step-status">等待中</span></li>
            </ul>
            <div id="wfResult" style="display:none;"></div>
        </div>
    </div>
</div>
