// Contact + Download page — multi-step enterprise consult flow
const Contact = () => {
  const [stage, setStage] = React.useState('form'); // form | submitting | success
  const [data, setData] = React.useState({ company: '', name: '', phone: '', email: '', city: '南宁', size: '10–50 人', needs: '' });
  const [ticket, setTicket] = React.useState('');
  const update = (k) => (e) => setData({ ...data, [k]: e.target.value });

  const submit = (e) => {
    e.preventDefault();
    setStage('submitting');
    setTimeout(() => {
      const t = 'GXXH-' + new Date().getFullYear() + '-' + Math.floor(Math.random() * 9000 + 1000);
      setTicket(t);
      setStage('success');
    }, 1400);
  };

  return (
    <main className="route">
      <section className="hero" style={{ borderTop: 'none', paddingTop: 72, paddingBottom: 32 }}>
        <div className="container">
          <span className="eyebrow">联系 / 下载</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-3">
            {[['Mac · Apple Silicon','适用于 M1 / M2 / M3 / M4 芯片'],
              ['Mac · Intel','适用于 2015 及之后的 Intel Mac'],
              ['Windows 10+','适用于 Windows 10 / 11 64 位']].map(([t,d])=>(
              <div key={t} className="card"><h3>{t}</h3><p>{d}</p>
                <div style={{marginTop:16}}><a href="#" className="btn btn-primary">下载 .dmg / .exe</a></div>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section style={{ background: 'var(--gx-cream-2)' }}>
        <div className="container" style={{ maxWidth: 840 }}>
          <div className="section-head">
            <span className="eyebrow">企业咨询</span>
            <h2>定制部署与培训</h2>
            <p>留下你的需求，我们的广西本地工程师会在 1 个工作日内回复。</p>
          </div>

          {/* Step indicator */}
          <div style={{display:'flex',gap:8,marginBottom:24,alignItems:'center',fontSize:13,color:'var(--gx-ink-soft)'}}>
            {[['form','1 填写'],['submitting','2 提交中'],['success','3 已送达']].map(([k,l],i)=>(
              <React.Fragment key={k}>
                <span style={{
                  padding:'4px 10px',borderRadius:999,
                  background:stage===k?'var(--gx-accent)':(
                    (stage==='success'||(stage==='submitting'&&i===0))?'var(--gx-accent-soft)':'var(--gx-paper)'),
                  color:stage===k?'#fff':(
                    (stage==='success'||(stage==='submitting'&&i===0))?'var(--gx-accent-ink)':'var(--gx-ink-mute)'),
                  border:'1px solid '+(stage===k?'var(--gx-accent)':'var(--gx-line)'),
                  fontWeight:500,
                }}>{l}</span>
                {i<2 && <span style={{flex:'0 0 20px',height:1,background:'var(--gx-line)'}}/>}
              </React.Fragment>
            ))}
          </div>

          {stage==='form' && (
            <form onSubmit={submit} className="route">
              <div className="form-grid">
                <label className="field"><span>企业名称 *</span><input required value={data.company} onChange={update('company')}/></label>
                <label className="field"><span>联系人 *</span><input required value={data.name} onChange={update('name')}/></label>
                <label className="field"><span>手机 *</span><input required type="tel" value={data.phone} onChange={update('phone')}/></label>
                <label className="field"><span>邮箱</span><input type="email" value={data.email} onChange={update('email')}/></label>
                <label className="field"><span>城市</span><input value={data.city} onChange={update('city')}/></label>
                <label className="field"><span>团队规模</span>
                  <select value={data.size} onChange={update('size')}>
                    <option>1–10 人</option><option>10–50 人</option><option>50–200 人</option><option>200 人以上</option>
                  </select>
                </label>
              </div>
              <label className="field" style={{marginTop:14}}><span>需求简述</span>
                <textarea value={data.needs} onChange={update('needs')} placeholder="希望 AI 承担的任务、现有的工具、数据与合规要求。"/></label>
              <div style={{marginTop:20, display:'flex', gap:12, flexWrap:'wrap'}}>
                <button type="submit" className="btn btn-primary">提交咨询 →</button>
                <a href="mailto:support@gxxh.tech" className="btn btn-ghost">发送邮件 · support@gxxh.tech</a>
              </div>
            </form>
          )}

          {stage==='submitting' && (
            <div className="route" style={{padding:'40px 0',textAlign:'center'}}>
              <div style={{width:44,height:44,border:'3px solid var(--gx-line)',borderTopColor:'var(--gx-accent)',borderRadius:'50%',margin:'0 auto',animation:'spin 700ms linear infinite'}}/>
              <style>{`@keyframes spin{to{transform:rotate(360deg)}}`}</style>
              <h3 style={{marginTop:16,fontFamily:'var(--gx-font-serif)'}}>正在安全传输...</h3>
              <p style={{fontSize:14}}>信息通过加密通道送达南宁工程师团队</p>
            </div>
          )}

          {stage==='success' && (
            <div className="route" style={{background:'var(--gx-paper)',border:'1px solid var(--gx-line)',borderRadius:22,padding:'40px'}}>
              <div style={{width:56,height:56,borderRadius:'50%',background:'var(--gx-accent-soft)',color:'var(--gx-accent)',display:'grid',placeItems:'center',fontSize:28,fontWeight:300}}>✓</div>
              <h2 style={{marginTop:20,marginBottom:8}}>已收到，{data.name || '你'} 🫱</h2>
              <p style={{fontSize:16,maxWidth:'48ch'}}>我们将在 <b style={{color:'var(--gx-ink)'}}>1 个工作日内</b>通过电话与邮件联系你，安排初步需求会议。</p>

              <div style={{marginTop:24,background:'var(--gx-cream-2)',borderRadius:14,padding:'18px 20px',fontSize:14}}>
                <div style={{fontSize:11,textTransform:'uppercase',letterSpacing:'.12em',color:'var(--gx-ink-mute)',fontWeight:600,marginBottom:8}}>工单编号</div>
                <div style={{fontFamily:'var(--gx-font-mono)',fontSize:18,color:'var(--gx-accent-ink)'}}>{ticket}</div>
                <div style={{marginTop:14,display:'grid',gridTemplateColumns:'auto 1fr',gap:'6px 16px'}}>
                  <span style={{color:'var(--gx-ink-mute)'}}>企业</span><span>{data.company || '—'}</span>
                  <span style={{color:'var(--gx-ink-mute)'}}>联系人</span><span>{data.name || '—'} · {data.phone || '—'}</span>
                  <span style={{color:'var(--gx-ink-mute)'}}>城市</span><span>{data.city} · {data.size}</span>
                </div>
              </div>

              <div style={{marginTop:28}}>
                <div style={{fontSize:13,color:'var(--gx-ink-soft)',marginBottom:10}}>你同时可以：</div>
                <div style={{display:'flex',gap:10,flexWrap:'wrap'}}>
                  <a href="email-confirm.html" target="_blank" className="btn btn-ghost">查看邮件模板</a>
                  <a href="#/product" className="btn btn-ghost">继续浏览产品</a>
                  <button onClick={()=>{setStage('form');setData({company:'',name:'',phone:'',email:'',city:'南宁',size:'10–50 人',needs:''});}} className="btn btn-ghost">再提交一条</button>
                </div>
              </div>
            </div>
          )}
        </div>
      </section>

      <section>
        <div className="container sec-grid">
          <div>
            <span className="eyebrow">线下地址</span>
            <h2>南宁 · 总部</h2>
            <p>广西壮族自治区 南宁市 青秀区 · 地址待补<br/>工作时间：周一至周五 09:00–18:00</p>
            <p style={{marginTop:16,fontSize:14}}>电话 <a href="tel:" style={{color:'var(--gx-accent)'}}>0771-0000000</a><br/>邮箱 <a href="mailto:support@gxxh.tech" style={{color:'var(--gx-accent)'}}>support@gxxh.tech</a></p>
          </div>
          <div style={{background:'var(--gx-cream-2)',border:'1px solid var(--gx-line)',borderRadius:22,minHeight:280,display:'grid',placeItems:'center',color:'var(--gx-ink-mute)',fontSize:13}}>
            地图占位 · 上线前替换为静态地图图片
          </div>
        </div>
      </section>
    </main>
  );
};

Object.assign(window, { Contact });