{% extends "base.html" %}

{% block title %}deepdive-search — 基于 MECE 原则的布尔搜索逻辑生成器{% endblock %}

{% block content %}
<!-- Hero -->
<section class="fade-in pt-8 pb-16 text-center relative overflow-hidden">
    <div class="absolute top-0 left-1/2 -translate-x-1/2 w-[600px] h-[600px] rounded-full bg-brand-500/5 blur-[120px] pointer-events-none"></div>
    <div class="relative z-10">
        <div class="inline-flex items-center px-3 py-1 rounded-full bg-brand-50 border border-brand-200 text-brand-700 text-xs font-medium mb-6">
            <span class="w-1.5 h-1.5 rounded-full bg-brand-500 mr-2 animate-pulse"></span>
            MECE 原则驱动的智能搜索
        </div>
        <h1 class="text-4xl md:text-5xl font-bold tracking-tight text-gray-900 mb-4 leading-tight">
            让搜索<span class="text-brand-600">不遗漏、不重复</span>
        </h1>
        <p class="text-lg text-gray-500 max-w-2xl mx-auto leading-relaxed mb-8">
            输入一段描述，DeepDive Search 自动将你的研究主题分解为互斥且穷尽的分类体系，生成精确的布尔搜索逻辑，一键适配 6 个搜索平台。
        </p>
        <div class="flex items-center justify-center space-x-3">
            <a href="#try-it" class="inline-flex items-center px-5 py-2.5 bg-brand-600 hover:bg-brand-700 text-white text-sm font-medium rounded-lg transition shadow-md shadow-brand-600/20">
                立即体验
                <svg class="w-4 h-4 ml-1.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg>
            </a>
            <a href="#what-is-mece" class="inline-flex items-center px-5 py-2.5 bg-white hover:bg-gray-50 text-gray-700 text-sm font-medium rounded-lg border border-gray-200 transition">
                了解 MECE 原则
            </a>
        </div>
    </div>
</section>

<!-- What is MECE -->
<section id="what-is-mece" class="py-16 bg-white border-y border-gray-100">
    <div class="max-w-4xl mx-auto">
        <div class="text-center mb-12">
            <p class="text-xs font-semibold text-brand-600 uppercase tracking-widest mb-2">核心概念</p>
            <h2 class="text-2xl md:text-3xl font-bold text-gray-900 mb-3">什么是 MECE？</h2>
            <p class="text-gray-500 max-w-xl mx-auto">用最简单的方式理解这个来自麦肯锡的思维框架</p>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-10">
            <!-- ME -->
            <div class="bg-gray-50 rounded-2xl p-7 border border-gray-100 relative overflow-hidden">
                <div class="absolute top-0 right-0 w-32 h-32 bg-brand-500/5 rounded-full -translate-y-1/2 translate-x-1/2"></div>
                <div class="relative">
                    <div class="inline-flex items-center justify-center w-10 h-10 rounded-xl bg-brand-600 text-white font-bold text-sm mb-4">ME</div>
                    <h3 class="text-lg font-semibold text-gray-900 mb-2">Mutually Exclusive — 相互独立</h3>
                    <p class="text-sm text-gray-600 leading-relaxed mb-4">
                        想象你把一堆衣服分到不同的衣柜里。<strong class="text-gray-900">相互独立</strong>意味着：每件衣服只能放进一个衣柜，不能同时出现在两个衣柜里。
                    </p>
                    <p class="text-sm text-gray-600 leading-relaxed">
                        在搜索中，这意味着<strong class="text-gray-900">不同分类之间没有重叠的关键词</strong>——你不会在"容错共识"和"拜占庭共识"两个分类里同时出现 "pbft"，因为那样搜索结果就会重复。
                    </p>
                    <div class="mt-5 p-3 bg-white rounded-lg border border-gray-200">
                        <p class="text-xs font-medium text-gray-500 mb-2">反例：有重叠</p>
                        <div class="flex items-center space-x-2 text-xs">
                            <span class="px-2 py-0.5 bg-red-50 text-red-600 rounded border border-red-200">容错共识: raft, <s class="text-red-400">pbft</s></span>
                            <span class="px-2 py-0.5 bg-red-50 text-red-600 rounded border border-red-200">拜占庭共识: <s class="text-red-400">pbft</s>, hotstuff</span>
                        </div>
                        <p class="text-xs font-medium text-green-600 mt-2 mb-1">正例：无重叠</p>
                        <div class="flex items-center space-x-2 text-xs">
                            <span class="px-2 py-0.5 bg-green-50 text-green-700 rounded border border-green-200">崩溃容错: raft, paxos</span>
                            <span class="px-2 py-0.5 bg-green-50 text-green-700 rounded border border-green-200">拜占庭容错: pbft, hotstuff</span>
                        </div>
                    </div>
                </div>
            </div>

            <!-- CE -->
            <div class="bg-gray-50 rounded-2xl p-7 border border-gray-100 relative overflow-hidden">
                <div class="absolute top-0 right-0 w-32 h-32 bg-brand-500/5 rounded-full -translate-y-1/2 translate-x-1/2"></div>
                <div class="relative">
                    <div class="inline-flex items-center justify-center w-10 h-10 rounded-xl bg-brand-600 text-white font-bold text-sm mb-4">CE</div>
                    <h3 class="text-lg font-semibold text-gray-900 mb-2">Collectively Exhaustive — 完全穷尽</h3>
                    <p class="text-sm text-gray-600 leading-relaxed mb-4">
                        继续用衣柜的比喻。<strong class="text-gray-900">完全穷尽</strong>意味着：所有衣服都被放进了某个衣柜，没有一件被遗漏在地板上。
                    </p>
                    <p class="text-sm text-gray-600 leading-relaxed">
                        在搜索中，这意味着<strong class="text-gray-900">所有相关方向都被覆盖</strong>——如果你研究"共识算法"，就不能只搜"Raft"而忘了"Paxos"，也不能遗漏"拜占庭容错"这个重要分支。
                    </p>
                    <div class="mt-5 p-3 bg-white rounded-lg border border-gray-200">
                        <p class="text-xs font-medium text-gray-500 mb-2">反例：有遗漏</p>
                        <div class="text-xs text-red-600 mb-1">只搜了容错共识，忘了拜占庭共识 → 漏掉一半文献</div>
                        <p class="text-xs font-medium text-green-600 mt-2 mb-1">正例：完全覆盖</p>
                        <div class="text-xs text-green-700">崩溃容错 + 拜占庭容错 = 覆盖所有共识算法类型</div>
                    </div>
                </div>
            </div>
        </div>

        <!-- MECE 合力 -->
        <div class="bg-brand-600 rounded-2xl p-8 text-white text-center relative overflow-hidden">
            <div class="absolute inset-0 bg-[radial-gradient(circle_at_30%_50%,rgba(255,255,255,0.08),transparent_70%)]"></div>
            <div class="relative z-10">
                <h3 class="text-xl font-bold mb-3">ME + CE = 搜索既不遗漏也不重复</h3>
                <p class="text-sm text-brand-100 max-w-xl mx-auto leading-relaxed mb-5">
                    当分类既不重叠（ME）又无遗漏（CE），你构造的搜索式就能精确覆盖目标领域的每一个方向，且每个方向只被搜索一次。这就是 MECE 原则对搜索的核心价值。
                </p>
                <div class="inline-flex items-center space-x-4 text-xs font-mono">
                    <span class="px-3 py-1.5 bg-white/15 rounded-lg backdrop-blur">(raft OR paxos)</span>
                    <span class="text-brand-200 font-sans font-bold">AND</span>
                    <span class="px-3 py-1.5 bg-white/15 rounded-lg backdrop-blur">(pbft OR hotstuff)</span>
                </div>
                <p class="text-xs text-brand-200 mt-3">崩溃容错 ∩ 拜占庭容错 = MECE 分解后的布尔表达式</p>
            </div>
        </div>
    </div>
</section>

<!-- How DeepDive Search Works -->
<section class="py-16">
    <div class="max-w-4xl mx-auto">
        <div class="text-center mb-12">
            <p class="text-xs font-semibold text-brand-600 uppercase tracking-widest mb-2">工作原理</p>
            <h2 class="text-2xl md:text-3xl font-bold text-gray-900 mb-3">DeepDive Search 如何工作？</h2>
            <p class="text-gray-500 max-w-xl mx-auto">三步完成从模糊想法到精确搜索式的转化</p>
        </div>

        <div class="space-y-6">
            <!-- Step 1 -->
            <div class="flex items-start space-x-5">
                <div class="flex-shrink-0 w-10 h-10 rounded-full bg-brand-600 text-white flex items-center justify-center text-sm font-bold">1</div>
                <div class="flex-1 bg-white rounded-xl p-6 border border-gray-200 shadow-sm">
                    <h3 class="text-base font-semibold text-gray-900 mb-2">输入描述，提取关键词</h3>
                    <p class="text-sm text-gray-600 leading-relaxed mb-3">
                        你不需要预先整理好关键词。直接用自然语言描述你的研究意图——"我正在研究分布式系统中的共识算法"——系统会自动从中提取核心关键词。
                    </p>
                    <div class="bg-gray-50 rounded-lg p-3 border border-gray-100">
                        <p class="text-xs text-gray-500 mb-1">输入</p>
                        <p class="text-sm text-gray-700">"研究分布式共识算法，包括 Raft、Paxos 等容错协议，以及 PBFT、HotStuff 等拜占庭容错协议"</p>
                        <p class="text-xs text-gray-500 mt-2 mb-1">自动提取</p>
                        <div class="flex flex-wrap gap-1">
                            <span class="keyword-tag">Raft</span>
                            <span class="keyword-tag">Paxos</span>
                            <span class="keyword-tag">PBFT</span>
                            <span class="keyword-tag">HotStuff</span>
                            <span class="keyword-tag">consensus</span>
                            <span class="keyword-tag">byzantine</span>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Step 2 -->
            <div class="flex items-start space-x-5">
                <div class="flex-shrink-0 w-10 h-10 rounded-full bg-brand-600 text-white flex items-center justify-center text-sm font-bold">2</div>
                <div class="flex-1 bg-white rounded-xl p-6 border border-gray-200 shadow-sm">
                    <h3 class="text-base font-semibold text-gray-900 mb-2">MECE 分解 + 布尔组合</h3>
                    <p class="text-sm text-gray-600 leading-relaxed mb-3">
                        大模型将关键词按 MECE 原则分解为互斥且穷尽的分类树，然后自动组合：同类关键词用 <code class="text-brand-700 bg-brand-50 px-1 py-0.5 rounded text-xs">OR</code> 连接（扩大覆盖），不同分类用 <code class="text-brand-700 bg-brand-50 px-1 py-0.5 rounded text-xs">AND</code> 连接（精确交叉）。内置校验机制确保分类质量。
                    </p>
                    <div class="bg-gray-50 rounded-lg p-3 border border-gray-100 font-mono text-xs">
                        <div class="text-gray-500 mb-1">MECE 分类树</div>
                        <div class="text-gray-700">
                            共识算法<br>
                            ├── 崩溃容错共识 (raft, paxos, zab)<br>
                            └── 拜占庭容错共识 (pbft, hotstuff, tendermint)
                        </div>
                        <div class="text-gray-500 mt-2 mb-1">布尔表达式</div>
                        <div class="text-brand-700">(raft OR paxos OR zab) AND (pbft OR hotstuff OR tendermint)</div>
                    </div>
                </div>
            </div>

            <!-- Step 3 -->
            <div class="flex items-start space-x-5">
                <div class="flex-shrink-0 w-10 h-10 rounded-full bg-brand-600 text-white flex items-center justify-center text-sm font-bold">3</div>
                <div class="flex-1 bg-white rounded-xl p-6 border border-gray-200 shadow-sm">
                    <h3 class="text-base font-semibold text-gray-900 mb-2">多平台输出，一键适配</h3>
                    <p class="text-sm text-gray-600 leading-relaxed mb-3">
                        同一个 MECE 分解结果，自动生成 6 个平台的搜索语法——从通用布尔到 Google 精确检索，从 LinkedIn 职业搜索到 GitHub 代码搜索。
                    </p>
                    <div class="grid grid-cols-1 sm:grid-cols-3 gap-2">
                        <div class="bg-gray-50 rounded-lg p-2.5 border border-gray-100">
                            <p class="text-[10px] font-semibold text-gray-400 uppercase mb-1">通用搜索</p>
                            <div class="space-y-0.5 text-[11px] text-gray-600">
                                <div>通用布尔</div><div>Google</div>
                            </div>
                        </div>
                        <div class="bg-gray-50 rounded-lg p-2.5 border border-gray-100">
                            <p class="text-[10px] font-semibold text-gray-400 uppercase mb-1">职业平台</p>
                            <div class="space-y-0.5 text-[11px] text-gray-600">
                                <div>LinkedIn</div><div>脉脉</div><div>猎聘</div>
                            </div>
                        </div>
                        <div class="bg-gray-50 rounded-lg p-2.5 border border-gray-100">
                            <p class="text-[10px] font-semibold text-gray-400 uppercase mb-1">开发者平台</p>
                            <div class="space-y-0.5 text-[11px] text-gray-600">
                                <div>GitHub</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Comparison -->
<section class="py-16 bg-white border-y border-gray-100">
    <div class="max-w-4xl mx-auto">
        <div class="text-center mb-12">
            <p class="text-xs font-semibold text-brand-600 uppercase tracking-widest mb-2">对比分析</p>
            <h2 class="text-2xl md:text-3xl font-bold text-gray-900 mb-3">与常规搜索方案的区别</h2>
        </div>

        <div class="overflow-x-auto">
            <table class="w-full text-sm">
                <thead>
                    <tr class="border-b-2 border-gray-200">
                        <th class="text-left py-3 px-4 text-gray-500 font-semibold">维度</th>
                        <th class="text-left py-3 px-4 text-brand-600 font-semibold">DeepDive Search</th>
                        <th class="text-left py-3 px-4 text-gray-500 font-semibold">手动构造布尔式</th>
                        <th class="text-left py-3 px-4 text-gray-500 font-semibold">搜索引擎建议</th>
                        <th class="text-left py-3 px-4 text-gray-500 font-semibold">AI 对话式搜索</th>
                    </tr>
                </thead>
                <tbody class="text-gray-600">
                    <tr class="border-b border-gray-100">
                        <td class="py-3 px-4 font-medium text-gray-900">MECE 保证</td>
                        <td class="py-3 px-4"><span class="inline-flex items-center px-2 py-0.5 bg-green-50 text-green-700 rounded text-xs font-medium">校验 + 自修正</span></td>
                        <td class="py-3 px-4 text-xs">依赖个人经验</td>
                        <td class="py-3 px-4 text-xs">无保证</td>
                        <td class="py-3 px-4 text-xs">无保证</td>
                    </tr>
                    <tr class="border-b border-gray-100">
                        <td class="py-3 px-4 font-medium text-gray-900">生成速度</td>
                        <td class="py-3 px-4 text-xs">5-15 秒</td>
                        <td class="py-3 px-4 text-xs">30-60 分钟</td>
                        <td class="py-3 px-4 text-xs">即时</td>
                        <td class="py-3 px-4 text-xs">5-20 秒</td>
                    </tr>
                    <tr class="border-b border-gray-100">
                        <td class="py-3 px-4 font-medium text-gray-900">分类结构化</td>
                        <td class="py-3 px-4"><span class="inline-flex items-center px-2 py-0.5 bg-green-50 text-green-700 rounded text-xs font-medium">树状层级输出</span></td>
                        <td class="py-3 px-4 text-xs">线性列表</td>
                        <td class="py-3 px-4 text-xs">线性列表</td>
                        <td class="py-3 px-4 text-xs">非结构化文本</td>
                    </tr>
                    <tr class="border-b border-gray-100">
                        <td class="py-3 px-4 font-medium text-gray-900">多平台适配</td>
                        <td class="py-3 px-4"><span class="inline-flex items-center px-2 py-0.5 bg-green-50 text-green-700 rounded text-xs font-medium">6 种搜索语法</span></td>
                        <td class="py-3 px-4 text-xs">单一</td>
                        <td class="py-3 px-4 text-xs">单一</td>
                        <td class="py-3 px-4 text-xs">无</td>
                    </tr>
                    <tr class="border-b border-gray-100">
                        <td class="py-3 px-4 font-medium text-gray-900">可复用性</td>
                        <td class="py-3 px-4"><span class="inline-flex items-center px-2 py-0.5 bg-green-50 text-green-700 rounded text-xs font-medium">持久化 + 导出</span></td>
                        <td class="py-3 px-4 text-xs">手动记录</td>
                        <td class="py-3 px-4 text-xs">无</td>
                        <td class="py-3 px-4 text-xs">对话历史</td>
                    </tr>
                    <tr>
                        <td class="py-3 px-4 font-medium text-gray-900">可视化</td>
                        <td class="py-3 px-4"><span class="inline-flex items-center px-2 py-0.5 bg-green-50 text-green-700 rounded text-xs font-medium">思维导图 + 列表</span></td>
                        <td class="py-3 px-4 text-xs">无</td>
                        <td class="py-3 px-4 text-xs">无</td>
                        <td class="py-3 px-4 text-xs">无</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</section>

<!-- Scenarios & Limitations -->
<section class="py-16">
    <div class="max-w-4xl mx-auto">
        <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
            <!-- 适用场景 -->
            <div>
                <p class="text-xs font-semibold text-brand-600 uppercase tracking-widest mb-2">适用场景</p>
                <h2 class="text-xl font-bold text-gray-900 mb-5">DeepDive Search 最擅长什么？</h2>
                <div class="space-y-3">
                    <div class="flex items-start space-x-3">
                        <div class="flex-shrink-0 w-8 h-8 rounded-lg bg-brand-50 flex items-center justify-center">
                            <svg class="w-4 h-4 text-brand-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"/></svg>
                        </div>
                        <div>
                            <p class="text-sm font-semibold text-gray-900">技术调研</p>
                            <p class="text-xs text-gray-500">系统性检索某一技术领域的文献与资料，确保不遗漏关键方向</p>
                        </div>
                    </div>
                    <div class="flex items-start space-x-3">
                        <div class="flex-shrink-0 w-8 h-8 rounded-lg bg-brand-50 flex items-center justify-center">
                            <svg class="w-4 h-4 text-brand-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/></svg>
                        </div>
                        <div>
                            <p class="text-sm font-semibold text-gray-900">竞品分析</p>
                            <p class="text-xs text-gray-500">按 MECE 分类穷尽搜索竞品信息，避免重复覆盖或遗漏赛道</p>
                        </div>
                    </div>
                    <div class="flex items-start space-x-3">
                        <div class="flex-shrink-0 w-8 h-8 rounded-lg bg-brand-50 flex items-center justify-center">
                            <svg class="w-4 h-4 text-brand-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/></svg>
                        </div>
                        <div>
                            <p class="text-sm font-semibold text-gray-900">文献综述 / 专利检索</p>
                            <p class="text-xs text-gray-500">学术与专利场景下生成结构化搜索策略，分类清晰可审查</p>
                        </div>
                    </div>
                    <div class="flex items-start space-x-3">
                        <div class="flex-shrink-0 w-8 h-8 rounded-lg bg-brand-50 flex items-center justify-center">
                            <svg class="w-4 h-4 text-brand-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0z"/></svg>
                        </div>
                        <div>
                            <p class="text-sm font-semibold text-gray-900">团队协作</p>
                            <p class="text-xs text-gray-500">导出搜索方案 JSON 供团队成员复用与审查，搜索策略可追溯</p>
                        </div>
                    </div>
                    <div class="flex items-start space-x-3">
                        <div class="flex-shrink-0 w-8 h-8 rounded-lg bg-brand-50 flex items-center justify-center">
                            <svg class="w-4 h-4 text-brand-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"/></svg>
                        </div>
                        <div>
                            <p class="text-sm font-semibold text-gray-900">知识体系梳理</p>
                            <p class="text-xs text-gray-500">将模糊的技术领域结构化为清晰分类树，辅助理解与教学</p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 局限性 -->
            <div>
                <p class="text-xs font-semibold text-gray-400 uppercase tracking-widest mb-2">坦诚说明</p>
                <h2 class="text-xl font-bold text-gray-900 mb-5">它不擅长什么？</h2>
                <div class="space-y-3">
                    <div class="flex items-start space-x-3">
                        <div class="flex-shrink-0 w-8 h-8 rounded-lg bg-gray-100 flex items-center justify-center">
                            <svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                        </div>
                        <div>
                            <p class="text-sm font-semibold text-gray-900">依赖 LLM 质量</p>
                            <p class="text-xs text-gray-500">生成质量受底层模型能力限制。小模型可能产生低质量分解，建议使用 GPT-4o / Qwen-Max 等强模型</p>
                        </div>
                    </div>
                    <div class="flex items-start space-x-3">
                        <div class="flex-shrink-0 w-8 h-8 rounded-lg bg-gray-100 flex items-center justify-center">
                            <svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                        </div>
                        <div>
                            <p class="text-sm font-semibold text-gray-900">非实时</p>
                            <p class="text-xs text-gray-500">单次生成约 5-15 秒，依赖 LLM 调用延迟。不适合需要即时结果的场景</p>
                        </div>
                    </div>
                    <div class="flex items-start space-x-3">
                        <div class="flex-shrink-0 w-8 h-8 rounded-lg bg-gray-100 flex items-center justify-center">
                            <svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4"/></svg>
                        </div>
                        <div>
                            <p class="text-sm font-semibold text-gray-900">本地存储上限</p>
                            <p class="text-xs text-gray-500">JSON 文件不适合存储超过 10 万条记录。大规模数据需迁移至数据库</p>
                        </div>
                    </div>
                    <div class="flex items-start space-x-3">
                        <div class="flex-shrink-0 w-8 h-8 rounded-lg bg-gray-100 flex items-center justify-center">
                            <svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 4.582 9 8z"/></svg>
                        </div>
                        <div>
                            <p class="text-sm font-semibold text-gray-900">MECE 是近似理想</p>
                            <p class="text-xs text-gray-500">MECE 是理想原则，实际生成可能存在边界模糊。系统通过校验+自修正尽量逼近，但不保证 100% 完美</p>
                        </div>
                    </div>
                    <div class="flex items-start space-x-3">
                        <div class="flex-shrink-0 w-8 h-8 rounded-lg bg-gray-100 flex items-center justify-center">
                            <svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 15a4 4 0 004 4h9a5 5 0 10-.1-9.999 5.002 5.002 0 10-9.788 0A4.001 4.001 0 003 15z"/></svg>
                        </div>
                        <div>
                            <p class="text-sm font-semibold text-gray-900">需联网加载样式</p>
                            <p class="text-xs text-gray-500">前端使用 Tailwind CSS CDN，离线环境下降级为浏览器默认样式</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Try It -->
<section id="try-it" class="py-16 bg-white border-y border-gray-100">
    <div class="max-w-xl mx-auto">
        <div class="text-center mb-8">
            <p class="text-xs font-semibold text-brand-600 uppercase tracking-widest mb-2">开始使用</p>
            <h2 class="text-2xl font-bold text-gray-900 mb-2">试试看</h2>
            <p class="text-sm text-gray-500">输入技术领域和描述文本，生成你的第一个 MECE 搜索逻辑</p>
        </div>

        <div class="bg-white rounded-2xl p-6 border border-gray-200 shadow-lg shadow-gray-200/50">
            <div class="space-y-4">
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">技术领域</label>
                    <input type="text" id="domain-input"
                        placeholder="例如: distributed-systems, machine-learning"
                        class="w-full bg-white border border-gray-300 rounded-lg px-3.5 py-2 text-sm text-gray-900 placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-brand-500 focus:border-brand-500 transition">
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">
                        描述文本
                        <span class="text-gray-400 font-normal">（输入大段文本，自动提取关键词）</span>
                    </label>
                    <textarea id="text-input" rows="5"
                        placeholder="例如：&#10;我正在研究分布式系统中的共识算法，包括 Paxos、Raft 等容错协议，以及 PBFT、HotStuff 等拜占庭容错协议。希望能找到关于这些算法的性能对比、工程实践和最新进展的资料。"
                        class="w-full bg-white border border-gray-300 rounded-lg px-3.5 py-2 text-sm text-gray-900 placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-brand-500 focus:border-brand-500 transition resize-y"></textarea>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">搜索平台</label>
                    <select id="platform-select"
                        class="w-full bg-white border border-gray-300 rounded-lg px-3.5 py-2 text-sm text-gray-900 focus:outline-none focus:ring-2 focus:ring-brand-500 focus:border-brand-500 transition">
                        <optgroup label="通用搜索">
                            <option value="generic">通用布尔</option>
                            <option value="google">Google</option>

                        </optgroup>
                        <optgroup label="职业平台">
                            <option value="linkedin">LinkedIn</option>
                            <option value="maimai">脉脉</option>
                            <option value="liepin">猎聘</option>
                        </optgroup>
                        <optgroup label="开发者平台">
                            <option value="github">GitHub</option>
                        </optgroup>
                    </select>
                </div>
                <button id="generate-btn"
                    class="w-full bg-brand-600 hover:bg-brand-700 text-white text-sm font-medium py-2.5 rounded-lg transition shadow-md shadow-brand-600/20 flex items-center justify-center space-x-2">
                    <span>生成 MECE 搜索逻辑</span>
                </button>
            </div>

            <div id="result-area" class="hidden mt-5 p-4 bg-gray-50 rounded-lg border border-gray-200">
                <div class="flex items-center justify-between mb-3">
                    <h3 class="text-sm font-semibold text-gray-900" id="result-domain"></h3>
                    <span class="text-xs font-medium text-gray-500 bg-white px-2 py-0.5 rounded-full border border-gray-200" id="result-confidence"></span>
                </div>
                <div class="mb-3">
                    <p class="text-xs font-medium text-gray-500 mb-1">提取关键词</p>
                    <div id="result-keywords" class="flex flex-wrap gap-1"></div>
                </div>
                <div class="mb-3">
                    <p class="text-xs font-medium text-gray-500 mb-1">布尔表达式</p>
                    <code class="block bg-white p-3 rounded-lg border border-gray-200 text-brand-700 text-sm break-all font-mono" id="result-expression"></code>
                </div>
                <div class="mb-3">
                    <p class="text-xs font-medium text-gray-500 mb-1">解释</p>
                    <p class="text-sm text-gray-600 leading-relaxed" id="result-explanation"></p>
                </div>
                <div id="result-platforms" class="hidden">
                    <p class="text-xs font-medium text-gray-500 mb-1">其他平台表达式</p>
                    <div id="platform-expressions" class="space-y-1"></div>
                </div>
            </div>

            <div id="error-area" class="hidden mt-5 p-3 bg-red-50 border border-red-200 rounded-lg">
                <p class="text-red-600 text-sm" id="error-message"></p>
            </div>
        </div>
    </div>
</section>

<!-- Recent Records -->
{% if recent_records %}
<section class="py-12">
    <div class="max-w-3xl mx-auto">
        <div class="flex items-center justify-between mb-5">
            <h2 class="text-lg font-bold text-gray-900">最近搜索</h2>
            {% if total_count > 0 %}
            <a href="/list" class="text-sm font-medium text-brand-600 hover:text-brand-700 transition">
                查看全部 {{ total_count }} 条 &rarr;
            </a>
            {% endif %}
        </div>
        <div class="space-y-2" id="recent-list">
            {% for record in recent_records %}
            <div class="bg-white rounded-lg p-4 border border-gray-200 hover:border-brand-200 hover:shadow-sm transition group" data-id="{{ record.record_id }}">
                <div class="flex items-center justify-between mb-1.5">
                    <span class="text-sm font-medium text-brand-600 cursor-pointer hover:underline" onclick="openDetailModal('{{ record.record_id }}')">{{ record.domain }}</span>
                    <div class="flex items-center space-x-2">
                        <span class="text-xs text-gray-400">{{ record.created_at[:10] }}</span>
                        <button onclick="event.stopPropagation(); deleteRecordById('{{ record.record_id }}').then(ok => { if(ok) { const el = document.querySelector('[data-id=\\'{{ record.record_id }}\\']'); if(el) { el.style.opacity='0'; setTimeout(() => el.remove(), 200); } } })"
                            class="text-xs text-gray-300 hover:text-red-500 transition opacity-0 group-hover:opacity-100">删除</button>
                    </div>
                </div>
                <code class="text-xs text-gray-600 break-all font-mono cursor-pointer" onclick="openDetailModal('{{ record.record_id }}')">{{ record.bool_result.expression.raw_expression[:120] }}{% if record.bool_result.expression.raw_expression|length > 120 %}...{% endif %}</code>
            </div>
            {% endfor %}
        </div>
    </div>
</section>
{% endif %}
{% endblock %}

{% block scripts %}
<script>
function onRecordDeleted(recordId) {
    const el = document.querySelector('[data-id="' + recordId + '"]');
    if (el) { el.style.opacity = '0'; setTimeout(() => el.remove(), 200); }
}

function onRecordCreated(data) {
    setTimeout(() => location.reload(), 800);
}

document.getElementById('generate-btn').addEventListener('click', async function() {
    const domain = document.getElementById('domain-input').value.trim();
    const text = document.getElementById('text-input').value.trim();
    const platform = document.getElementById('platform-select').value;

    if (!domain) { alert('请输入技术领域'); return; }
    if (!text) { alert('请输入描述文本'); return; }

    const btn = this;
    const originalText = btn.innerHTML;
    btn.innerHTML = '<span class="loading-spinner"></span><span>生成中...</span>';
    btn.disabled = true;

    document.getElementById('result-area').classList.add('hidden');
    document.getElementById('error-area').classList.add('hidden');

    try {
        const response = await fetch('/api/search', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ domain, text, platform, save: true })
        });
        const data = await response.json();

        if (data.error) {
            document.getElementById('error-area').classList.remove('hidden');
            document.getElementById('error-message').textContent = data.error;
        } else {
            document.getElementById('result-area').classList.remove('hidden');
            document.getElementById('result-domain').textContent = data.domain;
            document.getElementById('result-confidence').textContent = '置信度 ' + (data.bool_result.confidence_score * 100).toFixed(0) + '%';

            const kwContainer = document.getElementById('result-keywords');
            kwContainer.innerHTML = '';
            const keywords = data.extracted_keywords || data.input_keywords || [];
            keywords.forEach(kw => {
                const span = document.createElement('span');
                span.className = 'keyword-tag';
                span.textContent = kw;
                kwContainer.appendChild(span);
            });

            document.getElementById('result-expression').textContent = data.bool_result.expression.raw_expression;
            document.getElementById('result-explanation').textContent = data.bool_result.expression.explanation;

            const platDiv = document.getElementById('result-platforms');
            const platExprs = document.getElementById('platform-expressions');
            platExprs.innerHTML = '';
            const exprs = data.bool_result.expression.platform_expressions || data.bool_result.expression.dialect_expressions || {};
            const platEntries = Object.entries(exprs).filter(([k, v]) => k !== platform && v);
            if (platEntries.length > 0) {
                platDiv.classList.remove('hidden');
                platEntries.forEach(([name, expr]) => {
                    const div = document.createElement('div');
                    div.innerHTML = '<span class="text-xs text-gray-400 font-medium">[' + name + ']</span> <code class="text-xs text-gray-600 font-mono">' + expr + '</code>';
                    platExprs.appendChild(div);
                });
            } else {
                platDiv.classList.add('hidden');
            }
        }
    } catch (err) {
        document.getElementById('error-area').classList.remove('hidden');
        document.getElementById('error-message').textContent = '请求失败: ' + err.message;
    } finally {
        btn.innerHTML = originalText;
        btn.disabled = false;
    }
});
</script>
{% endblock %}