// Contact — primary CTA. Form + direct email + signals.

function Contact() {
  const [submitted, setSubmitted] = React.useState(false);
  const [form, setForm] = React.useState({ name: '', email: '', kind: 'consulting', message: '' });

  const wrap = { padding: '96px clamp(20px,4vw,48px)', maxWidth: 1280, margin: '0 auto' };
  const eb = { fontFamily: 'var(--bc-font-mono)', fontSize: 11, letterSpacing: '0.22em', textTransform: 'uppercase', color: 'var(--bc-fg-secondary)', fontWeight: 500, marginBottom: 32 };
  const h = { fontFamily: 'var(--bc-font-display)', fontWeight: 300, fontSize: 'clamp(40px,5.5vw,80px)', lineHeight: 1.0, letterSpacing: '-0.03em', color: 'var(--bc-fg-primary)', textWrap: 'balance', marginBottom: 56 };

  const grid = { display: 'grid', gridTemplateColumns: '1.5fr 1fr', gap: 64, paddingTop: 32, borderTop: '1px solid var(--bc-border-subtle)' };

  const fieldGroup = { display: 'flex', flexDirection: 'column', gap: 8, marginBottom: 28 };
  const fLabel = { fontFamily: 'var(--bc-font-mono)', fontSize: 10, letterSpacing: '0.22em', textTransform: 'uppercase', color: 'var(--bc-fg-secondary)', fontWeight: 500 };
  const fInput = { fontFamily: 'var(--bc-font-sans)', fontSize: 16, padding: '12px 0', background: 'transparent', border: 'none', borderBottom: '1px solid var(--bc-border-default)', outline: 'none', color: 'var(--bc-fg-primary)' };
  const fTextarea = { ...fInput, minHeight: 120, fontFamily: 'var(--bc-font-sans)', resize: 'vertical', lineHeight: 1.6 };

  const radioRow = { display: 'flex', gap: 8, flexWrap: 'wrap', marginTop: 8 };
  const radioBtn = (active) => ({ fontFamily: 'var(--bc-font-mono)', fontSize: 11, letterSpacing: '0.18em', textTransform: 'uppercase', padding: '10px 14px', background: active ? 'var(--bc-ink)' : 'transparent', color: active ? 'var(--bc-paper)' : 'var(--bc-fg-primary)', border: '1px solid', borderColor: active ? 'var(--bc-ink)' : 'var(--bc-border-default)', cursor: 'pointer', fontWeight: 500 });

  const submit = { fontFamily: 'var(--bc-font-mono)', fontSize: 11, fontWeight: 500, letterSpacing: '0.18em', textTransform: 'uppercase', padding: '14px 24px', background: 'var(--bc-ink)', color: 'var(--bc-paper)', border: '1px solid var(--bc-ink)', cursor: 'pointer', marginTop: 12 };

  const aside = { display: 'flex', flexDirection: 'column', gap: 32 };
  const card = { border: '1px solid var(--bc-border-subtle)', background: 'var(--bc-bg-raised)', padding: 24, display: 'flex', flexDirection: 'column', gap: 10 };
  const cTitle = { fontFamily: 'var(--bc-font-mono)', fontSize: 10, letterSpacing: '0.22em', textTransform: 'uppercase', color: 'var(--bc-fg-secondary)', fontWeight: 500 };
  const cValue = { fontFamily: 'var(--bc-font-sans)', fontSize: 17, color: 'var(--bc-fg-primary)' };
  const cMeta = { fontFamily: 'var(--bc-font-sans)', fontSize: 13, color: 'var(--bc-fg-secondary)', lineHeight: 1.55 };

  const kinds = [['consulting','Consulting'],['saas','Product / SaaS'],['ai','AI systems'],['other','Other']];

  return (
    <section style={wrap} data-screen-label="06 Contact">
      <div style={eb}>§ 04 — Contact · Start a project</div>
      <h2 style={h}>Tell us what you're trying to build.</h2>

      <div style={grid}>
        <div>
          {!submitted ? (
            <form onSubmit={e => { e.preventDefault(); setSubmitted(true); }}>
              <div style={fieldGroup}>
                <label style={fLabel}>Your name</label>
                <input style={fInput} required value={form.name} onChange={e => setForm({...form, name: e.target.value})} placeholder="John Doe" />
              </div>
              <div style={fieldGroup}>
                <label style={fLabel}>Email</label>
                <input type="email" style={fInput} required value={form.email} onChange={e => setForm({...form, email: e.target.value})} placeholder="you@somewhere.com" />
              </div>
              <div style={fieldGroup}>
                <label style={fLabel}>What kind of work</label>
                <div style={radioRow}>
                  {kinds.map(([k,l]) => (
                    <button type="button" key={k} style={radioBtn(form.kind === k)} onClick={() => setForm({...form, kind: k})}>{l}</button>
                  ))}
                </div>
              </div>
              <div style={fieldGroup}>
                <label style={fLabel}>What you're working on</label>
                <textarea style={fTextarea} required value={form.message} onChange={e => setForm({...form, message: e.target.value})} placeholder="A few sentences. Honest specifics help — vague briefs get vague replies." />
              </div>
              <button type="submit" style={submit}>Send →</button>
              <p style={{ fontFamily: 'var(--bc-font-mono)', fontSize: 10, letterSpacing: '0.18em', textTransform: 'uppercase', color: 'var(--bc-fg-tertiary)', marginTop: 16 }}>
                We reply within two working days. Always a real person.
              </p>
            </form>
          ) : (
            <div style={{ padding: 32, border: '2px solid var(--bc-ink)', background: 'var(--bc-bg-surface)' }}>
              <div style={{ ...cTitle, color: 'var(--bc-selvedge)', marginBottom: 16 }}>✓ Received</div>
              <h3 style={{ fontFamily: 'var(--bc-font-display)', fontSize: 32, fontWeight: 400, letterSpacing: '-0.02em', marginBottom: 16, lineHeight: 1.15 }}>Thanks, {form.name || 'friend'}.</h3>
              <p style={{ fontFamily: 'var(--bc-font-sans)', fontSize: 16, lineHeight: 1.6, color: 'var(--bc-fg-secondary)', maxWidth: 480 }}>
                We'll read this carefully and write back within two working days — usually sooner.
                If it's urgent, mail directly to hello@buildcraft.town.
              </p>
            </div>
          )}
        </div>

        <aside style={aside}>
          <div style={card}>
            <div style={cTitle}>Direct</div>
            <a href="mailto:hello@buildcraft.town" style={{ ...cValue, color: 'var(--bc-selvedge)', textDecoration: 'none', borderBottom: '1px solid currentColor', alignSelf: 'start' }}>hello@buildcraft.town</a>
            <p style={cMeta}>The fastest path. Always a real person.</p>
          </div>
          <div style={card}>
            <div style={cTitle}>Engagement model</div>
            <div style={cValue}>Six-week sprints, fixed scope.</div>
            <p style={cMeta}>One team, one outcome. Week 1 is discovery; week 6 ends with a handoff PDF and a Slack channel that's still archived.</p>
          </div>
          <div style={card}>
            <div style={cTitle}>Currently booking</div>
            <div style={{ ...cValue, color: 'var(--bc-selvedge)' }}>Q3 2026 · two slots</div>
            <p style={cMeta}>We hold a slow pipeline on purpose. Earlier conversations are welcome.</p>
          </div>
        </aside>
      </div>
    </section>
  );
}

window.Contact = Contact;