{% extends "base.html" %}

{% block title %}首页 - AI创作工作台{% endblock %}

{% block content %}
<div class="space-y-12">
    <!-- Hero 区域 -->
    <div class="relative overflow-hidden rounded-2xl bg-gradient-to-br from-slate-900 via-blue-900 to-indigo-900 text-white shadow-xl">
        <div class="absolute -top-24 -right-24 w-96 h-96 rounded-full bg-blue-500/25 blur-3xl"></div>
        <div class="absolute -bottom-32 -left-16 w-80 h-80 rounded-full bg-purple-500/20 blur-3xl"></div>
        <div class="relative px-8 py-12 md:px-12 md:py-16">
            <div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-white/10 border border-white/20 text-xs text-blue-100 mb-6 backdrop-blur">
                <span class="w-2 h-2 rounded-full bg-emerald-400"></span>
                AI 创作全流程工作台
            </div>
            <h1 class="text-3xl md:text-5xl font-bold tracking-tight mb-4">把灵感变成作品</h1>
            <p class="text-blue-100/90 text-base md:text-lg mb-8 max-w-2xl leading-relaxed">
                从选题、文案、分镜到视频生成的一站式 AI 创作流水线，覆盖电商、漫剧、口播三大场景
            </p>
            <div class="flex flex-wrap gap-3">
                <a href="/ecommerce" class="px-6 py-3 bg-white text-slate-900 font-semibold rounded-xl shadow-lg hover:bg-blue-50 hover:-translate-y-0.5 transition-all duration-200">开始创作 →</a>
                <a href="/ai-weapons" class="px-6 py-3 bg-white/10 border border-white/25 text-white font-medium rounded-xl hover:bg-white/20 transition-all duration-200 backdrop-blur">探索工具</a>
            </div>
            <div class="flex flex-wrap gap-8 mt-10 text-sm">
                <div>
                <span class="text-2xl font-bold">14+</span>
                    <span class="ml-2 text-blue-200">功能模块</span>
                </div>
                <div>
                    <span class="text-2xl font-bold">3</span>
                    <span class="ml-2 text-blue-200">创作场景</span>
                </div>
                <div>
                    <span class="text-2xl font-bold">12</span>
                    <span class="ml-2 text-blue-200">流水线阶段</span>
                </div>
            </div>
        </div>
    </div>

    <!-- 核心工作台 -->
    <section>
        <div class="flex items-center justify-between mb-5">
            <h2 class="text-xl md:text-2xl font-bold text-slate-900">核心工作台</h2>
            <span class="text-sm text-gray-500">一站式创作入口</span>
        </div>
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            <a href="/ecommerce" class="group bg-white rounded-2xl border border-gray-200 shadow-sm p-6 transition-all duration-300 hover:shadow-lg hover:-translate-y-1 hover:border-blue-300">
                <div class="flex items-start justify-between mb-4">
                    <div class="w-12 h-12 rounded-xl bg-blue-50 flex items-center justify-center text-2xl group-hover:scale-110 transition-transform">🛍️</div>
                    <span class="px-2 py-1 text-xs bg-emerald-100 text-emerald-700 rounded-full font-medium">免费优先</span>
                </div>
                <h3 class="text-lg font-semibold text-slate-900 mb-2">电商</h3>
                <p class="text-sm text-gray-600 leading-relaxed mb-5">商品文案、AI 商品图、TTS 配音，模特试衣 / 换脸 / 穿戴 / 姿势裂变</p>
                <div class="flex items-center gap-1 text-blue-600 text-sm font-medium">
                    进入工作台
                    <span class="transition-transform duration-200 group-hover:translate-x-1">→</span>
                </div>
            </a>

            <a href="/comic-drama" class="group bg-white rounded-2xl border border-gray-200 shadow-sm p-6 transition-all duration-300 hover:shadow-lg hover:-translate-y-1 hover:border-blue-300">
                <div class="flex items-start justify-between mb-4">
                    <div class="w-12 h-12 rounded-xl bg-purple-50 flex items-center justify-center text-2xl group-hover:scale-110 transition-transform">🎬</div>
                    <span class="px-2 py-1 text-xs bg-emerald-100 text-emerald-700 rounded-full font-medium">免费优先</span>
                </div>
                <h3 class="text-lg font-semibold text-slate-900 mb-2">漫剧</h3>
                <p class="text-sm text-gray-600 leading-relaxed mb-5">选题雷达 → 小说 → 剧本 → 分镜 → 角色 → 场景 → 视频，12 阶段全流程</p>
                <div class="flex items-center gap-1 text-blue-600 text-sm font-medium">
                    进入流水线
                    <span class="transition-transform duration-200 group-hover:translate-x-1">→</span>
                </div>
            </a>

            <a href="/self-media" class="group bg-white rounded-2xl border border-gray-200 shadow-sm p-6 transition-all duration-300 hover:shadow-lg hover:-translate-y-1 hover:border-blue-300">
                <div class="flex items-start justify-between mb-4">
                    <div class="w-12 h-12 rounded-xl bg-amber-50 flex items-center justify-center text-2xl group-hover:scale-110 transition-transform">📱</div>
                    <span class="px-2 py-1 text-xs bg-emerald-100 text-emerald-700 rounded-full font-medium">免费优先</span>
                </div>
                <h3 class="text-lg font-semibold text-slate-900 mb-2">口播</h3>
                <p class="text-sm text-gray-600 leading-relaxed mb-5">素材管理、链接解析、AI 车间、爆款复刻、视频精修剪辑</p>
                <div class="flex items-center gap-1 text-blue-600 text-sm font-medium">
                    进入工作台
                    <span class="transition-transform duration-200 group-hover:translate-x-1">→</span>
                </div>
            </a>

            <a href="/canvas" class="group bg-white rounded-2xl border border-gray-200 shadow-sm p-6 transition-all duration-300 hover:shadow-lg hover:-translate-y-1 hover:border-blue-300">
                <div class="flex items-start justify-between mb-4">
                    <div class="w-12 h-12 rounded-xl bg-cyan-50 flex items-center justify-center text-2xl group-hover:scale-110 transition-transform">🧩</div>
                    <span class="px-2 py-1 text-xs bg-blue-100 text-blue-700 rounded-full font-medium">节点工作流</span>
                </div>
                <h3 class="text-lg font-semibold text-slate-900 mb-2">画布</h3>
                <p class="text-sm text-gray-600 leading-relaxed mb-5">用文本、生图和输出节点编排创作流程，复用现有模型、素材与任务能力</p>
                <div class="flex items-center gap-1 text-blue-600 text-sm font-medium">
                    打开画布
                    <span class="transition-transform duration-200 group-hover:translate-x-1">→</span>
                </div>
            </a>
        </div>
    </section>

    <!-- 工具 -->
    <section>
        <div class="flex items-center justify-between mb-5">
            <h2 class="text-xl md:text-2xl font-bold text-slate-900">🎯 工具</h2>
            <a href="/ai-weapons" class="text-sm text-blue-600 hover:text-blue-700 font-medium">查看全部 →</a>
        </div>
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            <a href="/doubao-multi" class="group bg-white rounded-2xl border border-gray-200 shadow-sm p-6 transition-all duration-300 hover:shadow-lg hover:-translate-y-1 hover:border-blue-300">
                <div class="flex items-start justify-between mb-4">
                    <div class="w-12 h-12 rounded-xl bg-red-50 flex items-center justify-center text-2xl group-hover:scale-110 transition-transform">🎯</div>
                    <span class="px-2 py-1 text-xs bg-blue-100 text-blue-700 rounded-full font-medium">核心专区</span>
                </div>
                <h3 class="text-lg font-semibold text-slate-900 mb-2">多开平台</h3>
                <p class="text-sm text-gray-600 leading-relaxed mb-5">豆包多账号管理、无水印图片 / 视频下载、批量导入导出，浏览器扩展联动</p>
                <div class="flex items-center gap-1 text-blue-600 text-sm font-medium">
                    进入平台
                    <span class="transition-transform duration-200 group-hover:translate-x-1">→</span>
                </div>
            </a>

            <a href="/de-aigc" class="group bg-white rounded-2xl border border-gray-200 shadow-sm p-6 transition-all duration-300 hover:shadow-lg hover:-translate-y-1 hover:border-blue-300">
                <div class="flex items-start justify-between mb-4">
                    <div class="w-12 h-12 rounded-xl bg-emerald-50 flex items-center justify-center text-2xl group-hover:scale-110 transition-transform">✍️</div>
                    <span class="px-2 py-1 text-xs bg-emerald-100 text-emerald-700 rounded-full font-medium">免费专区</span>
                </div>
                <h3 class="text-lg font-semibold text-slate-900 mb-2">降AIGC</h3>
                <p class="text-sm text-gray-600 leading-relaxed mb-5">35 种 AI 写作模式识别、人类化深度改写、AIGC 检测评分，三种处理模式</p>
                <div class="flex items-center gap-1 text-blue-600 text-sm font-medium">
                    开始使用
                    <span class="transition-transform duration-200 group-hover:translate-x-1">→</span>
                </div>
            </a>

            <a href="/browser-multi" class="group bg-white rounded-2xl border border-gray-200 shadow-sm p-6 transition-all duration-300 hover:shadow-lg hover:-translate-y-1 hover:border-blue-300">
                <div class="flex items-start justify-between mb-4">
                    <div class="w-12 h-12 rounded-xl bg-sky-50 flex items-center justify-center text-2xl group-hover:scale-110 transition-transform">🌐</div>
                    <span class="px-2 py-1 text-xs bg-blue-100 text-blue-700 rounded-full font-medium">核心专区</span>
                </div>
                <h3 class="text-lg font-semibold text-slate-900 mb-2">浏览器多开</h3>
                <p class="text-sm text-gray-600 leading-relaxed mb-5">豆包 / Dola / 小云雀 / 即梦 等多平台，独立浏览器登录各账号</p>
                <div class="flex items-center gap-1 text-blue-600 text-sm font-medium">
                    进入管理
                    <span class="transition-transform duration-200 group-hover:translate-x-1">→</span>
                </div>
            </a>
        </div>
    </section>

    <!-- 创作工具 -->
    <section>
        <div class="flex items-center justify-between mb-5">
            <h2 class="text-xl md:text-2xl font-bold text-slate-900">创作工具</h2>
            <span class="text-sm text-gray-500">流水线各阶段独立工具</span>
        </div>
        <div class="grid grid-cols-2 lg:grid-cols-4 gap-4">
            <a href="/novels" class="group bg-white rounded-2xl border border-gray-200 shadow-sm p-5 transition-all duration-300 hover:shadow-md hover:-translate-y-0.5 hover:border-blue-300">
                <div class="text-2xl mb-3">📖</div>
                <h3 class="font-semibold text-slate-900 mb-1">小说生成</h3>
                <p class="text-xs text-gray-500 leading-relaxed">AI 创作、粘贴导入、批量导入章节管理</p>
            </a>
            <a href="/script-convert" class="group bg-white rounded-2xl border border-gray-200 shadow-sm p-5 transition-all duration-300 hover:shadow-md hover:-translate-y-0.5 hover:border-blue-300">
                <div class="text-2xl mb-3">📝</div>
                <h3 class="font-semibold text-slate-900 mb-1">剧本转换</h3>
                <p class="text-xs text-gray-500 leading-relaxed">小说转剧本、场景段落智能分章</p>
            </a>
            <a href="/storyboard" class="group bg-white rounded-2xl border border-gray-200 shadow-sm p-5 transition-all duration-300 hover:shadow-md hover:-translate-y-0.5 hover:border-blue-300">
                <div class="text-2xl mb-3">🎞️</div>
                <h3 class="font-semibold text-slate-900 mb-1">分镜生成</h3>
                <p class="text-xs text-gray-500 leading-relaxed">批量生成分镜、场景镜头管理导出</p>
            </a>
            <a href="/jimeng-video" class="group bg-white rounded-2xl border border-gray-200 shadow-sm p-5 transition-all duration-300 hover:shadow-md hover:-translate-y-0.5 hover:border-blue-300">
                <div class="text-2xl mb-3">▶️</div>
                <h3 class="font-semibold text-slate-900 mb-1">即梦视频</h3>
                <p class="text-xs text-gray-500 leading-relaxed">Seedance 视频生成、参考图、任务队列</p>
            </a>
        </div>
    </section>

    <!-- 基础能力 -->
    <section>
        <div class="flex items-center justify-between mb-5">
            <h2 class="text-xl md:text-2xl font-bold text-slate-900">基础能力</h2>
            <span class="text-sm text-gray-500">支撑模块与系统管理</span>
        </div>
        <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
            <a href="/ai-tools" class="group bg-white rounded-2xl border border-gray-200 shadow-sm p-6 transition-all duration-300 hover:shadow-lg hover:-translate-y-1 hover:border-blue-300">
                <div class="text-3xl mb-3">🧭</div>
                <h3 class="text-lg font-semibold text-slate-900 mb-2">导航</h3>
                <p class="text-sm text-gray-600 leading-relaxed">聚合对话、写作、绘画、配音等 AI 工具，支持自定义收藏</p>
            </a>
            <a href="/knowledge-base" class="group bg-white rounded-2xl border border-gray-200 shadow-sm p-6 transition-all duration-300 hover:shadow-lg hover:-translate-y-1 hover:border-blue-300">
                <div class="text-3xl mb-3">📚</div>
                <h3 class="text-lg font-semibold text-slate-900 mb-2">知识库</h3>
                <p class="text-sm text-gray-600 leading-relaxed">文档上传、向量化存储、语义检索，生成时自动注入参考上下文</p>
            </a>
            <a href="/settings" class="group bg-white rounded-2xl border border-gray-200 shadow-sm p-6 transition-all duration-300 hover:shadow-lg hover:-translate-y-1 hover:border-blue-300">
                <div class="text-3xl mb-3">⚙️</div>
                <h3 class="text-lg font-semibold text-slate-900 mb-2">系统设置</h3>
                <p class="text-sm text-gray-600 leading-relaxed">大模型配置、Skill 提示词库、敏感词管理、AIGC 参数、Coze 工作流</p>
            </a>
        </div>
    </section>

    <!-- 快速入门 -->
    <section class="bg-white rounded-2xl border border-gray-200 shadow-sm p-8">
        <h2 class="text-xl md:text-2xl font-bold text-slate-900 mb-6">🚀 快速入门</h2>
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
            <div>
                <div class="w-9 h-9 rounded-xl bg-blue-600 text-white font-bold flex items-center justify-center mb-3">1</div>
                <h3 class="font-semibold text-slate-900 mb-1">选择功能模块</h3>
                <p class="text-sm text-gray-600 leading-relaxed">进入对应工作台：电商、漫剧、口播，或使用创作工具单独推进</p>
            </div>
            <div>
                <div class="w-9 h-9 rounded-xl bg-emerald-600 text-white font-bold flex items-center justify-center mb-3">2</div>
                <h3 class="font-semibold text-slate-900 mb-1">使用免费模式 C</h3>
                <p class="text-sm text-gray-600 leading-relaxed">复制提示词到豆包、即梦、剪映等平台生成，零成本起步</p>
            </div>
            <div>
                <div class="w-9 h-9 rounded-xl bg-purple-600 text-white font-bold flex items-center justify-center mb-3">3</div>
                <h3 class="font-semibold text-slate-900 mb-1">回填生成结果</h3>
                <p class="text-sm text-gray-600 leading-relaxed">将文案、图片、视频 URL 回填保存，形成素材资产</p>
            </div>
            <div>
                <div class="w-9 h-9 rounded-xl bg-amber-500 text-white font-bold flex items-center justify-center mb-3">4</div>
                <h3 class="font-semibold text-slate-900 mb-1">联动知识库</h3>
                <p class="text-sm text-gray-600 leading-relaxed">上传参考文档，生成时自动检索注入，让输出更贴合业务</p>
            </div>
        </div>
    </section>

    <!-- 三种运行模式 -->
    <section class="bg-white rounded-2xl border border-gray-200 shadow-sm p-8">
        <h2 class="text-xl md:text-2xl font-bold text-slate-900 mb-6">💡 三种运行模式</h2>
        <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
            <div class="rounded-xl border-l-4 border-emerald-500 bg-emerald-50/50 p-5">
                <h3 class="font-semibold text-emerald-700 mb-2">模式 C · 免费网页</h3>
                <p class="text-sm text-gray-600 mb-3">复制提示词到第三方平台生成，零成本，适合新手</p>
                <ul class="text-xs text-gray-500 space-y-1">
                    <li>✓ 完全免费</li>
                    <li>✓ 无使用限制</li>
                    <li>✓ 适合个人创作</li>
                </ul>
            </div>
            <div class="rounded-xl border-l-4 border-amber-500 bg-amber-50/50 p-5">
                <h3 class="font-semibold text-amber-700 mb-2">模式 B · 自有 API</h3>
                <p class="text-sm text-gray-600 mb-3">使用自己的 API 密钥自动化批量生成，密钥仅内存使用</p>
                <ul class="text-xs text-gray-500 space-y-1">
                    <li>✓ 自动化批量处理</li>
                    <li>✓ 密钥不落盘</li>
                    <li>✓ 适合批量场景</li>
                </ul>
            </div>
            <div class="rounded-xl border-l-4 border-purple-500 bg-purple-50/50 p-5">
                <h3 class="font-semibold text-purple-700 mb-2">模式 A · 平台 API</h3>
                <p class="text-sm text-gray-600 mb-3">平台托管 API 全自动流水线，消耗点数，开箱即用</p>
                <ul class="text-xs text-gray-500 space-y-1">
                    <li>✓ 全自动流水线</li>
                    <li>✓ 无需配置密钥</li>
                    <li>✓ 适合企业用户</li>
                </ul>
            </div>
        </div>
    </section>
</div>
{% endblock %}