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

  React.useEffect(() => {
    const els = document.querySelectorAll('.oh-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_pvSl2KXq1J.jpg',
    product: 'assets/images/aka_UZUVVt24aR.jpg',
    bottle: 'assets/images/aka_6UcVYdAAT0.jpg',
    cap: 'assets/images/aka_VgYz9fRDVw.jpg',
    scene: 'assets/images/aka_DFD2PxPrEr.jpg',
    outerBox: 'assets/images/aka_zrXu2q3B0Z.jpg',
    drawer: 'assets/images/aka_01UkaOx1GX.jpg',
    packagingDetail: 'assets/images/aka_xb0LA8oOxE.jpg',
    series: 'assets/images/aka_IGk1HiDNXI.jpg',
    campaign: 'assets/images/aka_mVD97Du0JO.jpg',
  };

  const facts = [
    { label: '设计方', value: 'SENLAN Studio' },
    { label: '香调', value: '海洋木质调 · 海盐与琥珀' },
    { label: '概念载体', value: '心形瓶身 · 深海精灵 · 被封存的海浪' },
    { label: '视觉基调', value: '深海蓝 × 珍珠白 × 精灵金 × 玫瑰粉' },
  ];

  const highlights = [
    '把「易逝的情绪」冻进结构：海浪将流未流的一刻被玻璃封存——心形瓶身让每一次喷洒都成为一次心跳',
    '让结构当「收藏匣」而非舞台：概念主角越流动，周围的包装越要像珠宝盒一样郑重，情绪价值来自这种反差',
    '材料矛盾制造张力：温热的心脏 × 冰冷的深海，让香水成为陈列柜而非容器',
    '开箱前就开口说话：凹槽面板、抽屉开合、盒盖内侧的 fairy 剪影，在用户碰产品之前就完成「值得被留下」的暗示',
  ];

  return (
    <div className="oh-detail work-detail">
      <div className="oh-container">
        <a href="#" className="oh-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="oh-header reveal">
          <div className="oh-kicker">MODERN GODDESS · 摩登女神系列</div>
          <h1 className="oh-title">海洋之心 X fairy</h1>
          <div className="oh-meta">2024 · 创意总监：SENLAN · 类别：香氛 / 海洋美学 / 品牌视觉 / 精灵叙事</div>
          <div className="oh-rule"></div>
        </header>

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

        {/* 3. 首屏主视觉 */}
        <figure className="oh-figure reveal">
          <img src={IMG.hero} alt="海洋之心 X fairy 品牌主视觉" className="oh-img" />
          <figcaption className="oh-figcaption">HERO · 品牌主视觉</figcaption>
        </figure>

        {/* 4. 章节1：品牌概念 */}
        <section className="oh-section reveal">
          <div className="oh-section-head">
            <small className="oh-section-kicker">01 — The Concept</small>
            <h2 className="oh-section-title">品牌概念：允许情绪沉入深海的那一刻</h2>
          </div>
          <p className="oh-paragraph">
            海洋之心 X fairy 代表的是我们每个人内心深处那片从未被触碰的海——那些被压抑的渴望、那些不敢言说的温柔、那些在深夜里独自翻涌的情绪。fairy 不是童话里的小精灵，而是我们内心那个永远不愿长大的自己——她住在深海，收集每一滴被遗忘的眼泪，把它们酿成一瓶可以随身携带的海洋。心形瓶身不是为了好看，它被设计成一颗正在跳动的心脏，每一次喷洒，都是一次心跳。
          </p>
          <p className="oh-paragraph-en">
            Ocean Heart × fairy stands for that untouched sea within each of us — the suppressed longings, the unspeakable tenderness, the emotions that swell alone in the dark of night. This fairy is not a creature from a children's tale; she is the part of ourselves that refuses to grow up. She lives in the deep ocean, collecting every forgotten tear and distilling them into a portable sea. The heart-shaped bottle is not decorative. It is designed as a beating heart — every spray, a heartbeat.
          </p>
        </section>

        <figure className="oh-figure reveal">
          <img src={IMG.product} alt="海洋之心 X fairy 产品视觉" className="oh-img" />
          <figcaption className="oh-figcaption">PRODUCT · 产品视觉</figcaption>
        </figure>

        {/* 5. 章节2：材料矛盾 */}
        <section className="oh-section reveal">
          <div className="oh-section-head">
            <small className="oh-section-kicker">02 — Material Contradiction</small>
            <h2 className="oh-section-title">策展人点评：物件核心的材料矛盾</h2>
          </div>
          <p className="oh-paragraph">
            真正抓住注意力的，是这个物件核心的材料矛盾。海水是自然界最流动、最无形的东西之一，却被永久浇铸进玻璃——冻结在静止中，永远无法完成它生来该做的那个动作：流动。心形的瓶身与深海的蓝，构成了另一重矛盾：心脏是温热的、跳动的、属于陆地的，而深海是冰冷的、静止的、属于未知的。正是「温热的心脏」与「冰冷的深海」之间的张力，让这瓶香水不再是香水，而更接近一个陈列柜——把一瞬即逝的情绪，升格为值得被郑重封存的物件。
          </p>
          <p className="oh-paragraph-en">
            What truly holds the gaze is the material contradiction at the object's core. Seawater, among nature's most fluid and formless substances, is permanently cast into glass — frozen in stillness, forever unable to fulfill the very gesture it was born to make: to flow. The heart-shaped bottle and deep-ocean blue form another layer of contradiction: the heart is warm, beating, terrestrial; the deep sea is cold, still, unknown. It is precisely this tension between the warm heart and the cold deep that transforms this bottle from a perfume into something closer to a display case — elevating a fleeting emotion into an object worthy of being solemnly preserved.
          </p>
        </section>

        <figure className="oh-figure reveal">
          <img src={IMG.bottle} alt="海洋之心 X fairy 瓶身与瓶盖" className="oh-img" />
          <figcaption className="oh-figcaption">DETAIL · 瓶身与瓶盖</figcaption>
        </figure>

        <figure className="oh-figure reveal">
          <img src={IMG.cap} alt="海洋之心 X fairy 封存海浪的瓶盖" className="oh-img" />
          <figcaption className="oh-figcaption">THE CAP · 封存海浪的瓶盖</figcaption>
        </figure>

        {/* 6. 章节3：外包装 */}
        <section className="oh-section reveal">
          <div className="oh-section-head">
            <small className="oh-section-kicker">03 — The Outer Packaging</small>
            <h2 className="oh-section-title">外包装：珠宝盒的逻辑</h2>
          </div>
          <p className="oh-paragraph">
            外包装延续同一套逻辑：深海蓝的盒身从瓶身饱和的珍珠白色退后一步；凹槽面板与抽屉式开合结构，借的是珠宝盒而非香水套装的词汇。盒盖内侧印有一只小小的 fairy 剪影，在用户打开的那一刻，像深海里突然亮起的一点光。这套材质语言的转换，在用户打开之前就已经说了一句话：这是要被留下的东西，不是用完即弃的东西。每一个抽屉的开合，都像一次深海的潮汐——缓慢、温柔、充满仪式感。
          </p>
          <p className="oh-paragraph-en">
            The outer packaging continues the same logic: the deep-ocean blue case steps back from the saturated pearl white of the bottle; the recessed panels and drawer-style opening borrow the vocabulary of a jewelry box, not a perfume set. Inside the lid, a tiny silhouette of a fairy is printed — the moment the user opens it, it is like a point of light suddenly igniting in the deep sea. This shift in material language speaks before the user even touches the product: this is something to keep, not something to use up and discard. Every drawer opening and closing is like a deep-sea tide — slow, gentle, and full of ritual.
          </p>
        </section>

        <figure className="oh-figure reveal">
          <img src={IMG.scene} alt="海洋之心 X fairy 场景视觉" className="oh-img" />
          <figcaption className="oh-figcaption">SCENE · 场景视觉</figcaption>
        </figure>

        <figure className="oh-figure reveal">
          <img src={IMG.outerBox} alt="海洋之心 X fairy 深海蓝外盒" className="oh-img" />
          <figcaption className="oh-figcaption">CASING · 深海蓝外盒</figcaption>
        </figure>

        <figure className="oh-figure reveal">
          <img src={IMG.drawer} alt="海洋之心 X fairy 抽屉式开合" className="oh-img" />
          <figcaption className="oh-figcaption">DRAWER · 抽屉式开合</figcaption>
        </figure>

        <figure className="oh-figure reveal">
          <img src={IMG.packagingDetail} alt="海洋之心 X fairy 凹槽面板细节" className="oh-img" />
          <figcaption className="oh-figcaption">DETAIL · 凹槽面板细节</figcaption>
        </figure>

        {/* 7. 章节4：给从业者的启示 */}
        <section className="oh-section reveal">
          <div className="oh-section-head">
            <small className="oh-section-kicker">04 — Lesson</small>
            <h2 className="oh-section-title">给从业者的启示</h2>
          </div>
          <p className="oh-paragraph">
            当单一自然元素承担了全部概念重量时，围绕它的结构应该成为这个物件的「收藏匣」，而不只是一个展示它的舞台。海洋之心 X fairy 用一颗心形瓶身，承载了整个深海的情绪；用一只小小的 fairy，连接了童话与现实。设计的最高境界，不是把所有元素都堆上去，而是用最少的符号，唤起最深的共鸣。
          </p>
          <p className="oh-paragraph-en">
            When a single natural element bears the full weight of the concept, the structure surrounding it should become the object's "jewel case," not merely a stage to display it. Ocean Heart × fairy holds the entire emotion of the deep sea within a single heart-shaped bottle; a tiny fairy bridges fairy tale and reality. The highest state of design is not to pile on every element, but to evoke the deepest resonance with the fewest symbols.
          </p>
        </section>

        <figure className="oh-figure reveal">
          <img src={IMG.series} alt="海洋之心 X fairy 系列视觉" className="oh-img" />
          <figcaption className="oh-figcaption">SERIES · 系列视觉</figcaption>
        </figure>

        <figure className="oh-figure reveal">
          <img src={IMG.campaign} alt="海洋之心 X fairy 传播视觉" className="oh-img" />
          <figcaption className="oh-figcaption">CAMPAIGN · 传播视觉</figcaption>
        </figure>

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

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