// Partner churches directory — public view

const Churches = ({ tweaks, navigate }) => {
  const { Nav, Footer, SectionLabel } = window;
  const churches = window.HMN_DATA.CHURCHES_VOUCHED;
  const [search, setSearch] = React.useState('');

  // Filter churches
  const filtered = search
    ? churches.filter(c => 
        c.name.toLowerCase().includes(search.toLowerCase()) ||
        c.city.toLowerCase().includes(search.toLowerCase()) ||
        c.presbytery.toLowerCase().includes(search.toLowerCase())
      )
    : churches;

  // Group by state
  const byState = filtered.reduce((acc, c) => {
    const state = c.city.split(', ')[1] || 'Other';
    if (!acc[state]) acc[state] = [];
    acc[state].push(c);
    return acc;
  }, {});

  const states = Object.keys(byState).sort();

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

      {/* Header */}
      <section style={{ borderBottom: '1px solid var(--line)' }}>
        <div style={{ maxWidth: 1100, margin: '0 auto', padding: '72px 56px 56px' }}>
          <SectionLabel num="">Partner Churches</SectionLabel>
          <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 64, alignItems: 'end' }}>
            <h1 className="serif" style={{ fontSize: 64, lineHeight: 1.04, fontWeight: 500, margin: 0, textWrap: 'balance' }}>
              Confessional churches that <em>commend</em> their members.
            </h1>
            <p style={{ fontSize: 16, lineHeight: 1.65, color: 'var(--ink-2)', margin: 0, textWrap: 'pretty' }}>
              These {churches.length} congregations have been approved by the Magnalia team. Each church's leadership commends its members — confirming they are in good standing, and known to be mature and godly — before they join the network.
            </p>
          </div>
        </div>
      </section>

      {/* Search */}
      <section style={{ borderBottom: '1px solid var(--line)' }}>
        <div style={{ maxWidth: 1100, margin: '0 auto', padding: '32px 56px' }}>
          <input
            type="text"
            placeholder="Search by church name, city, or denomination..."
            value={search}
            onChange={e => setSearch(e.target.value)}
            style={{
              width: '100%',
              padding: '14px 18px',
              fontSize: 16,
              fontFamily: 'var(--serif)',
              border: '1px solid var(--line-2)',
              borderRadius: 2,
              background: 'var(--paper)'
            }}
          />
        </div>
      </section>

      {/* Churches list */}
      <section>
        <div style={{ maxWidth: 1100, margin: '0 auto', padding: '64px 56px 96px' }}>
          {filtered.length === 0 && (
            <div style={{ textAlign: 'center', padding: '64px 0', color: 'var(--ink-3)' }}>
              <div className="serif" style={{ fontSize: 24, marginBottom: 12 }}>No churches found</div>
              <p style={{ fontSize: 15 }}>Try a different search term, or <button onClick={() => setSearch('')} style={{ background: 'none', border: 'none', color: 'var(--ink)', textDecoration: 'underline', cursor: 'pointer', font: 'inherit' }}>clear the search</button>.</p>
            </div>
          )}
          {states.map(state => (
            <div key={state} style={{ marginBottom: 48 }}>
              <div className="mono" style={{ fontSize: 11, letterSpacing: '0.2em', textTransform: 'uppercase', color: 'var(--taupe)', marginBottom: 20, paddingBottom: 12, borderBottom: '1px solid var(--line)' }}>
                {state}
              </div>
              <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: '20px 40px' }}>
                {byState[state].map(c => (
                  <div key={c.name} style={{ padding: '16px 0', borderBottom: '1px solid var(--line)' }}>
                    <div className="serif" style={{ fontSize: 20, fontWeight: 500, marginBottom: 6 }}>{c.name}</div>
                    <div style={{ fontSize: 13, color: 'var(--ink-2)' }}>
                      {c.city} · {c.presbytery}
                    </div>
                  </div>
                ))}
              </div>
            </div>
          ))}

          <div style={{ marginTop: 64, padding: 32, background: 'var(--bg-2)', borderLeft: '2px solid var(--ink)' }}>
            <div className="serif" style={{ fontSize: 20, fontWeight: 600, marginBottom: 12 }}>
              Don't see your church?
            </div>
            <p style={{ fontSize: 15, lineHeight: 1.6, color: 'var(--ink-2)', marginBottom: 20 }}>
              If you're a pastor, elder, or member, you can apply to onboard your church. We'll schedule a 30-minute video call to walk through the mission and approve the congregation.
            </p>
            <button onClick={() => navigate('apply')} style={{
              background: 'var(--ink)', color: 'var(--paper)', border: 'none', padding: '11px 20px',
              fontFamily: 'var(--mono)', fontSize: 11, letterSpacing: '0.16em', textTransform: 'uppercase',
              cursor: 'pointer', borderRadius: 2
            }}>
              Onboard your church →
            </button>
          </div>
        </div>
      </section>

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

Object.assign(window, { Churches });