{/* Top notice */}

For Rev. Daniel M. Carrick

Hannah Kemper has asked you to commend her to the Help Meet Network — to confirm she is a member in good standing, and that you know her to be mature and godly. It takes about five minutes.

Commendation

Commending a member you know.

We are not asking you to evaluate Hannah's compatibility with any particular suitor. We ask two things: that you confirm she is a communing member in good standing, and that you commend her — that you know her, and consider her a mature, godly woman ready to pursue marriage. If you cannot do both in good conscience, please don't. Friends who know her well can add a fuller character reference separately.

{/* Member summary card */}

Member requesting commendation

Hannah Kemper, age 26

{member.church} · {member.presbytery} · {member.location}

{/* Form */}

How long have you known her?

{[['<1','< 1 yr'],['1-2','1–2 yrs'],['3-5','3–5 yrs'],['6-10','6–10 yrs'],['10+','10+ yrs']].map(([v,l]) => ( ))}

Your commendation

{/* Required confirmation */}

setAffirms({ ...affirms, member: e.target.checked })} style={{ width: 18, height: 18, accentColor: 'var(--ink)', marginTop: 2 }}/>

Member in good standing

Required

Hannah is a current communing member of our church, in good standing, with no discipline pending against her.

{/* Required commendation */}

setAffirms({ ...affirms, commend: e.target.checked })} style={{ width: 18, height: 18, accentColor: 'var(--ink)', marginTop: 2 }}/>

I commend her

Required

I know Hannah personally — not merely by name on a roll — and I commend her as a mature and godly woman, ready to pursue marriage in a manner that honors Christ.

The following are encouraged, but optional.

{[ ['free', "Free to marry", "So far as I am aware, she is free to pursue marriage — not currently married, engaged, or under a betrothal."], ['officiate', "I would be glad to officiate", "If asked — and the suitor were a believer in good standing — I would gladly officiate her wedding. (Optional.)"], ].map(([k, t, d]) => (

setAffirms({ ...affirms, [k]: e.target.checked })} style={{ width: 18, height: 18, accentColor: 'var(--ink)', marginTop: 2 }}/>

{t}

{d}

))} {/* Optionally also serve as a character reference */}

setAlsoReference(e.target.checked)} style={{ width: 18, height: 18, accentColor: 'var(--ink)', marginTop: 2 }}/>

I'd also like to add a character reference

Commending a member and writing a character reference are different things — but you're welcome to do both. This will appear on her profile under your name, alongside any other references she lists.

{alsoReference && (

setRefNote(e.target.value)}
                  placeholder="A few honest sentences about Hannah's character, as someone who knows her well…"/>
              </div>
            )}
          </div>

<div style={{ marginTop: 24 }}>
            <Field label="A note for the network team (optional)" hint="Anything you'd like us to know — special context or caveats.">
              <textarea style={{ ...inputStyle, minHeight: 84, resize: 'vertical', fontFamily: 'var(--serif)', fontSize: 16, lineHeight: 1.5 }}
                value={notes} onChange={e => setNotes(e.target.value)}
                placeholder="Hannah has been part of our congregation for seven years and serves faithfully in the nursery…"/>
            </Field>
          </div>

<div style={{ marginTop: 12, padding: 20, background: 'var(--bg-2)', borderLeft: '2px solid var(--taupe)' }}>
            <label style={{ display: 'grid', gridTemplateColumns: '24px 1fr', gap: 14, cursor: 'pointer', alignItems: 'start' }}>
              <input type="checkbox" checked={affirms.contact} onChange={e => setAffirms({ ...affirms, contact: e.target.checked })}
                style={{ width: 18, height: 18, accentColor: 'var(--ink)', marginTop: 2 }}/>
              <div style={{ fontSize: 14, lineHeight: 1.55, color: 'var(--ink-2)' }}>
                <strong style={{ color: 'var(--ink)' }}>Looping me in.</strong> When mutual interest is expressed between Hannah and another member, I am open to being contacted by either party's elder for a private conversation. (Optional but encouraged.)
              </div>
            </label>
          </div>

<div style={{ marginTop: 28, fontFamily: 'var(--serif)', fontSize: 16, fontStyle: 'italic', color: 'var(--ink-2)', lineHeight: 1.5, paddingLeft: 20, borderLeft: '2px solid var(--line-2)' }}>
            By submitting, I — Rev. Daniel M. Carrick — affirm before God and the leadership of Second Presbyterian Church (Greenville, SC) that the above is true to the best of my knowledge.
          </div>

<div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 36, paddingTop: 28, borderTop: '1px solid var(--line)' }}>
            <Btn kind="ghost" onClick={() => navigate('landing')}>I cannot commend at this time</Btn>
            <Btn kind="accent" onClick={() => setSubmitted(true)}
              disabled={!(affirms.member && affirms.commend)}
              style={!(affirms.member && affirms.commend) ? { opacity: 0.4, cursor: 'not-allowed' } : {}}>
              Submit commendation →
            </Btn>
          </div>
        </div>
      </div>

<Footer tweaks={tweaks} navigate={navigate} />
    </div>
  );
};

// ─── CHARACTER REFERENCE FORM ──────────────────────────────────────────
// Filled in by someone a member has named as a personal reference. The reference
// must themselves be a confirmed member in good standing at a network church —
// which may be a different church from the member they are speaking for.
const Reference = ({ tweaks, navigate }) => {
  const { Nav, Footer, Btn, Field, SectionLabel, inputStyle } = window;
  const [submitted, setSubmitted] = React.useState(false);
  const [relationship, setRelationship] = React.useState('');
  const [knownYears, setKnownYears] = React.useState('3-5');
  const [body, setBody] = React.useState('');
  const [confirm, setConfirm] = React.useState(false);

const member = window.HMN_DATA.MEMBERS[0]; // Hannah K.

if (submitted) return <ReferenceSubmitted tweaks={tweaks} navigate={navigate} member={member} />;

return (
    <div>
      <Nav tweaks={tweaks} navigate={navigate} active="" />
      <div style={{ maxWidth: 980, margin: '0 auto', padding: '64px 56px 96px' }}>

<div style={{ marginBottom: 40, padding: 20, background: 'var(--bg-2)', borderLeft: '2px solid var(--navy)' }}>
          <div className="mono" style={{ fontSize: 10, letterSpacing: '0.2em', textTransform: 'uppercase', color: 'var(--navy)', marginBottom: 6 }}>For Rachel Donovan</div>
          <div style={{ fontSize: 14, lineHeight: 1.6, color: 'var(--ink-2)' }}>
            <strong style={{ color: 'var(--ink)' }}>Hannah Kemper</strong> has named you as a character reference. You're someone who knows her well — and that is exactly what this is for. This is separate from confirming her church membership, which her pastor handles on his own.
          </div>
        </div>

<SectionLabel num="">Character Reference</SectionLabel>
        <h1 className="serif" style={{ fontSize: 56, lineHeight: 1.05, fontWeight: 500, margin: 0, maxWidth: 760, textWrap: 'balance' }}>
          Speak plainly for <em>someone you know.</em>
        </h1>
        <p style={{ fontSize: 16, lineHeight: 1.65, color: 'var(--ink-2)', marginTop: 24, maxWidth: 720, textWrap: 'pretty' }}>
          Tell us, in your own words, what kind of person Hannah is. There are no right answers — only honest ones. Your reference will appear on her profile under your name, alongside your home church.
        </p>

{/* Member summary card */}
        <div style={{ marginTop: 48, background: 'var(--paper)', border: '1px solid var(--line)', padding: 32, display: 'grid', gridTemplateColumns: '120px 1fr', gap: 28, alignItems: 'center' }}>
          <div style={{ width: 120, height: 120 }}>
            <window.Portrait seed={member.img} size={120} name={member.name} />
          </div>
          <div>
            <div className="mono" style={{ fontSize: 10, letterSpacing: '0.18em', textTransform: 'uppercase', color: 'var(--ink-3)', marginBottom: 6 }}>You are speaking for</div>
            <h3 className="serif" style={{ fontSize: 28, fontWeight: 500, margin: '0 0 6px' }}>Hannah Kemper, age 26</h3>
            <div style={{ fontSize: 14, color: 'var(--ink-2)' }}>{member.church} · {member.location}</div>
          </div>
        </div>

<div style={{ marginTop: 48, background: 'var(--paper)', border: '1px solid var(--line)', padding: '48px 56px' }}>
          <Field label="How do you know Hannah?" required>
            <input style={inputStyle} value={relationship} onChange={e => setRelationship(e.target.value)} placeholder="Former roommate and closest friend"/>
          </Field>

<div className="mono" style={{ fontSize: 10, letterSpacing: '0.2em', textTransform: 'uppercase', color: 'var(--taupe)', margin: '24px 0 14px' }}>How long have you known her?</div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 8, marginBottom: 32 }}>
            {[['<1','< 1 yr'],['1-2','1–2 yrs'],['3-5','3–5 yrs'],['6-10','6–10 yrs'],['10+','10+ yrs']].map(([v,l]) => (
              <button key={v} onClick={() => setKnownYears(v)} style={{
                padding: '11px 12px', background: knownYears === v ? 'var(--ink)' : 'var(--bg)',
                color: knownYears === v ? 'var(--paper)' : 'var(--ink)',
                border: '1px solid ' + (knownYears === v ? 'var(--ink)' : 'var(--line-2)'),
                fontFamily: 'var(--sans)', fontSize: 13, borderRadius: 2
              }}>{l}</button>
            ))}
          </div>

<Field label="Your reference" hint="2–4 sentences in your own voice. What is she like? What should someone considering her know?">
            <textarea style={{ ...inputStyle, minHeight: 140, resize: 'vertical', fontFamily: 'var(--serif)', fontSize: 16, lineHeight: 1.55 }}
              value={body} onChange={e => setBody(e.target.value)}
              placeholder="We shared an apartment for three years. Hannah is steady, unpretentious, and quick to serve where no one is watching…"/>
          </Field>

<div style={{ marginTop: 12, padding: 20, background: 'var(--bg-2)', borderLeft: '2px solid var(--taupe)' }}>
            <label style={{ display: 'grid', gridTemplateColumns: '24px 1fr', gap: 14, cursor: 'pointer', alignItems: 'start' }}>
              <input type="checkbox" checked={confirm} onChange={e => setConfirm(e.target.checked)}
                style={{ width: 18, height: 18, accentColor: 'var(--ink)', marginTop: 2 }}/>
              <div style={{ fontSize: 14, lineHeight: 1.55, color: 'var(--ink-2)' }}>
                <strong style={{ color: 'var(--ink)' }}>I am a member in good standing</strong> at a church in the network. I understand my own membership will be confirmed by my pastor or elder before this reference is published.
              </div>
            </label>
          </div>

<div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 36, paddingTop: 28, borderTop: '1px solid var(--line)' }}>
            <Btn kind="ghost" onClick={() => navigate('landing')}>I'd rather not</Btn>
            <Btn kind="accent" onClick={() => setSubmitted(true)}
              disabled={!confirm || !relationship}
              style={(!confirm || !relationship) ? { opacity: 0.4, cursor: 'not-allowed' } : {}}>
              Submit my reference →
            </Btn>
          </div>
        </div>
      </div>
      <Footer tweaks={tweaks} navigate={navigate} />
    </div>
  );
};

Object.assign(window, { Vouch, Reference });