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

  // Scroll reveal
  React.useEffect(() => {
    const els = document.querySelectorAll('.bs-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/aka_7WmVw0EHhV.jpg',
    productMain: 'assets/images/aka_BDW8Lc07Bi.jpg',
    packaging: 'assets/images/aka_ARV122y8jI.jpg',
    tubeDetail: 'assets/images/aka_xo5uor6uL0.jpg',
    texture: 'assets/images/aka_wsstHUNJ8U.jpg',
    scene: 'assets/images/aka_b6XMh0BQqV.jpg',
    poster1: 'assets/images/aka_Yme0bETZuC.jpg',
    poster2: 'assets/images/aka_oPKZPtV2HW.jpg',
    series: 'assets/images/aka_kn3OiUIvnb.jpg',
  };

  const facts = [
    { label: '设计方', value: 'SENLAN Studio' },
    { label: '香调', value: '东方古典香 · 木质花香 · 复古调' },
    { label: '概念载体', value: '复古护手霜 · 兰指美学 · 旧时光的温柔' },
    { label: '视觉基调', value: '复古米白 × 墨绿 × 烫金 × 胭脂粉' },
  ];

  const highlights = [
    '卖「时刻」而非卖护手霜：把产品锚定在一个具体情绪场景上（旧时光梳妆台、涂护手霜的30秒），画面先于产品说话',
    '四色克制定调：复古米白 / 墨绿 / 烫金 / 胭脂粉只此四色，所有触点（管身、包装、海报）严格复用',
    '包装即收藏品：护手霜管身的弧度取意手指线条，让产品本身成为梳妆台上值得陈列的物件',
    '复古叙事统一：从海报到社交媒体到线下陈列，统一的复古气韵，让品牌成为一个与记忆和浪漫相连的符号',
  ];

  return (
    <div className="bs-detail work-detail">
      <div className="bs-container">
        <a href="#" className="bs-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. 头部 */}
        <header className="bs-header reveal">
          <div className="bs-kicker">MODERN GODDESS · 摩登女神系列</div>
          <h1 className="bs-title">Senlen X 古典香护手霜</h1>
          <div className="bs-meta">2024 · 创意总监：SENLAN · 类别：护手霜 / 古典香氛 / 品牌视觉 / 包装设计</div>
          <div className="bs-rule"></div>
        </header>

        {/* 2. facts 四宫格 */}
        <div className="bs-facts reveal">
          {facts.map((f, i) => (
            <div className="bs-fact-card" key={i}>
              <div className="bs-fact-label">{f.label}</div>
              <div className="bs-fact-value">{f.value}</div>
            </div>
          ))}
        </div>

        {/* 3. 首屏主视觉 */}
        <figure className="bs-figure reveal">
          <img src={IMG.hero} alt="Senlen X 古典香护手霜 品牌主视觉" className="bs-img" />
          <figcaption className="bs-figcaption">HERO · 品牌主视觉</figcaption>
        </figure>

        {/* 4. 章节1：项目背景 */}
        <section className="bs-section reveal">
          <div className="bs-section-head">
            <small className="bs-section-kicker">01 — The Context</small>
            <h2 className="bs-section-title">项目背景：把旧时光的温柔，搬进现在</h2>
          </div>
          <p className="bs-paragraph">
            Senlen X 古典香护手霜不是一支普通的护手霜，而是一场关于「旧时光」的视觉实验。品牌从民国时期的女性梳妆台上汲取灵感——那些铜质镜框、瓷质粉盒、丝绸手帕，以及指尖残留的淡淡花香。我们想做的，不是复古，而是让当代女性在涂护手霜的那30秒里，短暂地回到一个更慢、更温柔的时代。产品融合天然植物精华与东方古典香调，在护肤与香氛之间找到平衡，为双手带来由内而外的温润光彩。
          </p>
          <p className="bs-paragraph-en">
            Senlen X Vintage Hand Cream is not just another hand cream — it is a visual experiment in nostalgia. The brand draws inspiration from the vanities of Republican-era women: brass mirror frames, porcelain powder boxes, silk handkerchiefs, and the faint floral scent that lingers on fingertips. This is not retro for retro's sake. It is an invitation to step, for thirty seconds, into a slower, softer time. Blending botanical essences with classical Oriental fragrance, the product finds its balance between skincare and scent, leaving hands luminous from within.
          </p>
        </section>

        <figure className="bs-figure reveal">
          <img src={IMG.productMain} alt="Senlen X 古典香护手霜 产品主视觉" className="bs-img" />
          <figcaption className="bs-figcaption">PRODUCT · 产品主视觉</figcaption>
        </figure>

        {/* 5. 章节2：设计工作 */}
        <section className="bs-section reveal">
          <div className="bs-section-head">
            <small className="bs-section-kicker">02 — The Design Work</small>
            <h2 className="bs-section-title">设计工作：复古不是怀旧，是重构</h2>
          </div>
          <p className="bs-paragraph">
            视觉识别建立在「复古」与「现代」的微妙平衡之上：米白宣纸质感的底色、墨绿的主色调、烫金的细节点缀，以及胭脂粉的情绪色彩。包装系统以「少即是雅」为路径：干净的字体排印、含蓄的压凸、带触感的材质与严格克制的构图，共同加固品牌的高级定位。护手霜管身的弧度取意女性手指的线条，瓶盖的纹理呼应丝绸的褶皱。每一个细节都经过反复打磨，确保产品在梳妆台上、在手提包里、在社交媒体的镜头里，都能保持同一种复古气韵。
          </p>
          <p className="bs-paragraph-en">
            The visual identity rests on a delicate balance between vintage and modern: rice-paper off-white as ground, ink green as the structural tone, gilded details as punctuation, and rouge pink as the emotional accent. The packaging system follows a principle of less is more elegant — clean typography, restrained embossing, tactile materials, and rigorously controlled composition all reinforce the brand's luxury positioning. The tube's curvature echoes the lines of a woman's fingers; the cap's texture responds to the folds of silk. Every detail is refined so that on vanity, in handbag, or on social media, the same vintage breath remains.
          </p>
        </section>

        <figure className="bs-figure reveal">
          <img src={IMG.packaging} alt="Senlen X 古典香护手霜 包装设计" className="bs-img" />
          <figcaption className="bs-figcaption">PACKAGING · 包装设计</figcaption>
        </figure>

        <figure className="bs-figure reveal">
          <img src={IMG.tubeDetail} alt="Senlen X 古典香护手霜 管身细节" className="bs-img" />
          <figcaption className="bs-figcaption">DETAIL · 管身细节</figcaption>
        </figure>

        {/* 6. 章节3：设计任务与创作路径 */}
        <section className="bs-section reveal">
          <div className="bs-section-head">
            <small className="bs-section-kicker">03 — The Mission</small>
            <h2 className="bs-section-title">设计任务：让护手霜成为梳妆台上的收藏品</h2>
          </div>
          <p className="bs-paragraph">
            创建一个能凭「情绪、氛围与复古叙事」脱颖而出的护手霜品牌识别；发展一套连贯的包装与广告系统，融合复古美学、精致字体与沉浸式视觉指导；构建一个让护手霜成为更大叙事体验一部分（而非单纯护肤品）的品牌宇宙。
          </p>
        </section>

        <section className="bs-section reveal">
          <div className="bs-section-head">
            <small className="bs-section-kicker">04 — The Approach</small>
            <h2 className="bs-section-title">创作路径：对比驱动的创意方向</h2>
          </div>
          <p className="bs-paragraph">
            创意方向由「对比」驱动：旧时光 ↔ 当代、柔软 ↔ 结构、静止 ↔ 情绪。项目刻意绕开传统护肤品的营销套路，转而采用复古海报、慢叙事与奢华时装编辑摄影的视觉语言。每一张构图都旨在唤起一种感受，而非单纯展示产品——让包装与广告画面作为统一的品牌体验协同工作，把护手霜转化为一个与记忆、浪漫和氛围相连的符号性物件。
          </p>
          <p className="bs-paragraph-en">
            The creative direction is driven by contrast: old times ↔ the contemporary, softness ↔ structure, stillness ↔ emotion. The project deliberately sidesteps the conventions of skincare marketing, adopting instead the visual language of vintage posters, slow narrative, and luxury fashion editorial photography. Each composition is designed to evoke a feeling rather than simply display a product. Packaging and advertising work together as one brand experience, transforming a hand cream into a symbolic object tied to memory, romance, and atmosphere.
          </p>
        </section>

        <figure className="bs-figure reveal">
          <img src={IMG.texture} alt="Senlen X 古典香护手霜 材质细节" className="bs-img" />
          <figcaption className="bs-figcaption">TEXTURE · 材质细节</figcaption>
        </figure>

        <figure className="bs-figure reveal">
          <img src={IMG.scene} alt="Senlen X 古典香护手霜 场景视觉" className="bs-img" />
          <figcaption className="bs-figcaption">SCENE · 场景视觉</figcaption>
        </figure>

        {/* 7. 章节4：传播视觉 */}
        <section className="bs-section reveal">
          <div className="bs-section-head">
            <small className="bs-section-kicker">05 — Communication</small>
            <h2 className="bs-section-title">传播视觉：复古海报的叙事力量</h2>
          </div>
          <p className="bs-paragraph">
            广告视觉打破传统护肤品广告的套路，不拍精致的产品特写，而是直接把复古元素、女性剪影、色块、书法拼贴在一起。每一张海报都是一个关于「旧时光女性」的视觉故事，消费者不需要读懂设计语言，只需要感受到那种情绪——这就是复古美学最厉害的地方：它不解释，它只感染。传播视觉从海报延伸到社交媒体、电商详情页、线下陈列，确保品牌在每一个触点都保持同一种复古气韵。
          </p>
          <p className="bs-paragraph-en">
            The advertising visuals break the conventions of skincare campaigns. Instead of polished product close-ups, they collage vintage elements, female silhouettes, color blocks, and calligraphy directly onto the page. Each poster is a visual story about the woman of a bygone era. Viewers need not decode the design — they only need to feel the mood. That is the quiet power of vintage aesthetics: it does not explain; it infects. From posters to social media to e-commerce detail pages to in-store displays, the same vintage breath is maintained at every touchpoint.
          </p>
        </section>

        <figure className="bs-figure reveal">
          <img src={IMG.poster1} alt="Senlen X 古典香护手霜 复古海报" className="bs-img" />
          <figcaption className="bs-figcaption">POSTER 01 · 复古海报</figcaption>
        </figure>

        <figure className="bs-figure reveal">
          <img src={IMG.poster2} alt="Senlen X 古典香护手霜 传播视觉" className="bs-img" />
          <figcaption className="bs-figcaption">POSTER 02 · 传播视觉</figcaption>
        </figure>

        <figure className="bs-figure reveal">
          <img src={IMG.series} alt="Senlen X 古典香护手霜 系列视觉" className="bs-img" />
          <figcaption className="bs-figcaption">SERIES · 系列视觉</figcaption>
        </figure>

        {/* 8. takeaway 设计亮点 */}
        <div className="bs-takeaway reveal">
          <h2 className="bs-takeaway-title">设计亮点</h2>
          <ul className="bs-takeaway-list">
            {highlights.map((h, i) => (
              <li key={i}><span className="bs-dash">—</span>{h}</li>
            ))}
          </ul>
        </div>

        {/* 9. 页脚 */}
        <footer className="bs-footer reveal">
          <div className="bs-footer-rule"></div>
          <div className="bs-footer-signature">
            <img src={SIGNATURE_URL} alt="SENLAN" className="bs-signature-img" />
          </div>
          <p className="bs-footer-text">本页为作品案例展示 · 设计版权归 SENLAN 所有 · 仅作个人作品集展示用途</p>
          <a href="#" className="bs-back bs-back-bottom" 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>
        </footer>
      </div>
    </div>
  );
}

Object.assign(window, { BPealDetail });