import { useMemo, useState, type CSSProperties } from "react"; import { Bike, Check, Clock3, Home, MapPinned, Plus, Search, Sparkles, UserRoundPlus, UtensilsCrossed, } from "lucide-react"; import HexLattice, { type HexNode } from "./HexLattice"; import CurrentAtmosphere from "./CurrentAtmosphere"; type CartCategoryKey = "food" | "activities" | "habitat"; type OnboardingStep = 1 | 2 | 3 | 4 | 5 | 6 | 7; type ClaimSlot = { id: string; name: string; status: "dim" | "pending"; }; type SeedItem = { id: string; category: CartCategoryKey; name: string; }; const STEP_META: Record = { 1: { title: "Name + claim your hex", label: "Identity and ownership", icon: Sparkles, detail: "The center hex is yours. It cannot be moved. It cannot be taken." }, 2: { title: "Plant your Inner Circle", label: "Six anchors, chosen once", icon: UserRoundPlus, detail: "You start with 6. Claim them or skip for now — the claim is bidirectional." }, 3: { title: "First cart — Food", label: "How you eat", icon: UtensilsCrossed, detail: "Add at least one food item. The first 3 items are bonus-weighted." }, 4: { title: "First cart — Activities", label: "How you spend energy", icon: Bike, detail: "Add at least one activity item. The first 3 items are bonus-weighted." }, 5: { title: "First cart — Habitat", label: "How your space speaks", icon: Home, detail: "Add at least one habitat item. The first 3 items are bonus-weighted." }, 6: { title: "Your constellation begins", label: "Nine planted seeds", icon: Clock3, detail: "You've planted 9. The cascade begins. Check back in an hour." }, 7: { title: "First return — The Current", label: "Ambient discovery", icon: Sparkles, detail: "Welcome back. Your atmosphere is live — warm hexes, new people, and passive discovery." }, }; const STEP_PILLARS = [ { title: "Center", text: "Claim the fixed center hex." }, { title: "Inner Circle", text: "Choose 6 anchors; claims can remain pending." }, { title: "Cart", text: "Plant 3 Food, 3 Activities, 3 Habitat seeds." }, { title: "Current", text: "After 9 seeds, the field begins to breathe hourly." }, ] as const; const INNER_CIRCLE: ClaimSlot[] = [ { id: "north", name: "Ari", status: "dim" }, { id: "northeast", name: "Sam", status: "dim" }, { id: "southeast", name: "Jo", status: "dim" }, { id: "south", name: "Mina", status: "dim" }, { id: "southwest", name: "Rae", status: "dim" }, { id: "northwest", name: "Tae", status: "dim" }, ]; const CATEGORY_META: Record = { food: { label: "Food", icon: "🍜", accent: "#d4a574", prompt: "Tell us how you eat.", examples: ["Ramen Bar X", "Farmers market on Saturdays", "My own cooking"], }, activities: { label: "Activities", icon: "⛰️", accent: "#8ab6d6", prompt: "Tell us how you spend your time.", examples: ["Rock climbing on weekends", "Jazz vinyl listening", "Language learning apps"], }, habitat: { label: "Habitat", icon: "🪴", accent: "#9ac18a", prompt: "Tell us about your space.", examples: ["My plants (14 and counting)", "Minimalist kitchen", "Bookshelf I actually use"], }, }; const CURRENT_PREVIEW = [ { name: "Mira", warmth: "hot", signal: "hearts" as const }, { name: "Sol", warmth: "warm", signal: "stars" as const }, { name: "Nadia", warmth: "cool", signal: "moons" as const }, { name: "Iris", warmth: "warm", signal: "hourglasses" as const }, { name: "Jun", warmth: "hot", signal: "balloons" as const }, { name: "Luca", warmth: "warm", signal: "stars" as const }, ]; 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 = 13) { const trimmed = value.trim().replace(/\s+/g, " "); return trimmed.length <= limit ? trimmed : `${trimmed.slice(0, limit - 1)}…`; } function categorySignal(category: CartCategoryKey) { if (category === "food") return "hearts" as const; if (category === "activities") return "stars" as const; return "moons" as const; } function warmthTone(warmth: "hot" | "warm" | "cool") { 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 buildNodes(step: OnboardingStep, name: string, claims: ClaimSlot[], seeds: SeedItem[]): HexNode[] { 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: slot.status === "dim" ? "dim" : "person", label: slot.name, }); }); 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, 11), resonanceSignal: categorySignal(item.category), }); }); } if (step >= 7) { CURRENT_PREVIEW.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 StepCard({ active, done, icon: Icon, title, label, onClick, }: { active: boolean; done: boolean; icon: typeof Sparkles; title: string; label: string; onClick: () => void; }) { return ( ); } function SummaryBadge({ title, text }: { title: string; text: string }) { return (
{title}
{text}
); } export interface OnboardingFlowProps { title?: string; subtitle?: string; initialName?: string; onComplete?: () => void; } export default function OnboardingFlow({ title = "Cascade Onboarding", subtitle = "Onboarding is not a tutorial. It is the first act of the game.", initialName = "", onComplete, }: OnboardingFlowProps) { const [step, setStep] = useState(1); const [name, setName] = useState(initialName); const [claimed, setClaimed] = useState([]); const [selectedCategory, setSelectedCategory] = useState("food"); const [drafts, setDrafts] = useState>({ food: "", activities: "", habitat: "" }); const [seeds, setSeeds] = useState([]); const plantedCount = 1 + claimed.length + seeds.length; const claimedCount = claimed.length; const categoryCounts = { food: seeds.filter((item) => item.category === "food").length, activities: seeds.filter((item) => item.category === "activities").length, habitat: seeds.filter((item) => item.category === "habitat").length, }; const activeCategory = step === 3 ? "food" : step === 4 ? "activities" : step === 5 ? "habitat" : selectedCategory; const canUnlockNext = (step === 1 && name.trim().length > 0) || step === 2 || (step === 3 && categoryCounts.food > 0) || (step === 4 && categoryCounts.activities > 0) || (step === 5 && categoryCounts.habitat > 0) || (step === 6 && plantedCount >= 9) || step === 7; const currentStep = STEP_META[step]; const nodes = useMemo( () => buildNodes(step, name, INNER_CIRCLE.map((slot) => ({ ...slot, status: claimed.includes(slot.id) ? "pending" : "dim" })), seeds), [claimed, name, seeds, step], ); const next = () => { if (!canUnlockNext) return; if (step === 7) { onComplete?.(); return; } setStep((current) => (Math.min(7, current + 1) as OnboardingStep)); }; const back = () => setStep((current) => (Math.max(1, current - 1) as OnboardingStep)); const toggleClaim = (id: string) => { setClaimed((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 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 currentTone = step >= 7 ? warmthTone("warm") : warmthTone("cool"); return (
Cascade · Onboarding

{title}

{subtitle}

= 7 ? "Live" : "Forming"} />
{Object.entries(STEP_META).map(([key, meta]) => { const number = Number(key) as OnboardingStep; return ( 0) || (number === 2 && claimedCount > 0) || (number === 3 && categoryCounts.food > 0) || (number === 4 && categoryCounts.activities > 0) || (number === 5 && categoryCounts.habitat > 0)} icon={meta.icon} title={`${number}`} label={meta.label} onClick={() => setStep(number)} /> ); })}
{STEP_PILLARS.map((pillar) => (
{pillar.title}
{pillar.text}
))}
{currentStep.title}

{currentStep.detail}

{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
{claimedCount}/6 claimed
Claiming is bidirectional. Pending until mutual.
Ring 6
{step >= 7 ? "Atmosphere live" : "Forming hourly"}
People enter The Current at the hourly tempo.
); }