function ServicesScreen({ onNavigate }) {
  const { Badge, Card, Eyebrow, SectionHeading, Button, Input } = window.GT;

  const services = [
    { tag: "Sundays · 9:30 a.m.", badge: "teal", title: "Sunday Morning Bible Study", body: "In-depth Bible studies in small groups help foster a deeper understanding of God's Word. We meet every Sunday morning to learn and grow to be more like Jesus, our Lord and Savior.", photo: { src: "photo-romans.png", tone: "teal" } },
    { tag: "Sundays · 10:45 a.m.", badge: "teal", title: "Sunday Worship", body: "We meet together as a body to worship our Lord and Savior, Jesus — music lifted up to praise Him, an encouraging time of prayer, and the preaching of God's Word to build us up and make us one in Jesus' name.", photo: { tone: "slate" } },
    { tag: "Wednesdays · 6:00 p.m.", badge: "teal", title: "Prayer Gathering", body: "Joining together to pray for our church, our families, our community, and our world.", photo: { tone: "teal" } },
    { tag: "Thursdays · 9:30 a.m. & 6:30 p.m.", badge: "teal", title: "Women's Bible Study", body: "The inductive Bible study method is an investigative approach to Scripture in three steps: observation, interpretation, and application. Come grow in God's Word together.", photo: { tone: "leaf" } },
    { tag: "Ongoing", badge: "leaf", title: "Community Outreach", body: "Sleep in Heavenly Peace, Pregnancy Life Line, and Operation Christmas Child are just a few of the ways we minister to our community and our world.", photo: { tone: "leaf" } },
    { tag: "First Monday · Monthly", badge: "lime", title: "CHICS", body: "Bring finger foods, your own drink, and come have a night of fun with other women in our community!", photo: { tone: "slate" } },
  ];

  return (
    <div>
      {/* Page header */}
      <div style={{ background: "var(--slate-700)", padding: "var(--space-9) 0" }}>
        <div style={{ maxWidth: "var(--container-xl)", margin: "0 auto", padding: "0 var(--gutter)" }}>
          <Eyebrow tone="light">What We Do</Eyebrow>
          <h1 style={{ fontFamily: "var(--font-display)", fontSize: "var(--text-h1)", fontWeight: 600, color: "var(--white)", margin: "var(--space-2) 0 0" }}>Services & Gatherings</h1>
          <p style={{ color: "var(--slate-300)", fontSize: "var(--text-lead)", maxWidth: "40rem", margin: "var(--space-3) 0 0" }}>
            Every gathering is an invitation to grow in grace and walk in truth. Here's where and when we meet.
          </p>
        </div>
      </div>

      {/* Services list */}
      <Section bg="page">
        <div style={{ display: "flex", flexDirection: "column", gap: "var(--space-6)" }}>
          {services.map((s, i) => (
            <Card key={s.title} padding="none" as="article" style={{ display: "grid", gridTemplateColumns: i % 2 === 0 ? "0.9fr 1.1fr" : "1.1fr 0.9fr", overflow: "hidden" }} className="svc-row">
              <Photo src={s.photo.src} label={s.title} ratio="16 / 10" tone={s.photo.tone} rounded="none" style={{ order: i % 2 === 0 ? 0 : 1, minHeight: 220 }} />
              <div style={{ padding: "var(--space-7)", display: "flex", flexDirection: "column", gap: "var(--space-3)", justifyContent: "center" }}>
                <Badge tone={s.badge}>{s.tag}</Badge>
                <h2 style={{ margin: 0, fontSize: "var(--text-h2)" }}>{s.title}</h2>
                <p style={{ margin: 0, color: "var(--text-body)", lineHeight: 1.7 }}>{s.body}</p>
              </div>
            </Card>
          ))}
        </div>
      </Section>

      {/* Contact form */}
      <Section bg="sunken" id="contact">
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "var(--space-9)", alignItems: "start" }} className="two-col">
          <SectionHeading eyebrow="Get in Touch" title="We'd love to connect" intro="We welcome your questions and look forward to connecting with you and supporting your spiritual journey." />
          <Card padding="lg" topRule>
            <form style={{ display: "flex", flexDirection: "column", gap: "var(--space-4)" }} onSubmit={(e) => e.preventDefault()}>
              <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "var(--space-4)" }}>
                <Input label="Name" placeholder="Your name" required />
                <Input label="Email" type="email" placeholder="you@example.com" required />
              </div>
              <Input label="Message" as="textarea" placeholder="How can we help, or how can we pray for you?" />
              <Button variant="primary" type="submit" style={{ alignSelf: "flex-start" }}>Submit</Button>
            </form>
          </Card>
        </div>
      </Section>
    </div>
  );
}

window.ServicesScreen = ServicesScreen;