// dthas — Contact page. Email + studio facts + a (grayscale) Den Haag map on the
// left, a minimal underline form on the right. Shares the design system, Section
// scaffolding, shared nav and the Footer. The form posts to Web3Forms (config.js).

const { Overline, Input, Textarea, Button } = window.DesignSystem_aa2f04;

// Inverted page header — bookends with the footer.
function ContactHeader() {
  return (
    <header id="top" style={{
      background: 'var(--c-black)', color: 'var(--c-white)',
      borderBottom: '1px solid var(--c-line-invert)',
    }}>
      <div style={{
        maxWidth: 'var(--container-max)', margin: '0 auto',
        padding: 'clamp(56px, 10vh, 128px) var(--container-pad) clamp(48px, 8vh, 96px)',
      }}>
        <div style={{
          fontFamily: 'var(--font-mono)', fontSize: 'var(--fs-overline)',
          letterSpacing: 'var(--ls-wide)', textTransform: 'uppercase',
          color: 'var(--c-paper-500)', marginBottom: 'clamp(32px, 6vh, 72px)',
          display: 'flex', justifyContent: 'space-between', flexWrap: 'wrap', gap: '12px',
        }}>
          <span>Contact</span>
          <span>Available · Select projects</span>
        </div>

        <h1 style={{
          margin: 0, fontWeight: 400,
          fontSize: 'var(--fs-h1)', lineHeight: 1.04,
          letterSpacing: '-0.04em', maxWidth: '16ch',
        }}>Start a project.</h1>

        <p style={{
          margin: 'clamp(28px, 5vh, 48px) 0 0', maxWidth: '52ch',
          fontSize: 'var(--fs-lead)', lineHeight: 1.45,
          letterSpacing: '-0.01em', color: 'var(--c-paper-700)',
        }}>
          Tell me what you're building. Briefs, scoping questions and second
          opinions all welcome. Replies within two working days.
        </p>
      </div>
    </header>
  );
}

function ContactBody() {
  const { Section } = window;
  const [form, setForm] = React.useState({ name: '', email: '', company: '', 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 — silently drop
    setStatus('sending'); setError('');
    const res = await window.DTHAS.sendContact(form);
    if (res.ok) { setStatus('sent'); }
    else { setStatus('error'); setError(res.message); }
  };

  const detail = [
    ['Email', <a key="e" href="mailto:dthastech@gmail.com" style={{ color: 'var(--text-primary)' }}>dthastech@gmail.com</a>],
    ['Location', 'Den Haag, Netherlands'],
    ['Availability', (
      <span key="a" style={{ 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
      </span>
    )],
    ['Response', 'Within two working days'],
  ];

  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>
          <Overline index="01">Direct</Overline>
          <a href="mailto:dthastech@gmail.com"
            style={{
              display: 'inline-block', margin: '24px 0 0',
              fontSize: 'clamp(1.75rem, 4vw, 3rem)', letterSpacing: '-0.04em',
              lineHeight: 1.05, borderBottom: '1px solid var(--border-hairline)', paddingBottom: '6px',
            }}
            onMouseEnter={(e)=>e.currentTarget.style.borderColor='var(--c-black)'}
            onMouseLeave={(e)=>e.currentTarget.style.borderColor='var(--border-hairline)'}
          >dthastech@gmail.com</a>

          <dl style={{ margin: 'clamp(32px, 5vh, 56px) 0 0', display: 'flex', flexDirection: 'column' }}>
            {detail.map(([k, v]) => (
              <div key={k} style={{
                display: 'flex', justifyContent: 'space-between', alignItems: 'baseline',
                gap: '16px', padding: '16px 0', borderTop: '1px solid var(--border-hairline)',
              }}>
                <dt style={{
                  fontFamily: 'var(--font-mono)', fontSize: 'var(--fs-caption)',
                  letterSpacing: '0.04em', textTransform: 'uppercase', color: 'var(--text-secondary)',
                }}>{k}</dt>
                <dd style={{ margin: 0, fontSize: 'var(--fs-small)', textAlign: 'right' }}>{v}</dd>
              </div>
            ))}
          </dl>

          <div style={{ marginTop: 'clamp(32px, 5vh, 56px)' }}>
            <div style={{
              fontFamily: 'var(--font-mono)', fontSize: 'var(--fs-overline)',
              letterSpacing: 'var(--ls-wide)', textTransform: 'uppercase',
              color: 'var(--text-secondary)', marginBottom: '14px',
              display: 'flex', justifyContent: 'space-between', gap: '12px',
            }}>
              <span>On the map</span>
              <a href="https://www.google.com/maps/place/The+Hague" target="_blank" rel="noopener"
                style={{ color: 'var(--text-secondary)', display: 'inline-flex', alignItems: 'center', gap: '8px' }}
                onMouseEnter={(e)=>e.currentTarget.style.color='var(--text-primary)'}
                onMouseLeave={(e)=>e.currentTarget.style.color='var(--text-secondary)'}
              >Open <span aria-hidden="true">→</span></a>
            </div>
            <div className="map-frame" style={{ border: '1px solid var(--border-hairline)', overflow: 'hidden' }}>
              <iframe
                title="dthas, Den Haag, Netherlands"
                src="https://maps.google.com/maps?q=Den%20Haag%2C%20Netherlands&t=&z=12&ie=UTF8&iwloc=&output=embed"
                width="100%" height="300" loading="lazy" allowFullScreen
                referrerPolicy="no-referrer-when-downgrade"
                style={{ border: 0, display: 'block', filter: 'grayscale(1) contrast(1.05)', transition: 'transform var(--dur-base) var(--ease-out)' }}
              />
            </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: '360px', 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', maxWidth: '30ch' }}>
              Thanks, {form.name || 'there'}. I'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' }}>
              <Input label="Company (optional)" name="company" value={form.company} onChange={on('company')} />
            </div>
            <div style={{ gridColumn: '1 / -1' }}>
              <Textarea label="Project" name="message" rows={5} value={form.message} onChange={on('message')} placeholder="What are you building, and what do you need from a developer?" 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>
  );
}

function ContactPage() {
  return (
    <React.Fragment>
      <SiteNav current="contact" />
      <ContactHeader />
      <main>
        <ContactBody />
      </main>
      <Footer />
    </React.Fragment>
  );
}

Object.assign(window, { ContactPage });