const { Button: HBtn, Seal: HSeal, Mark: HMark, Logo: HLogo } = window.PYPAAluvaCentreDesignSystem_9d12c1;

function Home({ go }) {
  const S = window.SITE;
  const ev = S.nextEvent;

  return (
    <div>
      {/* 1 — Hero */}
      <section style={{ position: "relative", minHeight: "min(92vh,860px)", display: "flex", alignItems: "flex-end", marginTop: "-73px" }}>
        <window.Photo ratio="auto" src={S.img.hero} label="Hero photograph" note="Real young people of the Centre" tone="deep" align="corner" style={{ position: "absolute", inset: 0, aspectRatio: "auto" }} />
        <div style={{ position: "absolute", inset: 0, background: "linear-gradient(180deg,rgba(31,36,30,.34) 0%,rgba(31,36,30,.20) 40%,rgba(31,36,30,.72) 100%)" }} />
        <window.Container style={{ position: "relative", paddingTop: 140, paddingBottom: "clamp(56px,8vw,104px)", color: "#F4F2EC" }}>

          <window.Reveal delay={80}>
            <window.Display style={{ color: "#F4F2EC", maxWidth: "16ch" }}>A Christ-centered community of young people.</window.Display>
          </window.Reveal>
          <window.Reveal delay={160}>
            <div style={{ display: "flex", gap: 14, marginTop: 36, flexWrap: "wrap" }}>
              <HBtn size="lg" variant="inverse" onClick={() => go("get-involved")}>Get involved</HBtn>
              <HBtn size="lg" variant="quiet" onClick={() => go("about")} style={{ color: "#F4F2EC" }}>What we do →</HBtn>
            </div>
          </window.Reveal>
        </window.Container>
      </section>

      {/* 2 — Positioning statement */}
      <window.Section tone="paper" pad="lg">
        <window.Container narrow style={{ textAlign: "center" }}>
          <window.Reveal>
            <p style={{ fontFamily: "var(--font-serif)", fontWeight: 300, fontSize: "clamp(26px,3.4vw,44px)", lineHeight: 1.28, letterSpacing: "-.015em", textWrap: "pretty", margin: 0, color: "var(--c-ink)" }}>
              Bringing young people together in Christ, growing together, and going out to serve.
            </p>
          </window.Reveal>
        </window.Container>
      </window.Section>

      {/* 3 — Four pillars */}
      <window.Section tone="linen" pad="md">
        <window.Container>
          <window.Reveal><window.Eyebrow style={{ marginBottom: 40 }}>What we're about</window.Eyebrow></window.Reveal>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit,minmax(220px,1fr))", gap: 1, background: "var(--c-rule)", border: "1px solid var(--c-rule)" }}>
            {S.pillars.map((p, i) => (
              <window.Reveal key={p.key} delay={i * 70} style={{ background: "var(--c-linen)" }}>
                <div style={{ padding: "clamp(28px,3vw,40px)", height: "100%", display: "flex", flexDirection: "column", gap: 12 }}>
                  <span style={{ fontFamily: "var(--font-sans)", fontSize: 12, color: "var(--c-ink-faint)" }}>{String(i + 1).padStart(2, "0")}</span>
                  <window.Heading as="h3" style={{ fontSize: "clamp(24px,2.4vw,30px)" }}>{p.title}</window.Heading>
                  <p style={{ fontSize: 15.5, lineHeight: 1.6, color: "var(--c-ink-soft)", margin: 0, textWrap: "pretty" }}>{p.line}</p>
                </div>
              </window.Reveal>
            ))}
          </div>
        </window.Container>
      </window.Section>

      {/* 4 — Next up (falls back to the regular rhythm) */}
      <window.Section tone="paper" pad="md">
        <window.Container>
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "clamp(28px,5vw,72px)", alignItems: "center" }} className="pypa-split">
            <window.Reveal>
              <window.Photo ratio="4 / 3" src={ev ? S.img.bright : S.img.community} label={ev ? "Event photograph" : "Gathering photograph"} note={ev ? ev.title : "A recent Saturday together"} />
            </window.Reveal>
            <window.Reveal delay={90}>
              <window.Eyebrow style={{ marginBottom: 18 }}>{ev ? "Next up" : "Every week"}</window.Eyebrow>
              {ev ? (
                <>
                  <window.Heading>{ev.title}</window.Heading>
                  <p style={{ fontFamily: "var(--font-sans)", fontSize: 15, letterSpacing: ".01em", color: "var(--c-sage-deep)", margin: "16px 0 0", fontWeight: 500 }}>
                    {S.fmtDay(ev.date)} {ev.dateLabel} · {ev.time} · {ev.place}
                  </p>
                  <p style={{ fontSize: 17, lineHeight: 1.6, color: "var(--c-ink-soft)", margin: "14px 0 28px", maxWidth: "42ch", textWrap: "pretty" }}>{ev.summary}</p>
                </>
              ) : (
                <>
                  <window.Heading>{S.programmes[0].title}</window.Heading>
                  <p style={{ fontFamily: "var(--font-sans)", fontSize: 15, color: "var(--c-sage-deep)", margin: "16px 0 0", fontWeight: 500 }}>{S.programmes[0].cadence} · {S.programmes[0].time}</p>
                  <p style={{ fontSize: 17, lineHeight: 1.6, color: "var(--c-ink-soft)", margin: "14px 0 28px", maxWidth: "42ch", textWrap: "pretty" }}>{S.programmes[0].summary}</p>
                </>
              )}
              <HBtn variant="secondary" onClick={() => go("programmes")}>See all programmes</HBtn>
            </window.Reveal>
          </div>
        </window.Container>
      </window.Section>

      {/* 5 — What's been happening (evidence) */}
      <window.Section tone="linen" pad="md">
        <window.Container>
          <window.Reveal><div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", flexWrap: "wrap", gap: 12, marginBottom: 36 }}>
            <window.Eyebrow>What's been happening</window.Eyebrow>
            <a href="#/programmes" onClick={(e) => { e.preventDefault(); go("programmes"); }} style={{ fontSize: 15, color: "var(--c-sage-deep)" }}>See more →</a>
          </div></window.Reveal>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit,minmax(220px,1fr))", gap: 20 }}>
            {[["Worship evening", S.img.day], ["Serving together", S.img.hands], ["Bible study", S.img.community], ["Fellowship", S.img.front]].map(([cap, im], i) => (
              <window.Reveal key={cap} delay={i * 60}>
                <window.Photo ratio="16 / 11" src={im} label="Photograph" note={cap} />
                <p style={{ fontFamily: "var(--font-sans)", fontSize: 13, color: "var(--c-ink-mute)", marginTop: 10 }}>{cap}</p>
              </window.Reveal>
            ))}
          </div>
        </window.Container>
      </window.Section>

      {/* 6 — Saved to serve */}
      <window.Section tone="paper" pad="md">
        <window.Container>
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "clamp(28px,5vw,72px)", alignItems: "center" }} className="pypa-split pypa-split-rev">
            <window.Reveal delay={90} style={{ order: 2 }}>
              <window.Eyebrow style={{ marginBottom: 18 }}>Saved to serve</window.Eyebrow>
              <window.Heading>Faith that moves outward.</window.Heading>
              <p style={{ fontSize: 17, lineHeight: 1.65, color: "var(--c-ink-soft)", margin: "16px 0 28px", maxWidth: "44ch", textWrap: "pretty" }}>
                We don't serve because we are perfect. We serve because we have received. From outreach around Aluva to helping the churches our members come from — service is an attitude toward life, not an event on a calendar.
              </p>
              <HBtn variant="secondary" onClick={() => go("serve")}>How we serve</HBtn>
            </window.Reveal>
            <window.Reveal style={{ order: 1 }}>
              <window.Photo ratio="4 / 3" src={S.img.hands} label="Service photograph" note="Members serving in the community" />
            </window.Reveal>
          </div>
        </window.Container>
      </window.Section>

      {/* 7 — A voice */}
      <window.Section tone="deep" pad="md" style={{ position: "relative", overflow: "hidden" }}>
        <div style={{ position: "absolute", right: "-8%", bottom: "-22%", opacity: .07, pointerEvents: "none" }}><HSeal size={520} tone="paper" /></div>
        <window.Container narrow style={{ position: "relative", textAlign: "center" }}>
          <window.Reveal>
            <blockquote style={{ margin: 0 }}>
              <p style={{ fontFamily: "var(--font-serif)", fontWeight: 300, fontSize: "clamp(24px,3vw,36px)", lineHeight: 1.32, letterSpacing: "-.01em", color: "#F4F2EC", textWrap: "pretty", margin: 0, fontStyle: S.voice.pending ? "italic" : "normal" }}>
                “{S.voice.text}”
              </p>
              <footer style={{ marginTop: 28, display: "inline-flex", alignItems: "center", gap: 14 }}>
                <span style={{ display: "grid", placeItems: "center", width: 44, height: 44, borderRadius: "50%", background: "var(--c-deep-soft)", border: "1px solid rgba(244,242,236,.16)" }}><HMark size={22} tone="paper" /></span>
                <span style={{ textAlign: "left" }}>
                  <span style={{ display: "block", fontSize: 15, color: "#F4F2EC" }}>{S.voice.name}</span>
                  <span style={{ display: "block", fontSize: 13, color: "rgba(244,242,236,.55)" }}>{S.voice.role}</span>
                </span>
              </footer>
            </blockquote>
          </window.Reveal>
        </window.Container>
      </window.Section>

      {/* 8 — The PYPA relationship */}
      <window.Section tone="paper" pad="md">
        <window.Container>
          <window.Reveal>
            <div style={{ display: "grid", gridTemplateColumns: "auto 1fr", gap: "clamp(24px,4vw,56px)", alignItems: "center" }} className="pypa-lineage">
              <HSeal size={132} />
              <div>
                <window.Eyebrow style={{ marginBottom: 16 }}>Part of PYPA</window.Eyebrow>
                <p style={{ fontFamily: "var(--font-serif)", fontWeight: 300, fontSize: "clamp(20px,2.2vw,28px)", lineHeight: 1.4, letterSpacing: "-.01em", color: "var(--c-ink)", margin: 0, maxWidth: "40ch", textWrap: "pretty" }}>
                  PYPA Aluva Centre is a local Centre of the Pentecostal Young People's Association, within the Indian Pentecostal Church.
                </p>
                <div style={{ display: "flex", alignItems: "center", gap: 10, flexWrap: "wrap", marginTop: 22 }}>
                  {S.lineage.map((n, i) => (
                    <React.Fragment key={n}>
                      <span style={{ fontFamily: "var(--font-sans)", fontSize: 13, letterSpacing: ".04em", color: i === S.lineage.length - 1 ? "var(--c-sage-deep)" : "var(--c-ink-mute)", fontWeight: i === S.lineage.length - 1 ? 600 : 400 }}>{n}</span>
                      {i < S.lineage.length - 1 && <span aria-hidden="true" style={{ color: "var(--c-rule-strong)" }}>→</span>}
                    </React.Fragment>
                  ))}
                </div>
                <div style={{ marginTop: 26 }}><HBtn variant="quiet" onClick={() => go("about")}>About the Centre →</HBtn></div>
              </div>
            </div>
          </window.Reveal>
        </window.Container>
      </window.Section>

      {/* 9 — Invitation */}
      <window.Section tone="linen" pad="lg">
        <window.Container narrow style={{ textAlign: "center" }}>
          <window.Reveal>
            <window.Heading style={{ fontSize: "clamp(32px,5vw,60px)" }}>Come as you are.</window.Heading>
            <p style={{ fontSize: "clamp(17px,1.5vw,20px)", lineHeight: 1.6, color: "var(--c-ink-soft)", margin: "18px auto 32px", maxWidth: "34ch", textWrap: "pretty" }}>
              We meet every {S.settings.meetDay} in {S.settings.area.split(",")[0]}. There is a place for you here — bring a friend, or come on your own.
            </p>
            <div style={{ display: "flex", gap: 14, justifyContent: "center", flexWrap: "wrap" }}>
              <HBtn size="lg" onClick={() => go("get-involved")}>Get involved</HBtn>
              <HBtn size="lg" variant="secondary" href={S.settings.whatsapp}>WhatsApp</HBtn>
            </div>
          </window.Reveal>
        </window.Container>
      </window.Section>
    </div>
  );
}
window.Home = Home;
