feat(analytics): add blog engagement, ToC tracking, and 404 monitoring

- Added BlogEngagementTracker for reading time and completion tracking
- Added ToC click tracking in blog posts
- Added global 404 error monitoring in not-found.tsx
- Completed 'Total Transparency' suite

components/blog/TableOfContents.tsx

@@ -2,6 +2,8 @@
 
 import React, { useEffect, useState } from 'react';
 import { cn } from '@/components/ui/utils';
+import { useAnalytics } from '../analytics/useAnalytics';
+import { AnalyticsEvents } from '../analytics/analytics-events';
 
 interface TocItem {
   id: string;
@@ -16,11 +18,12 @@ interface TableOfContentsProps {
 
 export default function TableOfContents({ headings, locale }: TableOfContentsProps) {
   const [activeId, setActiveId] = useState<string>('');
+  const { trackEvent } = useAnalytics();
 
   useEffect(() => {
     const observerOptions = {
       rootMargin: '-10% 0% -70% 0%',
-      threshold: 0
+      threshold: 0,
     };
 
     const observer = new IntersectionObserver((entries) => {
@@ -66,15 +69,20 @@ export default function TableOfContents({ headings, locale }: TableOfContentsPro
               <a
                 href={`#${heading.id}`}
                 className={cn(
-                  "text-sm md:text-base transition-all duration-300 hover:text-primary block leading-snug",
+                  'text-sm md:text-base transition-all duration-300 hover:text-primary block leading-snug',
                   activeId === heading.id
-                    ? "text-primary font-bold translate-x-1"
-                    : "text-text-secondary font-medium hover:translate-x-1"
+                    ? 'text-primary font-bold translate-x-1'
+                    : 'text-text-secondary font-medium hover:translate-x-1',
                 )}
                 onClick={(e) => {
                   e.preventDefault();
                   const element = document.getElementById(heading.id);
                   if (element) {
+                    trackEvent(AnalyticsEvents.TOC_CLICK, {
+                      heading_id: heading.id,
+                      heading_text: heading.text,
+                      location: 'blog_sidebar',
+                    });
                     const yOffset = -100;
                     const y = element.getBoundingClientRect().top + window.pageYOffset + yOffset;
                     window.scrollTo({ top: y, behavior: 'smooth' });