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

  const beliefs = [
    { t: "God", b: "One eternally existing God in three persons — Father, Son, and Holy Spirit — Creator of all, perfect in love, power, holiness, and mercy." },
    { t: "Revelation", b: "God has revealed Himself through His Son, Jesus Christ, the holy Scriptures, and all of creation itself." },
    { t: "Mankind", b: "Humans, male and female, were created in God's image for His glory, appointed as caretakers of His creation." },
    { t: "The Fall", b: "In disobedience, Adam and Eve became distorted images of God, falling out of fellowship with Him and fracturing creation." },
    { t: "Salvation", b: "Jesus lived without sin, died to pay our penalty, and rose again. By grace, eternal life is offered to all who repent and believe." },
    { t: "The Church", b: "The Church is the visible body of Christ, sent into the world to glorify God and proclaim the gospel of Jesus Christ." },
  ];

  const elders = [
    { name: "Dr. Pat Smolen", role: "Pastor / Elder", photo: "portrait-pat-smolen-sq.jpg" },
    { name: "Dave Wilson", role: "Worship Pastor / Elder", photo: "portrait-dave-wilson-sq.jpg" },
    { name: "Rev. Phil Rector", role: "Elder", photo: "portrait-phil-rector-sq.jpg" },
  ];

  return (
    <div>
      {/* Header + mission */}
      <div style={{ background: "var(--slate-700)", padding: "var(--space-9) 0" }}>
        <div style={{ maxWidth: "var(--container-xl)", margin: "0 auto", padding: "0 var(--gutter)", display: "grid", gridTemplateColumns: "1.2fr 0.8fr", gap: "var(--space-8)", alignItems: "center" }} className="two-col">
          <div>
            <Eyebrow tone="light">Our Story</Eyebrow>
            <h1 style={{ fontFamily: "var(--font-display)", fontSize: "var(--text-h1)", fontWeight: 600, color: "var(--white)", margin: "var(--space-2) 0 var(--space-4)" }}>
              Made up of believers, sent on mission
            </h1>
            <p style={{ color: "var(--slate-300)", fontSize: "var(--text-lead)", lineHeight: 1.7, margin: 0 }}>
              We share in the Great Commandment and the Great Commission — leading people to Jesus
              Christ, developing them to Christ-like maturity, and equipping them for ministry in the
              church, life, and mission in the world, in order to magnify God.
            </p>
            <div style={{ display: "flex", gap: "var(--space-2)", marginTop: "var(--space-5)", flexWrap: "wrap" }}>
              <Badge tone="teal" solid>Southern Baptist</Badge>
              <Badge tone="lime" solid>Baptist Faith &amp; Message 2000</Badge>
            </div>
          </div>
          <Photo src="logo-badge-slate.png" label="Grace & Truth Church" ratio="1 / 1" rounded="lg" />
        </div>
      </div>

      {/* Scripture */}
      <Section bg="page">
        <div style={{ display: "flex", justifyContent: "center" }}>
          <ScriptureQuote reference="John 1:14" translation="CSB" size="md" align="center">
            …full of grace and truth.
          </ScriptureQuote>
        </div>
      </Section>

      {/* Core beliefs */}
      <Section bg="sunken">
        <SectionHeading align="center" eyebrow="Core Beliefs" title="Rooted in the Word" intro="All of our teaching and ministry is rooted in and flows out of these biblical doctrines." />
        <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: "var(--space-5)", marginTop: "var(--space-7)" }} className="beliefs-grid">
          {beliefs.map((x, i) => (
            <Card key={x.t} padding="lg" topRule={i === 0}>
              <div style={{ fontFamily: "var(--font-label)", fontSize: 12, fontWeight: 700, letterSpacing: "0.14em", textTransform: "uppercase", color: "var(--text-accent)", marginBottom: 8 }}>0{i + 1}</div>
              <h3 style={{ margin: "0 0 var(--space-2)", fontSize: "var(--text-h3)" }}>{x.t}</h3>
              <p style={{ margin: 0, fontSize: "var(--text-sm)", color: "var(--text-body)", lineHeight: 1.65 }}>{x.b}</p>
            </Card>
          ))}
        </div>
        <div style={{ textAlign: "center", marginTop: "var(--space-7)" }}>
          <Button variant="secondary" as="a" href="https://www.sbc.net/knowjesus/theplan/" target="_blank" rel="noopener">How to Become a Christian</Button>
        </div>
      </Section>

      {/* Elders */}
      <Section bg="page">
        <SectionHeading align="center" eyebrow="Our Elders" title="Leadership that shepherds" />
        <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: "var(--space-6)", marginTop: "var(--space-7)", maxWidth: "60rem", marginInline: "auto" }} className="beliefs-grid">
          {elders.map((e) => (
            <div key={e.name} style={{ display: "flex", flexDirection: "column", alignItems: "center", textAlign: "center", gap: "var(--space-3)" }}>
              <Photo src={e.photo} label={e.name} ratio="1 / 1" tone="slate" rounded="md" style={{ width: 150, borderRadius: "var(--radius-circle)" }} />
              <div>
                <h3 style={{ margin: 0, fontSize: "var(--text-h4)" }}>{e.name}</h3>
                <p style={{ margin: "2px 0 0", fontFamily: "var(--font-label)", fontSize: 12, fontWeight: 700, letterSpacing: "0.12em", textTransform: "uppercase", color: "var(--text-muted)" }}>{e.role}</p>
              </div>
            </div>
          ))}
        </div>
      </Section>
    </div>
  );
}

window.AboutScreen = AboutScreen;