function SermonDetailScreen({ onNavigate }) {
  const { Badge, Card, Eyebrow, SectionHeading, Button, ScriptureQuote } = window.GT;
  const poster = (window.GTC_ASSET_BASE || "") + "assets/photo-preaching-pulpit.jpg";

  const sermon = {
    title: "The Righteous Will Live by Faith",
    series: "Romans",
    part: "Part 1 of 16",
    passage: "Romans 1:16–17",
    speaker: "Dr. Pat Smolen",
    date: "June 8, 2026",
    length: "42 min",
  };

  const outline = [
    { t: "The gospel is God's power for salvation", b: "Paul is unashamed because the gospel does what religion cannot — it saves everyone who believes, Jew and Gentile alike." },
    { t: "A righteousness from God is revealed", b: "Not a righteousness we manufacture, but one given and received by faith — from first to last." },
    { t: "The righteous will live by faith", b: "Quoting Habakkuk, Paul anchors the whole letter: faith is the posture of the justified life, start to finish." },
  ];

  const related = [
    { title: "Justified by Faith, at Peace with God", passage: "Romans 5:1–11", date: "Jun 1, 2026", tone: "teal" },
    { title: "No Condemnation in Christ", passage: "Romans 8:1–11", date: "May 25, 2026", tone: "slate" },
    { title: "Grace and Truth Made Flesh", passage: "John 1:1–18", date: "Apr 27, 2026", tone: "leaf" },
  ];

  return (
    <div>
      {/* Breadcrumb + back */}
      <div style={{ background: "var(--slate-800)", padding: "var(--space-4) 0" }}>
        <div style={{ maxWidth: "var(--container-lg)", margin: "0 auto", padding: "0 var(--gutter)" }}>
          <button onClick={() => onNavigate("sermons")} style={{ display: "inline-flex", alignItems: "center", gap: 8, background: "transparent", border: "none", color: "var(--slate-300)", fontFamily: "var(--font-label)", fontWeight: 600, fontSize: "var(--text-sm)", cursor: "pointer" }}>
            <i data-lucide="arrow-left" style={{ width: 16, height: 16 }}></i> All Sermons
          </button>
        </div>
      </div>

      {/* Player */}
      <div style={{ background: "var(--slate-900)" }}>
        <div style={{ maxWidth: "var(--container-lg)", margin: "0 auto", padding: "0 var(--gutter) var(--space-7)" }}>
          <div style={{ position: "relative", aspectRatio: "16 / 9", background: `linear-gradient(135deg, rgba(48,107,145,0.5) 0%, rgba(27,63,84,0.55) 60%, rgba(33,43,51,0.65) 100%), url("${poster}") center 30% / cover`, borderRadius: "0 0 var(--radius-lg) var(--radius-lg)", overflow: "hidden", display: "flex", alignItems: "center", justifyContent: "center" }}>
            <span style={{ display: "inline-flex", alignItems: "center", justifyContent: "center", width: 88, height: 88, borderRadius: "50%", background: "rgba(255,255,255,0.94)", color: "var(--accent)", boxShadow: "var(--shadow-xl)", cursor: "pointer" }}>
              <i data-lucide="play" style={{ width: 38, height: 38, marginLeft: 5 }}></i>
            </span>
            {/* faux player bar */}
            <div style={{ position: "absolute", left: 0, right: 0, bottom: 0, padding: "var(--space-4)", background: "linear-gradient(to top, rgba(0,0,0,0.5), transparent)" }}>
              <div style={{ height: 4, borderRadius: 999, background: "rgba(255,255,255,0.3)" }}>
                <div style={{ width: "28%", height: "100%", borderRadius: 999, background: "var(--lime-500)" }}></div>
              </div>
              <div style={{ display: "flex", justifyContent: "space-between", marginTop: 8, fontFamily: "var(--font-mono)", fontSize: 12, color: "rgba(255,255,255,0.85)" }}>
                <span>11:48</span><span>42:00</span>
              </div>
            </div>
          </div>
        </div>
      </div>

      {/* Title + meta + actions */}
      <Section bg="page" style={{ paddingTop: "var(--space-7)" }}>
        <div style={{ display: "grid", gridTemplateColumns: "1.6fr 1fr", gap: "var(--space-9)", alignItems: "start" }} className="two-col">
          {/* Main column */}
          <div>
            <div style={{ display: "flex", gap: "var(--space-2)", flexWrap: "wrap", marginBottom: "var(--space-3)" }}>
              <Badge tone="teal">{sermon.series}</Badge>
              <Badge tone="slate">{sermon.part}</Badge>
              <Badge tone="lime">{sermon.passage}</Badge>
            </div>
            <h1 style={{ fontFamily: "var(--font-display)", fontSize: "var(--text-h1)", fontWeight: 600, margin: 0, lineHeight: 1.1 }}>{sermon.title}</h1>
            <div style={{ display: "flex", gap: "var(--space-5)", alignItems: "center", fontFamily: "var(--font-label)", fontSize: "var(--text-sm)", fontWeight: 600, color: "var(--text-muted)", margin: "var(--space-4) 0 var(--space-5)", flexWrap: "wrap" }}>
              <span style={{ display: "inline-flex", alignItems: "center", gap: 6 }}><i data-lucide="user" style={{ width: 16, height: 16 }}></i>{sermon.speaker}</span>
              <span style={{ display: "inline-flex", alignItems: "center", gap: 6 }}><i data-lucide="calendar" style={{ width: 16, height: 16 }}></i>{sermon.date}</span>
              <span style={{ display: "inline-flex", alignItems: "center", gap: 6 }}><i data-lucide="clock" style={{ width: 16, height: 16 }}></i>{sermon.length}</span>
            </div>
            <div style={{ display: "flex", gap: "var(--space-3)", flexWrap: "wrap", marginBottom: "var(--space-7)" }}>
              <Button variant="primary" leadingIcon={<i data-lucide="headphones" style={{ width: 18, height: 18 }}></i>}>Listen</Button>
              <Button variant="secondary" leadingIcon={<i data-lucide="file-text" style={{ width: 18, height: 18 }}></i>}>Sermon Notes</Button>
              <Button variant="ghost" leadingIcon={<i data-lucide="share-2" style={{ width: 18, height: 18 }}></i>}>Share</Button>
            </div>

            <div style={{ maxWidth: "44rem" }}>
              <h3 style={{ fontSize: "var(--text-h3)", margin: "0 0 var(--space-3)" }}>About this message</h3>
              <p style={{ color: "var(--text-body)", lineHeight: 1.8, margin: "0 0 var(--space-5)" }}>
                Paul opens his letter to the Romans with a declaration that shapes everything to come:
                he is not ashamed of the gospel. In this first message of our series, we consider why
                the good news of Jesus is the very power of God for salvation — and what it means that
                the righteous shall live by faith, from first to last.
              </p>

              <h3 style={{ fontSize: "var(--text-h3)", margin: "var(--space-6) 0 var(--space-4)" }}>Sermon outline</h3>
              <ol style={{ listStyle: "none", margin: 0, padding: 0, display: "flex", flexDirection: "column", gap: "var(--space-4)" }}>
                {outline.map((o, i) => (
                  <li key={o.t} style={{ display: "flex", gap: "var(--space-4)" }}>
                    <span style={{ flex: "none", width: 36, height: 36, borderRadius: "var(--radius-md)", background: "var(--blue-100)", color: "var(--accent)", display: "inline-flex", alignItems: "center", justifyContent: "center", fontFamily: "var(--font-display)", fontWeight: 600 }}>{i + 1}</span>
                    <div>
                      <h4 style={{ margin: "0 0 4px", fontSize: "var(--text-h4)" }}>{o.t}</h4>
                      <p style={{ margin: 0, fontSize: "var(--text-sm)", color: "var(--text-body)", lineHeight: 1.6 }}>{o.b}</p>
                    </div>
                  </li>
                ))}
              </ol>
            </div>
          </div>

          {/* Sidebar: passage */}
          <aside>
            <Card padding="lg" topRule style={{ position: "sticky", top: "calc(var(--space-8) + 40px)" }}>
              <Eyebrow>The Passage</Eyebrow>
              <div style={{ marginTop: "var(--space-4)" }}>
                <ScriptureQuote reference="Romans 1:16–17" translation="CSB" size="sm">
                  For I am not ashamed of the gospel, because it is the power of God for salvation to
                  everyone who believes… For in it the righteousness of God is revealed from faith to faith.
                </ScriptureQuote>
              </div>
              <hr style={{ border: "none", borderTop: "1px solid var(--border-subtle)", margin: "var(--space-5) 0" }} />
              <div style={{ display: "flex", flexDirection: "column", gap: "var(--space-3)" }}>
                <Button variant="secondary" size="sm" fullWidth leadingIcon={<i data-lucide="download" style={{ width: 16, height: 16 }}></i>}>Download Audio</Button>
                <Button variant="ghost" size="sm" fullWidth onClick={() => onNavigate("sermons")}>Browse the Series</Button>
              </div>
            </Card>
          </aside>
        </div>
      </Section>

      {/* Related */}
      <Section bg="sunken">
        <SectionHeading eyebrow="Keep Listening" title="More from Romans" />
        <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: "var(--space-5)", marginTop: "var(--space-6)" }} className="studies-grid">
          {related.map((r) => (
            <Card key={r.title} interactive padding="none" as="article" onClick={() => onNavigate("sermon-detail")} style={{ display: "flex", flexDirection: "column", cursor: "pointer" }}>
              <Photo label={r.passage} ratio="16 / 9" tone={r.tone} rounded="none" />
              <div style={{ padding: "var(--space-5)" }}>
                <h3 style={{ margin: "0 0 4px", fontSize: "var(--text-h4)", lineHeight: 1.25 }}>{r.title}</h3>
                <p style={{ margin: 0, fontFamily: "var(--font-label)", fontSize: "var(--text-sm)", fontWeight: 600, color: "var(--text-accent)" }}>{r.passage}</p>
                <p style={{ margin: "var(--space-2) 0 0", fontSize: "var(--text-xs)", color: "var(--text-muted)", fontFamily: "var(--font-label)", fontWeight: 600 }}>{r.date}</p>
              </div>
            </Card>
          ))}
        </div>
      </Section>
    </div>
  );
}

window.SermonDetailScreen = SermonDetailScreen;