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

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 url = getSocialUrl(id)
+  const shareToFacebook = async (question: DecoratedQuestion) => {
+    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>