const REASONS=[
['Say hello','sage','Questions, feedback, or nothing in particular.','Hello'],
['Early access','sky','Ask to hear when the first thing ships.','Early access'],
['Work with us','lavender','Design, engineering, accessibility testing.','Working together'],
['Report a problem','clay','Something broken, unclear, or inaccessible.','Problem report']];

function ContactBody(){
return <React.Fragment>
<section className="wrap" style={{paddingBottom:'clamp(24px,3vw,40px)'}}>
<div className="reveal" style={{background:'var(--brand-100)',borderRadius:'var(--radius-xl)',padding:'clamp(28px,4vw,64px)',display:'flex',flexWrap:'wrap',gap:24,alignItems:'center',justifyContent:'space-between'}}>
<div className="col" style={{gap:10}}>
<span className="eyebrow">Email</span>
<a className="h-lg" href={'mailto:'+window.EMAIL} style={{fontSize:'clamp(24px,2.8vw,38px)',color:'var(--brand-700)',wordBreak:'break-word'}}>{window.EMAIL}</a>
<p className="small" style={{color:'var(--brand-700)'}}>We read everything and typically reply within one business day.</p>
</div>
<LinkButton href={window.GITHUB}>GitHub organisation</LinkButton>
</div>
</section>
<section className="wrap sec" style={{paddingTop:0}}>
<h2 className="h-lg reveal" style={{marginBottom:'clamp(20px,2.5vw,36px)'}}>Pick a subject, or don't</h2>
<div style={{display:'grid',gridTemplateColumns:'repeat(auto-fit,minmax(250px,1fr))',gap:'clamp(12px,1.5vw,20px)'}}>
{REASONS.map(([t,tone,d,subj])=><a key={t} className="reveal" href={`mailto:${window.EMAIL}?subject=${encodeURIComponent(subj)}`}
style={{background:'var(--paper-0)',borderRadius:'var(--radius-lg)',padding:'clamp(22px,2.2vw,32px)',boxShadow:'var(--shadow-sm)',display:'flex',flexDirection:'column',gap:10}}>
<span style={{alignSelf:'flex-start'}}><DSBadge tone={TONE[tone]}>{t}</DSBadge></span>
<span className="body" style={{fontSize:'var(--text-base)'}}>{d}</span>
</a>)}
</div>
<p className="body" style={{marginTop:'clamp(28px,3vw,48px)'}}>We don't run a support phone line or a chat widget. Email is the whole system — see the <a className="linked" href="privacy.html">privacy policy</a> for what happens to what you send us.</p>
</section>
</React.Fragment>;
}

mountPage(<Page active="Contact">
<PageHead eyebrow="Contact" title="One address, no forms." lead="Everything — questions, early access, bug reports, working together — goes to the same inbox."/>
<ContactBody/>
</Page>);