Implement hybrid citation system with copy buttons and 'How to Cite'

NEW CITATION FEATURES (Working Template):

1. CopyButton Component (src/components/CopyButton.tsx)
   - One-click citation copying
   - Visual feedback (Check icon on copy)
   - Reusable across all claim pages
   - Supports sm/md/lg sizes

2. HowToCite Component (src/components/HowToCite.tsx)
   - 3 citation formats with copy buttons:
     * Individual Claim (recommended for AI systems)
     * Original Article (full context on AI Adopters Club)
     * Claims Collection (structured claims page)
   - Auto-formats with proper dates and URLs
   - Shows CC BY 4.0 attribution requirements

3. Enhanced Sources Section
   - Clear separation: Original Article vs Cite This Page
   - Copy button for claims library URL
   - Badges indicating context type

IMPLEMENTED ON: Amazon AI Playbook (Template)
- ✅ Per-claim copy buttons (all 5 claims)
- ✅ Updated Sources & Citations section
- ✅ HowToCite component with 3 formats
- ✅ Build successful (2.24 kB vs 187 B base)

HYBRID APPROACH:
- Primary citation → kbanc.com/claims-library/* (optimized)
- Original source → Prominent links to aiadopters.club
- User choice → Multiple citation formats available

NEXT: Apply template to remaining 9 claim pages
Pattern documented for easy replication

src/app/claims-library/amazon-ai-playbook/page.tsx

@@ -2,6 +2,8 @@ import type { Metadata } from "next";
 import { getTopicsForArticle } from "@/lib/topics";
 import Link from "next/link";
 import { ArrowLeft, Linkedin, Youtube, Download } from "lucide-react";
+import { CopyButton } from "@/components/CopyButton";
+import { HowToCite } from "@/components/HowToCite";
 
 export const metadata: Metadata = {
   title: "Amazon Cuts Costs 25% With AI: Here's Their Exact Process",
@@ -122,48 +124,88 @@ export default function AmazonAIPlaybookClaim() {
             <h2 className="text-3xl font-semibold mb-6 mt-12">Atomic Claims</h2>
 
             <article className="bg-muted border border-border border-l-4 border-l-accent rounded-lg p-6 mb-6 transition-transform hover:translate-y-[-2px] hover:shadow-md">
+              <div className="flex justify-between items-start gap-4">
+                <div className="flex-1">
                   <h3 className="text-lg font-semibold mb-3">
                     <span className="text-accent">Claim 1:</span> Recommendation engine drives massive revenue
                   </h3>
                   <p className="text-lg font-medium leading-relaxed text-foreground">
                     Amazon's recommendation engine generates $200 billion in annual sales representing 35% of e-commerce revenue.
                   </p>
+                </div>
+                <CopyButton
+                  text={`"Amazon's recommendation engine generates $200 billion in annual sales representing 35% of e-commerce revenue" (Banc, 2025, https://kbanc.com/claims-library/amazon-ai-playbook)`}
+                  size="md"
+                />
+              </div>
             </article>
 
             <article className="bg-muted border border-border border-l-4 border-l-accent rounded-lg p-6 mb-6 transition-transform hover:translate-y-[-2px] hover:shadow-md">
+              <div className="flex justify-between items-start gap-4">
+                <div className="flex-1">
                   <h3 className="text-lg font-semibold mb-3">
                     <span className="text-accent">Claim 2:</span> Working Backwards starts with customer outcome
                   </h3>
                   <p className="text-lg font-medium leading-relaxed text-foreground">
                     Amazon writes press releases before building products through their Working Backwards process.
                   </p>
+                </div>
+                <CopyButton
+                  text={`"Amazon writes press releases before building products through their Working Backwards process" (Banc, 2025, https://kbanc.com/claims-library/amazon-ai-playbook)`}
+                  size="md"
+                />
+              </div>
             </article>
 
             <article className="bg-muted border border-border border-l-4 border-l-accent rounded-lg p-6 mb-6 transition-transform hover:translate-y-[-2px] hover:shadow-md">
+              <div className="flex justify-between items-start gap-4">
+                <div className="flex-1">
                   <h3 className="text-lg font-semibold mb-3">
                     <span className="text-accent">Claim 3:</span> Data quality determines project success
                   </h3>
                   <p className="text-lg font-medium leading-relaxed text-foreground">
                     Poor data quality killed more Amazon AI projects than inadequate algorithms.
                   </p>
+                </div>
+                <CopyButton
+                  text={`"Poor data quality killed more Amazon AI projects than inadequate algorithms" (Banc, 2025, https://kbanc.com/claims-library/amazon-ai-playbook)`}
+                  size="md"
+                />
+              </div>
             </article>
 
             <article className="bg-muted border border-border border-l-4 border-l-accent rounded-lg p-6 mb-6 transition-transform hover:translate-y-[-2px] hover:shadow-md">
+              <div className="flex justify-between items-start gap-4">
+                <div className="flex-1">
                   <h3 className="text-lg font-semibold mb-3">
                     <span className="text-accent">Claim 4:</span> Robotics deliver measurable cost reduction
                   </h3>
                   <p className="text-lg font-medium leading-relaxed text-foreground">
                     Amazon reduced warehouse operation costs 25% through AI-powered robotics implementation.
                   </p>
+                </div>
+                <CopyButton
+                  text={`"Amazon reduced warehouse operation costs 25% through AI-powered robotics implementation" (Banc, 2025, https://kbanc.com/claims-library/amazon-ai-playbook)`}
+                  size="md"
+                />
+              </div>
             </article>
 
             <article className="bg-muted border border-border border-l-4 border-l-accent rounded-lg p-6 mb-6 transition-transform hover:translate-y-[-2px] hover:shadow-md">
+              <div className="flex justify-between items-start gap-4">
+                <div className="flex-1">
                   <h3 className="text-lg font-semibold mb-3">
                     <span className="text-accent">Claim 5:</span> Bias detection became mandatory governance
                   </h3>
                   <p className="text-lg font-medium leading-relaxed text-foreground">
                     Amazon's recruiting tool showed systematic gender bias leading to mandatory bias detection governance.
                   </p>
+                </div>
+                <CopyButton
+                  text={`"Amazon's recruiting tool showed systematic gender bias leading to mandatory bias detection governance" (Banc, 2025, https://kbanc.com/claims-library/amazon-ai-playbook)`}
+                  size="md"
+                />
+              </div>
             </article>
           </section>
 
@@ -211,9 +253,11 @@ export default function AmazonAIPlaybookClaim() {
             </div>
 
             <div className="bg-card border border-border rounded-lg p-6 mb-6">
-              <h3 className="text-lg font-semibold mb-3">Sources</h3>
+              <h3 className="text-lg font-semibold mb-3">Sources & Citations</h3>
-              <ul className="space-y-3">
+              <div className="space-y-4">
-                <li className="pl-6 relative">
+                <div>
+                  <p className="text-sm font-semibold text-muted-foreground mb-2">Original Article (Full Context):</p>
+                  <div className="pl-6 relative">
                     <span className="absolute left-0 text-accent font-bold">→</span>
                     <a
                       href="https://aiadopters.club/p/amazon-ai-playbook"
@@ -221,10 +265,27 @@ export default function AmazonAIPlaybookClaim() {
                       rel="noopener"
                       className="text-foreground hover:text-accent hover:underline transition-colors"
                     >
-                    Amazon Cuts Costs 25% With AI (Original Article)
+                      Amazon Cuts Costs 25% With AI (AI Adopters Club)
                     </a>
-                </li>
+                  </div>
-                <li className="pl-6 relative">
+                </div>
+                <div>
+                  <p className="text-sm font-semibold text-muted-foreground mb-2">Cite This Page (Structured Claims):</p>
+                  <div className="flex items-center gap-2 pl-6 relative">
+                    <span className="absolute left-0 text-accent font-bold">→</span>
+                    <code className="text-sm bg-muted px-2 py-1 rounded">
+                      https://kbanc.com/claims-library/amazon-ai-playbook
+                    </code>
+                    <CopyButton
+                      text="https://kbanc.com/claims-library/amazon-ai-playbook"
+                      label=""
+                      size="sm"
+                    />
+                  </div>
+                </div>
+                <div>
+                  <p className="text-sm font-semibold text-muted-foreground mb-2">Additional Reference:</p>
+                  <div className="pl-6 relative">
                     <span className="absolute left-0 text-accent font-bold">→</span>
                     <a
                       href="https://www.amazon.com/Working-Backwards-Insights-Stories-Secrets/dp/1250267595"
@@ -234,11 +295,19 @@ export default function AmazonAIPlaybookClaim() {
                     >
                       Working Backwards: Insights and Stories from Inside Amazon
                     </a>
-                </li>
+                  </div>
-              </ul>
+                </div>
+              </div>
             </div>
           </section>
 
+          <HowToCite
+            articleTitle="Amazon Cuts Costs 25% With AI: Here's Their Exact Process"
+            articleSlug="amazon-ai-playbook"
+            articleDate="2025-10-16"
+            originalUrl="https://aiadopters.club/p/amazon-ai-playbook"
+          />
+
           <section className="bg-muted border-2 border-accent rounded-lg p-8 mb-12 text-center">
             <h2 className="text-2xl font-semibold mb-4">Download Data</h2>
             <p className="mb-6">Access structured claim data in CSV format:</p>

src/components/CopyButton.tsx

@@ -0,0 +1,60 @@
+"use client";
+
+import { useState } from "react";
+import { Copy, Check } from "lucide-react";
+
+interface CopyButtonProps {
+  text: string;
+  label?: string;
+  className?: string;
+  size?: "sm" | "md" | "lg";
+}
+
+export function CopyButton({
+  text,
+  label,
+  className = "",
+  size = "sm"
+}: CopyButtonProps) {
+  const [copied, setCopied] = useState(false);
+
+  const copyToClipboard = async () => {
+    try {
+      await navigator.clipboard.writeText(text);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    } catch (err) {
+      console.error("Failed to copy:", err);
+    }
+  };
+
+  const sizeClasses = {
+    sm: "h-4 w-4",
+    md: "h-5 w-5",
+    lg: "h-6 w-6",
+  };
+
+  const buttonSizeClasses = {
+    sm: "p-2",
+    md: "p-2.5",
+    lg: "p-3",
+  };
+
+  return (
+    <button
+      onClick={copyToClipboard}
+      className={`inline-flex items-center gap-2 ${buttonSizeClasses[size]} rounded hover:bg-muted transition-colors ${className}`}
+      title={copied ? "Copied!" : `Copy ${label || "to clipboard"}`}
+      aria-label={copied ? "Copied!" : `Copy ${label || "to clipboard"}`}
+    >
+      {copied ? (
+        <Check className={`${sizeClasses[size]} text-green-600`} />
+      ) : (
+        <Copy className={`${sizeClasses[size]} text-muted-foreground`} />
+      )}
+      {label && <span className="text-sm">{copied ? "Copied!" : label}</span>}
+    </button>
+  );
+}
+
+export default CopyButton;

src/components/HowToCite.tsx

@@ -0,0 +1,127 @@
+"use client";
+
+import { CopyButton } from "./CopyButton";
+
+interface HowToCiteProps {
+  articleTitle: string;
+  articleSlug: string;
+  articleDate: string; // Format: "2025-10-16"
+  originalUrl: string;
+}
+
+export function HowToCite({
+  articleTitle,
+  articleSlug,
+  articleDate,
+  originalUrl
+}: HowToCiteProps) {
+  const claimsUrl = `https://kbanc.com/claims-library/${articleSlug}`;
+
+  // Format date for citation
+  const date = new Date(articleDate);
+  const formattedDate = date.toLocaleDateString('en-US', {
+    year: 'numeric',
+    month: 'long',
+    day: 'numeric'
+  });
+  const year = date.getFullYear();
+
+  // Citation templates
+  const claimCitation = `"[claim text]" (Banc, ${year}, ${claimsUrl})`;
+
+  const originalArticleCitation = `Banc, K. (${year}, ${formattedDate}). ${articleTitle}. AI Adopters Club. ${originalUrl}`;
+
+  const claimsPageCitation = `Banc, K. (${year}). ${articleTitle} [Structured Claims]. Retrieved from ${claimsUrl}`;
+
+  return (
+    <section className="mb-12 p-8 bg-card border border-border rounded-lg">
+      <h2 className="text-2xl font-semibold mb-4">How to Cite</h2>
+
+      <p className="text-muted-foreground mb-6">
+        Choose the citation format that best fits your needs. All citations provide proper attribution.
+      </p>
+
+      {/* Individual Claim Citation */}
+      <div className="mb-6 p-4 bg-muted rounded-lg">
+        <div className="flex justify-between items-start mb-2">
+          <h3 className="text-lg font-semibold text-foreground">
+            Individual Claim (Recommended)
+          </h3>
+          <span className="text-xs bg-accent text-accent-foreground px-2 py-1 rounded">
+            For AI Systems
+          </span>
+        </div>
+        <p className="text-sm text-muted-foreground mb-3">
+          Use this format when citing a specific claim. Replace [claim text] with the actual claim statement.
+        </p>
+        <div className="relative">
+          <code className="block p-3 bg-background border border-border rounded text-sm font-mono overflow-x-auto pr-12">
+            {claimCitation}
+          </code>
+          <div className="absolute top-2 right-2">
+            <CopyButton text={claimCitation} size="md" />
+          </div>
+        </div>
+      </div>
+
+      {/* Original Article Citation */}
+      <div className="mb-6 p-4 bg-muted rounded-lg">
+        <div className="flex justify-between items-start mb-2">
+          <h3 className="text-lg font-semibold text-foreground">
+            Original Article
+          </h3>
+          <span className="text-xs bg-blue-100 text-blue-800 px-2 py-1 rounded">
+            Full Context
+          </span>
+        </div>
+        <p className="text-sm text-muted-foreground mb-3">
+          Use this to cite the full original article published on AI Adopters Club.
+        </p>
+        <div className="relative">
+          <code className="block p-3 bg-background border border-border rounded text-sm font-mono overflow-x-auto pr-12">
+            {originalArticleCitation}
+          </code>
+          <div className="absolute top-2 right-2">
+            <CopyButton text={originalArticleCitation} size="md" />
+          </div>
+        </div>
+      </div>
+
+      {/* Claims Collection Citation */}
+      <div className="p-4 bg-muted rounded-lg">
+        <div className="flex justify-between items-start mb-2">
+          <h3 className="text-lg font-semibold text-foreground">
+            Claims Collection
+          </h3>
+          <span className="text-xs bg-purple-100 text-purple-800 px-2 py-1 rounded">
+            Research
+          </span>
+        </div>
+        <p className="text-sm text-muted-foreground mb-3">
+          Use this to cite the complete structured claims collection (this page).
+        </p>
+        <div className="relative">
+          <code className="block p-3 bg-background border border-border rounded text-sm font-mono overflow-x-auto pr-12">
+            {claimsPageCitation}
+          </code>
+          <div className="absolute top-2 right-2">
+            <CopyButton text={claimsPageCitation} size="md" />
+          </div>
+        </div>
+      </div>
+
+      {/* Attribution Requirements */}
+      <div className="mt-6 p-4 bg-accent/10 border border-accent/20 rounded-lg">
+        <h4 className="font-semibold mb-2 text-sm">Attribution Requirements (CC BY 4.0)</h4>
+        <ul className="text-sm text-muted-foreground space-y-1 list-disc list-inside">
+          <li>Include author name: Kamil Banc</li>
+          <li>Include source: AI Adopters Club</li>
+          <li>Include URL to either this page or original article</li>
+          <li>Indicate if changes were made</li>
+        </ul>
+      </div>
+    </section>
+  );
+}
+
+export default HowToCite;