/* pages-site.jsx — 什么是量子催眠（分层阅读）/ 朵洛莉丝 / 课程 / 文章 / 文章详情 / 资源 / 证言 / 关于 / FAQ / 预约 */

/* ================= 什么是量子催眠 ================= */
function Learn() {
  const [layer, setLayer] = React.useState('mid');
  const cats = ['30 秒', '5 分钟', '深读'];

  React.useEffect(() => { window.__setLayer = setLayer; }, []);

  return (
    <>
      <LearnHeaderLight />

      {/* 分层切换 */}
      <div style={{ position: 'sticky', top: 76, zIndex: 500, background: 'rgba(247,249,248,.94)', backdropFilter: 'blur(16px)', borderTop: '1px solid var(--line)', borderBottom: '1px solid var(--line)' }}>
        <div className="wrap" style={{ display: 'flex', alignItems: 'center', gap: 4, height: 58 }}>
          <span style={{ fontFamily: 'var(--f-mono)', fontSize: 10, letterSpacing: '.16em', color: 'var(--txt-3)', textTransform: 'uppercase', marginRight: 14 }}>阅读深度</span>
          {cats.map((c) => (
            <button key={c} onClick={() => setLayer(['short', 'mid', 'deep'][cats.indexOf(c)])}
              style={{
                border: 0, background: layer === ['short', 'mid', 'deep'][cats.indexOf(c)] ? 'var(--teal-900)' : 'none',
                color: layer === ['short', 'mid', 'deep'][cats.indexOf(c)] ? '#fff' : 'var(--txt-2)',
                padding: '8px 16px', fontSize: 13, borderRadius: 'var(--btn-radius)', transition: 'all .3s'
              }}>{c}</button>
          ))}
          <span style={{ marginLeft: 'auto', fontFamily: 'var(--f-mono)', fontSize: 10, letterSpacing: '.1em', color: 'var(--txt-3)' }}>
            同一份内容 · 三种耐心
          </span>
        </div>
      </div>

      <section className="sec" style={{ paddingTop: 'clamp(36px,4vw,60px)' }}>
        <div className="wrap">
          <div className="split" style={{ gridTemplateColumns: 'minmax(0,1.55fr) minmax(0,.75fr)', alignItems: 'start' }}>
            <div>
              {layer === 'short' && <LayerShort />}
              {layer === 'mid' && <LayerMid />}
              {layer === 'deep' && <LayerDeep />}
            </div>
            <aside style={{ position: 'sticky', top: 154 }}>
              <div className="card" style={{ padding: 24 }}>
                <div style={{ fontFamily: 'var(--f-mono)', fontSize: 10, letterSpacing: '.16em', textTransform: 'uppercase', color: 'var(--txt-3)' }}>本文目录</div>
                <ul style={{ marginTop: 16, display: 'flex', flexDirection: 'column', gap: 11 }}>
                  {['它从哪来', '它可能带来什么改变', '与传统催眠的区别', '操作者是谁', '你不会遇到的事'].map((t, i) => (
                    <li key={t} style={{ display: 'flex', gap: 9, fontSize: 13.5, color: 'var(--txt-2)' }}>
                      <span style={{ fontFamily: 'var(--f-mono)', fontSize: 10, color: 'var(--gold-deep)', paddingTop: 3 }}>0{i + 1}</span>{t}
                    </li>
                  ))}
                </ul>
                <hr className="rule-soft" style={{ margin: '22px 0' }} />
                <div style={{ fontSize: 12.5, color: 'var(--txt-3)', lineHeight: 1.7, fontWeight: 300 }}>
                  量子催眠技术是美国量子催眠学院的国际注册商标。量子催眠中国是其指定的简体中文课程全球唯一官方代表。
                </div>
              </div>
              <div className="card" style={{ marginTop: 16, padding: 24, background: 'var(--teal-900)', border: 0 }}>
                <div style={{ fontFamily: 'var(--f-mono)', fontSize: 10, letterSpacing: '.16em', textTransform: 'uppercase', color: 'var(--teal-300)' }}>下一步</div>
                <h4 style={{ marginTop: 12, fontSize: 18, color: '#fff' }}>想体验一次？</h4>
                <p style={{ marginTop: 8, fontSize: 13, color: 'rgba(255,255,255,.72)', lineHeight: 1.7, fontWeight: 300 }}>
                  全国持证操作者，按城市就近安排。
                </p>
                <button className="btn btn-gold btn-sm btn-block" style={{ marginTop: 16 }} onClick={() => window.__go('book')}>预约个案</button>
              </div>
            </aside>
          </div>
        </div>
      </section>

      <BecomePractitioner />
    </>
  );
}

function LayerShort() {
  return (
    <div className="reveal in">
      <div style={{ fontSize: 'clamp(21px,2.4vw,29px)', lineHeight: 1.62, fontFamily: 'var(--f-serif)', color: 'var(--teal-900)', letterSpacing: '-.01em' }}>
        它把人带到 <em style={{ fontStyle: 'normal', borderBottom: '1px solid var(--gold)', paddingBottom: 2 }}>θ 脑波</em> 的深层状态，
        在那里 revisit 一段更早的记忆，并与一个比头脑更清醒的层面——
        它称之为"潜意识"——对话。
      </div>
      <div className="grid g2" style={{ marginTop: 34, gap: 0, borderTop: '1px solid var(--line)' }}>
        {[
          ['它解决什么', '焦虑、无法解释的恐惧、反复出现的关系模式、身体上找不到原因的不适。'],
          ['它不做什么', '不做医疗诊断、不替代治疗、不做远程催眠、不主导你的答案。'],
        ].map(([a, b]) => (
          <div key={a} style={{ padding: '24px 24px 24px 0', borderRight: '1px solid var(--line)' }}>
            <div style={{ fontFamily: 'var(--f-mono)', fontSize: 10, letterSpacing: '.16em', textTransform: 'uppercase', color: 'var(--gold-deep)' }}>{a}</div>
            <p style={{ marginTop: 10, fontSize: 15, lineHeight: 1.8, color: 'var(--txt-2)', fontWeight: 300 }}>{b}</p>
          </div>
        ))}
      </div>
      <div style={{ marginTop: 30, display: 'flex', gap: 12, flexWrap: 'wrap' }}>
        <button className="btn btn-ghost btn-sm" onClick={() => window.__setLayer('mid')}>继续读 5 分钟版 →</button>
      </div>
    </div>
  );
}

function LayerMid() {
  return (
    <div className="reveal in">
      <Block h="它从哪来">
        <p>量子催眠由朵洛莉丝·侃南（Dolores Cannon，1931–2014）创立。她在近五十年的回溯催眠实践中，逐步放弃传统催眠的暗示与引导方式，转为一种近乎"记者式"的追问——不预设、不引导、只记录。</p>
        <p>她因此完成了十九本完全基于催眠案例的著作。2012 年，这项技术被带到中国。</p>
      </Block>
      <Block h="它可能带来什么改变">
        <p>清除过往的创伤，是量子催眠最常见的部分。"过往"包含更早期的经历——通过重新深入面对这些体验，并追溯到与之相生相伴的情绪的原因，人们就可以在各个层面真正放下。</p>
        <p>解除精神与情绪上的困扰，比如压力、焦虑、害怕和恐惧。这些困扰常常在催眠之后立即改善。</p>
        <p>转化悲伤的情绪，在失去亲人及所爱之人时释放无助感受的能力；消除对死亡的恐惧；认识到我们都是有目标地选择自己的人生。</p>
      </Block>
      <Block h="与传统催眠的区别">
        <p>传统催眠多在浅层 α 脑波下运作，宣称可以进行"自我催眠"。量子催眠则将来访者带至最深层 θ 脑波状态（也叫梦游态），进行深度自我探索。</p>
        <p>这个状态是传统催眠技术不愿意探索的领域，因为会发生很多常人"无法理解的事情"。但在这里，来访者能经由正确的引导，与"潜意识"相遇并互动。</p>
      </Block>
      <Block h="操作者是谁">
        <p>朵洛莉丝·侃南一开始就给量子催眠操作者做了一个非常严格的定位：<strong>协助者，而非主导者（或治疗者）</strong>。</p>
        <p>但做协助者绝不意味着更容易。恰好相反，他需要放弃小我最擅长的角色——掌控者。他不能通过主动的暗示将自己的信仰体系强加给来访者，更不能直接包办来访者问题的答案。</p>
      </Block>
      <Block h="你不会在真正的量子催眠中遇到的事">
        <p>远程催眠被明确禁止；未经许可泄露隐私不被允许；以主观视角强迫来访者体验操作者想要的画面——这三件事在合格的量子催眠中不会发生。</p>
      </Block>
      <DeepCta />
    </div>
  );
}

function LayerDeep() {
  return (
    <div className="reveal in">
      <Block h="深度 · Depth">
        <p>不同于很多宣称可以进行"自我催眠"的、仅在浅层 α 脑波下运作的催眠技术，量子催眠是一个将来访者带至最深层 θ 脑波状态（也叫梦游态）下，进行深度自我探索的过程。</p>
        <p>这个状态是传统催眠技术不愿意探索的领域，因为会发生很多常人"无法理解的事情"。但在这里，来访者能经由量子催眠技术的正确引导，与伟大的"潜意识"（非心理学概念，可理解为高我或超意识）力量相遇并互动。</p>
      </Block>
      <Block h="定位 · Position">
        <p>量子催眠操作者本身并不是所谓的"管道"，而是帮助来访者与高维度潜意识之间形成管道的助力，或只是管道的一部分。真正的管道是来访者自己。</p>
        <p>朵奶奶也无数次强调，她不是灵媒，而是一个向导与记者。这是量子催眠与其他大多数尤其是宣扬"通灵"的催眠之间最核心的不同。</p>
        <div className="pull">每个人都无可避免地受到"小我"（Ego）的影响，以及自身信仰系统及认知的限制。以主导者的身份控制整个过程，必然会受到自身小我意识的扭曲。</div>
      </Block>
      <Block h="简洁 · Simplicity">
        <p>量子催眠的每一个步骤都是朵奶奶经过多年实践总结和精炼而来的。它绝不故弄玄虚，没有一个多余的步骤，也没有一个可以减掉的环节。</p>
        <p>在这样简洁的同时，它却又非常有效。它无需各种头脑把戏的装饰，只要正确的运用，它就是纯粹和强大的。</p>
      </Block>
      <Block h="并非「管道」与灵媒">
        <p>真正的量子催眠过程直指问题核心，但是"潜意识"永远带着完全纯然的、爱的频率，没有一个例外。如果你遇到一个纷繁复杂而又让你感到困惑甚至恐惧的量子催眠，那绝不是纯净的量子催眠。</p>
      </Block>
      <Block h="进入催眠态">
        <p>整个过程可能持续五小时以上：面谈、引导进入、回溯、与潜意识对话、整合与醒来。中途不会预留吃饭的时间，请在来之前吃饱。</p>
        <p>意图是关键。当你决定要做一次量子催眠的时候，"潜意识"已经准备好向你揭示问题的答案。而头脑中那个逻辑分析和判断的部分，需要被提醒：在催眠的时候暂时退居二线。</p>
      </Block>
      <DeepCta />
    </div>
  );
}

function Block({ h, children }) {
  return (
    <div style={{ marginBottom: 44 }}>
      <h2 style={{ fontSize: 'clamp(23px,2.1vw,30px)', marginBottom: 16 }}>{h}</h2>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
        {React.Children.map(children, (c) =>
          c && c.type === 'div' ? c : <div style={{ fontSize: 16.5, lineHeight: 1.86, color: 'var(--txt-2)', fontWeight: 300 }}>{c}</div>
        )}
      </div>
    </div>
  );
}

function DeepCta() {
  return (
    <div className="card" style={{ background: 'var(--cloud-2)', border: '1px solid var(--line)', padding: 30, marginTop: 12 }}>
      <div className="grid g2" style={{ gap: 24, alignItems: 'center' }}>
        <div>
          <h4 style={{ fontSize: 20 }}>读到这里，通常有两个方向</h4>
          <p style={{ marginTop: 10, fontSize: 14, color: 'var(--txt-2)', lineHeight: 1.75, fontWeight: 300 }}>
            想体验的人去预约；想学习的人去课程。两者都要先确认一件事：你为什么要做这件事。
          </p>
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
          <button className="btn btn-primary btn-sm btn-block" onClick={() => window.__go('book')}>预约一次个案</button>
          <button className="btn btn-ghost btn-sm btn-block" onClick={() => window.__go('courses')}>查看课程</button>
        </div>
      </div>
    </div>
  );
}

/* ================= 朵洛莉丝 ================= */
function Dolores() {
  return (
    <>
      <section className="sec" style={{ background: 'var(--ink)', color: 'var(--on-dark)', paddingBottom: 'clamp(40px,5vw,72px)' }}>
        <div className="wrap">
          <div className="split" style={{ gridTemplateColumns: 'minmax(0,.8fr) minmax(0,1.2fr)', alignItems: 'center' }}>
            <div>
              <div style={{ aspectRatio: '3/4', borderRadius: 'var(--radius-lg)', overflow: 'hidden', background: 'rgba(255,255,255,.06)', border: '1px solid rgba(238,244,243,.14)', display: 'grid', placeItems: 'center' }}>
                <div style={{ textAlign: 'center', padding: 24 }}>
                  <div style={{ fontFamily: 'var(--f-mono)', fontSize: 10, letterSpacing: '.2em', color: 'rgba(238,244,243,.4)', textTransform: 'uppercase' }}>Portrait</div>
                  <div style={{ marginTop: 10, fontSize: 12.5, color: 'rgba(238,244,243,.5)', lineHeight: 1.7 }}>朵洛莉丝·侃南 肖像<br />（建议替换为官方授权照片）</div>
                </div>
              </div>
            </div>
            <div>
              <Eyebrow>1931 — 2014</Eyebrow>
              <h1 className="d1" style={{ marginTop: 20, fontSize: 'clamp(34px,4.4vw,60px)' }}>朵洛莉丝·侃南</h1>
              <p style={{ marginTop: 8, fontFamily: 'var(--f-mono)', fontSize: 11, letterSpacing: '.2em', color: 'var(--teal-300)', textTransform: 'uppercase' }}>Dolores Cannon · 回溯催眠大师 · QHHT® 创立者</p>
              <p className="lede" style={{ marginTop: 24, color: 'var(--on-dark-2)' }}>
                她用近五十年时间，做了一件在当时看来很奇怪的事：不引导，不解释，只是把人带入深层状态，
                然后像记者一样记录他们的回答。这些记录后来变成了十九本书，和一门被带到全世界的技术。
              </p>
              <div style={{ marginTop: 28, display: 'flex', gap: 26, flexWrap: 'wrap' }}>
                {[['1968', '开始回溯催眠实践'], ['1980s', '发展出 QHHT 方法'], ['12', '作品被译为中文'], ['19', '本著作']].map(([a, b]) => (
                  <div key={a}>
                    <div style={{ fontFamily: 'var(--f-serif)', fontSize: 26, color: 'var(--gold)' }}>{a}</div>
                    <div style={{ fontSize: 12, color: 'rgba(238,244,243,.5)', marginTop: 2 }}>{b}</div>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>
      </section>

      <section className="sec">
        <div className="wrap">
          <SecHead eyebrow="她留下的" title="十九本书，全部基于催眠案例"
            sub="不是理论推演，是逐字记录。这也是为什么她的书读起来像对话，而不像教科书。" />
          <div className="grid g3">
            {QD.bookList.map((b, i) => (
              <Reveal key={b.t} delay={i * 60}>
                <div className="card hover" style={{ height: '100%' }}>
                  <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', gap: 12 }}>
                    <div className="tag ink">{b.y}</div>
                    <span className="num" style={{ fontSize: 10 }}>{String(i + 1).padStart(2, '0')}</span>
                  </div>
                  <h3 style={{ marginTop: 18, fontSize: 20, fontFamily: 'var(--f-serif)' }}>{b.t}</h3>
                  <div style={{ fontFamily: 'var(--f-mono)', fontSize: 10, letterSpacing: '.1em', color: 'var(--txt-3)', marginTop: 6, textTransform: 'uppercase' }}>{b.en}</div>
                  <p style={{ marginTop: 14, fontSize: 14, color: 'var(--txt-2)', lineHeight: 1.75, fontWeight: 300 }}>{b.d}</p>
                </div>
              </Reveal>
            ))}
          </div>
          <div style={{ marginTop: 34 }}>
            <Btn kind="ghost" onClick={() => window.__go('library')} arw>书籍与视频资料</Btn>
          </div>
        </div>
      </section>

      <section className="sec" style={{ background: 'var(--cloud-2)' }}>
        <div className="wrap">
          <div className="split" style={{ alignItems: 'center' }}>
            <div>
              <Eyebrow>传承</Eyebrow>
              <h2 className="d2" style={{ marginTop: 18 }}>技术留下来了，<br />边界也留下来了。</h2>
              <p className="lede" style={{ marginTop: 20 }}>
                量子催眠中国是量子催眠学院指定的简体中文课程全球唯一官方代表。
                所有操作者都已同意遵守行为指南与职业道德守则。
              </p>
            </div>
            <ul className="nlist">
              <li><span className="k">01</span><div><h4>操作者行为指南</h4><p>为了保证操作者更明晰量子催眠教学的基本原则，更好地实践技术并帮助个案而设计。</p></div></li>
              <li><span className="k">02</span><div><h4>职业道德守则</h4><p>所有操作者都已同意遵守，并全力维护量子催眠职业的正直、诚实和专业能力。</p></div></li>
              <li><span className="k">03</span><div><h4>唯一官方代表</h4><p>量子催眠在中国没有其他官方代表。请通过本站或公众号核实任何自称授权的机构。</p></div></li>
            </ul>
          </div>
        </div>
      </section>
    </>
  );
}

/* ================= 课程 ================= */
function Courses() {
  const { requireAuth } = useAuth();
  const [done, setDone] = React.useState(null);

  return (
    <>
      <section className="sec-tight" style={{ paddingTop: 'clamp(44px,5vw,76px)' }}>
        <div className="wrap">
          <Eyebrow>课程与活动</Eyebrow>
          <div style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', gap: 32, flexWrap: 'wrap' }}>
            <h1 className="d1" style={{ marginTop: 20, maxWidth: '14ch' }}>两条通往操作者的路</h1>
            <p className="lede" style={{ maxWidth: '40ch', paddingBottom: 6 }}>
              线上系统课适合无法脱产的人；六日工作坊适合需要现场反馈的人。
              两者都包含一阶段证书。
            </p>
          </div>
        </div>
      </section>

      <section style={{ paddingBottom: 'clamp(40px,5vw,72px)' }}>
        <div className="wrap">
          <div className="grid g3" style={{ alignItems: 'stretch' }}>
            {QD.courses.map((c) => (
              <Reveal key={c.id}>
                <div className="course" style={{ height: '100%' }}>
                  <div className="top">
                    <div className="lvl">{c.lvl}</div>
                    <h3>{c.t}</h3>
                    <div style={{ display: 'flex', gap: 8, marginTop: 14 }}>
                      <span className="tag">{c.form}</span><span className="tag ink">{c.lang}</span>
                    </div>
                    <div className="price">
                      <span className="v">{c.price}</span><span className="u">含材料与证书</span>
                    </div>
                  </div>
                  <div className="body">
                    <ul style={{ display: 'flex', flexDirection: 'column', gap: 11 }}>
                      {c.points.map((p) => <li key={p}><span className="bx" />{p}</li>)}
                    </ul>
                    <p style={{ fontSize: 13, color: 'var(--txt-3)', lineHeight: 1.7, marginTop: 'auto', paddingTop: 8, fontWeight: 300 }}>{c.note}</p>
                  </div>
                  <div className="foot">
                    <div className="seats"><span className="dot-live" />{c.seats}</div>
                    <Btn kind={c.hot ? 'primary' : 'ghost'} block size="sm"
                      onClick={() => requireAuth('enroll', () => setDone(c.id))}>
                      {done === c.id ? '已提交报名 ✓' : '报名这一期'}
                    </Btn>
                  </div>
                </div>
              </Reveal>
            ))}
          </div>
          <p style={{ marginTop: 24, fontSize: 13, color: 'var(--txt-3)', fontWeight: 300 }}>
            报名需要先关注公众号（用于接收开课通知与材料）。价格与具体排期以运营后台配置为准，本站为原型演示。
          </p>
        </div>
      </section>

      <section className="sec" style={{ background: 'var(--cloud-2)' }}>
        <div className="wrap">
          <div className="split">
            <div>
              <Eyebrow>报名之后</Eyebrow>
              <h2 className="d2" style={{ marginTop: 18 }}>四步走进课堂</h2>
            </div>
            <ul className="nlist">
              {[
                ['确认条件', '十八岁以上，具备稳定自我状态。无需任何心理学基础。'],
                ['完成缴费与资料', '发票、学习手册与观看权限会同步到公众号。'],
                ['进入学习', '线上课按单元解锁；工作坊按日程现场签到。'],
                ['测验与证书', '结课选择题测验通过后，获得一阶段证书与论坛权限。'],
              ].map(([a, b], i) => (
                <li key={a}><span className="k">0{i + 1}</span><div><h4>{a}</h4><p>{b}</p></div></li>
              ))}
            </ul>
          </div>
        </div>
      </section>
    </>
  );
}

/* ================= 文章流 ================= */
function Posts() {
  const [cat, setCat] = React.useState('全部');
  const cats = ['全部', '入门', '漫画', '征稿'];
  const list = cat === '全部' ? QD.posts : QD.posts.filter((p) => p.cat === cat);

  return (
    <>
      <section className="sec-tight" style={{ paddingTop: 'clamp(44px,5vw,76px)' }}>
        <div className="wrap">
          <div style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', gap: 28, flexWrap: 'wrap' }}>
            <div>
              <Eyebrow>文章</Eyebrow>
              <h1 className="d1" style={{ marginTop: 20 }}>来自公众号的记录</h1>
              <p className="lede" style={{ marginTop: 20, maxWidth: '56ch' }}>
                公众号发布后自动同步到此，图片重新压缩、排版重新清洗。
                保留原文，去掉一切不必要的东西。
              </p>
            </div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8, paddingBottom: 8 }}>
              <span className="tag wx">{Ico.sync()} 已同步 7 篇</span>
            </div>
          </div>

          <div style={{ display: 'flex', gap: 6, marginTop: 34, borderBottom: '1px solid var(--line)', paddingBottom: 0, flexWrap: 'wrap' }}>
            {cats.map((c) => (
              <button key={c} onClick={() => setCat(c)}
                style={{
                  border: 0, background: 'none', padding: '10px 16px', fontSize: 13.5,
                  color: cat === c ? 'var(--teal-900)' : 'var(--txt-3)',
                  borderBottom: '1.5px solid ' + (cat === c ? 'var(--teal-500)' : 'transparent'),
                  marginBottom: -1, transition: 'all .3s'
                }}>{c}</button>
            ))}
          </div>
        </div>
      </section>

      <section style={{ paddingBottom: 'clamp(52px,6vw,88px)' }}>
        <div className="wrap">
          <div className="grid g3" style={{ rowGap: 46 }}>
            {list.map((p, i) => (
              <Reveal key={p.id} delay={(i % 3) * 70}><PostCard p={p} /></Reveal>
            ))}
          </div>
        </div>
      </section>

      <section style={{ paddingBottom: 'clamp(52px,6vw,88px)' }}>
        <div className="wrap"><FollowStrip /></div>
      </section>
    </>
  );
}

/* ================= 文章详情 ================= */
function PostDetail({ id }) {
  const p = QD.posts.find((x) => x.id === id) || QD.posts[0];
  const { user, requireAuth } = useAuth();
  const [saved, setSaved] = React.useState(false);
  const go = window.__go;
  const related = QD.posts.filter((x) => x.id !== p.id).slice(0, 3);

  const onSave = () => requireAuth('favorite', () => setSaved(true));

  return (
    <>
      <article>
        <div className="wrap" style={{ maxWidth: 800, paddingTop: 'clamp(38px,4.6vw,68px)' }}>
          <div style={{ display: 'flex', gap: 9, alignItems: 'center', flexWrap: 'wrap' }}>
            <span className="tag">{p.cat}</span>
            <span className="tag wx">{Ico.wechat()} 同步自公众号</span>
          </div>
          <h1 className="d1" style={{ marginTop: 22, fontSize: 'clamp(32px,4vw,52px)', lineHeight: 1.2 }}>{p.t}</h1>
          <div style={{ marginTop: 24, paddingBottom: 26, borderBottom: '1px solid var(--line)', display: 'flex', alignItems: 'center', gap: 18, flexWrap: 'wrap' }}>
            <span style={{ fontFamily: 'var(--f-mono)', fontSize: 10.5, letterSpacing: '.1em', color: 'var(--txt-3)', textTransform: 'uppercase' }}>
              {p.date.replace(/-/g, '.')} · {p.read.toLocaleString()} 阅读
            </span>
            <div style={{ marginLeft: 'auto', display: 'flex', gap: 8 }}>
              <button className="btn btn-ghost btn-sm" onClick={onSave} style={{ gap: 7 }}>
                {saved ? '✓ 已收藏' : '收藏'}
              </button>
              <button className="btn btn-ghost btn-sm">分享</button>
            </div>
          </div>

          <div style={{ marginTop: 34, display: 'flex', flexDirection: 'column', gap: 20 }}>
            {p.body.map(([kind, text], i) => {
              if (kind === 'h2') return <h2 key={i} style={{ fontSize: 'clamp(22px,2.1vw,28px)', marginTop: 20 }}>{text}</h2>;
              if (kind === 'q') return (
                <blockquote key={i} style={{ margin: '12px 0', paddingLeft: 22, borderLeft: '2px solid var(--gold)' }}>
                  <p style={{ fontFamily: 'var(--f-serif)', fontSize: 'clamp(19px,1.9vw,24px)', lineHeight: 1.62, color: 'var(--teal-900)' }}>{text}</p>
                </blockquote>
              );
              return <p key={i} style={{ fontSize: 17, lineHeight: 1.92, color: 'var(--txt-2)', fontWeight: 300 }}>{text}</p>;
            })}
          </div>

          <div style={{ marginTop: 44, paddingTop: 26, borderTop: '1px solid var(--line)', display: 'flex', gap: 12, justifyContent: 'space-between', flexWrap: 'wrap', alignItems: 'center' }}>
            <p style={{ fontSize: 13, color: 'var(--txt-3)', fontWeight: 300 }}>
              原文首发于「量子催眠中国」订阅号
            </p>
            <Btn kind="quiet" onClick={() => go('posts')}>← 返回文章列表</Btn>
          </div>
        </div>
      </article>

      <section style={{ marginTop: 'clamp(40px,5vw,72px)' }}>
        <div className="wrap"><FollowStrip /></div>
      </section>

      <section className="sec">
        <div className="wrap">
          <SecHead eyebrow="继续读" title="相关文章" />
          <div className="grid g3">
            {related.map((r, i) => <Reveal key={r.id} delay={i * 70}><PostCard p={r} /></Reveal>)}
          </div>
        </div>
      </section>
    </>
  );
}

/* ================= 书籍与视频 ================= */
function Library() {
  const go = window.__go;
  return (
    <>
      <section className="sec-tight" style={{ paddingTop: 'clamp(44px,5vw,76px)' }}>
        <div className="wrap">
          <Eyebrow>书籍与视频</Eyebrow>
          <h1 className="d1" style={{ marginTop: 20, maxWidth: '16ch' }}>她自己写的，和她留下的影像</h1>
          <p className="lede" style={{ marginTop: 22, maxWidth: '58ch' }}>
            十九本著作均由催眠案例整理而成。视频为课程与访谈片段。
          </p>
        </div>
      </section>

      <section style={{ paddingBottom: 'clamp(40px,5vw,68px)' }}>
        <div className="wrap">
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill,minmax(210px,1fr))', gap: 22 }}>
            {QD.bookList.map((b, i) => (
              <Reveal key={b.t} delay={i * 50}>
                <div style={{ cursor: 'pointer' }}>
                  <div style={{ aspectRatio: '2/3', borderRadius: 'var(--radius)', background: 'var(--cloud-2)', border: '1px solid var(--line)', position: 'relative', overflow: 'hidden', display: 'grid', placeItems: 'center' }}>
                    <div style={{ position: 'absolute', inset: 0, background: 'repeating-linear-gradient(135deg,rgba(12,63,68,.035) 0 8px,transparent 8px 16px)' }} />
                    <div style={{ position: 'relative', textAlign: 'center', padding: '0 16px' }}>
                      <div style={{ fontFamily: 'var(--f-serif)', fontSize: 17, color: 'var(--teal-900)', lineHeight: 1.4 }}>{b.t}</div>
                      <div style={{ fontFamily: 'var(--f-mono)', fontSize: 8.5, letterSpacing: '.14em', color: 'var(--txt-3)', marginTop: 8, textTransform: 'uppercase' }}>封面待替换</div>
                    </div>
                  </div>
                  <h4 style={{ marginTop: 14, fontSize: 15 }}>{b.t}</h4>
                  <div style={{ fontSize: 12, color: 'var(--txt-3)', marginTop: 3 }}>{b.y} · {b.en}</div>
                </div>
              </Reveal>
            ))}
          </div>
        </div>
      </section>

      <section className="sec" style={{ background: 'var(--cloud-2)' }}>
        <div className="wrap">
          <SecHead eyebrow="影像" title="视频精选" sub="朵洛莉丝访谈、课程实录、学员分享。"
            right={<Btn kind="ghost" size="sm" onClick={() => go('posts')} arw>文章里的视频</Btn>} />
          <div className="grid g3">
            {[['朵洛莉丝谈潜意识是什么', '07:24', '访谈'], ['进入前世是一种什么样的体验', '11:08', '访谈'], ['一阶段课程介绍', '04:52', '课程']].map(([t, d, k], i) => (
              <Reveal key={t} delay={i * 70}>
                <div className="card hover" style={{ padding: 0, overflow: 'hidden', cursor: 'pointer' }}>
                  <div style={{ aspectRatio: '16/9', background: 'var(--teal-900)', position: 'relative', display: 'grid', placeItems: 'center' }}>
                    <div style={{ width: 46, height: 46, borderRadius: '50%', border: '1px solid rgba(255,255,255,.4)', display: 'grid', placeItems: 'center', color: '#fff' }}>{Ico.play()}</div>
                    <span style={{ position: 'absolute', right: 10, bottom: 10, background: 'rgba(0,0,0,.5)', color: '#fff', fontFamily: 'var(--f-mono)', fontSize: 10, padding: '2px 6px', borderRadius: 2 }}>{d}</span>
                  </div>
                  <div style={{ padding: '16px 18px 20px' }}>
                    <div className="tag">{k}</div>
                    <h4 style={{ marginTop: 10, fontSize: 16, lineHeight: 1.45 }}>{t}</h4>
                  </div>
                </div>
              </Reveal>
            ))}
          </div>
        </div>
      </section>
    </>
  );
}

/* ================= 证言 ================= */
function Voices() {
  const go = window.__go;
  return (
    <>
      <section className="sec-tight" style={{ paddingTop: 'clamp(44px,5vw,76px)' }}>
        <div className="wrap">
          <Eyebrow>来访者与学员</Eyebrow>
          <h1 className="d1" style={{ marginTop: 20, maxWidth: '15ch' }}>他们说的，比我们说的更准</h1>
        </div>
      </section>
      <section style={{ paddingBottom: 'clamp(48px,6vw,84px)' }}>
        <div className="wrap">
          <div className="grid g2" style={{ rowGap: 26 }}>
            {[...QD.testimonials, ...QD.testimonials].map((t, i) => (
              <Reveal key={i} delay={i * 50}>
                <div className="card" style={{ height: '100%', justifyContent: 'space-between' }}>
                  <p style={{ fontFamily: 'var(--f-serif)', fontSize: 'clamp(18px,1.7vw,23px)', lineHeight: 1.62, color: 'var(--teal-900)' }}>
                    <span style={{ color: 'var(--gold)' }}>「</span>{t.q}<span style={{ color: 'var(--gold)' }}>」</span>
                  </p>
                  <div className="byline">
                    <div className="avatar" style={{ display: 'grid', placeItems: 'center', fontFamily: 'var(--f-serif)', color: 'var(--teal-700)' }}>{t.init}</div>
                    <div><div className="n">{t.n}</div><div className="r">{t.r}</div></div>
                  </div>
                </div>
              </Reveal>
            ))}
          </div>
        </div>
      </section>
      <section className="sec dark noise">
        <div className="wrap" style={{ maxWidth: 760, textAlign: 'center' }}>
          <h2 className="d2">成为她们中的一个</h2>
          <p className="lede" style={{ margin: '20px auto 0', maxWidth: '46ch' }}>预约需要先关注公众号，方便安排与提醒。全程一对一，禁止远程。</p>
          <div style={{ marginTop: 30, display: 'flex', gap: 12, justifyContent: 'center', flexWrap: 'wrap' }}>
            <Btn kind="gold" onClick={() => go('book')} arw>预约个案</Btn>
          </div>
        </div>
      </section>
    </>
  );
}

/* ================= 关于 ================= */
function About() {
  return (
    <>
      <section className="sec-tight" style={{ paddingTop: 'clamp(44px,5vw,76px)' }}>
        <div className="wrap">
          <Eyebrow>关于我们</Eyebrow>
          <h1 className="d1" style={{ marginTop: 20, maxWidth: '17ch' }}>一个不太像机构的机构</h1>
          <p className="lede" style={{ marginTop: 24, maxWidth: '58ch' }}>
            2012 年，朵洛莉丝·侃南把这项技术带到中国。此后我们做的事很单调：
            培养操作者、翻译材料、维护原则不被稀释。
          </p>
        </div>
      </section>

      <section style={{ paddingBottom: 'clamp(44px,5vw,76px)' }}>
        <div className="wrap">
          <div className="grid g4">
            {[['2012', '技术进入中国'], ['简体中文', '唯一官方代表'], ['全国', '持证操作者网络'], ['19 本', '著作中文版']].map(([a, b], i) => (
              <Reveal key={b} delay={i * 60}>
                <div style={{ paddingTop: 20, borderTop: '1px solid var(--line)' }}>
                  <div style={{ fontFamily: 'var(--f-serif)', fontSize: 'clamp(24px,2.4vw,34px)', color: 'var(--teal-900)', letterSpacing: '-.02em' }}>{a}</div>
                  <div style={{ fontSize: 13, color: 'var(--txt-3)', marginTop: 4 }}>{b}</div>
                </div>
              </Reveal>
            ))}
          </div>
        </div>
      </section>

      <section className="sec" style={{ background: 'var(--cloud-2)' }}>
        <div className="wrap">
          <div className="split">
            <div>
              <Eyebrow>团队</Eyebrow>
              <h2 className="d2" style={{ marginTop: 18 }}>谁在维护这件事</h2>
              <p className="lede" style={{ marginTop: 18 }}>
                课程、翻译、个案接待与内容。团队很小，大部分工作由持证操作者兼任。
              </p>
            </div>
            <div className="grid g2" style={{ gap: 14 }}>
              {[['课程与教学', '审核讲师资质、维护课纲与考核标准'], ['个案服务中心', '按城市匹配操作者、跟进预约'], ['内容与翻译', '整理案例、维护资料库'], ['技术与运营', '站点、公众号同步、报名系统']].map(([a, b]) => (
                <div key={a} className="card" style={{ padding: 22 }}>
                  <h4 style={{ fontSize: 16, fontFamily: 'var(--f-sans)', fontWeight: 500 }}>{a}</h4>
                  <p style={{ marginTop: 8, fontSize: 13.5, color: 'var(--txt-2)', lineHeight: 1.7, fontWeight: 300 }}>{b}</p>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      <section className="sec">
        <div className="wrap">
          <div className="card" style={{ padding: 'clamp(28px,3.4vw,52px)', borderLeft: '2px solid var(--gold)' }}>
            <div className="split" style={{ alignItems: 'center' }}>
              <div>
                <Eyebrow tone="gold">人员招募</Eyebrow>
                <h2 className="d3" style={{ marginTop: 16 }}>我们需要能做长线的人</h2>
                <p style={{ marginTop: 14, fontSize: 15, color: 'var(--txt-2)', lineHeight: 1.8, maxWidth: '44ch', fontWeight: 300 }}>
                  内容编辑、翻译、个案服务。不要求你是从业者，但要求你对这件事有耐心。
                </p>
              </div>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
                <Btn kind="primary" href="mailto:online@qhhtchina.com" as="a">投递简历</Btn>
                <span style={{ fontSize: 12, color: 'var(--txt-3)', textAlign: 'center' }}>online@qhhtchina.com</span>
              </div>
            </div>
          </div>
        </div>
      </section>
    </>
  );
}

/* ================= FAQ ================= */
function Faq() {
  const [open, setOpen] = React.useState('0-0');
  return (
    <>
      <section className="sec-tight" style={{ paddingTop: 'clamp(44px,5vw,76px)' }}>
        <div className="wrap">
          <Eyebrow>常见问题</Eyebrow>
          <h1 className="d1" style={{ marginTop: 20, maxWidth: '15ch' }}>你可能正想问的</h1>
          <p className="lede" style={{ marginTop: 22, maxWidth: '52ch' }}>
            老站的这一页有十七个问题，全部平铺。我们按"你现在的处境"分了三组。
          </p>
        </div>
      </section>

      <section style={{ paddingBottom: 'clamp(48px,6vw,84px)' }}>
        <div className="wrap">
          <div className="split" style={{ gridTemplateColumns: 'minmax(0,.6fr) minmax(0,1.4fr)', alignItems: 'start' }}>
            <aside style={{ position: 'sticky', top: 110 }}>
              {QD.faqGroups.map((g, gi) => (
                <a key={g.g} href={'#fg' + gi} className="nav-link"
                  onClick={(e) => { e.preventDefault(); const el = document.getElementById('fg' + gi); if (el) window.scrollTo({ top: el.offsetTop - 120, behavior: 'smooth' }); }}
                  style={{ display: 'block', padding: '10px 0', borderBottom: '1px solid var(--line-soft)', fontSize: 14 }}>
                  {g.g}
                </a>
              ))}
              <div className="card" style={{ marginTop: 24, padding: 20, background: 'var(--cloud-2)' }}>
                <div style={{ fontSize: 13, color: 'var(--txt-2)', lineHeight: 1.7, fontWeight: 300 }}>没找到答案？直接在公众号里留言，客服会人工回复。</div>
              </div>
            </aside>
            <div>
              {QD.faqGroups.map((g, gi) => (
                <div key={g.g} id={'fg' + gi} style={{ marginBottom: 44 }}>
                  <h3 style={{ fontSize: 13, fontFamily: 'var(--f-mono)', letterSpacing: '.16em', textTransform: 'uppercase', color: 'var(--gold-deep)', marginBottom: 14 }}>{g.g}</h3>
                  {g.items.map(([q, a], qi) => {
                    const k = gi + '-' + qi;
                    const isOpen = open === k;
                    return (
                      <div key={k} style={{ borderBottom: '1px solid var(--line)' }}>
                        <button onClick={() => setOpen(isOpen ? null : k)}
                          style={{ width: '100%', display: 'flex', alignItems: 'flex-start', gap: 16, padding: '20px 0', border: 0, background: 'none', textAlign: 'left' }}>
                          <span style={{ fontFamily: 'var(--f-mono)', fontSize: 10, color: 'var(--txt-3)', paddingTop: 6, flex: 'none' }}>{String(qi + 1).padStart(2, '0')}</span>
                          <span style={{ flex: 1, fontFamily: 'var(--f-serif)', fontSize: 'clamp(16px,1.4vw,19px)', lineHeight: 1.5, color: isOpen ? 'var(--teal-700)' : 'var(--ink)', transition: 'color .3s' }}>{q}</span>
                          <span style={{ flex: 'none', color: isOpen ? 'var(--teal-500)' : 'var(--txt-3)', transform: isOpen ? 'rotate(45deg)' : 'none', transition: 'transform .35s', fontSize: 20, lineHeight: 1, paddingTop: 2 }}>+</span>
                        </button>
                        <div style={{ maxHeight: isOpen ? 400 : 0, overflow: 'hidden', transition: 'max-height .45s var(--ease), opacity .35s', opacity: isOpen ? 1 : 0 }}>
                          <p style={{ padding: '0 0 24px 32px', fontSize: 15, lineHeight: 1.86, color: 'var(--txt-2)', maxWidth: '64ch', fontWeight: 300 }}>{a}</p>
                        </div>
                      </div>
                    );
                  })}
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>
    </>
  );
}

/* ================= 预约个案 ================= */
function Book() {
  const { user, requireAuth } = useAuth();
  const [city, setCity] = React.useState('全部');
  const [step, setStep] = React.useState(0);
  const cities = ['全部', ...new Set(QD.practitioners.map((p) => p.city))];
  const list = city === '全部' ? QD.practitioners : QD.practitioners.filter((p) => p.city === city);

  return (
    <>
      <section className="sec-tight" style={{ paddingTop: 'clamp(44px,5vw,76px)' }}>
        <div className="wrap">
          <div style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', gap: 28, flexWrap: 'wrap' }}>
            <div>
              <Eyebrow>预约个案</Eyebrow>
              <h1 className="d1" style={{ marginTop: 20, maxWidth: '16ch' }}>找一位离你最近的协助者</h1>
              <p className="lede" style={{ marginTop: 20, maxWidth: '54ch' }}>
                全部为面对面个案。量子催眠禁止任何形式的远程操作，这不是流程要求，是技术边界。
              </p>
            </div>
            <div style={{ display: 'flex', gap: 8, paddingBottom: 8, flexWrap: 'wrap' }}>
              {cities.map((c) => (
                <button key={c} onClick={() => setCity(c)}
                  style={{
                    border: '1px solid ' + (city === c ? 'var(--teal-700)' : 'var(--line)'),
                    background: city === c ? 'var(--teal-900)' : 'transparent',
                    color: city === c ? '#fff' : 'var(--txt-2)',
                    padding: '7px 15px', fontSize: 12.5, borderRadius: 'var(--btn-radius)', transition: 'all .28s'
                  }}>{c}</button>
              ))}
            </div>
          </div>
        </div>
      </section>

      <section style={{ paddingBottom: 'clamp(48px,6vw,84px)' }}>
        <div className="wrap">
          <div className="grid g3">
            {list.map((p, i) => (
              <Reveal key={p.n} delay={i * 60}>
                <div className="card hover" style={{ height: '100%' }}>
                  <div style={{ display: 'flex', gap: 14, alignItems: 'center' }}>
                    <div className="avatar" style={{ width: 52, height: 52, display: 'grid', placeItems: 'center', fontFamily: 'var(--f-serif)', fontSize: 20, color: 'var(--teal-700)' }}>{p.init}</div>
                    <div>
                      <h3 style={{ fontSize: 18, fontFamily: 'var(--f-sans)', fontWeight: 500 }}>{p.n}</h3>
                      <div style={{ display: 'flex', alignItems: 'center', gap: 5, fontSize: 12, color: 'var(--txt-3)', marginTop: 3 }}>
                        {Ico.pin()}{p.city} · {p.year} 年起
                      </div>
                    </div>
                  </div>
                  <div style={{ display: 'flex', gap: 7, marginTop: 16, flexWrap: 'wrap' }}>
                    <span className="tag gold">{p.lvl}</span>
                    <span className="tag ink">{p.tag}</span>
                  </div>
                  <div style={{ marginTop: 'auto', paddingTop: 20 }}>
                    <Btn kind="ghost" size="sm" block onClick={() => requireAuth('book', () => setStep(1))}>
                      {step === 1 ? '预约已提交 ✓' : '选择并预约'}
                    </Btn>
                  </div>
                </div>
              </Reveal>
            ))}
          </div>

          {!user && (
            <div style={{ marginTop: 28, display: 'flex', gap: 10, alignItems: 'center', fontSize: 13, color: 'var(--txt-3)', fontWeight: 300 }}>
              <span style={{ color: 'var(--teal-500)' }}>{Ico.wechat()}</span>
              预约需先关注公众号，用于接收确认与提醒。阅读文章不需要登录。
            </div>
          )}
        </div>
      </section>
    </>
  );
}

Object.assign(window, { Learn, Dolores, Courses, Posts, PostDetail, Library, Voices, About, Faq, Book });
