/* ============================================================
   MINISTRIES — hub + sub-pages
   ============================================================ */

function MinistriesPage() {
  return (
    <>
      <PageHead
        crumbs={[{label:'Home', href:'#/home'}, {label:'Ministries'}]}
        title={<>A home for <em style={{fontStyle:'italic',color:'var(--c-accent)',fontWeight:400}}>everyone</em></>}
        lede="Toddlers and teens, parents and pickleballers, newcomers and long-standing members — there's a place to belong and to serve at Bethany."
      />
      <section style={{ paddingTop: 40 }}>
        <div className="container">
          <div className="grid grid-3">
            {MINISTRIES.map(m => (
              <a key={m.slug} href={`#/ministries/${m.slug}`} className="m-card">
                <div className="m-card-img">
                  <img src={m.img} alt=""/>
                  <span className="m-card-tag">{m.tag}</span>
                </div>
                <div className="m-card-body">
                  <h3>{m.title}</h3>
                  <p>{m.blurb}</p>
                  <div className="m-card-foot">
                    <span className="muted"><Icon.clock/> <span style={{ marginLeft: 4 }}>{m.meta}</span></span>
                    <span style={{ color: 'var(--c-brand)', fontWeight: 600 }}>Learn more <Icon.arrow/></span>
                  </div>
                </div>
              </a>
            ))}
          </div>
        </div>
      </section>
    </>
  );
}

function ChildrenPage() {
  return (
    <>
      <PageHead
        crumbs={[{label:'Ministries', href:'#/ministries'}, {label:'Children'}]}
        title={<>Children at <em style={{fontStyle:'italic',color:'var(--c-accent)',fontWeight:400}}>Bethany</em></>}
        lede="Every Sunday, our youngest members explore faith through story, song, craft and play — in age-appropriate groups, with DBS-checked leaders."
        chips={['Crèche (0–2)', 'Scramblers (2–4)', 'Explorers (5–7)', 'Pathfinders (8–11)']}
      />
      <section>
        <div className="container">
          <div className="feat-row">
            <div className="feat-img">
              <img src="https://images.unsplash.com/photo-1503454537195-1dcabb73ffb9?w=1000&q=80" alt=""/>
            </div>
            <div>
              <span className="eyebrow">Sundays · 10:30 AM</span>
              <h2 style={{ marginTop: 12 }}>Faith-filled, <em>fun-filled</em> Sundays.</h2>
              <p style={{ marginTop: 16, fontSize: '1.05rem' }}>
                Children stay with families for the first part of the service, then head to their groups during the sermon. We'll meet you at the welcome desk on your first visit and walk you through sign-in.
              </p>
              <ul style={{ listStyle: 'none', padding: 0, margin: '20px 0', display: 'grid', gap: 10 }}>
                {['All leaders are DBS-checked and safeguarding-trained',
                  'Age-appropriate Bible stories, crafts and games',
                  'Allergy-aware snacks and parent pagers available',
                  'Termly family services where everyone stays together'].map((t,i) => (
                  <li key={i} style={{ display: 'flex', gap: 12, alignItems: 'flex-start' }}>
                    <span style={{ width: 20, height: 20, borderRadius: '50%', background: 'var(--c-accent)', color: '#1a1308', display: 'grid', placeItems: 'center', fontSize: 11, fontWeight: 700, flexShrink: 0, marginTop: 2 }}>✓</span>
                    <span>{t}</span>
                  </li>
                ))}
              </ul>
              <div className="hero-ctas">
                <a href="#/contact" className="btn btn-primary">Get in touch <Icon.arrow/></a>
                <a href="#/ministries/youth" className="btn btn-outline">Youth ministry</a>
              </div>
            </div>
          </div>
        </div>
      </section>
    </>
  );
}

function YouthPage() {
  return (
    <>
      <PageHead
        crumbs={[{label:'Ministries', href:'#/ministries'}, {label:'Youth'}]}
        title={<>Youth — <em style={{fontStyle:'italic',color:'var(--c-accent)',fontWeight:400}}>real faith</em>, real friends.</>}
        lede="A space for 11–18s to ask honest questions, build lifelong friendships, and discover a faith that works in the real world."
        chips={['Fridays · 7:00 PM', 'Sunday groups', 'Termly socials', 'Annual camp']}
      />
      <section>
        <div className="container">
          <div className="grid grid-3">
            {[
              { t: 'Friday Nights', s: 'Games, teaching, small-group chat. Open to all — bring a friend.', m: '7:00–9:00 PM · Church Hall' },
              { t: 'Sunday Groups', s: 'Deeper Bible conversation during the morning service. 11–14s and 15–18s.', m: '10:30 AM · Upstairs rooms' },
              { t: 'Socials & Camp', s: 'Termly trips and our legendary summer camp. Life-long memories made.', m: 'Year-round · See calendar' },
            ].map((b, i) => (
              <div key={i} className="card" style={{ padding: 28 }}>
                <div className="eyebrow">0{i+1}</div>
                <h3 style={{ marginTop: 12, marginBottom: 12 }}>{b.t}</h3>
                <p style={{ color: 'var(--c-ink-2)' }}>{b.s}</p>
                <div style={{ marginTop: 16, paddingTop: 16, borderTop: '1px solid var(--c-line)', fontSize: 13, color: 'var(--c-muted)' }}>
                  <Icon.clock/> <span style={{ marginLeft: 4 }}>{b.m}</span>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>
    </>
  );
}

function ParentsToddlersPage() {
  return (
    <>
      <PageHead
        crumbs={[{label:'Ministries', href:'#/ministries'}, {label:'Parents & Toddlers'}]}
        title={<>Parents &amp; <em style={{fontStyle:'italic',color:'var(--c-accent)',fontWeight:400}}>Toddlers</em></>}
        lede="A warm, busy weekly gathering for parents, carers and little ones (0–4). Free-play, craft, singing, tea, biscuits — and proper grown-up conversation."
        chips={['Tuesdays · 9:30–11:30 AM', 'Term-time only', '£2 per family', 'All welcome']}
      />
      <section>
        <div className="container">
          <div className="feat-row reverse">
            <div className="feat-img">
              <img src="https://images.unsplash.com/photo-1484820540004-14229fe36ca4?w=1000&q=80" alt=""/>
            </div>
            <div>
              <span className="eyebrow">What to expect</span>
              <h2 style={{ marginTop: 12 }}>A place for <em>parents</em> to breathe.</h2>
              <p style={{ marginTop: 16, fontSize: '1.05rem' }}>
                We know how much those early years can take out of you. Come in, put the kettle on (we'll do it, actually), and let the kids do their thing while you have a proper chat.
              </p>
              <div className="stat-grid" style={{ marginTop: 24 }}>
                {[
                  { n: '40+', l: 'Families weekly' },
                  { n: '9:30', l: 'Doors open' },
                  { n: '£2', l: 'Per family' },
                  { n: '1887', l: 'Caring since' },
                ].map((s,i) => (
                  <div key={i}>
                    <div style={{ fontFamily: 'var(--font-display)', fontSize: '2.2rem', color: 'var(--c-accent)', lineHeight: 1 }}>{s.n}</div>
                    <div style={{ fontSize: 11, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--c-muted)', marginTop: 4 }}>{s.l}</div>
                  </div>
                ))}
              </div>
              <div className="hero-ctas" style={{ marginTop: 28 }}>
                <a href="#/contact" className="btn btn-primary">Come along <Icon.arrow/></a>
              </div>
            </div>
          </div>
        </div>
      </section>
    </>
  );
}

function PickleballPage() {
  return (
    <>
      <PageHead
        crumbs={[{label:'Ministries', href:'#/ministries'}, {label:'Pickleball Club'}]}
        title={<>Bethany <em style={{fontStyle:'italic',color:'var(--c-accent)',fontWeight:400}}>Pickleball</em> Club</>}
        lede="Our brand-new community pickleball club. All levels welcome — bring a friend, borrow a paddle, join the fun."
        chips={['Thursdays · 7:00 PM', 'Beginners welcome', 'Paddles provided', 'Church Hall']}
      />
      <section style={{ paddingTop: 40 }}>
        <div className="container">
          <div className="pickle-hero">
            <div style={{ maxWidth: 600, position: 'relative', zIndex: 2 }}>
              <div className="eyebrow" style={{ color: '#E6BE6E' }}>New · Community club</div>
              <h2 style={{ marginTop: 12, color: '#fff' }}>The fastest-growing sport<br/>in the <em style={{ color: '#E6BE6E', fontStyle: 'italic', fontWeight: 400 }}>friendliest</em> hall in town.</h2>
              <p style={{ marginTop: 16, fontSize: '1.1rem' }}>
                Three courts set up every Thursday evening in the church hall. No experience? No problem — we run a free 20-minute beginner session at 7:00 PM sharp.
              </p>
              <div className="stat-grid">
                {[
                  { n: '3', l: 'Courts each week' },
                  { n: '60+', l: 'Active members' },
                  { n: '£3', l: 'Drop-in fee' },
                  { n: 'All', l: 'Levels welcome' },
                ].map((s,i) => (
                  <div key={i} className="stat-block">
                    <div className="stat-n">{s.n}</div>
                    <div className="stat-l">{s.l}</div>
                  </div>
                ))}
              </div>
              <div className="hero-ctas" style={{ marginTop: 32 }}>
                <a href="#" className="btn btn-accent">Join a session <Icon.arrow/></a>
                <a href="#" className="btn" style={{ background: 'rgba(255,255,255,0.12)', color: '#fff' }}>WhatsApp group</a>
              </div>
            </div>
          </div>

          <div className="grid grid-3" style={{ marginTop: 48 }}>
            {[
              { t: 'Beginner Night', s: 'Thursdays 7:00–7:30 PM. Coaching, basics, and a gentle introduction. Paddles provided — just wear trainers.', tag: 'Every Week' },
              { t: 'Open Play', s: 'Thursdays 7:30–9:30 PM. Round-robin style — new partners each round. Skill-matched where possible.', tag: 'Every Week' },
              { t: 'Monthly Mixer', s: 'Last Saturday of each month. Food, prizes, and a slightly more competitive vibe. Partners drawn at random.', tag: 'Monthly' },
            ].map((b, i) => (
              <div key={i} className="card" style={{ padding: 28 }}>
                <span className="eyebrow">{b.tag}</span>
                <h3 style={{ marginTop: 12, marginBottom: 12 }}>{b.t}</h3>
                <p style={{ color: 'var(--c-ink-2)' }}>{b.s}</p>
              </div>
            ))}
          </div>
        </div>
      </section>
    </>
  );
}

const MINISTRY_PAGES = {
  'children': ChildrenPage,
  'youth': YouthPage,
  'parents-toddlers': ParentsToddlersPage,
  'pickleball': PickleballPage,
};

function MinistryRouter({ slug }) {
  const Comp = MINISTRY_PAGES[slug];
  if (!Comp) return <MinistriesPage/>;
  return <Comp/>;
}

Object.assign(window, { MinistriesPage, ChildrenPage, YouthPage, ParentsToddlersPage, PickleballPage, MinistryRouter });