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

  React.useEffect(() => {
    const els = document.querySelectorAll('.sg-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_jH4qy6qLg8.jpg',
    sketch1: 'assets/images/aka_2gslMYp6Lu.jpg',
    sketch2: 'assets/images/aka_hcrdajl9VI.jpg',
    boxOuter: 'assets/images/aka_HPWa6KnlNO.jpg',
    boxDetail: 'assets/images/aka_HX3VvcvWac.jpg',
    logoApp: 'assets/images/aka_XggqSIBvdL.jpg',
    campaign: 'assets/images/aka_ARxzTwN0RC.jpg',
    poster: 'assets/images/aka_7okLMUiXH4.jpg',
  };

  const facts = [
    { label: '客户', value: '三一重工集团 SANY' },
    { label: '项目类型', value: '中秋佳节全球礼品包装设计' },
    { label: '核心元素', value: '复古卡车 × 挖掘机 × 手绘机械臂 × 工业插画' },
    { label: '视觉基调', value: '工业深蓝 × 复古橙 × 金属灰 × 中秋暖金' },
  ];

  const highlights = [
    '复古机械插画风格：用手绘插画重新诠释三一的机械家族，让工业巨兽变成温暖的节日符号',
    '拟人化机械角色：挖掘机挖月饼、机械臂捧月亮、卡车送祝福，每个机械角色都有表情与动作',
    '四色工业温情色板：工业深蓝 × 复古橙 × 金属灰 × 中秋暖金，工业而不冰冷，复古而不陈旧',
    '全链路机械叙事：从外盒到内盒到手提袋到贺卡到海报，每一个触点都在讲述同一个工业童话',
  ];

  return (
    <div className="sg-detail work-detail">
      <div className="sg-container">
        <a href="#" className="sg-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="sg-header reveal">
          <div className="sg-kicker">FESTIVE GIFT · 佳节好礼系列</div>
          <h1 className="sg-title">三一重工全球礼品 X SENLAN</h1>
          <div className="sg-meta">2024 · 创意总监：SENLAN · 类别：中秋礼品 / 工业品牌 / 包装设计 / 复古机械插画</div>
          <div className="sg-rule"></div>
        </header>

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

        {/* 3. 首屏主视觉 */}
        <figure className="sg-figure reveal">
          <img src={IMG.hero} alt="三一重工全球礼品 品牌主视觉" className="sg-img" />
          <figcaption className="sg-figcaption">HERO · 品牌主视觉</figcaption>
        </figure>

        {/* 4. 章节1：项目背景 */}
        <section className="sg-section reveal">
          <div className="sg-section-head">
            <small className="sg-section-kicker">01 — The Context</small>
            <h2 className="sg-section-title">项目背景：把工业力量装进中秋礼盒</h2>
          </div>
          <p className="sg-paragraph">
            三一重工是中国工程机械的龙头企业，从挖掘机到起重机，从混凝土泵车到矿用卡车，三一的机械巨兽遍布全球每一个建筑工地。2024 年中秋，三一重工邀请全国设计单位参与节日礼品设计投标，SENLAN 受邀参与。努力 × 幸运 = 在百家争鸣中独秀。全球 6.5 万「三一」人，提着海派创意总监 SENLAN 的作品，欢庆佳节。经过一番商讨，创意设计总监 SENLAN 先生结合 SANY 文化，绘制创意手稿，用「复古机械插画」重新诠释三一的工业基因——用手绘的复古卡车、挖掘机与机械臂，把冰冷的工业机械，转化为温暖的节日符号。每一辆复古卡车，都是一辆开往家的方向的送货车；每一台挖掘机，都在挖掘团圆的温暖；每一只机械臂，都在捧起中秋的祝福。这套兼具工业质感与节日温情的全球好礼，很受喜爱，零时断货，后追加产品 3.2 万份。
          </p>
          <p className="sg-paragraph-en">
            SANY is China's leading construction machinery manufacturer — from excavators to cranes, from concrete pumps to mining trucks, SANY's mechanical giants populate construction sites across the globe. For the 2024 Mid-Autumn Festival, SANY invited design studios nationwide to compete in its festive gift program tender, and SENLAN took part. Effort multiplied by luck — the design stood out among a hundred competing studios. Across the globe, 65,000 SANY employees carried SENLAN's creation home for the festival. Working closely with SANY's culture team, Creative Director SENLAN hand-drew concept sketches that re-interpret SANY's industrial DNA through a vintage mechanical illustration lens: hand-drawn retro trucks, excavators, and robotic arms transform cold industrial machinery into warm festive symbols. Every retro truck is a delivery van driving home; every excavator digs for the warmth of reunion; every robotic arm holds up a Mid-Autumn blessing. This global gift set, balancing industrial texture with festive tenderness, was loved instantly, selling out in record time — with a follow-up order of 32,000 additional units.
          </p>
        </section>

        {/* 5. 章节2：设计理念 */}
        <section className="sg-section reveal">
          <div className="sg-section-head">
            <small className="sg-section-kicker">02 — The Design Concept</small>
            <h2 className="sg-section-title">设计理念：复古机械的温暖重构</h2>
          </div>
          <p className="sg-paragraph">
            设计的核心是「复古机械插画」风格。我们没有用三一真实的产品照片，而是用手绘插画的方式，重新诠释三一的机械家族：复古卡车取意上世纪美式货运卡车，圆润的线条与温暖的色彩，让它看起来更像一个玩具，而不是工业巨兽；挖掘机被赋予了拟人化的表情，铲斗里装满的不是泥土，而是中秋的月饼与祝福；机械臂不再是冰冷的钢铁，而是像一只温柔的手，捧起一轮明月。色彩系统以工业深蓝为主调，复古橙为点缀，金属灰为骨架，中秋暖金为情感色——四种颜色构成了一个「工业而不冰冷，复古而不陈旧」的节日色板。每一个插画元素，都经过反复打磨，确保既有三一的工业辨识度，又有中秋的温暖人情味。
          </p>
          <p className="sg-paragraph-en">
            The design is rooted in a vintage mechanical illustration style. Rather than using photographs of SANY's actual products, we re-interpreted SANY's machinery family through hand-drawn illustration: the retro truck draws from mid-century American freight trucks, with rounded lines and warm colors that read more like a toy than an industrial giant; the excavator is given a personified expression, its bucket filled not with earth but with mooncakes and holiday wishes; the robotic arm is no longer cold steel, but a gentle hand holding up the full moon. The color system is anchored in industrial deep blue as the primary tone, vintage orange as accent, metallic gray as structure, and warm Mid-Autumn gold as the emotional color — four shades forming a festive palette that is industrial without being cold, vintage without being dated. Every illustrated element was refined repeatedly to ensure both SANY's industrial recognizability and the human warmth of Mid-Autumn.
          </p>
        </section>

        <figure className="sg-figure reveal">
          <img src={IMG.sketch1} alt="三一重工全球礼品 创意手稿" className="sg-img" />
          <figcaption className="sg-figcaption">CONCEPT · 工业更需要暖色</figcaption>
        </figure>

        <figure className="sg-figure reveal">
          <img src={IMG.sketch2} alt="三一重工全球礼品 设计草图" className="sg-img" />
          <figcaption className="sg-figcaption">SKETCH · 礼盒组合</figcaption>
        </figure>

        {/* 6. 章节3：包装系统 */}
        <section className="sg-section reveal">
          <div className="sg-section-head">
            <small className="sg-section-kicker">03 — The Packaging System</small>
            <h2 className="sg-section-title">包装系统：从外盒到内盒的机械叙事</h2>
          </div>
          <p className="sg-paragraph">
            包装系统覆盖了从外盒到内盒、从手提袋到贺卡的全链路产品。外盒采用抽屉式结构，拉开的瞬间，一辆复古卡车从盒中「驶出」，车斗里装满了中秋的礼物，带来小小的惊喜感。内盒采用分格设计，每一格都印有不同的机械插画：挖掘机在挖月饼，机械臂在捧月亮，卡车在送祝福——让拆盒的过程像在翻阅一本工业童话绘本。手提袋的设计延续了插画风格，正面是一辆满载礼物的复古卡车，侧面是三一的品牌标识，拎在手里就像拎着一份来自工地的节日祝福。贺卡采用折叠式设计，打开后是一幅完整的「三一机械家族共度中秋」插画，每一个机械角色都有自己的表情与动作，充满童趣与温暖。
          </p>
          <p className="sg-paragraph-en">
            The packaging system covers the full product journey: outer box, inner box, tote bag, greeting card. The outer box uses a drawer structure — pull it open, and a retro truck "drives out" of the package, its bed loaded with Mid-Autumn gifts, creating a small moment of delight. The inner box is divided into compartments, each printed with a different mechanical illustration: an excavator digging mooncakes, a robotic arm holding the moon, a truck delivering wishes — unboxing feels like turning the pages of an industrial fairy-tale picture book. The tote bag continues the illustration style, with a gift-laden retro truck on the front and the SANY logo on the side, carrying a construction-site holiday greeting in hand. The fold-out greeting card reveals a complete "SANY machinery family celebrates Mid-Autumn" illustration, each mechanical character with its own expression and gesture — playful, warm, and full of charm.
          </p>
        </section>

        <figure className="sg-figure reveal">
          <img src={IMG.boxOuter} alt="三一重工全球礼品 外盒设计" className="sg-img" />
          <figcaption className="sg-figcaption">PACKAGING · 内盒设计</figcaption>
        </figure>

        <figure className="sg-figure reveal">
          <img src={IMG.boxDetail} alt="三一重工全球礼品 盒面细节" className="sg-img" />
          <figcaption className="sg-figcaption">DETAIL · 祝福卡片</figcaption>
        </figure>

        <figure className="sg-figure reveal">
          <img src={IMG.logoApp} alt="三一重工全球礼品 品牌标识应用" className="sg-img" />
          <figcaption className="sg-figcaption">品牌细节体现在礼品细节</figcaption>
        </figure>

        {/* 7. 章节4：传播视觉 */}
        <section className="sg-section reveal">
          <div className="sg-section-head">
            <small className="sg-section-kicker">04 — Communication</small>
            <h2 className="sg-section-title">传播视觉：从工厂到全球的节日温情</h2>
          </div>
          <p className="sg-paragraph">
            传播视觉打破传统企业礼品的低调套路，用复古机械插画与电影感的构图，讲述一个关于「全球 6.5 万三一人共度中秋」的故事。主视觉海报中，复古卡车行驶在月光下，车斗里的挖掘机与机械臂正在忙碌地装卸中秋礼物，远处是三一的工厂剪影，天空中是一轮温暖的明月。系列海报延伸出不同的场景：挖掘机在工地挖月饼，机械臂在高空捧月亮，卡车在高速公路上送祝福——每一张海报都在讲述同一个故事：三一的机械，不仅能建设世界，也能送达温暖。传播视觉从海报延伸到内部通讯、社交媒体、线下陈列，确保品牌在每一个触点都保持同一种「工业温情」的气质。
          </p>
          <p className="sg-paragraph-en">
            The communication visuals break the understated conventions of corporate gifting. Using vintage mechanical illustration and cinematic composition, they tell the story of 65,000 SANY employees worldwide sharing one Mid-Autumn Festival. In the key visual poster, a retro truck drives beneath the moonlight, its excavator and robotic arm busy loading and unloading Mid-Autumn gifts, with the silhouette of a SANY factory in the distance and a warm harvest moon in the sky. The series extends to different scenes: an excavator digging mooncakes on a construction site, a robotic arm holding the moon at height, a truck delivering wishes on the highway — each poster tells the same story: SANY machinery doesn't just build the world — it delivers warmth. From posters to internal newsletters, social media, and in-store displays, the same industrial warmth is maintained at every touchpoint.
          </p>
        </section>

        <figure className="sg-figure reveal">
          <img src={IMG.campaign} alt="三一重工全球礼品 传播主视觉" className="sg-img" />
          <figcaption className="sg-figcaption">CAMPAIGN · 传播主视觉</figcaption>
        </figure>

        <figure className="sg-figure reveal">
          <img src={IMG.poster} alt="三一重工全球礼品 中秋宣传海报" className="sg-img" />
          <figcaption className="sg-figcaption">POSTER · 中秋宣传海报</figcaption>
        </figure>

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

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