function Partners() {
  const [f, setF] = React.useState(null);
  const list = D.partners.filter(p => !f || p[1] === f);
  return <>
  <Sec bg="var(--primary-50)" pad="72px 0"><div style={{maxWidth:760}}><Eyebrow>Company</Eyebrow><H2>Partners</H2><h3 style={{font:'500 var(--h3-size)/var(--h3-line) var(--font-heading)',color:'var(--primary-600)',margin:'12px 0'}}>We partner with leading companies in Indonesia.</h3><p style={{margin:0,lineHeight:'var(--body1-line)'}}>At Sivali Cloud Technology, we deliver the services our partners need to ensure their hardware and software run optimally on the Linux platform. We collaborate with technology leaders, both large and small, to provide the software, services, support, and certifications they require.</p></div></Sec>
  <Sec pad="40px 0 80px"><div style={{display:'flex',gap:8,marginBottom:32,flexWrap:'wrap'}}><Tag selected={!f} onClick={()=>setF(null)}>All</Tag>{D.industries.map(i=><Tag key={i} selected={f===i} onClick={()=>setF(i)}>{i}</Tag>)}</div>
  <Grid n={2} gap={20}>{list.map(([n,ind,d])=><Card key={n} title={n} href="#" eyebrow={ind||undefined} footer={<div style={{width:120,height:36,border:'1px dashed var(--border-strong)',borderRadius:8,display:'grid',placeItems:'center',fontSize:10,color:'var(--text-muted)'}}>partner logo</div>}>{d}</Card>)}</Grid>
  <div style={{marginTop:48,padding:32,borderRadius:'var(--radius-2xl)',background:'var(--surface-subtle)',display:'flex',justifyContent:'space-between',alignItems:'center',gap:24,flexWrap:'wrap'}}><h3 style={{font:'500 var(--h3-size)/var(--h3-line) var(--font-heading)',color:'var(--text-heading)',margin:0}}>Can't find your company?</h3><Button icon="arrow-right">Partner Registration</Button></div></Sec>
  </>; } window.Partners = Partners;