/* global React */
/* COMPLEX BRIEFS, CLEAR COPY — grey-green content sample wall.
   A muted, archival "old portfolio screenshot wall": 8 screenshot
   sample cards in a lightly-staggered grid, hover lifts + 'View Sample',
   click opens a simple lightbox. No second-level case pages. */
const { useState: useSWState } = React;

const CBCC_SAMPLES = [
{ no: "01", en: "Festival Marketing", zh: "节日相关营销 · 520", cat: "FESTIVAL",
  note: "节日节点整合传播：视频 / 方案 / H5 / SVG / 公众号推文。",
  img: "assets/cbcc/01-festival.png" },
{ no: "02", en: "Classic Reimagining", zh: "四大名著翻版", cat: "PENSION",
  note: "用经典文学改编养老产品表达，降低金融养老话题的距离感。",
  img: "assets/cbcc/02-classic.png" },
{ no: "03", en: "Generation Z", zh: "Z 世代养老内容", cat: "PENSION",
  note: "用 QQ 怀旧与千禧元素，将养老产品转译为年轻人更容易理解的内容。",
  img: "assets/cbcc/03-genz.png" },
{ no: "04", en: "Middle-aged Demographic", zh: "中老年人群洞察", cat: "PENSION",
  note: "围绕中老年需求与生活场景，设计更贴近用户心理的养老内容表达。",
  img: "assets/cbcc/04-midage.png" },
{ no: "05", en: "Brand Story", zh: "招商基金 20 周年品牌故事", cat: "BRAND",
  note: "从长期、价值、责任三个维度讲述品牌故事，强化品牌使命感。",
  img: "assets/cbcc/05-brand20.png" },
{ no: "06", en: "Product Posters", zh: "产品特征海报", cat: "POSTER",
  note: "根据产品特点设计多样化海报，将功能型卖点转化为视觉表达。",
  img: "assets/cbcc/06-posters.png" },
{ no: "07", en: "Trend Analysis Video", zh: "摩根 MSCI 趋势解析视频", cat: "VIDEO",
  note: "从生活中的两难选择切入，用纪录片式视频串联趋势逻辑。",
  img: "assets/cbcc/07-msci.png" },
{ no: "08", en: "Institutional Brief", zh: "大阪世博会上海馆展陈策划", cat: "INSTITUTIONAL",
  note: "将机构型展陈 brief 转化为视觉叙事、空间概念与观展体验。",
  img: "assets/cbcc/08-expo.png" }];

const CBCC_TOPTAGS = ["Festival Marketing", "Pension Content", "Poster Concept", "Video Storytelling", "Institutional Brief"];
const CBCC_PROVETAGS = ["Complex Brief Translation", "Financial Content", "Functional Copy", "Video Concept", "Poster System", "Institutional Storytelling"];

function SampleWall() {
  const [lb, setLb] = useSWState(null);

  return (
    <div className="cbcc">
      {/* archival top strip */}
      <div className="cbcc-arctop">
        <span className="cbcc-seal">N</span>
        <span className="cbcc-tid">NINI · CREATIVE OS</span>
        <span>FILE 05 / CONTENT SAMPLES</span>
        <span className="cbcc-sp" />
        <span>SAMPLE WALL · 内容样本墙</span>
      </div>

      {/* masthead */}
      <header className="cbcc-mast">
        <div className="cbcc-mast-l">
          <div className="cbcc-kick">05 — Functional Client Work</div>
          <h1 className="cbcc-h1">Complex Briefs,<br />Clear Copy</h1>
          <div className="cbcc-cn">文案/策划能力一览</div>
          <div className="cbcc-sub">金融 / 功能型 / 机构型客户内容样本</div>
        </div>
        <div className="cbcc-mast-r">
          <p className="cbcc-intro">这些样本来自金融、养老、机构型客户与功能型 brief。它们不作为单个完整案例展开，而是展示我如何将复杂信息转译为节日传播、视觉海报、视频脚本、内容方案与展陈策划。</p>
          <div className="cbcc-toptags">{CBCC_TOPTAGS.map((t) => <span key={t}>{t}</span>)}</div>
        </div>
      </header>

      {/* sample wall */}
      <div className="cbcc-wall">
        {CBCC_SAMPLES.map((s, i) =>
        <button className={"cbcc-card r" + i % 4} key={s.no}
        onClick={() => {try {window.playSelect && window.playSelect();} catch (e) {}setLb(s);}}>
            <div className="cbcc-shot">
              <img src={s.img} alt={s.en} loading="lazy" />
              <span className="cbcc-cat">{s.cat}</span>
              <span className="cbcc-view">View Sample ↗</span>
            </div>
            <div className="cbcc-meta">
              <span className="cbcc-no">{s.no}</span>
              <div className="cbcc-tt">
                <div className="cbcc-en">{s.en}</div>
                <div className="cbcc-zh">{s.zh}</div>
              </div>
            </div>
            <p className="cbcc-note">{s.note}</p>
          </button>
        )}
      </div>

      {/* bottom summary */}
      <section className="cbcc-proves">
        <p className="cbcc-prove-line">复杂信息不一定要讲复杂，<br className="cbcc-br" />关键是找到用户能理解的表达形式。</p>
        <div className="cbcc-prove-tags">{CBCC_PROVETAGS.map((t) => <span key={t}>{t}</span>)}</div>
        <div className="cbcc-foot">
          <span className="cbcc-foot-seal">CB<br />05</span>
          <span>End of file · 复杂 Brief 的清晰表达 · 2021–2024</span>
        </div>
      </section>

      {/* lightbox */}
      {lb &&
      <div className="cbcc-lb" onClick={() => setLb(null)}>
        <div className="cbcc-lb-in" onClick={(e) => e.stopPropagation()}>
          <div className="cbcc-lb-bar">
            <span className="cbcc-lb-no">{lb.no} · {lb.cat}</span>
            <span className="cbcc-lb-t">{lb.en} · {lb.zh}</span>
            <button className="cbcc-lb-x" onClick={() => setLb(null)}>CLOSE ✕</button>
          </div>
          <div className="cbcc-lb-img"><img src={lb.img} alt={lb.en} /></div>
          <p className="cbcc-lb-note">{lb.note}</p>
        </div>
      </div>
      }
    </div>);

}

Object.assign(window, { SampleWall });