// dthas landing — contact. Email + location on the left, minimal form on the right.
function Contact() {
  const { Input, Textarea, Button } = window.DesignSystem_aa2f04;
  const { Section, SectionHead } = window;
  const [form, setForm] = React.useState({ name: '', email: '', message: '' });
  const [status, setStatus] = React.useState('idle'); // idle | sending | sent | error
  const [error, setError] = React.useState('');
  const on = (k) => (e) => setForm({ ...form, [k]: e.target.value });
  const submit = async (e) => {
    e.preventDefault();
    if (e.target.botcheck && e.target.botcheck.value) return; // honeypot tripped
    setStatus('sending'); setError('');
    const res = await window.DTHAS.sendContact(form);
    if (res.ok) { setStatus('sent'); }
    else { setStatus('error'); setError(res.message); }
  };

  return (
    <Section id="contact">
      <div className="dthas-contact" style={{
        display: 'grid', gridTemplateColumns: 'minmax(0, 1fr) minmax(0, 1.1fr)',
        gap: 'clamp(40px, 7vw, 112px)', alignItems: 'start',
      }}>
        <div>
          <SectionHead eyebrow="Contact" title="Start a project." />
          <div style={{ display: 'flex', flexDirection: 'column', gap: '28px', marginTop: '8px' }}>
            <a href="mailto:dthastech@gmail.com"
              style={{ fontSize: 'clamp(1.5rem, 3vw, 2.25rem)', letterSpacing: '-0.03em', borderBottom: '1px solid var(--border-hairline)', paddingBottom: '4px', alignSelf: 'flex-start' }}
              onMouseEnter={(e)=>e.currentTarget.style.borderColor='var(--c-black)'}
              onMouseLeave={(e)=>e.currentTarget.style.borderColor='var(--border-hairline)'}
            >dthastech@gmail.com</a>
            <div style={{ display: 'flex', gap: '48px', flexWrap: 'wrap' }}>
              <div>
                <div className="dthas-fieldlbl">Location</div>
                <div style={{ fontSize: 'var(--fs-small)' }}>Den Haag, Netherlands</div>
              </div>
              <div>
                <div className="dthas-fieldlbl">Availability</div>
                <div style={{ fontSize: 'var(--fs-small)', display: 'inline-flex', alignItems: 'center', gap: '9px' }}>
                  <span aria-hidden="true" style={{ width: '7px', height: '7px', background: 'var(--c-black)', display: 'inline-block' }} />
                  Available for select projects
                </div>
              </div>
            </div>
          </div>
        </div>

        {status === 'sent' ? (
          <div style={{
            border: '1px solid var(--border-hairline)', padding: 'clamp(32px, 4vw, 56px)',
            display: 'flex', flexDirection: 'column', gap: '12px', minHeight: '320px', justifyContent: 'center',
          }}>
            <div style={{ fontFamily: 'var(--font-mono)', fontSize: 'var(--fs-overline)', letterSpacing: 'var(--ls-wide)', textTransform: 'uppercase', color: 'var(--text-secondary)' }}>Received</div>
            <p style={{ margin: 0, fontSize: 'var(--fs-h3)', letterSpacing: '-0.02em' }}>Thanks, {form.name || 'there'}. We'll reply within two working days.</p>
          </div>
        ) : (
          <form onSubmit={submit} style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '28px 32px' }}>
            {/* honeypot — hidden from users, catches bots */}
            <input type="text" name="botcheck" tabIndex="-1" autoComplete="off" aria-hidden="true"
              style={{ position: 'absolute', left: '-9999px', width: '1px', height: '1px', opacity: 0 }} />
            <Input label="Name" name="name" value={form.name} onChange={on('name')} required />
            <Input label="Email" name="email" type="email" value={form.email} onChange={on('email')} placeholder="you@company.com" required />
            <div style={{ gridColumn: '1 / -1' }}>
              <Textarea label="Message" name="message" rows={4} value={form.message} onChange={on('message')} placeholder="What are you building?" required />
            </div>
            {status === 'error' && (
              <p role="alert" style={{
                gridColumn: '1 / -1', margin: 0,
                fontFamily: 'var(--font-mono)', fontSize: 'var(--fs-caption)',
                letterSpacing: 'var(--ls-mono)', color: 'var(--text-primary)',
                borderLeft: '2px solid var(--c-black)', paddingLeft: '12px',
              }}>{error}</p>
            )}
            <div style={{ gridColumn: '1 / -1' }}>
              <Button type="submit" variant="primary" size="lg" withArrow disabled={status === 'sending'}>
                {status === 'sending' ? 'Sending…' : 'Send enquiry'}
              </Button>
            </div>
          </form>
        )}
      </div>
    </Section>
  );
}

Object.assign(window, { Contact });