const { Button: PBtn, EventCard: PEventCard, Tag: PTag } = window.PYPAAluvaCentreDesignSystem_9d12c1;

function Programmes({ go }) {
  const S = window.SITE;
  const ev = S.nextEvent;
  return (
    <div>
      <window.PageHero eyebrow="Programmes & Events" title="What's on, and what runs every week." lede="The easiest way to begin is simply to turn up. Here is what happens regularly, and what's coming next." />

      {/* Next up */}
      <window.Section tone="linen" pad="md">
        <window.Container>
          <window.Reveal><window.Eyebrow style={{ marginBottom: 32 }}>{ev ? "Next up" : "This week"}</window.Eyebrow></window.Reveal>
          <window.Reveal delay={70}>
            <div style={{ display: "grid", gridTemplateColumns: "1.1fr 1fr", gap: 0, border: "1px solid var(--c-rule)", background: "var(--c-paper-raised)" }} className="pypa-split">
              <window.Photo ratio="16 / 11" label={ev ? "Event photograph" : "Gathering photograph"} note={ev ? ev.title : "A recent Saturday"} tone="linen" style={{ aspectRatio: "auto", minHeight: 280 }} />
              <div style={{ padding: "clamp(28px,4vw,48px)", display: "flex", flexDirection: "column", justifyContent: "center" }}>
                {ev ? (<>
                  <PTag>{ev.category}</PTag>
                  <window.Heading style={{ fontSize: "clamp(26px,3vw,38px)", marginTop: 16 }}>{ev.title}</window.Heading>
                  <p style={{ fontFamily: "var(--font-sans)", fontSize: 15, color: "var(--c-sage-deep)", fontWeight: 500, margin: "14px 0 0" }}>{S.fmtDay(ev.date)} {ev.dateLabel} · {ev.time} · {ev.place}</p>
                  <p style={{ fontSize: 16.5, lineHeight: 1.6, color: "var(--c-ink-soft)", margin: "14px 0 26px", maxWidth: "40ch", textWrap: "pretty" }}>{ev.summary}</p>
                </>) : (<>
                  <window.Heading style={{ fontSize: "clamp(26px,3vw,38px)" }}>{S.programmes[0].title}</window.Heading>
                  <p style={{ fontFamily: "var(--font-sans)", fontSize: 15, color: "var(--c-sage-deep)", fontWeight: 500, margin: "14px 0 0" }}>{S.programmes[0].cadence} · {S.programmes[0].time}</p>
                  <p style={{ fontSize: 16.5, lineHeight: 1.6, color: "var(--c-ink-soft)", margin: "14px 0 26px", maxWidth: "40ch", textWrap: "pretty" }}>{S.programmes[0].summary}</p>
                </>)}
                <div><PBtn variant="secondary" href={S.settings.whatsapp}>Ask about it</PBtn></div>
              </div>
            </div>
          </window.Reveal>
        </window.Container>
      </window.Section>

      {/* Regular rhythm */}
      <window.Section tone="paper" pad="md">
        <window.Container>
          <window.Reveal><window.Eyebrow style={{ marginBottom: 40 }}>The regular rhythm</window.Eyebrow></window.Reveal>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit,minmax(260px,1fr))", gap: 22 }}>
            {S.programmes.map((p, i) => (
              <window.Reveal key={p.title} delay={i * 60}>
                <div style={{ border: "1px solid var(--c-rule)", background: "var(--c-paper-raised)", padding: "clamp(24px,2.6vw,32px)", height: "100%", display: "flex", flexDirection: "column", gap: 12 }}>
                  <PTag>{p.cadence}</PTag>
                  <window.Heading as="h3" style={{ fontSize: "clamp(22px,2.2vw,28px)" }}>{p.title}</window.Heading>
                  <p style={{ fontSize: 15.5, lineHeight: 1.6, color: "var(--c-ink-soft)", margin: 0, textWrap: "pretty" }}>{p.summary}</p>
                  <span style={{ fontFamily: "var(--font-sans)", fontSize: 13, color: "var(--c-ink-mute)", marginTop: "auto", paddingTop: 8 }}>{p.time}</span>
                </div>
              </window.Reveal>
            ))}
          </div>
        </window.Container>
      </window.Section>

      {/* Gallery / past */}
      <window.Section tone="linen" pad="md">
        <window.Container>
          <window.Reveal><window.Eyebrow style={{ marginBottom: 36 }}>Looking back</window.Eyebrow></window.Reveal>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit,minmax(200px,1fr))", gap: 18 }}>
            {["Worship night", "Retreat", "Serving day", "Study evening", "Fellowship", "Mission trip"].map((cap, i) => (
              <window.Reveal key={cap} delay={i * 45}><window.Photo ratio="1 / 1" label="Photograph" note={cap} /></window.Reveal>
            ))}
          </div>
          <window.Reveal><p style={{ fontSize: 14, color: "var(--c-ink-mute)", marginTop: 24, textAlign: "center" }}>Real photographs from the Centre will fill this space.</p></window.Reveal>
        </window.Container>
      </window.Section>

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