const {SectionHeading, Field, Input, Textarea, Select, Checkbox, RadioGroup, Button, Card, Icon, Dialog, Toast} = window.SuperiorNitrogenServiceDesignSystem_483eb9;

function ContactSection({t}) {
  const C=window.SNS_CONTACT;
  const w=useViewport();
  const isMobile=w<=760;
  const isTablet=w<=1024;
  const px=w<=480?20:w<=980?28:50;
  const [scope, setScope] = React.useState(t.f.onshore);
  const [confirm, setConfirm] = React.useState(false);
  const [sent, setSent] = React.useState(false);
  React.useEffect(()=>{setScope(t.f.onshore)},[t]);
  return (
    <section id="contact" style={{background:'var(--surface-charcoal)',padding:'var(--section-y-tight) 0'}}>
      <div style={{maxWidth:'var(--max-width)',margin:'0 auto',padding:`0 ${px}px`}}>
        <SectionHeading onDark eyebrow={t.contactEyebrow} title={t.contactTitle} lede={t.contactLede}/>
        <div style={{display:'grid',gridTemplateColumns:isTablet?'1fr':'1.4fr 1fr',gap:isTablet?32:48,marginTop:40}}>
          <Card padding={isMobile?'var(--space-5)':'var(--space-8)'}>
            <form onSubmit={e=>{e.preventDefault();setConfirm(true)}} style={{display:'grid',gridTemplateColumns:isMobile?'1fr':'1fr 1fr',gap:20}}>
              <Field label={t.f.company} required htmlFor="co"><Input id="co"/></Field>
              <Field label={t.f.contact} required><Input/></Field>
              <Field label={t.f.phone} required><Input type="tel" placeholder={C.tel}/></Field>
              <Field label={t.f.email} required><Input type="email" placeholder={C.mail}/></Field>
              <Field label={t.f.service} style={{gridColumn:isMobile?'auto':'span 2'}}><Select placeholder={t.f.servicePh} options={t.services.map(s=>s[1])}/></Field>
              <Field label={t.f.location} hint={t.f.locationHint}><Input/></Field>
              <Field label={t.f.start}><Input type="date"/></Field>
              <Field label={t.f.scope} style={{gridColumn:isMobile?'auto':'span 2'}}><RadioGroup options={[t.f.onshore,t.f.offshore]} value={scope} onChange={setScope} direction="row"/></Field>
              <Field label={t.f.scopeWork} style={{gridColumn:isMobile?'auto':'span 2'}}><Textarea rows={5} placeholder={t.f.scopePh}/></Field>
              <div style={{gridColumn:isMobile?'auto':'span 2',display:'flex',flexDirection:'column',gap:18}}>
                <Checkbox label={t.f.sour}/>
                <Button type="submit" size="lg" iconRight={<Icon name="arrow-right" size={18}/>}>{t.f.send}</Button>
              </div>
            </form>
          </Card>

          <div style={{display:'flex',flexDirection:'column',gap:16}}>
            <Card tone="charcoal" accentBar>
              <span className="sns-eyebrow">{t.dispatch}</span>
              <div style={{marginTop:16,display:'flex',flexDirection:'column',gap:14}}>
                <div style={{display:'flex',flexDirection:'column',gap:4}}>
                  <span style={{fontFamily:'var(--font-display)',fontSize:11,letterSpacing:'.16em',fontWeight:700,color:'rgba(255,255,255,.5)'}}>{t.tel}</span>
                  <a href={C.telHref} style={{border:'none',fontFamily:'var(--font-mono)',fontSize:22,color:'var(--white)'}}>{C.tel}</a>
                </div>
                <div style={{display:'flex',flexDirection:'column',gap:4}}>
                  <span style={{fontFamily:'var(--font-display)',fontSize:11,letterSpacing:'.16em',fontWeight:700,color:'rgba(255,255,255,.5)'}}>{t.mail}</span>
                  <a href={'mailto:'+C.mail} style={{border:'none',fontSize:15,color:'var(--white)'}}>{C.mail}</a>
                </div>
                <span style={{display:'flex',gap:10,alignItems:'center',fontSize:14,color:'var(--text-inverse-muted)'}}><Icon name="map-pin" size={16} color="var(--orange-500)"/>{t.region}</span>
              </div>
            </Card>
            <Card tone="charcoal">
              <span className="sns-eyebrow">{t.next}</span>
              <ol style={{margin:'14px 0 0',paddingLeft:18,fontSize:14,lineHeight:1.8,color:'var(--text-inverse-muted)'}}>
                {t.nextSteps.map(s=>(<li key={s}>{s}</li>))}
              </ol>
            </Card>
          </div>
        </div>
      </div>

      {confirm && (
        <div style={{position:'fixed',inset:0,zIndex:60}}>
          <Dialog eyebrow={t.dispatch} title={t.dialogTitle} width={460} onClose={()=>setConfirm(false)}
            footer={<><Button variant="outline" size="sm" onClick={()=>setConfirm(false)}>{t.cancel}</Button><Button size="sm" onClick={()=>{setConfirm(false);setSent(true)}}>{t.f.send}</Button></>}>
            {scope} — {t.dialogBody}
          </Dialog>
        </div>
      )}
      {sent && (
        <div style={{position:'fixed',right:isMobile?16:24,left:isMobile?16:'auto',bottom:isMobile?16:24,zIndex:70}}>
          <Toast tone="ok" title={t.toastTitle} message={t.toastMsg} onDismiss={()=>setSent(false)} style={isMobile?{minWidth:'auto',maxWidth:'100%'}:undefined}/>
        </div>
      )}
    </section>
  );
}

Object.assign(window, {ContactSection});