/* global React, Icon, nav, PageHero */
const { useState: useState2 } = React;

// ============ NEW HERE ============
function NewHerePage() {
  return (
    <>
      <PageHero crumb="About / New Here" image="assets/newhere-1.jpg" title="New Here?" verse="“Come unto me, all ye that labour and are heavy laden.” — Matthew 11:28"/>
      <section className="section">
        <div className="wrap-narrow">
          <div className="center" style={{marginBottom:48}}>
            <div className="ornament eyebrow">We Are So Glad You Are Considering Us</div>
            <h2 style={{fontSize:'clamp(28px,3.4vw,40px)', margin:'18px 0 14px'}}>What to Expect on Sunday</h2>
            <p className="muted" style={{maxWidth:620, margin:'0 auto'}}>No spectacle. No pressure. Just the gospel, the Word of God, and a family of believers who genuinely want to meet you.</p>
          </div>
          <div className="photo-strip reveal">
            <div style={{backgroundImage:"url('assets/newhere-2.jpg')"}}></div>
            <div style={{backgroundImage:"url('assets/newhere-3.jpg')"}}></div>
            <div style={{backgroundImage:"url('assets/newhere-4.jpg')"}}></div>
          </div>
          <div className="grid-3">
            {[
              ['When', '10:00 AM Sundays', 'Prayer & fellowship begin at 9:45 AM. Worship gathering at 10:00 AM, typically running about 75 minutes.'],
              ['Where', 'Kempner, TX', '815 Private Road 4717, Kempner, TX 76539. Parking is easy and a host will greet you at the entrance.'],
              ['What to Wear', 'Whatever is Honest', 'You will see jeans, button-downs, dresses, and boots. We care that you came — not what you wore.'],
              ['Music', 'Congregational', 'We sing together — hymns and biblically rich songs that point us to Christ. No performance, just praise.'],
              ['Preaching', 'Verse by Verse', 'Expect a clear, careful exposition of Scripture — typically 40–50 minutes from one passage.'],
              ['Children', 'Welcome in Service', 'Kids of every age are welcome with their families in the gathering. A quiet room is available if you need it.'],
            ].map(([t, s, d]) => (
              <div key={t} className="card reveal">
                <div className="eyebrow" style={{marginBottom:8}}>{t}</div>
                <h3 style={{fontSize:20}}>{s}</h3>
                <p>{d}</p>
              </div>
            ))}
          </div>
          <div className="center" style={{marginTop:56}}>
            <button className="btn btn-primary" onClick={() => nav('visit')}>Plan Your First Visit</button>
          </div>
        </div>
      </section>

      {/* Your Sunday Timeline */}
      <section className="section bg-cream">
        <div className="wrap">
          <div className="section-head">
            <div className="ornament eyebrow">Your First Sunday</div>
            <h2>From the Parking Lot to the Benediction</h2>
            <p className="sub">Here is exactly what to expect, minute by minute, the first time you walk through our doors.</p>
          </div>
          <div className="grid-2" style={{gap:56, alignItems:'start'}}>
            <div className="reveal reveal-left">
              <div className="split-img" style={{aspectRatio:'4/5'}}>
                <img loading="lazy" decoding="async" src="assets/newhere-5.jpg" alt="Worship gathering"/>
              </div>
            </div>
            <div className="reveal reveal-right">
              <ol style={{listStyle:'none', padding:0, margin:0, counterReset:'sunday'}}>
                {[
                  ['9:30 AM', 'You Arrive', 'Easy parking. A host will be at the door to welcome you, answer questions, and walk you in if you\'d like.'],
                  ['9:45 AM', 'Prayer & Fellowship', 'A quiet time of opening prayer and conversation in the lobby. Coffee is on. No pressure to mingle.'],
                  ['10:00 AM', 'Gathering Begins', 'A scripture call to worship, then singing together — hymns and gospel-rich songs.'],
                  ['10:20 AM', 'Prayer & Reading', 'A pastoral prayer for the church and the world, followed by the public reading of Scripture.'],
                  ['10:35 AM', 'Preaching', 'A clear, careful sermon from one passage — typically 40 to 50 minutes.'],
                  ['11:25 AM', 'Response & Sending', 'A closing song, the benediction, and time to stay for conversation if you\'d like.'],
                ].map(([time, title, desc]) => (
                  <li key={time} style={{display:'grid', gridTemplateColumns:'110px 1fr', gap:24, padding:'18px 0', borderBottom:'1px solid var(--rule)'}}>
                    <div style={{borderRight:'1px solid var(--rule)', paddingRight:16}}>
                      <div style={{fontFamily:'Cinzel,serif', fontSize:18, fontWeight:700, color:'var(--crimson)'}}>{time}</div>
                    </div>
                    <div>
                      <b style={{fontFamily:'Cinzel,serif', color:'var(--obsidian)', letterSpacing:'0.06em', fontSize:16}}>{title}</b>
                      <div style={{color:'#2a221a', fontSize:14.5, marginTop:6, lineHeight:1.6}}>{desc}</div>
                    </div>
                  </li>
                ))}
              </ol>
            </div>
          </div>
        </div>
      </section>

      {/* Polaroid snapshots — Sunday in 3 frames */}
      <section className="section">
        <div className="wrap">
          <div className="section-head">
            <div className="ornament eyebrow">Sunday, In Three Frames</div>
            <h2>What It Actually Looks Like</h2>
            <p className="sub">Not staged. Not curated. Just glimpses of an ordinary Sunday in Kempner.</p>
          </div>
          <div className="polaroid-row">
            <div className="polaroid">
              <div className="frame"><img loading="lazy" decoding="async" src="assets/newhere-6.jpg" alt="Singing together"/></div>
              <div className="cap">&ldquo;We sang &lsquo;How Great Thou Art&rsquo; together&rdquo;</div>
            </div>
            <div className="polaroid">
              <div className="frame"><img loading="lazy" decoding="async" src="assets/newhere-7.jpg" alt="Open Bibles"/></div>
              <div className="cap">&ldquo;Bibles open, eyes forward&rdquo;</div>
            </div>
            <div className="polaroid">
              <div className="frame"><img loading="lazy" decoding="async" src="assets/newhere-8.jpg" alt="Praying after service"/></div>
              <div className="cap">&ldquo;A pastor praying with a family after church&rdquo;</div>
            </div>
          </div>
        </div>
      </section>

      {/* Common questions */}
      <section className="section">
        <div className="wrap-narrow">
          <div className="section-head">
            <div className="ornament eyebrow">Honest Answers</div>
            <h2>Questions People Often Ask Us</h2>
          </div>
          <div style={{display:'grid', gap:16}}>
            {[
              ['Will I be put on the spot or asked to stand?', 'No. You are welcome to sit, sing, listen, or just observe. We don\'t single out guests, take your photo, or pass a microphone.'],
              ['Is there childcare?', 'Children of every age are welcomed in the gathering with their families. A quiet room is available if your little one needs a break. We do not currently offer separate children\'s programming during the sermon.'],
              ['How long is the service?', 'About 75 minutes from start to finish — congregational singing, prayer, Scripture reading, and preaching.'],
              ['What kind of music do you sing?', 'Congregational singing — hymns and biblically rich songs led from the piano and acoustic guitar. No light show, no production. Just the church singing together.'],
              ['Will you ask me for money?', 'No. We pass an offering for our covenant members, but guests are never expected — or asked — to give.'],
              ['Can I just come once and quietly leave?', 'Absolutely. Come check it out. We are glad you are here, and there is zero pressure to come back, sign up, or talk to anyone.'],
            ].map(([q, a]) => (
              <details key={q} style={{background:'#fff', border:'1px solid var(--rule)', padding:'18px 22px', cursor:'pointer'}}>
                <summary style={{fontFamily:'Cinzel,serif', color:'var(--crimson)', fontSize:16, fontWeight:600, letterSpacing:'0.04em', listStyle:'none', cursor:'pointer'}}>{q}</summary>
                <p style={{margin:'12px 0 0', color:'#2a221a', fontSize:15, lineHeight:1.7}}>{a}</p>
              </details>
            ))}
          </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/newhere-9.jpg') center/cover no-repeat, var(--obsidian)"}}>
        <div className="wrap-narrow">
          <div className="ornament eyebrow" style={{color:'var(--warm-gold)'}}>No Experience Necessary</div>
          <h2>Your First Sunday Starts With a Single Step</h2>
          <p>Nobody here has it all figured out — we&rsquo;re simply walking toward Christ together. Send us a note beforehand or just show up at 10:00 AM. Either way, you&rsquo;ll be glad you came.</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>
    </>
  );
}

// ============ VISIT ============
function VisitPage() {
  return (
    <>
      <PageHero crumb="Connect / Visit Us" image="assets/visit-1.jpg" title="Visit Us" verse="“I was glad when they said unto me, Let us go into the house of the LORD.” — Psalm 122:1"/>
      <section className="section">
        <div className="wrap">
          <div className="grid-2" style={{gap:56, alignItems:'start'}}>
            <div>
              <div className="eyebrow">Service Times</div>
              <h2 style={{fontSize:'clamp(28px,3.4vw,40px)', margin:'14px 0 24px'}}>We&rsquo;d Love to See You Sunday</h2>
              <ul style={{listStyle:'none', padding:0, margin:0}}>
                {[
                  ['Sunday Prayer & Fellowship', '9:45 AM'],
                  ['Sunday Worship Gathering', '10:00 AM'],
                  ['Wednesday Midweek Study', '7:00 PM'],
                ].map(([k,v]) => (
                  <li key={k} style={{display:'flex', justifyContent:'space-between', padding:'18px 0', borderBottom:'1px solid var(--rule)'}}>
                    <b style={{fontFamily:'Cinzel,serif', letterSpacing:'0.1em'}}>{k}</b>
                    <span style={{color:'var(--crimson)', fontFamily:'Cinzel,serif', fontWeight:700}}>{v}</span>
                  </li>
                ))}
              </ul>

              <div className="eyebrow" style={{marginTop:40}}>Find Us</div>
              <h3 style={{fontFamily:'Cinzel,serif', fontSize:22, color:'var(--crimson)', margin:'10px 0 6px'}}>815 Private Road 4717</h3>
              <p className="muted">Kempner, TX 76539</p>

              <div style={{marginTop:24}}>
                <button className="btn btn-primary" onClick={() => nav('contact')}>Let Us Know You&rsquo;re Coming</button>
              </div>
            </div>

            <div className="reveal reveal-right" style={{background:'var(--parchment-soft)', padding:0, border:'1px solid var(--rule)', overflow:'hidden'}}>
              <div style={{height:320, position:'relative', overflow:'hidden'}}>
                <img loading="lazy" decoding="async" src="assets/visit-2.jpg" alt="Worship" style={{width:'100%', height:'100%', objectFit:'cover'}}/>
                <div style={{position:'absolute', inset:0, background:'linear-gradient(180deg, rgba(13,13,15,0.2), rgba(13,13,15,0.65))'}}></div>
                <div style={{position:'absolute', left:24, bottom:22, color:'var(--warm-gold)', fontFamily:'Cinzel,serif', letterSpacing:'0.2em', fontSize:12}}>KEMPNER, TEXAS</div>
              </div>
              <div style={{padding:24}}>
                <h4 style={{fontFamily:'Cinzel,serif', color:'var(--obsidian)', fontSize:18, marginBottom:8}}>Driving In?</h4>
                <p style={{margin:0, color:'var(--muted)', fontSize:14}}>We are located on Private Road 4717 just outside of Kempner. Look for the Broken Barriers Church sign at the entrance. Free parking is available on site.</p>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* What to Bring / What to Skip */}
      <section className="section bg-cream">
        <div className="wrap">
          <div className="section-head">
            <div className="ornament eyebrow">A Few Quick Notes</div>
            <h2>What to Bring · What to Skip</h2>
            <p className="sub">Not a long list. Sunday is meant to be unburdened.</p>
          </div>
          <div className="grid-2" style={{gap:24}}>
            <div className="card" style={{borderTop:'3px solid var(--crimson)'}}>
              <div className="eyebrow" style={{color:'var(--crimson)'}}>Bring</div>
              <ul style={{listStyle:'none', padding:0, marginTop:14}}>
                {[
                  ['A Bible', 'Any translation. If you don\'t own one, we have copies you can take home.'],
                  ['A pen + something to write on', 'You\'ll want to take notes from the sermon.'],
                  ['Your kids', 'Of every age. They belong in the gathering with you.'],
                  ['Your honest questions', 'No question is too big or too basic. Come ask.'],
                ].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.06em'}}>{k}</b>
                    <div style={{color:'#2a221a', fontSize:14.5, marginTop:4}}>{v}</div>
                  </li>
                ))}
              </ul>
            </div>
            <div className="card" style={{borderTop:'3px solid var(--obsidian)'}}>
              <div className="eyebrow" style={{color:'var(--obsidian)'}}>Don&rsquo;t Worry About</div>
              <ul style={{listStyle:'none', padding:0, marginTop:14}}>
                {[
                  ['Dressing up', 'Wear whatever is comfortable and honest. Jeans, boots, and dresses all fit in.'],
                  ['Being noticed', 'No spotlight on guests, no asking you to stand or wave.'],
                  ['Knowing what to say', 'Just say hi. We\'ll take it from there — or leave you alone if you prefer.'],
                  ['Bringing a gift', 'The offering is for members. Guests are never asked to give.'],
                ].map(([k, v]) => (
                  <li key={k} style={{padding:'12px 0', borderBottom:'1px solid var(--rule)'}}>
                    <b style={{fontFamily:'Cinzel,serif', color:'var(--obsidian)', letterSpacing:'0.06em'}}>{k}</b>
                    <div style={{color:'var(--muted)', fontSize:14.5, marginTop:4}}>{v}</div>
                  </li>
                ))}
              </ul>
            </div>
          </div>
        </div>
      </section>

      {/* Sunday in collage */}
      <section className="section">
        <div className="wrap">
          <div className="section-head">
            <div className="ornament eyebrow">A Glimpse of Sunday</div>
            <h2>What You&rsquo;ll Walk Into</h2>
            <p className="sub">Three frames from a typical Sunday morning at Broken Barriers.</p>
          </div>
          <div className="collage-3">
            <div>
              <img loading="lazy" decoding="async" src="assets/visit-3.jpg" alt="Congregational worship"/>
              <div className="cap">Congregational Singing</div>
            </div>
            <div>
              <img loading="lazy" decoding="async" src="assets/visit-4.jpg" alt="Reading Scripture"/>
              <div className="cap">The Word, Opened</div>
            </div>
            <div>
              <img loading="lazy" decoding="async" src="assets/visit-5.jpg" alt="Prayer after service"/>
              <div className="cap">Prayer After Service</div>
            </div>
          </div>
        </div>
      </section>

      {/* Photo break — pull quote */}
      <section className="photo-break" style={{backgroundImage:"url('assets/visit-6.jpg')"}}>
        <div className="photo-break-content">
          <div className="ornament eyebrow" style={{color:'var(--warm-gold)'}}>You&rsquo;ll Find Us Here</div>
          <div className="pull" style={{marginTop:24}}>
            “I was glad when they said unto me, Let us go into the house of the LORD.”
          </div>
          <div className="attrib">— Psalm 122:1</div>
        </div>
      </section>

      {/* After the gathering */}
      <section className="section">
        <div className="wrap">
          <div className="grid-2" style={{gap:56, alignItems:'center'}}>
            <div className="reveal reveal-left">
              <div className="eyebrow">After the Gathering</div>
              <h2 style={{fontSize:'clamp(28px,3.4vw,40px)', margin:'14px 0 18px', color:'var(--crimson)', fontFamily:'Cinzel,serif'}}>Stay as Long as You Like</h2>
              <p style={{color:'#2a221a', fontSize:16}}>Sundays don&rsquo;t end at the benediction. Coffee, conversation, and unhurried fellowship continue in the lobby. Our pastors are available to talk, pray, or answer questions.</p>
              <ul style={{listStyle:'none', padding:0, marginTop:18}}>
                {[
                  ['Coffee &amp; Conversation', 'Stay 10 minutes or an hour — whatever you need.'],
                  ['Meet a Pastor', 'One of our elders is always available after service.'],
                  ['Pick Up a Bible', 'If you came without one, take a copy home with you.'],
                  ['Add Lunch', 'Our local lunch favorites in Kempner are on a printed map at the welcome table.'],
                ].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'}} dangerouslySetInnerHTML={{__html:k}}/>
                    <div style={{color:'var(--muted)', fontSize:14.5, marginTop:4}}>{v}</div>
                  </li>
                ))}
              </ul>
            </div>
            <div className="reveal reveal-right">
              <div className="split-img" style={{aspectRatio:'4/5'}}>
                <img loading="lazy" decoding="async" src="assets/visit-7.jpg" alt="Fellowship after church"/>
              </div>
            </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/visit-8.jpg') center/cover no-repeat, var(--obsidian)"}}>
        <div className="wrap-narrow">
          <div className="ornament eyebrow" style={{color:'var(--warm-gold)'}}>The Door Is Open</div>
          <h2>We&rsquo;d Love to Meet You This Sunday</h2>
          <p>Ask us anything before you come, or simply plan your visit and let us know when to expect you. Either way, there&rsquo;s a seat waiting and a family glad to welcome you.</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>
    </>
  );
}

// ============ PRAYER / CONNECT ============
function PrayerPage() {
  const [submitted, setSubmitted] = useState2(false);
  return (
    <>
      <PageHero crumb="Connect / Prayer" image="assets/prayer-1.jpg" title="Prayer & Connect" verse="“The effectual fervent prayer of a righteous man availeth much.” — James 5:16"/>
      <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/prayer-2.jpg" alt="Prayer group gathered around Bible"/>
              </div>
              <div className="eyebrow">Share a Request</div>
              <h2 style={{fontSize:'clamp(28px,3.4vw,38px)', margin:'14px 0 18px'}}>Our Elders Are Praying for You</h2>
              <p style={{color:'#2a221a'}}>Every request is read by our pastoral leadership and held in confidence. We pray for our family by name, and we would be honored to pray for you.</p>
              <p className="muted">For urgent pastoral care, call (254) 555-0140.</p>

              <h3 style={{fontFamily:'Cinzel,serif', color:'var(--crimson)', fontSize:20, marginTop:36, marginBottom:10, paddingBottom:8, borderBottom:'2px solid var(--rich-gold)', display:'inline-block'}}>Ways to Connect</h3>
              <ul style={{listStyle:'none', padding:0}}>
                {['I would like to plan a visit', 'I want to talk with a pastor', 'I am interested in baptism', 'I want to learn about membership', 'I need pastoral care or benevolence'].map(o => (
                  <li key={o} style={{padding:'10px 0', borderBottom:'1px solid var(--rule)', color:'#2a221a'}}>· {o}</li>
                ))}
              </ul>
            </div>

            <div className="reveal reveal-right" style={{background:'#fff', border:'1px solid var(--rule)', padding:36, boxShadow:'var(--shadow-md)'}}>
              {submitted ? (
                <div className="center" style={{padding:'40px 0'}}>
                  <div style={{fontSize:64, color:'var(--rich-gold)', marginBottom:14}}>✦</div>
                  <h3 style={{fontFamily:'Cinzel,serif', color:'var(--crimson)', fontSize:24, marginBottom:10}}>Thank You</h3>
                  <p className="muted">Your request has been received. Our elders will be praying for you.</p>
                </div>
              ) : (
                <form onSubmit={e => {e.preventDefault(); setSubmitted(true);}}>
                  <div className="eyebrow">Prayer / Connect Form</div>
                  <h3 style={{fontFamily:'Cinzel,serif', fontSize:22, margin:'10px 0 22px', color:'var(--obsidian)'}}>How can we pray with you?</h3>
                  <div className="field"><label>Name</label><input type="text" required/></div>
                  <div className="field"><label>Email</label><input type="email" required/></div>
                  <div className="field"><label>What is this about?</label>
                    <select><option>Prayer request</option><option>Plan a visit</option><option>Talk with a pastor</option><option>Baptism</option><option>Membership</option><option>Benevolence</option></select>
                  </div>
                  <div className="field"><label>Your request</label><textarea rows="5" required></textarea></div>
                  <label style={{display:'flex', alignItems:'center', gap:10, fontSize:13, color:'var(--muted)', marginBottom:18}}>
                    <input type="checkbox"/> Keep this request confidential to elders only
                  </label>
                  <button type="submit" className="btn btn-primary" style={{width:'100%', justifyContent:'center'}}>Send Request</button>
                </form>
              )}
            </div>
          </div>
        </div>
      </section>

      {/* How we pray */}
      <section className="section bg-cream">
        <div className="wrap">
          <div className="section-head">
            <div className="ornament eyebrow">Our Prayer Rhythm</div>
            <h2>How We Pray as a Church</h2>
            <p className="sub">Prayer is not a program or a Sunday warm-up. It is the lifeblood of this church — woven through every week.</p>
          </div>
          <div className="grid-3">
            {[
              ['Sunday Mornings', '9:45 AM', 'Members and friends gather in the auditorium 15 minutes before service to pray over the gathering, the preaching, and the lost.'],
              ['Elder Prayer', 'Weekly', 'Our elders meet weekly to pray over the church by name — every household, every concern brought to us.'],
              ['Wednesday Evening', '7:00 PM', 'Midweek prayer and study in the Word — a focused, open hour to bring requests and intercede together.'],
            ].map(([t, when, d]) => (
              <div key={t} className="card">
                <div className="eyebrow" style={{color:'var(--crimson)'}}>{when}</div>
                <h3 style={{marginTop:10}}>{t}</h3>
                <p>{d}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Pray-For trio */}
      <section className="section">
        <div className="wrap">
          <div className="section-head">
            <div className="ornament eyebrow">Three Directions of Prayer</div>
            <h2>How to Pray This Week</h2>
            <p className="sub">Not sure where to begin? Start in one of these three directions and let the Lord lead you from there.</p>
          </div>
          <div className="trio">
            {[
              ['assets/prayer-3.jpg', 'INWARD', 'For Your Own Soul', 'Bring your sins, your fears, your doubts, and your weakness honestly to your Father. Confession is not a punishment — it is the way home.', '— Psalm 51:10'],
              ['assets/prayer-4.jpg', 'OUTWARD', 'For the Ones You Love', 'Hold up by name the family, neighbors, and friends God has placed around you. He hears, and He moves in ways we may never see.', '— 1 Timothy 2:1'],
              ['assets/prayer-5.jpg', 'UPWARD', 'For the Church &amp; the World', 'Pray for the gathered church on Sunday, for pastors faithfully preaching, and for the gospel to move where it has not yet gone.', '— Matthew 9:38'],
            ].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 dangerouslySetInnerHTML={{__html:title}}/>
                  <p dangerouslySetInnerHTML={{__html:body}}/>
                  <div className="trio-verse">{ref}</div>
                </div>
              </article>
            ))}
          </div>
        </div>
      </section>

      {/* Photo break */}
      <section className="photo-break" style={{backgroundImage:"url('assets/prayer-6.jpg')"}}>
        <div className="photo-break-content">
          <div className="ornament eyebrow" style={{color:'var(--warm-gold)'}}>James 5:16</div>
          <div className="pull" style={{marginTop:24}}>
            “Confess your faults one to another, and pray one for another, that ye may be healed. The effectual fervent prayer of a righteous man availeth much.”
          </div>
        </div>
      </section>

      {/* When you don't know how to pray */}
      <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/prayer-7.jpg" alt="Hands folded in prayer"/>
              </div>
            </div>
            <div className="reveal reveal-right">
              <div className="eyebrow">When You Don&rsquo;t Know What to Pray</div>
              <h2 style={{fontSize:'clamp(28px,3.4vw,40px)', margin:'14px 0 18px', color:'var(--crimson)', fontFamily:'Cinzel,serif'}}>Start Here. We&rsquo;ll Pray With You.</h2>
              <p style={{color:'#2a221a', fontSize:16, marginBottom:24}}>You don&rsquo;t need polished words or a perfect church history. Prayer is honesty before a Father who already knows. If you&rsquo;re unsure where to begin, these are common places people start:</p>
              <ul style={{listStyle:'none', padding:0}}>
                {[
                  ['For peace', 'When anxiety has the upper hand and quiet feels impossible.'],
                  ['For someone you love', 'A family member or friend you can&rsquo;t fix and can&rsquo;t stop carrying.'],
                  ['For clarity', 'A decision, a relationship, a season that needs God&rsquo;s wisdom.'],
                  ['For forgiveness', 'For sin you can&rsquo;t shake or shame you can&rsquo;t carry alone.'],
                  ['For salvation', 'For yourself or someone you love — that they would know Christ.'],
                ].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.06em'}} dangerouslySetInnerHTML={{__html:k}}/>
                    <span style={{color:'#2a221a', fontSize:14.5, marginLeft:14}} dangerouslySetInnerHTML={{__html:'· '+v}}/>
                  </li>
                ))}
              </ul>
            </div>
          </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/prayer-8.jpg') center/cover no-repeat, var(--obsidian)"}}>
        <div className="wrap-narrow">
          <div className="ornament eyebrow" style={{color:'var(--warm-gold)'}}>You Don&rsquo;t Have to Carry It Alone</div>
          <h2>Someone Here Is Ready to Pray With You</h2>
          <p>Whatever you&rsquo;re facing today, you don&rsquo;t have to face it by yourself. Reach out to our pastors, or come sit with us on Sunday and let this church family carry it with you.</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>
    </>
  );
}

// ============ CONTACT ============
function ContactPage() {
  return (
    <>
      <PageHero crumb="Connect / Contact" image="assets/contact-1.jpg" title="Get in Touch" verse="“As we have therefore opportunity, let us do good unto all men.” — Galatians 6:10"/>
      <section className="section">
        <div className="wrap">
          <div className="photo-strip reveal">
            <div style={{backgroundImage:"url('assets/contact-2.jpg')"}}></div>
            <div style={{backgroundImage:"url('assets/contact-3.jpg')"}}></div>
            <div style={{backgroundImage:"url('assets/contact-4.jpg')"}}></div>
          </div>
          <div className="grid-3">
            {[
              [<Icon.Mail/>, 'Email', 'hello@brokenbarriers.church', 'For general inquiries, prayer, or to talk with a pastor.'],
              [<Icon.Phone/>, 'Phone', '(254) 555-0140', 'Tuesday–Friday, 9:00 AM to 4:00 PM. Voicemail monitored daily.'],
              [<Icon.Pin/>, 'Mailing', '815 Private Road 4717', 'Kempner, TX 76539'],
            ].map(([ic, t, m, s]) => (
              <div key={t} className="card center">
                <div className="card-icon" style={{margin:'0 auto 16px'}}>{ic}</div>
                <h3>{t}</h3>
                <div style={{fontFamily:'Cinzel,serif', fontSize:16, color:'var(--obsidian)', margin:'8px 0 6px', letterSpacing:'0.04em'}}>{m}</div>
                <p>{s}</p>
              </div>
            ))}
          </div>

          <form className="wrap-narrow reveal" style={{marginTop:64, background:'#fff', border:'1px solid var(--rule)', padding:40}} onSubmit={(e) => {
            e.preventDefault();
            const f = e.target;
            const first = f.first.value.trim();
            const last = f.last.value.trim();
            const email = f.email.value.trim();
            const subject = f.subject.value.trim() || 'Website Contact Form';
            const message = f.message.value.trim();
            const body =
              'Name: ' + first + ' ' + last + '\n' +
              'Email: ' + email + '\n\n' +
              message;
            window.location.href = 'mailto:tech@brokenbarriers.church'
              + '?subject=' + encodeURIComponent(subject)
              + '&body=' + encodeURIComponent(body);
          }}>
            <div className="center" style={{marginBottom:24}}>
              <div className="eyebrow">Send a Message</div>
              <h3 style={{fontFamily:'Cinzel,serif', fontSize:28, color:'var(--crimson)', marginTop:10}}>We Read Every Note</h3>
            </div>
            <div className="grid-2" style={{gap:16}}>
              <div className="field"><label htmlFor="cf-first">First Name</label><input id="cf-first" name="first" type="text" required/></div>
              <div className="field"><label htmlFor="cf-last">Last Name</label><input id="cf-last" name="last" type="text" required/></div>
            </div>
            <div className="field"><label htmlFor="cf-email">Email</label><input id="cf-email" name="email" type="email" required/></div>
            <div className="field"><label htmlFor="cf-subject">Subject</label><input id="cf-subject" name="subject" type="text"/></div>
            <div className="field"><label htmlFor="cf-message">Message</label><textarea id="cf-message" name="message" rows="6" required></textarea></div>
            <div className="center"><button type="submit" className="btn btn-primary">Send Message</button></div>
            <p className="center muted" style={{fontSize:12.5, marginTop:16, marginBottom:0}}>Messages are sent to <a href="mailto:tech@brokenbarriers.church">tech@brokenbarriers.church</a></p>
          </form>
        </div>
      </section>

      {/* Who to talk to */}
      <section className="section bg-cream">
        <div className="wrap">
          <div className="section-head">
            <div className="ornament eyebrow">Not Sure Who to Ask?</div>
            <h2>Who to Talk To, About What</h2>
            <p className="sub">If you have a specific need, here&rsquo;s the fastest route to the right person on our team.</p>
          </div>
          <div className="grid-2" style={{gap:24}}>
            {[
              ['Pastoral Care · Counseling · Spiritual Questions', 'Pastor Brian Goodsby', 'Senior Pastor', 'pastor@brokenbarriers.church', 'For matters of faith, marriage, grief, doctrine, or pastoral counsel.'],
              ['Benevolence · Financial Hardship · Practical Help', 'Michael Diaz', 'Deacon · Treasurer', 'benevolence@brokenbarriers.church', 'For confidential requests for help with bills, groceries, or unexpected needs.'],
              ['Membership · Baptism · New Believer Questions', 'Joshua Nixon', 'Deacon · Secretary', 'membership@brokenbarriers.church', 'For anything related to becoming a member, baptism, or first steps in following Christ.'],
              ['General Inquiries · Visits · Anything Else', 'Church Office', 'Hello Inbox', 'hello@brokenbarriers.church', 'Not sure who handles your question? Start here. We\'ll route it to the right person.'],
            ].map(([role, name, title, email, desc]) => (
              <div key={name} className="card">
                <div className="eyebrow" style={{color:'var(--crimson)'}}>{role}</div>
                <h3 style={{marginTop:12, marginBottom:4}}>{name}</h3>
                <div style={{fontFamily:'Cinzel,serif', fontSize:11, letterSpacing:'0.2em', color:'var(--rich-gold)', textTransform:'uppercase', marginBottom:14}}>{title}</div>
                <p style={{marginBottom:14}}>{desc}</p>
                <a href={`mailto:${email}`} style={{fontFamily:'Cinzel,serif', letterSpacing:'0.08em', color:'var(--crimson)', fontSize:14, fontWeight:600}}>{email}</a>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Office hours + location */}
      <section className="section">
        <div className="wrap">
          <div className="grid-2" style={{gap:56, alignItems:'center'}}>
            <div className="reveal reveal-left">
              <div className="eyebrow">Office Hours</div>
              <h2 style={{fontSize:'clamp(28px,3.4vw,40px)', margin:'14px 0 18px', color:'var(--crimson)', fontFamily:'Cinzel,serif'}}>When You&rsquo;ll Reach a Human</h2>
              <p style={{color:'#2a221a', fontSize:16}}>Our team is small and bivocational. We answer calls during posted hours and read every voicemail and email within one business day.</p>
              <ul style={{listStyle:'none', padding:0, marginTop:20}}>
                {[
                  ['Monday', 'Closed · Pastoral study day'],
                  ['Tuesday', '9:00 AM \u2013 4:00 PM'],
                  ['Wednesday', '9:00 AM \u2013 4:00 PM · Midweek service 7:00 PM'],
                  ['Thursday', '9:00 AM \u2013 4:00 PM'],
                  ['Friday', '9:00 AM \u2013 1:00 PM'],
                  ['Saturday', 'Closed · By appointment for pastoral need'],
                  ['Sunday', 'Worship gathering 10:00 AM'],
                ].map(([d, h]) => (
                  <li key={d} style={{padding:'12px 0', borderBottom:'1px solid var(--rule)', display:'flex', justifyContent:'space-between'}}>
                    <b style={{fontFamily:'Cinzel,serif', color:'var(--obsidian)', letterSpacing:'0.08em'}}>{d}</b>
                    <span style={{color:'#2a221a'}}>{h}</span>
                  </li>
                ))}
              </ul>
              <p className="muted" style={{marginTop:20, fontSize:14}}>For pastoral emergencies outside office hours, call <b style={{color:'var(--crimson)'}}>(254) 555-0140</b> and leave a message. An elder will reach you the same day.</p>
            </div>
            <div className="reveal reveal-right">
              <div className="split-img" style={{aspectRatio:'4/5'}}>
                <img loading="lazy" decoding="async" src="assets/contact-5.jpg" alt="Bible study around the table"/>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Story cluster — Why call */}
      <section className="section">
        <div className="wrap">
          <div className="grid-2" style={{gap:72, alignItems:'center'}}>
            <div className="reveal reveal-left">
              <div className="eyebrow">Why People Reach Out</div>
              <h2 style={{fontSize:'clamp(28px,3.6vw,46px)', margin:'14px 0 22px', fontFamily:'Cinzel,serif', color:'var(--crimson)'}}>The Door Is Always Open</h2>
              <p style={{color:'#2a221a', fontSize:16, lineHeight:1.8}}>People write to us for all kinds of reasons — to ask about Sunday, to share a burden too heavy to carry alone, to ask hard questions about God, or simply to say hello. There is no wrong reason to reach out.</p>
              <p style={{color:'#2a221a', fontSize:16, lineHeight:1.8}}>If you&rsquo;re carrying something heavy today, please don&rsquo;t wait. One of our elders or deacons will respond personally — not from a form letter, not from a chatbot.</p>
              <div style={{marginTop:28, display:'flex', gap:14, flexWrap:'wrap'}}>
                <button className="btn btn-primary" onClick={() => nav('prayer')}>Share a Prayer Request</button>
                <button className="btn btn-gold" onClick={() => nav('visit')}>Just Come Sunday</button>
              </div>
            </div>
            <div className="reveal reveal-right">
              <div className="story-cluster flip">
                <div className="small"><img loading="lazy" decoding="async" src="assets/contact-6.jpg" alt="Cross at sunset"/></div>
                <div className="big"><img loading="lazy" decoding="async" src="assets/contact-7.jpg" alt="An open door filled with light"/></div>
                <div className="badge">We&rsquo;ll Reply</div>
              </div>
            </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/contact-8.jpg') center/cover no-repeat, var(--obsidian)"}}>
        <div className="wrap-narrow">
          <div className="ornament eyebrow" style={{color:'var(--warm-gold)'}}>We&rsquo;re Glad You Reached Out</div>
          <h2>Let&rsquo;s Keep the Conversation Going</h2>
          <p>Send us your question and a real person will answer it. Or skip the message altogether and meet us face to face this Sunday — that&rsquo;s where the best conversations happen.</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>
    </>
  );
}

window.NewHerePage = NewHerePage;
window.VisitPage = VisitPage;
window.PrayerPage = PrayerPage;
window.ContactPage = ContactPage;