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

  const featured = {
    title: "The Righteous Will Live by Faith",
    series: "Romans",
    passage: "Romans 1:16–17",
    speaker: "Dr. Pat Smolen",
    date: "June 8, 2026",
    length: "42 min",
    blurb: "Paul is not ashamed of the gospel — for in it the righteousness of God is revealed. We open our study of Romans by asking what it means to live by faith from first to last.",
  };

  const series = ["All Sermons", "Romans", "The Sermon on the Mount", "Psalms of Ascent", "Stand-alone"];

  const sermons = [
    { title: "Justified by Faith, at Peace with God", series: "Romans", passage: "Romans 5:1–11", speaker: "Dr. Pat Smolen", date: "Jun 1, 2026", length: "39 min", tone: "teal" },
    { title: "No Condemnation in Christ", series: "Romans", passage: "Romans 8:1–11", speaker: "Dr. Pat Smolen", date: "May 25, 2026", length: "45 min", tone: "slate" },
    { title: "Salt and Light", series: "The Sermon on the Mount", passage: "Matthew 5:13–16", speaker: "Rev. Phil Rector", date: "May 18, 2026", length: "37 min", tone: "leaf" },
    { title: "Ask, Seek, Knock", series: "The Sermon on the Mount", passage: "Matthew 7:7–12", speaker: "Dr. Pat Smolen", date: "May 11, 2026", length: "41 min", tone: "slate" },
    { title: "I Lift My Eyes to the Hills", series: "Psalms of Ascent", passage: "Psalm 121", speaker: "Dave Wilson", date: "May 4, 2026", length: "33 min", tone: "teal" },
    { title: "Grace and Truth Made Flesh", series: "Stand-alone", passage: "John 1:1–18", speaker: "Dr. Pat Smolen", date: "Apr 27, 2026", length: "44 min", tone: "slate" },
  ];

  return (
    <div>
      {/* Header */}
      <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: "flex", justifyContent: "space-between", alignItems: "flex-end", gap: "var(--space-5)", flexWrap: "wrap" }}>
          <div>
            <Eyebrow tone="light">Sermons</Eyebrow>
            <h1 style={{ fontFamily: "var(--font-display)", fontSize: "var(--text-h1)", fontWeight: 600, color: "var(--white)", margin: "var(--space-2) 0 0" }}>Teaching from the Word</h1>
            <p style={{ color: "var(--slate-300)", fontSize: "var(--text-lead)", maxWidth: "38rem", margin: "var(--space-3) 0 0" }}>
              Catch up on a message or work through a series. All of our teaching flows from the
              faithful, verse-by-verse study of Scripture.
            </p>
          </div>
          <div style={{ minWidth: 240 }}>
            <Input placeholder="Search sermons…" aria-label="Search sermons" />
          </div>
        </div>
      </div>

      {/* Featured / latest */}
      <Section bg="page">
        <Card padding="none" interactive as="article" onClick={() => onNavigate("sermon-detail")} style={{ display: "grid", gridTemplateColumns: "1.1fr 0.9fr", overflow: "hidden", cursor: "pointer" }} className="svc-row">
          <div style={{ position: "relative" }}>
            <Photo src="photo-preaching-pulpit.jpg" label={featured.series} ratio="16 / 10" tone="teal" rounded="none" style={{ minHeight: 280 }} />
            <span style={{ position: "absolute", inset: 0, display: "flex", alignItems: "center", justifyContent: "center" }}>
              <span style={{ display: "inline-flex", alignItems: "center", justifyContent: "center", width: 72, height: 72, borderRadius: "50%", background: "rgba(255,255,255,0.92)", color: "var(--accent)", boxShadow: "var(--shadow-lg)" }}>
                <i data-lucide="play" style={{ width: 30, height: 30, marginLeft: 4 }}></i>
              </span>
            </span>
            <span style={{ position: "absolute", top: "var(--space-4)", left: "var(--space-4)" }}>
              <Badge tone="lime" solid>Latest Message</Badge>
            </span>
          </div>
          <div style={{ padding: "var(--space-7)", display: "flex", flexDirection: "column", gap: "var(--space-3)", justifyContent: "center" }}>
            <div style={{ display: "flex", gap: "var(--space-2)", flexWrap: "wrap" }}>
              <Badge tone="teal">{featured.series}</Badge>
              <Badge tone="slate">{featured.passage}</Badge>
            </div>
            <h2 style={{ margin: 0, fontSize: "var(--text-h2)" }}>{featured.title}</h2>
            <p style={{ margin: 0, color: "var(--text-body)", lineHeight: 1.7 }}>{featured.blurb}</p>
            <div style={{ display: "flex", gap: "var(--space-4)", alignItems: "center", fontFamily: "var(--font-label)", fontSize: "var(--text-sm)", fontWeight: 600, color: "var(--text-muted)", marginTop: "var(--space-1)" }}>
              <span style={{ display: "inline-flex", alignItems: "center", gap: 6 }}><i data-lucide="user" style={{ width: 16, height: 16 }}></i>{featured.speaker}</span>
              <span style={{ display: "inline-flex", alignItems: "center", gap: 6 }}><i data-lucide="calendar" style={{ width: 16, height: 16 }}></i>{featured.date}</span>
              <span style={{ display: "inline-flex", alignItems: "center", gap: 6 }}><i data-lucide="clock" style={{ width: 16, height: 16 }}></i>{featured.length}</span>
            </div>
          </div>
        </Card>
      </Section>

      {/* Series filter + grid */}
      <Section bg="sunken">
        <div style={{ display: "flex", gap: "var(--space-2)", flexWrap: "wrap", marginBottom: "var(--space-7)" }}>
          {series.map((s, i) => (
            <button
              key={s}
              style={{
                fontFamily: "var(--font-label)", fontWeight: 600, fontSize: "var(--text-sm)",
                padding: "0.5rem 1rem", borderRadius: "var(--radius-pill)", cursor: "pointer",
                border: i === 0 ? "1px solid var(--accent)" : "1px solid var(--border-default)",
                background: i === 0 ? "var(--accent)" : "var(--white)",
                color: i === 0 ? "var(--white)" : "var(--text-body)",
              }}
            >
              {s}
            </button>
          ))}
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: "var(--space-5)" }} className="studies-grid">
          {sermons.map((s) => (
            <Card key={s.title} interactive padding="none" as="article" onClick={() => onNavigate("sermon-detail")} style={{ display: "flex", flexDirection: "column", cursor: "pointer" }}>
              <div style={{ position: "relative" }}>
                <Photo label={s.series} ratio="16 / 9" tone={s.tone} rounded="none" />
                <span style={{ position: "absolute", top: "var(--space-3)", right: "var(--space-3)", fontFamily: "var(--font-label)", fontSize: 11, fontWeight: 700, letterSpacing: "0.06em", color: "var(--white)", background: "rgba(33,43,51,0.6)", padding: "0.2rem 0.5rem", borderRadius: "var(--radius-pill)" }}>{s.length}</span>
                <span style={{ position: "absolute", inset: 0, display: "flex", alignItems: "center", justifyContent: "center" }}>
                  <span style={{ display: "inline-flex", alignItems: "center", justifyContent: "center", width: 52, height: 52, borderRadius: "50%", background: "rgba(255,255,255,0.9)", color: "var(--accent)" }}>
                    <i data-lucide="play" style={{ width: 22, height: 22, marginLeft: 3 }}></i>
                  </span>
                </span>
              </div>
              <div style={{ padding: "var(--space-5)", display: "flex", flexDirection: "column", gap: "var(--space-2)", flex: 1 }}>
                <Badge tone="teal">{s.series}</Badge>
                <h3 style={{ margin: "var(--space-1) 0 0", fontSize: "var(--text-h4)", lineHeight: 1.25 }}>{s.title}</h3>
                <p style={{ margin: 0, fontFamily: "var(--font-label)", fontSize: "var(--text-sm)", fontWeight: 600, color: "var(--text-accent)" }}>{s.passage}</p>
                <div style={{ marginTop: "auto", paddingTop: "var(--space-3)", display: "flex", gap: "var(--space-4)", fontSize: "var(--text-xs)", color: "var(--text-muted)", fontFamily: "var(--font-label)", fontWeight: 600 }}>
                  <span>{s.speaker}</span>
                  <span>{s.date}</span>
                </div>
              </div>
            </Card>
          ))}
        </div>
        <div style={{ textAlign: "center", marginTop: "var(--space-7)" }}>
          <Button variant="secondary">Load More Sermons</Button>
        </div>
      </Section>
    </div>
  );
}

window.SermonsScreen = SermonsScreen;