/* sections.jsx — 斜杠码官网各板块组件 */

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>
      {/* large slashes on the right */}
      <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 BizIcon({ kind }) {
  const s = { stroke: 'currentColor', strokeWidth: 1.5, fill: 'none', strokeLinecap: 'round', strokeLinejoin: 'round' };
  switch (kind) {
    case 'platform':
      return (
        <svg width="22" height="22" viewBox="0 0 24 24" {...s}>
          <rect x="3" y="4" width="8" height="8" rx="1.5" />
          <rect x="13" y="4" width="8" height="8" rx="1.5" />
          <rect x="3" y="14" width="8" height="6" rx="1.5" />
          <rect x="13" y="14" width="8" height="6" rx="1.5" />
        </svg>);

    case 'content':
      return (
        <svg width="22" height="22" viewBox="0 0 24 24" {...s}>
          <rect x="4" y="3" width="14" height="18" rx="2" />
          <path d="M8 9 L14 9 M8 13 L13 13" />
          <path d="M16 16 L20 18 L16 20 Z" fill="currentColor" />
        </svg>);

    case 'rnd':
      return (
        <svg width="22" height="22" viewBox="0 0 24 24" {...s}>
          <circle cx="12" cy="12" r="3" />
          <path d="M12 4 L12 7 M12 17 L12 20 M4 12 L7 12 M17 12 L20 12 M6.3 6.3 L8.5 8.5 M15.5 15.5 L17.7 17.7 M6.3 17.7 L8.5 15.5 M15.5 8.5 L17.7 6.3" />
        </svg>);

    case 'match':
      return (
        <svg width="22" height="22" viewBox="0 0 24 24" {...s}>
          <circle cx="6" cy="8" r="2.5" />
          <circle cx="18" cy="8" r="2.5" />
          <circle cx="12" cy="18" r="2.5" />
          <path d="M7.5 10 L11 16 M16.5 10 L13 16 M8.5 8 L15.5 8" />
        </svg>);

    case 'ai':
      return (
        <svg width="22" height="22" viewBox="0 0 24 24" {...s}>
          <path d="M12 3 L13.5 9 L19 10.5 L13.5 12 L12 18 L10.5 12 L5 10.5 L10.5 9 Z" />
          <circle cx="18" cy="18" r="1.5" fill="currentColor" />
          <circle cx="6" cy="18" r="1" fill="currentColor" />
        </svg>);

    case 'growth':
      return (
        <svg width="22" height="22" viewBox="0 0 24 24" {...s}>
          <path d="M4 18 L9 13 L13 16 L20 9" />
          <path d="M15 9 L20 9 L20 14" />
          <circle cx="9" cy="13" r="1.2" fill="currentColor" />
          <circle cx="13" cy="16" r="1.2" fill="currentColor" />
        </svg>);

    default:return null;
  }
}

function HeroFloat() {
  const products = [
  { cls: 'h1', cn: '职刻', tag: 'ZHIKE / FLAGSHIP', glyph: '职', bg: 'linear-gradient(135deg,#1E40FF 0%,#1E90FF 100%)' },
  { cls: 'h2', cn: '抖推猫', tag: 'KOC MARKETING', glyph: '抖', bg: 'linear-gradient(135deg,#16C8F7 0%,#1E90FF 100%)' },
  { cls: 'h3', cn: '创作猫', tag: 'CREATOR TOOLKIT', glyph: '创', bg: 'linear-gradient(135deg,#7C8BFF 0%,#1E40FF 100%)' },
  { cls: 'h4', cn: '豆包泛知道', tag: 'KNOWLEDGE PLATFORM', glyph: '豆', bg: 'linear-gradient(135deg,#A879FF 0%,#1E40FF 100%)' }];

  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" style={{ background: p.bg }}>{p.glyph}</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>);

}

/* ============================================================== */
/* 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-sub">
          斜杠码是一家专注于数字内容生态与个人价值增长的科技公司。我们以产品和技术连接内容生态、个人成长与商业效率，帮助更多人把时间、技能、经验与创作转化为长期可积累的价值。
        </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 className="hero-stats-bar">
          <div className="hero-stat">
            <span className="num">3000w+</span>
            <span className="lbl">助力达人变现</span>
          </div>
          <div className="hero-stat">
            <span className="num">50亿+</span>
            <span className="lbl">累计创造价值</span>
          </div>
          <div className="hero-stat">
            <span className="num">40亿+</span>
            <span className="lbl">累计服务人次</span>
          </div>
          <div className="hero-stat">
            <span className="num">10亿+</span>
            <span className="lbl">触达生态用户</span>
          </div>
        </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">
            公司并非围绕单一业务线发展，而是沿着「内容生态—创作效率—项目撮合—商业变现—平台协同—个人价值增长」的路径持续演进。
          </p>
        </div>

        <div className="about-grid">
          <div>
            <h3 className="h3" style={{ marginBottom: 18 }}>我们是谁</h3>
            <p className="lead" style={{ marginBottom: 36 }}>
              斜杠码是一家专注于数字内容生态与个人价值增长的科技公司。我们长期探索技术与产品如何更真实地服务用户、提升效率，并帮助更多人把时间、技能、经验与创作，转化为长期可积累的价值。
            </p>

            <div className="principles">
              <div className="principle">
                <span className="label">Mission</span>
                <span className="body">以用户需求为中心，<strong>产品驱动业务增长</strong>，让创作分享更具回报。</span>
              </div>
              <div className="principle">
                <span className="label">Vision</span>
                <span className="body">打造<strong>最值得信赖</strong>的个人价值增长平台。</span>
              </div>
              <div className="principle">
                <span className="label">Values</span>
                <div className="body" style={{ display: 'block' }}>
                  <div className="values-list">
                    <span className="value-chip">长期主义</span>
                    <span className="value-chip">精诚协作</span>
                    <span className="value-chip">开拓创新</span>
                    <span className="value-chip">正直守规</span>
                    <span className="value-chip">利人达己</span>
                    <span className="value-chip">创业初心</span>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div>
            <h3 className="h3" style={{ marginBottom: 12 }}>品牌主张</h3>
            <p style={{ fontSize: 22, fontWeight: 700, lineHeight: 1.4, margin: 0 }}>
              你的未来，不止一份收入
            </p>
            <p className="muted" style={{ fontSize: 14, marginTop: 8, marginBottom: 0 }}>
              以产品和技术连接内容生态、个人成长与商业效率
            </p>

            <h3 className="h3" style={{ marginTop: 56, marginBottom: 16 }}>综合业务体系</h3>
            <p className="muted" style={{ fontSize: 14, marginTop: 0, marginBottom: 20 }}>
              在技术、内容与平台协同持续升级的背景下，斜杠码正不断完善面向长期增长的能力结构。
            </p>
            <div className="biz-system">
              {[
              ['01', '平台运营', 'platform'],
              ['02', '内容服务', 'content'],
              ['03', '产品研发', 'rnd'],
              ['04', '项目撮合', 'match'],
              ['05', 'AI数字内容生产', 'ai'],
              ['06', '个人价值增长', 'growth']].
              map(([n, name, icon]) =>
              <div key={n} className="biz-card">
                  <div className="biz-icon"><BizIcon kind={icon} /></div>
                  <span className="num">{n}</span>
                  <span className="name">{name}</span>
                </div>
              )}
            </div>
          </div>
        </div>
      </div>
    </section>);

}

/* ============================================================== */
/* TIMELINE (发展里程碑)                                            */
/* ============================================================== */
function Timeline() {
  const milestones = [
  { year: '2019', title: '抖推猫小程序上线', desc: '全网首家短视频生态 KOL/KOC 撮合变现平台。', glyph: '抖' },
  { year: '2021.05', title: '豆包知道上线', desc: '拓展知识内容服务能力。', glyph: '豆' },
  { year: '2021.10', title: '创作猫上线', desc: '强化内容创作与任务变现效率支持。', glyph: '创' },
  { year: '2023', title: '拓展短剧 / 小说', desc: '进入内容消费领域，与多家平台建立合作。', glyph: '剧' },
  { year: '2025', title: '抖推猫 App 升级', desc: '新增本地生活、电商等业务类型。', glyph: '抖' },
  { year: '2026', title: '推出职刻', desc: '构建个人价值增长生态系统。', glyph: '职' }];

  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">从内容到平台<br />沿能力路径持续演进</h2>
          </div>
        </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"><span className="glyph">{m.glyph}</span></div>
                  <div className="title">{m.title}</div>
                </div>
                <div className="desc">{m.desc}</div>
              </div>
            )}
          </div>
        </div>
      </div>
    </section>);

}

/* ============================================================== */
/* PRODUCTS (产品矩阵)                                             */
/* ============================================================== */
function Products() {
  const others = [
  {
    cn: '抖推猫',
    en: 'DOUTUIMAO',
    glyph: '抖',
    accent: '#16C8F7',
    accent2: '#1E90FF',
    role: 'KOC 营销平台',
    tagline: '短视频生态 KOL/KOC 撮合变现平台',
    desc: '连接品牌与达人资源，服务内容推广、种草营销与合作转化等场景。',
    site: 'doutuimao.net',
    feats: [
    ['品牌方', '内容推广与种草营销'],
    ['达人', '高效撮合与变现转化'],
    ['平台', '生态规则与合作保障']]

  },
  {
    cn: '创作猫',
    en: 'CHUANGZUOMAO',
    glyph: '创',
    accent: '#7C8BFF',
    accent2: '#1E40FF',
    role: '内容创作效率工具',
    tagline: '聚焦内容生产场景的全链路工具',
    desc: '帮助创作者提升制作效率与执行效率，强化工具支持和协同能力。',
    site: 'chuangzuomao.cn',
    feats: [
    ['工具', '剪辑、模板、素材一体化'],
    ['任务', '协同接单与生产提效'],
    ['课堂', '能力进阶与方法沉淀']]

  },
  {
    cn: '豆包泛知道',
    en: 'DOUBAO',
    glyph: '豆',
    accent: '#A879FF',
    accent2: '#1E40FF',
    role: '泛知识内容服务平台',
    tagline: '连接知识内容、用户与服务',
    desc: '帮助知识创作者提升内容承接与服务效率，让经验长期沉淀。',
    site: 'doubaozhidao.com',
    feats: [
    ['创作者', '内容承接与服务效率'],
    ['用户', '精准知识与服务匹配'],
    ['生态', '泛知识内容长期沉淀']]

  }];


  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">
            以平台能力为底座，形成覆盖<strong>内容生态、创作效率、商业变现与个人成长</strong>的多层产品矩阵。矩阵化布局体现公司在产品测试、流量承接、用户转化、内容分发与商业化运营方面的综合能力。
          </p>
        </div>

        <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"><span className="glyph">职</span></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" style={{ background: `linear-gradient(135deg, ${p.accent} 0%, ${p.accent2} 100%)` }}><span className="glyph">{p.glyph}</span></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}</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>
              <a className="product-link" href={`https://${p.site}`} target="_blank" rel="noreferrer">访问 {p.site}</a>
            </div>
          )}
        </div>
      </div>
    </section>);

}

/* ============================================================== */
/* MINI-PROGRAM MATRIX (小程序矩阵)                                 */
/* ============================================================== */
function MPIcon({ kind }) {
  const fill = '#1E40FF';
  switch (kind) {
    case 'pen':
      return (
        <svg width="56" height="56" viewBox="0 0 56 56" fill="none">
          <path d="M14 42 L34 22 L42 30 L22 50 Z" fill={fill} opacity="0.85" />
          <path d="M34 22 L40 16 L48 24 L42 30 Z" fill="#16C8F7" />
          <circle cx="14" cy="42" r="3" fill="#0A1430" />
        </svg>);

    case 'play':
      return (
        <svg width="56" height="56" viewBox="0 0 56 56" fill="none">
          <rect x="8" y="12" width="40" height="32" rx="3" fill={fill} opacity="0.85" />
          <path d="M24 22 L36 28 L24 34 Z" fill="#fff" />
          <rect x="8" y="12" width="40" height="4" fill="#16C8F7" />
        </svg>);

    case 'image':
      return (
        <svg width="56" height="56" viewBox="0 0 56 56" fill="none">
          <rect x="8" y="10" width="40" height="36" rx="3" fill={fill} opacity="0.85" />
          <circle cx="20" cy="22" r="3.5" fill="#16C8F7" />
          <path d="M8 38 L20 28 L32 36 L40 30 L48 38 L48 46 L8 46 Z" fill="#fff" opacity="0.85" />
        </svg>);

    case 'book':
      return (
        <svg width="56" height="56" viewBox="0 0 56 56" fill="none">
          <path d="M8 12 L28 16 L28 48 L8 44 Z" fill={fill} opacity="0.85" />
          <path d="M48 12 L28 16 L28 48 L48 44 Z" fill="#16C8F7" />
        </svg>);

    case 'spark':
      return (
        <svg width="56" height="56" viewBox="0 0 56 56" fill="none">
          <path d="M28 8 L32 22 L46 24 L34 32 L38 46 L28 38 L18 46 L22 32 L10 24 L24 22 Z" fill={fill} opacity="0.85" />
          <circle cx="28" cy="28" r="4" fill="#16C8F7" />
        </svg>);

    case 'ai':
      return (
        <svg width="56" height="56" viewBox="0 0 56 56" fill="none">
          <circle cx="28" cy="28" r="16" fill={fill} opacity="0.85" />
          <circle cx="22" cy="24" r="2.5" fill="#fff" />
          <circle cx="34" cy="24" r="2.5" fill="#fff" />
          <path d="M20 34 Q28 38 36 34" stroke="#fff" strokeWidth="2" fill="none" strokeLinecap="round" />
          <circle cx="44" cy="14" r="3" fill="#16C8F7" />
        </svg>);

    default:return null;
  }
}

function Miniprograms() {
  const cats = [
  {
    name: '内容创作与工具',
    icon: 'pen',
    items: ['创作猫', '创作猫课堂', '创作猫素材', '创作猫小工具', '猫创意', '九宫格切片器']
  },
  {
    name: '短剧与剧场',
    icon: 'play',
    items: ['神马小影院', '神马大剧', '神马小短剧', '神马大剧场', '神马短剧场', '神马热剧', '神马微剧场', '蓝猫剧场', '懒猫剧场', '神马制剧', '神马好剧', '神马剧场']
  },
  {
    name: '图像与视觉',
    icon: 'image',
    items: ['印小妖', 'AI百变秀', 'AI随拍', '妙图鸭', '视觉壁纸', '云上壁纸', '视觉图库', '爱豆图库', '蓝猫取图', '推图社']
  },
  {
    name: '知识与服务',
    icon: 'book',
    items: ['豆包知道', '豆包泛知道', '知识王者', '知识宇宙', '知识星球', '竹子知道', '鸭先知']
  },
  {
    name: '趣味互动与测试',
    icon: 'spark',
    items: ['全民趣测', '趣测星球', '趣测玩家', '趣味创意社', '趣味工具箱', '脑洞测试园', 'MBTI在线测试', '性格探照器']
  },
  {
    name: 'AI 生成与变脸',
    icon: 'ai',
    items: ['超级变脸', 'AI超级变脸', '快乐变脸', '幻颜秀', '换脸工坊', '魔颜变脸']
  }];

  const total = cats.reduce((s, c) => s + c.items.length, 0);

  return (
    <section className="section-alt" id="mp" data-screen-label="05 Mini-programs">
      <div className="wrap">
        <div className="section-head">
          <span className="eyebrow">// Mini-Program Matrix · {total} apps</span>
          <div className="title-row">
            <h2 className="h2">小程序矩阵</h2>
          </div>
          <p className="lead">
            依托长期的平台运营、内容分发与产品孵化能力，公司已形成较丰富的小程序矩阵，并在多个方向持续布局。覆盖面广、数量多、迭代快——体现了公司在产品测试、流量承接、用户转化、内容分发与商业化运营方面的综合能力。
          </p>
        </div>

        <div className="mp-categories">
          {cats.map((c, i) =>
          <div className="mp-cat" key={c.name}>
              <div className="mp-cat-glass">
                <div className="mp-cat-icon"><MPIcon kind={c.icon} /></div>
                <span className="mp-cat-marker">// {String(i + 1).padStart(2, '0')} · placeholder.png</span>
              </div>
              <div className="mp-cat-body">
                <div className="cat-head">
                  <span className="cat-name">{c.name}</span>
                  <span className="cat-count">{c.items.length} 个产品</span>
                </div>
                <div className="mp-list">
                  {c.items.map((it) =>
                <span className="mp-item" key={it}>{it}</span>
                )}
                </div>
              </div>
            </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);
  const reserveDigits = targetStr.length;
  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 id="kpi" data-screen-label="06 KPI">
      <div className="wrap">
        <div className="section-head">
          <span className="eyebrow">// Why Customers Choose Us</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>
        <p className="muted" style={{ fontSize: 13, marginTop: 24, textAlign: 'right' }}>
          ※ 行业位置：小程序变现平台行业领先企业之一
        </p>
      </div>
    </section>);

}

/* ============================================================== */
/* HONORS (荣誉)                                                    */
/* ============================================================== */
function HonorMedal() {
  return (
    <svg className="honor-medal" viewBox="0 0 48 48" fill="none" aria-hidden="true">
      <path d="M24 4 L40 9 L40 22 C40 32 33 40 24 44 C15 40 8 32 8 22 L8 9 Z"
      fill="url(#goldGrad)" />
      <path d="M24 8 L36 12 L36 22 C36 30 31 36 24 39 C17 36 12 30 12 22 L12 12 Z"
      fill="rgba(255,255,255,0.08)" stroke="rgba(255,255,255,0.12)" strokeWidth="0.5" />
      <path d="M24 16 L26 21 L31.5 21 L27.2 24.5 L28.5 29.5 L24 27 L19.5 29.5 L20.8 24.5 L16.5 21 L22 21 Z"
      fill="rgba(255,255,255,0.92)" />
    </svg>);

}

function Honors() {
  const honors = [
  { issuer: '知乎', year: '2025', name: '年度推广先锋' },
  { issuer: '抖音电商', year: '2024', name: '优质合作伙伴' },
  { issuer: '快手', year: '2024', name: '年度小程序推广先锋' },
  { issuer: '快手小程序', year: '2024', name: '年度服务商' },
  { issuer: '知乎 × 盐言故事', year: '2024', name: '年度合作黑马奖' },
  { issuer: '抖音开放平台', year: null, name: '优秀讲师' },
  { issuer: '抖音创作者大会', year: null, name: '优质案例' },
  { issuer: '点众快看', year: null, name: '优质战略合作伙伴' },
  { issuer: '九州短剧', year: '2023', name: '年度最佳机构' },
  { issuer: '古言短剧', year: '2023', name: '年度最佳合作伙伴' }];


  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="07 Honors">
      {/* shared gold gradient def */}
      <svg width="0" height="0" style={{ position: 'absolute' }} aria-hidden="true">
        <defs>
          <linearGradient id="goldGrad" x1="0" y1="0" x2="1" y2="1">
            <stop offset="0%" stopColor="#FFF1B8" />
            <stop offset="45%" stopColor="#F8CE5C" />
            <stop offset="100%" stopColor="#B8893C" />
          </linearGradient>
        </defs>
      </svg>

      <div className="wrap">
        <div className="section-head">
          <span className="eyebrow">// Awards · 2023—2025</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}>
              <HonorMedal />
              <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 className="honor-stats">
          <div className="honor-stat">
            <span className="num">10+</span>
            <span className="lbl">行业荣誉与战略合作认可</span>
          </div>
          <div className="honor-stat">
            <span className="num">5+</span>
            <span className="lbl">头部内容平台合作奖项</span>
          </div>
          <div className="honor-stat">
            <span className="num">3</span>
            <span className="lbl">年度持续被生态伙伴认可</span>
          </div>
        </div>
      </div>
    </section>);

}

/* ============================================================== */
/* PARTNERS (合作伙伴)                                              */
/* ============================================================== */
function Partners() {
  const list = [
  { cn: '抖音', g: 'DY', en: 'Douyin' },
  { cn: '快手', g: 'KS', en: 'Kuaishou' },
  { cn: '百度', g: 'BD', en: 'Baidu' },
  { cn: '腾讯', g: 'TX', en: 'Tencent' },
  { cn: '阿里巴巴', g: 'AL', en: 'Alibaba' },
  { cn: '知乎', g: 'ZH', en: 'Zhihu' },
  { cn: '阅文集团', g: 'YW', en: 'China Lit' },
  { cn: '番茄小说', g: 'FQ', en: 'Fanqie' },
  { cn: '迅雷', g: 'XL', en: 'Xunlei' },
  { cn: '夸克', g: 'QK', en: 'Quark' },
  { cn: '红果短剧', g: 'HG', en: 'Hongguo' },
  { cn: '点众', g: 'DZ', en: 'Dianzhong' },
  { cn: '九州', g: 'JZ', en: 'Jiuzhou' },
  { cn: '风行视频', g: 'FX', en: 'Funshion' },
  { cn: '书旗小说', g: 'SQ', en: 'Shuqi' },
  { cn: 'UC', g: 'UC', en: 'UC Browser' },
  { cn: '今日头条', g: 'TT', en: 'Toutiao' }];

  return (
    <section id="partners" data-screen-label="08 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"><span className="glyph">{p.g}</span></div>
              <span className="p-name">{p.cn}</span>
              <span className="p-en">{p.en}</span>
            </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 (为什么选择我们) - 5 capabilities                          */
/* ============================================================== */
function CapIcon({ kind }) {
  const stroke = 'currentColor';
  const s = { stroke, strokeWidth: 1.6, fill: 'none', strokeLinecap: 'round', strokeLinejoin: 'round' };
  switch (kind) {
    case 'content':
      return (
        <svg width="28" height="28" viewBox="0 0 32 32" {...s}>
          <rect x="5" y="6" width="22" height="20" rx="2" />
          <path d="M10 12 L22 12 M10 16 L22 16 M10 20 L18 20" />
        </svg>);

    case 'users':
      return (
        <svg width="28" height="28" viewBox="0 0 32 32" {...s}>
          <circle cx="12" cy="11" r="3.5" />
          <circle cx="22" cy="13" r="3" />
          <path d="M5 26 C5 21 8 19 12 19 C16 19 19 21 19 26 M18 26 C18 23 20 21 22 21 C24 21 27 23 27 26" />
        </svg>);

    case 'biz':
      return (
        <svg width="28" height="28" viewBox="0 0 32 32" {...s}>
          <path d="M6 26 L6 14 L11 14 L11 26 M14 26 L14 8 L19 8 L19 26 M22 26 L22 18 L27 18 L27 26" />
          <path d="M4 26 L28 26" />
        </svg>);

    case 'sync':
      return (
        <svg width="28" height="28" viewBox="0 0 32 32" {...s}>
          <circle cx="16" cy="16" r="9" />
          <path d="M16 11 L16 16 L20 18" />
          <path d="M22 8 L25 11 L22 14" />
          <path d="M10 24 L7 21 L10 18" />
        </svg>);

    case 'spark':
      return (
        <svg width="28" height="28" viewBox="0 0 32 32" {...s}>
          <path d="M16 5 L18 13 L26 16 L18 19 L16 27 L14 19 L6 16 L14 13 Z" />
          <circle cx="24" cy="8" r="1.6" fill={stroke} />
        </svg>);

    default:return null;
  }
}

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="09 Why Us">
      <div className="wrap">
        <div className="section-head">
          <span className="eyebrow">// Why Choose Us</span>
          <div className="title-row">
            <h2 className="h2">从「流量、内容、项目」<br />到「平台、组织、收益」</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"><CapIcon kind={c.icon} /></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="10 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: '北京总部 · 海淀' },
              { cls: '', name: '河北沧州' },
              { cls: '', name: '深圳南山' },
              { cls: '', name: '广州花都' },
              { cls: '', name: '天津 / 杭州 / 长春' }].
              map((o, i) =>
              <div className={`office-photo ${o.cls}`} key={i}>
                  <div className="meta">
                    <span className="meta-name">{o.name}</span>
                  </div>
                </div>
              )}
            </div>
          </div>
        </div>
      </div>
    </section>);

}

/* ============================================================== */
/* CORE ABILITIES (核心能力总结)                                    */
/* ============================================================== */
function CoreAbilities() {
  const core = [
  { m: 'C-01', t: '产品与技术能力', d: '具备互联网产品洞察与技术研发能力，能够持续识别趋势、快速验证方向，并推动产品迭代落地。' },
  { m: 'C-02', t: '生态连接能力', d: '基于长期内容生态积累与用户洞察，形成较强的资源连接、智能匹配与业务承接能力。' },
  { m: 'C-03', t: '平台经营能力', d: '围绕内容、流量、项目、组织与收益构建闭环，具备矩阵化运营与规模化协同基础。' },
  { m: 'C-04', t: '服务支持能力', d: '建立从线上数字化工具到线下深度陪跑的服务链路。' }];

  const foundations = [
  '长期业务沉淀与多元产品矩阵，增强持续经营能力',
  '多主体、多城市布局，增强组织协同与区域承接能力',
  '平台化、工具化、组织化并行建设，增强交付确定性',
  '行业荣誉与头部伙伴合作，形成更清晰的信任背书'];

  return (
    <section className="section-alt" id="core" data-screen-label="11 Core">
      <div className="wrap">
        <div className="section-head">
          <span className="eyebrow">// Core Capabilities</span>
          <div className="title-row">
            <h2 className="h2">核心能力总结</h2>
          </div>
          <p className="lead">
            以长期积累形成更系统的<strong>平台能力、协同能力与经营能力</strong>。
          </p>
        </div>

        <div className="core-grid">
          {core.map((c) =>
          <div className="core-card" key={c.m}>
              <span className="marker">{c.m}</span>
              <span className="ttl">{c.t}</span>
              <span className="desc">{c.d}</span>
            </div>
          )}
        </div>

        <div className="foundation">
          <div>
            <span className="eyebrow" style={{ color: '#16C8F7' }}>// Foundation</span>
            <h3 className="h3" style={{ color: '#fff', marginTop: 14, fontSize: 24 }}>
              更稳定、更透明、<br />也更可持续的经营基础。
            </h3>
          </div>
          <div className="foundation-list">
            {foundations.map((f) =>
            <div className="foundation-item" key={f}>
                <span>{f}</span>
              </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: 'doubaozhidao.com' }];

  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="12 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) =>
              <a key={s.url} href={`https://${s.url}`} target="_blank" rel="noreferrer">
                  <span className="site-cn">{s.cn}</span>
                  <span className="site-url">{s.url} ↗</span>
                </a>
              )}
            </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="#mp">小程序矩阵</a>
          <a href="#kpi">数据成果</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, Miniprograms, KPI,
  Honors, Partners, WhyUs, Org, CoreAbilities, Contact,
  SlashMotif, useRevealOnScroll
});