function BPearlPinkDetail({ 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 = {
    hero:       'assets/images/byte_ccd5b6131e55435dbeebfeb0544f97d9.png',  // 0.png
    artBox:     'assets/images/byte_626fdccfe99444218e3597d1d1356a3c.png',  // 01.png
    exterior:   'assets/images/aka_4uKvvBj9OJ.jpg',  // 02.png
    typography: 'assets/images/aka_JX1PZIp0VM.jpg',  // 03.png
    interior:   'assets/images/aka_nrGdQppOZM.jpg',  // 04.png
    utensils:   'assets/images/aka_mZAwZbx2dk.jpg',  // 05.png
    application:'assets/images/aka_hw24VgQQmF.jpg',  // 06.png
    mood:       'assets/images/aka_weq9YDH2Wz.jpg',  // NanoBanana
  };

  const VIDEO = {
    unboxing: 'assets/images/aka_cmUuLSEUJP.jpg',    // 动画.mp4
  };

  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">MODERN GODDESS · 摩登女神系列</div>
          <h1 className="bp-title">B X Pearl pink 珍脂粉</h1>
          <div className="bp-meta">2024 · 创意总监：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 X Pearl pink · 珍脂粉</div>
          </div>
          <div className="bp-fact-card">
            <div className="bp-fact-label">Core Product · 核心载体</div>
            <div className="bp-fact-value">珍珠粉护肤礼盒（Ceremonial Gift Box）</div>
          </div>
          <div className="bp-fact-card">
            <div className="bp-fact-label">Philosophy · 哲学内核</div>
            <div className="bp-fact-value">东方脂粉美学 · 留白与温润</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.hero} alt="B X Pearl pink 珍脂粉 品牌主视觉" className="bp-img" />
          <figcaption className="bp-figcaption">HERO · 品牌主视觉</figcaption>
        </figure>

        {/* 4. 章节1：品牌概念 */}
        <section className="bp-section reveal">
          <div className="bp-section-head">
            <small className="bp-section-kicker">The Concept</small>
            <h2 className="bp-section-title">品牌概念：传统与现代的十字路口</h2>
          </div>
          <p className="bp-paragraph">
            B X Pearl pink 珍脂粉诞生于数百年东方脂粉传统与现代高端美妆美学的交叉口。项目的核心，是打造一套独家珍珠粉护肤礼盒。包装被设计成一件沉浸式艺术物件，呼应东方"留白"的哲学与传统闺阁梳妆的静谧氛围。从触感材质的选择到定制的视觉叙事，每个细节都为传达纯粹、传承与安静的奢华服务。珍脂粉不是简单的护肤品，而是一场关于东方女性温润之美的仪式——每一次打开礼盒，都是一次与自己对话的时刻。
          </p>
          <p className="bp-paragraph-en">
            Born at the intersection of centuries-old Oriental cosmetic traditions and modern luxury beauty aesthetics, B X Pearl pink is a ceremonial pearl powder skincare gift box. The packaging is conceived as an immersive art object — echoing the Eastern philosophy of "white space" and the quiet intimacy of a lady's dressing chamber. From tactile materials to custom visual narrative, every detail serves purity, heritage, and quiet luxury. Zhen Zhi Fen is not merely skincare; it is a ritual of Oriental feminine grace — each time the box is opened, a moment of dialogue with oneself begins.
          </p>
        </section>

        <figure className="bp-figure reveal">
          <img src={IMG.artBox} alt="外盒与烫金纹样" className="bp-img" />
          <figcaption className="bp-figcaption">ART BOX · 外盒与烫金纹样</figcaption>
        </figure>

        {/* 5. 章节2：目标与三个关键任务 */}
        <section className="bp-section reveal">
          <div className="bp-section-head">
            <small className="bp-section-kicker">The Objective</small>
            <h2 className="bp-section-title">目标与三个关键任务</h2>
          </div>
          <p className="bp-paragraph">
            把 B X Pearl pink 定位为全球奢华美妆市场中的精英级仪式护肤品牌——用一套视觉语言，把产品从"一瓶护肤品"升格为"高艺术礼赠体验"。
          </p>
          <p className="bp-paragraph">
            <b>① 艺术整合</b>：让传统东方画（花鸟、仕女）与现代超极简的包装结构无缝合体。<b>② 触觉叙事</b>：手作宣纸、天然丝衬、烫金，让开箱成为多感官仪式。<b>③ 无杂美学</b>：外包装保持绝对极简，所有功能性叙事与仪式指南都藏进内部结构。
          </p>
          <p className="bp-paragraph-en">
            Position B X Pearl pink as an elite ceremonial skincare brand in the global luxury beauty market — using a single visual language to elevate the product from "a bottle of skincare" to "a high-art gifting experience."
          </p>
        </section>

        <figure className="bp-figure reveal">
          <img src={IMG.exterior} alt="哑光外盒" className="bp-img" />
          <figcaption className="bp-figcaption">EXTERIOR · 哑光外盒，无商业噪音</figcaption>
        </figure>

        <figure className="bp-figure reveal">
          <img src={IMG.typography} alt="压凸烫金字体" className="bp-img" />
          <figcaption className="bp-figcaption">TYPOGRAPHY · 压凸烫金字体</figcaption>
        </figure>

        {/* 6. 章节3：包装结构 */}
        <section className="bp-section reveal">
          <div className="bp-section-head">
            <small className="bp-section-kicker">The Ritual</small>
            <h2 className="bp-section-title">包装结构：一场展开的仪式</h2>
          </div>
          <p className="bp-paragraph">
            整套包装系统建立在一个概念上——"unfolding the ceremony"（展开这场仪式）。
          </p>
          <p className="bp-paragraph">
            <b>外层艺术盒</b>：硬质哑光外盒，压凸烫金的字体与居中的花鸟插画，完全剔除商业噪音。<b>内部体验</b>：开启后，深色丝衬托着手作陶瓷粉盒、竹制粉扑、瓷勺与极简锡罐。<b>宣纸仪式卡</b>：一叠扇形展开的指南，印在带毛边的厚重宣纸上，以一枚黄铜铆钉为轴，一步步引导使用者完成护肤仪式。
          </p>
          <p className="bp-paragraph-en">
            The entire packaging system is built on a single concept — "unfolding the ceremony." The outer art box: a rigid matte case with debossed gold typography and a centered bird-and-flower illustration, entirely free of commercial noise. The inner experience: upon opening, deep silk lining cradles hand-thrown ceramic powder cases, a bamboo puff, a porcelain spoon, and a minimalist tin can. The rice paper ritual card: a fan-folded guide printed on thick, deckle-edged xuan paper, pivoting on a single brass rivet, guiding the user step by step through the skincare ritual.
          </p>
        </section>

        <figure className="bp-figure reveal">
          <img src={IMG.interior} alt="丝衬与粉器布局" className="bp-img" />
          <figcaption className="bp-figcaption">INTERIOR · 丝衬与粉器布局</figcaption>
        </figure>

        {/* 视频 */}
        <figure className="bp-figure bp-figure-video reveal">
          <video
            className="bp-video"
            src={VIDEO.unboxing}
            autoPlay
            loop
            muted
            controls
            playsInline
          />
          <figcaption className="bp-figcaption">UNFOLDING · 开箱仪式动画</figcaption>
        </figure>

        <figure className="bp-figure reveal">
          <img src={IMG.utensils} alt="粉盒、粉扑与瓷勺" className="bp-img" />
          <figcaption className="bp-figcaption">UTENSILS · 粉盒、粉扑与瓷勺</figcaption>
        </figure>

        {/* 7. 章节4：视觉应用与氛围 */}
        <section className="bp-section reveal">
          <div className="bp-section-head">
            <small className="bp-section-kicker">Application</small>
            <h2 className="bp-section-title">视觉应用：从礼盒到生活的延伸</h2>
          </div>
          <p className="bp-paragraph">
            视觉系统从礼盒延伸到品牌的每一个触点——产品海报、社交媒体、电商详情页、线下陈列。统一的珍珠粉色调、烫金细节、极简构图，确保品牌在每一个触点都保持同一种温润优雅的气质。氛围视觉注重光影的营造：柔和的侧光、丝质的反光、珍珠般的光泽，共同构建起一个令人向往的东方美妆美学场景。消费者买的不是一瓶珍珠粉，而是那个想象中的自己——在黄昏里对镜梳妆、从容优雅的东方女性。
          </p>
          <p className="bp-paragraph-en">
            The visual system extends from the gift box to every touchpoint of the brand — product posters, social media, e-commerce detail pages, and offline displays. A unified pearl-pink palette, gold foil details, and minimalist composition ensure the brand maintains the same warm elegance at every point of contact. Mood visuals focus on the crafting of light and shadow: soft side lighting, silk reflections, and pearl-like luster together build a desirable scene of Oriental beauty aesthetics. What the consumer buys is not a bottle of pearl powder, but the imagined self — an unhurried, graceful Eastern woman, grooming at her mirror at dusk.
          </p>
        </section>

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

        <figure className="bp-figure reveal">
          <img src={IMG.mood} alt="氛围视觉" className="bp-img" />
          <figcaption className="bp-figcaption">MOOD · 氛围视觉</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>包装即流程：</b>黄铜铆钉 + 扇形宣纸卡把"怎么用"变成仪式引导——护肤礼盒同样可以内嵌"如何品鉴"的引导卡，让包装参与体验而非只装产品</span>
            </li>
            <li>
              <span className="bp-dash">—</span>
              <span><b>触觉即叙事：</b>宣纸毛边、丝衬、烫金这些材质词汇本身就是文案——珍脂粉的温润纸感、丝质衬里可以直接诉说"东方温润"</span>
            </li>
            <li>
              <span className="bp-dash">—</span>
              <span><b>全链路视觉统一：</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, { BPearlPinkDetail });