const { Button: SBtn, VerseBlock: SVerse } = window.PYPAAluvaCentreDesignSystem_9d12c1;

function Serve({ go }) {
  const S = window.SITE;
  return (
    <div>
      <window.PageHero eyebrow="Saved to Serve" title="We serve because we have received." lede="Service is not an occasional activity attached to a programme. It is an attitude toward life — faith moving outward, into real needs and real people." />

      {/* Statement */}
      <window.Section tone="deep" pad="md" style={{ position: "relative", overflow: "hidden" }}>
        <div style={{ position: "absolute", left: "-6%", top: "-30%", opacity: .06, pointerEvents: "none" }}>
          <window.Photo ratio="1/1" style={{ display: "none" }} />
        </div>
        <window.Container narrow style={{ textAlign: "center" }}>
          <window.Reveal>
            <p style={{ fontFamily: "var(--font-serif)", fontWeight: 300, fontSize: "clamp(24px,3.2vw,40px)", lineHeight: 1.3, letterSpacing: "-.01em", color: "#F4F2EC", margin: 0, textWrap: "pretty" }}>
              What we receive should become something we are willing to give — our time, our abilities, our presence.
            </p>
          </window.Reveal>
        </window.Container>
      </window.Section>

      {/* Ways we serve */}
      <window.Section tone="paper" pad="md">
        <window.Container>
          <window.Reveal><window.Eyebrow style={{ marginBottom: 40 }}>How we serve</window.Eyebrow></window.Reveal>
          <div style={{ display: "grid", gap: 0 }}>
            {S.service.map((s, i) => (
              <window.Reveal key={s.title} delay={i * 60}>
                <div style={{ display: "grid", gridTemplateColumns: "minmax(0,1fr) minmax(0,1.2fr)", gap: "clamp(20px,4vw,56px)", padding: "clamp(24px,3vw,40px) 0", borderTop: "1px solid var(--c-rule)", alignItems: "center" }} className="pypa-serve-row">
                  <div>
                    <window.Heading as="h3" style={{ fontSize: "clamp(24px,2.6vw,34px)" }}>{s.title}</window.Heading>
                    <p style={{ fontFamily: "var(--font-sans)", fontSize: 13, letterSpacing: ".04em", color: "var(--c-ink-mute)", margin: "10px 0 0" }}>{s.place}</p>
                    <p style={{ fontSize: 16.5, lineHeight: 1.65, color: "var(--c-ink-soft)", margin: "14px 0 0", maxWidth: "40ch", textWrap: "pretty" }}>{s.summary}</p>
                  </div>
                  <window.Photo ratio="16 / 10" label="Service photograph" note={s.title} />
                </div>
              </window.Reveal>
            ))}
          </div>
        </window.Container>
      </window.Section>

      {/* Verse */}
      <window.Section tone="linen" pad="md">
        <window.Container narrow>
          <window.Reveal>
            <SVerse text="Arise, shine, for your light has come." reference="Isaiah 60:1" size="lg" align="center" />
          </window.Reveal>
        </window.Container>
      </window.Section>

      <window.InviteBand go={go} />
    </div>
  );
}
window.Serve = Serve;