import { useMemo, useState, type CSSProperties } from "react"; import { Bike, Check, CircleCheck, CircleDashed, Clock3, Home, MapPinned, Plus, Search, Sparkles, UserRoundPlus, UtensilsCrossed, } from "lucide-react"; import HexLattice, { type HexNode } from "./HexLattice"; type CartCategoryKey = "food" | "activities" | "habitat"; type OnboardingStep = 1 | 2 | 3 | 4 | 5 | 6 | 7; type CurrentWarmth = "hot" | "warm" | "cool"; type ClaimStatus = "dim" | "pending" | "confirmed"; type CurrentPerson = { name: string; warmth: CurrentWarmth; floatLevel: "Rising" | "Airy" | "Drifting" | "Cloud Walking"; resonanceScore: number; signal: "hearts" | "stars" | "moons" | "hourglasses" | "balloons"; featuredItems: string[]; cartSummary: Record; }; type SeedItem = { id: string; category: CartCategoryKey; name: string; }; type ClaimSlot = { id: string; name: string; role: string; signal: "hearts" | "stars" | "moons"; }; export interface OnboardingStoryProps { title?: string; subtitle?: string; initialName?: string; onComplete?: () => void; } const STEP_META: Record = { 1: { title: "Name + Claim Your Hex", label: "Center ownership", icon: Sparkles }, 2: { title: "Plant Your Inner Circle", label: "Bidirectional claim", icon: UserRoundPlus }, 3: { title: "First Cart — Food", label: "Food identity", icon: UtensilsCrossed }, 4: { title: "First Cart — Activities", label: "Activity identity", icon: Bike }, 5: { title: "First Cart — Habitat", label: "Habitat identity", icon: Home }, 6: { title: "Your Constellation Begins", label: "Nine planted seeds", icon: Clock3 }, 7: { title: "First Return — The Current", label: "Ambient discovery", icon: Sparkles }, }; const INNER_CIRCLE: ClaimSlot[] = [ { id: "north", name: "Ari", role: "Anchor", signal: "hearts" }, { id: "northeast", name: "Sam", role: "Anchor", signal: "stars" }, { id: "southeast", name: "Jo", role: "Anchor", signal: "moons" }, { id: "south", name: "Mina", role: "Anchor", signal: "hearts" }, { id: "southwest", name: "Rae", role: "Anchor", signal: "stars" }, { id: "northwest", name: "Tae", role: "Anchor", signal: "moons" }, ]; const CATEGORY_META: Record< CartCategoryKey, { label: string; prompt: string; examples: string[]; accent: string; signal: "hearts" | "stars" | "moons"; } > = { food: { label: "Food", prompt: "Tell us how you eat.", examples: ["Ramen Bar X", "Farmers market on Saturdays", "My own cooking"], accent: "#d4a574", signal: "hearts", }, activities: { label: "Activities", prompt: "Tell us how you spend your time.", examples: ["Rock climbing on weekends", "Jazz vinyl listening", "Language learning apps"], accent: "#8ab6d6", signal: "stars", }, habitat: { label: "Habitat", prompt: "Tell us about your space.", examples: ["My plants (14 and counting)", "Minimalist kitchen", "Bookshelf I actually use"], accent: "#9ac18a", signal: "moons", }, }; const CURRENT_SAMPLE: CurrentPerson[] = [ { name: "Mira", warmth: "hot", floatLevel: "Cloud Walking", resonanceScore: 88, signal: "hearts", featuredItems: ["Ramen Bar X", "Bike rides after sunset", "Ceramic mugs"], cartSummary: { food: ["Ramen Bar X", "Sour cherries", "Sunday pastries"], activities: ["Bike rides after sunset", "Late-night walks", "Film scores on vinyl"], habitat: ["Plants near every window", "Soft lighting", "A well-used kitchen"], }, }, { name: "Sol", warmth: "warm", floatLevel: "Airy", resonanceScore: 69, signal: "stars", featuredItems: ["Jazz vinyl listening", "Indie film nights", "Espresso at 4pm"], cartSummary: { food: ["Espresso at 4pm", "Farmers market tomatoes", "Lemon tart"], activities: ["Jazz vinyl listening", "Indie film nights", "Sketchbook walks"], habitat: ["Record shelves", "Open windows", "One perfect lamp"], }, }, { name: "Nadia", warmth: "cool", floatLevel: "Drifting", resonanceScore: 36, signal: "moons", featuredItems: ["My own cooking", "Secondhand sofa", "Sunday hikes"], cartSummary: { food: ["My own cooking", "Soup in winter", "Good tomatoes"], activities: ["Sunday hikes", "Slow mornings", "Library trips"], habitat: ["Secondhand sofa", "Plants in the kitchen", "Warm blankets"], }, }, { name: "Iris", warmth: "warm", floatLevel: "Rising", resonanceScore: 74, signal: "hourglasses", featuredItems: ["Farmers market on Saturdays", "Language learning apps", "Composting"], cartSummary: { food: ["Farmers market on Saturdays", "Meal prep Sundays", "Natural wine"], activities: ["Language learning apps", "Volunteering", "Long bike rides"], habitat: ["Composting", "Books everywhere", "Secondhand furniture"], }, }, { name: "Jun", warmth: "hot", floatLevel: "Cloud Walking", resonanceScore: 92, signal: "balloons", featuredItems: ["Hiking with my dog", "Gallery openings", "Meal-prepped weekdays"], cartSummary: { food: ["Meal-prepped weekdays", "Picnic lunches", "Coffee before dawn"], activities: ["Hiking with my dog", "Gallery openings", "Climbing gym sessions"], habitat: ["A dog bed by the window", "Gear hooks by the door", "Weekend laundry stacks"], }, }, { name: "Luca", warmth: "warm", floatLevel: "Airy", resonanceScore: 61, signal: "moons", featuredItems: ["Late breakfast", "Weekend markets", "A record player"], cartSummary: { food: ["Late breakfast", "Green grapes", "Ginger tea"], activities: ["Weekend markets", "Morning bike rides", "Reading in cafes"], habitat: ["A record player", "Soft rugs", "Windows that open wide"], }, }, ]; function makeId(prefix: string) { return `${prefix}-${Math.random().toString(36).slice(2, 8)}-${Date.now().toString(36)}`; } function initials(name: string) { return name .split(/\s+/) .filter(Boolean) .map((part) => part[0]?.toUpperCase()) .slice(0, 2) .join(""); } function shortLabel(value: string, limit = 16) { const compact = value.trim().replace(/\s+/g, " "); return compact.length <= limit ? compact : `${compact.slice(0, limit - 1)}…`; } function claimStatusLabel(status: ClaimStatus) { if (status === "confirmed") return "CONFIRMED"; if (status === "pending") return "PENDING"; return "DIM"; } function warmthMeta(warmth: CurrentWarmth) { if (warmth === "hot") return { label: "Hot", icon: "🔥", color: "#fb7185" }; if (warmth === "warm") return { label: "Warm", icon: "🌡️", color: "#f59e0b" }; return { label: "Cool", icon: "🌿", color: "#94a3b8" }; } function statusIcon(status: ClaimStatus) { if (status === "confirmed") return ; if (status === "pending") return ; return ; } function formatFloatLevel(level: CurrentPerson["floatLevel"]) { if (level === "Cloud Walking") return "Top tier, most visible, most trusted."; if (level === "Drifting") return "Visible, but still moving through circulation."; if (level === "Airy") return "Visible to people in the same direction."; return "New enough to be a signal, not a conclusion."; } function buildNodes(step: OnboardingStep, name: string, claims: ClaimSlot[], seeds: SeedItem[]) { const nodes: HexNode[] = [ { id: "center", ring: 0, position: 0, type: "you", label: name.trim() || "YOU", }, ]; claims.forEach((slot, index) => { nodes.push({ id: slot.id, ring: 1, position: index, type: "person", label: slot.name, resonanceSignal: slot.signal, }); }); if (step >= 3) { seeds.slice(0, 12).forEach((item, index) => { nodes.push({ id: item.id, ring: 2, position: index, type: "person", label: shortLabel(item.name, 12), resonanceSignal: CATEGORY_META[item.category].signal, }); }); } if (step >= 7) { CURRENT_SAMPLE.forEach((person, index) => { nodes.push({ id: `current-${index}`, ring: 6, position: index * 6, type: person.warmth === "hot" ? "resonance-hot" : person.warmth === "warm" ? "resonance-warm" : "resonance-cool", label: initials(person.name), resonanceSignal: person.signal, }); }); } return nodes; } function categorySummary(items: SeedItem[]) { return { food: items.filter((item) => item.category === "food").length, activities: items.filter((item) => item.category === "activities").length, habitat: items.filter((item) => item.category === "habitat").length, }; } function currentOverview(person: CurrentPerson) { const warmth = warmthMeta(person.warmth); const signalLabel = { hearts: "Direct overlap", stars: "Category congruence", moons: "Complementary rhythm", hourglasses: "Values alignment", balloons: "Presence + growth", }[person.signal]; return { warmth, signalLabel }; } export default function OnboardingStory({ title = "Cascade Onboarding", subtitle = "Onboarding is not a tutorial. It is the first act of the game.", initialName = "", onComplete, }: OnboardingStoryProps) { const [step, setStep] = useState(1); const [name, setName] = useState(initialName); const [claimedIds, setClaimedIds] = useState([]); const [drafts, setDrafts] = useState>({ food: "", activities: "", habitat: "" }); const [seeds, setSeeds] = useState([]); const [selectedCurrentId, setSelectedCurrentId] = useState("current-0"); const [selectedCurrentMode, setSelectedCurrentMode] = useState<"quick" | "breakdown" | "profile">("quick"); const summary = categorySummary(seeds); const plantedCount = 1 + claimedIds.length + seeds.length; const activeCategory: CartCategoryKey = step === 3 ? "food" : step === 4 ? "activities" : "habitat"; const nodes = useMemo( () => buildNodes(step, name, INNER_CIRCLE, seeds), [name, seeds, step], ); const activeStep = STEP_META[step]; const canContinue = (step === 1 && name.trim().length > 0) || step === 2 || (step === 3 && summary.food > 0) || (step === 4 && summary.activities > 0) || (step === 5 && summary.habitat > 0) || step === 6 || step === 7; const selectedCurrent = CURRENT_SAMPLE.find((person, index) => `current-${index}` === selectedCurrentId) ?? CURRENT_SAMPLE[0]; const selectedCurrentMeta = currentOverview(selectedCurrent); const theme = { bg: "#09090d", panel: "rgba(18, 20, 28, 0.86)", card: "rgba(255,255,255,0.04)", border: "rgba(255,255,255,0.10)", fg: "#f5eadc", muted: "rgba(245,234,220,0.68)", accent: "#d4a574", }; const handleNext = () => { if (!canContinue) return; if (step === 7) { onComplete?.(); return; } setStep((current) => ((current + 1) as OnboardingStep)); }; const handleBack = () => { setStep((current) => (Math.max(1, current - 1) as OnboardingStep)); }; const toggleClaim = (id: string) => { setClaimedIds((current) => (current.includes(id) ? current.filter((value) => value !== id) : [...current, id])); }; const addSeed = (category: CartCategoryKey, value: string) => { const trimmed = value.trim(); if (!trimmed) return; setSeeds((current) => { const duplicate = current.some((item) => item.category === category && item.name.toLowerCase() === trimmed.toLowerCase()); if (duplicate) return current; return [...current, { id: makeId(category), category, name: trimmed }]; }); setDrafts((current) => ({ ...current, [category]: "" })); }; const removeSeed = (id: string) => { setSeeds((current) => current.filter((item) => item.id !== id)); }; const rootStyle: CSSProperties = { "--bg": theme.bg, "--panel": theme.panel, "--card": theme.card, "--border": theme.border, "--fg": theme.fg, "--muted": theme.muted, "--accent": theme.accent, } as CSSProperties; const claimProgress = Math.round((claimedIds.length / 6) * 100); const totalSeeds = seeds.length; return (
Cascade / Onboarding

{title}

{subtitle}

Step {step} of 7
{plantedCount} planted
{Object.entries(STEP_META).map(([key, meta]) => { const number = Number(key) as OnboardingStep; const done = number < step || (number === 1 && name.trim().length > 0) || (number === 2 && claimedIds.length > 0) || (number === 3 && summary.food > 0) || (number === 4 && summary.activities > 0) || (number === 5 && summary.habitat > 0); return ( ); })}
{activeStep.title}

{activeStep.label}

{step === 1 ? : step === 2 ? : step === 7 ? : } {step === 1 ? "Center hex" : step === 2 ? "Bidirectional claim" : step >= 3 && step <= 5 ? "First cart items" : step === 6 ? "Consolidating" : "Hourly atmosphere"}
= 3 ? 2 : 0} />
Center
{name.trim() || "Your name goes here"}
The center hex is fixed. It cannot be moved or taken.
Ring 1
{claimedIds.length}/6 claimed
Claiming is bidirectional. Pending until mutual.
Ring 6
{step >= 7 ? "Atmosphere live" : "Forming hourly"}
People enter The Current at the hourly tempo.
); }