function AmberSpotDetail({ 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 = {
    logo:        'assets/images/aka_2SzLByZav7.jpg',   // A01 品牌标识
    bottleGold:  'assets/images/aka_CdfGi9arlQ.jpg',   // 02 金色瓶身特写
    campaign:    'assets/images/aka_VOnnXBt7YK.jpg',   // 03 品牌主张海报
    blackBox:    'assets/images/aka_dWlUpgZtif.jpg',   // 04 黑金礼盒
    boxDetail:   'assets/images/aka_utXvpOZhpo.jpg',   // 05 拷贝 礼盒细节
    spread:      'assets/images/aka_utaG9Cd4fZ.jpg',   // 06 传播视觉
    pinkBox:     'assets/images/aka_3HVcK28esN.jpg',   // b01 粉色礼盒
    b02:         'assets/images/aka_5SbRAhRG42.jpg',   // b02
    b03:         'assets/images/aka_AP6UVc73Pq.jpg',   // b03
    b04:         'assets/images/aka_4Zjg3Br435.jpg',   // b04
    b05:         'assets/images/aka_3f5DHYdo3n.jpg',   // b05
    application: 'assets/images/aka_Cc5ijxsy7o.jpg',   // 09 视觉应用总览
    print:       'assets/images/aka_u7VjV8zAKI.jpg',   // 010 印刷物料
  };

  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">AMBER SPOT · 琥珀斑点</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">AMBER SPOT（琥珀斑点）</div>
          </div>
          <div className="bp-fact-card">
            <div className="bp-fact-label">Core Product · 核心载体</div>
            <div className="bp-fact-value">EAU DE PARFUM 香水</div>
          </div>
          <div className="bp-fact-card">
            <div className="bp-fact-label">Philosophy · 哲学内核</div>
            <div className="bp-fact-value">A Playful 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.logo} alt="AMBER SPOT 品牌标识" 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">
            在高端香水领域，优雅往往被等同于克制——极简的瓶身、冷淡的色调、不苟言笑的品牌语气。AMBER SPOT 选择了另一条路：把"俏皮"（playful）写进品牌的 DNA，用波点、瓢虫和流苏，重新定义什么叫高级的可爱。
          </p>
          <p className="bp-paragraph">
            琥珀色的液体在玻璃瓶中微微晃动，黑色波点像瓢虫背上的斑点一样随机分布，每一个点的位置都经过反复调试。铆钉瓶盖带着一丝朋克的锋利，而丝绒流苏和珍珠吊坠又把一切拉回女性的柔媚。这是一种矛盾的和谐——俏皮，但不幼稚；优雅，但不沉闷。
          </p>
          <p className="bp-paragraph-en">
            In the luxury fragrance world, elegance is often equated with restraint. AMBER SPOT chooses a different path: writing 'playful' into the brand's DNA, redefining what sophisticated charm means through polka dots, ladybugs, and tassels.
          </p>
        </section>

        <figure className="bp-figure reveal">
          <img src={IMG.campaign} alt="品牌主张海报" className="bp-img" />
          <figcaption className="bp-figcaption">CAMPAIGN · 品牌主张海报</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">
            瓶身采用圆润的蛋形轮廓，握在手中像一颗温润的琥珀。黑色波点以不规则的节奏散布在瓶身表面，每一个点的位置都经过反复调试——太密会显得杂乱，太疏又失去了瓢虫的意象。最终的密度，是让视线在瓶身上游走时，能感受到一种音乐般的节奏。
          </p>
          <p className="bp-paragraph">
            瓶盖是整个设计的点睛之笔。半球形的黑色亮面瓶盖下，一圈金属铆钉像皇冠一样环绕瓶口。铆钉不是装饰——它们是品牌态度的宣言：在柔美之中，保留一点锋利。而挂在瓶口的黑色丝绒流苏，末端坠着一颗珍珠，则是对这种锋利的温柔回应。
          </p>
          <p className="bp-paragraph-en">
            The bottle adopts a rounded egg-shaped contour, feeling like a warm amber in the hand. Black polka dots scatter across the surface in an irregular rhythm. The cap is the crowning touch of the entire design.
          </p>
        </section>

        <figure className="bp-figure reveal">
          <img src={IMG.bottleGold} alt="金色经典款瓶身" className="bp-img" />
          <figcaption className="bp-figcaption">PRODUCT · 金色经典款瓶身</figcaption>
        </figure>

        <figure className="bp-figure reveal">
          <img src={IMG.pinkBox} alt="粉色浪漫款" className="bp-img" />
          <figcaption className="bp-figcaption">COLLECTION · 粉色浪漫款</figcaption>
        </figure>

        {/* 6. 章节3：包装系统 */}
        <section className="bp-section reveal">
          <div className="bp-section-head">
            <small className="bp-section-kicker">The Packaging</small>
            <h2 className="bp-section-title">包装系统：打开一份礼物的仪式</h2>
          </div>
          <p className="bp-paragraph">
            AMBER SPOT 的包装从一开始就不是"容器"，而是"仪式"。礼盒采用天地盖结构，打开时需要轻轻抬起盒盖——这个动作本身就是一种期待。盒内铺着丝绒内衬，香水瓶安卧其中，像一件珠宝。
          </p>
          <p className="bp-paragraph">
            礼盒表面的波点采用烫金工艺，在光线下会随着角度变化而闪烁。盒身侧面系着黑色丝绒蝴蝶结，蝴蝶结下挂着与瓶身同款的流苏珍珠吊坠——这个细节让礼盒和香水形成了呼应，也让"送礼"这件事本身变得更有分量。
          </p>
          <p className="bp-paragraph-en">
            AMBER SPOT's packaging was never meant to be just a 'container' — it's a 'ritual'. The gift box uses a heaven-and-earth lid structure. The polka dots on the box surface use hot stamping technology.
          </p>
        </section>

        <figure className="bp-figure reveal">
          <img src={IMG.blackBox} alt="黑金奢华礼盒" className="bp-img" />
          <figcaption className="bp-figcaption">PACKAGING · 黑金奢华礼盒</figcaption>
        </figure>

        <figure className="bp-figure reveal">
          <img src={IMG.boxDetail} alt="礼盒细节" className="bp-img" />
          <figcaption className="bp-figcaption">PACKAGING DETAIL · 礼盒细节</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">
            AMBER SPOT 的视觉系统不止于瓶身和包装。品牌海报采用手绘插画风格，把瓢虫拟人化——一只戴着珍珠项链的瓢虫，正趴在香水瓶盖上，像在守护一份秘密。这种插画风格让品牌在一众高冷的香水广告中脱颖而出，也让"俏皮的优雅"这个主张有了具体的视觉载体。
          </p>
          <p className="bp-paragraph">
            传播物料包括品牌画册、明信片、手提袋等，全部延续波点+瓢虫+流苏的视觉语言。品牌画册采用特种纸印刷，封面的瓢虫 logo 采用烫金+击凸工艺，摸上去有明显的凹凸感——这是对"触觉品牌体验"的一次尝试。
          </p>
          <p className="bp-paragraph-en">
            AMBER SPOT's visual system extends beyond the bottle and packaging. Brand posters use hand-drawn illustration style, personifying the ladybug. The communication materials include brand brochures, postcards, and tote bags.
          </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.spread} alt="传播视觉" className="bp-img" />
          <figcaption className="bp-figcaption">CAMPAIGN · 传播视觉</figcaption>
        </figure>

        <figure className="bp-figure reveal">
          <img src={IMG.print} alt="印刷物料" className="bp-img" />
          <figcaption className="bp-figcaption">PRINT · 印刷物料</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, { AmberSpotDetail });