function MeridianJournalDetail({ 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/images/byte_5b57ad5f29724b68935257918ec388e5.png';

  const IMG = {
    hero:     'assets/images/aka_LutrGEhf5H.jpg',
    product:  'assets/images/aka_v0MaCcLa7P.jpg',
    detail:   'assets/images/aka_L5PpVlmQ3V.jpg',
    type:     'assets/images/aka_4IiSfKUhY4.jpg',
    interior: 'assets/images/aka_BcYGPWSeMr.jpg',
    series:   'assets/images/aka_WAkxPkXqhn.jpg',
    app:      'assets/images/aka_i7fAVhCqog.jpg',
    mood:     'assets/images/aka_xaEwBbUWhL.jpg',
    series2:  'assets/images/aka_5OSdEA6qMq.jpg',
  };

  return (
    <div className="bp-detail work-detail">
      <div className="container">
        <a href="#" className="work-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 className="bp-header reveal">
          <div className="bp-kicker">TREND TECH · 潮电新品系列</div>
          <h1 className="bp-title">EDX - 联名款</h1>
          <p className="bp-subtitle">电子手表戒指-EDX</p>
          <div className="bp-meta">
            2024
            <span className="bp-dot">·</span>
            创意总监：SENLAN
            <span className="bp-dot">·</span>
            类别：电子手表戒指 / 联名设计 / 潮电新品 / 复古电子
          </div>
          <hr className="bp-rule" />
        </div>

        {/* facts 四宫格 */}
        <div className="bp-facts reveal">
          <div className="bp-fact-card">
            <div className="bp-fact-label">品牌 · Brand</div>
            <div className="bp-fact-value">EDX · 联名款</div>
          </div>
          <div className="bp-fact-card">
            <div className="bp-fact-label">核心载体 · Carrier</div>
            <div className="bp-fact-value">电子手表戒指（Electronic Watch Ring）</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>

        {/* 首屏主视觉 */}
        <figure className="bp-figure reveal">
          <img src={IMG.hero} alt="EDX 联名款品牌主视觉" className="bp-img" />
          <figcaption className="bp-figcaption">HERO · 品牌主视觉</figcaption>
        </figure>

        {/* 章节1：项目背景 */}
        <section className="bp-section reveal">
          <div className="bp-section-header">
            <span className="bp-section-en">The Context</span>
            <h2 className="bp-section-title">项目背景：复古与未来的交叉口</h2>
          </div>
          <p className="bp-paragraph">
            EDX 联名款诞生于复古电子美学与未来科技觉醒的交叉口。项目的核心，是打造一套兼具复古情怀与未来感的电子手表戒指设计语言。在一个被参数和性能绑架的数码行业里，EDX 选择回归"人"本身——产品不只是功能的载体，更是佩戴者个性与态度的表达。从触感材质的选择到定制的视觉叙事，每个细节都为传达纯粹、克制与安静的科技奢华服务。EDX 不是简单的电子产品，而是一场关于科技如何优雅地融入时尚与生活的思考。
          </p>
          <p className="bp-paragraph-en">
            EDX collaboration was born at the intersection of retro electronic aesthetics and future tech awakening. At its core, the project crafts an electronic watch ring design language that carries both vintage nostalgia and futuristic sensibility. In an industry hijacked by specs and performance, EDX chooses to return to "the human" — the product is not merely a vessel of function, but an expression of the wearer's identity and attitude. From tactile material selection to curated visual narrative, every detail serves a quiet, restrained tech luxury.
          </p>
        </section>

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

        {/* 章节2：设计工作 */}
        <section className="bp-section reveal">
          <div className="bp-section-header">
            <span className="bp-section-en">The Design Work</span>
            <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 retro and precision — matte metallic tones, dark glass accents and precision electronic component details interweave with one another. 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 ring design extends the user experience beyond function — the electronic watch ring itself is designed as an objet d'art worthy of daily wear and collection, even when functions are off.
          </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={IMG.type} alt="品牌字体" className="bp-img" />
          <figcaption className="bp-figcaption">TYPOGRAPHY · 品牌字体</figcaption>
        </figure>

        {/* 章节3：设计任务 */}
        <section className="bp-section reveal">
          <div className="bp-section-header">
            <span className="bp-section-en">The Mission</span>
            <h2 className="bp-section-title">设计任务</h2>
          </div>
          <p className="bp-paragraph">
            创建一个能凭"情绪、氛围与复古美学"脱颖而出的电子手表戒指品牌识别；发展一套连贯的产品与视觉系统，融合科技美学、精致字体与沉浸式视觉指导；构建一个让产品成为更大叙事体验一部分（而非单纯商品）的品牌宇宙。
          </p>
        </section>

        {/* 章节4：创作路径 */}
        <section className="bp-section reveal">
          <div className="bp-section-header">
            <span className="bp-section-en">The Approach</span>
            <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: retro vs future, function vs fashion, cold vs warmth. The project deliberately avoids conventional electronics marketing tropes, instead adopting the visual language of cinema posters, slow narrative and retro editorial photography. Each composition is designed to evoke a feeling rather than simply showcase specs — allowing product and advertising imagery to work in unison as a unified brand experience, transforming the electronic watch ring into a symbolic object connected to life, fashion 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.series} alt="产品系列" className="bp-img" />
          <figcaption className="bp-figcaption">COLLECTION · 产品系列</figcaption>
        </figure>

        {/* 章节5：视觉应用 */}
        <section className="bp-section reveal">
          <div className="bp-section-header">
            <span className="bp-section-en">Application</span>
            <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 product to every touchpoint of the brand — product posters, social media, e-commerce detail pages, offline displays. Unified metallic tones, precision 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, metallic reflections, glass refraction, collectively constructing a desirable retro-tech scene.
          </p>
        </section>

        <figure className="bp-figure reveal">
          <img src={IMG.app} 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>

        <figure className="bp-figure reveal">
          <img src={IMG.series2} alt="系列视觉" className="bp-img" />
          <figcaption className="bp-figcaption">SERIES · 系列视觉</figcaption>
        </figure>

        {/* Design Highlights */}
        <div className="bp-takeaway reveal">
          <h2 className="bp-takeaway-title">设计亮点</h2>
          <ul className="bp-takeaway-list">
            <li>卖"态度"而非卖参数：把产品锚定在一个具体生活场景上（复古、佩戴、时尚），画面先于功能说话</li>
            <li>三色克制定调：金属灰 / 深黑 / 复古金只此三色，所有触点（产品、包装、海报）严格复用</li>
            <li>产品即收藏品：极简设计让手表戒指本身成为陈列品，延长品牌的在场时间</li>
            <li>全链路视觉统一：从产品到海报到社交媒体到线下陈列，统一的复古美学让品牌成为一种生活方式的入口</li>
          </ul>
        </div>

        <div className="work-bottom-nav">
          <a href="#" className="work-bottom-link work-bottom-link-blue" onClick={(e) => { e.preventDefault(); onBack(); }}>
            ← 返回全部作品
          </a>
        </div>
      </div>

      <footer className="footer work-footer" style={{ textAlign: 'center' }}>
        <div className="container" style={{ display: 'block' }}>
          <div style={{ textAlign: 'center' }}>
            <img src={SIGNATURE_URL} alt="Senlan" className="footer-signature" style={{ display: 'inline-block' }} />
          </div>
          <div className="footer-right" style={{ float: 'none', textAlign: 'center', marginTop: '12px' }}>
            <span>本页为作品案例展示 · 设计版权归 SENLAN 所有 · 仅作个人作品集展示用途</span>
          </div>
        </div>
      </footer>
    </div>
  );
}

Object.assign(window, { MeridianJournalDetail });