// Data-flow arrow diagram — 4 nodes L→R, annotated arrows
const ArchFlow = () => {
  const nodes = [
    { k:'本地文件', sub:'PDF · Word · Excel · OFD', chips:['读取','索引'] },
    { k:'桌面 App', sub:'广西信合工作台', chips:['权限','日志','回滚'] },
    { k:'模型层', sub:'多模型路由 · 可私有', chips:['加密','最小上下文'] },
    { k:'产出目录', sub:'回落本地 · 企业模板', chips:['Excel','Word','PDF'] },
  ];
  return (
    <div style={{background:'var(--gx-paper)',border:'1px solid var(--gx-line)',borderRadius:22,padding:'36px 28px'}}>
      <div style={{display:'grid',gridTemplateColumns:'1fr auto 1fr auto 1fr auto 1fr',gap:14,alignItems:'stretch'}} className="arch-flow">
        {nodes.map((n,i)=>(
          <React.Fragment key={n.k}>
            <div style={{background:'var(--gx-cream)',border:'1px solid var(--gx-line)',borderRadius:14,padding:'18px 18px',textAlign:'center',display:'flex',flexDirection:'column',justifyContent:'center'}}>
              <div style={{fontFamily:'var(--gx-font-mono)',fontSize:11,color:'var(--gx-ink-mute)',letterSpacing:'.1em'}}>0{i+1}</div>
              <div style={{fontFamily:'var(--gx-font-serif)',fontSize:19,fontWeight:500,color:'var(--gx-ink)',margin:'6px 0 4px'}}>{n.k}</div>
              <div style={{fontSize:12,color:'var(--gx-ink-soft)',marginBottom:10}}>{n.sub}</div>
              <div style={{display:'flex',flexWrap:'wrap',gap:4,justifyContent:'center'}}>
                {n.chips.map(c=>(<span key={c} style={{padding:'3px 8px',background:'var(--gx-accent-tint)',color:'var(--gx-accent-ink)',borderRadius:999,fontSize:11,fontFamily:'var(--gx-font-mono)'}}>{c}</span>))}
              </div>
            </div>
            {i<3 && (
              <div style={{display:'flex',flexDirection:'column',alignItems:'center',justifyContent:'center',padding:'0 4px'}}>
                <div style={{fontSize:10,color:'var(--gx-ink-mute)',textTransform:'uppercase',letterSpacing:'.12em',marginBottom:6}}>{['识别','提交','回落'][i]}</div>
                <svg width="44" height="14" viewBox="0 0 44 14"><line x1="0" y1="7" x2="36" y2="7" stroke="var(--gx-accent)" strokeWidth="1.5"/><polyline points="30,2 40,7 30,12" fill="none" stroke="var(--gx-accent)" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/></svg>
              </div>
            )}
          </React.Fragment>
        ))}
      </div>
      <div style={{display:'flex',justifyContent:'space-between',marginTop:24,paddingTop:20,borderTop:'1px dashed var(--gx-line)',fontSize:12,color:'var(--gx-ink-soft)',flexWrap:'wrap',gap:10}}>
        <span><b style={{color:'var(--gx-ink)'}}>数据边界</b> · 01–02 始终在本地</span>
        <span><b style={{color:'var(--gx-ink)'}}>模型层</b> · 仅必要上下文、加密通道、可切私有</span>
        <span><b style={{color:'var(--gx-ink)'}}>审计</b> · 全链路日志可导出 SIEM</span>
      </div>
      <style>{`@media (max-width:860px){.arch-flow{grid-template-columns:1fr !important}.arch-flow svg{transform:rotate(90deg)}}`}</style>
    </div>
  );
};

// Product page — feature sections + architecture + security whitepaper
const Product = ({ go }) => (
  <main className="route">
    <section className="hero" style={{ borderTop: 'none', paddingTop: 72 }}>
      <div className="container">
        <span className="eyebrow">产品 · AI 执行工作台</span>
        <h1>从一句话指令，<br/>到可交付的文档</h1>
        <p className="lede">工作台连接本地文件、内网系统与日常工具。指派任务后，自动读取、执行、产出——结果可审、可改、可回滚。</p>
      </div>
    </section>

    <section>
      <div className="container">
        <div className="section-head">
          <span className="eyebrow">核心能力</span>
          <h2>五项能力，覆盖日常办公</h2>
        </div>
        <div className="grid grid-2">
          {[
            ['本地文件执行', '直接读写本地目录下的 PDF / Word / Excel / Markdown。产出路径、命名与格式可由企业模板约束。'],
            ['多模型调度', '按任务类型切换模型：通用模型处理起草，检索模型处理资料调研，代码模型处理数据清洗。'],
            ['技能扩展', '通过技能模板拓展能力：报销核验、合同比对、周报生成等。支持客户自定义。'],
            ['定时任务', '每日 / 每周按计划触发，结果通过邮件、钉钉、企业微信回传。'],
            ['多端接入', '微信 / 钉钉 / 飞书下达指令，桌面端自动执行，移动端查看结果。'],
            ['审批与追溯', '关键操作二次确认；执行过程、输入、产出均可追溯、可回滚。'],
          ].map(([t,d])=>(
            <div key={t} className="card"><h3>{t}</h3><p>{d}</p></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>
        <ArchFlow/>
      </div>
    </section>

    <section>
      <div className="container sec-grid">
        <div>
          <span className="eyebrow">安全白皮书</span>
          <h2>企业版支持完全本地化与内网隔离</h2>
          <p>广西信合为政企客户提供完整的安全与合规文档。包含数据流图、权限矩阵、部署拓扑与审计策略。</p>
          <a href="#/contact" onClick={(e)=>{e.preventDefault();go('/contact');}} className="btn btn-primary" style={{marginTop:8}}>申请查看白皮书</a>
        </div>
        <ul className="sec-list">
          <li>全链路加密：本地—模型—回传</li>
          <li>可选模型：公有 API · 私有化 · 纯本地推理</li>
          <li>细粒度权限：按目录、按任务、按用户</li>
          <li>审计日志导出：CSV / SIEM 兼容</li>
          <li>支持物理隔离与国产化信创适配</li>
        </ul>
      </div>
    </section>
  </main>
);

Object.assign(window, { Product });