// Home page — Hero + Workspace mock + Workflow + Scenarios + Security + FAQ + Download
const WorkspaceMock = () => {
  const [task, setTask] = React.useState(0);
  const tasks = [
    { title: '解读本季度招标文件包', dir: '/项目/2026Q2/招标文件',
      steps: [['01 读取', '识别 24 份 PDF，提取关键条款与截止日期'], ['02 汇总', '按项目、金额、资质要求分类整理'], ['03 产出', '生成 Excel 清单、Word 摘要与风险提示']],
      files: ['招标摘要.xlsx', '风险提示.md', '项目初审.docx'] },
    { title: '发票批量核验', dir: '/财务/2026Q2/发票',
      steps: [['01 读取', '批量识别 OFD / PDF 电子发票'], ['02 核验', '与报销单、合同清单对账'], ['03 产出', '生成异常清单与入账建议表']],
      files: ['发票对账.xlsx', '异常清单.csv'] },
    { title: '供应商合同比对', dir: '/采购/合同库',
      steps: [['01 读取', '提取双方合同条款'], ['02 比对', '按付款、违约、交付期逐条对齐'], ['03 产出', '差异红线标注版本']],
      files: ['合同差异.docx', '红线版.pdf'] },
    { title: '差旅费用汇总', dir: '/行政/2026/差旅',
      steps: [['01 读取', '聚合报销系统导出表'], ['02 汇总', '按人、按项目拆分'], ['03 产出', '季度差旅分析报告']],
      files: ['差旅分析.xlsx'] },
    { title: '市场周报生成', dir: '/市场/周报素材',
      steps: [['01 读取', '抓取指定信息源'], ['02 汇总', '按主题归类要点'], ['03 产出', '可直接发送的周报初稿']],
      files: ['市场周报.docx', '要点摘录.md'] },
  ];
  const t = tasks[task];
  return (
    <div className="workspace" aria-label="广西信合工作台预览">
      <div className="ws-head">
        <div className="ws-dots"><span></span><span></span><span></span></div>
        <div className="ws-title">广西信合工作台 · Workspace</div>
        <div style={{ width: 48 }}></div>
      </div>
      <div className="ws-body">
        <aside className="ws-side">
          <h4>任务中心</h4>
          {tasks.map((x, i) => (
            <div key={i} className={'ws-task' + (i === task ? ' active' : '')} onClick={() => setTask(i)}>{x.title}</div>
          ))}
        </aside>
        <div className="ws-main route" key={task}>
          <h3>{t.title}</h3>
          <p style={{ margin: '0 0 12px', fontFamily: 'var(--gx-font-mono)', fontSize: 13 }}>本地目录：{t.dir}</p>
          {t.steps.map(([b, p]) => (
            <div key={b} className="ws-step"><b>{b}</b><span>{p}</span></div>
          ))}
          <div className="ws-files">
            {t.files.map((f) => <span key={f} className="ws-file">{f}</span>)}
          </div>
        </div>
      </div>
    </div>
  );
};

const Home = ({ go }) => (
  <main className="route">
    <section className="hero" style={{ borderTop: 'none', paddingTop: 72 }}>
      <div className="container">
        <span className="eyebrow">广西本地服务 · 南宁 / 柳州 / 桂林</span>
        <h1>让 AI 真正替团队<br/>完成工作，交付可用的结果</h1>
        <p className="lede">广西信合为广西地区企业提供本地化部署的 AI 执行工作台：连接你的本地资料、内网系统与日常工具，自动读取、整理并产出可用的文档、表格与汇报稿。</p>
        <div className="hero-ctas">
          <a href="#/contact" onClick={(e)=>{e.preventDefault();go('/contact');}} className="btn btn-primary">下载桌面版 →</a>
          <a href="#/product" onClick={(e)=>{e.preventDefault();go('/product');}} className="btn btn-ghost">查看产品场景</a>
        </div>
        <div className="pills">
          <span className="pill">多模型支持</span>
          <span className="pill">技能扩展</span>
          <span className="pill">定时任务</span>
          <span className="pill">多渠道接入</span>
          <span className="pill">本地可控执行</span>
          <span className="pill">广西本地部署与培训</span>
        </div>
        <WorkspaceMock />
      </div>
    </section>

    <section>
      <div className="container">
        <div className="section-head">
          <span className="eyebrow">工作流</span>
          <h2>把任务推进到可交付结果</h2>
          <p>不是聊天对话，而是一条从资料到成品的完整执行链。</p>
        </div>
        <div className="grid grid-4">
          {[['1','选择资源目录','指定本地文件夹或连接的资料源，发起任务。'],
            ['2','读取本地文件','自动提取关键信息，理解内容结构。'],
            ['3','合并上下文','结合任务目标与背景，生成结构化结果。'],
            ['4','收集交付物','产出文档、表格、演示文稿，持续迭代。']].map(([n,t,d])=>(
            <div key={n} className="card"><span className="num">{n}</span><h3>{t}</h3><p>{d}</p></div>
          ))}
        </div>
        <div style={{ marginTop: 40 }}>
          <h3 style={{ fontFamily: 'var(--gx-font-sans)', fontSize: 13, textTransform: 'uppercase', letterSpacing: '.1em', color: 'var(--gx-ink-soft)', fontWeight: 600 }}>典型交付物</h3>
          <div className="deliver" style={{ marginTop: 12 }}>
            {[['MD','市场洞察摘要.md'],['DOC','项目汇报初稿.docx'],['CSV','待办清单.csv'],['XLS','招标摘要.xlsx']].map(([i,f])=>(
              <div key={f} className="chip"><span className="chip-ico">{i}</span>{f}</div>
            ))}
          </div>
        </div>
      </div>
    </section>

    <section style={{ background: 'var(--gx-cream-2)' }}>
      <div className="container">
        <div className="section-head">
          <span className="eyebrow">办公场景</span>
          <h2>广西企业正在使用的五类任务</h2>
          <p>从资料调研到跨端交付，已在南宁、柳州、桂林的客户现场落地。</p>
        </div>
        <div className="scen">
          {[['01','资料调研与汇总','面向运营、咨询、研究岗位：从公开资料与内部文档中抽取要点，自动形成结构化报告。'],
            ['02','邮件与报告撰写','面向管理者、行政助理、销售与市场团队：基于模板与事实材料生成可直接发送的稿件。'],
            ['03','浏览器自动化与网页操作','自动填表、抓取数据、提交表单，适用于运营、销售、研究岗位的重复性网页工作。'],
            ['04','数据处理与定时任务','批量文件重命名、表格清洗、定时生成日报周报，交给业务与运营团队放心托管。'],
            ['05','移动端指令，桌面端交付','通过微信 / 钉钉 / 飞书下达指令，桌面端自动执行，结果回传到你的手机。']].map(([n,t,d])=>(
            <div key={n} className="scen-row"><div className="n">{n}</div><h3>{t}</h3><p>{d}</p></div>
          ))}
        </div>
      </div>
    </section>

    <section>
      <div className="container sec-grid">
        <div>
          <span className="eyebrow">安全与控制</span>
          <h2>把执行能力交给 AI，也把控制权留给你</h2>
          <p>所有任务默认在本地完成。对于受监管行业与政企客户，我们支持内网隔离部署与权限审计。</p>
        </div>
        <ul className="sec-list">
          <li>限定工作目录边界，越权操作自动拦截</li>
          <li>可切换的权限模式：只读 / 审批 / 完全执行</li>
          <li>关键操作需要人工二次确认</li>
          <li>执行历史完整可见、可追溯、可回滚</li>
          <li>数据默认不出本地，支持私有化部署</li>
        </ul>
      </div>
    </section>

    <section style={{ background: 'var(--gx-cream-2)' }}>
      <div className="container" style={{ maxWidth: 820 }}>
        <div className="section-head">
          <span className="eyebrow">常见问题</span>
          <h2>关于广西信合 AI 工作台</h2>
        </div>
        <details open><summary>数据会离开本地吗？</summary>
          <p>默认不会。文件读取、内容解析与结果生成均在本地桌面端完成；仅模型调用所需的必要上下文会经加密通道发送给你选择的模型服务，且可切换为完全私有化部署方案。</p></details>
        <details><summary>哪些团队最适合使用？</summary>
          <p>政企办公、咨询研究、销售市场、财务与运营团队，尤其是需要处理大量本地文件、重复性工作流以及跨系统数据整合的团队。</p></details>
        <details><summary>产出的是对话文本还是可直接使用的文件？</summary>
          <p>是结构化的、可直接交付的文件：Word、Excel、PPT、Markdown、CSV 等，格式、字段与模板可按企业规范定制。</p></details>
        <details><summary>广西信合提供什么服务？</summary>
          <p>我们是该产品在广西地区的授权服务方，提供本地化部署、定制技能开发、员工培训以及持续售后支持；服务范围覆盖南宁、柳州、桂林、梧州、北海等地市。</p></details>
      </div>
    </section>

    <section>
      <div className="container">
        <div className="dl">
          <span className="eyebrow">开始使用</span>
          <h2 style={{ marginTop: 8 }}>下载桌面版，几分钟完成部署</h2>
          <p style={{ maxWidth: '52ch', margin: '0 auto' }}>选择适合你电脑的版本。广西本地企业可联系我们获取定制化部署包与培训。</p>
          <div className="dl-row">
            <a href="#/contact" onClick={(e)=>{e.preventDefault();go('/contact');}} className="btn btn-primary">Mac · Apple Silicon</a>
            <a href="#/contact" onClick={(e)=>{e.preventDefault();go('/contact');}} className="btn btn-ghost">Mac · Intel</a>
            <a href="#/contact" onClick={(e)=>{e.preventDefault();go('/contact');}} className="btn btn-ghost">Windows 10+</a>
          </div>
          <p style={{ marginTop: 20, fontSize: 13 }}>企业部署咨询：<a href="mailto:support@gxxh.tech" style={{ color: 'var(--gx-accent)' }}>support@gxxh.tech</a></p>
        </div>
      </div>
    </section>
  </main>
);

Object.assign(window, { Home });