// Contact page
function ContactPage() {
  const [submitted, setSubmitted] = React.useState(false);
  const [form, setForm] = React.useState({ name: '', email: '', company: '', size: '1-10', message: '' });
  const submit = (e) => {
    e.preventDefault();
    setSubmitted(true);
  };
  return (
    <SideRailLayout current="/contact">
      <Block pad="56px 56px 32px">
        <Headline eyebrow="Contact" title="Book a 30-minute walkthrough." subtitle="Tell us about your sites. We'll show you IssuesId working with your team in under 30 minutes." align="left" />
      </Block>
      <Block pad="0 56px 72px">
        <div style={{ display: 'grid', gridTemplateColumns: '1.2fr 1fr', gap: 32 }} className="contact-grid">
          {submitted ? (
            <div style={{
              padding: 40, borderRadius: 12,
              background: 'var(--paper-2)', border: '1px solid var(--rule)',
              display: 'flex', flexDirection: 'column', gap: 12,
            }}>
              <div style={{ color: 'var(--ok)', fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.1em' }}>✓ REQUEST RECEIVED</div>
              <div style={{ fontSize: 22, fontWeight: 500, letterSpacing: '-0.01em' }}>Thanks {form.name || 'there'} — we'll be in touch within one business day.</div>
              <div style={{ fontSize: 14, color: 'var(--ink-3)', lineHeight: 1.55 }}>In the meantime, explore our pricing or check out how IssuesId works on site.</div>
            </div>
          ) : (
            <form onSubmit={submit} style={{
              display: 'flex', flexDirection: 'column', gap: 14,
              padding: 24, borderRadius: 12,
              background: 'var(--paper-2)', border: '1px solid var(--rule)',
            }}>
              <Field label="Full name" value={form.name} onChange={v => setForm({...form, name: v})} />
              <Field label="Work email" value={form.email} onChange={v => setForm({...form, email: v})} type="email" />
              <Field label="Company" value={form.company} onChange={v => setForm({...form, company: v})} />
              <div>
                <label style={lblStyle}>Team size</label>
                <div style={{ display: 'flex', gap: 6, marginTop: 6, flexWrap: 'wrap' }}>
                  {['1-10', '11-50', '51-200', '200+'].map(s => (
                    <button key={s} type="button" onClick={() => setForm({...form, size: s})} style={{
                      padding: '8px 12px', fontSize: 13,
                      background: form.size === s ? 'var(--ink)' : 'var(--card)',
                      color: form.size === s ? 'var(--paper)' : 'var(--ink)',
                      border: '1px solid ' + (form.size === s ? 'var(--ink)' : 'var(--rule)'),
                      borderRadius: 5, cursor: 'pointer', fontFamily: 'var(--font-sans)',
                    }}>{s}</button>
                  ))}
                </div>
              </div>
              <div>
                <label style={lblStyle}>What would you like to see?</label>
                <textarea value={form.message} onChange={e => setForm({...form, message: e.target.value})} rows={4} style={{
                  ...inputStyle, marginTop: 6, resize: 'vertical', fontFamily: 'var(--font-sans)',
                }} placeholder="e.g. Defect workflow for residential multi-dwelling project..." />
              </div>
              <button type="submit" style={{
                background: 'var(--accent)', color: 'oklch(0.18 0.04 55)',
                padding: '12px 18px', fontSize: 14, fontWeight: 500,
                border: '1px solid var(--accent)', borderRadius: 6, cursor: 'pointer',
                fontFamily: 'var(--font-sans)',
              }}>Request demo →</button>
            </form>
          )}
          <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
            {[
              { tag: 'SALES', t: 'sales@issuesid.com', b: 'New projects & pilots' },
              { tag: 'SUPPORT', t: 'help@issuesid.com', b: 'For existing customers' },
              { tag: 'ADDRESS', t: 'Sydney, AUS', b: 'Remote-first team' },
            ].map(c => (
              <div key={c.tag} style={{
                padding: 20, borderRadius: 10,
                border: '1px solid var(--rule)', background: 'var(--paper-2)',
              }}>
                <div style={{
                  fontFamily: 'var(--font-mono)', fontSize: 10,
                  color: 'var(--accent)', letterSpacing: '0.14em', marginBottom: 8,
                }}>{c.tag}</div>
                <div style={{ fontSize: 15, fontWeight: 500, marginBottom: 4 }}>{c.t}</div>
                <div style={{ fontSize: 12, color: 'var(--ink-3)' }}>{c.b}</div>
              </div>
            ))}
          </div>
        </div>
        <style>{`@media(max-width:720px){.contact-grid{grid-template-columns:1fr !important;}}`}</style>
      </Block>
    </SideRailLayout>
  );
}

const lblStyle = {
  fontFamily: 'var(--font-mono)', fontSize: 10, color: 'var(--ink-3)',
  letterSpacing: '0.1em', textTransform: 'uppercase',
};
const inputStyle = {
  width: '100%', padding: '10px 12px', fontSize: 14,
  background: 'var(--card)', color: 'var(--ink)',
  border: '1px solid var(--rule)', borderRadius: 5,
  fontFamily: 'var(--font-sans)', outline: 'none',
};

function Field({ label, value, onChange, type = 'text' }) {
  return (
    <div>
      <label style={lblStyle}>{label}</label>
      <input type={type} value={value} onChange={e => onChange(e.target.value)}
        style={{ ...inputStyle, marginTop: 6 }}
        onFocus={e => e.target.style.borderColor = 'var(--accent)'}
        onBlur={e => e.target.style.borderColor = 'var(--rule)'}
      />
    </div>
  );
}

window.ContactPage = ContactPage;