"use client"; import { useState, useEffect, useCallback } from "react"; import Link from "next/link"; import type { BlogPost } from "@/content/blog"; import { site } from "@/content/site"; import { Check, Copy, ArrowRight, ArrowLeft, ShieldCheck, CheckCircle2, ChevronRight, Clock, Calendar, List, Bell, BellRing, AlertCircle, Loader2, } from "lucide-react"; import { cn } from "@/lib/utils"; import { BlogCard } from "./blog-card"; import { BlogCoverArt } from "./blog-cover-art"; import { ScrollReveal, StaggerContainer, StaggerItem } from "@/components/motion"; function LinkedInIcon({ className }: { className?: string }) { return ( ); } function XIcon({ className }: { className?: string }) { return ( ); } type NeighborPost = { slug: string; title: string }; interface ArticleReaderProps { post: BlogPost; relatedPosts: BlogPost[]; prevPost: NeighborPost | null; nextPost: NeighborPost | null; enablePushOptIn?: boolean; } export function ArticleReader({ post, relatedPosts, prevPost, nextPost, enablePushOptIn = false, }: ArticleReaderProps) { const [activeSection, setActiveSection] = useState(post.tableOfContents[0]?.id || ""); const [copiedLink, setCopiedLink] = useState(false); const [copiedCodeId, setCopiedCodeId] = useState(null); // Canonical share URL — identical on server and client, so no post-mount state. const shareUrl = `${site.url}/blog/${post.slug}`; // Scroll-spy for the active TOC section (reading progress is the global bar). useEffect(() => { const handleScroll = () => { const sectionElements = post.tableOfContents .map((item) => document.getElementById(item.id)) .filter(Boolean) as HTMLElement[]; const scrollPosition = window.scrollY + 200; for (let i = sectionElements.length - 1; i >= 0; i--) { const el = sectionElements[i]; if (el && el.offsetTop <= scrollPosition) { setActiveSection(el.id); break; } } }; window.addEventListener("scroll", handleScroll, { passive: true }); handleScroll(); return () => window.removeEventListener("scroll", handleScroll); }, [post.tableOfContents]); const copyArticleLink = () => { if (typeof window !== "undefined") { navigator.clipboard.writeText(window.location.href); setCopiedLink(true); setTimeout(() => setCopiedLink(false), 2000); } }; const copyCode = (code: string, id: string) => { navigator.clipboard.writeText(code); setCopiedCodeId(id); setTimeout(() => setCopiedCodeId(null), 2000); }; return (
{/* ============================ EDITORIAL HERO ============================ */}
{/* Meta line: category + featured */}
{post.category} {post.featured && ( Featured )}
{/* Editorial headline */}

{post.title}

{/* Lead / intro */}

{post.excerpt}

{/* Byline + share */}
{post.author.avatarText}
{post.author.name}
{post.author.role}
{post.publishedDate} {post.readTime}
{/* Featured editorial visual */} {post.featuredImage ? (
{post.featuredImageAlt
) : ( )}
{/* ============================ BODY (TOC + article) ============================ */}
{/* Sticky TOC (desktop) */} {/* Article body */}
{/* Mobile collapsible TOC */} {post.tableOfContents.length > 0 && (
On this page
)}
{/* Executive brief */}
Executive Brief

{post.executiveSummary}

{/* Rich Text Body (from CMS Tiptap Editor) takes priority over legacy structured sections */} {post.contentHtml && post.contentHtml.replace(/<[^>]*>/g, "").trim().length > 0 ? (
) : ( post.sections?.map((section) => (

{section.title}

{section.content}

{section.bulletPoints && section.bulletPoints.length > 0 && (
    {section.bulletPoints.map((point, i) => (
  • {point}
    • ))}
)} {section.table && (
{section.table.headers.map((header, i) => ( ))} {section.table.rows.map((row, rowIndex) => ( {row.map((cell, cellIndex) => ( ))} ))}
{header}
{cell}
)} {section.codeBlock && (
{section.codeBlock.language} 
                        {section.codeBlock.code}
)} {section.callout && (

{section.callout.text}

)}
)))} {/* Key takeaways */} {post.keyTakeaways && post.keyTakeaways.length > 0 && (

Key strategic takeaways

{post.keyTakeaways.map((takeaway, i) => (
{takeaway}
))}
)} {/* ============================ NOTIFICATION OPT-IN ============================ */} {enablePushOptIn && ( )} {/* Author bio */}
{post.author.avatarText}
Written by

{post.author.name}

{post.author.role}

{post.author.bio}

{/* Prev / next navigation */} {(prevPost || nextPost) && ( )}
{/* ============================ RELATED ============================ */} {relatedPosts.length > 0 && (
Related knowledge

Further reading

View all
{relatedPosts.map((related) => ( ))}
)}
); } // ============================================================ // NotificationOptIn — Web Push opt-in UI (blog article only) // ============================================================ type NotifState = "idle" | "loading" | "subscribed" | "denied" | "unsupported" | "error"; function NotificationOptIn({ postSlug, postTitle, }: { postSlug: string; postTitle: string; }) { const [state, setState] = useState("idle"); const [mounted, setMounted] = useState(false); const [errorMessage, setErrorMessage] = useState(null); useEffect(() => { setMounted(true); // Double-check: NEVER run on admin pages if (typeof window !== "undefined" && window.location.pathname.startsWith("/admin")) { setState("unsupported"); return; } // Check browser capability const hasNotification = typeof window !== "undefined" && "Notification" in window; const hasSW = typeof navigator !== "undefined" && "serviceWorker" in navigator; const hasPush = typeof window !== "undefined" && "PushManager" in window; const isSecure = typeof window !== "undefined" ? window.isSecureContext : false; if (process.env.NODE_ENV === "development") { console.info("[Quto AI Web Push Diagnostics]", { isSecureContext: isSecure, hasNotification, hasServiceWorker: hasSW, hasPushManager: hasPush, permission: hasNotification ? Notification.permission : "unsupported", }); } if (!hasNotification || !hasSW || !hasPush) { setState("unsupported"); return; } // Check existing permission state if (Notification.permission === "denied") { setState("denied"); } else if (Notification.permission === "granted") { // Check if subscription exists in service worker checkExistingSubscription(); } else { setState("idle"); } }, []); const checkExistingSubscription = useCallback(async () => { try { if (!("serviceWorker" in navigator)) return; const reg = await navigator.serviceWorker.getRegistration("/sw.js"); if (!reg) { setState("idle"); return; } const sub = await reg.pushManager.getSubscription(); if (sub) { setState("subscribed"); } else { setState("idle"); } } catch (e) { if (process.env.NODE_ENV === "development") { console.warn("[Quto AI Web Push] Could not check existing subscription:", e); } setState("idle"); } }, []); const handleSubscribe = useCallback(async () => { setErrorMessage(null); // Capability check if ( typeof window === "undefined" || !("Notification" in window) || !("serviceWorker" in navigator) || !("PushManager" in window) ) { setState("unsupported"); return; } try { // CRITICAL (Section 5): Browser permission prompt MUST be requested // directly from this user click gesture. const permission = await Notification.requestPermission(); if (permission === "denied") { setState("denied"); return; } if (permission !== "granted") { setState("idle"); return; } // Permission is granted — proceed to subscribe setState("loading"); // Register or retrieve service worker const reg = await navigator.serviceWorker.register("/sw.js", { scope: "/", updateViaCache: "none", }); await navigator.serviceWorker.ready; // Get the VAPID public key from the SERVER (authoritative runtime value). // We deliberately do NOT trust the build-time-baked NEXT_PUBLIC value first: // if that was ever generated/stored incorrectly (e.g. missing the 0x04 // uncompressed-point prefix), every subscribe() would fail with // "applicationServerKey is not valid" until a rebuild. Reading it at runtime // means fixing the server env var fixes the flow without a redeploy. let vapidPublicKey: string | undefined; try { const keyRes = await fetch("/api/push/vapid-public-key", { cache: "no-store" }); if (keyRes.ok) { vapidPublicKey = (await keyRes.json()).publicKey; } } catch { /* fall back to the baked value below */ } if (!vapidPublicKey) { vapidPublicKey = process.env.NEXT_PUBLIC_VAPID_PUBLIC_KEY; } if (!vapidPublicKey) { throw new Error("Push notifications are temporarily unavailable."); } // Create subscription on browser's PushManager const sub = await reg.pushManager.subscribe({ userVisibleOnly: true, applicationServerKey: urlBase64ToUint8Array(vapidPublicKey) as unknown as BufferSource, }); // Send to server const saveRes = await fetch("/api/push/subscribe", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify(sub.toJSON()), }); if (!saveRes.ok) { throw new Error("Server failed to save subscription."); } setState("subscribed"); } catch (err: any) { console.error("[Quto AI Web Push] Subscription error:", err); if (Notification.permission === "denied") { setState("denied"); } else { setErrorMessage(err?.message || "Notifications couldn't be enabled. Please try again."); setState("error"); } } }, []); const handleUnsubscribe = useCallback(async () => { setState("loading"); try { const reg = await navigator.serviceWorker.getRegistration("/sw.js"); if (reg) { const sub = await reg.pushManager.getSubscription(); if (sub) { const endpoint = sub.endpoint; await sub.unsubscribe(); await fetch("/api/push/subscribe", { method: "DELETE", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ endpoint }), }); } } setState("idle"); } catch (err) { console.error("[Quto AI Web Push] Unsubscribe error:", err); setState("error"); setErrorMessage("Failed to unsubscribe. Please try again."); } }, []); return (
{state === "subscribed" ? ( ) : state === "denied" ? ( ) : ( )}

{state === "subscribed" ? "Notifications Enabled" : state === "denied" ? "Notifications Blocked" : state === "unsupported" ? "Stay Updated with Quto AI" : "Stay updated with Quto AI"}

{state === "subscribed" ? ( "You're subscribed! You'll receive instant alerts when new AI insights and research are published." ) : state === "denied" ? ( "Notifications are blocked in this browser. You can enable them from your browser site settings." ) : state === "unsupported" ? ( "Browser push notifications are not supported in this browsing mode. Switch to standard mode to enable alerts." ) : state === "error" && errorMessage ? ( errorMessage ) : ( "Get notified about new AI insights, guides, architecture breakdowns, and announcements." )}

{state === "subscribed" ? ( ) : state === "denied" ? ( Blocked in Settings ) : state === "unsupported" ? ( Unsupported ) : state === "loading" ? ( ) : ( )}
); } /** Convert a base64url string to a Uint8Array for applicationServerKey. */ function urlBase64ToUint8Array(base64String: string): Uint8Array { const padding = "=".repeat((4 - (base64String.length % 4)) % 4); const base64 = (base64String + padding).replace(/-/g, "+").replace(/_/g, "/"); const raw = atob(base64); return Uint8Array.from(raw, (c) => c.charCodeAt(0)); }