/* global React, Icon, nav, PageHero */

// ============ MINISTRIES ============
function MinistriesPage() {
  const ministries = [
    ['Sunday Worship', 'The gathering of the saints for prayer, the reading and preaching of Scripture, singing, and the ordinances.', 'Weekly'],
    ['Midweek Word', 'A focused, mid-week study walking carefully through whole books of the Bible — for every age.', 'Wednesdays'],
    ['Men of the Word', 'Men gathering for prayer, the Word, and accountability — being formed into the image of Christ.', 'Monthly'],
    ['Women in the Word', 'A community of women learning to handle Scripture rightly, pray faithfully, and disciple intentionally.', 'Monthly'],
    ['Family Discipleship', 'Equipping parents to be the primary disciplers of their children through gospel-centered home life.', 'Quarterly'],
    ['Benevolence & Care', 'Practical care for members in financial, medical, or pastoral need — coordinated by our deacons.', 'As Needed'],
    ['Local Outreach', 'Taking the gospel into Kempner and surrounding communities — door to door, neighbor to neighbor.', 'Ongoing'],
    ['Counseling', 'Biblical counseling for marriage, grief, anxiety, addiction, and the full range of pastoral concerns.', 'By Appointment'],
  ];
  return (
    <>
      <PageHero crumb="Grow / Ministries" image="assets/min-1.jpg" title="Ministries" verse="“Till we all come in the unity of the faith... unto a perfect man.” — Ephesians 4:13"/>
      <section className="section">
        <div className="wrap">
          <div className="section-head">
            <div className="ornament eyebrow">Where the Body Serves Together</div>
            <h2>Ministries Built on the Word</h2>
            <p className="sub">We labor through Scripture until the character of Christ is unmistakably visible in every member. These are the places that happens.</p>
          </div>
          <div className="grid-3">
            {ministries.map(([t, d, c]) => (
              <div key={t} className="card reveal">
                <div style={{display:'flex', justifyContent:'space-between', alignItems:'center', flexWrap:'wrap', gap:10, marginBottom:14}}>
                  <h3 style={{margin:0}}>{t}</h3>
                  <span style={{fontFamily:'Cinzel,serif', fontSize:10, letterSpacing:'0.18em', color:'var(--rich-gold)', border:'1px solid var(--rule)', padding:'4px 10px', textTransform:'uppercase'}}>{c}</span>
                </div>
                <p>{d}</p>
              </div>
            ))}
          </div>
          <div className="photo-strip reveal" style={{marginBottom:0}}>
            <div style={{backgroundImage:"url('assets/min-2.jpg')"}}></div>
            <div style={{backgroundImage:"url('assets/min-3.jpg')"}}></div>
            <div style={{backgroundImage:"url('assets/min-4.jpg')"}}></div>
          </div>
        </div>
      </section>

      {/* Three Streams trio */}
      <section className="section">
        <div className="wrap">
          <div className="section-head">
            <div className="ornament eyebrow">Three Streams. One Body.</div>
            <h2>Where Ministry Flows</h2>
            <p className="sub">Every ministry at Broken Barriers flows into one of three streams. They are not separate departments — they are how the one body of Christ moves together.</p>
          </div>
          <div className="trio">
            {[
              ['assets/min-5.jpg', 'STREAM I', 'Gathered Worship', 'Sunday is the spine of our week. Singing, Scripture, prayer, preaching, and the table — together, week after week, until He comes.', '— Hebrews 10:25'],
              ['assets/min-6.jpg', 'STREAM II', 'Discipling Word', 'Studies, small groups, family worship, counseling — every place where the Word of God works the character of Christ into a believer.', '— Colossians 1:28'],
              ['assets/min-7.jpg', 'STREAM III', 'Sent Mission', 'Outreach to our neighbors, support for missionaries, benevolence to the hurting, and church planting wherever Christ leads.', '— Matthew 28:19'],
            ].map(([img, tag, title, body, ref]) => (
              <article key={title} className="trio-card">
                <div className="trio-art">
                  <img loading="lazy" decoding="async" src={img} alt={title}/>
                  <div className="trio-art-tag">{tag}</div>
                </div>
                <div className="trio-body">
                  <h3>{title}</h3>
                  <p>{body}</p>
                  <div className="trio-verse">{ref}</div>
                </div>
              </article>
            ))}
          </div>
        </div>
      </section>

      {/* Featured ministry — two column */}
      <section className="section bg-cream">
        <div className="wrap">
          <div className="section-head">
            <div className="ornament eyebrow">Featured This Quarter</div>
            <h2>Men of the Word</h2>
            <p className="sub">Of all the ways we labor to build the body, none multiplies faster than men formed by the Word.</p>
          </div>
          <div className="grid-2" style={{gap:56, alignItems:'center'}}>
            <div className="reveal reveal-left">
              <div className="split-img" style={{aspectRatio:'4/5'}}>
                <img loading="lazy" decoding="async" src="assets/min-8.jpg" alt="Men in the Word"/>
              </div>
            </div>
            <div className="reveal reveal-right">
              <div className="eyebrow">A Monthly Gathering</div>
              <h3 style={{fontFamily:'Cinzel,serif', fontSize:30, color:'var(--crimson)', margin:'12px 0 18px'}}>Iron Sharpening Iron</h3>
              <p style={{color:'#2a221a', fontSize:16}}>One Saturday a month, our men gather at 8:00 AM for prayer, breakfast, and a focused study in Scripture — usually walking through a single biblical book over a year. It is not a program. It is brothers being formed together.</p>
              <ul style={{listStyle:'none', padding:0, marginTop:24}}>
                {[
                  ['Open Bible', 'A focused study walking through whole books of the Word.'],
                  ['Honest Talk', 'Sin, marriage, work, fatherhood — no pretending.'],
                  ['Personal Prayer', 'Real intercession for the men around the table.'],
                  ['Practical Service', 'Quarterly outreach projects serving the body and our neighbors.'],
                ].map(([k, v]) => (
                  <li key={k} style={{padding:'12px 0', borderBottom:'1px solid var(--rule)'}}>
                    <b style={{fontFamily:'Cinzel,serif', color:'var(--crimson)', letterSpacing:'0.08em'}}>{k}</b>
                    <div style={{color:'#2a221a', fontSize:14.5, marginTop:4}}>{v}</div>
                  </li>
                ))}
              </ul>
              <div style={{marginTop:28}}>
                <button className="btn btn-primary" onClick={() => nav('events')}>Next Gathering</button>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Photo break */}
      <section className="photo-break" style={{backgroundImage:"url('assets/min-9.jpg')"}}>
        <div className="photo-break-content">
          <div className="ornament eyebrow" style={{color:'var(--warm-gold)'}}>One Body. Many Members.</div>
          <div className="pull" style={{marginTop:24}}>
            “There are diversities of gifts, but the same Spirit... but the manifestation of the Spirit is given to every man to profit withal.”
          </div>
          <div className="attrib">— 1 Corinthians 12:4, 7</div>
        </div>
      </section>

      {/* Volunteer pathway */}
      <section className="section">
        <div className="wrap">
          <div className="section-head">
            <div className="ornament eyebrow">Finding Your Place</div>
            <h2>Four Steps to Get Involved</h2>
            <p className="sub">You don&rsquo;t need to be a member to serve. You don&rsquo;t need a special calling. You need a willing heart and a place to plug in.</p>
          </div>
          <div className="grid-4">
            {[
              ['01', 'Come Sunday', 'Worship with us. Get to know the body. Let us get to know you.'],
              ['02', 'Have a Conversation', 'Talk with a pastor or deacon about your gifts, interests, and availability.'],
              ['03', 'Try One Thing', 'Start with a single ministry — greeting, setup, hospitality, prayer team.'],
              ['04', 'Grow From There', 'Faithfulness in small things prepares us for greater service over time.'],
            ].map(([n, t, d]) => (
              <div key={t} className="card" style={{textAlign:'center'}}>
                <div style={{fontFamily:'Cinzel,serif', fontSize:36, fontWeight:700, color:'var(--rich-gold)', marginBottom:8, lineHeight:1}}>{n}</div>
                <h3 style={{marginBottom:10}}>{t}</h3>
                <p>{d}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* CTA */}
      <section className="give-band" style={{background:"linear-gradient(180deg, rgba(13,13,15,0.72), rgba(13,13,15,0.88)), url('assets/min-10.jpg') center/cover no-repeat, var(--obsidian)"}}>
        <div className="wrap-narrow">
          <div className="ornament eyebrow" style={{color:'var(--warm-gold)'}}>There Is a Place for You</div>
          <h2>Serving Starts With Showing Up</h2>
          <p>You don&rsquo;t need a title or a résumé — just a willing heart. Ask us where the need is, or come Sunday and see the body at work for yourself.</p>
          <div style={{display:'flex', gap:14, justifyContent:'center', flexWrap:'wrap'}}>
            <button className="btn btn-primary" onClick={() => nav('contact')}>Contact Us</button>
            <button className="btn btn-ghost" onClick={() => nav('visit')}>Plan Your Visit</button>
          </div>
        </div>
      </section>
    </>
  );
}

// ============ SERMONS ============
function SermonsPage() {
  const sermons = [
    ['EPH 4:11–16', 'The Original Design', 'Pastor Brian Goodsby', 'Apr 26, 2026', 'Week 6 · The Original Design'],
    ['EPH 4:1–10', 'One Body, One Spirit', 'Pastor Brian Goodsby', 'Apr 19, 2026', 'Week 5 · The Original Design'],
    ['EPH 3:14–21', 'Strengthened in the Inner Man', 'Pastor Brian Goodsby', 'Apr 12, 2026', 'Week 4 · The Original Design'],
    ['EPH 3:1–13', 'The Mystery Now Revealed', 'Pastor Brian Goodsby', 'Apr 5, 2026', 'Week 3 · The Original Design'],
    ['EPH 2:11–22', 'Tearing Down the Wall', 'Pastor Brian Goodsby', 'Mar 29, 2026', 'Week 2 · The Original Design'],
    ['EPH 2:1–10', 'By Grace, Through Faith', 'Pastor Brian Goodsby', 'Mar 22, 2026', 'Week 1 · The Original Design'],
  ];
  return (
    <>
      <PageHero crumb="Grow / Sermons" image="assets/serm-1.jpg" title="Sermons & Teaching" verse="“Preach the word; be instant in season, out of season.” — 2 Timothy 4:2"/>

      {/* Why we preach this way — numbered */}
      <section className="section">
        <div className="wrap">
          <div className="section-head">
            <div className="ornament eyebrow">A Pulpit Philosophy</div>
            <h2>Why We Preach the Way We Do</h2>
            <p className="sub">Three convictions about Scripture that shape every Sunday — and three convictions worth recovering in our generation.</p>
          </div>
          <div className="num-col">
            <div className="num-col-item">
              <div className="glyph">I.</div>
              <div className="num-art"><img loading="lazy" decoding="async" src="assets/serm-2.jpg" alt="Open Bible"/></div>
              <h3>Expository, Not Editorial</h3>
              <p>The text drives the sermon. We do not start with a topic and search for verses to defend it — we start with a passage and let it say what God wrote it to say.</p>
              <div className="ref">&mdash; Nehemiah 8:8</div>
            </div>
            <div className="num-col-item">
              <div className="glyph">II.</div>
              <div className="num-art"><img loading="lazy" decoding="async" src="assets/serm-3.jpg" alt="Sharing the Word"/></div>
              <h3>Books, Not Highlights</h3>
              <p>We preach whole books of the Bible, in order — including the hard parts. The Holy Spirit chose every word and arranged every chapter. We follow His lead, not our preferences.</p>
              <div className="ref">&mdash; 2 Timothy 3:16</div>
            </div>
            <div className="num-col-item">
              <div className="glyph">III.</div>
              <div className="num-art"><img loading="lazy" decoding="async" src="assets/serm-4.jpg" alt="Worship under preaching"/></div>
              <h3>Christ in Every Text</h3>
              <p>The whole Bible points to Jesus. Old Testament shadows, New Testament shouts. We are not done with a passage until we have seen the One it was written to magnify.</p>
              <div className="ref">&mdash; Luke 24:27</div>
            </div>
          </div>
        </div>
      </section>

      {/* Series archive */}
      <section className="section bg-cream">
        <div className="wrap">
          <div className="section-head">
            <div className="ornament eyebrow">From the Archive</div>
            <h2>Past Sermon Series</h2>
            <p className="sub">Every series we have walked through together — preached from a single book or theme, in sequence.</p>
          </div>
          <div className="grid-3">
            {[
              ['EPH', 'The Original Design', 'Spring 2026', '12 messages · Ephesians', 'In Progress'],
              ['1JN', 'That You May Know', 'Winter 2026', '8 messages · 1 John', 'Complete'],
              ['MAT', 'On the Mountain', 'Fall 2025', '14 messages · Matthew 5\u20137', 'Complete'],
              ['PSA', 'Hymns of the Heart', 'Summer 2025', '6 messages · Selected Psalms', 'Complete'],
              ['ROM', 'No Other Gospel', 'Spring 2025', '18 messages · Romans 1\u20138', 'Complete'],
              ['GEN', 'In the Beginning', 'Fall 2024', '10 messages · Genesis 1\u201311', 'Complete'],
            ].map(([ref, title, season, meta, status]) => (
              <div key={title} className="card">
                <div style={{display:'flex', justifyContent:'space-between', alignItems:'flex-start', marginBottom:14}}>
                  <div style={{fontFamily:'Cinzel,serif', fontSize:11, letterSpacing:'0.2em', color:'var(--rich-gold)', textTransform:'uppercase'}}>{season}</div>
                  <span style={{fontFamily:'Cinzel,serif', fontSize:9, letterSpacing:'0.18em', color: status === 'In Progress' ? 'var(--crimson)' : 'var(--muted)', border:'1px solid', borderColor: status === 'In Progress' ? 'var(--crimson)' : 'var(--rule)', padding:'4px 8px', textTransform:'uppercase'}}>{status}</span>
                </div>
                <div style={{fontFamily:'Cinzel,serif', fontSize:11, letterSpacing:'0.24em', color:'var(--warm-gold)', marginBottom:8}}>{ref}</div>
                <h3 style={{marginBottom:8}}>{title}</h3>
                <p style={{fontSize:14}}>{meta}</p>
                <a href="#sermons" className="more" style={{display:'inline-flex', alignItems:'center', gap:10, marginTop:16, fontFamily:'Cinzel,serif', letterSpacing:'0.18em', fontSize:11, color:'var(--crimson)', textTransform:'uppercase'}}>
                  <span style={{width:24, height:1.5, background:'var(--rich-gold)'}}></span>Listen
                </a>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* How to listen */}
      <section className="section">
        <div className="wrap">
          <div className="grid-2" style={{gap:56, alignItems:'center'}}>
            <div className="reveal reveal-left">
              <div className="split-img" style={{aspectRatio:'4/5'}}>
                <img loading="lazy" decoding="async" src="assets/serm-5.jpg" alt="Listening to the Word"/>
              </div>
            </div>
            <div className="reveal reveal-right">
              <div className="eyebrow">Take the Word With You</div>
              <h2 style={{fontSize:'clamp(28px,3.4vw,42px)', margin:'14px 0 18px', color:'var(--crimson)', fontFamily:'Cinzel,serif'}}>Listen Anywhere, Anytime</h2>
              <p style={{color:'#2a221a', fontSize:16}}>Whether you missed a Sunday, want to revisit a passage, or just want preaching in your earbuds during the commute — every message is free, archived, and waiting for you.</p>
              <div style={{display:'grid', gap:14, marginTop:24}}>
                {[
                  ['Apple Podcasts', 'Subscribe and never miss a sermon.', 'Subscribe'],
                  ['Spotify', 'Stream the latest series on your phone.', 'Open'],
                  ['YouTube', 'Watch full Sunday gatherings, week to week.', 'Watch'],
                  ['Email Sermon Recap', 'A short note Monday morning with the previous Sunday\'s text and key takeaways.', 'Subscribe'],
                ].map(([name, desc, cta]) => (
                  <div key={name} style={{display:'grid', gridTemplateColumns:'1fr auto', gap:18, alignItems:'center', padding:'18px 22px', background:'#fff', border:'1px solid var(--rule)'}}>
                    <div>
                      <b style={{fontFamily:'Cinzel,serif', color:'var(--crimson)', letterSpacing:'0.08em', fontSize:15}}>{name}</b>
                      <div style={{color:'var(--muted)', fontSize:14, marginTop:4}}>{desc}</div>
                    </div>
                    <button className="btn btn-gold" style={{padding:'10px 18px', fontSize:11}}>{cta}</button>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Photo break */}
      <section className="photo-break" style={{backgroundImage:"url('assets/serm-6b.jpg')"}}>
        <div className="photo-break-content">
          <div className="ornament eyebrow" style={{color:'var(--warm-gold)'}}>Romans 10:17</div>
          <div className="pull" style={{marginTop:24}}>
            “So then faith cometh by hearing, and hearing by the word of God.”
          </div>
        </div>
      </section>

    </>
  );
}

// ============ EVENTS ============
function EventsPage() {
  const events = [
    ['MAY', '17', 'Sunday', 'Members\u2019 Meeting', 'After morning service · Fellowship Hall', 'Quarterly business meeting open to covenant members.'],
    ['MAY', '24', 'Sunday', 'Baptism Sunday', '10:00 AM · Worship Gathering', 'Celebrating new believers in obedience to Christ.'],
    ['JUN', '06', 'Saturday', 'Men of the Word Breakfast', '8:00 AM · Fellowship Hall', 'A morning of prayer, the Word, and breakfast together.'],
    ['JUN', '14', 'Sunday', 'Lord\'s Supper', '10:00 AM · Worship Gathering', 'We share the table together, remembering Christ.'],
    ['JUN', '21', 'Sunday', 'New Members Class', '12:30 PM · Fellowship Hall', 'For anyone interested in covenant membership.'],
    ['JUL', '04', 'Saturday', 'Family Cookout', '4:00 PM · Church Grounds', 'An afternoon of fellowship for our church family.'],
  ];
  return (
    <>
      <PageHero crumb="Grow / Events" image="assets/evt-1.jpg" title="Upcoming Events" verse="“And let us consider one another to provoke unto love and to good works.” — Hebrews 10:24"/>
      <section className="section">
        <div className="wrap">
          <div className="section-head">
            <div className="ornament eyebrow">Mark Your Calendar</div>
            <h2>The Life of the Church</h2>
          </div>
          <div style={{display:'grid', gap:16}}>
            {events.map(([m, d, day, title, where, desc]) => (
              <div key={title} className="event reveal">
                <div className="date">
                  <div className="m">{m}</div>
                  <div className="d">{d}</div>
                  <div style={{fontSize:11, color:'var(--muted)', fontFamily:'Cinzel,serif', letterSpacing:'0.15em', marginTop:4}}>{day}</div>
                </div>
                <div>
                  <h4>{title}</h4>
                  <div className="where">{where}</div>
                  <p style={{color:'#2a221a', fontSize:14, margin:'6px 0 0'}}>{desc}</p>
                </div>
                <button className="btn btn-gold" style={{padding:'10px 18px', fontSize:11}}>Details</button>
              </div>
            ))}
          </div>
          <div className="photo-strip reveal" style={{marginTop:48, marginBottom:0}}>
            <div style={{backgroundImage:"url('assets/evt-2.jpg')"}}></div>
            <div style={{backgroundImage:"url('assets/evt-3.jpg')"}}></div>
            <div style={{backgroundImage:"url('assets/evt-4.jpg')"}}></div>
          </div>
        </div>
      </section>

      {/* Past events collage */}
      <section className="section">
        <div className="wrap">
          <div className="section-head">
            <div className="ornament eyebrow">Just Looking Back</div>
            <h2>Recent Gatherings</h2>
            <p className="sub">A few moments from the past month of life together at Broken Barriers.</p>
          </div>
          <div className="collage-3">
            <div>
              <img loading="lazy" decoding="async" src="assets/evt-5.jpg" alt="Easter Sunday worship"/>
              <div className="cap">Easter Sunday Worship</div>
            </div>
            <div>
              <img loading="lazy" decoding="async" src="assets/evt-6.jpg" alt="Midweek study"/>
              <div className="cap">Midweek Study</div>
            </div>
            <div>
              <img loading="lazy" decoding="async" src="assets/evt-7.jpg" alt="Men's breakfast"/>
              <div className="cap">Men&rsquo;s Breakfast</div>
            </div>
          </div>
        </div>
      </section>

      {/* Featured event — two column */}
      <section className="section bg-cream">
        <div className="wrap">
          <div className="section-head">
            <div className="ornament eyebrow">Featured This Month</div>
            <h2>Baptism Sunday</h2>
            <p className="sub">A few times a year, we set aside a Sunday to celebrate new believers in obedience to Christ.</p>
          </div>
          <div className="grid-2" style={{gap:56, alignItems:'center'}}>
            <div className="reveal reveal-left">
              <div className="split-img" style={{aspectRatio:'4/5'}}>
                <img loading="lazy" decoding="async" src="assets/evt-8.jpg" alt="Baptism celebration"/>
              </div>
            </div>
            <div className="reveal reveal-right">
              <div style={{display:'flex', gap:24, alignItems:'baseline', marginBottom:20}}>
                <div style={{fontFamily:'Cinzel,serif', fontSize:64, fontWeight:700, color:'var(--rich-gold)', lineHeight:1}}>24</div>
                <div>
                  <div style={{fontFamily:'Cinzel,serif', fontSize:14, letterSpacing:'0.2em', color:'var(--crimson)', textTransform:'uppercase'}}>May · Sunday</div>
                  <div style={{color:'var(--muted)', fontSize:14}}>10:00 AM · Worship Gathering</div>
                </div>
              </div>
              <h3 style={{fontFamily:'Cinzel,serif', fontSize:28, color:'var(--obsidian)', margin:'10px 0 18px'}}>“Buried With Him in Baptism”</h3>
              <p style={{color:'#2a221a', fontSize:16}}>This Sunday, we&rsquo;ll celebrate several members of our church publicly identifying with Christ through baptism. Friends, family, and any guest is warmly invited to witness this beautiful ordinance of the church.</p>
              <ul style={{listStyle:'none', padding:0, marginTop:20}}>
                {[
                  ['Lunch to Follow', 'A church-wide potluck after the service — bring a dish to share.'],
                  ['Family Friendly', 'Children of every age are welcome in the gathering with their families.'],
                  ['Considering Baptism?', 'Talk with a pastor — there&rsquo;s still time to be added to the list.'],
                ].map(([k, v]) => (
                  <li key={k} style={{padding:'10px 0', borderBottom:'1px solid var(--rule)'}}>
                    <b style={{fontFamily:'Cinzel,serif', color:'var(--crimson)', letterSpacing:'0.06em'}}>{k}</b>
                    <span style={{color:'#2a221a', fontSize:14.5, marginLeft:14}}>· {v}</span>
                  </li>
                ))}
              </ul>
              <div style={{marginTop:28, display:'flex', gap:14, flexWrap:'wrap'}}>
                <button className="btn btn-primary" onClick={() => nav('prayer')}>Ask About Baptism</button>
                <button className="btn btn-ghost" style={{color:'var(--crimson)', boxShadow:'0 0 0 1px var(--crimson) inset'}} onClick={() => nav('visit')}>Plan to Attend</button>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Photo break */}
      <section className="photo-break" style={{backgroundImage:"url('assets/evt-9.jpg')"}}>
        <div className="photo-break-content">
          <div className="ornament eyebrow" style={{color:'var(--warm-gold)'}}>Hebrews 10:24</div>
          <div className="pull" style={{marginTop:24}}>
            “And let us consider one another to provoke unto love and to good works: not forsaking the assembling of ourselves together.”
          </div>
        </div>
      </section>

      {/* Annual rhythm */}
      <section className="section">
        <div className="wrap">
          <div className="section-head">
            <div className="ornament eyebrow">A Year in the Life</div>
            <h2>The Rhythm of Our Calendar</h2>
            <p className="sub">Beyond the weekly gathering, these are the seasonal rhythms that shape life together at Broken Barriers.</p>
          </div>
          <div className="grid-4">
            {[
              ['Winter', 'Prayer & Fasting Week', 'A week of corporate prayer to start the new year — focused on the Lord, not resolutions.'],
              ['Spring', 'Baptism & New Members', 'A season of welcoming new believers and covenant members into the church family.'],
              ['Summer', 'Family Camp & Cookouts', 'Slower months filled with family fellowship, outdoor gatherings, and intergenerational time.'],
              ['Fall', 'Doctrine Conference', 'A weekend devoted to teaching the great doctrines of the faith — open to the wider community.'],
            ].map(([season, title, desc]) => (
              <div key={title} className="card">
                <div className="eyebrow" style={{color:'var(--rich-gold)'}}>{season}</div>
                <h3 style={{marginTop:12, marginBottom:10}}>{title}</h3>
                <p>{desc}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* CTA */}
      <section className="give-band" style={{background:"linear-gradient(180deg, rgba(13,13,15,0.72), rgba(13,13,15,0.92)), url('assets/evt-10.jpg') center/cover no-repeat, var(--obsidian)"}}>
        <div className="wrap-narrow">
          <div className="ornament eyebrow" style={{color:'var(--warm-gold)'}}>Come Be Part of It</div>
          <h2>The Best Events Are the Ones You Attend</h2>
          <p>Have a question about something on the calendar, or want to know what to expect before you come? Reach out — or simply join us this Sunday and start there.</p>
          <div style={{display:'flex', gap:14, justifyContent:'center', flexWrap:'wrap'}}>
            <button className="btn btn-primary" onClick={() => nav('contact')}>Contact Us</button>
            <button className="btn btn-ghost" onClick={() => nav('visit')}>Plan Your Visit</button>
          </div>
        </div>
      </section>
    </>
  );
}

// ============ GIVE ============
function GivePage() {
  const [amount, setAmount] = React.useState('100');
  const [freq, setFreq] = React.useState('Once');
  return (
    <>
      <PageHero crumb="Give" image="assets/give-1.jpg" title="Generosity" verse="“God loveth a cheerful giver.” — 2 Corinthians 9:7"/>
      <section className="section">
        <div className="wrap">
          <div className="grid-2" style={{gap:56, alignItems:'start'}}>
            <div className="reveal reveal-left">
              <div className="split-img" style={{aspectRatio:'5/3', marginBottom:32}}>
                <img loading="lazy" decoding="async" src="assets/give-2.jpg" alt="Giving an offering"/>
              </div>
              <div className="eyebrow">Partner With Us</div>
              <h2 style={{fontSize:'clamp(28px,3.4vw,42px)', margin:'14px 0 18px'}}>Giving as Worship</h2>
              <p style={{color:'#2a221a', fontSize:17}}>Every gift directly supports the preaching of the Word, the care of our members, the training of leaders, and gospel work in Kempner and beyond. Broken Barriers Church is a 501(c)(3) religious organization — all contributions are tax-deductible.</p>

              <h3 style={{fontFamily:'Cinzel,serif', color:'var(--crimson)', fontSize:22, marginTop:36, marginBottom:12}}>Where Your Gift Goes</h3>
              <ul style={{listStyle:'none', padding:0}}>
                {[
                  ['Preaching & Teaching', 'Faithful exposition of the Word every Sunday and midweek.'],
                  ['Discipleship & Ministry', 'Curriculum, training, and resources for every age.'],
                  ['Benevolence & Care', 'Practical help for members and neighbors in real need.'],
                  ['Outreach & Mission', 'Gospel work in our community and beyond.'],
                ].map(([k, v]) => (
                  <li key={k} style={{padding:'14px 0', borderBottom:'1px solid var(--rule)'}}>
                    <b style={{fontFamily:'Cinzel,serif', color:'var(--crimson)', letterSpacing:'0.08em'}}>{k}</b><div style={{color:'var(--muted)', marginTop:4}}>{v}</div>
                  </li>
                ))}
              </ul>

              <h3 style={{fontFamily:'Cinzel,serif', color:'var(--crimson)', fontSize:22, marginTop:32, marginBottom:12}}>Other Ways to Give</h3>
              <p className="muted" style={{fontSize:14}}>· In-person during Sunday gathering<br/>· By mail: 815 Private Road 4717, Kempner, TX 76539<br/>· Stock, real estate, or planned gifts — contact our Treasurer</p>
            </div>

            <div className="reveal reveal-right" style={{background:'#fff', border:'1px solid var(--rule)', padding:36, boxShadow:'var(--shadow-md)', position:'sticky', top:120}}>
                            <div className="eyebrow">Give Online</div>
              <h3 style={{fontFamily:'Cinzel,serif', fontSize:26, color:'var(--obsidian)', margin:'10px 0 24px'}}>Your Gift, Your Worship</h3>

              <div style={{marginBottom:18}}>
                <label style={{fontFamily:'Cinzel,serif', fontSize:11, letterSpacing:'0.2em', color:'var(--obsidian)', textTransform:'uppercase', marginBottom:10, display:'block'}}>Frequency</label>
                <div style={{display:'grid', gridTemplateColumns:'1fr 1fr 1fr', gap:8}}>
                  {['Once','Weekly','Monthly'].map(f => (
                    <button key={f} onClick={() => setFreq(f)} style={{padding:'10px 0', border:'1px solid var(--rule)', background: freq===f ? 'var(--crimson)' : '#fff', color: freq===f ? '#fff' : 'var(--ink)', fontFamily:'Cinzel,serif', fontSize:12, letterSpacing:'0.12em', cursor:'pointer', textTransform:'uppercase'}}>{f}</button>
                  ))}
                </div>
              </div>

              <div style={{marginBottom:18}}>
                <label style={{fontFamily:'Cinzel,serif', fontSize:11, letterSpacing:'0.2em', color:'var(--obsidian)', textTransform:'uppercase', marginBottom:10, display:'block'}}>Amount</label>
                <div style={{display:'grid', gridTemplateColumns:'repeat(4,1fr)', gap:8, marginBottom:10}}>
                  {['25','50','100','250'].map(a => (
                    <button key={a} onClick={() => setAmount(a)} style={{padding:'12px 0', border:'1px solid var(--rule)', background: amount===a ? 'var(--parchment-soft)' : '#fff', borderColor: amount===a ? 'var(--crimson)' : 'var(--rule)', color: amount===a ? 'var(--crimson)' : 'var(--ink)', fontFamily:'Cinzel,serif', fontSize:15, cursor:'pointer', fontWeight:700}}>${a}</button>
                  ))}
                </div>
                <div style={{position:'relative'}}>
                  <span style={{position:'absolute', left:14, top:'50%', transform:'translateY(-50%)', color:'var(--muted)', fontFamily:'Cinzel,serif'}}>$</span>
                  <input type="text" value={amount} onChange={e=>setAmount(e.target.value.replace(/[^0-9]/g,''))} style={{width:'100%', padding:'12px 14px 12px 28px', border:'1px solid var(--rule)', fontSize:16, fontFamily:'Cinzel,serif'}}/>
                </div>
              </div>

              <div className="field"><label>Designation</label>
                <select><option>General Fund</option><option>Benevolence</option><option>Outreach & Mission</option><option>Building</option></select>
              </div>

              <button className="btn btn-primary" style={{width:'100%', justifyContent:'center', marginTop:14}}>
                Give ${amount || '0'} {freq !== 'Once' && `· ${freq}`}
              </button>
              <p style={{fontSize:12, color:'var(--muted)', textAlign:'center', marginTop:14, marginBottom:0}}>Secure giving · Tax-deductible · 501(c)(3)</p>
            </div>
          </div>
        </div>
      </section>

      {/* Impact section */}
      <section className="section bg-cream">
        <div className="wrap">
          <div className="section-head">
            <div className="ornament eyebrow">Your Gift in Real Terms</div>
            <h2>What Generosity Actually Does</h2>
            <p className="sub">We are a small, lean church. Every dollar moves directly into the work of the gospel — never to bloated overhead or empty programs.</p>
          </div>
          <div className="grid-4">
            {[
              ['$25', 'Provides a study Bible for a new believer or family member walking into the gathering for the first time.'],
              ['$100', 'Underwrites a full week of midweek study materials, books, and printed resources for the whole church.'],
              ['$250', 'Funds a month of benevolence — direct, confidential help for a member in financial need.'],
              ['$1,000', 'Sends our pastors and elders to a conference, training, or pastoral visit — equipping the men who shepherd you.'],
            ].map(([amt, desc]) => (
              <div key={amt} className="card" style={{textAlign:'center'}}>
                <div style={{fontFamily:'Cinzel,serif', fontSize:38, fontWeight:700, color:'var(--crimson)', marginBottom:10}}>{amt}</div>
                <p style={{fontSize:14}}>{desc}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Stat strip + script quote */}
      <section className="section">
        <div className="wrap">
          <div className="stat-strip">
            <div>
              <div className="stat-num">87&cent;</div>
              <div className="stat-label">Of Every Dollar to Ministry</div>
            </div>
            <div>
              <div className="stat-num">0%</div>
              <div className="stat-label">To Marketing &amp; Lights</div>
            </div>
            <div>
              <div className="stat-num">100%</div>
              <div className="stat-label">Tax-Deductible Giving</div>
            </div>
            <div>
              <div className="stat-num">4&times;</div>
              <div className="stat-label">Quarterly Member Reports</div>
            </div>
          </div>
        </div>
      </section>

      {/* Photo break */}
      <section className="photo-break" style={{backgroundImage:"url('assets/give-3.jpg')"}}>
        <div className="photo-break-content">
          <div className="ornament eyebrow" style={{color:'var(--warm-gold)'}}>2 Corinthians 9:7</div>
          <div className="pull" style={{marginTop:24}}>
            “Every man according as he purposeth in his heart, so let him give; not grudgingly, or of necessity: for God loveth a cheerful giver.”
          </div>
        </div>
      </section>

      {/* Transparency */}
      <section className="section">
        <div className="wrap">
          <div className="grid-2" style={{gap:56, alignItems:'center'}}>
            <div className="reveal reveal-left">
              <div className="eyebrow">Transparency &amp; Stewardship</div>
              <h2 style={{fontSize:'clamp(28px,3.4vw,42px)', margin:'14px 0 18px', color:'var(--crimson)', fontFamily:'Cinzel,serif'}}>Open Books. Honest Stewardship.</h2>
              <p style={{color:'#2a221a', fontSize:16}}>Broken Barriers Church is a Texas nonprofit religious corporation, governed by a board of directors and overseen by qualified deacons. We believe stewardship is a sacred trust — and our financial practices reflect that.</p>
              <ul style={{listStyle:'none', padding:0, marginTop:20}}>
                {[
                  ['Annual Audit', 'Our books are reviewed annually by an independent CPA.'],
                  ['Member Reporting', 'A full financial report is presented to members each quarter.'],
                  ['Deacon Oversight', 'Our Treasurer and Secretary are biblically qualified deacons.'],
                  ['No Personal Benefit', 'No elder, pastor, or director receives undisclosed compensation.'],
                ].map(([k, v]) => (
                  <li key={k} style={{padding:'12px 0', borderBottom:'1px solid var(--rule)'}}>
                    <b style={{fontFamily:'Cinzel,serif', color:'var(--crimson)', letterSpacing:'0.08em'}}>{k}</b>
                    <span style={{color:'#2a221a', fontSize:14.5, marginLeft:14}}>· {v}</span>
                  </li>
                ))}
              </ul>
              <div style={{marginTop:28}}>
                <button className="btn btn-gold" onClick={() => nav('contact')}>Request a Financial Report</button>
              </div>
            </div>
            <div className="reveal reveal-right">
              <div className="split-img" style={{aspectRatio:'4/5'}}>
                <img loading="lazy" decoding="async" src="assets/give-4.jpg" alt="Stewardship in community"/>
              </div>
            </div>
          </div>
        </div>
      </section>
    </>
  );
}

window.MinistriesPage = MinistriesPage;
window.SermonsPage = SermonsPage;
window.EventsPage = EventsPage;
window.GivePage = GivePage;