// ContactForm.jsx — underline inputs, single submit
function ContactForm() {
  const [state, setState] = React.useState({ name: '', email: '', company: '', what: '' });
  const [submitted, setSubmitted] = React.useState(false);
  const update = (k) => (e) => setState(s => ({ ...s, [k]: e.target.value }));

  if (submitted) {
    return (
      <div style={cfStyles.thanks}>
        <div style={cfStyles.thanksLabel}>
          <span style={cfStyles.rule} />
          <span>Received</span>
          <span style={cfStyles.rule} />
        </div>
        <h3 style={cfStyles.thanksTitle}>We'll write back this week.</h3>
        <p style={cfStyles.thanksBody}>You'll hear from us at <strong style={{color:'var(--accent)'}}>{state.email || 'the address you gave'}</strong>. Usually within two working days; never longer than five.</p>
      </div>
    );
  }

  return (
    <form style={cfStyles.form} onSubmit={(e) => { e.preventDefault(); setSubmitted(true); }}>
      <Field label="Your name" value={state.name} onChange={update('name')} placeholder="Hannah Bell" />
      <Field label="Email" value={state.email} onChange={update('email')} placeholder="hannah@millridgebakery.com" />
      <Field label="Company" value={state.company} onChange={update('company')} placeholder="Millridge Bakery" />
      <Field label="What needs automating?" value={state.what} onChange={update('what')} placeholder="Three hours a week reconciling invoices by hand." multiline />
      <div style={cfStyles.actions}>
        <button type="submit" style={cfStyles.submit}>Send →</button>
        <span style={cfStyles.note}>We reply within two working days.</span>
      </div>
    </form>
  );
}

function Field({ label, value, onChange, placeholder, multiline }) {
  return (
    <label style={cfStyles.field}>
      <span style={cfStyles.fieldLabel}>{label}</span>
      {multiline ? (
        <textarea value={value} onChange={onChange} placeholder={placeholder} style={cfStyles.textarea} rows={3} />
      ) : (
        <input type="text" value={value} onChange={onChange} placeholder={placeholder} style={cfStyles.input} />
      )}
    </label>
  );
}

const cfStyles = {
  form: { display: 'flex', flexDirection: 'column', gap: 28, maxWidth: 560 },
  field: { display: 'flex', flexDirection: 'column', gap: 10 },
  fieldLabel: { fontFamily: 'var(--sans-ui)', fontWeight: 300, fontSize: 11, letterSpacing: '0.22em', textTransform: 'uppercase', color: 'var(--ink-soft)' },
  input: { fontFamily: 'var(--sans-ui)', fontWeight: 300, fontSize: 17, color: 'var(--ink)', background: 'transparent', border: 'none', borderBottom: '1px solid var(--ink)', padding: '8px 0', outline: 'none' },
  textarea: { fontFamily: 'var(--sans-ui)', fontWeight: 300, fontSize: 16, color: 'var(--ink)', background: 'var(--bg-elev)', border: '1px solid var(--rule)', borderRadius: 2, padding: 14, outline: 'none', resize: 'vertical', minHeight: 80 },
  actions: { display: 'flex', alignItems: 'center', gap: 24, marginTop: 8 },
  submit: { fontFamily: 'var(--sans-ui)', fontWeight: 300, fontSize: 12, letterSpacing: '0.22em', textTransform: 'uppercase', color: 'var(--parchment)', background: 'var(--accent)', border: 'none', padding: '14px 28px', borderRadius: 999, cursor: 'pointer' },
  note: { fontFamily: 'var(--serif-display)', fontStyle: 'italic', fontSize: 14, color: 'var(--ink-soft)' },

  thanks: { padding: '40px 0', display: 'flex', flexDirection: 'column', gap: 18, alignItems: 'flex-start' },
  thanksLabel: { display: 'inline-flex', alignItems: 'center', gap: 14, color: 'var(--accent)', fontFamily: 'var(--sans-ui)', fontWeight: 300, fontSize: 12, letterSpacing: '0.28em', textTransform: 'uppercase' },
  rule: { width: 28, height: 1, background: 'currentColor', opacity: 0.7, display: 'inline-block' },
  thanksTitle: { fontFamily: 'var(--serif-display)', fontWeight: 400, fontSize: 36, lineHeight: 1.15, color: 'var(--ink)', margin: 0 },
  thanksBody: { fontFamily: 'var(--sans-ui)', fontWeight: 300, fontSize: 17, lineHeight: 1.55, color: 'var(--ink-brown)', margin: 0, maxWidth: '60ch' },
};

window.ContactForm = ContactForm;