/* pages-real.jsx — 原站真实内容的重新组织
   往期活动相册 / 17 条学员证言全文 / 朵洛莉丝生平与 20 本书 / 著作墙
*/

function RealStyles() {
  return (
    <style>{`
/* ---------- 往期活动 ---------- */
.rl-hero{position:relative;overflow:hidden;background:var(--ink);color:var(--on-dark)}
.rl-hero-in{position:relative;padding:clamp(46px,6vw,96px) 0 clamp(38px,4.6vw,66px);display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(28px,4vw,64px);align-items:end}
.rl-hero h1{color:#fff}
.rl-hero p{color:rgba(238,244,243,.7)}
.rl-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2vw,28px);border-top:1px solid rgba(238,244,243,.18);padding-top:22px}
.rl-stats b{display:block;font-family:var(--f-serif);font-size:clamp(26px,3vw,40px);font-weight:300;color:var(--gold);line-height:1}
.rl-stats span{display:block;margin-top:8px;font-size:12px;letter-spacing:.06em;color:rgba(238,244,243,.55)}
.rl-filters{display:flex;gap:7px;flex-wrap:wrap;align-items:center;padding:22px 0;border-bottom:1px solid var(--line);position:relative;z-index:3}
.rl-chip{border:1px solid var(--line);background:transparent;color:var(--txt-2);padding:7px 14px;font-size:12.5px;border-radius:999px;transition:all .3s var(--ease)}
.rl-chip:hover{border-color:var(--teal-700);color:var(--teal-900)}
.rl-chip.on{background:var(--teal-900);border-color:var(--teal-900);color:#fff}
.rl-chip small{font-family:var(--f-mono);font-size:9.5px;opacity:.6;margin-left:5px}
.rl-ev{padding:clamp(38px,4.4vw,62px) 0;border-bottom:1px solid var(--line-soft)}
.rl-ev-head{display:flex;align-items:baseline;gap:clamp(14px,2vw,30px);flex-wrap:wrap;margin-bottom:22px}
.rl-ev-date{font-family:var(--f-mono);font-size:11.5px;letter-spacing:.14em;color:var(--gold-deep);text-transform:uppercase;white-space:nowrap}
.rl-ev-head h3{font-size:clamp(21px,2.2vw,29px);letter-spacing:-.02em}
.rl-ev-meta{display:flex;gap:16px;flex-wrap:wrap;margin-left:auto;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.1em;color:var(--txt-3);text-transform:uppercase}
.rl-ev-note{font-size:13.5px;color:var(--txt-3);max-width:56ch;line-height:1.7;margin:-8px 0 22px}
.rl-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}
.rl-grid.big{grid-template-columns:repeat(3,1fr)}
.rl-ph{position:relative;overflow:hidden;background:var(--cloud-2);aspect-ratio:4/3;cursor:zoom-in;border:0;padding:0}
.rl-ph img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease),filter .5s var(--ease);filter:saturate(.92)}
.rl-ph:hover img{transform:scale(1.045);filter:saturate(1.05)}
.rl-ph::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 1px rgba(12,63,68,.06)}
.rl-ph span{position:absolute;left:8px;bottom:8px;font-family:var(--f-mono);font-size:9.5px;letter-spacing:.1em;color:#fff;background:rgba(11,36,38,.55);padding:2px 6px;opacity:0;transition:opacity .3s}
.rl-ph:hover span{opacity:1}
.rl-more{display:inline-flex;align-items:center;gap:8px;margin-top:14px;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--teal-700);background:none;border:0;border-bottom:1px solid var(--line-strong);padding-bottom:3px}

/* 灯箱 */
.rl-lb{position:fixed;inset:0;z-index:2000;background:rgba(6,18,19,.955);display:grid;grid-template-rows:auto 1fr auto;color:#fff}
.rl-lb-top{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px clamp(14px,3vw,34px);border-bottom:1px solid rgba(255,255,255,.1)}
.rl-lb-top .t{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.6)}
.rl-lb-top .c{font-size:12.5px;color:rgba(255,255,255,.85);margin-top:3px}
.rl-lb-body{position:relative;display:grid;place-items:center;padding:clamp(8px,2vw,26px);overflow:hidden}
.rl-lb-body img{max-width:100%;max-height:100%;object-fit:contain;box-shadow:0 30px 80px -30px rgba(0,0,0,.8)}
.rl-lb-nav{position:absolute;top:50%;transform:translateY(-50%);width:46px;height:46px;border-radius:50%;border:1px solid rgba(255,255,255,.28);background:rgba(0,0,0,.32);color:#fff;display:grid;place-items:center;font-size:18px;transition:all .3s}
.rl-lb-nav:hover{background:#fff;color:var(--ink);border-color:#fff}
.rl-lb-nav.l{left:8px}.rl-lb-nav.r{right:8px}
.rl-lb-bot{display:flex;gap:6px;overflow-x:auto;padding:10px clamp(10px,2vw,26px) 16px;border-top:1px solid rgba(255,255,255,.1)}
.rl-lb-bot button{flex:none;width:74px;height:54px;padding:0;border:1px solid transparent;background:none;opacity:.5;transition:opacity .3s,border-color .3s}
.rl-lb-bot button.on{opacity:1;border-color:var(--gold)}
.rl-lb-bot img{width:100%;height:100%;object-fit:cover}
.rl-close{width:36px;height:36px;border-radius:50%;border:1px solid rgba(255,255,255,.28);background:none;color:#fff;display:grid;place-items:center}
.rl-close:hover{background:#fff;color:var(--ink)}

/* ---------- 证言 ---------- */
.rl-voices{display:grid;grid-template-columns:repeat(2,1fr);gap:0}
.rl-v{padding:clamp(26px,3vw,40px) clamp(20px,2.6vw,38px) clamp(26px,3vw,40px) 0;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:18px}
.rl-v:nth-child(even){padding-left:clamp(20px,2.6vw,38px);padding-right:0;border-left:1px solid var(--line-soft)}
.rl-v.wide{grid-column:1/-1;border-left:0;padding-left:0}
.rl-v-t{font-family:var(--f-sans);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-deep)}
.rl-v p{font-family:var(--f-serif);font-size:clamp(16.5px,1.35vw,19.5px);line-height:1.78;color:var(--teal-900);white-space:pre-wrap}
.rl-v.wide p{font-size:clamp(16px,1.3vw,18.5px);max-width:78ch}
.rl-v-who{display:flex;align-items:center;gap:12px;margin-top:auto;padding-top:6px}
.rl-v-who img{width:42px;height:42px;border-radius:50%;object-fit:cover;filter:saturate(.9)}
.rl-v-who .n{font-size:13.5px;color:var(--ink)}
.rl-v-who .d{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.12em;color:var(--txt-3);margin-top:2px}

/* ---------- 朵洛莉丝 ---------- */
.rl-dol{background:var(--ink);color:var(--on-dark);position:relative;overflow:hidden}
.rl-dol-grid{display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);gap:clamp(28px,4.4vw,72px);align-items:center;padding:clamp(44px,5.4vw,88px) 0}
.rl-portrait{position:relative;border:1px solid rgba(238,244,243,.16);background:linear-gradient(180deg,rgba(238,244,243,.06),rgba(238,244,243,.015));padding:0;overflow:hidden}
.rl-portrait img{width:100%;height:auto;display:block;filter:contrast(1.02)}
.rl-portrait figcaption{position:absolute;left:0;right:0;bottom:0;padding:14px 16px;background:linear-gradient(transparent,rgba(7,26,28,.9));font-family:var(--f-mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:rgba(238,244,243,.7)}
.rl-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(92px,1fr));gap:16px;margin-top:30px;padding-top:24px;border-top:1px solid rgba(238,244,243,.14)}
.rl-facts b{display:block;font-family:var(--f-serif);font-size:22px;color:var(--gold);font-weight:400}
.rl-facts span{display:block;font-size:11.5px;color:rgba(238,244,243,.5);margin-top:4px;line-height:1.5}
.rl-chap{display:grid;grid-template-columns:78px minmax(0,1fr);gap:clamp(14px,2.4vw,40px);padding:clamp(30px,3.6vw,52px) 0;border-top:1px solid var(--line)}
.rl-chap:first-of-type{border-top:0}
.rl-chap .nn{font-family:var(--f-mono);font-size:11px;letter-spacing:.16em;color:var(--gold-deep);padding-top:6px}
.rl-chap h3{font-size:clamp(21px,2.1vw,28px);margin-bottom:16px}
.rl-chap div p+p{margin-top:14px}
.rl-chap div p{font-size:16px;line-height:1.88;color:var(--txt-2);font-weight:300;max-width:70ch}
.rl-julia{display:flex;gap:20px;align-items:center;flex-wrap:wrap;padding:26px;background:var(--cloud-2);border:1px solid var(--line)}
.rl-julia img{width:78px;height:78px;object-fit:cover;border-radius:50%}
.rl-julia p{font-size:13.5px;line-height:1.75;color:var(--txt-2);max-width:52ch}

/* 书墙 */
.rl-books{display:grid;grid-template-columns:repeat(auto-fill,minmax(158px,1fr));gap:clamp(14px,1.8vw,26px)}
/* 书名列表（小封面 + 年份） */
.shelf{display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(24px,3vw,48px);border-top:1px solid var(--line)}
.shelf-row{display:grid;grid-template-columns:26px 46px minmax(0,1fr) auto 16px;gap:14px;align-items:center;padding:11px 0;border:0;border-bottom:1px solid var(--line-soft);background:none;text-align:left;cursor:pointer;transition:background .25s,padding-left .25s}
.shelf-row:hover{background:rgba(1,153,154,.05);padding-left:6px}
.shelf-row .n{font-family:var(--f-mono);font-size:10px;color:var(--gold-deep);letter-spacing:.1em}
.shelf-row img{width:46px;aspect-ratio:262/422;object-fit:cover;box-shadow:0 8px 16px -10px rgba(12,63,68,.6);border-radius:2px}
.shelf-row .m{min-width:0}
.shelf-row b{display:block;font-weight:400;font-size:14.5px;color:var(--ink);line-height:1.4;font-family:var(--f-serif)}
.shelf-row em{display:block;font-style:normal;font-family:var(--f-mono);font-size:9px;letter-spacing:.05em;text-transform:uppercase;color:var(--txt-3);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.shelf-row .y{font-family:var(--f-mono);font-size:11.5px;color:var(--txt-2)}
.shelf-row .ar{color:var(--txt-3);font-size:12px;opacity:0;transition:opacity .25s}
.shelf-row:hover .ar{opacity:1;color:var(--teal-700)}
@media(max-width:820px){.shelf{grid-template-columns:1fr}}
.rl-bk{display:flex;flex-direction:column;gap:12px}
.rl-bk .cv{position:relative;aspect-ratio:262/422;background:var(--cloud-2);overflow:hidden;box-shadow:0 16px 34px -22px rgba(12,63,68,.5)}
.rl-bk .cv img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.rl-bk:hover .cv img{transform:scale(1.03)}
.rl-bk .cv i{position:absolute;top:0;left:0;bottom:0;width:7px;background:linear-gradient(90deg,rgba(0,0,0,.28),transparent);pointer-events:none}
.rl-bk h4{font-size:14.5px;line-height:1.5;font-family:var(--f-sans);font-weight:500}
.rl-bk .en{font-family:var(--f-mono);font-size:9px;letter-spacing:.06em;color:var(--txt-3);line-height:1.5;text-transform:uppercase}
.rl-bk .tag{font-size:10.5px;padding:2px 8px;align-self:flex-start}

/* 历史合影横滑 */
.rl-strip{display:flex;gap:10px;overflow-x:auto;padding-bottom:6px;scroll-snap-type:x mandatory}
.rl-strip figure{flex:none;width:clamp(220px,26vw,340px);margin:0;scroll-snap-align:start}
.rl-strip img{width:100%;aspect-ratio:16/9;object-fit:cover;filter:saturate(.9)}
.rl-strip figcaption{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--txt-3);margin-top:8px}

@media(max-width:1080px){
  .rl-hero-in{grid-template-columns:1fr;align-items:start}
  .rl-grid{grid-template-columns:repeat(3,1fr)}
  .rl-dol-grid{grid-template-columns:1fr}
  .rl-portrait{max-width:340px}
}
@media(max-width:820px){
  .rl-voices{grid-template-columns:1fr}
  .rl-v,.rl-v:nth-child(even){padding-left:0;padding-right:0;border-left:0}
  .rl-grid{grid-template-columns:repeat(2,1fr);gap:5px}
  .rl-grid.big{grid-template-columns:repeat(2,1fr)}
  .rl-chap{grid-template-columns:1fr;gap:8px}
  .rl-chap .nn{padding-top:0}
  .rl-ev-meta{margin-left:0;width:100%}
  .rl-stats{gap:10px}
  .rl-books{grid-template-columns:repeat(2,1fr)}
  .rl-lb-bot button{width:58px;height:44px}
}
@media(max-width:560px){
  .rl-stats b{font-size:24px}
  .rl-v p{font-size:16px}
}
`}</style>
  );
}

/* ============ 往期活动 ============ */
function photoList(ev) {
  /* 接口会给出每张照片的绝对地址；本地数据只有数量，按约定路径生成 */
  if (ev.photoUrls && ev.photoUrls.length) return ev.photoUrls;
  return Array.from({ length: ev.photos || 0 }, (_, i) => `assets/gallery/${ev.id}/${String(i + 1).padStart(2, '0')}.jpg`);
}

function Lightbox({ ev, index, onClose, onStep }) {
  React.useEffect(() => {
    const h = (e) => {
      if (e.key === 'Escape') onClose();
      if (e.key === 'ArrowRight') onStep(1);
      if (e.key === 'ArrowLeft') onStep(-1);
    };
    window.addEventListener('keydown', h);
    document.body.style.overflow = 'hidden';
    return () => { window.removeEventListener('keydown', h); document.body.style.overflow = ''; };
  }, [onClose, onStep]);
  const list = photoList(ev);
  return (
    <div className="rl-lb" role="dialog" aria-modal="true">
      <div className="rl-lb-top">
        <div>
          <div className="t">{ev.date} · {ev.city}</div>
          <div className="c">{ev.title}</div>
        </div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
          <span style={{ fontFamily: 'var(--f-mono)', fontSize: 11, letterSpacing: '.1em', color: 'rgba(255,255,255,.6)' }}>
            {index + 1} / {list.length}
          </span>
          <button className="rl-close" onClick={onClose} aria-label="关闭">{Ico.close()}</button>
        </div>
      </div>
      <div className="rl-lb-body">
        <button className="rl-lb-nav l" onClick={() => onStep(-1)} aria-label="上一张">‹</button>
        <img src={list[index]} alt={`${ev.title} 现场照片 ${index + 1}`} />
        <button className="rl-lb-nav r" onClick={() => onStep(1)} aria-label="下一张">›</button>
      </div>
      <div className="rl-lb-bot">
        {list.map((src, i) => (
          <button key={src} className={i === index ? 'on' : ''} onClick={() => onStep(i - index, true)}>
            <img src={src} alt="" loading="lazy" />
          </button>
        ))}
      </div>
    </div>
  );
}

function Events() {
  const go = window.__go;
  const [year, setYear] = React.useState('全部');
  const [lb, setLb] = React.useState(null);
  const years = ['全部', ...Array.from(new Set(QD.events.map((e) => String(e.year))))];
  const list = year === '全部' ? QD.events : QD.events.filter((e) => String(e.year) === year);
  const totalPhotos = QD.events.reduce((a, e) => a + (e.total || e.photos || 0), 0);
  const totalPeople = QD.events.reduce((a, e) => a + (e.people || 0), 0);

  const step = React.useCallback((d) => {
    setLb((cur) => {
      if (!cur) return cur;
      const n = photoList(cur.ev).length;
      return { ...cur, index: (cur.index + d + n) % n };
    });
  }, []);

  return (
    <>
      <RealStyles />
      <section className="rl-hero">
        <div className="wrap rl-hero-in">
          <div>
            <div className="eyebrow on-dark" style={{ display: 'inline-flex' }}>往期课程与活动 · 2012—2019</div>
            <h1 className="d1" style={{ marginTop: 20, fontSize: 'clamp(34px,4.4vw,62px)', maxWidth: '15ch' }}>
              十五场课，都是真的坐满了人。
            </h1>
            <p className="lede" style={{ marginTop: 22, maxWidth: '50ch' }}>
              这里有每一届的日期、地点、人数，和当时拍下来的照片。从 2012 年朵奶奶第一次把量子催眠带到上海的那一班，
              到 2019 年北京的最后一场一阶段——没有一张是资料图。
            </p>
          </div>
          <div className="rl-stats">
            <div><b>15</b><span>场课程与活动</span></div>
            <div><b>{totalPhotos}<sup style={{ fontSize: '.5em' }}>+</sup></b><span>张现场照片</span></div>
            <div><b>{totalPeople}<sup style={{ fontSize: '.5em' }}>+</sup></b><span>人次学员</span></div>
          </div>
        </div>
      </section>

      <div className="wrap">
        <div className="rl-filters">
          {years.map((y) => (
            <button key={y} className={'rl-chip' + (year === y ? ' on' : '')} onClick={() => setYear(y)}>
              {y}{y !== '全部' && <small>{QD.events.filter((e) => String(e.year) === y).length}</small>}
            </button>
          ))}
          <span style={{ marginLeft: 'auto', fontFamily: 'var(--f-mono)', fontSize: 10, letterSpacing: '.12em', color: 'var(--txt-3)' }}>
            点击照片可放大浏览
          </span>
        </div>

        {list.map((ev) => {
          const list2 = photoList(ev);
          const big = ev.photos >= 7;
          return (
            <section className="rl-ev" key={ev.id}>
              <div className="rl-ev-head">
                <div className="rl-ev-date">{ev.date}</div>
                <h3>{ev.title}</h3>
                <div className="rl-ev-meta">
                  <span>{ev.people} 人</span>
                  <span>{ev.place || ev.city}</span>
                  <span>{ev.kind}</span>
                  <span>原站 {ev.total} 张</span>
                </div>
              </div>
              {ev.note && <p className="rl-ev-note">{ev.note}</p>}
              <div className={'rl-grid' + (big ? '' : ' big')}>
                {list2.map((src, i) => (
                  <button key={src} className="rl-ph" onClick={() => setLb({ ev, index: i })} aria-label={`${ev.title} 第 ${i + 1} 张`}>
                    <img src={src} alt={`${ev.title} · 现场 ${i + 1}`} loading="lazy" />
                    <span>{String(i + 1).padStart(2, '0')}</span>
                  </button>
                ))}
              </div>
              {ev.total > ev.photos && (
                <div className="rl-more">原站此场共 {ev.total} 张照片 · 本站选取 {ev.photos} 张</div>
              )}
            </section>
          );
        })}
      </div>

      <section className="sec" style={{ background: 'var(--cloud-2)' }}>
        <div className="wrap">
          <SecHead eyebrow="历届合影" title="从 2012 到 2018"
            sub="原站「往期合影」中的十张，按年份排开。认识其中任何一张，欢迎来公众号找我们。" />
          <div className="rl-strip">
            {QD.history.map((h) => (
              <figure key={h.img}>
                <img src={h.img} alt={h.cap} loading="lazy" />
                <figcaption>{h.cap}</figcaption>
              </figure>
            ))}
          </div>
          <div style={{ marginTop: 30 }}>
            <Btn kind="primary" onClick={() => go('courses')} arw>看本期的课程</Btn>
            <Btn kind="quiet" style={{ marginLeft: 18 }} onClick={() => go('voices')}>听学员自己说 →</Btn>
          </div>
        </div>
      </section>

      {lb && <Lightbox ev={lb.ev} index={lb.index} onClose={() => setLb(null)} onStep={step} />}
    </>
  );
}

/* ============ 学员证言（全文） ============ */
function VoicesReal() {
  const go = window.__go;
  return (
    <>
      <RealStyles />
      <section className="sec-tight" style={{ paddingTop: 'clamp(44px,5vw,76px)' }}>
        <div className="wrap">
          <Eyebrow>学员证言 · 17 条全文</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(48px,6vw,84px)' }}>
        <div className="wrap">
          <div className="rl-voices">
            {QD.voices.map((v, i) => (
              <Reveal key={v.n + i} delay={(i % 2) * 60} style={{ display: 'contents' }}>
                <article className={'rl-v' + (v.short ? '' : ' wide')}>
                  {v.t && <div className="rl-v-t">{v.t}</div>}
                  <p>{v.q}</p>
                  <div className="rl-v-who">
                    <img src={v.img} alt={v.n} loading="lazy" />
                    <div>
                      <div className="n">{v.n}</div>
                      <div className="d">{v.short ? '学员留言' : '学员长文'}</div>
                    </div>
                  </div>
                </article>
              </Reveal>
            ))}
          </div>
        </div>
      </section>
      <section className="sec dark noise">
        <div className="wrap" style={{ maxWidth: 780, 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>
            <Btn kind="quiet" onClick={() => go('events')}>看看往期课程 →</Btn>
          </div>
        </div>
      </section>
    </>
  );
}

/* ============ 朵洛莉丝（真实肖像 + 生平 + 书墙） ============ */
function DoloresReal() {
  const go = window.__go;
  return (
    <>
      <RealStyles />
      <section className="rl-dol">
        <div className="wrap rl-dol-grid">
          <figure className="rl-portrait" style={{ margin: 0 }}>
            <img src={img('doloresPhoto')} alt="朵洛莉丝·侃南 肖像" />
            <figcaption>Dolores Cannon · 1931 — 2014</figcaption>
          </figure>
          <div>
            <div className="eyebrow on-dark" style={{ display: 'inline-flex' }}>QHHT® 创立者</div>
            <h1 className="d1" style={{ marginTop: 18, color: '#fff', fontSize: 'clamp(34px,4.4vw,60px)' }}>朵洛莉丝·侃南</h1>
            <p style={{ marginTop: 10, fontFamily: 'var(--f-mono)', fontSize: 11, letterSpacing: '.18em', color: 'var(--teal-300)', textTransform: 'uppercase' }}>
              Dolores Cannon · 回溯催眠师 · 心灵研究者
            </p>
            <p className="lede" style={{ marginTop: 22, color: 'rgba(238,244,243,.72)', maxWidth: '56ch' }}>
              {QD.dolores.intro}
            </p>
            <div className="rl-facts">
              {QD.dolores.facts.map(([a, b]) => (
                <div key={b}><b>{a}</b><span>{b}</span></div>
              ))}
            </div>
          </div>
        </div>
      </section>

      <section className="sec">
        <div className="wrap">
          <SecHead eyebrow="人物生平" title="四段，从 1931 到中国"
            sub="译自美国量子催眠官网，原文由量子催眠中国整理。" />
          {QD.dolores.chapters.map((c) => (
            <div className="rl-chap" key={c.n}>
              <div className="nn">{c.n}</div>
              <div>
                <h3>{c.h}</h3>
                {c.p.map((t, i) => <p key={i}>{t}</p>)}
              </div>
            </div>
          ))}
          <div className="rl-julia" style={{ marginTop: 26 }}>
            <img src={img('juliaPhoto')} alt="茱莉亚·侃南" />
            <p>{QD.dolores.julia}</p>
          </div>
        </div>
      </section>

      <section className="sec" style={{ background: 'var(--cloud-2)' }}>
        <div className="wrap">
          <SecHead eyebrow="她留下的" title="二十本，全部基于催眠案例"
            sub="每本都来自催眠个案的逐字记录。点任一本可看简介。"
            right={<Btn kind="ghost" onClick={() => go('library')} arw>书籍与影像</Btn>} />
          <div className="shelf">
            {QD.books.map((b, i) => (
              <button key={b.img} className="shelf-row" onClick={() => go('library')}>
                <span className="n">{String(i + 1).padStart(2, '0')}</span>
                <img src={b.img} alt={`《${b.t}》`} loading="lazy" />
                <span className="m">
                  <b>{b.t}</b>
                  <em>{b.en}</em>
                </span>
                <span className="y">{b.year || '—'}</span>
                <span className="ar">→</span>
              </button>
            ))}
          </div>
          <div style={{ marginTop: 24, display: 'flex', alignItems: 'center', gap: 14, flexWrap: 'wrap' }}>
            <Btn kind="primary" size="sm" onClick={() => go('library')} arw>书籍与影像 · 每本的简介</Btn>
            <span style={{ fontSize: 12.5, color: 'var(--txt-3)' }}>完整简介、版本与相关影像在「书籍与影像」页</span>
          </div>
        </div>
      </section>
    </>
  );
}

/* ============ 书籍与视频（真实书封 + 视频清单） ============ */
function LibraryReal() {
  const go = window.__go;
  const videos = [
    ['朵洛莉丝·侃南谈什么是量子催眠', '访谈'],
    ['朵洛莉丝·侃南谈进入催眠态是什么感觉', '访谈'],
    ['朵洛莉丝·侃南谈进入前世是一种什么样的体验', '访谈'],
    ['朵洛莉丝·侃南谈量子催眠中的潜意识是什么', '访谈'],
    ['朵洛莉丝·侃南谈为什么要成为一名量子催眠操作者', '访谈'],
    ['朵洛莉丝·侃南谈吸引力与创造法则', '访谈'],
    ['朵洛莉丝·侃南谈释放恐惧和业力', '访谈'],
    ['朵洛莉丝·侃南谈怎样活出你的激情', '访谈'],
    ['量子催眠学院宣传片', '课程'],
    ['量子催眠一阶段课程介绍', '课程'],
    ['一阶段伙伴课程介绍', '课程'],
    ['2018 年夏威夷二阶段课程花絮', '花絮'],
    ['2017 年杭州二阶段课程花絮', '花絮'],
    ['2017 年杭州大聚会花絮', '花絮'],
    ['自我改变的力量 — 劳拉·卡斯托的故事', '学员'],
    ['与小我的对话', '学员'],
  ];
  return (
    <>
      <RealStyles />
      <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: 22, maxWidth: '58ch' }}>
            二十本著作，全部由催眠案例整理而成。视频分为她的访谈、课程介绍与往期花絮三类。
          </p>
        </div>
      </section>

      <section style={{ paddingBottom: 'clamp(40px,5vw,68px)' }}>
        <div className="wrap">
          <div className="rl-books">
            {QD.books.map((b, i) => (
              <Reveal key={b.img} delay={(i % 6) * 40}>
                <div className="rl-bk">
                  <div className="cv"><img src={b.img} alt={`《${b.t}》封面`} loading="lazy" /><i /></div>
                  <h4>{b.t}</h4>
                  <div className="en">{b.en}</div>
                  <span className="tag">{b.lang}{b.price ? ' · ' + b.price : ''}</span>
                </div>
              </Reveal>
            ))}
          </div>
        </div>
      </section>

      <section className="sec" style={{ background: 'var(--cloud-2)' }}>
        <div className="wrap">
          <SecHead eyebrow="影像 · 16 支" title="视频精选"
            sub="原站三个视频栏目合并：朵洛莉丝访谈、课程活动花絮、学员分享。"
            right={<Btn kind="ghost" size="sm" onClick={() => go('events')} arw>往期课程相册</Btn>} />
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill,minmax(250px,1fr))', gap: 14 }}>
            {videos.map(([t, k], i) => (
              <Reveal key={t} delay={(i % 4) * 40}>
                <div className="card hover" style={{ padding: 0, overflow: 'hidden', cursor: 'pointer', height: '100%' }}>
                  <div style={{ aspectRatio: '16/9', background: 'var(--teal-900)', position: 'relative', display: 'grid', placeItems: 'center' }}>
                    <div style={{ width: 44, height: 44, borderRadius: '50%', border: '1px solid rgba(255,255,255,.4)', display: 'grid', placeItems: 'center', color: '#fff' }}>{Ico.play()}</div>
                    <span style={{ position: 'absolute', left: 10, top: 10, fontFamily: 'var(--f-mono)', fontSize: 9, letterSpacing: '.14em', color: 'rgba(255,255,255,.6)', textTransform: 'uppercase' }}>{k}</span>
                  </div>
                  <div style={{ padding: '14px 16px 18px' }}>
                    <h4 style={{ fontSize: 15, lineHeight: 1.5 }}>{t}</h4>
                  </div>
                </div>
              </Reveal>
            ))}
          </div>
          <p style={{ marginTop: 20, fontSize: 12.5, color: 'var(--txt-3)', fontWeight: 300 }}>
            视频原文件托管于量子催眠学院视频库，此处为片单占位；接入后可内嵌播放。
          </p>
        </div>
      </section>
    </>
  );
}

Object.assign(window, { Events, VoicesReal, DoloresReal, LibraryReal, RealStyles, photoList, Lightbox });
