// Member profile detail

const Profile = ({ tweaks, navigate, memberId }) => {
  const { Nav, Footer, Btn, Badge, Portrait, SectionLabel } = window;
  const [interestState, setInterestState] = React.useState('idle'); // idle | pending | mutual

  const member = window.HMN_DATA.MEMBERS.find(m => m.id === memberId) || window.HMN_DATA.MEMBERS[0];

  return (
    <div>
      <Nav tweaks={tweaks} navigate={navigate} active="browse" />

      {/* Back link */}
      <div style={{ maxWidth: 1240, margin: '0 auto', padding: '24px 56px 0' }}>
        <button onClick={() => navigate('browse')} style={{
          background: 'none', border: 'none', padding: 0, cursor: 'pointer',
          fontFamily: 'var(--mono)', fontSize: 11, letterSpacing: '0.16em', textTransform: 'uppercase', color: 'var(--ink-3)'
        }}>← Back to directory</button>
      </div>

      {/* Hero */}
      <section style={{ borderBottom: '1px solid var(--line)' }}>
        <div style={{ maxWidth: 1240, margin: '0 auto', padding: '40px 56px 64px', display: 'grid', gridTemplateColumns: '420px 1fr', gap: 64 }}>
          <div>
            <div style={{ aspectRatio: '4/5', overflow: 'hidden' }}>
              <Portrait seed={member.img} size={420} name={member.name} />
            </div>
            <div style={{ marginTop: 14, display: 'flex', gap: 8 }}>
              <div style={{ flex: 1, aspectRatio: '1/1', background: 'var(--bg-2)', border: '1px solid var(--line)' }}>
                <Portrait seed={member.img + 1} size={120} name={member.name} />
              </div>
              <div style={{ flex: 1, aspectRatio: '1/1', background: 'var(--bg-2)', border: '1px solid var(--line)' }}>
                <Portrait seed={member.img + 2} size={120} name={member.name} />
              </div>
              <div style={{ flex: 1, aspectRatio: '1/1', background: 'var(--bg-2)', border: '1px solid var(--line)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontFamily: 'var(--mono)', fontSize: 10, letterSpacing: '0.16em', color: 'var(--ink-3)', textTransform: 'uppercase' }}>+2</div>
            </div>
          </div>

          <div>
            <div style={{ display: 'flex', gap: 8, marginBottom: 18, flexWrap: 'wrap' }}>
              <Badge tone="vouched">✓ Commended</Badge>
              <Badge>Joined {member.joined}</Badge>
              <Badge>Active {member.lastActive}</Badge>
            </div>
            <h1 className="serif" style={{ fontSize: 68, lineHeight: 1.02, fontWeight: 500, margin: 0, whiteSpace: 'nowrap' }}>
              {member.name.replace(/\.$/, '')}<span style={{ color: 'var(--taupe)', fontStyle: 'italic' }}>, {member.age}</span>
            </h1>
            <div style={{ fontFamily: 'var(--serif)', fontSize: 24, fontStyle: 'italic', color: 'var(--ink-2)', marginTop: 16 }}>
              {member.vocation} · {member.location}
            </div>

            {/* Commendation panel */}
            <div style={{ marginTop: 32, padding: 24, background: 'var(--paper)', border: '1px solid var(--line)', borderLeft: '2px solid var(--navy)' }}>
              <div className="mono" style={{ fontSize: 10, letterSpacing: '0.2em', textTransform: 'uppercase', color: 'var(--ink-3)', marginBottom: 10 }}>Known and commended by</div>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', flexWrap: 'wrap', gap: 16 }}>
                <div>
                  <div className="serif" style={{ fontSize: 22, fontWeight: 500 }}>{member.elder}</div>
                  <div style={{ fontSize: 13, color: 'var(--ink-2)', marginTop: 2 }}>{member.elderRole} · {member.church}</div>
                </div>
                <div className="mono" style={{ fontSize: 10, letterSpacing: '0.14em', color: 'var(--taupe)', textTransform: 'uppercase' }}>
                  Open to elder-to-elder contact
                </div>
              </div>
            </div>

            {/* CTA */}
            <div style={{ display: 'flex', gap: 12, marginTop: 32, flexWrap: 'wrap' }}>
              {interestState === 'idle' && (
                <>
                  <Btn kind="primary" onClick={() => setInterestState('pending')}>Express interest</Btn>
                  <Btn kind="secondary">Save for prayer</Btn>
                  <Btn kind="ghost">Pass with grace</Btn>
                </>
              )}
              {interestState === 'pending' && (
                <div style={{ width: '100%', padding: 20, background: 'var(--bg-2)', borderLeft: '2px solid var(--taupe)' }}>
                  <div className="mono" style={{ fontSize: 10, letterSpacing: '0.18em', textTransform: 'uppercase', color: 'var(--taupe)', marginBottom: 6 }}>Interest sent · {member.name.split(' ')[0]} has 7 days to respond</div>
                  <div style={{ fontSize: 14, color: 'var(--ink-2)' }}>If she reciprocates, a private channel opens and we'll offer to introduce your elders.</div>
                </div>
              )}
            </div>
          </div>
        </div>
      </section>

      {/* Body grid */}
      <section style={{ borderBottom: '1px solid var(--line)', background: 'var(--paper)' }}>
        <div style={{ maxWidth: 1240, margin: '0 auto', padding: '72px 56px', display: 'grid', gridTemplateColumns: '2fr 1fr', gap: 64 }}>
          <main>
            <Block label="Testimony">
              <p className="serif" style={{ fontSize: 24, lineHeight: 1.45, fontStyle: 'italic', color: 'var(--ink)', margin: 0, textWrap: 'pretty' }}>
                {member.testimony}
              </p>
            </Block>

            <Block label="Family vision">
              <p style={{ fontSize: 17, lineHeight: 1.65, color: 'var(--ink-2)', margin: 0, textWrap: 'pretty' }}>
                {member.family} I want to build a home where Christ is the head and where the Word of God is read aloud at the table. I'd hope for a husband who leads in family worship, and I'd serve him gladly.
              </p>
            </Block>

            <Block label="Vocation & education">
              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 32 }}>
                <Datum t="Current vocation">{member.vocation}</Datum>
                <Datum t="Education">{member.education}</Datum>
              </div>
            </Block>

            <Block label="On the Standards">
              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 32 }}>
                <Datum t="Catechism">{member.catechism}</Datum>
                <Datum t="Confessional">Subscribes to her church's confession of faith with no exceptions</Datum>
              </div>
            </Block>

            <Block label="Character references">
              <p style={{ fontSize: 14, lineHeight: 1.6, color: 'var(--ink-3)', margin: '0 0 24px', maxWidth: 620, textWrap: 'pretty', fontStyle: 'italic' }}>
                People who know {member.name.split(' ')[0].replace(/\.$/, '')} personally and have agreed to speak for her character. Each is a confirmed member in good standing at a church in the network — not necessarily her own.
              </p>
              <div style={{ display: 'grid', gap: 16 }}>
                {member.references.map((r, i) => (
                  <div key={i} style={{ background: 'var(--bg)', border: '1px solid var(--line)', padding: 24, display: 'grid', gridTemplateColumns: '56px 1fr', gap: 20, alignItems: 'start' }}>
                    <div style={{ width: 56, height: 56, borderRadius: '50%', overflow: 'hidden' }}>
                      <Portrait seed={r.img} size={56} name={r.name} />
                    </div>
                    <div>
                      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', flexWrap: 'wrap', gap: 8 }}>
                        <div className="serif" style={{ fontSize: 20, fontWeight: 600, lineHeight: 1.2 }}>{r.name}</div>
                        <Badge tone="reference">✓ In good standing</Badge>
                      </div>
                      <div style={{ fontSize: 13, color: 'var(--ink-2)', marginTop: 3 }}>{r.relationship} · known {r.years}</div>
                      <div className="mono" style={{ fontSize: 10, letterSpacing: '0.12em', textTransform: 'uppercase', color: 'var(--ink-3)', marginTop: 6 }}>{r.church} · {r.presbytery}</div>
                      <p className="serif" style={{ fontSize: 17, lineHeight: 1.5, fontStyle: 'italic', color: 'var(--ink)', margin: '14px 0 0', textWrap: 'pretty' }}>“{r.quote}”</p>
                    </div>
                  </div>
                ))}
              </div>
            </Block>

            <Block label="A few favorites" last>
              <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
                {member.interests.map(i => (
                  <span key={i} style={{
                    padding: '8px 14px', background: 'var(--bg)', border: '1px solid var(--line)',
                    fontFamily: 'var(--serif)', fontSize: 17, fontStyle: 'italic'
                  }}>{i}</span>
                ))}
              </div>
            </Block>
          </main>

          <aside>
            <div style={{ background: 'var(--bg)', border: '1px solid var(--line)', padding: 28, position: 'sticky', top: 100 }}>
              <SidebarRow label="Home church" value={member.church} />
              <SidebarRow label="Denomination" value={member.presbytery} />
              <SidebarRow label="Location" value={member.location} />
              <SidebarRow label="Open to relocation" value={member.relocate} />
              <SidebarRow label="Joined" value={member.joined} />
              <SidebarRow label="Last active" value={member.lastActive} last />

              <div style={{ marginTop: 28, paddingTop: 24, borderTop: '1px solid var(--line)' }}>
                <div className="mono" style={{ fontSize: 10, letterSpacing: '0.18em', textTransform: 'uppercase', color: 'var(--taupe)', marginBottom: 14 }}>If interest is mutual</div>
                <ol style={{ paddingLeft: 18, margin: 0, fontSize: 13, lineHeight: 1.7, color: 'var(--ink-2)' }}>
                  <li>A private message channel opens.</li>
                  <li>We offer to introduce your two elders.</li>
                  <li>You set the pace — talk, pray, meet in person, court.</li>
                </ol>
              </div>
            </div>
          </aside>
        </div>
      </section>

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

const Block = ({ label, children, last }) => (
  <section style={{ marginBottom: last ? 0 : 48, paddingBottom: last ? 0 : 48, borderBottom: last ? 'none' : '1px solid var(--line)' }}>
    <div className="mono" style={{ fontSize: 10, letterSpacing: '0.22em', textTransform: 'uppercase', color: 'var(--taupe)', marginBottom: 18 }}>{label}</div>
    {children}
  </section>
);

const Datum = ({ t, children }) => (
  <div>
    <div className="mono" style={{ fontSize: 10, letterSpacing: '0.16em', textTransform: 'uppercase', color: 'var(--ink-3)', marginBottom: 6 }}>{t}</div>
    <div className="serif" style={{ fontSize: 19, lineHeight: 1.4, color: 'var(--ink)' }}>{children}</div>
  </div>
);

const SidebarRow = ({ label, value, last }) => (
  <div style={{ padding: '12px 0', borderBottom: last ? 'none' : '1px solid var(--line)' }}>
    <div className="mono" style={{ fontSize: 9, letterSpacing: '0.18em', textTransform: 'uppercase', color: 'var(--ink-3)', marginBottom: 3 }}>{label}</div>
    <div style={{ fontSize: 14, color: 'var(--ink)' }}>{value}</div>
  </div>
);

Object.assign(window, { Profile });