function Vendors() {
  const [topic, setTopic] = React.useState(''); const [sent, setSent] = React.useState(false);
  return <>
  <Sec bg="var(--primary-50)" pad="72px 0"><Eyebrow>Our vendors</Eyebrow><H2>Our Vendors</H2><p style={{margin:'12px 0 0',maxWidth:640,lineHeight:'var(--body1-line)'}}>We partner with leading technology companies to bring world-class solutions to Asia Pacific.</p></Sec>
  <Sec><Grid n={4} gap={20}>{D.vendors.map(([n,d])=><Card key={n} title={n} href="#" eyebrow="Vendor">{d}</Card>)}</Grid></Sec>
  <Sec bg="var(--surface-subtle)"><H2 style={{marginBottom:32}}>Value Added Services</H2><Grid n={3} gap={20}>{D.services.map(([i,t,d])=><Card key={t} icon={i} title={t}>{d}</Card>)}</Grid></Sec>
  <Sec><div style={{display:'grid',gridTemplateColumns:'1fr 1.2fr',gap:48,alignItems:'start'}}><div><Eyebrow>Contact</Eyebrow><H2>Ask about our product</H2><p style={{lineHeight:'var(--body1-line)'}}>Choose a topic and our team will reach out within one business day.</p><div style={{display:'grid',gap:10,fontSize:'var(--body2-size)'}}>{[['map-pin','Grand Slipi Tower Lt. 42, Jakarta Barat'],['headset','24/7 Support via cloud.sivali.co'],['mail','Email our team']].map(([i,t])=><div key={t} style={{display:'flex',gap:10,alignItems:'center'}}><Icon name={i} size={18} color="var(--primary-600)"/>{t}</div>)}</div></div>
  <div style={{background:'#fff',border:'1px solid var(--border-default)',borderRadius:'var(--radius-xl)',padding:32,display:'grid',gap:16,boxShadow:'var(--shadow-sm)'}}>{sent ? <div style={{display:'grid',gap:8,placeItems:'center',padding:'24px 0',textAlign:'center'}}><span style={{width:48,height:48,borderRadius:'50%',background:'var(--aux-600)',display:'grid',placeItems:'center'}}><Icon name="check" size={24} color="var(--aux-700)"/></span><div style={{font:'500 var(--title-size)/var(--title-line) var(--font-heading)',color:'var(--text-heading)'}}>Thank you — we’ll be in touch.</div><Button variant="ghost" onClick={()=>setSent(false)}>Send another</Button></div> : <>
    <Select label="Topic" options={D.topics} value={topic} onChange={setTopic}/>
    <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:16}}><Input label="Full name" placeholder="Your name"/><Input label="Company" placeholder="PT …"/></div>
    <Input label="Work email" icon="mail" placeholder="you@company.co.id"/><Input label="Message" multiline placeholder="Tell us about your project"/>
    <Button fullWidth size="lg" icon="arrow-right" onClick={()=>setSent(true)}>Send request</Button></>}</div></div></Sec>
  </>; } window.Vendors = Vendors;