Episodes page: show both series lanes (A and B) in the hero with lane-aware series chips; v2.31.1

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>

src/App.tsx

@@ -2163,8 +2163,13 @@ function EpisodesPage({ content }: { content: SiteContent }) {
   const [openKey, setOpenKey] = useState<string | null>(null)
 
   const finishedBooks = [...(content.finishedBooks ?? [])].sort((a, b) => b.season - a.season)
+  const second = content.secondSeries?.title?.trim() ? content.secondSeries : null
+  const liveSeries = [
+    { key: content.seriesSeason ? String(content.seriesSeason) : '', title: content.seriesTitle, label: second ? (content.seriesLabel || 'Series A') : 'Current series', description: content.seriesDescription, imageUrl: content.seriesImageUrl, season: content.seriesSeason },
+    ...(second ? [{ key: second.season ? String(second.season) : '', title: second.title, label: second.label || 'Series B', description: second.description, imageUrl: second.imageUrl, season: second.season }] : []),
+  ]
   const seasonChips = [
-    ...(content.seriesSeason ? [{ key: String(content.seriesSeason), label: 'Current series' }] : []),
+    ...liveSeries.filter(ls => ls.key).map(ls => ({ key: ls.key, label: second ? ls.title : 'Current series' })),
     ...finishedBooks.map(book => ({ key: String(book.season), label: book.title })),
   ]
   const countFor = (key: string) => episodes.filter(ep => ep.season === key).length
@@ -2190,11 +2195,20 @@ function EpisodesPage({ content }: { content: SiteContent }) {
           <p className="episode-seo-intro" aria-hidden="true">
             {content.episodesSeoIntro || 'Verse by Verse with Nate is an expository Bible teaching podcast where we go through Scripture one verse at a time. Each episode digs into the text carefully and practically, helping you understand what the Bible says, what it means, and how to live it out. New episodes released regularly — subscribe on Spotify or your favorite podcast platform.'}
           </p>
-          {content.seriesImageUrl && <img src={content.seriesImageUrl} alt={content.seriesTitle} className="ep-hero-art" />}
-          <div className="ep-hero-body">
-            <p className="finished-book-card-season">Current series{content.seriesSeason ? ` · Season ${content.seriesSeason}` : ''}</p>
-            <h2 className="ep-hero-title">{content.seriesTitle}</h2>
-            {content.seriesDescription && <p className="ep-hero-desc">{content.seriesDescription}</p>}
+          <div className={`ep-hero-series${second ? ' ep-hero-series--two' : ''}`}>
+            {liveSeries.map((ls, i) => (
+              <div key={i} className="ep-hero-series-card">
+                {ls.imageUrl && <img src={ls.imageUrl} alt={ls.title} className="ep-hero-art" />}
+                <div className="ep-hero-body">
+                  <p className="finished-book-card-season">{ls.label}{ls.season ? ` · Season ${ls.season}` : ''}</p>
+                  <h2 className="ep-hero-title">{ls.title}</h2>
+                  {ls.description && <p className="ep-hero-desc">{ls.description}</p>}
+                  {second && ls.key && (
+                    <a href="#browse-episodes" className="ep-hero-browse" onClick={() => { setSeason(ls.key); setExpanded(false) }}>Browse these episodes ↓</a>
+                  )}
+                </div>
+              </div>
+            ))}
           </div>
           <div className="ep-hero-player">
             <LatestEpisodePlayer content={content} />
@@ -2205,7 +2219,7 @@ function EpisodesPage({ content }: { content: SiteContent }) {
         </div>
       </section>
 
-      <section className="section-episode-browser" aria-label="Browse episodes">
+      <section id="browse-episodes" className="section-episode-browser" aria-label="Browse episodes">
         <div className="section-inner">
           <h2 className="section-heading"><span className="ornament">✦</span> Browse Episodes <span className="ornament">✦</span></h2>
           <input