From 475abff3cfd7bab7404ac2d868ee8c87744380d1 Mon Sep 17 00:00:00 2001
From: nmemmert <nmemmert@users.noreply.github.com>
Date: Tue, 5 May 2026 16:52:26 -0400
Subject: [PATCH] Restore share section with QR code and Share the Show button

---
 src/App.css | 65 +++++++++++++++++++++++++++++++++++++++++++++++++++++
 src/App.tsx | 47 ++++++++++++++++++++++++++++++++++++++
 2 files changed, 112 insertions(+)

diff --git a/src/App.css b/src/App.css
index c4ac0c6..e0d76cc 100644
--- a/src/App.css
+++ b/src/App.css
@@ -816,6 +816,71 @@
 }
 
 /* ── Home Jump Section ── */
+.section-share {
+  background: #080808;
+  border-top: 1px solid rgba(201, 168, 76, 0.18);
+  border-bottom: 1px solid rgba(201, 168, 76, 0.12);
+  padding: 4rem 0;
+}
+
+.section-share-inner {
+  display: flex;
+  align-items: center;
+  gap: 3rem;
+  max-width: 860px;
+}
+
+.share-text {
+  flex: 1;
+}
+
+.share-text .section-heading {
+  text-align: left;
+  margin-bottom: 0.75rem;
+}
+
+.share-p {
+  font-family: var(--brand-font-body);
+  font-size: 1.05rem;
+  line-height: 1.65;
+  color: var(--brand-muted);
+  margin: 0 0 1.5rem;
+}
+
+.share-show-wrap {
+  display: flex;
+  flex-direction: column;
+  gap: 0.6rem;
+  align-items: flex-start;
+}
+
+.share-feedback {
+  font-family: var(--brand-font-body);
+  font-size: 0.9rem;
+  color: var(--brand-gold);
+  margin: 0;
+}
+
+.share-qr {
+  width: 180px;
+  height: auto;
+  flex-shrink: 0;
+  border-radius: 12px;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(201, 168, 76, 0.15);
+}
+
+@media (max-width: 600px) {
+  .section-share-inner {
+    flex-direction: column;
+    text-align: center;
+    gap: 1.75rem;
+  }
+
+  .share-text .section-heading {
+    text-align: center;
+  }
+}
+
 .section-home-jump {
   background: var(--brand-black);
   border-top: 1px solid rgba(201, 168, 76, 0.16);
diff --git a/src/App.tsx b/src/App.tsx
index 82e89a7..a178591 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -746,6 +746,40 @@ function DownloadDetailPage({ content }: { content: SiteContent }) {
   )
 }
 
+function ShareShowButton() {
+  const [feedback, setFeedback] = useState('')
+
+  async function handleShare() {
+    const shareUrl = window.location.origin
+    const shareTitle = 'Verse by Verse with Nate'
+    const shareText = 'Check out Verse by Verse with Nate.'
+    try {
+      if (navigator.share) {
+        await navigator.share({ title: shareTitle, text: shareText, url: shareUrl })
+        setFeedback('Shared successfully.')
+        return
+      }
+      if (navigator.clipboard?.writeText) {
+        await navigator.clipboard.writeText(shareUrl)
+        setFeedback('Link copied. Share it with a friend.')
+        return
+      }
+      setFeedback(`Copy this link: ${shareUrl}`)
+    } catch {
+      setFeedback('Share canceled.')
+    }
+  }
+
+  return (
+    <div className="share-show-wrap">
+      <button type="button" className="btn-primary btn-share-show" onClick={handleShare}>
+        Share the Show
+      </button>
+      {feedback && <p className="share-feedback">{feedback}</p>}
+    </div>
+  )
+}
+
 function CustomBlocksSection({ content, page }: { content: SiteContent; page: string }) {
   const blocks = (content.customBlocks ?? []).filter(block => {
     const blockPage = block.page ?? 'downloads'
@@ -856,6 +890,19 @@ function LandingPage({ content }: { content: SiteContent }) {
         </div>
       </section>
 
+      <section className="section-share" aria-label="Share the show">
+        <div className="section-inner section-share-inner">
+          <div className="share-text">
+            <h2 className="section-heading" style={{ textAlign: 'left', marginBottom: '0.75rem' }}>
+              {content.shareHeading || 'Help one more person hear the Word this week.'}
+            </h2>
+            <p className="share-p">{content.shareP || 'Scan the QR code or text the show link to a friend who needs encouragement today.'}</p>
+            <ShareShowButton />
+          </div>
+          <img src="/images/qr-code.jpg" alt="QR code to share the show" className="share-qr" />
+        </div>
+      </section>
+
       <SiteFooter content={content} />
 
       <AnalyticsConsentBanner content={content} />