// About / 项目背景 deck — 4 页, 竖向滚动翻页 + 蓝色扫描线过渡
// page 1: 项目本身介绍
// page 2: 提问者 Persona (江一帆 / 22 / 学生) — 心声 rotator
// page 3: 答主 Persona (林川 / 34 / 产品经理) — 答主心声 rotator
// page 4: Solution — 镜像回答 + 8 feature 横向轮播

const TOTAL_PAGES = 7;

function AboutPage() {
  // URL ?p=2|3|4 直接进对应页 (headless 验收用)
  const initialPage = (() => {
    try {
      const p = new URLSearchParams(window.location.search).get('p');
      const n = parseInt(p, 10);
      return n >= 1 && n <= TOTAL_PAGES ? n : 1;
    } catch { return 1; }
  })();
  const [page, setPage] = React.useState(initialPage);
  const [transitioning, setTransitioning] = React.useState(false);
  const cooldownRef = React.useRef(false);
  const overlayActiveRef = React.useRef(false); // Persona popup 拦截滚动

  const goPage = React.useCallback((next) => {
    if (next < 1 || next > TOTAL_PAGES) return;
    if (next === page || cooldownRef.current) return;
    cooldownRef.current = true;
    setTransitioning(true);
    setPage(next);
    setTimeout(() => setTransitioning(false), 800);
    setTimeout(() => { cooldownRef.current = false; }, 850);
  }, [page]);

  const onWheel = React.useCallback((e) => {
    if (overlayActiveRef.current) return;
    if (Math.abs(e.deltaY) < 18) return;
    if (cooldownRef.current) return;
    if (e.deltaY > 0) goPage(page + 1);
    else goPage(page - 1);
  }, [page, goPage]);

  React.useEffect(() => {
    const onKey = (e) => {
      if (overlayActiveRef.current) return;
      if (e.key === 'ArrowDown' || e.key === 'PageDown') goPage(page + 1);
      else if (e.key === 'ArrowUp' || e.key === 'PageUp') goPage(page - 1);
    };
    window.addEventListener('keydown', onKey);
    return () => window.removeEventListener('keydown', onKey);
  }, [page, goPage]);

  return (
    <div className="about-scroll-root" onWheel={onWheel}>
      <div className="about-scroll-track"
        style={{
          height: `${TOTAL_PAGES * 100}%`,
          transform: `translateY(${(page - 1) * (-100 / TOTAL_PAGES)}%)`
        }}>
        <div className="about-scroll-page" style={{ flex: `0 0 ${100 / TOTAL_PAGES}%` }}>
          <AboutPage1/>
        </div>
        <div className="about-scroll-page" style={{ flex: `0 0 ${100 / TOTAL_PAGES}%` }}>
          <AboutPage2 overlayRef={overlayActiveRef}/>
        </div>
        <div className="about-scroll-page" style={{ flex: `0 0 ${100 / TOTAL_PAGES}%` }}>
          <AboutPage3 overlayRef={overlayActiveRef}/>
        </div>
        <div className="about-scroll-page" style={{ flex: `0 0 ${100 / TOTAL_PAGES}%` }}>
          <AboutPage4/>
        </div>
        <div className="about-scroll-page" style={{ flex: `0 0 ${100 / TOTAL_PAGES}%` }}>
          <AboutPage5/>
        </div>
        <div className="about-scroll-page" style={{ flex: `0 0 ${100 / TOTAL_PAGES}%` }}>
          <AboutPage6/>
        </div>
        <div className="about-scroll-page" style={{ flex: `0 0 ${100 / TOTAL_PAGES}%` }}>
          <AboutPage7/>
        </div>
      </div>

      {/* 扫描线过渡覆盖层 */}
      <div className={`about-transition-overlay ${transitioning ? 'on' : ''}`}/>

      {/* 右侧页码 — 4 页 */}
      <div className="about-page-dots">
        {Array.from({ length: TOTAL_PAGES }, (_, idx) => {
          const n = idx + 1;
          return (
            <button key={n}
              className={`about-dot ${page === n ? 'active' : ''}`}
              onClick={() => goPage(n)}
              aria-label={`第 ${n} 页`}>
              <span className="about-dot-num">{String(n).padStart(2, '0')}</span>
              <span className="about-dot-bar"/>
            </button>
          );
        })}
      </div>

      {/* SCROLL ↓ — 末页 (page 4) 不显示 */}
      {page < TOTAL_PAGES && (
        <div className="about-scroll-hint">
          <span className="about-scroll-hint-text">SCROLL</span>
          <span className="about-scroll-hint-arrow">↓</span>
        </div>
      )}
    </div>
  );
}

// ───── Shared 顶栏 ─────
function SharedHeader() {
  return (
    <>
      <div className="ap-header">
        <div className="ap-brand">
          <span className="ap-brand-zh">知乎</span>
          <span className="ap-brand-en">HACKATHON</span>
          <span className="ap-brand-divider"/>
          <span className="ap-ai-chip">AI</span>
          <span className="ap-brand-sub">脑洞实验室</span>
        </div>
        <div className="ap-team">
          <span className="ap-team-tag">TEAM</span>
          <span className="ap-team-name">CDM 失踪人口</span>
        </div>
      </div>
      <div className="top-line"></div>
    </>
  );
}

// ───── Page 1: 项目本身 ─────
function AboutPage1() {
  return (
    <main className="frame">
      <SharedHeader/>

      <section className="left-panel">
        <div className="info-block intro">
          <div className="small-cn">在这个模拟的知乎里，<br/>我放进了</div>
        </div>
        <div className="info-block metric">
          <div className="metric-number">20</div>
          <div className="metric-label">减肥相关的话题</div>
        </div>
        <div className="info-block metric">
          <div className="metric-number">60</div>
          <div className="metric-label">虚拟答主</div>
        </div>
        <div className="info-block metric">
          <div className="metric-number">200+</div>
          <div className="metric-label">仿真人答案</div>
        </div>
        <div className="left-bottom-copy">
          这一切，都是为了<br/>还原你在手机端的体验。<br/><br/>
          让你体验<br/>「镜像回答」是什么。
        </div>
      </section>

      <section className="blue-stage">
        <div className="big-word-stack">
          <h1 className="big-word">镜像回答</h1>
          <p className="big-word-sub">我用 48 小时复刻了一个手机版的知乎</p>
        </div>
        <div className="app-card">
          <div className="ap-browser-chrome">
            <span className="ap-browser-dot ap-dot-red"></span>
            <span className="ap-browser-dot ap-dot-yellow"></span>
            <span className="ap-browser-dot ap-dot-green"></span>
            <div className="ap-browser-url">www.2026知乎黑客松.com</div>
            <div className="ap-browser-spacer"></div>
          </div>
          <div className="app-card-img-wrap">
            <img src="assets/page1-demo.png" alt="" className="app-card-img"/>
          </div>
        </div>
      </section>

      <section className="right-panel">
        <div className="right-block">
          <div className="right-copy">
            这个时代，<br/>
            我已经受够了那种<br/>
            AI 的"标准答案"。<br/><br/>
            <span className="ap-green">经验，判断，温度</span>——<br/>
            这些 AI 永远给不了，<br/>
            只有真人能。
          </div>
        </div>
        <div className="right-block second">
          <div className="right-copy">
            我做镜像回答，<br/>
            就是想把中文互联网<br/>
            沉淀最深的那一层 ——<br/>
            知乎 <span className="ap-green-large">15 年</span>里<br/>
            <span className="ap-green-large">几千万真人</span><br/>
            写下的回答，<br/>
            在你需要的那一刻<br/>
            找回来。
          </div>
        </div>
      </section>

      <footer className="footer">
        <div className="footer-title">MIRROR ANSWERS</div>
      </footer>
    </main>
  );
}

// ───── Persona 数据 ─────
const PERSONA_ASKER = {
  no: '01',
  name: '江一帆',
  age: 22,
  occupation: '在校大学生',
  city: '上海',
  usageLines: ['想用知乎, 但从未发问', '每天问 ChatGPT 10 次'],
  quote: '我想问知乎，最后问了 ChatGPT —— 又觉得 ChatGPT 没人味。',
  portrait: 'assets/page2-portrait-cutout.png?v=2',
};

const PERSONA_ANSWERER = {
  no: '02',
  name: '林川',
  age: 34,
  occupation: '产品经理',
  city: '深圳',
  usageLines: ['知乎 8 年答主'],
  quote: '邀请回答 99+，近一个月只回答了两条',
  portrait: 'assets/answerer-portrait-cutout.png',
};

// ───── Asker 心声 (page 2) — 7 条 ─────
const ASKER_VOICES = [
  { tone: 'like',    kw: '我想要真人的回答',     body: '经验, 判断, 温度 —— AI 永远给不了, 只有走过这段的人能.' },
  { tone: 'like',    kw: '我想要立刻就答',       body: '现在想要一个还不错的答案, 至少得等 24 小时.' },
  { tone: 'like',    kw: '我想要可信的答主',     body: '我想一眼看出哪一条值得读, 不用从段子和带货里淘.' },
  { tone: 'like',    kw: '我想要知道最新的方法', body: '事情早变了, 但旧的经验, 还在被反复复用.' },
  { tone: 'like',    kw: '我想要分享',           body: '我问的这个问题, 应当让下一个跟我一样的人, 少走点弯路.' },
  { tone: 'like',    kw: '我希望搜索引擎能懂我', body: '它要听得懂我没说出口的那一层意思.' },
  { tone: 'dislike', kw: '我不喜欢问 ChatGPT',  body: '我问过的那个问题, 关掉聊天框, 就跟着聊天记录一起被忘了.' },
];

// ───── Answerer 心声 (page 3) — 7 条 (3 white + 4 red) ─────
const ANSWERER_VOICES = [
  { tone: 'like',    kw: '我不知道该回答什么',         body: '每天打开手机都有 99+ 的邀请问题, 但哪一条真的值得我回答?' },
  { tone: 'like',    kw: '我希望时间能换来最大的回报', body: '希望能帮助到更多的人, 获得更多的曝光度, 最好也能给我带来一点收益.' },
  { tone: 'like',    kw: '我希望我的回答能一直被找到', body: '写得好的答案不该一周就被压下去. 半年、一年, 都还该有人搜得到 —— 它就是我留下的东西.' },
  { tone: 'dislike', kw: '我不喜欢重复投稿',           body: '当我写了一份好的回答, 我需要不停搜相关问题并重复粘贴答案. 既没有完全适配话题, 也浪费了我的时间.' },
  { tone: 'dislike', kw: '我不喜欢回答已有答案的问题', body: '当我在知乎看到过有人回答过类似的问题, 或者我已经回答过类似的问题, 我就不愿意再去赘述一遍, 但用户并不知道这一点.' },
  { tone: 'dislike', kw: '我不喜欢和段子争宠',         body: '认真写的内容, 点赞反而不如段子多.' },
  { tone: 'dislike', kw: '我不喜欢写完石沉大海',       body: '花两小时认真答完, 阅读 50, 评论 0, 也没有人追问. 我不知道你看完做了什么.' },
];

// ───── Page 2: 提问者 Persona ─────
function AboutPage2({ overlayRef }) {
  const [expanded, setExpanded] = React.useState(false);
  const initialI = (() => {
    try {
      const v = Number(new URLSearchParams(window.location.search).get('item'));
      return Number.isFinite(v) && v >= 0 && v < ASKER_VOICES.length ? v : 0;
    } catch { return 0; }
  })();
  const [i, setI] = React.useState(initialI);
  React.useEffect(() => {
    const t = setInterval(() => setI(idx => (idx + 1) % ASKER_VOICES.length), 2800);
    return () => clearInterval(t);
  }, []);
  React.useEffect(() => {
    if (overlayRef) overlayRef.current = expanded;
  }, [expanded, overlayRef]);

  return (
    <main className="frame p2-frame">
      <SharedHeader/>

      <section className="left-panel p2-left">
        <PersonaIDCard persona={PERSONA_ASKER} onExpand={() => setExpanded(true)}/>
      </section>

      <section className="blue-stage p2-stage">
        <div className="big-word-stack p2-big-word-stack">
          <h1 className="big-word p2-big-word p3-big-word">
            <span>他 为什么 不在</span>
            <span className="p2-big-word-line2">
              知乎 <span className="p2-blue-accent">提问</span>？
            </span>
          </h1>
          <div className="p2-sub-stack">
            <div className="p2-sub-line">想问 <b>知乎</b></div>
            <div className="p2-sub-line">最后用了 <b>ChatGPT</b></div>
            <div className="p2-sub-line">又觉得 <b>没人味</b></div>
          </div>
        </div>
        <img src={PERSONA_ASKER.portrait} alt="" className="p2-portrait-burst"/>
      </section>

      <section className="right-panel p2-right">
        <PainCardStack items={ASKER_VOICES} i={i} label="心声"/>
      </section>

      <footer className="footer">
        <div className="footer-title">MIRROR ANSWERS · 02</div>
      </footer>

      {expanded && (
        <PersonaDetailOverlay persona={PERSONA_ASKER} onClose={() => setExpanded(false)}/>
      )}
    </main>
  );
}

// ───── Page 3: 答主 Persona ─────
function AboutPage3({ overlayRef }) {
  const [expanded, setExpanded] = React.useState(false);
  const initialI = (() => {
    try {
      const v = Number(new URLSearchParams(window.location.search).get('item3'));
      return Number.isFinite(v) && v >= 0 && v < ANSWERER_VOICES.length ? v : 0;
    } catch { return 0; }
  })();
  const [i, setI] = React.useState(initialI);
  React.useEffect(() => {
    const t = setInterval(() => setI(idx => (idx + 1) % ANSWERER_VOICES.length), 2800);
    return () => clearInterval(t);
  }, []);
  React.useEffect(() => {
    if (overlayRef) overlayRef.current = expanded;
  }, [expanded, overlayRef]);

  return (
    <main className="frame p2-frame p3-frame">
      <SharedHeader/>

      <section className="left-panel p2-left">
        <PersonaIDCard persona={PERSONA_ANSWERER} onExpand={() => setExpanded(true)}/>
      </section>

      <section className="blue-stage p2-stage">
        <div className="big-word-stack p2-big-word-stack p3-big-word-stack">
          <h1 className="big-word p2-big-word p3-big-word">
            <span>他 为什么 在知乎</span>
            <span className="p2-big-word-line2">
              <span className="p2-blue-accent">越答越少</span>？
            </span>
          </h1>
          <div className="p2-sub-stack">
            <div className="p2-sub-line"><b>99+</b> 的邀请，</div>
            <div className="p2-sub-line">究竟<b>哪一条</b></div>
            <div className="p2-sub-line"><b>值得</b>我回答？</div>
          </div>
        </div>
        <img src={PERSONA_ANSWERER.portrait} alt="" className="p2-portrait-burst"/>
      </section>

      <section className="right-panel p2-right">
        <PainCardStack items={ANSWERER_VOICES} i={i} label="心声"/>
      </section>

      <footer className="footer">
        <div className="footer-title">MIRROR ANSWERS · 03</div>
      </footer>

      {expanded && (
        <PersonaDetailOverlay persona={PERSONA_ANSWERER} onClose={() => setExpanded(false)}/>
      )}
    </main>
  );
}

// ───── Persona ID 卡 (参数化) ─────
function PersonaIDCard({ persona, onExpand }) {
  return (
    <div className="p2-id-card" onClick={onExpand} role="button" tabIndex={0}>
      <div className="p2-id-tag">
        <span className="p2-id-no">NO.</span>
        <span className="p2-id-no-num">{persona.no}</span>
        <span className="p2-id-divider"/>
        <span className="p2-id-tag-label">用户画像</span>
      </div>
      <div className="p2-portrait-frame">
        <img src={persona.portrait} alt="" className="p2-portrait-img"/>
        <div className="p2-portrait-cross" aria-hidden="true"/>
      </div>
      <div className="p2-id-name">{persona.name}</div>
      <div className="p2-id-meta">{persona.age} · {persona.occupation} · {persona.city}</div>
      <div className="p2-id-cue">
        <span className="p2-id-cue-line"/>
        <span className="p2-id-cue-text">点开查看详情</span>
        <span className="p2-id-cue-en">→</span>
      </div>
    </div>
  );
}

// ───── 卡片式 rotator — 当前卡 + 上一张虚影 + 大号数字 ─────
// 每张卡按 item.tone 决定样式 ('like' = 白块, 'dislike' = 红框反差)
function PainCardStack({ items, i, label }) {
  const [prev, setPrev] = React.useState(null);
  const prevRef = React.useRef(i);
  React.useEffect(() => {
    if (prevRef.current !== i) {
      const oldI = prevRef.current;
      setPrev(oldI);
      prevRef.current = i;
      const t = setTimeout(() => setPrev(null), 650);
      return () => clearTimeout(t);
    }
  }, [i]);

  const item = items[i];
  const ghost = prev !== null ? items[prev] : null;

  return (
    <div className="pcard-rotator">
      <div className="pcard-label">{label}</div>
      <div className="pcard-stack">
        {ghost && (
          <div className={`pcard pcard-ghost pcard-tone-${ghost.tone || 'like'}`} key={`g-${prev}`}>
            <div className="pcard-num">{String(prev + 1).padStart(2, '0')}</div>
            <div className="pcard-kw-wrap">
              <span className="pcard-kw">{ghost.kw}</span>
            </div>
            <div className="pcard-body">{ghost.body}</div>
          </div>
        )}
        <div className={`pcard pcard-active pcard-tone-${item.tone || 'like'}`} key={`a-${i}`}>
          <div className="pcard-num">{String(i + 1).padStart(2, '0')}</div>
          <div className="pcard-kw-wrap">
            <span className="pcard-kw">{item.kw}</span>
          </div>
          <div className="pcard-body">{item.body}</div>
        </div>
      </div>
      <div className="pcard-indicator">
        <span className="pcard-indicator-now">{String(i + 1).padStart(2, '0')}</span>
        <span className="pcard-indicator-slash">/</span>
        <span className="pcard-indicator-total">{String(items.length).padStart(2, '0')}</span>
      </div>
    </div>
  );
}

// ───── Persona 详情 popup overlay (参数化) ─────
function PersonaDetailOverlay({ persona, onClose }) {
  return (
    <div className="persona-overlay"
      onClick={onClose}
      onWheel={(e) => e.stopPropagation()}>
      <div className="persona-detail" onClick={e => e.stopPropagation()}>
        <button className="persona-close" onClick={onClose}>×</button>

        <div className="persona-portrait-wrap">
          <img src={persona.portrait} alt="" className="persona-portrait-img"/>
        </div>

        <div className="persona-fields">
          <div className="persona-field">
            <div className="persona-field-label">姓名 / NAME</div>
            <div className="persona-field-value">{persona.name}</div>
          </div>
          <div className="persona-field">
            <div className="persona-field-label">年龄 / AGE</div>
            <div className="persona-field-value">{persona.age}</div>
          </div>
          <div className="persona-field">
            <div className="persona-field-label">职业 / OCCUPATION</div>
            <div className="persona-field-value">{persona.occupation}</div>
          </div>
          <div className="persona-field">
            <div className="persona-field-label">城市 / CITY</div>
            <div className="persona-field-value">{persona.city}</div>
          </div>
          <div className="persona-field">
            <div className="persona-field-label">画像 / USAGE</div>
            <div className="persona-field-value">
              {persona.usageLines.map((line, idx) => (
                <React.Fragment key={idx}>
                  {line}
                  {idx < persona.usageLines.length - 1 && <br/>}
                </React.Fragment>
              ))}
            </div>
          </div>
        </div>

        <div className="persona-quote">"{persona.quote}"</div>
      </div>
    </div>
  );
}

// ═════════════════════════════════════════════════════════════════
// ───── Page 4: Solution — 镜像回答 + 8 feature 横向轮播 ─────
// ═════════════════════════════════════════════════════════════════

const FEATURES = [
  {
    no: '01',
    kw: '即时反应',
    body: '让真人的内容像 AI 一样实时呈现, 无延迟.',
    tag: 'REAL-TIME',
    mock: 'instant',
  },
  {
    no: '02',
    kw: '精准匹配',
    body: '识别用户意图, 在不同问题里找到适合的真人回答.',
    tag: 'MATCH',
    mock: 'match',
  },
  {
    no: '03',
    kw: '数字化评估',
    body: '内容匹配 + 权威度 + 时间 + 点赞 + 关键词 —— 数字化告诉你这个答案为什么可信.',
    tag: 'SCORE',
    mock: 'score',
  },
  {
    no: '04',
    kw: '智能总结和提醒',
    body: '让过去的答案无痛延展到现在的核心问题上.',
    tag: 'EXTEND',
    mock: 'extend',
  },
  {
    no: '05',
    kw: '刘看山总结',
    body: 'AI 自动总结提炼观点, 联网补全原本没有的洞察. 让 AI 辅助, 人类回归主流.',
    tag: 'KANSHAN',
    mock: 'kanshan',
  },
  {
    no: '06',
    kw: '先看效果再创作',
    body: '答主先看到镜像问题里的点赞情况, 再决定要不要再写一次.',
    tag: 'PREVIEW',
    mock: 'preview',
  },
  {
    no: '07',
    kw: '一次创作 · 多次收益',
    body: '专注创作好答案, 系统持续推到新问题 / 新用户底下, 被动获得关注和价值.',
    tag: 'COMPOUND',
    mock: 'compound',
  },
  {
    no: '08',
    kw: '识别真蓝海',
    body: '用户提了一个还不存在的问题 —— 系统能识别出这就是真正的蓝海.',
    tag: 'BLUE-OCEAN',
    mock: 'blueocean',
  },
];

function AboutPage4() {
  const initialI = (() => {
    try {
      const v = Number(new URLSearchParams(window.location.search).get('feat'));
      return Number.isFinite(v) && v >= 0 && v < FEATURES.length ? v : 0;
    } catch { return 0; }
  })();
  const [i, setI] = React.useState(initialI);
  const [paused, setPaused] = React.useState(false);

  // 自动轮播 — 4500ms / 张 (比心声 2800ms 慢)
  React.useEffect(() => {
    if (paused) return;
    const t = setInterval(() => setI(idx => (idx + 1) % FEATURES.length), 4500);
    return () => clearInterval(t);
  }, [paused]);

  return (
    <main className="frame p4-frame">
      <SharedHeader/>

      {/* 左栏 — Solution 身份 + 镜像回答 brand + 简介 */}
      <section className="p4-left">
        <div className="p4-section-label">解决方案 / SOLUTION</div>
        <h1 className="p4-title-en">Solution</h1>
        <div className="p4-title-cn">解决方案</div>
        <div className="p4-divider"/>
        <div className="p4-brand">
          <div className="p4-brand-cn">镜像回答</div>
          <div className="p4-brand-en">MIRROR ANSWERS</div>
        </div>
        <div className="p4-divider"/>
        <div className="p4-intro">
          我们不让 AI 回答问题.<br/>
          让 AI 把过去十五年里<br/>
          真实的人写过的答案 ——<br/>
          <span className="p4-intro-em">找回来.</span>
        </div>
      </section>

      {/* 右栏 — feature 轮播 spotlight */}
      <section className="p4-stage"
        onMouseEnter={() => setPaused(true)}
        onMouseLeave={() => setPaused(false)}>
        <FeatureCarousel items={FEATURES} i={i}/>

        <div className="feat-dots">
          {FEATURES.map((_, idx) => (
            <button key={idx}
              className={`feat-dot ${idx === i ? 'active' : ''}`}
              onClick={() => setI(idx)}
              aria-label={`Feature ${idx + 1}`}>
              <span className="feat-dot-num">{String(idx + 1).padStart(2, '0')}</span>
            </button>
          ))}
        </div>
        <div className="feat-hint">HOVER 暂停 · 点击切换</div>
      </section>

      <footer className="footer">
        <div className="footer-title">MIRROR ANSWERS · 04</div>
      </footer>
    </main>
  );
}

// ───── 特性轮播: 当前卡 + 上一张 (横向滑入/滑出) ─────
function FeatureCarousel({ items, i }) {
  const [prev, setPrev] = React.useState(null);
  const [direction, setDirection] = React.useState('forward');
  const prevRef = React.useRef(i);
  React.useEffect(() => {
    if (prevRef.current !== i) {
      const oldI = prevRef.current;
      // 计算方向 (考虑循环边界)
      const total = items.length;
      const forwardDist = (i - oldI + total) % total;
      const backwardDist = (oldI - i + total) % total;
      setDirection(forwardDist <= backwardDist ? 'forward' : 'backward');
      setPrev(oldI);
      prevRef.current = i;
      const t = setTimeout(() => setPrev(null), 620);
      return () => clearTimeout(t);
    }
  }, [i, items.length]);

  const item = items[i];
  const ghost = prev !== null ? items[prev] : null;

  return (
    <div className="feat-stack">
      {ghost && (
        <div className={`feat-card feat-card-ghost feat-dir-${direction}`} key={`g-${prev}`}>
          <FeatureCardBody feature={ghost}/>
        </div>
      )}
      <div className={`feat-card feat-card-active feat-dir-${direction}`} key={`a-${i}`}>
        <FeatureCardBody feature={item}/>
      </div>
    </div>
  );
}

function FeatureCardBody({ feature }) {
  return (
    <div className="feat-card-inner">
      <div className="feat-card-text">
        <div className="feat-num">{feature.no}</div>
        <div className="feat-kw-wrap">
          <span className="feat-kw">{feature.kw}</span>
        </div>
        <div className="feat-body">{feature.body}</div>
        <div className="feat-tag">{feature.tag}</div>
      </div>
      <div className="feat-card-visual">
        <FeaturePhone mock={feature.mock} no={feature.no}/>
      </div>
    </div>
  );
}

// ───── Mini 手机外壳 + 8 种内屏 mock 内容 ─────
function FeaturePhone({ mock, no }) {
  // #08 蓝海特殊: 两个手机并排
  if (mock === 'blueocean') return <BlueOceanTwoPhones/>;
  return (
    <div className="feat-phone-outer">
      <div className="feat-phone-inner">
        <FeaturePhoneScreen mock={mock} no={no}/>
      </div>
      <div className="feat-phone-glare"/>
    </div>
  );
}

function FeaturePhoneScreen({ mock, no }) {
  if (mock === 'instant')  return <FeatInstantReal/>;
  if (mock === 'match')    return <FeatMatchReal scroll={0}/>;
  if (mock === 'score')    return <FeatScoreReal/>;
  if (mock === 'extend')   return <FeatExtendReal/>;
  if (mock === 'kanshan')  return <FeatKanshanReal/>;
  if (mock === 'preview')  return <FeatPreviewCard/>;
  if (mock === 'compound') return <FeatCompoundCard/>;
  return <div className="mock-placeholder">FEATURE {no}</div>;
}

// ─── F3 数字化评估: 直接渲染 EvalPanel, 三行 metric 全部展开, 突出维度细节 ───
function FeatScoreReal() {
  if (typeof EvalPanel !== 'function') {
    return <div className="mock-placeholder">EvalPanel 未加载</div>;
  }
  const answer = {
    id: 'q_w18-a01-eval-demo',
    authorId: 'p018',
    body: '...',
    publishDate: '2025-09-15',           // 较新, 时效满
    voteUp: 13421, voteDown: 42, stars: 5821,
    composite: 88,
    keywords: ['代谢', '腹型肥胖', '应酬戒酒', '蛋白拉到 1.8g/kg', '12 周渐进训练'],
  };
  const persona = {
    name: '陈砚秋',
    credential: 'verified',
    credentialText: '知乎认证医师 · 北京协和医院内分泌科',
    badges: ['代谢话题优秀答主'],
    stats: { followers: 89234 },
  };
  return (
    <div className="feat-real-scroll">
      <EvalPanel
        answer={answer}
        persona={persona}
        topicAvgVotes={3500}
        sourceQuestion="中年男性 35+ 大肚子怎么减?"
        onSourceTap={() => {}}
        defaultExpanded
        recommendation={{
          core_point: '陈医生从内分泌角度给的 12 周计划, 直接套用到你"32 岁久坐程序员"场景.',
          why_fits: '你的 BMI 估计 26-29, 不到 GLP-1 用药线; 她的路径正好是"先生活方式 + 力量训练" 6 个月再评估, 跟你节奏匹配.',
        }}
      />
    </div>
  );
}

// ─── F4 AI 智能延展: 同 EvalPanel + 新 schema recommendation (核心 + 结合 + 但要注意) ───
function FeatExtendReal() {
  if (typeof EvalPanel !== 'function') {
    return <div className="mock-placeholder">EvalPanel 未加载</div>;
  }
  const answer = {
    id: 'q_w18-a04-extend-demo',
    authorId: 'p046',
    body: '...',
    publishDate: '2024-12-28',
    voteUp: 5821, voteDown: 14, stars: 1821,
    composite: 82,
    keywords: ['戒酒', '应酬话术', '医嘱软推', '跳绳半年 -18kg'],
  };
  const persona = {
    name: '老周',
    credential: 'expert',
    profession: '体制内 · 42 岁亲历者',
    stats: { followers: 14328 },
  };
  return (
    <div className="feat-real-scroll">
      <EvalPanel
        answer={answer}
        persona={persona}
        topicAvgVotes={3500}
        sourceQuestion="中年男性 35+ 大肚子怎么减?"
        onSourceTap={() => {}}
        recommendation={{
          core_point: '老周的"医嘱软推" 应酬话术, 可以直接迁移到你的程序员加班场景 — "医生让我控糖" 替代单纯说"减肥".',
          why_fits: '他 42 岁戒酒减重的路径, 跟你"32 岁久坐 + 应酬多" 几乎同源 — 你提前 10 年走他的路径, 优势更大.',
          caveat: '但他用的是"戒酒 + 跳绳", 你是程序员久坐 — 跳绳膝盖压力对久坐人群偏大, 建议先 4 周自重 + 划船机过渡, 不要一上来跳绳.',
        }}
      />
    </div>
  );
}

// 用真 q_w18 (中年男性) 答案 ID 构造场景 — DEMO_SCENARIOS 那个 -v1 是旧 ID, 跟 ANSWERS_V2 对不上
const PAGE4_SCENARIO = {
  query: '32 岁中年男生怎么减肥? 大肚子, 程序员久坐',
  state: 'A',
  qualifying: [
    { answerId: 'q_w18-a01', relevance: 96, composite: 88,
      recommendation: {
        source_intro: '这条来自 45 岁亲历者, 5 年前 95kg 现 75kg, 维持 3 年.',
        expertise_evidence: '13,421 赞同, 是中年男减重话题里的代表性长文.',
        relevance_to_user: '他写的"应酬只喝啤酒不喝白" + "餐前 30 分钟乳清蛋白" 的策略, 直接套用到你的程序员久坐 + 加班外卖场景.' } },
    { answerId: 'q_w18-a02', relevance: 95, composite: 86,
      recommendation: {
        source_intro: '这条来自心血管内科主治医师, 一线门诊视角.',
        expertise_evidence: '9,821 赞同, 心血管话题创作者长期输出.',
        relevance_to_user: '他直接给出中年男肥胖的 5 个指标 (血压 / 甘油三酯 / LDL / 胰岛素抵抗 / 脂肪肝), 你可以拿这条做体检判定基准.' } },
    { answerId: 'q_w18-a03', relevance: 94, composite: 83,
      recommendation: {
        source_intro: '这条来自 ACE-CPT 持证教练, 中年男客户 60%.',
        expertise_evidence: '6,821 赞同, 中年男训练话题代表回答.',
        relevance_to_user: '他给的 12 周渐进训练方案 (适应 / 基础 / 进阶) 直接拿走能用, 不需要你自己拼.' } },
    { answerId: 'q_w18-a04', relevance: 93, composite: 80,
      recommendation: {
        source_intro: '这条来自 42 岁体制内, 戒酒 + 跳绳 -18kg 亲历.',
        expertise_evidence: '5,821 赞同, "体制内减肥" 这个细分话题罕见的真实经验.',
        relevance_to_user: '他给的"医嘱软推" 话术帮你解决应酬这关 — 你工作酒局也少不了.' } },
    { answerId: 'q_w18-a06', relevance: 92, composite: 78,
      recommendation: {
        source_intro: '这条来自北京协和内分泌科苏予安医生.',
        expertise_evidence: '协和内分泌科 15 年门诊, 4,821 赞同.',
        relevance_to_user: '他从 GLP-1 男性专属考虑给出建议 — 你 BMI 如果到 28+ 这条直接告诉你"能不能用药".' } },
  ],
  pushedAuthors: 0,
  scoutFindings: [],
  liukanshanSummary: {
    sectionSynthesis:
      '5 位答主在两个点上有共识: (1) 中年男减肥比女性优先级更高, 是保命不只是好看; ' +
      '(2) 必须力量训练保肌, 单纯有氧 / 节食会砸代谢底座. ' +
      '分歧在用不用药 — 苏医生建议 BMI 28+ 可以考虑 GLP-1, 但亲历者警示停药反弹. ' +
      '综合建议: 先做体检拿到 5 项代谢指标, 12 周渐进训练 + 应酬话术先上, ' +
      'BMI 不到 28 不动药.',
    sectionSupplement:
      '我在调研中发现, 国家卫健委 2026 年最新《成人肥胖防治指南》, ' +
      '把"内脏脂肪面积 > 100cm²" 单独列为腹型肥胖, 是 30+ 男的高发型. ' +
      '答主们的回答还没引用这个新数据, 你可以拿这条做体检判定基准.',
    sources: [
      { title: '《成人肥胖防治指南 (2026)》 — 国家卫健委', url: 'https://www.nhc.gov.cn' },
    ],
  },
};

// 通用: 渲染 InlineMirrorPanel 在不同 scroll 位置
function FeatMatchReal({ scroll = 0 }) {
  const cache = {
    query: MOCK_QUERY,
    scenario: PAGE4_SCENARIO,
    thoughts: [],
    activeTab: 'mirror',
    scrollTop: 0,
  };
  if (typeof InlineMirrorPanel !== 'function') {
    return <div className="mock-placeholder">InlineMirrorPanel 未加载</div>;
  }
  return (
    <div className="feat-real-scroll"
      ref={el => { if (el) el.scrollTop = scroll; }}>
      <InlineMirrorPanel query={MOCK_QUERY} cache={cache} setCache={() => {}}/>
    </div>
  );
}

// ─── F6: 先看效果再创作 — 答主收到点赞通知 + 1247 位用户徽章 ───
function FeatPreviewCard() {
  return (
    <div className="fp-card-screen">
      <div className="fp-status-bar">
        <span>11:32</span>
        <span className="fp-notch"/>
        <span className="fp-status-right">●●●</span>
      </div>
      <div className="fp-msg-head">
        <div className="fp-msg-title">消息</div>
        <div className="fp-msg-count">99+</div>
      </div>
      <div className="fp-notif-card">
        <div className="fp-notif-tag">知乎 · 镜像回答</div>
        <div className="fp-like-badge">
          <span className="fp-like-num">1,247</span>
          <span className="fp-like-suffix">位用户</span>
        </div>
        <div className="fp-notif-text">
          给你的镜像回答点了赞
        </div>
        <div className="fp-notif-body">
          你过去关于该话题的一条长答, 在镜像回答里作为推荐内容展示给了新用户.
          看起来这个话题还在被讨论.
        </div>
      </div>
      <button className="fp-notif-cta">现在去更新</button>
    </div>
  );
}

// ─── F7: 一次创作多次收益 — 答主二次作答 banner ───
function FeatCompoundCard() {
  return (
    <div className="fc-card-screen">
      <div className="fc-status-bar">
        <span>11:33</span>
      </div>
      <div className="fc-q-head">
        <span className="fc-back">‹</span>
        <span className="fc-q-search">⌕</span>
      </div>
      <div className="fc-q-title">有没有快速减重的方法? 不想运动</div>
      <div className="fc-banner">
        <span className="fc-banner-arrow">↑</span>
        <div className="fc-banner-text">
          真人博主<b>更新了你的问题</b>, 请向上滑动查看
        </div>
        <span className="fc-banner-close">×</span>
      </div>
      <div className="fc-answer-card">
        <div className="fc-answer-tag">
          <span className="fc-answer-icon">⚡</span>
          <span>答主刚刚 (在你提问后) 二次作答</span>
        </div>
        <div className="fc-answer-body">
          更新一下, 想到一个去年 (2025 年) 底才逐渐浮出水面的事 ——
          当时我写那条回答的时候还只是零星信号, 现在回头看, 趋势已经很清楚了:
          <b>GLP-1 的滥用正在催生一批 "代偿性进食障碍"</b>, 而且很多人根本意识不到自己已经病了.
        </div>
        <div className="fc-answer-meta">
          <span className="fc-meta-stat">+218 赞 · 刚刚</span>
        </div>
      </div>
    </div>
  );
}

// #08 蓝海 — 两个 mini 手机并排
function BlueOceanTwoPhones() {
  return (
    <div className="feat-blueocean-pair">
      <BlueOceanPhone side="asker"/>
      <BlueOceanPhone side="answerer"/>
    </div>
  );
}

function BlueOceanPhone({ side }) {
  return (
    <div className="feat-phone-outer feat-phone-half">
      <div className="feat-phone-inner">
        {side === 'asker' ? <BoAskerScreen/> : <BoAnswererScreen/>}
      </div>
      <div className="feat-phone-glare"/>
    </div>
  );
}

function BoAskerScreen() {
  return (
    <div className="bo-screen bo-asker">
      <div className="bo-status-bar"><span>11:34</span></div>
      <div className="bo-q-head">
        <span className="bo-back">‹</span>
        <span className="bo-q-search">⌕</span>
      </div>
      <div className="bo-q-title">白水君能在 2026 知乎黑客松比赛获奖吗?</div>
      <div className="bo-empty-card">
        <div className="bo-empty-pre">这是一个特别独到的问题</div>
        <div className="bo-empty-hero">知识的海洋无穷无尽</div>
        <div className="bo-empty-sub">但你刚好站在了它的边界上</div>
        <div className="bo-empty-foot">
          我们已经把这条问题推给了 <span className="bo-num">5</span> 位相关领域的优秀答主,
          通常 24-48 小时内会有第一手回答.
        </div>
      </div>
      <div className="bo-tag-asker">用户侧 · ASKER</div>
    </div>
  );
}

function BoAnswererScreen() {
  return (
    <div className="bo-screen bo-answerer">
      <div className="bo-status-bar"><span>11:36</span></div>
      <div className="bo-msg-head">
        <span className="bo-msg-title">消息</span>
        <span className="bo-msg-count">99+</span>
      </div>
      <div className="bo-push-card">
        <div className="bo-push-tag">
          <span>📡</span>
          <span>知乎 · 镜像系统召集</span>
        </div>
        <div className="bo-push-headline">
          镜像系统给你推送了一个问题
        </div>
        <div className="bo-push-body">
          这是一道从来没有人答过的题, 有点超纲.
          但只有像你这样的全能选手才接得住 ——
          要不要来露一手?
        </div>
      </div>
      <div className="bo-push-cta">正在跳转回答页...</div>
      <div className="bo-tag-answerer">答主侧 · ANSWERER</div>
    </div>
  );
}

// ─── 真组件挂在 mini 手机里, 用 DEMO_SCENARIOS.loseweight 作 mock 数据 ───
const MOCK_QUERY = '32 岁中年男生怎么减肥? 大肚子, 程序员久坐';

function FeatInstantReal() {
  // 用 InlineLoader 渲染 — 刘看山正在思考 + 思考过程流
  const thoughts = [
    { t: 1, phase: 'split-done',
      message: '把"32 岁中年男减肥" 拆成 3 个子话题',
      detail: { rootTopic: '代谢 · 腹型肥胖 · 久坐人群', dimensions: ['内分泌', '运动', '饮食'] } },
    { t: 2, phase: 'scout-done',
      message: '联网搜索主流方法',
      detail: { popularMethods: ['16:8 断食', '力量训练', '司美格鲁肽', '高蛋白饮食'] } },
    { t: 3, phase: 'agent-dispatch-done',
      message: '派出 6 个 agent 去匹配相关答案',
      detail: { candidatesByDim: [{ name: '内分泌', n: 12 }, { name: '运动', n: 18 }, { name: '饮食', n: 22 }] } },
    { t: 4, phase: 'scoring',
      message: '打分中: 内容匹配 + 权威度 + 时效 + 赞数' },
  ];
  if (typeof InlineLoader !== 'function') {
    return <div className="mock-placeholder">InlineLoader 未加载</div>;
  }
  return <InlineLoader thoughts={thoughts}/>;
}

function FeatKanshanReal() {
  // 用 LiukanshanSummaryCard 直接渲染总结
  const sce = typeof DEMO_SCENARIOS !== 'undefined' ? DEMO_SCENARIOS.loseweight : null;
  if (typeof LiukanshanSummaryCard !== 'function' || !sce) {
    return <div className="mock-placeholder">LiukanshanSummaryCard 未加载</div>;
  }
  // 增强 summary: 加 sectionSupplement (本来是 null) 给"答主没提到 联网洞察" 演示
  const summary = {
    ...sce.liukanshanSummary,
    sectionSupplement:
      '我在调研中发现, 国家卫健委 2026 年最新《成人肥胖防治指南》, ' +
      '把"内脏脂肪面积 > 100cm²" 单独列为腹型肥胖, 是 30+ 男的高发型. ' +
      '答主们的回答还没引用这个新数据, 你可以拿这条做体检判定基准.',
    sources: [
      { title: '《成人肥胖防治指南 (2026)》 — 国家卫健委', url: 'https://www.nhc.gov.cn' },
    ],
  };
  return (
    <div className="feat-real-scroll">
      <LiukanshanSummaryCard
        state="A"
        summary={summary}
        authors={[]}
        onAuthorTap={() => {}}
      />
    </div>
  );
}

// 全部 mock 共用的假问题 — 沿着真产品的风格画 ("白水君" + 梗)
const MOCK_Q_TITLE = '白水君能否在这一次知乎黑客松比赛上得奖?';
const MOCK_Q_BODY  = '谢邀, 人在美国, 刚下飞机.';
const MOCK_PERSONA = {
  name: '白水君',
  bio: '前端工程师 · 知乎黑客松选手',
  avatarUrl: typeof avatarUrl === 'function'
    ? avatarUrl({ avatarSeed: 'baishuijun-cdm-team' }, 64)
    : 'https://picsum.photos/seed/baishuijun-cdm-team/64/64',
};

// 知乎问题头 — 复用真产品的色块 + 排版
function MockQHeader({ small = false }) {
  return (
    <div className={`mock-q-head ${small ? 'is-small' : ''}`}>
      <div className="mock-zhihu-bar">
        <span className="mock-zhihu-logo">知</span>
        <span className="mock-zhihu-tab">问题</span>
        <span className="mock-zhihu-tab-mute">回答</span>
        <span className="mock-zhihu-search">⌕</span>
      </div>
      <div className="mock-q-title">{MOCK_Q_TITLE}</div>
      {!small && (
        <div className="mock-q-meta">
          <span>关注 <b>3</b></span>
          <span>·</span>
          <span>被浏览 <b>1,247</b></span>
        </div>
      )}
    </div>
  );
}

// 答主行
function MockAuthorRow({ persona = MOCK_PERSONA, mirror = false }) {
  return (
    <div className="mock-author">
      <div className="mock-avatar"
        style={{ backgroundImage: `url(${persona.avatarUrl})` }}/>
      <div className="mock-author-meta">
        <div className="mock-author-name">
          {persona.name}
          {mirror && <span className="mock-mirror-badge">镜像</span>}
        </div>
        <div className="mock-author-bio">{persona.bio}</div>
      </div>
      <div className="mock-follow">+ 关注</div>
    </div>
  );
}

// ─── #01 即时反应 ── 答案流式呈现, 跟 AI 一样实时
function MockInstant() {
  return (
    <div className="mock-screen">
      <MockQHeader/>
      <MockAuthorRow mirror/>
      <div className="mock-answer-body">
        <div className="mock-stream-line">{MOCK_Q_BODY}</div>
        <div className="mock-stream-line">
          先说结论: <b>有戏</b>. 评委盯了 48 小时的 demo,
        </div>
        <div className="mock-stream-line mock-stream-typing">
          就 等 镜像回答 出场<span className="mock-cursor">▍</span>
        </div>
      </div>
      <div className="mock-instant-badge">
        <span>⚡</span><span>0.5s 真人内容</span>
      </div>
    </div>
  );
}

// ─── #02 精准匹配 ── 镜像问题列表
function MockMatch() {
  const items = [
    { q: '镜像回答这个 demo 能不能在评委那儿过?', pct: 94 },
    { q: '48 小时复刻知乎, 能拿黑客松奖吗?',     pct: 88 },
    { q: '知乎黑客松哪些 team 是真的有产品力?',  pct: 81 },
  ];
  return (
    <div className="mock-screen">
      <MockQHeader small/>
      <div className="mock-match-label">已找到 12 个镜像问题</div>
      <div className="mock-match-list">
        {items.map((it, idx) => (
          <div key={idx} className="mock-match-row">
            <span className="mock-match-mirror">镜</span>
            <span className="mock-match-text">{it.q}</span>
            <span className="mock-match-pct">{it.pct}%</span>
          </div>
        ))}
      </div>
      <div className="mock-match-tag">基于语义匹配 · 非关键词</div>
    </div>
  );
}

// ─── #03 数字化评估 ── 五维评分卡
function MockScore() {
  const dims = [
    { label: '内容匹配', v: 92 },
    { label: '答主权威', v: 88 },
    { label: '时效性',   v: 70 },
    { label: '点赞数',   v: 95 },
    { label: '关键词',   v: 86 },
  ];
  return (
    <div className="mock-screen">
      <MockQHeader small/>
      <div className="mock-score-card">
        <div className="mock-score-top">
          <div className="mock-score-title">这个答案为什么可信</div>
          <div className="mock-score-overall">
            <span className="mock-score-big">86</span>
            <span className="mock-score-small">/100</span>
          </div>
        </div>
        <div className="mock-score-bars">
          {dims.map(d => (
            <div key={d.label} className="mock-score-row">
              <span className="mock-score-label">{d.label}</span>
              <div className="mock-score-bar">
                <div className="mock-score-bar-fill" style={{ width: d.v + '%' }}/>
              </div>
              <span className="mock-score-val">{d.v}</span>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

// ─── #04 智能总结和提醒 ── AI 把旧答案延展到新问题
function MockExtend() {
  return (
    <div className="mock-screen">
      <MockQHeader small/>
      <div className="mock-extend-old">
        <span className="mock-extend-old-tag">2024 · 旧答案</span>
        <div className="mock-extend-old-body">
          上次黑客松, 我们做了语义匹配引擎...
        </div>
      </div>
      <div className="mock-extend-arrow">
        <span className="mock-arrow-line"/>
        <span className="mock-arrow-label">AI 智能延展</span>
        <span className="mock-arrow-line"/>
      </div>
      <div className="mock-extend-new">
        <span className="mock-extend-new-tag">本次 · 2026</span>
        <div className="mock-extend-new-body">
          老经验适配到 <b>{`"得奖与否"`}</b> 的新追问 ——
          把"评委关心 demo 完成度" 这条直接套上去.
        </div>
      </div>
    </div>
  );
}

// ─── #05 刘看山总结 ── AI 收尾
function MockKanshan() {
  return (
    <div className="mock-screen">
      <MockQHeader small/>
      <div className="mock-kanshan-card">
        <div className="mock-kanshan-head">
          <div className="mock-kanshan-avatar">
            <div className="mock-kanshan-face">
              <div className="mock-kanshan-eye"/>
              <div className="mock-kanshan-eye right"/>
              <div className="mock-kanshan-mouth"/>
            </div>
          </div>
          <div className="mock-kanshan-title-stack">
            <div className="mock-kanshan-title">刘看山总结</div>
            <div className="mock-kanshan-sub">综合 12 条真人回答 + 联网洞察</div>
          </div>
        </div>
        <ul className="mock-kanshan-bullets">
          <li>评委看重 demo 完成度 + 真实问题</li>
          <li>48h 复刻知乎手机版 — 已实现</li>
          <li>差异: 真人答案 vs 模板 AI</li>
        </ul>
        <div className="mock-kanshan-cite">— 让 AI 辅助, 让人类回归主流</div>
      </div>
    </div>
  );
}

// ─── #06 先看效果再创作 ── 答主预览镜像问题热度
function MockPreview() {
  return (
    <div className="mock-screen">
      <MockQHeader small/>
      <div className="mock-preview-banner">
        答主提示 · 你的旧答案<br/>
        已经在 <b>3 个镜像问题</b> 下被阅读 ——
      </div>
      <div className="mock-preview-stats">
        <div className="mock-stat">
          <span className="mock-stat-num">8.5k</span>
          <span className="mock-stat-lbl">浏览</span>
        </div>
        <div className="mock-stat">
          <span className="mock-stat-num">124</span>
          <span className="mock-stat-lbl">赞</span>
        </div>
        <div className="mock-stat">
          <span className="mock-stat-num">37</span>
          <span className="mock-stat-lbl">收藏</span>
        </div>
      </div>
      <div className="mock-preview-cta">要不要为这个问题再写一次?</div>
      <div className="mock-preview-btns">
        <span className="mock-btn mock-btn-pri">写一次</span>
        <span className="mock-btn">先看看</span>
      </div>
    </div>
  );
}

// ─── #07 一次创作多次收益 ── 一篇答案被推到多个新问题
function MockCompound() {
  return (
    <div className="mock-screen">
      <MockQHeader small/>
      <div className="mock-compound-original">
        <span className="mock-compound-tag">你 2023 写过</span>
        <div className="mock-compound-orig-body">
          关于黑客松快速验证产品形态的回答 (1.2 万赞)
        </div>
      </div>
      <div className="mock-compound-fanout">
        <div className="mock-compound-row">
          <span className="mock-compound-arrow">↘</span>
          <span className="mock-compound-q">本次得奖问题</span>
        </div>
        <div className="mock-compound-row">
          <span className="mock-compound-arrow">↘</span>
          <span className="mock-compound-q">如何 48h 出 demo</span>
        </div>
        <div className="mock-compound-row">
          <span className="mock-compound-arrow">↘</span>
          <span className="mock-compound-q">评委到底看什么</span>
        </div>
      </div>
      <div className="mock-compound-stat">
        <span>+ 3 个新问题被推送</span>
        <span className="mock-compound-stat-num">+218</span>
      </div>
    </div>
  );
}

// ─── #08 识别真蓝海 ── 全站没人答, 这就是新机会
function MockBlueOcean() {
  return (
    <div className="mock-screen">
      <MockQHeader/>
      <div className="mock-blue-search">
        <span className="mock-blue-label">全站搜索匹配 ——</span>
        <span className="mock-blue-zero">0 条</span>
        <span className="mock-blue-zero-sub">类似问题</span>
      </div>
      <div className="mock-blue-badge">
        <span className="mock-blue-wave">🌊</span>
        <span>蓝海问题</span>
      </div>
      <div className="mock-blue-meta">
        这个问题从来没人问过.<br/>
        第一个真人回答 ——<br/>
        就 <b>是 你</b>.
      </div>
    </div>
  );
}

// ═════════════════════════════════════════════════════════════════
// ───── Page 5: Value — 对比 + slogan ─────
// ═════════════════════════════════════════════════════════════════
function AboutPage5() {
  return (
    <main className="frame p5-frame">
      <SharedHeader/>

      <section className="p5-body">
        <div className="p5-top">
          <h1 className="big-word p5-title">
            VALUE <span className="p5-slash">/</span> 价值
          </h1>
          <div className="p5-slogan">
            <div className="p5-slogan-main">新瓶装老酒</div>
            <div className="p5-slogan-sub">
              让几千万真人答案, 在 AI 时代继续焕发光彩.
            </div>
          </div>
        </div>

        <div className="p5-grid-wrap">
          {/* 镜像列圆角悬浮卡背景 — 绝对定位, 跨所有 4 行 */}
          <div className="p5-mirror-card-bg"/>
          <div className="p5-table">
            {/* Header row */}
            <div className="p5-cell p5-cell-rowlabel"></div>
            <div className="p5-cell p5-cell-header">通用 AI</div>
            <div className="p5-cell p5-cell-header">知乎真人问答</div>
            <div className="p5-cell p5-cell-header p5-cell-mirror">
              <span className="p5-pop-block p5-pop-block-sm">镜像回答</span>
            </div>

            {/* 准确性 */}
            <div className="p5-cell p5-cell-rowlabel">准确性</div>
            <div className="p5-cell">~90%, 偶有幻觉</div>
            <div className="p5-cell">真实经验, 精准</div>
            <div className="p5-cell p5-cell-mirror">95% 真人 + AI 补</div>

            {/* 时效性 */}
            <div className="p5-cell p5-cell-rowlabel">时效性</div>
            <div className="p5-cell">即时</div>
            <div className="p5-cell">等 2-3 天</div>
            <div className="p5-cell p5-cell-mirror">即时</div>

            {/* 温度 */}
            <div className="p5-cell p5-cell-rowlabel">温度</div>
            <div className="p5-cell">模拟</div>
            <div className="p5-cell">真实</div>
            <div className="p5-cell p5-cell-mirror">真实</div>
          </div>
        </div>

        <div className="p5-closing">
          这是 <span className="p5-pop-block">独属于知乎</span> 的 feature.<br/>
          让旧答案不旧, 让新问题有 <span className="p5-pop-text">新答</span>.
        </div>
      </section>

      <footer className="footer">
        <div className="footer-title">MIRROR ANSWERS · 05</div>
      </footer>
    </main>
  );
}

// ═════════════════════════════════════════════════════════════════
// ───── Page 6: 技术 / TECH — AI 集群 + 提示词工程 ─────
// ═════════════════════════════════════════════════════════════════
function AboutPage6() {
  return (
    <main className="frame p6-frame">
      <SharedHeader/>

      <section className="p6-body">
        {/* 顶部标题 */}
        <div className="p6-top">
          <h1 className="big-word p6-title">
            技术 <span className="p6-slash">/</span> TECH
          </h1>
          <div className="p6-subtitle">AI 集群 + 提示词工程</div>
        </div>

        {/* 两栏并排 */}
        <div className="p6-cols">
          {/* 左栏: AI 集群 */}
          <div className="p6-col">
            <div className="p6-col-label">
              <span className="p6-col-num">01</span>
              <span className="p6-col-name">AI 集群</span>
              <span className="p6-col-en">/ AGENT CLUSTER</span>
            </div>
            <h2 className="p6-col-headline">
              不是 <span className="p6-blue">1</span> 个 AI,
              是 <span className="p6-blue">6</span> 个 AI 一起干
            </h2>
            <div className="p6-points">
              <div className="p6-point">
                <span className="p6-point-num">01</span>
                <div className="p6-point-body">
                  <div className="p6-point-text">6 个 AI 各司其职</div>
                </div>
              </div>
              <div className="p6-point">
                <span className="p6-point-num">02</span>
                <div className="p6-point-body">
                  <div className="p6-point-text">该接力的接力, 该一起的一起</div>
                </div>
              </div>
              <div className="p6-point">
                <span className="p6-point-num">03</span>
                <div className="p6-point-body">
                  <div className="p6-point-text">
                    比 1 个 AI 快 <span className="p6-big-num">2.5</span> 倍
                  </div>
                  <div className="p6-point-sub">25 秒 → 10 秒</div>
                </div>
              </div>
            </div>
          </div>

          {/* 右栏: Prompt 工程 */}
          <div className="p6-col">
            <div className="p6-col-label">
              <span className="p6-col-num">02</span>
              <span className="p6-col-name">提示词工程</span>
              <span className="p6-col-en">/ PROMPT ENGINEERING</span>
            </div>
            <h2 className="p6-col-headline">
              Prompt 教 AI <span className="p6-blue">4</span> 件事
            </h2>
            <div className="p6-rows">
              <div className="p6-row">
                <div className="p6-row-text">AI 不会的题, 直接说不会</div>
                <div className="p6-row-metric">拒绝率 <b>100%</b></div>
              </div>
              <div className="p6-row">
                <div className="p6-row-text">把大问题拆成小问题, 同时找答案</div>
                <div className="p6-row-metric">拆成 <b>2-6</b> 个方向</div>
              </div>
              <div className="p6-row">
                <div className="p6-row-text">用反例教 AI, 让它不被字面词骗</div>
                <div className="p6-row-metric">主题判断 <b>≥95%</b></div>
              </div>
              <div className="p6-row">
                <div className="p6-row-text">答案的优点和坑, AI 都告诉你</div>
                <div className="p6-row-metric">覆盖率 <b>100%</b></div>
              </div>
            </div>
          </div>
        </div>
      </section>

      <footer className="footer">
        <div className="footer-title">MIRROR ANSWERS · 06</div>
      </footer>
    </main>
  );
}

// ═════════════════════════════════════════════════════════════════
// ───── Page 7: NEXT — slogan + ASK + 联系名片 ─────
// ═════════════════════════════════════════════════════════════════
function AboutPage7() {
  return (
    <main className="frame p7-frame">
      <SharedHeader/>

      <section className="p7-body">
        {/* 左侧: NEXT + slogan + ASK */}
        <div className="p7-left">
          <h1 className="big-word p7-title">NEXT</h1>

          <div className="p7-slogan">
            <span className="p7-slogan-line">
              把创作的<span className="p7-slogan-blue">意义</span>
            </span>
            <span className="p7-slogan-line">归还给人类</span>
          </div>

          <div className="p7-ask">
            <div className="p7-ask-label">ASK</div>
            <div className="p7-ask-text">
              <span className="p7-ask-arrow">→</span>
              把「<b>镜像回答</b>」放进知乎正式产品.
            </div>
          </div>
        </div>

        {/* 右侧: 名片 */}
        <div className="p7-right">
          {/* 名片头: 头像 + 名字 + motto */}
          <div className="p7-card-head">
            <div className="p7-avatar-wrap">
              <img src="assets/baishuijun-avatar.png" alt="" className="p7-avatar"/>
            </div>
            <div className="p7-name-block">
              <div className="p7-name">白水君</div>
              <div className="p7-motto">「逆流而上」</div>
            </div>
          </div>

          <div className="p7-divider"/>

          {/* 教育背景 + QR 并排 */}
          <div className="p7-edu-qr">
            <div className="p7-edu">
              <div className="p7-section-label">教育背景 / EDUCATION</div>
              <div className="p7-edu-list">
                <div className="p7-edu-item">
                  <div className="p7-edu-school">福州大学</div>
                  <div className="p7-edu-degree">艺术设计 · 本科</div>
                </div>
                <div className="p7-edu-item">
                  <div className="p7-edu-school">德保罗大学</div>
                  <div className="p7-edu-degree">创业学 · 硕士</div>
                </div>
                <div className="p7-edu-item">
                  <div className="p7-edu-school">西蒙菲沙大学</div>
                  <div className="p7-edu-degree">数字媒体 · 硕士在读</div>
                  <div className="p7-edu-sub">(Center for Digital Media)</div>
                </div>
              </div>
            </div>

            <div className="p7-qr-wrap">
              <img src="assets/baishuijun-qr.png" alt="" className="p7-qr"/>
              <div className="p7-qr-label">扫码关注我的知乎</div>
            </div>
          </div>

          <div className="p7-divider"/>

          {/* 资格认证 */}
          <div className="p7-cert">
            <div className="p7-section-label">资格认证 / CERTIFICATIONS</div>
            <div className="p7-cert-list">
              <span className="p7-cert-chip">PMP</span>
              <span className="p7-cert-chip">CPMAI</span>
              <span className="p7-cert-chip">NPDP</span>
            </div>
          </div>

          <div className="p7-divider"/>

          {/* 工作机会 + 邮箱 */}
          <div className="p7-contact">
            <div className="p7-contact-label">工作机会 / 了解我的更多项目</div>
            <a href="mailto:Jacksonq716@gmail.com" className="p7-email">
              Jacksonq716@gmail.com
            </a>
          </div>
        </div>
      </section>

      <footer className="footer">
        <div className="footer-title">MIRROR ANSWERS · 07</div>
      </footer>
    </main>
  );
}

Object.assign(window, { AboutPage });