// Guangxi local services page — SEO-critical
const Guangxi = ({ go }) => {
  const cities = [
    ['南宁', true], ['柳州', true], ['桂林', true],
    ['梧州', false], ['北海', false], ['玉林', false],
    ['百色', false], ['贺州', false], ['河池', false],
    ['防城港', false], ['钦州', false], ['来宾', false], ['崇左', false],
  ];
  return (
    <main className="route">
      <section className="hero" style={{ borderTop: 'none', paddingTop: 72 }}>
        <div className="container">
          <span className="eyebrow qing">广西本地服务 · 13 市全覆盖</span>
          <h1>在广西，我们<br/>和你在同一个时区</h1>
          <p className="lede">从南宁核心到桂北、北部湾——广西信合在广西壮族自治区 13 个地级市提供上门部署、现场培训与驻地支持。</p>
        </div>
      </section>

      <section>
        <div className="container">
          <div className="section-head">
            <span className="eyebrow">覆盖城市</span>
            <h2>13 市服务网络</h2>
            <p>主要城市（南宁 · 柳州 · 桂林）提供常驻工程师；其他地市按项目排期响应。</p>
          </div>
          <div className="city-grid">
            {cities.map(([n, m]) => (
              <div key={n} className={'city-chip' + (m ? ' main' : '')}>{n}</div>
            ))}
          </div>
        </div>
      </section>

      <section style={{ background: 'var(--gx-cream-2)' }}>
        <div className="container">
          <div className="section-head">
            <span className="eyebrow">部署流程</span>
            <h2>四步完成企业级部署</h2>
          </div>
          <div className="grid grid-4">
            {[['1','需求诊断','2 小时线上或上门会议，梳理工作流、数据源与合规要求。'],
              ['2','方案确认','出具部署拓扑、权限矩阵与交付时间表。'],
              ['3','现场落地','工程师携带部署包上门，完成安装、接入与验收。'],
              ['4','培训与售后','全员培训、重点岗位 1v1，首年不限次远程支持。']].map(([n,t,d])=>(
              <div key={n} className="card"><span className="num">{n}</span><h3>{t}</h3><p>{d}</p></div>
            ))}
          </div>
        </div>
      </section>

      <section>
        <div className="container">
          <div className="section-head">
            <span className="eyebrow">培训体系</span>
            <h2>让每个岗位都用得起来</h2>
          </div>
          <div className="grid grid-3">
            {[['决策层','半日工作坊：业务价值、风险边界、ROI 参考案例。'],
              ['业务骨干','1 日实操：任务设计、技能调用、常见故障处理。'],
              ['IT 管理员','2 日深入：部署、权限、日志、升级与灾备。']].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>以下位置预留客户 logo 与案例卡片——上线前由客户方签字授权后替换。</p>
          </div>
          <div className="grid grid-3">
            {[1,2,3,4,5,6].map(i=>(
              <div key={i} className="card" style={{textAlign:'center',color:'var(--gx-ink-mute)',fontSize:13,padding:'40px 24px',borderStyle:'dashed'}}>客户 Logo · 占位</div>
            ))}
          </div>
        </div>
      </section>

      <section>
        <div className="container" style={{ maxWidth: 720 }}>
          <div className="section-head">
            <span className="eyebrow">预约到场</span>
            <h2>告诉我们你的团队</h2>
          </div>
          <form onSubmit={(e)=>{e.preventDefault();alert('已收到预约，我们将在 1 个工作日内联系你。');}}>
            <div className="form-grid">
              <label className="field"><span>企业名称</span><input required placeholder="如：南宁某某科技有限公司"/></label>
              <label className="field"><span>联系人</span><input required/></label>
              <label className="field"><span>手机 / 微信</span><input required/></label>
              <label className="field"><span>所在城市</span>
                <select>{cities.map(([n])=><option key={n}>{n}</option>)}</select>
              </label>
            </div>
            <label className="field" style={{marginTop:14}}><span>团队规模与关键场景</span>
              <textarea placeholder="大致的团队规模、希望 AI 解决的 1–2 类任务。"/></label>
            <div style={{marginTop:20}}>
              <button type="submit" className="btn btn-primary">提交预约 →</button>
            </div>
          </form>
        </div>
      </section>
    </main>
  );
};

Object.assign(window, { Guangxi });