/* ============================================================
   MISC PAGES — About, Visit, Give, Contact
   ============================================================ */

function AboutPage() {
  return (
    <>
      <PageHead
        crumbs={[{label:'Home', href:'#/home'}, {label:'About'}]}
        title={<>About <em style={{fontStyle:'italic',color:'var(--c-accent)',fontWeight:400}}>Bethany</em></>}
        lede="An ordinary church with an extraordinary Saviour. Since 1887 we've been gathering, growing, and serving in the heart of our community."
      />

      {/* Story */}
      <section>
        <div className="container">
          <div className="feat-row">
            <div className="feat-img">
              <img src="https://images.unsplash.com/photo-1519817914152-22d216bb9170?w=1000&q=80" alt=""/>
            </div>
            <div>
              <span className="eyebrow">Our Story</span>
              <h2 style={{ marginTop: 12 }}>A church <em>rooted</em> in the community.</h2>
              <p style={{ marginTop: 16 }}>
                Bethany Baptist was planted in 1887 as a mission to families working on the High Street. Nearly a century and a half later, we're still here — still gathering Sundays, still opening the doors mid-week, still convinced the good news of Jesus is the best news our town will ever hear.
              </p>
              <p>
                We're part of the Baptist Union of Great Britain. We're family-friendly, intergenerational, and slowly becoming a little more diverse every year — something we thank God for.
              </p>
            </div>
          </div>
        </div>
      </section>

      {/* Beliefs */}
      <section style={{ background: 'var(--c-bg-2)', borderTop: '1px solid var(--c-line)', borderBottom: '1px solid var(--c-line)' }}>
        <div className="container">
          <div className="section-head center">
            <span className="eyebrow">What we believe</span>
            <h2 style={{ marginTop: 10 }}>Simple faith, <em>grounded</em> in Scripture.</h2>
            <p style={{ maxWidth: '56ch', margin: '16px auto 0' }}>
              The convictions that shape everything we do — ancient truths, confessed together, lived out in ordinary Tuesdays.
            </p>
          </div>
          <div style={{ maxWidth: 800, margin: '0 auto' }}>
            <div className="beliefs-list">
              {BELIEFS.map(b => (
                <div key={b.n} className="belief-item">
                  <div className="belief-n">{b.n}</div>
                  <div>
                    <h3>{b.title}</h3>
                    <p>{b.p}</p>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* Team */}
      <section>
        <div className="container">
          <div className="section-head center">
            <span className="eyebrow">Our team</span>
            <h2 style={{ marginTop: 10 }}>The people you'll <em>meet</em>.</h2>
          </div>
          <div className="grid grid-4">
            {TEAM.map(p => (
              <div key={p.name} style={{ textAlign: 'center' }}>
                <div style={{ aspectRatio: '1', background: 'var(--c-bg-2)', borderRadius: 'var(--radius-lg)', overflow: 'hidden', marginBottom: 16 }}>
                  <img src={p.img} alt="" style={{ width: '100%', height: '100%', objectFit: 'cover' }}/>
                </div>
                <h4 style={{ fontFamily: 'var(--font-display)', fontSize: '1.3rem', fontWeight: 600 }}>{p.name}</h4>
                <div style={{ fontSize: 13, color: 'var(--c-accent)', letterSpacing: '0.08em', textTransform: 'uppercase', marginTop: 4 }}>{p.role}</div>
              </div>
            ))}
          </div>
        </div>
      </section>
    </>
  );
}

function VisitPage() {
  return (
    <>
      <PageHead
        crumbs={[{label:'Home', href:'#/home'}, {label:'Visit'}]}
        title={<>Plan your <em style={{fontStyle:'italic',color:'var(--c-accent)',fontWeight:400}}>visit</em></>}
        lede="Thinking of coming along? Here's everything you need. No ticket, no dress code, no pressure — just a seat saved for you."
      />
      <section>
        <div className="container">
          <div className="info-grid" style={{ marginBottom: 48 }}>
            <div className="info-card">
              <h4>Service Times</h4>
              <div className="big">Sundays</div>
              <p>11:00 AM Morning Worship<br/>6:30 PM Evening Service<br/>Tues 8:00 PM Midweek</p>
            </div>
            <div className="info-card">
              <h4>Address</h4>
              <div className="big">23–27 Gransha Road</div>
              <p>Bangor, BT20 4TN<br/>Free on-site parking</p>
            </div>
            <div className="info-card">
              <h4>First Visit?</h4>
              <div className="big">Just come in</div>
              <p>The welcome team will meet you at the door — no need to announce yourself.</p>
            </div>
          </div>

          <div className="map-frame">
            <div className="faux-map">
              <div className="map-road" style={{ top: '48%', left: 0, right: 0, height: 14 }}/>
              <div className="map-road" style={{ top: 0, bottom: 0, left: '48%', width: 10 }}/>
              <div className="map-road" style={{ top: '20%', left: 0, right: 0, height: 4, opacity: 0.7 }}/>
              <div className="map-road" style={{ top: '75%', left: 0, right: 0, height: 4, opacity: 0.7 }}/>
              <div className="map-pin"><Icon.pin/></div>
              <div className="map-pin-label">Bethany Baptist · Gransha Road, Bangor</div>
            </div>
          </div>

          <div style={{ marginTop: 48 }}>
            <h2 style={{ marginBottom: 24 }}>What to <em style={{fontStyle:'italic',color:'var(--c-accent)',fontWeight:400}}>expect</em>.</h2>
            <div className="grid grid-3">
              {[
                { t: 'Arrive', p: 'Doors open at 10:00 AM. Grab a coffee, meet the welcome team, find a seat. No rush.' },
                { t: 'Worship', p: 'About 75 minutes: songs old and new, honest prayer, a Bible talk, communion on the first Sunday of each month.' },
                { t: 'Linger', p: 'Stay for lunch on the first Sunday, or just hang around for more coffee. We love questions.' },
              ].map((s,i) => (
                <div key={i} className="card" style={{ padding: 28 }}>
                  <div className="belief-n" style={{ fontSize: '2rem' }}>0{i+1}</div>
                  <h3 style={{ marginTop: 12, marginBottom: 12 }}>{s.t}</h3>
                  <p style={{ color: 'var(--c-ink-2)' }}>{s.p}</p>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>
    </>
  );
}

function GivePage() {
  return (
    <>
      <PageHead
        crumbs={[{label:'Home', href:'#/home'}, {label:'Give'}]}
        title={<><em style={{fontStyle:'italic',color:'var(--c-accent)',fontWeight:400}}>Give</em> generously</>}
        lede="Every gift — large or small, one-off or regular — fuels the ministry of this church: Sunday services, children's work, community outreach, and practical care for those in need."
      />
      <section>
        <div className="container" style={{ maxWidth: 860 }}>
          <div className="grid" style={{ gridTemplateColumns: '1fr', gap: 20 }}>
            {[
              { t: 'Online (one-off or regular)', s: 'Fastest and most flexible. Set up a standing order or give a single gift in under two minutes.', cta: 'Give online' },
              { t: 'Bank transfer', s: 'Bethany Baptist Church · Sort 00-00-00 · Acct 12345678. Reference: your name + "tithe" or "offering".', cta: 'Copy details' },
              { t: 'Cash / cheque on a Sunday', s: 'Giving boxes at the back of the auditorium. Cheques payable to "Bethany Baptist Church".', cta: null },
              { t: 'Gift Aid', s: 'UK taxpayers can Gift Aid donations — adding 25p to every £1 at no extra cost to you.', cta: 'Gift Aid form' },
            ].map((g,i) => (
              <div key={i} className="card" style={{ padding: 28, display: 'flex', gap: 20, alignItems: 'center', flexWrap: 'wrap' }}>
                <div style={{ flex: '1 1 300px' }}>
                  <h3>{g.t}</h3>
                  <p style={{ marginTop: 8, marginBottom: 0 }}>{g.s}</p>
                </div>
                {g.cta && <a href="#" className="btn btn-primary">{g.cta} <Icon.arrow/></a>}
              </div>
            ))}
          </div>

          <div style={{ marginTop: 48, padding: 32, background: 'var(--c-bg-2)', borderRadius: 'var(--radius-lg)', textAlign: 'center' }}>
            <div className="eyebrow">A note on giving</div>
            <blockquote style={{ fontFamily: 'var(--font-display)', fontStyle: 'italic', fontSize: '1.3rem', margin: '12px 0 0', color: 'var(--c-ink)' }}>
              "Each of you should give what you have decided in your heart to give, not reluctantly or under compulsion, for God loves a cheerful giver."
            </blockquote>
            <div style={{ marginTop: 16, fontSize: 13, letterSpacing: '0.12em', textTransform: 'uppercase', color: 'var(--c-accent)', fontWeight: 600 }}>2 Corinthians 9:7</div>
          </div>
        </div>
      </section>
    </>
  );
}

function ContactPage() {
  return (
    <>
      <PageHead
        crumbs={[{label:'Home', href:'#/home'}, {label:'Contact'}]}
        title={<>Get in <em style={{fontStyle:'italic',color:'var(--c-accent)',fontWeight:400}}>touch</em></>}
        lede="Got a question, a prayer request, or just want to know more? Drop us a line — a real human will read it."
      />
      <section>
        <div className="container">
          <div style={{ display: 'grid', gridTemplateColumns: '1fr', gap: 40 }}>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(260px, 1fr))', gap: 20 }}>
              <div className="info-card">
                <h4>Phone</h4>
                <div className="big">028 9145 9211</div>
              </div>
              <div className="info-card">
                <h4>Email</h4>
                <div className="big">info@bethanybaptist.co.uk</div>
              </div>
            </div>

            <div className="contact-split">
              <div className="card" style={{ padding: 32 }}>
                <h3 style={{ marginBottom: 24 }}>Send us a message</h3>
                <div className="form-row two">
                  <label>
                    <div className="label-txt">Your name</div>
                    <input type="text" placeholder="Jane Smith"/>
                  </label>
                  <label>
                    <div className="label-txt">Email</div>
                    <input type="email" placeholder="jane@example.com"/>
                  </label>
                </div>
                <div className="form-row">
                  <label>
                    <div className="label-txt">What's this about?</div>
                    <select>
                      <option>General enquiry</option>
                      <option>Planning a first visit</option>
                      <option>Children & youth</option>
                      <option>Pickleball club</option>
                      <option>Prayer request</option>
                      <option>Baptism / membership</option>
                    </select>
                  </label>
                </div>
                <div className="form-row">
                  <label>
                    <div className="label-txt">Message</div>
                    <textarea placeholder="Tell us a bit more…"/>
                  </label>
                </div>
                <button className="btn btn-primary">Send message <Icon.arrow/></button>
              </div>

              <div className="contact-map-col">
                <div className="contact-map-card">
                  <div className="contact-map-header">
                    <div>
                      <div className="contact-map-kicker">Find us</div>
                      <div className="contact-map-addr">23–27 Gransha Road<br/>Bangor, BT20 4TN</div>
                    </div>
                    <a
                      href="https://www.google.com/maps/dir/?api=1&destination=23-27+Gransha+Road+Bangor+BT20+4TN"
                      target="_blank"
                      rel="noopener"
                      className="btn btn-ghost"
                    >
                      Directions <Icon.arrow/>
                    </a>
                  </div>
                  <div className="contact-map">
                    <iframe
                      title="Bethany Baptist Church, Bangor"
                      src="https://maps.google.com/maps?q=Bethany+Baptist+Church%2C+23-27+Gransha+Road%2C+Bangor%2C+BT20+4TN&t=m&z=15&output=embed&iwloc=near"
                      loading="lazy"
                      referrerPolicy="no-referrer-when-downgrade"
                      allowFullScreen
                    />
                  </div>
                  <div className="contact-map-footer">
                    <span className="contact-map-dot"/>
                    <span>Free on-site parking · Wheelchair accessible</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
    </>
  );
}

Object.assign(window, { AboutPage, VisitPage, GivePage, ContactPage });