Refine Q&A share feedback and top back-to-site link

src/App.css

@@ -3274,6 +3274,33 @@
   border-top: 1px solid rgba(201, 168, 76, 0.2);
 }
 
+.qa-top-nav {
+  display: flex;
+  justify-content: flex-start;
+  margin-top: 0.85rem;
+  margin-bottom: 0.9rem;
+}
+
+.qa-back-to-site {
+  display: inline-flex;
+  align-items: center;
+  border: 1px solid rgba(201, 168, 76, 0.3);
+  color: #d8c395;
+  text-decoration: none;
+  border-radius: 999px;
+  padding: 0.35rem 0.72rem;
+  font-size: 0.77rem;
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
+  background: rgba(201, 168, 76, 0.06);
+}
+
+.qa-back-to-site:hover {
+  color: #f0ddb3;
+  background: rgba(201, 168, 76, 0.14);
+  border-color: rgba(201, 168, 76, 0.45);
+}
+
 .qa-filters {
   display: flex;
   flex-direction: column;
@@ -3702,6 +3729,13 @@
   background: rgba(201, 168, 76, 0.14);
 }
 
+.qa-share-feedback {
+  margin: -0.42rem 1rem 0.65rem;
+  color: #d8c392;
+  font-size: 0.76rem;
+  letter-spacing: 0.01em;
+}
+
 .qa-no-results {
   text-align: center;
   padding: 2rem;
@@ -3817,6 +3851,16 @@
     gap: 0.62rem;
   }
 
+  .qa-top-nav {
+    margin-top: 0.65rem;
+    margin-bottom: 0.72rem;
+  }
+
+  .qa-back-to-site {
+    font-size: 0.73rem;
+    padding: 0.3rem 0.62rem;
+  }
+
   .qa-card-face {
     padding: 0.15rem 0.82rem 0.86rem;
   }
@@ -3825,6 +3869,11 @@
     padding: 0 0.82rem 0.62rem;
   }
 
+  .qa-share-feedback {
+    margin: -0.38rem 0.82rem 0.62rem;
+    font-size: 0.74rem;
+  }
+
   .qa-question-text {
     font-size: 0.97rem;
     line-height: 1.45;

src/components/QASection.tsx

@@ -215,6 +215,7 @@ export default function QASection() {
   const [engagement, setEngagement] = useState<EngagementMap>({})
   const [expandedCompactAnswers, setExpandedCompactAnswers] = useState<Record<string, boolean>>({})
   const [copiedQuestionId, setCopiedQuestionId] = useState<string | null>(null)
+  const [copiedFacebookCaptionId, setCopiedFacebookCaptionId] = useState<string | null>(null)
   const [loading, setLoading] = useState(true)
   const resultsTopRef = useRef<HTMLDivElement | null>(null)
 
@@ -428,14 +429,31 @@ export default function QASection() {
     incrementEngagement(question.id, 'shares')
   }
 
-  const shareToFacebook = (id: string) => {
+  const shareToFacebook = async (question: DecoratedQuestion) => {
-    const url = getSocialUrl(id)
+    const url = getSocialUrl(question.id)
+    const answerSnippet = question.answer.replace(/\s+/g, ' ').trim()
+    const caption = [
+      `Question: ${question.question}`,
+      `Answer: ${answerSnippet.length > 240 ? `${answerSnippet.slice(0, 237)}...` : answerSnippet}`,
+      'What are your thoughts?'
+    ].join('\n\n')
+
+    try {
+      await navigator.clipboard.writeText(caption)
+      setCopiedFacebookCaptionId(question.id)
+      window.setTimeout(() => {
+        setCopiedFacebookCaptionId(curr => (curr === question.id ? null : curr))
+      }, 2500)
+    } catch {
+      window.prompt('Copy this caption and paste it into your post:', caption)
+    }
+
     window.open(
       `https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(url)}`,
       '_blank',
       'noopener,noreferrer,width=600,height=500'
     )
-    incrementEngagement(id, 'shares')
+    incrementEngagement(question.id, 'shares')
   }
 
   const formatDate = (value?: string) => {
@@ -475,6 +493,9 @@ export default function QASection() {
   return (
     <section id="qa" className="section-qa" aria-label="Questions and answers">
       <div className="section-inner">
+        <div className="qa-top-nav">
+          <a href="/" className="qa-back-to-site">← Back to Site</a>
+        </div>
         <h2 className="section-heading">
           <span className="ornament">✦</span> Questions & Answers <span className="ornament">✦</span>
         </h2>
@@ -638,6 +659,8 @@ export default function QASection() {
                       const relatedQuestions = getRelatedQuestions(question)
                       const isFocused = focusedQuestionId === question.id
                       const isExpandedInCompact = expandedCompactAnswers[question.id] === true
+                      const facebookCaptionCopied = copiedFacebookCaptionId === question.id
+                      const linkCopied = copiedQuestionId === question.id
                       const answerText = compactMode && !isExpandedInCompact
                         ? truncateAnswer(question.answer)
                         : question.answer
@@ -672,15 +695,22 @@ export default function QASection() {
                               type="button"
                               aria-label="Share on Facebook"
                               className="qa-social-btn qa-social-btn--fb"
-                              onClick={() => shareToFacebook(question.id)}
+                              onClick={() => shareToFacebook(question)}
                             >
                               <svg viewBox="0 0 24 24" aria-hidden="true" fill="currentColor" width="14" height="14"><path d="M24 12.073C24 5.404 18.627 0 12 0S0 5.404 0 12.073C0 18.1 4.388 23.094 10.125 24v-8.437H7.078v-3.49h3.047V9.41c0-3.025 1.792-4.697 4.533-4.697 1.312 0 2.686.236 2.686.236v2.97h-1.513c-1.491 0-1.956.93-1.956 1.884v2.25h3.328l-.532 3.49h-2.796V24C19.612 23.094 24 18.1 24 12.073z"/></svg>
-                              <span>Share</span>
+                              <span>{facebookCaptionCopied ? 'Caption copied' : 'Share'}</span>
                             </button>
                             <button type="button" className="qa-share-btn" onClick={() => shareQuestion(question.id)}>
-                              {copiedQuestionId === question.id ? '✓ Copied' : 'Copy link'}
+                              {linkCopied ? '✓ Copied' : 'Copy link'}
                             </button>
                           </div>
+                          {(facebookCaptionCopied || linkCopied) && (
+                            <p className="qa-share-feedback" role="status" aria-live="polite">
+                              {facebookCaptionCopied
+                                ? 'Caption copied. Paste it into your Facebook post text box.'
+                                : 'Direct link copied to clipboard.'}
+                            </p>
+                          )}
 
                           <div id={`qa-answer-${question.id}`} className="qa-card-face qa-card-back">
                             <span className="qa-face-label">A</span>