/* 12 — Contact form (full fields). Faked submit → success. */
function Field({ label, children }) {
  return (
    <label style={{ display:'flex', flexDirection:'column', gap:8 }}>
      <span className="t-caption" style={{ color:'var(--on-deep-2)', fontFamily:'var(--font-mono)', letterSpacing:'.04em' }}>{label}</span>
      {children}
    </label>
  );
}

const inputStyle = {
  fontFamily:'var(--font-body)', fontSize:15, color:'var(--on-deep-1)', width:'100%',
  background:'var(--deep-input)', border:'1px solid var(--deep-border)',
  borderRadius:'var(--r-btn)', padding:'13px 14px', outline:'none', transition:'border-color var(--dur)',
};

function Contact({ t, pageTop = false }) {
  const c = t.contact;
  const [state, setState] = useState('idle'); // idle | sending | done
  const submit = (e) => {
    e.preventDefault();
    setState('sending');
    setTimeout(() => setState('done'), 1100);
  };
  return (
    <Section id="contact" bg="deep" label="Contact" style={{ overflow:'hidden', background:'var(--deep-bg)' }}>
      <div aria-hidden="true" style={{ position:'absolute', inset:0, pointerEvents:'none',
        background:'radial-gradient(50% 60% at 20% 10%, rgba(123,47,190,.12), transparent 60%)' }}></div>
      <Container style={{ ...window.PAD, position:'relative', paddingTop: pageTop ? 168 : window.PAD.paddingTop }}>
        <div className="bne-contact" style={{ display:'grid', gridTemplateColumns:'1fr 1.15fr', gap:56, alignItems:'start' }}>
          <div>
            <Eyebrow style={{ marginBottom:18 }}>{c.eyebrow}</Eyebrow>
            <h2 className="t-h1" style={{ margin:0, color:'var(--on-deep-1)' }}>{c.title}</h2>
            <p className="t-lead" style={{ color:'var(--on-deep-2)', marginTop:18, maxWidth:380 }}>{c.sub}</p>
            <a href={c.calUrl} target="_blank" rel="noopener" style={{ display:'flex', alignItems:'center', gap:14, marginTop:28, maxWidth:380,
              padding:'16px 18px', borderRadius:'var(--r-card)', textDecoration:'none',
              background:'var(--deep-input)', border:'1px solid var(--deep-border)', transition:'background var(--dur)' }}
              onMouseEnter={e=>e.currentTarget.style.background='var(--deep-border)'} onMouseLeave={e=>e.currentTarget.style.background='var(--deep-input)'}>
              <span style={{ display:'grid', placeItems:'center', width:42, height:42, borderRadius:10, background:'rgba(123,47,190,.3)', color:'var(--on-deep-1)', flexShrink:0 }}><Icon name="clock" size={22}/></span>
              <span style={{ flex:1 }}>
                <span style={{ display:'block', fontFamily:'var(--font-body)', fontSize:13.5, color:'var(--on-deep-3)' }}>{c.calTitle}</span>
                <span style={{ display:'inline-flex', alignItems:'center', gap:6, fontFamily:'var(--font-display)', fontWeight:700, fontSize:16, color:'var(--on-deep-1)', marginTop:2 }}>{c.calCta} <Icon name="arrow" size={16}/></span>
              </span>
            </a>
            <div style={{ marginTop:28, display:'flex', alignItems:'center', gap:12 }}>
              <Mark size={34} variant="auto" />
              <div style={{ fontFamily:'var(--font-mono)', fontSize:12.5, color:'var(--on-deep-3)', letterSpacing:'.04em' }}>UTC-3 · Americas &amp; Europe</div>
            </div>
          </div>

          <div style={{ background:'var(--deep-card)', border:'1px solid var(--deep-border)', borderRadius:'var(--r-xl)', padding:'32px' }}>
            {state === 'done' ? (
              <div style={{ display:'grid', placeItems:'center', textAlign:'center', minHeight:360, gap:16 }}>
                <div style={{ display:'grid', placeItems:'center', width:64, height:64, borderRadius:99, background:'rgba(123,47,190,.3)', color:'var(--on-deep-1)' }}><Icon name="check" size={32} stroke={2.4}/></div>
                <div className="t-h3" style={{ color:'var(--on-deep-1)' }}>{c.done}</div>
              </div>
            ) : (
              <form onSubmit={submit} style={{ display:'grid', gap:16 }}>
                <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:16 }}>
                  <Field label={c.f.name}><input required style={inputStyle} placeholder=" " /></Field>
                  <Field label={c.f.email}><input required type="email" style={inputStyle} placeholder=" " /></Field>
                </div>
                <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:16 }}>
                  <Field label={c.f.company}><input style={inputStyle} placeholder=" " /></Field>
                  <Field label={c.f.country}>
                    <select style={{ ...inputStyle, appearance:'none', backgroundImage:"url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E\")", backgroundRepeat:'no-repeat', backgroundPosition:'right 14px center' }}>
                      {c.countries.map(o => <option key={o} style={{ color:'#000' }}>{o}</option>)}
                    </select>
                  </Field>
                </div>
                <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:16 }}>
                  <Field label={c.f.service}>
                    <select style={{ ...inputStyle, appearance:'none', backgroundImage:"url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E\")", backgroundRepeat:'no-repeat', backgroundPosition:'right 14px center' }}>
                      {c.services.map(o => <option key={o} style={{ color:'#000' }}>{o}</option>)}
                    </select>
                  </Field>
                  <Field label={c.f.budget}>
                    <select style={{ ...inputStyle, appearance:'none', backgroundImage:"url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E\")", backgroundRepeat:'no-repeat', backgroundPosition:'right 14px center' }}>
                      {c.budgets.map(o => <option key={o} style={{ color:'#000' }}>{o}</option>)}
                    </select>
                  </Field>
                </div>
                <Field label={c.f.message}>
                  <textarea rows={4} style={{ ...inputStyle, resize:'vertical' }} placeholder={c.placeholder}></textarea>
                </Field>
                <button type="submit" disabled={state==='sending'} style={{
                  marginTop:6, display:'inline-flex', alignItems:'center', justifyContent:'center', gap:8,
                  fontFamily:'var(--font-body)', fontWeight:700, fontSize:16, cursor:'pointer',
                  padding:'15px 22px', borderRadius:'var(--r-btn)', border:'none',
                  background:'#fff', color:'#2A0F4F', transition:'all var(--dur)',
                }}
                onMouseEnter={e=>{e.currentTarget.style.background='var(--purple-vivid)';e.currentTarget.style.color='#fff';}}
                onMouseLeave={e=>{e.currentTarget.style.background='#fff';e.currentTarget.style.color='#2A0F4F';}}>
                  {state==='sending' ? c.sending : c.submit} {state!=='sending' && <Icon name="arrow" size={18}/>}
                </button>
                <p className="t-caption" style={{ textAlign:'center', color:'var(--on-deep-3)', margin:'4px 0 0', fontFamily:'var(--font-mono)', letterSpacing:'.02em' }}>{c.note}</p>
              </form>
            )}
          </div>
        </div>
      </Container>
    </Section>
  );
}

Object.assign(window, { Contact });