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

  React.useEffect(() => {
    const els = document.querySelectorAll('.gm-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_d9e06282d71c44bb9985692a6c95e990.png',
    concept: 'assets/images/aka_sAXcRM1VfE.jpg',
    color: 'assets/images/aka_WM977ngeud.jpg',
    illustration: 'assets/images/aka_DErU9JdXAU.jpg',
    packaging: 'assets/images/aka_cHX3EnpG73.jpg',
    scene: 'assets/images/aka_9fV7nTkNVg.jpg',
  };

  const facts = [
    { label: '客户', value: '广东华美集团' },
    { label: '项目类型', value: '中秋佳节全球礼品包装设计' },
    { label: '核心元素', value: '金色太阳 × 橘子 × 石榴 × 喜庆橘色' },
    { label: '视觉基调', value: '暖橘 × 金黄 × 深红 × 米白' },
  ];

  const highlights = [
    '金色太阳核心符号：用一轮温暖的太阳，把「节日的温暖与希望」这个抽象概念视觉化',
    '橘子石榴祝福体系：橘子谐音「吉」象征吉祥，石榴多籽象征多子多福，构成完整的节日祝福',
    '四色喜庆色板：暖橘 × 金黄 × 深红 × 米白，构建喜庆而不艳俗的节日情感色彩系统',
    '全链路太阳叙事：从礼盒到手提袋到贺卡到社交媒体，每一个触点都保持同一种温暖喜庆的气质',
  ];

  return (
    <div className="gm-detail work-detail">
      <div className="gm-container">
        <a href="#" className="gm-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="gm-header reveal">
          <div className="gm-kicker">FESTIVE GIFT · 佳节好礼系列</div>
          <h1 className="gm-title">广东华美 X SENLAN</h1>
          <div className="gm-meta">2024 · 创意总监：SENLAN · 类别：节日礼品 / 包装设计 / 品牌视觉 / 太阳与果实</div>
          <div className="gm-rule"></div>
        </header>

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

        {/* 3. 首屏主视觉 */}
        <figure className="gm-figure reveal">
          <img src={IMG.hero} alt="广东华美 品牌主视觉" className="gm-img" />
          <figcaption className="gm-figcaption">HERO · 品牌主视觉</figcaption>
        </figure>

        {/* 4. 章节1：项目背景 */}
        <section className="gm-section reveal">
          <div className="gm-section-head">
            <small className="gm-section-kicker">01 — The Context</small>
            <h2 className="gm-section-title">项目背景：把太阳的温暖装进礼盒</h2>
          </div>
          <p className="gm-paragraph">
            广东华美是一家深耕节日礼品市场的企业，每年中秋、春节等传统节日，都会推出系列礼品礼盒。但市场上的节日礼品包装往往陷入两种套路：要么是过度奢华的烫金礼盒，要么是千篇一律的月饼盒。广东华美想做的，是让节日礼品回归「团圆温暖」的本质——不是炫耀，而是分享。SENLAN 受邀为广东华美打造全新的节日礼品包装系统，以「太阳与大地」为核心视觉符号，用金色太阳、橘子与石榴的插画，把「橘色喜庆欢喜的团圆」这个概念视觉化。每一个礼盒，都是一份来自太阳的节日心情。
          </p>
          <p className="gm-paragraph-en">
            Guangdong Huamei is a company deeply rooted in the festive gift market, launching gift box collections every Mid-Autumn Festival, Spring Festival, and other traditional holidays. Yet festive packaging in the market tends to fall into two traps: over-luxurious gilded boxes, or cookie-cutter mooncake tins. Huamei wanted to bring festive gifts back to their essence — the warmth of reunion, shared rather than displayed. SENLAN was invited to create a brand-new festive gift packaging system anchored around a sun-and-earth visual symbol: golden sun, mandarin orange, and pomegranate illustrations render the abstract idea of orange-hued joyful reunion visible. Every gift box carries a piece of festival mood straight from the sun.
          </p>
        </section>

        <figure className="gm-figure reveal">
          <img src={IMG.concept} alt="广东华美 概念视觉" className="gm-img" />
          <figcaption className="gm-figcaption">CONCEPT · 概念视觉</figcaption>
        </figure>

        {/* 5. 章节2：设计理念 */}
        <section className="gm-section reveal">
          <div className="gm-section-head">
            <small className="gm-section-kicker">02 — The Design Concept</small>
            <h2 className="gm-section-title">设计理念：太阳、橘子与石榴的喜庆叙事</h2>
          </div>
          <p className="gm-paragraph">
            设计的核心符号是「金色太阳」——一轮温暖的太阳，光芒四射，象征着节日的温暖与希望。太阳之下，是橘子与石榴的插画：橘子谐音「吉」，象征吉祥如意、大吉大利；石榴多籽，象征多子多福、家族兴旺。三种元素组合在一起，构成了一个完整的节日祝福体系：太阳带来温暖，橘子带来吉祥，石榴带来兴旺。色彩系统以暖橘为主调，金黄为点缀，深红为情感色，米白为底色——四种颜色构成了一个喜庆而不艳俗的节日色板。每一个礼盒的开合，都像揭开一轮新的太阳，带来满满的节日祝福。
          </p>
          <p className="gm-paragraph-en">
            The core symbol of the design is the golden sun — a warm, radiant orb that stands for the warmth and hope of the festival. Beneath the sun are illustrations of mandarin oranges and pomegranates: the orange is a homophone for "auspiciousness" in Chinese, symbolizing good fortune and great luck; the pomegranate, with its many seeds, symbolizes abundance and a flourishing family. Together, these three elements form a complete system of festive blessing: the sun brings warmth, the orange brings luck, the pomegranate brings prosperity. The color system is anchored in warm orange as the primary tone, golden yellow as accent, deep red as the emotional color, and off-white as the ground — four shades forming a festive yet never garish palette. Opening each gift box feels like unveiling a new sun, brimming with holiday wishes.
          </p>
        </section>

        <figure className="gm-figure reveal">
          <img src={IMG.color} alt="广东华美 色彩系统" className="gm-img" />
          <figcaption className="gm-figcaption">COLOR · 色彩系统</figcaption>
        </figure>

        <figure className="gm-figure reveal">
          <img src={IMG.illustration} alt="广东华美 太阳与果实插画" className="gm-img" />
          <figcaption className="gm-figcaption">ILLUSTRATION · 太阳与果实插画</figcaption>
        </figure>

        {/* 6. 章节3：包装系统与传播 */}
        <section className="gm-section reveal">
          <div className="gm-section-head">
            <small className="gm-section-kicker">03 — Packaging System</small>
            <h2 className="gm-section-title">包装系统：从礼盒到社交媒体的太阳叙事</h2>
          </div>
          <p className="gm-paragraph">
            包装系统覆盖了从外盒到内盒、从手提袋到贺卡的全链路产品。外盒采用抽屉式结构，拉开的瞬间，金色太阳从盒中「升起」，带来小小的惊喜感。内盒采用分格设计，每一格都印有不同的太阳与水果图案，让拆盒的过程像在收集一套节日祝福。传播视觉从包装延伸到社交媒体、电商详情页、线下陈列，确保品牌在每一个触点都保持同一种「温暖喜庆」的气质。海报画面中，金色太阳升起在橘子与石榴之间，把节日的祝福送到每一户人家的门口——把温暖与吉祥，送到每一个人手中。
          </p>
          <p className="gm-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 the golden sun "rises" from the package, creating a small moment of delight. The inner box is divided into compartments, each printed with a different sun-and-fruit motif, so unboxing feels like collecting a set of festive blessings. The communication visuals extend from packaging to social media, e-commerce detail pages, and in-store displays, maintaining the same warm and festive temperament at every touchpoint. In the posters, a golden sun rises between mandarin oranges and pomegranates, delivering holiday wishes to every doorstep — bringing warmth and good fortune to everyone.
          </p>
        </section>

        <figure className="gm-figure reveal">
          <img src={IMG.packaging} alt="广东华美 包装系统" className="gm-img" />
          <figcaption className="gm-figcaption">PACKAGING · 包装系统</figcaption>
        </figure>

        <figure className="gm-figure reveal">
          <img src={IMG.scene} alt="广东华美 场景视觉" className="gm-img" />
          <figcaption className="gm-figcaption">SCENE · 场景视觉</figcaption>
        </figure>

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

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