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

  React.useEffect(() => {
    const els = document.querySelectorAll('.bp-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';

  const IMG = {
    identity:    'assets/images/aka_cJ2U2bhd9k.jpg',   // (1) 品牌标识
    viSystem:    'assets/images/aka_xuRTTVwO8B.jpg',   // (2) VI系统总览
    craft:       'assets/images/aka_WnBMsJNe6P.jpg',   // (8) 工艺细节
    mirror:      'assets/images/aka_V8Nh8XggAW.jpg',   // (9) 镜子刻字
    appScene:    'assets/images/aka_Zrf8njlSNH.jpg',   // (10) 视觉应用场景
    caseFront:   'assets/images/aka_hayTBxXwMb.jpg',   // 封面 化妆箱正面
    interior:    'assets/images/aka_t5tFJjI4Mo.jpg',   // a01 内部化妆品
    manifesto:   'assets/images/aka_YvBXxqLWyY.jpg',   // SHOUHUI 手绘宣言
  };

  return (
    <div className="bp-detail work-detail">
      <div className="bp-container">
        {/* 顶部返回 */}
        <a href="#" className="bp-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>

        {/* 1. 头部 */}
        <div className="bp-header reveal">
          <div className="bp-kicker">FESTIVE GIFT · 佳节好礼系列</div>
          <h1 className="bp-title">B Luxury · 永恒优雅</h1>
          <div className="bp-meta">2026 · 创意总监：SENLAN · 类别：高端美妆 / 品牌视觉 / 包装设计 / 佳节好礼</div>
          <hr className="bp-rule" />
        </div>

        {/* 2. facts 四宫格 */}
        <div className="bp-facts reveal">
          <div className="bp-fact-card">
            <div className="bp-fact-label">Brand · 品牌</div>
            <div className="bp-fact-value">B Luxury（永恒优雅）</div>
          </div>
          <div className="bp-fact-card">
            <div className="bp-fact-label">Core Product · 核心载体</div>
            <div className="bp-fact-value">高端美妆礼盒套装</div>
          </div>
          <div className="bp-fact-card">
            <div className="bp-fact-label">Philosophy · 哲学内核</div>
            <div className="bp-fact-value">Timeless Elegance · 永恒的优雅</div>
          </div>
          <div className="bp-fact-card">
            <div className="bp-fact-label">Material · 材质</div>
            <div className="bp-fact-value">紫色丝绒 / 金属 / 绗缝内衬 / 烫金</div>
          </div>
        </div>

        {/* 3. 首屏主视觉 */}
        <figure className="bp-figure reveal">
          <img src={IMG.identity} alt="B Luxury 品牌标识" className="bp-img" />
          <figcaption className="bp-figcaption">BRAND IDENTITY · 品牌标识</figcaption>
        </figure>

        {/* 4. 章节1：品牌主张 */}
        <section className="bp-section reveal">
          <div className="bp-section-head">
            <small className="bp-section-kicker">The Thesis</small>
            <h2 className="bp-section-title">品牌主张：永恒的优雅</h2>
          </div>
          <p className="bp-paragraph">
            在高端美妆领域，"奢华"往往被等同于"昂贵"——钻石瓶盖、黄金包装、天价定价。B Luxury 选择了另一种路径：把"优雅"（elegance）作为品牌的最高准则，用紫色丝绒的触感、Art Deco 的几何秩序、金属标识的克制光泽，重新定义什么叫"可触摸的奢华"。
          </p>
          <p className="bp-paragraph">
            品牌口号 "Timeless Elegance for a Refined You"（永恒的优雅，为精致的你）不是一句空话——它体现在每一个细节里：化妆箱内衬的绗缝密度、镜子上刻的 "BEAUTY LIVES IN THE DETAILS"、金属扣件的开合手感。优雅不是张扬，而是经得起反复凝视的克制。
          </p>
          <p className="bp-paragraph-en">
            In the luxury beauty world, 'luxury' is often equated with 'expense'. B Luxury chooses a different path: treating 'elegance' as the brand's highest principle, redefining 'tangible luxury' through the touch of purple velvet, the geometric order of Art Deco, and the restrained luster of metal branding.
          </p>
        </section>

        <figure className="bp-figure reveal">
          <img src={IMG.manifesto} alt="品牌手绘宣言" className="bp-img" />
          <figcaption className="bp-figcaption">BRAND MANIFESTO · 品牌手绘宣言</figcaption>
        </figure>

        {/* 5. 章节2：产品设计 */}
        <section className="bp-section reveal">
          <div className="bp-section-head">
            <small className="bp-section-kicker">The Product</small>
            <h2 className="bp-section-title">产品设计：一只丝绒箱的旅行</h2>
          </div>
          <p className="bp-paragraph">
            化妆箱采用圆润的椭圆形轮廓，像一颗被精心打磨的宝石。箱身覆盖深紫色丝绒，表面以 Art Deco 风格的扇形放射状纹理压印——这些纹理不是装饰，而是品牌视觉的骨架，让箱子在任何光线下都能产生微妙的光影变化。
          </p>
          <p className="bp-paragraph">
            打开箱子是一场仪式。箱盖内侧是绗缝丝绒内衬，中央嵌着一面镜子，镜面上刻着 "BEAUTY LIVES IN THE DETAILS"（美存在于细节之中）。箱内分隔为多个定制槽位，每一件化妆品都有自己的位置——粉饼、口红、指甲油、化妆刷，全部采用玫瑰金与紫色金属质感，与外箱形成呼应。
          </p>
          <p className="bp-paragraph-en">
            The makeup case adopts a rounded oval contour, like a carefully polished gem. The case body is covered in deep purple velvet, with Art Deco-style fan-shaped radial textures embossed on the surface. Opening the case is a ritual.
          </p>
        </section>

        <figure className="bp-figure reveal">
          <img src={IMG.caseFront} alt="丝绒化妆箱外观" className="bp-img" />
          <figcaption className="bp-figcaption">PRODUCT · 丝绒化妆箱外观</figcaption>
        </figure>

        <figure className="bp-figure reveal">
          <img src={IMG.interior} alt="箱内化妆品套装" className="bp-img" />
          <figcaption className="bp-figcaption">INTERIOR · 箱内化妆品套装</figcaption>
        </figure>

        {/* 6. 章节3：细节与工艺 */}
        <section className="bp-section reveal">
          <div className="bp-section-head">
            <small className="bp-section-kicker">The Details</small>
            <h2 className="bp-section-title">细节工艺：美存在于细节之中</h2>
          </div>
          <p className="bp-paragraph">
            B Luxury 相信，真正的奢华不在 logo 的大小，而在那些需要凑近才能发现的细节。金属 "B" 标识采用立体浮雕工艺，边缘经过手工打磨，摸上去没有任何毛刺。丝绒表面的压印纹理深度经过反复调试——太浅会显得廉价，太深会破坏丝绒的柔滑感。
          </p>
          <p className="bp-paragraph">
            箱内的每一件化妆品都经过统一的视觉规划：瓶身比例、金属光泽、字体排印，全部遵循同一套设计语言。化妆刷的刷毛采用渐变染色，从根部的深紫过渡到毛尖的浅粉，像一束微型的日落。这些细节不会被立刻注意到，但它们共同构成了品牌的"高级感"——一种无法被廉价复制的综合体验。
          </p>
          <p className="bp-paragraph-en">
            B Luxury believes that true luxury lies not in the size of the logo, but in the details that require leaning in to discover. The metal 'B' logo uses three-dimensional relief craftsmanship, with edges hand-polished. These details may not be noticed immediately, but they together constitute the brand's 'sense of luxury'.
          </p>
        </section>

        <figure className="bp-figure reveal">
          <img src={IMG.mirror} alt="镜子刻字与内部细节" className="bp-img" />
          <figcaption className="bp-figcaption">DETAIL · 镜子刻字与内部细节</figcaption>
        </figure>

        <figure className="bp-figure reveal">
          <img src={IMG.craft} alt="工艺细节" className="bp-img" />
          <figcaption className="bp-figcaption">CRAFTSMANSHIP · 工艺细节</figcaption>
        </figure>

        {/* 7. 章节4：品牌视觉系统 */}
        <section className="bp-section reveal">
          <div className="bp-section-head">
            <small className="bp-section-kicker">Visual Identity</small>
            <h2 className="bp-section-title">视觉系统：从箱身到生活场景</h2>
          </div>
          <p className="bp-paragraph">
            B Luxury 的视觉系统不止于化妆箱。品牌 VI 涵盖手提袋、礼盒、名片、信封、吊牌、贴纸等全套物料，全部延续紫色 + 金属银的配色体系。手提袋采用厚卡纸印刷，表面覆亚膜，提手用同色丝缎制作——拎在手里的重量感本身就是一种品牌信号。
          </p>
          <p className="bp-paragraph">
            礼盒采用天地盖结构，盒身系紫色丝缎蝴蝶结，吊牌上压印 "B Luxury" 标识。名片采用 300g 特种纸，双面四色印刷 + 烫银工艺，摸上去有明显的凹凸感。整套 VI 系统的核心原则是"克制"——紫色是唯一的主色，金属银是唯一的点缀色，没有多余的装饰，让品牌标识自己说话。
          </p>
          <p className="bp-paragraph-en">
            B Luxury's visual system extends beyond the makeup case. The brand VI covers a full set of materials including tote bags, gift boxes, business cards, envelopes, hang tags, and stickers, all continuing the purple + metallic silver color system. The core principle of the entire VI system is 'restraint'.
          </p>
        </section>

        <figure className="bp-figure reveal">
          <img src={IMG.viSystem} alt="品牌视觉系统总览" className="bp-img" />
          <figcaption className="bp-figcaption">VI SYSTEM · 品牌视觉系统总览</figcaption>
        </figure>

        <figure className="bp-figure reveal">
          <img src={IMG.appScene} alt="视觉应用场景" className="bp-img" />
          <figcaption className="bp-figcaption">APPLICATION · 视觉应用场景</figcaption>
        </figure>

        {/* 8. takeaway 设计亮点 */}
        <div className="bp-takeaway reveal">
          <h2 className="bp-takeaway-title">设计亮点</h2>
          <ul className="bp-takeaway-list">
            <li>
              <span className="bp-dash">—</span>
              <span><b>丝绒触感：</b>深紫色丝绒作为核心材质，让"奢华"从视觉延伸到触觉，建立可触摸的品牌记忆</span>
            </li>
            <li>
              <span className="bp-dash">—</span>
              <span><b>Art Deco 秩序：</b>扇形放射状压印纹理贯穿箱身与品牌视觉，用几何秩序替代繁复装饰，体现克制的高级感</span>
            </li>
            <li>
              <span className="bp-dash">—</span>
              <span><b>细节仪式感：</b>镜面上刻 "BEAUTY LIVES IN THE DETAILS"、绗缝内衬、定制槽位，让"打开箱子"成为一场有期待感的仪式</span>
            </li>
            <li>
              <span className="bp-dash">—</span>
              <span><b>克制 VI 体系：</b>紫色 + 金属银双色克制定调，全套物料严格复用同一套设计语言，让品牌识别不依赖大声量</span>
            </li>
          </ul>
        </div>

        {/* 底部返回 */}
        <div className="bp-back-bottom">
          <a href="#" className="bp-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>

        {/* 9. 页脚 */}
        <footer className="bp-footer">
          <div className="bp-footer-rule"></div>
          <div className="bp-footer-signature">
            <img src={SIGNATURE_URL} alt="Senlan" className="bp-signature-img" />
          </div>
          <div className="bp-footer-text">
            本页为作品案例展示 · 设计版权归 SENLAN 所有 · 仅作个人作品集展示用途
          </div>
        </footer>
      </div>
    </div>
  );
}

Object.assign(window, { BLuxuryDetail });