function ContactForm() {
  const [sent, setSent] = React.useState(false);
  return (
    <section id="contact" style={{
      background: 'var(--s4-ink)', color: 'var(--s4-paper)',
      padding: '120px 40px',
    }}>
      <div style={{
        maxWidth: 1160, margin: '0 auto',
        display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 80,
      }}>
        <div>
          <div style={{
            fontFamily: 'var(--font-sans)', fontSize: 12, fontWeight: 600,
            textTransform: 'uppercase', letterSpacing: '0.14em',
            color: 'rgba(250,250,247,0.5)', marginBottom: 24,
          }}>
            Book an assessment
          </div>
          <h2 style={{
            fontFamily: 'var(--font-display)', fontWeight: 600,
            fontSize: 56, lineHeight: 1.02, letterSpacing: '-0.02em',
            margin: 0,
          }}>
            Start paying it down, before you have to.
          </h2>
          <p style={{
            fontFamily: 'var(--font-serif)', fontSize: 19, lineHeight: 1.55,
            color: 'rgba(250,250,247,0.7)', marginTop: 24, maxWidth: 420,
          }}>
            A 60-minute working session to locate the process debt in your
            organization and decide where to begin.
          </p>
        </div>
        <div>
          {sent ? (
            <div style={{
              border: '1px solid rgba(250,250,247,0.3)', padding: 40,
              fontFamily: 'var(--font-serif)', fontSize: 20, lineHeight: 1.5,
            }}>
              <div style={{
                fontFamily: 'var(--font-sans)', fontSize: 11, fontWeight: 600,
                textTransform: 'uppercase', letterSpacing: '0.14em',
                color: 'var(--s4-amber)', marginBottom: 16,
              }}>
                Received
              </div>
              Thanks. We'll reply within one business day.
            </div>
          ) : (
            <form onSubmit={(e) => { e.preventDefault(); setSent(true); }}
              style={{ display: 'flex', flexDirection: 'column', gap: 20 }}>
              <Field label="Name" defaultValue="" />
              <Field label="Company" defaultValue="" />
              <Field label="Email" defaultValue="" type="email" />
              <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
                <label style={{
                  fontFamily: 'var(--font-sans)', fontSize: 11, fontWeight: 600,
                  textTransform: 'uppercase', letterSpacing: '0.12em',
                  color: 'rgba(250,250,247,0.6)',
                }}>Where are the handoffs breaking?</label>
                <textarea rows={3} style={{
                  fontFamily: 'var(--font-sans)', fontSize: 15, padding: '10px 12px',
                  background: 'transparent', border: '1px solid rgba(250,250,247,0.3)',
                  color: 'var(--s4-paper)', borderRadius: 2, resize: 'vertical',
                  outline: 'none',
                }} />
              </div>
              <button type="submit" style={{
                fontFamily: 'var(--font-sans)', fontSize: 15, fontWeight: 600,
                padding: '14px 24px', background: 'var(--s4-paper)',
                color: 'var(--s4-ink)', border: '1px solid var(--s4-paper)',
                cursor: 'pointer', borderRadius: 2, alignSelf: 'flex-start',
                marginTop: 8,
              }}>
                Request assessment →
              </button>
            </form>
          )}
        </div>
      </div>
    </section>
  );
}

function Field({ label, type = 'text', defaultValue }) {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
      <label style={{
        fontFamily: 'var(--font-sans)', fontSize: 11, fontWeight: 600,
        textTransform: 'uppercase', letterSpacing: '0.12em',
        color: 'rgba(250,250,247,0.6)',
      }}>{label}</label>
      <input type={type} defaultValue={defaultValue} style={{
        fontFamily: 'var(--font-sans)', fontSize: 15, padding: '10px 12px',
        background: 'transparent', border: '1px solid rgba(250,250,247,0.3)',
        color: 'var(--s4-paper)', borderRadius: 2, outline: 'none',
      }} />
    </div>
  );
}

window.ContactForm = ContactForm;