/* pages-v6.jsx — 第六轮
   · 什么是量子催眠：恢复浅色页头 + 「白云与红鸟」装饰图位
   · 页尾新增「你也可以成为量子催眠操作者」
   · 文章：公众号同步标记全覆盖；详情页显示来源公众号 + 原文链接 + 关注引导
   · 活动：明确的「活动」标识
*/

function V6Styles() {
  return (
    <style>{`
/* ---------- 什么是量子催眠 · 浅色页头 ---------- */
.lh{position:relative;overflow:hidden;background:var(--cloud)}
.lh-cloud{position:absolute;inset:0;background:url(${img('cloudTexture')}) center top/cover;opacity:.32;
  -webkit-mask-image:linear-gradient(180deg,#000,transparent 85%);mask-image:linear-gradient(180deg,#000,transparent 85%)}
.lh-in{position:relative;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(24px,4vw,64px);align-items:center;padding:clamp(40px,5vw,76px) 0 clamp(30px,3.6vw,52px)}
.lh-artwrap{display:flex;flex-direction:column;gap:10px}
.art-switch{display:flex;align-items:center;gap:6px;flex-wrap:wrap;padding:6px;border:1px solid var(--line);border-radius:999px;background:var(--paper);box-shadow:0 10px 24px -18px rgba(12,63,68,.35)}
.art-switch .k{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--txt-3);padding:0 6px 0 10px}
.art-switch button{flex:1;min-width:0;border:0;border-radius:999px;padding:7px 12px;font-size:12px;cursor:pointer;background:transparent;color:var(--txt-2);white-space:nowrap;transition:all .28s}
.art-switch button:hover{color:var(--teal-900);background:color-mix(in oklab,var(--teal-500) 8%,transparent)}
.art-switch button.on{background:var(--teal-900);color:#fff}
.lh-art{position:relative;margin:0;aspect-ratio:4/3;border-radius:18px;overflow:hidden;background:linear-gradient(180deg,#eef5f6,#f7f9f8)}
.lh-art img{width:100%;height:100%;object-fit:cover;display:block}
.lh-art figcaption{position:absolute;left:14px;bottom:12px;font-family:var(--f-mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--txt-3);background:rgba(255,255,255,.75);padding:3px 8px;border-radius:999px;backdrop-filter:blur(4px)}

/* ---------- 成为操作者 ---------- */
.bp{position:relative;overflow:hidden;background:var(--ink);color:var(--on-dark)}
.bp-glow{position:absolute;right:-10%;top:-30%;width:70%;height:120%;background:radial-gradient(circle,color-mix(in oklab,var(--teal-500) 32%,transparent),transparent 62%);pointer-events:none}
.bp-in{position:relative}
.bp-top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.62fr);gap:clamp(26px,4vw,64px);align-items:center}
.bp-fig{position:relative;margin:0;border-radius:16px;overflow:hidden;box-shadow:0 40px 90px -40px rgba(0,0,0,.75)}
.bp-fig img{width:100%;display:block;aspect-ratio:3/4;object-fit:cover;object-position:50% 26%;filter:saturate(.94) contrast(1.02)}
.bp-fig figcaption{position:absolute;left:0;right:0;bottom:0;padding:34px 18px 14px;background:linear-gradient(transparent,rgba(4,20,22,.86));font-size:12px;line-height:1.7;color:rgba(238,244,243,.82)}
.bp-three{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:clamp(30px,3.6vw,52px);border-top:1px solid rgba(238,244,243,.14)}
.bp-three > div{padding:28px clamp(16px,2vw,30px) 8px 0}
.bp-three > div + div{padding-left:clamp(16px,2vw,30px);border-left:1px solid rgba(238,244,243,.1)}
.bp-three .n{font-family:var(--f-hand);font-size:clamp(34px,3.4vw,48px);line-height:1;color:var(--gold)}
.bp-three h4{margin-top:14px;font-size:clamp(19px,1.6vw,23px);color:#fff;font-family:var(--f-serif);font-weight:400}
.bp-three p{margin-top:10px;font-size:14px;line-height:1.85;color:rgba(238,244,243,.68);font-weight:300}
.bp-no{display:flex;flex-wrap:wrap;gap:8px;margin-top:clamp(28px,3vw,40px)}
.bp-no span{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;border:1px solid rgba(238,244,243,.18);font-size:13px;color:rgba(238,244,243,.85)}
.bp-no span i{font-style:normal;color:var(--gold);text-decoration:line-through;text-decoration-thickness:1px}
.bp-path{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:clamp(30px,3.4vw,46px)}
.bp-card{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:18px;align-items:center;padding:20px 22px;border-radius:14px;background:rgba(238,244,243,.05);border:1px solid rgba(238,244,243,.12);cursor:pointer;text-align:left;color:inherit;transition:all .35s var(--ease)}
.bp-card:hover{background:rgba(238,244,243,.1);border-color:rgba(238,244,243,.3);transform:translateY(-2px)}
.bp-card .ic{width:52px;height:52px;border-radius:14px;display:grid;place-items:center;background:var(--gold);color:#25190a;font-family:var(--f-serif);font-size:20px}
.bp-card.alt .ic{background:rgba(238,244,243,.12);color:#fff}
.bp-card b{display:block;font-weight:400;font-family:var(--f-serif);font-size:19px;color:#fff}
.bp-card span.d{display:block;margin-top:4px;font-size:13px;color:rgba(238,244,243,.6);line-height:1.6}
.bp-card .ar{color:var(--gold);font-size:18px}

/* ---------- 公众号同步标记 ---------- */
.wx-badge{display:inline-flex;align-items:center;gap:5px;height:22px;padding:0 8px;border-radius:999px;background:#e8f6ec;color:#1a7f43;font-size:10.5px;letter-spacing:.02em;white-space:nowrap;font-family:var(--f-sans)}
.wx-badge svg{width:12px;height:12px}
.wx-src{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:16px;align-items:center;padding:18px 20px;border-radius:14px;background:linear-gradient(120deg,#f1faf4,var(--paper));border:1px solid #cfe9d8}
.wx-src .av{width:48px;height:48px;border-radius:12px;background:#1a7f43;color:#fff;display:grid;place-items:center}
.wx-src .av svg{width:24px;height:24px}
.wx-src b{display:block;font-weight:500;font-size:15.5px;color:var(--ink);letter-spacing:.01em}
.wx-src span{display:block;font-size:12.5px;color:var(--txt-3);margin-top:3px;line-height:1.55}
.wx-follow{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(18px,3vw,40px);align-items:center;padding:clamp(22px,2.6vw,32px);border-radius:16px;background:var(--ink);color:#fff}
.wx-follow .qr{width:132px;height:132px;padding:9px;border-radius:12px;background:#fff}

/* ---------- 活动标识 ---------- */
.ev-flag{display:inline-flex;align-items:center;gap:7px;height:26px;padding:0 11px 0 9px;border-radius:999px;background:var(--gold);color:#25190a;font-size:11.5px;font-weight:500;letter-spacing:.06em}
.ev-flag::before{content:"";width:7px;height:7px;border-radius:50%;background:#25190a;box-shadow:0 0 0 3px rgba(37,25,10,.18);animation:evp 1.8s ease-in-out infinite}
@keyframes evp{50%{box-shadow:0 0 0 6px rgba(37,25,10,0)}}
.ev-flag.past{background:var(--cloud-2);color:var(--txt-2)}
.ev-flag.past::before{background:var(--txt-3);animation:none;box-shadow:none}

@media(max-width:1080px){
  .bp-top{grid-template-columns:1fr}
  .bp-fig{max-width:400px;order:-1}
  .lh-in{grid-template-columns:1fr}
  .lh-art{max-width:560px}
  .bp-three{grid-template-columns:1fr}
  .bp-three > div,.bp-three > div + div{padding:22px 0;border-left:0;border-bottom:1px solid rgba(238,244,243,.1)}
}
@media(max-width:820px){
  .bp-path{grid-template-columns:1fr}
  .wx-follow{grid-template-columns:1fr}
  .wx-src{grid-template-columns:auto minmax(0,1fr)}
  .wx-src .btn{grid-column:1/-1}
}
`}</style>
  );
}

function WxBadge({ text = '公众号同步' }) {
  return <span className="wx-badge">{Ico.wechat()}{text}</span>;
}

/* ---------- 什么是量子催眠 · 浅色页头（含装饰图位） ---------- */
function LearnHeaderLight() {
  const art = img('learnArt');
  return (
    <section className="lh">
      <V6Styles />
      <div className="lh-cloud" />
      <div className="wrap lh-in">
        <div>
          <Eyebrow>理解 · 第一层</Eyebrow>
          <h1 className="d1" style={{ marginTop: 20, maxWidth: '12ch' }}>什么是量子催眠</h1>
          <p className="lede" style={{ marginTop: 22, maxWidth: '50ch' }}>
            量子催眠（Quantum Healing Hypnosis Technique，QHHT®）是回溯催眠大师朵洛莉丝·侃南
            基于近五十年实践锤炼而成的一种独特催眠技术。
          </p>
          <div style={{ marginTop: 28, display: 'flex', gap: 22, flexWrap: 'wrap', fontFamily: 'var(--f-mono)', fontSize: 10.5, letterSpacing: '.14em', color: 'var(--txt-3)', textTransform: 'uppercase' }}>
            <span>约 8 分钟阅读</span><span>技术说明 · 非医疗建议</span>
          </div>
        </div>
        <div className="lh-artwrap">
          <figure className="lh-art">
            <img src={art} alt="白云与红色的鸟" />
            <figcaption>白云 · 红鸟 —— 引导词里的两个意象</figcaption>
          </figure>
        </div>
      </div>
    </section>
  );
}

/* ---------- 你也可以成为量子催眠操作者 ---------- */
function BecomePractitioner() {
  const go = window.__go;
  const toEvents = () => { window.__scrollTo = 'sec-events'; go('courses'); };
  return (
    <section className="bp sec">
      <V4Styles /><V6Styles />
      <div className="bp-glow" />
      <div className="wrap bp-in">
        <div className="bp-top">
          <div>
            <div className="eyebrow on-dark" style={{ display: 'inline-flex' }}>学习量子催眠</div>
            <h2 className="d2" style={{ marginTop: 16, color: '#fff', maxWidth: '16ch' }}>你也可以成为<br />量子催眠操作者。</h2>
            <p className="lede" style={{ marginTop: 20, maxWidth: '52ch', color: 'rgba(238,244,243,.74)' }}>
              量子催眠中国开设一阶段、二阶段课程，并定期举办线下工作坊、公开课与学员督导。
              学习它，不需要任何前置条件——不需要心理学背景，也不需要学过任何催眠。
            </p>
          </div>
          <figure className="bp-fig">
            <img src={img('practitioner')} alt="一位量子催眠操作者" loading="lazy" />
            <figcaption>她们之中，有教师、心理咨询师、医生，也有辞职重新开始的人。</figcaption>
          </figure>
        </div>
        <div className="bp-no">
          <span><i>心理学学历</i>不需要</span>
          <span><i>催眠基础</i>不需要</span>
          <span><i>相关从业经验</i>不需要</span>
        </div>

        <div className="bp-three">
          {[
            ['一', '纯正的发心', '想要帮助别人，而不是掌控别人。量子催眠操作者是协助者，不是主导者；这份发心，是一切技巧的地基。'],
            ['二', '沉下心实践的决心', '课程只是起点。真正的操作者，是在一次次陪伴个案的过程里练出来的——需要耐心，也需要时间。'],
            ['三', '对生命的好奇', '愿意放下已有的答案，去听另一个人、另一个层面说话。好奇心，会带你走得比课程更远。'],
          ].map(([n, h, p]) => (
            <div key={h}><div className="n">{n}</div><h4>{h}</h4><p>{p}</p></div>
          ))}
        </div>
        <p style={{ marginTop: 26, fontSize: 15, color: 'rgba(238,244,243,.82)', fontFamily: 'var(--f-serif)' }}>
          如果这三样你都有，你已经具备了成为一名量子催眠操作者的全部条件。
        </p>

        <div className="bp-path">
          <button className="bp-card" onClick={() => go('courses')}>
            <span className="ic">课</span>
            <span><b>看课程与价格</b><span className="d">一阶段 · 二阶段各 ¥12,800；同时报名职业套餐 ¥24,000</span></span>
            <span className="ar">→</span>
          </button>
          <button className="bp-card alt" onClick={toEvents}>
            <span className="ic">动</span>
            <span><b>先来一场活动</b><span className="d">公开课、开放日、学员聚会——先见人，再决定</span></span>
            <span className="ar">→</span>
          </button>
        </div>
      </div>
    </section>
  );
}

/* ---------- 文章详情（含公众号来源） ---------- */
function PostDetail6({ id }) {
  const p = QD.posts.find((x) => x.id === id) || QD.posts[0];
  const { requireAuth } = useAuth();
  const [saved, setSaved] = React.useState(false);
  const go = window.__go;
  const related = QD.posts.filter((x) => x.id !== p.id && x.cat === p.cat).concat(QD.posts.filter((x) => x.id !== p.id && x.cat !== p.cat)).slice(0, 3);
  const wx = p.src === 'wechat';
  const mp = p.wx || '量子催眠中国';
  const url = p.url || 'https://mp.weixin.qq.com/s/' + p.id;

  return (
    <>
      <V5Styles /><V6Styles />
      <article>
        <div className="wrap" style={{ maxWidth: 820, paddingTop: 'clamp(36px,4.4vw,64px)' }}>
          <button className="btn btn-quiet" style={{ fontSize: 13 }} onClick={() => go('posts')}>← 文章</button>
          <div style={{ display: 'flex', gap: 9, alignItems: 'center', flexWrap: 'wrap', marginTop: 18 }}>
            <span className="tag">{p.cat}</span>
            {wx && <WxBadge text={'同步自公众号 · ' + mp} />}
          </div>
          <h1 className="d1" style={{ marginTop: 20, fontSize: 'clamp(30px,3.8vw,50px)', lineHeight: 1.22 }}>{p.t}</h1>
          <div style={{ marginTop: 20, paddingBottom: 24, borderBottom: '1px solid var(--line)', display: 'flex', alignItems: 'center', gap: 16, 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={() => requireAuth('favorite', () => setSaved(true))}>{saved ? '✓ 已收藏' : '收藏'}</button>
              {wx && <a className="btn btn-ghost btn-sm" href={url} target="_blank" rel="noopener">公众号原文 ↗</a>}
            </div>
          </div>

          {wx && (
            <div className="wx-src" style={{ marginTop: 24 }}>
              <span className="av">{Ico.wechat()}</span>
              <span><b>{mp}</b><span>本文首发于该公众号 · 发布于 {p.date.replace(/-/g, '.')} · 由官网自动同步，排版已重新整理</span></span>
              <a className="btn btn-primary btn-sm" href={url} target="_blank" rel="noopener">查看原文</a>
            </div>
          )}

          {p.img && <img src={p.img} alt="" style={{ width: '100%', aspectRatio: '16/9', objectFit: 'cover', borderRadius: 12, marginTop: 28 }} />}

          <div style={{ marginTop: 30, 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-quote)', 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>

          {wx && (
            <div className="wx-follow" style={{ marginTop: 48 }}>
              <div>
                <div className="eyebrow on-dark" style={{ display: 'inline-flex' }}>关注「{mp}」</div>
                <h3 style={{ marginTop: 12, color: '#fff', fontSize: 24, lineHeight: 1.35 }}>读到这里的人，<br />大多也关注了我们的公众号。</h3>
                <p style={{ marginTop: 10, fontSize: 13.5, color: 'rgba(255,255,255,.66)', lineHeight: 1.75 }}>
                  每周新文章、课程与活动通知，第一时间推送。也可以在原文下方留言与我们交流。
                </p>
                <div style={{ display: 'flex', gap: 10, marginTop: 18, flexWrap: 'wrap' }}>
                  <a className="btn btn-gold btn-sm" href={url} target="_blank" rel="noopener">去公众号读原文 ↗</a>
                </div>
              </div>
              <div className="qr"><QrCanvas ticket={'follow' + p.id} /></div>
            </div>
          )}
        </div>
      </article>

      <section className="sec">
        <div className="wrap">
          <SecHead eyebrow="继续读" title="相关文章" />
          <div className="art-grid" style={{ paddingTop: 0 }}>
            {related.map((r) => (
              <div key={r.id} className="art-card" onClick={() => { go('post', r.id); }}>
                <div className="th"><img src={r.img} alt="" loading="lazy" /></div>
                <span className="cat">{r.cat}</span>
                <h3>{r.t}</h3>
                <div className="m" style={{ display: 'flex', gap: 8, alignItems: 'center' }}>{r.date.replace(/-/g, '.')} {r.src === 'wechat' && <WxBadge />}</div>
              </div>
            ))}
          </div>
        </div>
      </section>
    </>
  );
}

Object.assign(window, { V6Styles, WxBadge, LearnHeaderLight, BecomePractitioner, PostDetail6 });
