function RitualHouseDetail({ onBack }) {
  React.useEffect(() => {
    window.scrollTo(0, 0);
  }, []);

  React.useEffect(() => {
    const els = document.querySelectorAll('.rh-detail .reveal');
    const io = new IntersectionObserver(
      (entries) => {
        entries.forEach((entry) => {
          if (entry.isIntersecting) {
            entry.target.classList.add('is-visible');
            io.unobserve(entry.target);
          }
        });
      },
      { threshold: 0.12, rootMargin: '0px 0px -40px 0px' }
    );
    els.forEach((el) => io.observe(el));
    return () => io.disconnect();
  }, []);

  const SIGNATURE_URL = 'assets/senlan-signature-outline.png';

  return (
    <div className="work-detail rh-detail">
      <div className="container">
        <a href="#" className="work-back" onClick={(e) => { e.preventDefault(); onBack(); }}>
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><path d="M19 12H5M12 19l-7-7 7-7"/></svg>
          返回作品列表
        </a>

        <div className="work-header reveal">
          <div className="work-meta">
            <span className="work-cat">佳节好礼 / Packaging</span>
            <span className="work-year">2025</span>
          </div>
          <h1 className="work-title">Ritual House · 仪式居所</h1>
          <p className="work-subtitle">— The Art of Ritual —</p>
          <div className="work-header-rule"></div>
        </div>
      </div>

      <div className="work-hero-wrap reveal">
        <img src="assets/images/aka_sNOJKIRmyT.jpg" alt="Ritual House 仪式居所" className="work-hero-img" />
      </div>

      <div className="container">
        <div className="work-section work-section-centered reveal">
          <p className="work-paragraph">
            Ritual House 是一个以"仪式感"为核心的高端生活方式品牌。我们相信，日常中的每一个仪式瞬间，都是对生活的郑重以待。品牌视觉从东方禅意与西方极简的交汇处出发，以克制的色彩、考究的材质和精确的比例，构建一个让身心安顿的视觉居所。
          </p>
        </div>

        {/* 板块1：品牌视觉 */}
        <div className="work-gallery-section reveal">
          <div className="work-gallery-header">
            <div className="work-section-label">视觉识别 / Visual Identity</div>
            <h2 className="work-gallery-title">以留白为底，以光影为笔</h2>
            <p className="work-gallery-desc">
              品牌标识以极简线条勾勒"门"的意象——既是居所的入口，也是仪式的开端。搭配低饱和米色与深棕色调，传递温润而笃定的品牌气质。
            </p>
          </div>

          <div className="work-gallery-hero">
            <img src="assets/images/aka_sNOJKIRmyT.jpg" alt="品牌视觉" className="work-gallery-img" />
          </div>
        </div>

        {/* 板块2：包装设计 */}
        <div className="work-gallery-section reveal">
          <div className="work-gallery-header">
            <div className="work-section-label">包装 / Packaging</div>
            <h2 className="work-gallery-title">开箱，即仪式的开始</h2>
            <p className="work-gallery-desc">
              包装采用磁吸翻盖结构，配合定制内衬与手写感谢卡，让每一次开箱都成为专属的仪式时刻。材质选用天然触感纸张，还原手作温度。
            </p>
          </div>

          <div className="work-gallery-grid work-gallery-grid-2">
            <div className="work-gallery-item">
              <img src="assets/images/aka_sNOJKIRmyT.jpg" alt="包装细节" className="work-gallery-img" />
            </div>
            <div className="work-gallery-item">
              <img src="assets/images/aka_sNOJKIRmyT.jpg" alt="包装细节" className="work-gallery-img" />
            </div>
          </div>
        </div>

        {/* 底部返回 */}
        <div className="work-bottom-nav">
          <a href="#" className="work-bottom-link" onClick={(e) => { e.preventDefault(); onBack(); }}>
            ← 返回全部作品
          </a>
        </div>
      </div>

      <footer className="footer work-footer">
        <div className="container">
          <div className="footer-left">
            <img src={SIGNATURE_URL} alt="Senlan" className="footer-signature" />
          </div>
          <div className="footer-right">
            <span>© 2026 Senlan Studio. All rights reserved.</span>
          </div>
        </div>
      </footer>
    </div>
  );
}

Object.assign(window, { RitualHouseDetail });