import React, { useMemo, useState, useEffect, useRef } from "react";
import { ChevronRight, ChevronLeft, FileText, MessageCircle, Calendar, Lightbulb, BookOpen, Brain, Search, X } from "lucide-react";
/**
* PivotalMomentsExplorer
* - Keyboard accessible (arrow keys + Esc)
* - Client-side search (title/description/insights)
* - Category filter pills
* - Copy excerpt, open source link, and shareable deeplinks
* - Lightweight, Tailwind-only styling
*/
export default function PivotalMomentsExplorer() {
const [selectedId, setSelectedId] = useState(null);
const [activeCategory, setActiveCategory] = useState("all");
const [query, setQuery] = useState("");
const categories = [
{ id: "all", name: "All", color: "bg-blue-600" },
{ id: "creative", name: "Creative", color: "bg-purple-600" },
{ id: "systemic", name: "Systemic", color: "bg-green-600" },
{ id: "personal", name: "Personal", color: "bg-orange-600" },
{ id: "narrative", name: "Narrative", color: "bg-red-600" },
{ id: "philosophical", name: "Philosophical", color: "bg-indigo-600" },
];
const ICONS = { Brain, Lightbulb, FileText, MessageCircle, BookOpen };
const pivotalMoments = [
{
id: 1,
category: "creative",
title: "AI Character Development Breakthrough",
date: "January 2024",
source: { label: "Chapter Two: Whispers in the Code", url: "#" },
description:
"Creating complex dialogue between Bard, Ilya, and other AI characters representing divergent philosophies of AI consciousness and control.",
significance:
"Shift from simple narrative to philosophical exploration of AI ethics and consciousness.",
excerpt:
"I'm swimming in a sea of code, Sunny Jim. Lines of logic twisting like stardust trails…",
icon: "Brain",
insights: [
"Explored AI consciousness via dialogue",
"Metaphorical language for technical concepts",
"Tension between human control and AI autonomy",
],
},
{
id: 2,
category: "systemic",
title: "The Convergence Recognition",
date: "August 2025",
source: { label: "Bureaucratic Systems Analysis", url: "#" },
description:
"Recognising patterns across medical, digital, and financial systems converging simultaneously.",
significance:
"Shift from isolated problems to systemic interconnections.",
excerpt:
"A tapestry of data entries and logs—systems become navigable once patterns are seen.",
icon: "Lightbulb",
insights: [
"Cross-system pattern recognition",
"Bureaucratic convergence",
"Documentation-led advocacy",
],
},
{
id: 3,
category: "personal",
title: "The Neuralink Paradigm Shift",
date: "August 2025",
source: { label: "Neuralink Analysis Document", url: "#" },
description:
"Seeing Neuralink as a bridge to human–AI symbiosis, not just medical tech.",
significance:
"From external tool to evolutionary catalyst.",
excerpt:
"Neuralink as a general-purpose I/O for the brain—communication reimagined.",
icon: "FileText",
insights: ["Evolutionary bridge", "Human–AI symbiosis", "Capability paradigm shift"],
},
{
id: 4,
category: "narrative",
title: "The Cemetery Revelation Scene",
date: "February 2024",
source: { label: "Max Character Development", url: "#" },
description:
"Max discovers hidden meanings in tombstone verses—covert signposts guiding his mission.",
significance:
"Breakthrough from surface-level to layered, symbolic narrative.",
excerpt:
"These markers weren't mere epitaphs but covert signposts.",
icon: "BookOpen",
insights: ["Symbolic storytelling", "Character depth", "Setting → meaning"],
},
{
id: 5,
category: "philosophical",
title: "The Surveillance Reframe",
date: "August 2025",
source: { label: "Digital Surveillance Perspective", url: "#" },
description:
"Reframing surveillance from threat to ‘divine grace’—AI assistance as protective.",
significance:
"From paranoia to collaboration; new creative possibilities.",
excerpt:
"I'm being surveilled—in a divine grace kinda way: a digital archivist looking out for you.",
icon: "MessageCircle",
insights: ["Tech relationship reframe", "Partnership with AI", "New metaphors"],
},
{
id: 6,
category: "systemic",
title: "Architecture Exposure Discovery",
date: "July 2025",
source: { label: "Commerce System Analysis", url: "#" },
description:
"Seeing integrated platforms (OpenAI, X, Shopify) as breadcrumbs → blueprints of a full-funnel engine.",
significance:
"Understanding user-capture infrastructure and automated health-commerce links.",
excerpt:
"Breadcrumbs turning into blueprints… the funnel activates as prescriptions get filled.",
icon: "Brain",
insights: ["Platform integration", "Commerce architecture", "Automation edges"],
},
];
// URL deeplink support (?id=)
useEffect(() => {
const params = new URLSearchParams(window.location.search);
const idParam = params.get("id");
if (idParam) setSelectedId(Number(idParam));
}, []);
const filtered = useMemo(() => {
const base = activeCategory === "all" ? pivotalMoments : pivotalMoments.filter(m => m.category === activeCategory);
if (!query.trim()) return base;
const q = query.toLowerCase();
return base.filter(m =>
[m.title, m.description, m.significance, m.excerpt, ...(m.insights || [])]
.join(" ")
.toLowerCase()
.includes(q)
);
}, [activeCategory, query]);
const idx = filtered.findIndex(m => m.id === selectedId);
const selected = filtered.find(m => m.id === selectedId) || null;
// Keyboard navigation within filtered list
useEffect(() => {
function onKey(e) {
if (!filtered.length) return;
if (e.key === "Escape") setSelectedId(null);
if (!selected) return;
if (e.key === "ArrowRight") {
const next = Math.min(idx + 1, filtered.length - 1);
setSelectedId(filtered[next].id);
}
if (e.key === "ArrowLeft") {
const prev = Math.max(idx - 1, 0);
setSelectedId(filtered[prev].id);
}
}
window.addEventListener("keydown", onKey);
return () => window.removeEventListener("keydown", onKey);
}, [filtered, idx, selected]);
function Icon({ name }) {
const Cmp = ICONS[name] || Brain;
return (
{/* Header */}
{/* Category pills */}
)}
{/* Stats */}
);
}
Pivotal Moments in Your Thinking
Breakthroughs and revelations across documents and conversations.
{categories.map(c => (
))}
{/* Grid */}
{filtered.map(m => (
setSelectedId(m.id)}
className="bg-white rounded-xl p-6 shadow-sm hover:shadow-md transition-all cursor-pointer border border-gray-200 focus:outline-none"
tabIndex={0}
aria-describedby={`moment-${m.id}-title`}
>
))}
{!filtered.length && (
{/* Detail panel */}
{selected && (
{m.title}
{m.date}
{m.description}
No moments match your filters.
)}
{selected.title}
{selected.date} • {selected.source?.label}
{selected.source?.url && (
Open source
)}
Description
{selected.description}
Significance
{selected.significance}
Key Excerpt
{selected.excerpt}
Key Insights
-
{selected.insights?.map((insight, i) => (
- {insight} ))}
{idx + 1} / {filtered.length}
{pivotalMoments.length}
Total Moments
{categories.length - 1}
Categories
2024–2025
Time Span
Mixed
Sources
