/* global React, PageHero */

function GalleryPage() {
  const [filter, setFilter] = React.useState('All');

  const photos = [
    ['assets/gal-2.jpg', 'Hand Lifted in Worship', 'Worship'],
    ['assets/gal-3.jpg', 'Gathered in Praise', 'Worship'],
    ['assets/gal-4.jpg', 'Sunday Worship', 'Worship'],
    ['assets/gal-5.jpg', 'Praising Together', 'Worship'],
    ['assets/gal-6.jpg', 'Lifted Before the Cross', 'Worship'],
    ['assets/gal-7.jpg', 'A Quiet Prayer', 'Prayer'],
    ['assets/gal-8.jpg', 'On Bended Knee', 'Prayer'],
    ['assets/gal-9.jpg', 'Prayer & Scripture', 'Prayer'],
    ['assets/gal-10.jpg', 'Praying Together', 'Prayer'],
    ['assets/gal-11.jpg', 'In the Word', 'The Word'],
    ['assets/gal-12.jpg', 'God\'s Love for Us', 'The Word'],
    ['assets/gal-13.jpg', 'Small Group Fellowship', 'Fellowship'],
    ['assets/gal-14.jpg', 'Bible Study Group', 'Fellowship'],
    ['assets/gal-15.jpg', 'Hope at Sunset', 'The Cross'],
    ['assets/gal-16.jpg', 'The Cross Stands', 'The Cross'],
    ['assets/gal-17.jpg', 'Held High', 'The Cross'],
    ['assets/gal-18.jpg', 'The Risen Christ', 'The Cross'],
  ];

  const categories = ['All', 'Worship', 'Prayer', 'Fellowship', 'The Word', 'The Cross'];
  const visible = filter === 'All' ? photos : photos.filter(p => p[2] === filter);

  return (
    <>
      <PageHero crumb="Grow / Photo Gallery" image="assets/gal-1.jpg" title="Photo Gallery" verse="“Declare his glory among the heathen, his wonders among all people.” — Psalm 96:3"/>

      <section className="section">
        <div className="wrap">
          <div className="section-head" style={{marginBottom:36}}>
            <div className="ornament eyebrow">Discover the Church</div>
            <h2 style={{marginTop:14}}>Broken Barriers in Pictures</h2>
            <p className="sub">A growing collection from our gatherings, our people, and the gospel work Christ is doing in Kempner.</p>
          </div>

          <div className="gallery-filters">
            {categories.map(c => (
              <button key={c}
                      className={'gallery-filter' + (filter === c ? ' active' : '')}
                      onClick={() => setFilter(c)}>{c}</button>
            ))}
          </div>

          <div className="gallery-grid">
            {visible.map(([src, label, cat], i) => (
              <div key={src + i} className={'gallery-tile' + (i === 0 && filter === 'All' ? ' wide' : '')}>
                <img loading="lazy" decoding="async" src={src} alt={label}/>
                <div className="cap">{label}</div>
              </div>
            ))}
          </div>

          {visible.length === 0 && (
            <div className="center" style={{padding:'60px 0', color:'var(--muted)'}}>No photos in this category yet.</div>
          )}

          <div className="center" style={{marginTop:64, padding:'40px 32px', background:'var(--parchment-soft)', border:'1px solid var(--rule)'}}>
            <div className="eyebrow">Have a Photo to Share?</div>
            <h3 style={{fontFamily:'Cinzel,serif', fontSize:24, color:'var(--crimson)', margin:'12px 0 10px'}}>Submit Photos from Sundays &amp; Events</h3>
            <p className="muted" style={{maxWidth:520, margin:'0 auto 20px'}}>If you snapped a moment we should add to our gallery, send it our way and we&rsquo;ll add it after review.</p>
            <button className="btn btn-primary" onClick={() => location.hash = '#contact'}>Submit a Photo</button>
          </div>
        </div>
      </section>

      {/* Photo break */}
      <section className="photo-break" style={{backgroundImage:"url('assets/gal-19.jpg')"}}>
        <div className="photo-break-content">
          <div className="ornament eyebrow" style={{color:'var(--warm-gold)'}}>Psalm 96:3</div>
          <div className="pull" style={{marginTop:24}}>
            “Declare his glory among the heathen, his wonders among all people.”
          </div>
        </div>
      </section>

      {/* Highlights — two column */}
      <section className="section bg-cream">
        <div className="wrap">
          <div className="section-head">
            <div className="ornament eyebrow">Behind the Pictures</div>
            <h2>Stories From This Year</h2>
            <p className="sub">A few moments from the past year that shaped the body of Christ at Broken Barriers.</p>
          </div>
          <div className="grid-2" style={{gap:24}}>
            {[
              ['assets/gal-20.jpg', 'Easter Sunrise', 'April 2026', 'A gathering before dawn on the church grounds — singing, prayer, and the proclamation of the empty tomb.'],
              ['assets/gal-21.jpg', 'Spring Baptisms', 'May 2026', 'Five members publicly identifying with Christ through baptism, followed by a church-wide lunch.'],
              ['assets/gal-22.jpg', 'Men of the Word Retreat', 'February 2026', 'A weekend in the Hill Country devoted to prayer, Scripture, and brotherhood.'],
              ['assets/gal-23.jpg', 'Christmas Eve Candlelight', 'December 2025', 'A quiet service of Scripture, song, and candlelight — anchored in the incarnation of the Son of God.'],
            ].map(([img, title, when, desc]) => (
              <article key={title} className="teach-card">
                <div className="teach-art"><img loading="lazy" decoding="async" src={img} alt={title}/></div>
                <div style={{padding:'28px 28px 22px'}}>
                  <div className="eyebrow" style={{color:'var(--rich-gold)'}}>{when}</div>
                  <h3 style={{marginTop:8, marginBottom:10}}>{title}</h3>
                  <p style={{color:'var(--muted)', margin:0}}>{desc}</p>
                </div>
              </article>
            ))}
          </div>
        </div>
      </section>

      {/* CTA */}
      <section className="give-band" style={{background:"linear-gradient(180deg, rgba(13,13,15,0.78), rgba(13,13,15,0.92)), url('assets/gal-24.jpg') center/cover no-repeat, var(--obsidian)"}}>
        <div className="wrap-narrow">
          <div className="ornament eyebrow" style={{color:'var(--warm-gold)'}}>Your Face Belongs Here Too</div>
          <h2>Step Into the Picture With Us</h2>
          <p>Behind every photo is a person who once walked in as a stranger. Ask us anything before you come, or simply take that first step and join us this Sunday.</p>
          <div style={{display:'flex', gap:14, justifyContent:'center', flexWrap:'wrap'}}>
            <button className="btn btn-primary" onClick={() => location.hash = '#contact'}>Contact Us</button>
            <button className="btn btn-ghost" onClick={() => location.hash = '#visit'}>Plan Your Visit</button>
          </div>
        </div>
      </section>
    </>
  );
}

window.GalleryPage = GalleryPage;