const { Button: ABtn, Seal: ASeal } = window.PYPAAluvaCentreDesignSystem_9d12c1;

function PageHero({ eyebrow, title, lede }) {
  return (
    <window.Section tone="paper" pad="md" style={{ paddingTop: "clamp(96px,12vw,150px)" }}>
      <window.Container>
        <window.Reveal><window.Eyebrow style={{ marginBottom: 20 }}>{eyebrow}</window.Eyebrow></window.Reveal>
        <window.Reveal delay={70}><window.Display style={{ maxWidth: "15ch" }}>{title}</window.Display></window.Reveal>
        {lede && <window.Reveal delay={140}><window.Lede style={{ marginTop: 28, maxWidth: "52ch" }}>{lede}</window.Lede></window.Reveal>}
      </window.Container>
    </window.Section>
  );
}
window.PageHero = PageHero;

function About({ go }) {
  const S = window.SITE;
  return (
    <div>
      <PageHero eyebrow="About" title="A community, not a calendar." lede="PYPA Aluva Centre exists to bring young people together around a Christ-centered life of faith, fellowship, growth and service — as a local expression of PYPA in the Aluva area." />

      <window.Section tone="linen" 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 / 5" label="Community photograph" note="Young people of the Centre" /></window.Reveal>
            <window.Reveal delay={90}>
              <window.Heading>Youth ministry is about people.</window.Heading>
              <p style={{ fontSize: 17, lineHeight: 1.7, color: "var(--c-ink-soft)", margin: "18px 0 0", textWrap: "pretty" }}>
                Behind every programme is a young person with questions, gifts, struggles and hopes. We want to be a place where you can encounter Christ, build genuine friendships, discover your abilities, and find how your life can contribute to something greater than yourself.
              </p>
              <p style={{ fontSize: 17, lineHeight: 1.7, color: "var(--c-ink-soft)", margin: "16px 0 0", textWrap: "pretty" }}>
                We'd rather measure belonging, growth and courage than attendance. Those are the changes that don't always appear in a report — and they're the ones that matter.
              </p>
            </window.Reveal>
          </div>
        </window.Container>
      </window.Section>

      {/* Pillars in depth */}
      <window.Section tone="paper" pad="md">
        <window.Container>
          <window.Reveal><window.Eyebrow style={{ marginBottom: 40 }}>What we believe</window.Eyebrow></window.Reveal>
          <div style={{ display: "grid", gap: 0 }}>
            {[
              ["Faith", "Christ is at the centre of everything. We want faith that can be lived honestly rather than performed publicly — with room to learn, question, reflect and grow."],
              ["Community", "Young people grow better when they don't walk alone. We build friendships across churches and backgrounds, where being known and encouraged is the norm."],
              ["Growth", "Through study, seminars, creative work and leadership opportunities, we help young people discover their gifts and use them responsibly."],
              ["Service", "Saved to serve. What we receive becomes something we give — our time, abilities and presence, offered to the church and the wider community."],
            ].map(([t, d], i) => (
              <window.Reveal key={t} delay={i * 60}>
                <div style={{ display: "grid", gridTemplateColumns: "auto 1fr", gap: "clamp(20px,4vw,56px)", padding: "28px 0", borderTop: "1px solid var(--c-rule)", alignItems: "baseline" }}>
                  <span style={{ fontFamily: "var(--font-serif)", fontWeight: 300, fontSize: "clamp(28px,3.4vw,42px)", color: "var(--c-ink)", letterSpacing: "-.02em" }}>{t}</span>
                  <p style={{ fontSize: 16.5, lineHeight: 1.65, color: "var(--c-ink-soft)", margin: 0, maxWidth: "52ch", textWrap: "pretty" }}>{d}</p>
                </div>
              </window.Reveal>
            ))}
          </div>
        </window.Container>
      </window.Section>

      {/* Lineage */}
      <window.Section tone="deep" pad="md">
        <window.Container>
          <window.Reveal>
            <div style={{ display: "grid", gridTemplateColumns: "auto 1fr", gap: "clamp(24px,4vw,56px)", alignItems: "center" }} className="pypa-lineage">
              <ASeal size={128} tone="paper" />
              <div>
                <window.Eyebrow tone="inverse" style={{ marginBottom: 16 }}>Where we belong</window.Eyebrow>
                <p style={{ fontFamily: "var(--font-serif)", fontWeight: 300, fontSize: "clamp(20px,2.2vw,28px)", lineHeight: 1.4, color: "#F4F2EC", margin: 0, maxWidth: "44ch", textWrap: "pretty" }}>
                  We are one Centre within a much larger family — not an independent organization, but a local expression of PYPA.
                </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, color: i === S.lineage.length - 1 ? "#C9AE7F" : "rgba(244,242,236,.7)", fontWeight: i === S.lineage.length - 1 ? 600 : 400 }}>{n}</span>
                      {i < S.lineage.length - 1 && <span aria-hidden="true" style={{ color: "rgba(244,242,236,.3)" }}>→</span>}
                    </React.Fragment>
                  ))}
                </div>
              </div>
            </div>
          </window.Reveal>
        </window.Container>
      </window.Section>

      {/* Leadership */}
      <window.Section tone="paper" pad="md">
        <window.Container>
          <window.Reveal><window.Eyebrow style={{ marginBottom: 8 }}>Who leads</window.Eyebrow></window.Reveal>
          <window.Reveal delay={60}><p style={{ fontSize: 15, color: "var(--c-ink-mute)", margin: "0 0 36px", maxWidth: "44ch" }}>Names and photographs to be added as the team is confirmed.</p></window.Reveal>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit,minmax(200px,1fr))", gap: 24 }}>
            {S.people.map((p, i) => (
              <window.Reveal key={p.role} delay={i * 60}>
                <window.Photo ratio="4 / 5" label="Portrait" note="To be added" />
                <div style={{ marginTop: 14 }}>
                  <div style={{ fontFamily: "var(--font-serif)", fontSize: 20, fontWeight: 300, color: "var(--c-ink-faint)" }}>Name to be added</div>
                  <div style={{ fontFamily: "var(--font-sans)", fontSize: 13, letterSpacing: ".04em", color: "var(--c-ink-mute)", marginTop: 4 }}>{p.role}</div>
                </div>
              </window.Reveal>
            ))}
          </div>
        </window.Container>
      </window.Section>

      <InviteBand go={go} />
    </div>
  );
}

function InviteBand({ go }) {
  const S = window.SITE;
  return (
    <window.Section tone="linen" pad="lg">
      <window.Container narrow style={{ textAlign: "center" }}>
        <window.Reveal>
          <window.Heading style={{ fontSize: "clamp(30px,4.5vw,52px)" }}>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}. There is a place for you here.</p>
          <div style={{ display: "flex", gap: 14, justifyContent: "center", flexWrap: "wrap" }}>
            <ABtn size="lg" onClick={() => go("get-involved")}>Get involved</ABtn>
            <ABtn size="lg" variant="secondary" href={S.settings.whatsapp}>WhatsApp</ABtn>
          </div>
        </window.Reveal>
      </window.Container>
    </window.Section>
  );
}
window.About = About;
window.InviteBand = InviteBand;
