function HomeScreen({ onNavigate }) {
  const { Button, Badge, Card, Eyebrow, SectionHeading, ScriptureQuote, ServiceTimeCard } = window.GT;
  const heroBg = (window.GTC_ASSET_BASE || "") + "assets/photo-worship-congregation.jpg";

  const rhythm = [
    { icon: "book-open", title: "Sunday Bible Study", schedule: "Sundays · 9:30 a.m.", note: "In-depth study in small groups." },
    { icon: "church", title: "Sunday Worship", schedule: "Sundays · 10:45 a.m.", note: "Music, prayer, and the preaching of God's Word." },
    { icon: "hand", title: "Prayer Gathering", schedule: "Wednesdays · 6:00 p.m.", note: "Praying for our church, families, and world." },
    { icon: "flower-2", title: "Women's Bible Study", schedule: "Thursdays · 9:30 a.m. & 6:30 p.m.", note: "The inductive study method — observe, interpret, apply." },
  ];

  const studies = [
    { src: "photo-romans.png", tone: "teal", tag: "Sermon Series", badge: "teal", title: "Romans", note: "A verse-by-verse journey through Paul's letter to the church in Rome." },
    { tone: "leaf", tag: "Outreach", badge: "leaf", title: "Operation Christmas Child", note: "Sleep in Heavenly Peace, Pregnancy Life Line, and more." },
    { src: "ministry-chics.png", tone: "slate", tag: "Women · Monthly", badge: "lime", title: "CHICS", note: "First Monday each month — finger foods, fellowship, and fun." },
  ];

  return (
    <div>
      {/* ---- Hero ---- */}
      <div style={{ position: "relative", background: `linear-gradient(150deg, rgba(78,96,110,0.86) 0%, rgba(60,76,89,0.90) 50%, rgba(33,43,51,0.94) 100%), url("${heroBg}") center 32% / cover`, overflow: "hidden" }}>
        <div style={{ position: "absolute", inset: 0, background: "radial-gradient(55% 75% at 80% 12%, rgba(168,202,85,0.16), transparent 60%)" }}></div>
        <div style={{ position: "relative", maxWidth: "52rem", margin: "0 auto", padding: "var(--space-12) var(--gutter) var(--space-10)", display: "flex", flexDirection: "column", alignItems: "center", textAlign: "center", gap: "var(--space-5)" }}>
          <Eyebrow tone="light">Welcome to Grace &amp; Truth Church</Eyebrow>
          <h1 style={{ fontFamily: "var(--font-display)", fontSize: "var(--text-display-1)", fontWeight: 600, lineHeight: 1.06, letterSpacing: "-0.02em", color: "var(--white)", margin: 0 }}>
            Where grace restores,<br />and His truth <em style={{ color: "var(--lime-400)", fontWeight: 500, fontStyle: "italic" }}>anchors.</em>
          </h1>
          <p style={{ fontSize: "var(--text-lead)", lineHeight: "var(--leading-relaxed)", color: "var(--slate-300)", maxWidth: "36rem", margin: 0 }}>
            A Southern Baptist congregation in Branson West — glorifying Christ through faithful
            teaching of His Word, heartfelt worship, and genuine community.
          </p>
          <div style={{ display: "flex", gap: "var(--space-3)", flexWrap: "wrap", justifyContent: "center", marginTop: "var(--space-2)" }}>
            <Button variant="accent" size="lg" onClick={() => onNavigate("services")}>Plan Your Visit</Button>
            <Button variant="secondary" size="lg" style={{ color: "var(--white)", borderColor: "rgba(255,255,255,0.4)" }} onClick={() => onNavigate("about")}>What We Believe</Button>
          </div>
        </div>
      </div>

      {/* ---- Welcome ---- */}
      <Section bg="page">
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "var(--space-9)", alignItems: "center" }} className="two-col">
          <Photo src="photo-web.png" label="Grace & Truth" ratio="1.9 / 1" rounded="lg" style={{ boxShadow: "var(--shadow-lg)" }} />
          <div>
            <SectionHeading
              eyebrow="Growing in Grace and Truth"
              title="A place to grow in grace and walk in truth"
              intro="The Christian life is a journey shaped by the steady rhythm of grace and truth. Grace reminds us we are always welcomed, always loved, always forgiven in Christ. Truth reminds us that God's Word is our compass — calling us to holiness, wisdom, and faithful obedience."
            />
            <div style={{ marginTop: "var(--space-5)" }}>
              <Button variant="link" as="button" onClick={() => onNavigate("about")}>Read our story →</Button>
            </div>
          </div>
        </div>
      </Section>

      {/* ---- Weekly rhythm ---- */}
      <Section bg="sunken">
        <SectionHeading align="center" eyebrow="Gather With Us" title="Our weekly rhythm" />
        <div style={{ display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: "var(--space-4)", marginTop: "var(--space-7)" }} className="rhythm-grid">
          {rhythm.map((r) => (
            <ServiceTimeCard key={r.title} icon={<i data-lucide={r.icon}></i>} title={r.title} schedule={r.schedule} note={r.note} />
          ))}
        </div>
      </Section>

      {/* ---- Scripture band ---- */}
      <Section bg="inverse">
        <div style={{ display: "flex", justifyContent: "center" }}>
          <ScriptureQuote reference="John 1:14" translation="CSB" tone="light" size="lg" align="center">
            The Word became flesh and dwelt among us. We observed His glory, the glory as the one and
            only Son from the Father, full of grace and truth.
          </ScriptureQuote>
        </div>
      </Section>

      {/* ---- Studies & ministries ---- */}
      <Section bg="page">
        <SectionHeading eyebrow="Get Involved" title="Studies & ministries" intro="Find a place to belong, to serve, and to grow alongside others." />
        <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: "var(--space-5)", marginTop: "var(--space-7)" }} className="studies-grid">
          {studies.map((s) => (
            <Card key={s.title} interactive padding="none" as="article" style={{ display: "flex", flexDirection: "column" }}>
              <Photo src={s.src} label={s.title} ratio="16 / 9" tone={s.tone} rounded="none" />
              <div style={{ padding: "var(--space-5)", display: "flex", flexDirection: "column", gap: "var(--space-2)" }}>
                <Badge tone={s.badge}>{s.tag}</Badge>
                <h3 style={{ margin: "var(--space-1) 0 0", fontSize: "var(--text-h3)" }}>{s.title}</h3>
                <p style={{ margin: 0, fontSize: "var(--text-sm)", color: "var(--text-body)", lineHeight: 1.6 }}>{s.note}</p>
              </div>
            </Card>
          ))}
        </div>
      </Section>

      {/* ---- CTA ---- */}
      <Section bg="brand" style={{ padding: "var(--space-9) 0" }}>
        <div style={{ display: "flex", flexDirection: "column", alignItems: "center", textAlign: "center", gap: "var(--space-4)" }}>
          <h2 style={{ fontFamily: "var(--font-display)", fontSize: "var(--text-h1)", fontWeight: 600, color: "var(--white)", margin: 0 }}>We'd love to meet you this Sunday.</h2>
          <p style={{ color: "var(--slate-300)", fontSize: "var(--text-lead)", maxWidth: "36rem", margin: 0 }}>
            Whether you're seeking a church home or simply exploring faith, there's a place for you here.
          </p>
          <div style={{ display: "flex", gap: "var(--space-3)", marginTop: "var(--space-2)", flexWrap: "wrap", justifyContent: "center" }}>
            <Button variant="accent" size="lg" onClick={() => onNavigate("services")}>Plan Your Visit</Button>
            <Button variant="secondary" size="lg" style={{ color: "var(--white)", borderColor: "rgba(255,255,255,0.4)" }} onClick={() => onNavigate("contact")}>Get in Touch</Button>
          </div>
        </div>
      </Section>
    </div>
  );
}

window.HomeScreen = HomeScreen;