/* pages-home.jsx — 首页 */

function Shell({ children, dir, route: routeProp }) {
  const [scrolled, setScrolled] = React.useState(false);
  const [menu, setMenu] = React.useState(false);
  const { user } = useAuth();
  const go = window.__go;
  const route = routeProp || window.__route;

  React.useEffect(() => {
    const h = () => setScrolled(window.scrollY > 12);
    h(); window.addEventListener('scroll', h, { passive: true });
    return () => window.removeEventListener('scroll', h);
  }, []);

  return (
    <>
      <header className={'nav' + (scrolled ? ' solid' : '')}>
        <div className="nav-in">
          <a href="#" onClick={(e) => { e.preventDefault(); go('home'); }} aria-label="首页"><Logo /></a>
          <nav className="nav-menu">
            {QD.nav.map((n) => (
              <a key={n.k} className={'nav-link' + (route === n.k ? ' on' : '')} href={'#' + n.k}
                aria-current={route === n.k ? 'page' : undefined}
                onClick={(e) => { e.preventDefault(); go(n.k); }}>{n.t}</a>
            ))}
          </nav>
          <div className="nav-cta">
            <Btn kind="ghost" size="sm" onClick={() => go('book')}>预约个案</Btn>
            <Btn kind="primary" size="sm" onClick={() => go('courses')}>课程报名</Btn>
            <button className="nav-burger btn btn-ghost btn-sm" onClick={() => setMenu(true)} aria-label="打开菜单" aria-expanded={menu}>
              {Ico.menu()}
            </button>
          </div>
        </div>
      </header>
      <main>{children}</main>
      {menu && (
        <div className="mob-scrim" onClick={() => setMenu(false)}>
          <div className="mob-panel" onClick={(e) => e.stopPropagation()}>
            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '14px 0' }}>
              <Logo />
              <button className="btn btn-ghost btn-sm" onClick={() => setMenu(false)} aria-label="关闭菜单">{Ico.close()}</button>
            </div>
            {QD.nav.map((n, i) => (
              <a key={n.k} href={'#' + n.k} onClick={(e) => { e.preventDefault(); setMenu(false); go(n.k); }}>
                {n.t}<span className="ix">{String(i + 1).padStart(2, '0')}</span>
              </a>
            ))}
            <div className="mob-cta">
              <Btn kind="ghost" size="sm" onClick={() => { setMenu(false); go('book'); }}>预约个案</Btn>
              <Btn kind="primary" size="sm" onClick={() => { setMenu(false); go('courses'); }}>课程报名</Btn>
            </div>
          </div>
        </div>
      )}
      <Footer go={go} />
    </>
  );
}

function Footer({ go }) {
  const navItems = [
    ['learn', '什么是量子催眠'],
    ['dolores', '朵洛莉丝'],
    ['courses', '课程'],
    ['events', '活动'],
    ['voices', '学员证言'],
    ['library', '书籍与影像'],
    ['posts', '文章'],
    ['faq', '常见问题'],
    ['about', '关于我们'],
  ];
  return (
    <footer className="footer">
      <div className="wrap">
        <div className="footer-grid">
          <div>
            <Logo inv size={40} />
            <p style={{ marginTop: 20, fontSize: 13.5, color: 'rgba(238,244,243,.6)', lineHeight: 1.8, maxWidth: '32ch', fontWeight: 300 }}>
              量子催眠中国是量子催眠学院指定的简体中文课程全球唯一官方代表。量子催眠技术是美国量子催眠学院的国际注册商标。
            </p>
            <div className="footer-qr">
              <div className="box"><QrCanvas ticket="FOOTQR" /></div>
              <div style={{ fontSize: 12.5, color: 'rgba(238,244,243,.55)', lineHeight: 1.7, fontWeight: 300 }}>
                关注订阅号<br />接收每周新文章
              </div>
            </div>
          </div>
          <div>
            <h5>了解</h5>
            <ul>
              {navItems.slice(0, 6).map(([k, t]) => (
                <li key={k}><a className="f-link" href={'#' + k} onClick={(e) => { e.preventDefault(); go(k); }}>{t}</a></li>
              ))}
            </ul>
          </div>
          <div>
            <h5>参与</h5>
            <ul>
              {[['课程报名', 'courses'], ['即将到来的活动', 'events'], ['预约表单', 'book'], ['常见问题', 'faq'], ['关于我们', 'about']].map(([t, k]) => (
                <li key={k}><a className="f-link" href={'#' + k} onClick={(e) => { e.preventDefault(); go(k); }}>{t}</a></li>
              ))}
            </ul>
          </div>
          <div>
            <h5>联系</h5>
            <ul>
              <li><a className="f-link" href="mailto:online@qhhtchina.com">online@qhhtchina.com</a></li>
              <li><a className="f-link" href="#x" onClick={(e) => e.preventDefault()}>微信公众号：量子催眠中国</a></li>
              <li><a className="f-link" href="#x" onClick={(e) => e.preventDefault()}>微博 @QHHTchina</a></li>
              <li><a className="f-link" href="#x" onClick={(e) => e.preventDefault()}>团队介绍 · 人员招募</a></li>
            </ul>
          </div>
        </div>
        <div className="footer-bottom">
          <span>© 2026 量子催眠中国 · QHHTCHINA</span>
          <span>京ICP备15015531号-3</span>
          <span>QHHT® 为美国量子催眠学院国际注册商标</span>
        </div>
      </div>
    </footer>
  );
}

/* ============================ 首页 ============================ */
/* ============================ 首页 ============================ */
function Home() {
  const go = window.__go;

  return (
    <>
      <V3Styles />
      {/* Hero */}
      <section className="hero">
        <div className="hero-cloud" />
        <div className="hero-glow" />
        <div className="wrap">
          <div className="hero-grid">
            <div className="hero-copy">
              <Eyebrow>量子催眠中国 · 官方站点</Eyebrow>
              <h1 className="d1">
                <span style={{ display: 'block', whiteSpace: 'nowrap' }}>有一种状态，</span>
                <span style={{ display: 'block', whiteSpace: 'nowrap' }}>你知道所有的答案。</span>
              </h1>
              <p className="lede">
                量子催眠（QHHT®）由朵洛莉丝·侃南基于近五十年实践锤炼而成。
                它不是让人失去意识，而是让人抵达一个更清醒的地方——在那里，
                身体与人生的议题，会以它自己的方式被看见。
              </p>
              <div className="hero-actions">
                <Btn kind="primary" size="lg" arw onClick={() => go('courses')}>看课程与排期</Btn>
                <Btn kind="quiet" onClick={() => go('learn')}>先了解它是怎么运作的 →</Btn>
              </div>
              <div className="hero-meta">
                <span>2012 年进入中国</span>
                <span>简体中文官方代表</span>
                <span>15 场往期课程</span>
                <span>禁止远程催眠</span>
              </div>
            </div>
            <div className="hero-media">
              <img src={img('heroImage')} alt="清晨的栈道通向雾中的光" />
              <span className="cap">实景 · 一次面谈前的清晨</span>
            </div>
          </div>
        </div>
      </section>

      {/* 三个入口（以课程为主轴） */}
      <section className="sec-tight" style={{ borderTop: '1px solid var(--line)' }}>
        <div className="wrap">
          <div className="grid g3">
            {[
              { k: 'courses', n: '01', t: '我想成为操作者', d: '一阶段、二阶段、三阶段。每一级都有它的前置条件与证书。', cta: '查看课程' },
              { k: 'events', n: '02', t: '我想先来一次', d: '公开课、开放日、学员聚会。更短，门槛更低，先见人再决定。', cta: '即将到来的活动' },
              { k: 'learn', n: '03', t: '我想先弄明白它', d: '从 30 秒的答案，到完整的技术原理与四条核心原则。', cta: '分层阅读' },
            ].map((x, i) => (
              <Reveal key={x.k} delay={i * 90}>
                <a className="card hover" href={'#' + x.k} onClick={(e) => { e.preventDefault(); go(x.k); }}
                  style={{ height: '100%', minHeight: 230, justifyContent: 'space-between' }}>
                  <div>
                    <div className="num">{x.n}</div>
                    <h3 style={{ marginTop: 18, fontSize: 'clamp(20px,1.7vw,25px)' }}>{x.t}</h3>
                    <p style={{ marginTop: 12, color: 'var(--txt-2)', fontSize: 14.5, lineHeight: 1.75, fontWeight: 300 }}>{x.d}</p>
                  </div>
                  <div style={{ marginTop: 26, display: 'flex', alignItems: 'center', gap: 8, fontFamily: 'var(--f-mono)', fontSize: 11, letterSpacing: '.14em', textTransform: 'uppercase', color: 'var(--teal-700)' }}>
                    {x.cta} {Ico.arrow()}
                  </div>
                </a>
              </Reveal>
            ))}
          </div>
        </div>
      </section>

      {/* 创始人 + 她的视频 */}
      <Founder />

      {/* 课程主推 + 最近一场活动 */}
      <CoursePromo />

      {/* 相册滚动 */}
      <AlbumStrip limit={18} />

      {/* 分层阅读 */}
      <section className="sec">
        <div className="wrap">
          <SecHead
            eyebrow="它到底是什么"
            title={<>先用 30 秒，<br />再用 5 分钟，或者待一整个下午。</>}
            sub="老站把十几层的内容放在同一页上。我们把同一份内容，按你现在的耐心分层。"
            right={<Btn kind="ghost" onClick={() => go('learn')} arw>进入完整阅读</Btn>}
          />
          <div className="layers">
            {[
              ['30 秒', '一句话版本', '在 Theta 脑波状态下的深层回溯催眠，通过与前身记忆及"潜意识"的对话，找到人生议题的根源。', '直接给结论'],
              ['5 分钟', '核心与边界', '它和传统催眠的区别在哪里；为什么朵奶奶严格禁止远程；操作者是协助者而非主导者。', '理解原则'],
              ['深读', '完整原理', '深度、定位、简洁、并非"管道"——四条核心原则，与它们背后的实践依据。', '进入长文'],
            ].map(([a, b, c, d], i) => (
              <a key={a} className={'layer' + (i === 1 ? ' on' : '')} href="#learn" onClick={(e) => { e.preventDefault(); go('learn'); }}>
                <div className="t">{a}</div>
                <h3>{b}</h3>
                <p>{c}</p>
                <div className="go">{d} {Ico.arrow()}</div>
              </a>
            ))}
          </div>
        </div>
      </section>

      {/* 四原则 */}
      <section className="sec dark noise">
        <div className="wrap">
          <div className="split">
            <div>
              <Eyebrow>技术内核</Eyebrow>
              <h2 className="d2" style={{ marginTop: 18 }}>四条它绝不妥协的原则</h2>
              <p className="lede" style={{ marginTop: 20 }}>
                朵奶奶为量子催眠操作者订立了基本操作原则，以确保来访者的最高利益。
                这些原则不是可选的风格，而是技术本身的边界。
              </p>
              <div style={{ marginTop: 32 }}>
                <Btn kind="gold" onClick={() => go('learn')} arw>阅读完整原则</Btn>
              </div>
            </div>
            <ul className="nlist">
              {[
                ['深度', 'Depth', '量子催眠将来访者带至最深层 θ 脑波状态（梦游态），而非浅层 α 脑波。这是传统催眠不愿探索的领域。'],
                ['定位', 'Position', '操作者是协助者，而非主导者或治疗者。他不能把自己的信仰体系与认知强加给来访者。'],
                ['简洁', 'Simplicity', '没有一个多余的步骤，也没有一个可以减掉的环节。它不故弄玄虚，直指问题核心。'],
                ['并非"管道"', 'Not a Channel', '真正的管道是来访者自己。朵奶奶说：她不是灵媒，而是向导与记者。'],
              ].map(([a, b, c]) => (
                <li key={a}>
                  <span className="k">{b.slice(0, 2).toUpperCase()}</span>
                  <div>
                    <h4>{a}<span className="en">{b}</span></h4>
                    <p>{c}</p>
                  </div>
                </li>
              ))}
            </ul>
          </div>
        </div>
      </section>

      {/* 学员证言墙 */}
      <VoicesTeaser />

      {/* 文章流 */}
      <section className="sec">
        <div className="wrap">
          <SecHead
            eyebrow="文章 · 同步自公众号"
            title="最近发布的"
            sub="公众号发布后自动同步到这里，排版经过清洗，阅读体验不会打折。"
            right={<Btn kind="ghost" onClick={() => go('posts')} arw>全部文章</Btn>}
          />
          <div className="grid g3">
            {QD.posts.slice(0, 3).map((p, i) => (
              <Reveal key={p.id} delay={i * 80}>
                <PostCard p={p} />
              </Reveal>
            ))}
          </div>
        </div>
      </section>

      {/* 公众号引导 */}
      <section style={{ paddingTop: 'clamp(20px,3vw,40px)' }}>
        <div className="wrap"><FollowStrip /></div>
      </section>

      {/* 课程 CTA */}
      <section className="sec">
        <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 }}>
                一阶段课程包含约 22 小时视频、完整操作手册、结课测验与证书。
                线下工作坊提供六天连续面授与现场个案示范。
              </p>
              <div style={{ marginTop: 30, display: 'flex', gap: 12, flexWrap: 'wrap' }}>
                <Btn kind="primary" onClick={() => go('courses')} arw>看三个阶段的课程</Btn>
                <Btn kind="quiet" onClick={() => go('book')}>先填一张咨询表 →</Btn>
              </div>
            </div>
            <div className="card" style={{ padding: 0, overflow: 'hidden' }}>
              <img src={img('courseCard1')} alt="山脊上的云雾与阳光" style={{ width: '100%', height: 300, objectFit: 'cover' }} />
              <div style={{ padding: '22px 26px' }}>
                <div className="tag gold">2026 春季班 · 开放报名</div>
                <h3 style={{ marginTop: 14, fontSize: 20 }}>量子催眠一阶段 · 线上系统课</h3>
                <p style={{ marginTop: 8, fontSize: 13.5, color: 'var(--txt-2)', fontWeight: 300 }}>简体中文 · 18 个单元 · 可反复观看</p>
              </div>
            </div>
          </div>
        </div>
      </section>
    </>
  );
}


function PostCard({ p, full }) {
  const go = window.__go;
  return (
    <a className="post" href={'#post-' + p.id} onClick={(e) => { e.preventDefault(); go('post', p.id); }}>
      {full !== 'notext' && (
        <div className="thumb"><img src={p.img} alt="" /></div>
      )}
      <div style={{ display: 'flex', gap: 8, marginBottom: 14, alignItems: 'center' }}>
        <span className="tag">{p.cat}</span>
        {p.src === 'wechat' && <span className="tag wx">{Ico.wechat()} 公众号同步</span>}
      </div>
      <h3>{p.t}</h3>
      <p className="ex">{p.ex}</p>
      <div className="meta">
        <span>{p.date.replace(/-/g, '.')}</span>
        <span style={{ opacity: .5 }}>·</span>
        <span>{p.read.toLocaleString()} 阅读</span>
      </div>
    </a>
  );
}

Object.assign(window, { Shell, Footer, Home, PostCard });