1import { For, Show, createSignal } from "solid-js";2import { PeachWordmark } from "../components/PeachMark";3import { RuneBackground } from "../components/RuneBackground";45interface OnboardingCard {6 headline: string;7 body: string[];8 warning: string | null;9}1011const BASE_CARDS: OnboardingCard[] = [12 {13 headline: "Your passwords\nlive here.\nNowhere else.",14 body: [15 "No account. No server ever accesses your vault. No one but you can see it.",16 "Everything is encrypted on your device with a password only you know.",17 ],18 warning: null,19 },20 {21 headline: "Two keys.",22 body: [23 "Your master password is yours alone. Peach never sees it.",24 "If you forget it, your 12 recovery words can reset it from settings — save them somewhere safe.",25 ],26 warning: "Lose both and your vault cannot be opened.",27 },28 {29 headline: "Everything\nyou need.",30 body: [31 "Free includes passwords, cards, secure notes, two-factor codes, autofill, strong passwords, and breach checks.",32 "Pro adds encrypted sync, Peach Codex paper restore, passkeys, advanced vault health, canary entries, and duress tools.",33 ],34 warning: null,35 },36];3738const CARDS: OnboardingCard[] = BASE_CARDS;3940const CARD_EXIT_MS = 120;41const CARD_ENTER_GAP_MS = 60;4243interface OnboardingProps {44 onComplete: () => void | Promise<void>;45 onRestore?: () => void | Promise<void>;46 onAdopt?: () => void | Promise<void>;47}4849export function Onboarding(props: OnboardingProps) {50 const [card, setCard] = createSignal(0);51 const [exiting, setExiting] = createSignal(false);52 const [completing, setCompleting] = createSignal(false);5354 async function advance() {55 if (exiting() || completing()) return;56 if (card() < CARDS.length - 1) {57 setExiting(true);58 window.setTimeout(() => {59 setCard((c) => c + 1);60 setExiting(false);61 }, CARD_EXIT_MS + CARD_ENTER_GAP_MS);62 } else {63 setCompleting(true);64 65 66 67 68 window.setTimeout(() => {69 void props.onComplete();70 }, 200);71 }72 }7374 function goBack() {75 if (exiting() || completing()) return;76 if (card() === 0) return;77 setExiting(true);78 window.setTimeout(() => {79 setCard((c) => c - 1);80 setExiting(false);81 }, CARD_EXIT_MS + CARD_ENTER_GAP_MS);82 }8384 return (85 <section86 class="peach-screen peach-theme peach-onboarding"87 classList={{ "is-completing": completing() }}88 >89 <RuneBackground opacity={0.07} />9091 <header class="peach-screen-header peach-onboarding-header">92 <PeachWordmark class="peach-wordmark-wrap" />93 </header>9495 <div96 class="peach-onboarding-card"97 classList={{ "is-exiting": exiting() }}98 onClick={advance}99 role="button"100 tabIndex={0}101 onKeyDown={(e) => {102 if (e.key === "Enter" || e.key === " ") {103 e.preventDefault();104 advance();105 }106 }}107 >108 <h2 class="peach-onboarding-card-headline">109 {CARDS[card()]!.headline}110 </h2>111 <hr class="peach-onboarding-divider" />112 <For each={CARDS[card()]!.body}>113 {(para) => <p class="peach-onboarding-body">{para}</p>}114 </For>115 <Show when={CARDS[card()]!.warning}>116 <p class="peach-onboarding-warning">117 <span class="peach-onboarding-warning-icon" aria-hidden="true">⚠</span>118 <span>{CARDS[card()]!.warning}</span>119 </p>120 </Show>121 <Show when={card() === CARDS.length - 1}>122 <p class="peach-onboarding-choice-heading">Already using Peach?</p>123 <div class="peach-onboarding-choice-row">124 <button125 type="button"126 class="peach-onboarding-choice peach-onboarding-choice--adopt"127 onClick={(e) => {128 e.stopPropagation();129 void props.onAdopt?.();130 }}131 >132 <span class="peach-onboarding-choice-label">Pair with another device</span>133 <span class="peach-onboarding-choice-detail">134 Scan a QR and confirm one 8-digit code.135 </span>136 </button>137 <button138 type="button"139 class="peach-onboarding-choice"140 onClick={(e) => {141 e.stopPropagation();142 void props.onRestore?.();143 }}144 >145 <span class="peach-onboarding-choice-label">Restore a backup</span>146 <span class="peach-onboarding-choice-detail">147 Use PeachScript, a .peach file, CSV, or Codex.148 </span>149 </button>150 </div>151 </Show>152 </div>153154 <div class="peach-onboarding-nav">155 <Show when={card() > 0} fallback={<div class="peach-onboarding-back-spacer" />}>156 <button157 class="peach-onboarding-back"158 onClick={(e) => {159 e.stopPropagation();160 goBack();161 }}162 disabled={completing()}163 >164 ← back165 </button>166 </Show>167 <div class="peach-onboarding-dots" aria-hidden="true">168 <For each={CARDS}>169 {(_, i) => (170 <div171 class="peach-onboarding-dot"172 classList={{ "is-active": i() === card() }}173 />174 )}175 </For>176 </div>177 <button178 class="peach-onboarding-next"179 onClick={(e) => {180 e.stopPropagation();181 advance();182 }}183 disabled={completing()}184 >185 {card() === CARDS.length - 1 ? "Create vault" : "next →"}186 </button>187 </div>188 </section>189 );190}