const { Panel, Input, Select, Button, Checkbox, Toast } = window.WilliamPittsDesignSystem_a0390b;
function ContactScreen() {
  const m = window.innerWidth <= 720;
  const [sent, setSent] = React.useState(false);
  const taStyle = {fontFamily:'var(--font-body)',fontSize:14,color:'var(--ink)',background:'var(--paper)',border:'var(--border-rule) solid var(--ink)',borderRadius:0,padding:'10px 12px',width:'100%',minHeight:110,resize:'vertical',boxSizing:'border-box'};
  return <main style={{padding:m?'48px 20px 64px':'48px 40px 64px',maxWidth:1040,margin:'0 auto'}}>
    <div style={{display:'flex',alignItems:'baseline',gap:20,marginBottom:32}}>
      <span style={{fontFamily:'var(--font-display)',fontSize:'var(--display-lg)',lineHeight:.95}}>04</span>
      <h1 style={{fontSize:'var(--display-lg)'}}>Contact</h1>
    </div>
    <div style={{display:'grid',gridTemplateColumns:m?'1fr':'1.3fr 1fr',gap:'var(--panel-gutter)',alignItems:'start'}}>
      <Panel title="Send a message" shadow>
        <form style={{display:'flex',flexDirection:'column',gap:16}} onSubmit={e => { e.preventDefault(); setSent(true); }}>
          <div style={{display:'grid',gridTemplateColumns:m?'1fr':'1fr 1fr',gap:16}}>
            <Input label="Name" placeholder="Your name" required />
            <Input label="Email" type="email" placeholder="you@domain.dev" required />
          </div>
          <Select label="Topic" options={['Role / hiring','Consulting','Something else']} defaultValue="Role / hiring" />
          <div style={{display:'flex',flexDirection:'column',gap:6}}>
            <label style={{fontFamily:'var(--font-mono)',fontSize:11,fontWeight:600,textTransform:'uppercase',letterSpacing:'var(--tracking-label)'}}>Message</label>
            <textarea style={taStyle} placeholder="What are you building?"></textarea>
          </div>
          <Checkbox label="It's time-sensitive" />
          <div><Button type="submit" size="lg">Send →</Button></div>
        </form>
      </Panel>
      <Panel inverse title="Elsewhere">
        <div style={{display:'flex',flexDirection:'column',gap:12,fontFamily:'var(--font-mono)',fontSize:13}}>
          <span>→ github.com/reixyz22</span>
          <span>→ linkedin.com/in/william-pitts-2r2</span>
          <span>→ email — to be confirmed</span>
        </div>
        <p style={{fontSize:13,margin:'18px 0 0',color:'var(--paper)'}}>I reply within a day. Chicago, IL — US Central.</p>
      </Panel>
    </div>
    {sent && <div style={{position:'fixed',bottom:24,left:24,zIndex:60}}><Toast title="Message sent" message="I'll reply within a day." onDismiss={() => setSent(false)} /></div>}
  </main>;
}
Object.assign(window, { ContactScreen });