function ContactPage() {
  const [sent, setSent] = React.useState(false);
  return (
    <React.Fragment>
      {/* Header */}
      <section style={{ padding: '96px 40px 40px', maxWidth: 1160, margin: '0 auto' }}>
        <div style={{
          fontFamily: 'var(--font-sans)', fontSize: 12, fontWeight: 600,
          textTransform: 'uppercase', letterSpacing: '0.14em', color: 'var(--fg-3)',
          marginBottom: 24, display: 'flex', alignItems: 'center', gap: 12,
        }}>
          <ProcessMark />
          Book an assessment
        </div>
        <h1 style={{
          fontFamily: 'var(--font-display)', fontWeight: 600,
          fontSize: 80, lineHeight: 0.98, letterSpacing: '-0.03em',
          margin: 0, maxWidth: 1000,
        }}>
          Start paying it down,<br/>before you have to.
        </h1>
        <p style={{
          fontFamily: 'var(--font-serif)', fontSize: 22, lineHeight: 1.5,
          color: 'var(--fg-2)', marginTop: 32, maxWidth: 680,
        }}>
          A 60-minute working session with Sam to locate the process debt in your
          organization and decide, honestly, where to begin.
        </p>
      </section>

      {/* Form + sidebar */}
      <section style={{ padding: '40px 40px 120px', maxWidth: 1160, margin: '0 auto' }}>
        <div style={{
          display: 'grid', gridTemplateColumns: '1.2fr 1fr', gap: 80,
          paddingTop: 56, borderTop: '1px solid var(--s4-ink)',
        }}>
          <div>
            {sent ? (
              <div style={{
                border: '1px solid var(--s4-ink)', padding: '48px',
                fontFamily: 'var(--font-serif)', fontSize: 22, lineHeight: 1.5,
              }}>
                <div style={{
                  fontFamily: 'var(--font-sans)', fontSize: 11, fontWeight: 600,
                  textTransform: 'uppercase', letterSpacing: '0.14em',
                  color: 'var(--s4-amber-ink)', marginBottom: 16,
                }}>
                  Received
                </div>
                <div style={{ color: 'var(--fg-1)' }}>
                  Thanks. You'll hear back from Sam within one business day — usually
                  the same day. If it's urgent, email <a href="mailto:sam@step4consulting.com" style={{ color: 'var(--fg-1)' }}>sam@step4consulting.com</a>.
                </div>
              </div>
            ) : (
              <form onSubmit={(e) => { e.preventDefault(); setSent(true); window.scrollTo({ top: 0, behavior: 'smooth' }); }}
                style={{ display: 'flex', flexDirection: 'column', gap: 24 }}>
                <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 24 }}>
                  <LField label="Name" />
                  <LField label="Company" />
                </div>
                <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 24 }}>
                  <LField label="Email" type="email" />
                  <LField label="Role" placeholder="e.g. COO, VP Operations" />
                </div>
                <LField label="Organization size" placeholder="Headcount or revenue, ballpark" />

                <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
                  <label style={{
                    fontFamily: 'var(--font-mono)', fontSize: 10, fontWeight: 600,
                    textTransform: 'uppercase', letterSpacing: '0.14em',
                    color: 'var(--fg-3)',
                  }}>Where are the handoffs breaking?</label>
                  <textarea rows={5} placeholder="Describe the process area or symptom that brought you here." style={{
                    fontFamily: 'var(--font-sans)', fontSize: 16, padding: '14px 16px',
                    background: 'var(--s4-paper)', border: '1px solid var(--s4-ink)',
                    color: 'var(--fg-1)', borderRadius: 2, resize: 'vertical',
                    outline: 'none',
                  }} />
                </div>

                <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
                  <label style={{
                    fontFamily: 'var(--font-mono)', fontSize: 10, fontWeight: 600,
                    textTransform: 'uppercase', letterSpacing: '0.14em',
                    color: 'var(--fg-3)',
                  }}>Engagement interest</label>
                  <div style={{ display: 'flex', gap: 10, flexWrap: 'wrap' }}>
                    {['Assessment', 'Redesign', 'Advisory', 'Not sure yet'].map(o => (
                      <Chip key={o} label={o} />
                    ))}
                  </div>
                </div>

                <button type="submit" style={{
                  fontFamily: 'var(--font-sans)', fontSize: 15, fontWeight: 600,
                  padding: '16px 28px', background: 'var(--s4-ink)',
                  color: 'var(--s4-paper)', border: '1px solid var(--s4-ink)',
                  cursor: 'pointer', borderRadius: 2, alignSelf: 'flex-start',
                  marginTop: 8,
                }}>
                  Request assessment  →
                </button>
              </form>
            )}
          </div>

          <aside style={{ display: 'flex', flexDirection: 'column', gap: 40 }}>
            <div>
              <div style={{
                fontFamily: 'var(--font-mono)', fontSize: 10, textTransform: 'uppercase',
                letterSpacing: '0.14em', color: 'var(--fg-3)', marginBottom: 14,
              }}>What happens next</div>
              {[
                { n: '01', t: 'We read the intake within one business day.' },
                { n: '02', t: 'Sam replies with two or three 60-minute slots.' },
                { n: '03', t: 'We hold the working session — no slides, no pitch deck.' },
                { n: '04', t: 'You receive a one-page summary and an honest recommendation.' },
              ].map(s => (
                <div key={s.n} style={{
                  display: 'grid', gridTemplateColumns: '40px 1fr', gap: 16,
                  padding: '14px 0', borderTop: '1px solid var(--s4-rule)',
                }}>
                  <span style={{
                    fontFamily: 'var(--font-display)', fontSize: 18, fontWeight: 600,
                    color: 'var(--s4-amber-ink)', letterSpacing: '-0.01em',
                  }}>{s.n}</span>
                  <span style={{
                    fontFamily: 'var(--font-serif)', fontSize: 16, lineHeight: 1.45,
                    color: 'var(--fg-1)',
                  }}>{s.t}</span>
                </div>
              ))}
            </div>

            <div style={{
              background: 'var(--s4-paper-2)', border: '1px solid var(--s4-rule)',
              padding: 28,
            }}>
              <div style={{
                fontFamily: 'var(--font-mono)', fontSize: 10, textTransform: 'uppercase',
                letterSpacing: '0.14em', color: 'var(--fg-3)', marginBottom: 12,
              }}>Direct</div>
              <div style={{
                fontFamily: 'var(--font-sans)', fontSize: 16, color: 'var(--fg-1)',
                lineHeight: 1.65,
              }}>
                <a href="mailto:sam.meyer@step4consulting.com" style={{ color: 'var(--fg-1)' }}>sam.meyer@step4consulting.com</a><br/>
                Bloomington, IN · remote-first<br/>
                <a href="#" style={{ color: 'var(--fg-1)' }}>LinkedIn →</a>
              </div>
            </div>

            <div>
              <div style={{
                fontFamily: 'var(--font-mono)', fontSize: 10, textTransform: 'uppercase',
                letterSpacing: '0.14em', color: 'var(--fg-3)', marginBottom: 14,
              }}>Before the session</div>
              <p style={{
                fontFamily: 'var(--font-serif)', fontSize: 16, lineHeight: 1.55,
                color: 'var(--fg-2)', margin: 0,
              }}>
                You don't need to prepare a brief. You don't need to have it figured out.
                The session is most useful when you arrive with the problem as you
                actually experience it — rough edges included.
              </p>
            </div>
          </aside>
        </div>
      </section>
    </React.Fragment>
  );
}

function LField({ label, type = 'text', placeholder }) {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
      <label style={{
        fontFamily: 'var(--font-mono)', fontSize: 10, fontWeight: 600,
        textTransform: 'uppercase', letterSpacing: '0.14em',
        color: 'var(--fg-3)',
      }}>{label}</label>
      <input type={type} placeholder={placeholder} style={{
        fontFamily: 'var(--font-sans)', fontSize: 16, padding: '14px 16px',
        background: 'var(--s4-paper)', border: '1px solid var(--s4-ink)',
        color: 'var(--fg-1)', borderRadius: 2, outline: 'none',
      }} />
    </div>
  );
}

function Chip({ label }) {
  const [on, setOn] = React.useState(false);
  return (
    <button type="button" onClick={() => setOn(!on)} style={{
      fontFamily: 'var(--font-sans)', fontSize: 13, fontWeight: 500,
      padding: '10px 14px', borderRadius: 2, cursor: 'pointer',
      border: '1px solid var(--s4-ink)',
      background: on ? 'var(--s4-ink)' : 'transparent',
      color: on ? 'var(--s4-paper)' : 'var(--fg-1)',
      transition: 'all 160ms var(--ease-out)',
    }}>{label}</button>
  );
}

window.ContactPage = ContactPage;