function Archive07Detail({ 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_e9954830033d41cb8ca710e1a738455e.png',   // 01 首屏主视觉
    product:     'assets/images/byte_c86b916b355d42d99e2f138716fa43a1.png',   // 02 产品外观
    detail:      'assets/images/byte_42249e6aa5c744939d1c32c4591e2a03.png',   // 03 细节特写
    typography:  'assets/images/aka_sblq2X3kAg.jpg',   // 04 品牌字体 a06.png
    interior:    'assets/images/aka_ptvPzsQi12.jpg',   // 05 内部结构 a07.png
    collection:  'assets/images/aka_siYjkUi8qa.jpg',   // 06 产品系列 a08.png
    app1:        'assets/images/byte_acf815bc80f14ed4a73ff42cccc8e443.png',   // 07 视觉应用1
    app2:        'assets/images/aka_5kKT905n94.jpg',   // 08 视觉应用2 a10.png
    mood:        'assets/images/aka_pb5PNW3iFr.jpg',   // 09 氛围视觉 a011.png
    logo:        'assets/images/aka_zOm8kWm94P.jpg',   // 10 Logo展示 logo.png
    poster:      'assets/images/byte_c435cdf988964e408f4e51604e94ab3f.png',   // 11 海报主视觉
  };

  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">Poet's Life · 诗人生活</div>
          <h1 className="bp-title">Lonely City X 孤城香氛</h1>
          <div className="bp-meta">2024 · 创意总监：SENLAN · 类别：香氛 / 孤独 / 品牌视觉 / Poet's Life</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">Lonely City 孤城</div>
          </div>
          <div className="bp-fact-card">
            <div className="bp-fact-label">Core Product · 核心载体</div>
            <div className="bp-fact-value">Lonely City 香氛</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="Archive 07 品牌主视觉" 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 Context</small>
            <h2 className="bp-section-title">项目背景：一座城的孤独与香</h2>
          </div>
          <p className="bp-paragraph">
            Lonely City（孤城）诞生于现代都市人对"孤独"的重新审视。在一个被社交网络和喧嚣绑架的时代里，孤独不再是一个贬义词——它是一种自我对话的仪式，是与内心和解的时刻。香氛，便是这场仪式的载体。
          </p>
          <p className="bp-paragraph">
            项目不把焦点只放在产品本身，而是去探索萦绕在"独处"周围的氛围——一个悬浮在宁静、内省与记忆之间的刹那。每一缕香气，都是一座只属于自己的孤城。
          </p>
          <p className="bp-paragraph">
            通过一系列诗意视觉、电影感构图与精致的包装执行，品牌把香氛定位为超越"日用品"的存在：一种感官与情绪的体验。整个视觉宇宙融合了深沉的东方色调、孤独的紧张感与极简的奢华符码，构建出超越时间的高级身份。
          </p>
          <p className="bp-paragraph-en">
            Lonely City was born from a modern reexamination of solitude. In an era hijacked by social media and noise, loneliness is no longer a pejorative — it is a ritual of self-dialogue, a moment of reconciliation with one's inner self. Fragrance becomes the vessel of this ritual. Rather than focusing solely on the product itself, the project explores the atmosphere surrounding solitude — a suspended instant between stillness, introspection and memory. Every wisp of scent is a city of one's own.
          </p>
        </section>

        <figure className="bp-figure reveal">
          <img src={IMG.product} alt="产品外观" className="bp-img" />
          <figcaption className="bp-figcaption">PRODUCT · 产品外观</figcaption>
        </figure>

        {/* 5. 章节2：设计工作 */}
        <section className="bp-section reveal">
          <div className="bp-section-head">
            <small className="bp-section-kicker">The Design Work</small>
            <h2 className="bp-section-title">设计工作：克制中的诗意</h2>
          </div>
          <p className="bp-paragraph">
            视觉识别建立在"克制"与"诗意"的微妙平衡之上：深黑色调、哑光质感点缀与烫金细节相互交织。
          </p>
          <p className="bp-paragraph">
            设计系统以"少即是多"为路径：干净的字体排印、含蓄的Logo压凸、带触感的材质与严格克制的构图，共同加固品牌的高端定位。
          </p>
          <p className="bp-paragraph">
            瓶身设计把用户体验延伸到功能之外——香水瓶本身被设计成适合陈列和收藏的艺术品，即使空瓶也值得被保留。
          </p>
          <p className="bp-paragraph">
            项目还延展出一套电影式广告方向，灵感来自东方诗意电影与极简主义视觉，用叙事性视觉为品牌搭建完整的情感故事。
          </p>
          <p className="bp-paragraph-en">
            The visual identity is built around a delicate balance between restraint and poetry, combining deep black tones, matte textures and gold foil details. The design system follows the path of 'less is more': clean typography, subtle logo embossing, tactile materials and strictly restrained compositions collectively reinforce the brand's premium positioning. The bottle design extends the user experience beyond function — the fragrance bottle itself is designed as an objet d'art worthy of display and collection, even when empty.
          </p>
        </section>

        <figure className="bp-figure reveal">
          <img src={IMG.detail} alt="细节特写" className="bp-img" />
          <figcaption className="bp-figcaption">DETAIL · 细节特写</figcaption>
        </figure>

        <figure className="bp-figure reveal">
          <img src="assets/images/byte_5f04715ccd234a5c91e56394747e5baf.png" 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 Mission</small>
            <h2 className="bp-section-title">设计任务</h2>
          </div>
          <p className="bp-paragraph">
            创建一个能凭"情绪、氛围与诗意叙事"脱颖而出的香氛品牌识别；发展一套连贯的产品与视觉系统，融合东方美学、精致字体与沉浸式视觉指导；构建一个让香氛成为更大叙事体验一部分（而非单纯商品）的品牌宇宙。
          </p>
        </section>

        <section className="bp-section reveal">
          <div className="bp-section-head">
            <small className="bp-section-kicker">The Approach</small>
            <h2 className="bp-section-title">创作路径</h2>
          </div>
          <p className="bp-paragraph">
            创意方向由"对比"驱动：喧嚣 ↔ 宁静、人群 ↔ 独处、城市 ↔ 孤城。
          </p>
          <p className="bp-paragraph">
            项目刻意绕开传统香氛的营销套路，转而采用电影海报、慢叙事与诗意编辑摄影的视觉语言。每一张构图都旨在唤起一种感受，而非单纯展示产品——让香氛与广告画面作为统一的品牌体验协同工作，把香氛转化为一个与记忆、孤独和氛围相连的符号性物件。
          </p>
          <p className="bp-paragraph-en">
            The creative direction is driven by contrast: noise vs stillness, crowd vs solitude, city vs lonely city. The project deliberately avoids conventional fragrance marketing tropes, instead adopting the visual language of cinema posters, slow narrative and poetic editorial photography. Each composition is designed to evoke a feeling rather than simply showcase the product — allowing fragrance and advertising imagery to work in unison as a unified brand experience, transforming fragrance into a symbolic object connected to memory, solitude and atmosphere.
          </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 reveal">
          <img src={IMG.collection} alt="产品系列" className="bp-img" />
          <figcaption className="bp-figcaption">COLLECTION · 产品系列</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">
            氛围视觉注重光影的营造：柔和的侧光、瓶身的反光、烟雾的缭绕，共同构建起一个令人向往的独处场景。消费者买的不是一瓶香氛，而是那个想象中的自己——在黄昏的孤城⾥，从容地点燃一缕香气，与自己对话。
          </p>
          <p className="bp-paragraph-en">
            The visual system extends from fragrance to every touchpoint of the brand — product posters, social media, e-commerce detail pages, offline displays. Unified deep tones, gold foil details and minimalist compositions ensure the brand maintains the same restrained elegance at every touchpoint. The atmospheric visuals focus on the creation of light and shadow: soft side lighting, reflections on the bottle, curling wisps of smoke, collectively constructing a desirable scene of solitude. What consumers buy is not a bottle of fragrance, but the imagined self — in a lonely city at dusk, calmly lighting a wisp of scent, conversing with oneself.
          </p>
        </section>

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

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

        <figure className="bp-figure reveal">
          <img src={IMG.mood} alt="氛围视觉" className="bp-img" />
          <figcaption className="bp-figcaption">MOOD · 氛围视觉</figcaption>
        </figure>

        <figure className="bp-figure reveal">
          <img src={IMG.logo} alt="品牌标识" className="bp-img" />
          <figcaption className="bp-figcaption">LOGO · 品牌标识</figcaption>
        </figure>

        <figure className="bp-figure reveal">
          <img src={IMG.poster} alt="海报主视觉" className="bp-img" />
          <figcaption className="bp-figcaption">POSTER · 海报主视觉</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, { Archive07Detail });