/* sections.jsx — 斜杠码官网各板块组件
   首屏 / APP矩阵 / 合作伙伴 / 组织支撑 / 联系我们：沿用原站较完整的呈现。
   新增 AI 工具矩阵、首屏第二主张；小程序矩阵按文档收敛为 6 大方向。 */

const { useEffect, useRef, useState } = React;

/* === Slash Motif (品牌斜杠图案) === */
function SlashMotif({ size = 80, opacity = 1, style }) {
  return (
    <svg width={size} height={size} viewBox="0 0 80 80" fill="none" style={{ ...style, opacity }}>
      <defs>
        <linearGradient id="sgrad" x1="0" y1="0" x2="1" y2="1">
          <stop offset="0%" stopColor="#16C8F7" />
          <stop offset="50%" stopColor="#1E90FF" />
          <stop offset="100%" stopColor="#1E40FF" />
        </linearGradient>
      </defs>
      <path d="M10 70 L30 10 L40 10 L20 70 Z" fill="#16C8F7" />
      <path d="M30 70 L50 10 L60 10 L40 70 Z" fill="#1E90FF" />
      <path d="M50 70 L70 10 L80 10 L60 70 Z" fill="#1E40FF" />
    </svg>);

}

/* === Hero 背景斜杠装饰 === */
function HeroSlashesBg() {
  return (
    <svg className="hero-slashes" viewBox="0 0 1600 900" preserveAspectRatio="xMaxYMid slice" aria-hidden="true">
      <defs>
        <linearGradient id="bg-grad-1" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stopColor="#16C8F7" stopOpacity="0.12" />
          <stop offset="100%" stopColor="#16C8F7" stopOpacity="0" />
        </linearGradient>
        <linearGradient id="bg-grad-2" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stopColor="#1E90FF" stopOpacity="0.18" />
          <stop offset="100%" stopColor="#1E90FF" stopOpacity="0" />
        </linearGradient>
        <linearGradient id="bg-grad-3" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stopColor="#1E40FF" stopOpacity="0.22" />
          <stop offset="100%" stopColor="#1E40FF" stopOpacity="0" />
        </linearGradient>
      </defs>
      <g transform="translate(950, -100) skewX(-18)">
        <rect x="0" y="0" width="120" height="1200" fill="url(#bg-grad-1)" />
        <rect x="180" y="0" width="120" height="1200" fill="url(#bg-grad-2)" />
        <rect x="360" y="0" width="120" height="1200" fill="url(#bg-grad-3)" />
      </g>
    </svg>);

}

function HeroTitle() {
  const lines = ['你的未来', '不止一份收入'];
  const [typed, setTyped] = useState(['', '']);
  const [active, setActive] = useState(0);
  const [done, setDone] = useState(false);
  const [fadeCaret, setFadeCaret] = useState(false);

  useEffect(() => {
    let cancelled = false;
    let li = 0,ci = 0;
    const step = () => {
      if (cancelled) return;
      if (ci < lines[li].length) {
        ci++;
        setTyped((t) => {const n = [...t];n[li] = lines[li].slice(0, ci);return n;});
        setActive(li);
        setTimeout(step, 115);
      } else if (li < lines.length - 1) {
        li++;ci = 0;
        setActive(li);
        setTimeout(step, 320);
      } else {
        setDone(true);
        setTimeout(() => {if (!cancelled) setFadeCaret(true);}, 900);
      }
    };
    const start = setTimeout(step, 320);
    return () => {cancelled = true;clearTimeout(start);};
  }, []);

  return (
    <h1 className="display hero-title">
      <span className="line">
        <span>{typed[0]}</span>
        {active === 0 && !done && <span className="tw-caret" />}
      </span>
      <span className="line">
        <span>{typed[1]}</span>
        {active === 1 && <span className={`tw-caret ${fadeCaret ? 'tw-caret-fade' : ''}`} />}
      </span>
    </h1>);

}

function HeroFloat() {
  const products = [
  { cls: 'h1', cn: '职刻', tag: 'ZHIKE / FLAGSHIP', img: 'assets/products/zhike.png' },
  { cls: 'h2', cn: '抖推猫', tag: 'KOC MARKETING', img: 'assets/products/doutuimao.png' },
  { cls: 'h3', cn: '创作猫', tag: 'CREATOR TOOLKIT', img: 'assets/products/chuangzuomao.png' },
  { cls: 'h4', cn: '豆包泛知道', tag: 'KNOWLEDGE PLATFORM', img: 'assets/products/doubao.png' }];

  return (
    <div className="hero-float" aria-hidden="true">
      {products.map((p) =>
      <div className={`hero-card-wrap ${p.cls}`} key={p.cls}>
          <div className="hero-card">
            <div className="hero-card-icon"><img src={p.img} alt={p.cn} /></div>
            <div className="hero-card-body">
              <span className="hero-card-name">{p.cn}</span>
              <span className="hero-card-tag">{p.tag}</span>
            </div>
          </div>
        </div>
      )}
    </div>);

}

/* === 板块内子标题 === */
function MatrixSub({ idx, name, meta }) {
  return (
    <div className="matrix-sub">
      <span className="matrix-sub-idx mono">{idx}</span>
      <span className="matrix-sub-name">{name}</span>
      {meta && <span className="matrix-sub-meta mono">{meta}</span>}
      <span className="matrix-sub-line" />
    </div>);

}

/* ============================================================== */
/* HERO — 首屏品牌主张                                             */
/* ============================================================== */
function Hero() {
  return (
    <section className="hero" id="top" data-screen-label="01 Hero">
      <HeroSlashesBg />
      <HeroFloat />
      <div className="wrap hero-inner">
        <div className="hero-tag">
          <span className="eyebrow">BEIJING SLASH CODE TECHNOLOGY · 2019—</span>
        </div>
        <HeroTitle />
        <p className="hero-slogan2 brand-gradient-text">让每一种能力，都有生长的机会</p>
        <p className="hero-sub">
          斜杠码是一家专注于数字内容生态与个人价值增长的科技公司。我们围绕内容创作、达人变现、项目撮合、AI 数字内容与平台协同，持续打造连接机会、能力与收益的产品体系，帮助更多人把时间、技能、经验与创作转化为长期可积累的价值。
        </p>
        <div className="hero-keywords">
          <span className="kw"><i className="dot"></i>内容生态</span>
          <span className="kw"><i className="dot"></i>平台产品</span>
          <span className="kw"><i className="dot"></i>商业变现</span>
          <span className="kw"><i className="dot"></i>AI 数字内容</span>
          <span className="kw"><i className="dot"></i>个人价值增长</span>
        </div>
        <div className="hero-cta-row">
          <a className="btn btn-primary" href="#products">查看产品矩阵 ↓</a>
          <a className="btn btn-ghost" href="#contact">合作洽谈</a>
        </div>
      </div>
    </section>);

}

/* ============================================================== */
/* ABOUT — 我们是谁                                                */
/* ============================================================== */
function About() {
  return (
    <section id="about" data-screen-label="02 About">
      <div className="wrap">
        <div className="section-head">
          <span className="eyebrow">// Who We Are</span>
          <div className="title-row">
            <h2 className="h2">关于我们</h2>
          </div>
          <p className="lead">
            斜杠码是一家专注于数字内容生态与个人价值增长的科技公司。我们围绕内容创作、达人变现、项目撮合、AI 数字内容与平台协同，持续打造连接机会、能力与收益的产品体系。
          </p>
        </div>

        <div className="principles principles-wide">
          <div className="principle">
            <span className="label">品牌主张</span>
            <span className="body"><strong>你的未来，不止一份收入</strong></span>
          </div>
          <div className="principle">
            <span className="label">使命</span>
            <span className="body">以用户需求为中心，产品驱动业务增长，让创作分享更具回报。</span>
          </div>
          <div className="principle">
            <span className="label">愿景</span>
            <span className="body">打造最值得信赖的个人价值增长平台。</span>
          </div>
        </div>
      </div>
    </section>);

}

/* ============================================================== */
/* TIMELINE — 发展路径                                             */
/* ============================================================== */
function Timeline() {
  const milestones = [
  { year: '2019', title: '抖推猫上线', desc: '开启 KOL/KOC 撮合变现。', img: 'assets/products/doutuimao.png' },
  { year: '2021', title: '豆包知道、创作猫上线', desc: '拓展知识服务与创作工具。', img: 'assets/products/chuangzuomao.png' },
  { year: '2023', title: '拓展短剧、小说', desc: '拓展短剧、小说等内容消费业务。', img: 'assets/timeline/2023-duanju.png' },
  { year: '2025', title: '抖推猫 App 升级', desc: '新增本地生活、电商业务。', img: 'assets/products/doutuimao.png' },
  { year: '2026', title: '推出职刻', desc: '构建个人价值增长生态。', img: 'assets/products/zhike.png' }];

  return (
    <section className="section-alt" id="milestones" data-screen-label="03 Timeline">
      <div className="wrap">
        <div className="section-head">
          <span className="eyebrow">// How We Evolved</span>
          <div className="title-row">
            <h2 className="h2">发展路径</h2>
          </div>
          <p className="lead">从内容生态到个人价值增长。</p>
        </div>
      </div>
      <div className="wrap">
        <div className="timeline-marquee">
          <div className="timeline-track">
            {[...milestones, ...milestones].map((m, i) =>
            <div key={i} className={`timeline-item ${i % milestones.length === 0 ? 'first' : ''}`}>
                <div className="node"></div>
                <div className="year">{m.year}</div>
                <div className="tl-head">
                  <div className="app-logo tl-logo">
                    <img src={m.img} alt={m.title} />
                  </div>
                  <div className="title">{m.title}</div>
                </div>
                <div className="desc">{m.desc}</div>
              </div>
            )}
          </div>
        </div>
      </div>
    </section>);

}

/* ============================================================== */
/* AI TOOLS — AI 工具矩阵                                          */
/* ============================================================== */
function AITools() {
  const tools = [
  { name: '巨星动画', cat: 'AI 短剧制作工具', img: 'assets/ai-tools/juxing-donghua.jpg',
    desc: '一款面向 C 端用户的漫剧生产工具，可帮助用户高效完成从创意到成片的内容生产，降低漫剧创作门槛，提升制作效率与产出质量。' },
  { name: '化境 AI', cat: 'AI 短剧制作工具', img: 'assets/ai-tools/huajing-ai.jpg',
    desc: '生产能力强：内置爆款提示词，支持剧本导入、一键生成分镜；操作模式灵活：兼顾批量制作与手动精细化编辑；接口高效稳定：接入 Seedance2 企业 API，免除排队等待。' },
  { name: '化境算力中台', cat: 'AI 短剧团队算力管理系统', img: 'assets/ai-tools/huajing-suanli.jpg',
    desc: '保障多项目、多团队并行生产的算力供给，支撑爆款内容批量复刻与持续产出；聚焦团队运维，实现人员高效管理 + 算力统一管控，合理分配资源、降本增效。' },
  { name: '化境算数', cat: 'AI 短剧行业数据分析系统', img: 'assets/ai-tools/huajing-suanshu.jpg',
    desc: '以数据为导向精准选题、定方向，告别盲目创作，提升内容成为爆款的概率。' },
  { name: '职刻机构 OS', cat: 'OPC 超级个体经营', img: 'assets/ai-tools/zhike-os.jpg',
    desc: '一款为 OPC 超级个体打造的经营管理系统，通过打通项目流程与上下游协作，实现业务闭环运转。' },
  { name: 'GoldClaw', cat: 'OPC 龙虾 · AI 时代的个人工作台', img: 'assets/ai-tools/goldclaw.png',
    desc: '' },
  { name: '易剪', cat: '一站式 AI 短视频混剪工具', img: 'assets/ai-tools/yijian.png',
    desc: '' },
  { name: '漫造 · ManZao Studio', cat: 'OPC 时代 AI 短剧版权平台', img: 'assets/ai-tools/manzao.png',
    desc: '' },
  { name: '职刻漫剧', cat: 'AI 漫剧一站式发行平台', img: 'assets/ai-tools/zhike-manju.png',
    desc: '' }];

  return (
    <div className="ai-grid">
      {tools.map((t) =>
      <div className="ai-card" key={t.name}>
          <div className="ai-card-shot">
            <img src={t.img} alt={t.name} loading="lazy" />
          </div>
          <div className="ai-card-body">
            <span className="ai-card-name">{t.name}</span>
            <span className="ai-card-cat">{t.cat}</span>
            {t.desc ? <p className="ai-card-desc">{t.desc}</p> : null}
          </div>
        </div>
      )}
    </div>);

}

/* ============================================================== */
/* PRODUCTS — 产品矩阵 (APP / AI 工具 / 小程序)                    */
/* ============================================================== */
function Products() {
  const others = [
  { cn: '抖推猫', en: 'DOUTUIMAO', img: 'assets/products/doutuimao.png',
    accent: '#16C8F7', accent2: '#1E90FF', role: 'KOC 营销平台',
    tagline: '短视频生态 KOL/KOC 撮合变现平台',
    desc: '连接品牌与达人资源，服务内容推广、种草营销与合作转化等场景。',
    site: 'doutuimao.net',
    feats: [['品牌方', '内容推广与种草营销'], ['达人', '高效撮合与变现转化'], ['平台', '生态规则与合作保障']] },
  { cn: '创作猫', en: 'CHUANGZUOMAO', img: 'assets/products/chuangzuomao.png',
    accent: '#7C8BFF', accent2: '#1E40FF', role: '内容创作效率工具',
    tagline: '聚焦内容生产场景的全链路工具',
    desc: '帮助创作者提升制作效率与执行效率，强化工具支持和协同能力。',
    site: 'chuangzuomao.cn',
    feats: [['工具', '剪辑、模板、素材一体化'], ['任务', '协同接单与生产提效'], ['课堂', '能力进阶与方法沉淀']] },
  { cn: '豆包泛知道', en: 'DOUBAO', img: 'assets/products/doubao.png',
    accent: '#A879FF', accent2: '#1E40FF', role: '泛知识内容服务平台',
    tagline: '连接知识内容、用户与服务',
    desc: '帮助知识创作者提升内容承接与服务效率，让经验长期沉淀。',
    site: null,
    feats: [['创作者', '内容承接与服务效率'], ['用户', '精准知识与服务匹配'], ['生态', '泛知识内容长期沉淀']] }];

  const dirs = [
  { name: '内容创作', icon: 'content' },
  { name: '短剧剧场', icon: 'drama' },
  { name: '图像视觉', icon: 'image' },
  { name: '知识服务', icon: 'knowledge' },
  { name: '趣味互动', icon: 'fun' },
  { name: 'AI 生成', icon: 'ai' }];

  return (
    <section id="products" data-screen-label="04 Products">
      <div className="wrap">
        <div className="section-head">
          <span className="eyebrow">// What We Build</span>
          <div className="title-row">
            <h2 className="h2">产品矩阵</h2>
          </div>
          <p className="lead">
            以平台能力为底座，斜杠码形成覆盖内容生态、创作效率、商业变现与个人成长的产品矩阵。
          </p>
        </div>

        {/* === APP 矩阵 === */}
        <MatrixSub idx="A" name="APP 矩阵" />
        <div className="product-grid">
          {/* 职刻 - featured */}
          <div className="product-card featured">
            <div className="featured-inner">
              <div className="featured-left">
                <div className="product-head">
                  <div className="app-logo"><img src="assets/products/zhike.png" alt="职刻" /></div>
                  <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
                    <span className="role">FLAGSHIP · 核心平台</span>
                    <div className="name">
                      <span className="cn">职刻</span>
                      <span className="en">ZHIKE · zhikecn.com</span>
                    </div>
                  </div>
                </div>
                <div className="tagline">
                  连接项目、机构与执行者的<br />个人价值增长平台
                </div>
                <p className="desc" style={{ color: 'rgba(255,255,255,0.78)' }}>
                  围绕真实合作场景，持续连接多元项目需求与成长路径，让时间、技能与经验更高效地转化为长期可积累的价值。
                </p>
                <a className="product-link" href="https://zhikecn.com" target="_blank" rel="noreferrer">
                  访问 zhikecn.com
                </a>
              </div>
              <div className="featured-right">
                <div className="feat-pill">
                  <div className="title">// 更多机会</div>
                  <div className="desc">连接多元项目需求与真实合作场景，提升机会匹配效率</div>
                </div>
                <div className="feat-pill">
                  <div className="title">// 成长支持</div>
                  <div className="desc">提供教学、交流、实践、智能答疑与个性化推荐支持</div>
                </div>
                <div className="feat-pill">
                  <div className="title">// 协作保障</div>
                  <div className="desc">依托机构服务、社群协同和平台机制优化整体参与体验</div>
                </div>
              </div>
            </div>
          </div>

          {others.map((p) =>
          <div key={p.cn} className="product-card" style={{ '--pc-accent': p.accent, '--pc-accent2': p.accent2, borderColor: "rgb(255, 255, 255)" }}>
              <div className="product-head">
                <div className="app-logo"><img src={p.img} alt={p.cn} /></div>
                <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
                  <span className="role">{p.role}</span>
                  <div className="name">
                    <span className="cn">{p.cn}</span>
                    <span className="en">{p.en}{p.site ? ` · ${p.site}` : ''}</span>
                  </div>
                </div>
              </div>
              <div className="tagline">{p.tagline}</div>
              <p className="desc">{p.desc}</p>
              <div className="product-feats">
                {p.feats.map(([t, d]) =>
              <div className="product-feat" key={t}>
                    <div className="pf-title">{t}</div>
                    <div className="pf-desc">{d}</div>
                  </div>
              )}
              </div>
              {p.site ?
              <a className="product-link" href={`https://${p.site}`} target="_blank" rel="noreferrer">访问 {p.site}</a> :
              <div className="product-link product-link-empty" aria-hidden="true">&nbsp;</div>}
            </div>
          )}
        </div>

        {/* === AI 工具矩阵 === */}
        <MatrixSub idx="B" name="AI 工具矩阵" />
        <AITools />

        {/* === 小程序矩阵 === */}
        <MatrixSub idx="C" name="小程序矩阵" />
        <p className="matrix-intro">
          公司已形成覆盖内容创作、短剧剧场、图像视觉、知识服务、趣味互动与 AI 生成等方向的小程序矩阵。丰富的产品布局，体现了斜杠码在产品测试、流量承接、内容分发与商业化运营方面的综合能力。
        </p>
        <div className="mp-dirs">
          {dirs.map((d) =>
          <div className="mp-dir" key={d.name}>
              <img className="mp-dir-icon" src={`assets/mp-categories/${d.icon}.png`} alt={d.name} />
              <span className="mp-dir-name">{d.name}</span>
            </div>
          )}
        </div>
      </div>
    </section>);

}

/* ============================================================== */
/* KPI — 数据成绩                                                   */
/* ============================================================== */
function CountUp({ target, decimals = 0, duration = 1600 }) {
  const [val, setVal] = useState(0);
  const ref = useRef(null);
  const targetStr = target.toFixed(decimals);
  useEffect(() => {
    const el = ref.current;
    if (!el) return;
    let started = false;
    const obs = new IntersectionObserver((entries) => {
      entries.forEach((e) => {
        if (e.isIntersecting && !started) {
          started = true;
          const start = performance.now();
          const tick = (t) => {
            const p = Math.min(1, (t - start) / duration);
            const eased = 1 - Math.pow(1 - p, 3);
            setVal(target * eased);
            if (p < 1) requestAnimationFrame(tick);
          };
          requestAnimationFrame(tick);
        }
      });
    }, { threshold: 0.4 });
    obs.observe(el);
    return () => obs.disconnect();
  }, [target, duration]);
  return (
    <span ref={ref} className="digits">
      <span className="cu-ghost" aria-hidden="true">{targetStr}</span>
      <span className="cu-val" style={{ margin: "0px", padding: "0px" }}>{val.toFixed(decimals)}</span>
    </span>);

}

function KPI() {
  return (
    <section className="section-alt" id="kpi" data-screen-label="05 KPI">
      <div className="wrap">
        <div className="section-head">
          <span className="eyebrow">// Numbers</span>
          <div className="title-row">
            <h2 className="h2">数据成绩</h2>
          </div>
          <p className="lead">长期沉淀，持续增长。</p>
        </div>

        <div className="kpi-grid">
          <div className="kpi">
            <span className="idx">01</span>
            <span className="ghost">3000</span>
            <div className="num"><CountUp target={3000} /><span className="scale" style={{ fontFamily: "\"Noto Sans SC\"" }}>万</span><span className="unit">+</span></div>
            <div className="accent-line"></div>
            <div className="lbl">累计助力达人实现变现</div>
          </div>
          <div className="kpi">
            <span className="idx">02</span>
            <span className="ghost">50</span>
            <div className="num"><CountUp target={50} /><span className="scale" style={{ fontFamily: "\"Noto Sans SC\"" }}>亿</span><span className="unit">+</span></div>
            <div className="accent-line"></div>
            <div className="lbl">累计创造价值</div>
          </div>
          <div className="kpi">
            <span className="idx">03</span>
            <span className="ghost">40</span>
            <div className="num"><CountUp target={40} /><span className="scale" style={{ fontFamily: "\"Noto Sans SC\"" }}>亿</span><span className="unit">+</span></div>
            <div className="accent-line"></div>
            <div className="lbl">累计服务人次</div>
          </div>
          <div className="kpi">
            <span className="idx">04</span>
            <span className="ghost">10</span>
            <div className="num"><CountUp target={10} /><span className="scale" style={{ fontFamily: "\"Noto Sans SC\"" }}>亿</span><span className="unit">+</span></div>
            <div className="accent-line"></div>
            <div className="lbl">触达短视频生态用户</div>
          </div>
        </div>
      </div>
    </section>);

}

/* ============================================================== */
/* HONORS — 行业荣誉                                                */
/* ============================================================== */
function Honors() {
  const honors = [
  { issuer: '知乎',             year: '2025', name: '年度推广先锋',     img: 'assets/honors/01-zhihu-2025.png' },
  { issuer: '抖音电商',         year: null,   name: '优质合作伙伴',     img: 'assets/honors/02-douyin-ec.png' },
  { issuer: '快手小程序',       year: null,   name: '年度服务商',       img: 'assets/honors/03-kuaishou-mp.png' },
  { issuer: '快手',             year: '2024', name: '年度小程序推广先锋', img: 'assets/honors/04-kuaishou-2024.png' },
  { issuer: '知乎 × 盐言故事',  year: '2024', name: '年度合作黑马奖',   img: 'assets/honors/05-zhihu-yanyan.png' },
  { issuer: '抖音开放平台',     year: null,   name: '优秀讲师',         img: 'assets/honors/06-douyin-teacher.png' },
  { issuer: '抖音创作者大会',   year: null,   name: '优质案例',         img: 'assets/honors/07-douyin-case.png' },
  { issuer: '点众快看',         year: null,   name: '优质战略合作伙伴', img: 'assets/honors/08-dianzhong.png' },
  { issuer: '九州短剧',         year: '23',   name: '年度最佳机构',     img: 'assets/honors/09-jiuzhou.png' },
  { issuer: '古言短剧',         year: '23',   name: '年度最佳合作伙伴', img: 'assets/honors/10-guyan.png' }];

  const highlight = (text) => {
    const keywords = ['年度', '最佳', '先锋', '黑马', '优质', '优秀', '战略'];
    const pattern = new RegExp(`(${keywords.join('|')})`, 'g');
    return text.split(pattern).map((p, i) =>
    keywords.includes(p) ? <em key={i} className="kw-hi">{p}</em> : <React.Fragment key={i}>{p}</React.Fragment>
    );
  };

  return (
    <section className="section-honors" id="honors" data-screen-label="06 Honors">
      <div className="wrap">
        <div className="section-head">
          <span className="eyebrow">// Awards</span>
          <div className="title-row">
            <h2 className="h2">行业荣誉</h2>
          </div>
          <p className="lead">被平台与行业持续认可。</p>
        </div>

        <div className="honor-wall">
          {honors.map((h, i) =>
          <div className="honor-row" key={i}>
              <img className="honor-medal" src={h.img} alt={`${h.issuer} ${h.name}`} />
              <div className="honor-body">
                <div className="honor-meta">
                  <span className="issuer">{h.issuer}</span>
                  {h.year && <><span className="sep">·</span><span>{h.year}</span></>}
                </div>
                <div className="honor-name">{highlight(h.name)}</div>
              </div>
              <span className="honor-arrow">→</span>
            </div>
          )}
        </div>
      </div>
    </section>);

}

/* ============================================================== */
/* PARTNERS — 合作伙伴 (双行反向跑马灯)                            */
/* ============================================================== */
function Partners() {
  const list = [
  { cn: '抖音',       img: 'assets/partners/douyin.png',           en: 'Douyin' },
  { cn: '抖音集团',   img: 'assets/partners/douyin-group.png',     en: 'ByteDance' },
  { cn: '快手',       img: 'assets/partners/kuaishou.png',         en: 'Kuaishou' },
  { cn: '腾讯',       img: 'assets/partners/tencent.png',          en: 'Tencent' },
  { cn: '微信视频号', img: 'assets/partners/weixin-shipinhao.png', en: 'Channels' },
  { cn: '知乎',       img: 'assets/partners/zhihu.png',            en: 'Zhihu' },
  { cn: '今日头条',   img: 'assets/partners/toutiao.png',          en: 'Toutiao' },
  { cn: 'UC',         img: 'assets/partners/uc.png',               en: 'UC Browser' },
  { cn: '夸克',       img: 'assets/partners/quark.png',            en: 'Quark' },
  { cn: '番茄小说',   img: 'assets/partners/fanqie.png',           en: 'Fanqie' },
  { cn: '起点中文网', img: 'assets/partners/qidian.png',           en: 'Qidian' },
  { cn: '书旗小说',   img: 'assets/partners/shuqi.png',            en: 'Shuqi' },
  { cn: 'QQ阅读',     img: 'assets/partners/qqread.png',           en: 'QQ Read' },
  { cn: '风行网',     img: 'assets/partners/fengxing.png',         en: 'Funshion' },
  { cn: '点众科技',   img: 'assets/partners/dianzhong.png',        en: 'Dianzhong' },
  { cn: '作业帮',     img: 'assets/partners/zuoyebang.png',        en: 'Zuoyebang' },
  { cn: '猿辅导',     img: 'assets/partners/yuanfudao.png',        en: 'Yuanfudao' },
  { cn: '最右',       img: 'assets/partners/zuiyou.png',           en: 'Zuiyou' }];

  return (
    <section id="partners" data-screen-label="07 Partners">
      <div className="wrap">
        <div className="section-head">
          <span className="eyebrow">// Ecosystem Partners</span>
          <div className="title-row">
            <h2 className="h2">合作伙伴</h2>
          </div>
          <p className="lead">
            与众多头部平台和内容生态伙伴建立合作，体现业务承接能力与行业协同深度。这些合作不仅证明了公司在内容生态、创作效率、项目撮合、商业变现与用户增长方面的长期积累，也进一步证明了公司具备较成熟的矩阵化产品运营能力与平台化业务承接能力。
          </p>
        </div>

        {(() => {
          const half = Math.ceil(list.length / 2);
          const row1 = list.slice(0, half);
          const row2 = list.slice(half);
          const renderItem = (p) =>
          <div className="partner-h" key={p.cn}>
              <div className="p-logo"><img src={p.img} alt={p.cn} /></div>
            </div>;

          return (
            <>
              <div className="partner-marquee">
                <div className="partner-track">
                  {[...row1, ...row1, ...row1, ...row1].map((p, i) =>
                  <React.Fragment key={i}>{renderItem(p)}</React.Fragment>
                  )}
                </div>
              </div>
              <div className="partner-marquee">
                <div className="partner-track reverse">
                  {[...row2, ...row2, ...row2, ...row2].map((p, i) =>
                  <React.Fragment key={i}>{renderItem(p)}</React.Fragment>
                  )}
                </div>
              </div>
            </>);

        })()}
      </div>
    </section>);

}

/* ============================================================== */
/* WHY US — 核心能力                                               */
/* ============================================================== */
function WhyUs() {
  const caps = [
  { n: '01', t: '内容理解能力', d: '长期深耕短视频、知识服务、短剧与内容消费领域。', icon: 'content', color: '#16C8F7' },
  { n: '02', t: '产品技术能力', d: '具备产品洞察、技术研发与快速迭代能力。', icon: 'users', color: '#4FA8FF' },
  { n: '03', t: '商业化能力', d: '连接内容、达人、项目与品牌，推动多元变现。', icon: 'biz', color: '#7C8BFF' },
  { n: '04', t: '平台经营能力', d: '围绕流量、内容、项目、组织与收益构建经营闭环。', icon: 'sync', color: '#A879FF' },
  { n: '05', t: '前瞻布局能力', d: '持续布局 AI 漫剧、AI 视频、AI 数字内容生产与个人成长平台。', icon: 'spark', color: '#C99A4A' }];

  return (
    <section className="section-why" id="why" data-screen-label="08 Why Us">
      <div className="wrap">
        <div className="section-head">
          <span className="eyebrow">// Why Choose Us</span>
          <div className="title-row">
            <h2 className="h2">核心能力</h2>
          </div>
          <p className="lead">为什么选择斜杠码。</p>
        </div>

        <div className="cap-grid">
          {caps.map((c) =>
          <div className="cap" key={c.n} style={{ '--cap-accent': c.color }}>
              <div className="cap-icon"><img src={`assets/capabilities/${c.icon}.png`} alt={c.t} /></div>
              <span className="cap-meta">{c.n} / CAPABILITY</span>
              <span className="title">{c.t}</span>
              <span className="desc">{c.d}</span>
            </div>
          )}
        </div>
      </div>
    </section>);

}

/* ============================================================== */
/* ORG — 组织布局与经营支撑                                         */
/* ============================================================== */
function Org() {
  const cities = [
  { name: '北京', role: '总部 · 平台研发 · 经营中心', num: 'HQ' },
  { name: '河北', role: '抖推猫 · 业务运营', num: '02' },
  { name: '深圳', role: '产研协同 · 平台运营', num: '03' },
  { name: '广州', role: '区域业务 · 合作落地', num: '04' },
  { name: '天津 / 杭州 / 长春', role: '主体矩阵 · 项目协同', num: '+3' }];

  return (
    <section id="org" data-screen-label="09 Org">
      <div className="wrap">
        <div className="section-head">
          <span className="eyebrow">// Where We Are</span>
          <div className="title-row">
            <h2 className="h2">组织布局与经营支撑</h2>
          </div>
          <p className="lead">
            经营与多地线下布局，为业务扩张、项目协同、平台研发与区域合作提供支撑。公司已形成较为完整的主体矩阵，覆盖北京、天津、河北、杭州、深圳、长春、广州等区域。
          </p>
        </div>

        <div className="org-grid">
          <div>
            <h3 className="h3" style={{ marginBottom: 24 }}>主体矩阵 / 布局城市</h3>
            <div className="cities">
              {cities.map((c) =>
              <div className="city" key={c.name}>
                  <span className="city-num mono">{c.num}</span>
                  <div>
                    <div className="city-name">{c.name}</div>
                    <div className="city-role">{c.role}</div>
                  </div>
                  <svg width="18" height="18" viewBox="0 0 18 18" fill="none">
                    <path d="M9 1 L9 17 M1 9 L17 9" stroke="#8892A8" strokeWidth="1" />
                    <circle cx="9" cy="9" r="3" fill="#1E40FF" />
                  </svg>
                </div>
              )}
            </div>
          </div>

          <div>
            <h3 className="h3" style={{ marginBottom: 20 }}>线下职场与协作空间</h3>
            <p className="muted" style={{ fontSize: 14, marginTop: 0, marginBottom: 24 }}>
              多地线下职场支撑长期经营、团队协作与区域合作落地。
            </p>
            <div className="office-gallery">
              {[
              { cls: 'big', name: '北京总部 · 海淀',   img: 'assets/offices/beijing.png' },
              { cls: '',    name: '河北沧州',          img: 'assets/offices/hebei.png' },
              { cls: '',    name: '深圳南山',          img: 'assets/offices/shenzhen.png' },
              { cls: '',    name: '广州花都',          img: 'assets/offices/guangzhou.png' },
              { cls: '',    name: '天津 / 杭州 / 长春', img: 'assets/offices/changchun.png' }].
              map((o, i) =>
              <div className={`office-photo ${o.cls} ${o.img ? 'has-img' : ''}`} key={i}
                style={o.img ? { backgroundImage: `url(${o.img})` } : undefined}>
                  <div className="meta">
                    <span className="meta-name">{o.name}</span>
                  </div>
                </div>
              )}
            </div>
          </div>
        </div>
      </div>
    </section>);

}

/* ============================================================== */
/* CONTACT — 联系我们 + Footer                                      */
/* ============================================================== */
function Contact() {
  const sites = [
  { cn: '职刻', url: 'zhikecn.com' },
  { cn: '抖推猫', url: 'doutuimao.net' },
  { cn: '创作猫', url: 'chuangzuomao.cn' },
  { cn: '豆包泛知道', url: null }];

  const addresses = [
  { city: '北京', text: '北京市海淀区中关村西三旗（金隅）科技园 1 期 1 号楼 B 座 7 层' },
  { city: '河北', text: '河北省沧州市运河区开元南大道兰亭苑小区商业楼 1 层抖推猫' },
  { city: '深圳', text: '深圳市南山区西丽街道办打石二路万科云城一期国际创新谷一期 3 栋 1 层 182' },
  { city: '广州', text: '广东省广州市花都区镜湖大道 37 号 A 栋 501 室' }];

  return (
    <section className="contact" id="contact" data-screen-label="10 Contact">
      <div className="wrap">
        <div className="section-head">
          <span className="eyebrow">// Get in Touch</span>
          <div className="title-row">
            <h2 className="h2" style={{ color: '#fff' }}>欢迎合作洽谈</h2>
          </div>
          <p className="lead">期待与更多伙伴建立长期、专业、可信赖的合作关系。</p>
        </div>

        <div className="contact-grid">
          <div className="contact-block">
            <div className="label">// 邮箱</div>
            <a className="email" href="mailto:serve@zhikecn.com">serve@zhikecn.com</a>
            <p style={{ color: 'rgba(255,255,255,0.5)', fontSize: 13, marginTop: 16, lineHeight: 1.6 }}>
              7×24h 业务咨询入口。商务合作、媒体采访、加入我们均可通过此邮箱与我们建立联系。
            </p>
          </div>

          <div className="contact-block">
            <div className="label">// 官网</div>
            <div className="contact-sites">
              {sites.map((s) =>
              s.url ?
              <a key={s.cn} href={`https://${s.url}`} target="_blank" rel="noreferrer">
                  <span className="site-cn">{s.cn}</span>
                  <span className="site-url">{s.url} ↗</span>
                </a> :
              <div key={s.cn} className="site-disabled">
                  <span className="site-cn">{s.cn}</span>
                  <span className="site-url site-url-pending">网站调整中</span>
                </div>
              )}
            </div>
          </div>

          <div className="contact-block">
            <div className="label">// 办公地址</div>
            <div className="addresses">
              {addresses.map((a) =>
              <div className="address" key={a.city}>
                  <span className="city-tag">{a.city}</span>
                  {a.text}
                </div>
              )}
            </div>
          </div>
        </div>
      </div>

      <div className="footer-bar">
        <span className="copy">© 2026 北京斜杠码科技有限公司 · Beijing Slash Code Technology Co., Ltd.</span>
        <span className="slash-mark">/ / /  SLASH CODE</span>
      </div>
    </section>);

}

/* ============================================================== */
/* NAV                                                              */
/* ============================================================== */
function Nav() {
  const [scrolled, setScrolled] = useState(false);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 20);
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  return (
    <nav className={`nav ${scrolled ? 'is-scrolled' : ''}`}>
      <div className="nav-inner">
        <a className="nav-logo" href="#top">
          <img src="assets/logo.png" alt="斜杠码 SLASH CODE" />
        </a>
        <div className="nav-links">
          <a href="#about">关于我们</a>
          <a href="#products">产品矩阵</a>
          <a href="#kpi">数据成绩</a>
          <a href="#honors">行业荣誉</a>
          <a href="#why">核心能力</a>
          <a href="#org">组织布局</a>
          <a href="#contact">联系我们</a>
        </div>
      </div>
    </nav>);

}

/* === Reveal on scroll === */
function useRevealOnScroll() {
  useEffect(() => {
    const targets = document.querySelectorAll('.section-head');
    targets.forEach((el) => el.classList.add('reveal'));
    const obs = new IntersectionObserver((entries) => {
      entries.forEach((e) => {
        if (e.isIntersecting) {
          e.target.classList.add('in');
          obs.unobserve(e.target);
        }
      });
    }, { threshold: 0.15, rootMargin: '0px 0px -8% 0px' });
    targets.forEach((el) => obs.observe(el));
    return () => obs.disconnect();
  }, []);
}

Object.assign(window, {
  Nav, Hero, About, Timeline, Products, KPI,
  Honors, Partners, WhyUs, Org, Contact,
  SlashMotif, useRevealOnScroll
});