import React, { useState, useRef, useEffect, useMemo, useCallback, useLayoutEffect } from "react";
import { createRoot } from "react-dom/client";
import { motion, AnimatePresence, useReducedMotion } from "framer-motion";
import { DOUBTS, LANGS, SPEEDS } from "./content.js";
import { md, Md } from "./md.js";
/* ============================================================
springs
============================================================ */
const SNAP = { type: "spring", stiffness: 400, damping: 32 };
const SMOOTH = { type: "spring", stiffness: 260, damping: 28 };
const SHEET = { type: "spring", stiffness: 320, damping: 34, mass: 0.9 };
/* Breathing room between narrated units, on auto-advance only. A step change
is a bigger beat than moving between cards inside a step — the page turns
and the subject shifts — so it gets a longer pause. A manual jump (tap,
arrow, steps sheet) plays immediately; waiting after a deliberate tap
would read as lag. The payload's own `delayAfterPrev` can lengthen either
gap but not shorten it. */
const SECTION_GAP = 1000; // card → card within the same step
const STEP_GAP = 1500; // crossing into a new step
/* Step pages slide sideways; direction comes from `custom`.
AnimatePresence runs in mode="wait" so exactly one page is ever mounted —
otherwise jumping back to a step whose exit is still running re-enters the
same key and strands a phantom page under the live one. Sequential
enter/exit means the per-leg duration has to stay short. */
const PAGE_T = { type: "tween", duration: 0.18, ease: [0.2, 0, 0, 1] };
const PAGE = {
enter: (d) => ({ x: d > 0 ? 60 : -60, opacity: 0 }),
center: { x: 0, opacity: 1 },
exit: (d) => ({ x: d > 0 ? -60 : 60, opacity: 0 }),
};
/* ============================================================
eased auto-scroll
`scrollTo({ behavior: "smooth" })` has a fixed, non-configurable curve
that differs between engines, so it never matched the highlight
crossfade. This drives scrollTop per frame on the same ease-in-out
cubic as TINT_T — [0.65, 0, 0.35, 1] is exactly easeInOutCubic, so the
closed form below is the identical curve without a bezier solver.
============================================================ */
/* Vertical offset of `node` inside the scroll container `root`.
NOT `node.offsetTop`: while a section is revealing, Framer Motion holds a
transform on its wrapper, and Chrome then reports that wrapper as the
offsetParent — so offsetTop reads ~0 and the scroll target collapses to the
top of the page. Walking the offsetParent chain is correct whichever
ancestors happen to be positioned or transformed mid-animation. */
function offsetWithin(node, root) {
let y = 0;
for (let n = node; n && n !== root; n = n.offsetParent) y += n.offsetTop;
return y;
}
const easeInOutCubic = (t) => (t < 0.5 ? 4 * t * t * t : 1 - Math.pow(-2 * t + 2, 3) / 2);
/**
* @param to a number, or a getter re-read every frame. Use the getter when
* layout is still settling: the collapsing step header changes the
* container's height mid-scroll, which shrinks the maximum
* scrollTop. Against a fixed target that clamps late and the view
* visibly drifts back up after arriving. Re-resolving each frame
* lets the motion converge on the target as it moves.
*/
function animateScrollTo(el, to, { instant = false } = {}) {
const from = el.scrollTop;
const resolve = () => {
const limit = Math.max(0, el.scrollHeight - el.clientHeight);
return Math.max(0, Math.min(limit, typeof to === "function" ? to() : to));
};
if (instant || Math.abs(resolve() - from) < 1) { el.scrollTop = resolve(); return () => {}; }
// distance-scaled: short nudges stay brisk, long jumps don't sprint
const dur = Math.min(700, Math.max(260, Math.abs(resolve() - from) * 0.7));
let raf = 0;
let startedAt = 0;
let dead = false;
const stop = () => {
if (dead) return;
dead = true;
if (raf) cancelAnimationFrame(raf);
el.removeEventListener("wheel", stop);
el.removeEventListener("touchstart", stop);
el.removeEventListener("pointerdown", stop);
};
// a real gesture always outranks an automatic scroll — never fight the user
el.addEventListener("wheel", stop, { passive: true });
el.addEventListener("touchstart", stop, { passive: true });
el.addEventListener("pointerdown", stop, { passive: true });
const step = (now) => {
if (dead) return;
if (!startedAt) startedAt = now;
const t = Math.min(1, (now - startedAt) / dur);
el.scrollTop = from + (resolve() - from) * easeInOutCubic(t);
if (t < 1) raf = requestAnimationFrame(step);
else stop();
};
raf = requestAnimationFrame(step);
return stop;
}
/* ============================================================
icons — 16px grid unless noted
============================================================ */
const S = { fill: "none", stroke: "currentColor", strokeWidth: 1.6, strokeLinecap: "round", strokeLinejoin: "round" };
const IcBack = (p) => (
);
const IcChevron = ({ dir = "down", size = 16 }) => (
);
const IcSpeaker = ({ off }) => (
);
const IcPlay = ({ size = 16 }) => (
);
const IcPause = ({ size = 16 }) => (
);
const IcReplay = ({ size = 17 }) => (
);
const IcPrev = () => (
);
const IcNext = () => (
);
const IcSteps = () => (
);
const IcCheck = ({ size = 11 }) => (
);
const IcX = ({ size = 10 }) => (
);
const IcBulb = () => (
);
const IcThumb = ({ down }) => (
);
const IcMic = () => (
);
const IcSend = () => (
);
const IcCamera = () => (
);
/* One CLOSED silhouette, so the fill actually seals the shape. The previous
icon was a single path of open finger subpaths — `fill` left gaps between
them, and the active card's blue border read straight through the hand. */
const HAND_BODY =
"M11.4 8.2a2.9 2.9 0 0 1 5.8 0v9.6l3.3.7c.9.2 1.7.4 2.5.6l3.1.9a3.2 3.2 0 0 1 2.3 3.1v5.4c0 5.5-4.5 10-10 10h-1.9a9.3 9.3 0 0 1-7.6-4l-3.5-5a2.4 2.4 0 0 1 .6-3.4c1.1-.7 2.5-.5 3.3.5l2.1 2.4Z";
const HAND_LINES =
"M17.2 18.4c1.5.4 2.4 1.1 2.8 2.2M20.8 19.3c1.4.4 2.2 1.1 2.6 2.1M24.4 20.3c1.2.4 1.9 1 2.2 1.9";
const IcHand = () => (
);
/* Looping tap gesture for the coachmark pointer: press, release, rest.
`times` front-loads the whole tap into the first ~40% so the rest of the
cycle is a pause — a continuous bob reads as idle animation, whereas a
tap followed by stillness reads as an instruction to repeat. The ripple is
keyed to the same timeline so it fires on the press, not alongside it, and
sits behind the hand — which is opaque, so it only reads around the
fingertip rather than through the pointer. */
const TAP_LOOP = { duration: 1.7, repeat: Infinity, ease: "easeInOut", times: [0, 0.12, 0.26, 0.42, 1] };
function TapHint({ reduce }) {
return (
{!reduce && (
)}
);
}
const IcAllie = () => (
);
const Wave = () => (
{[0, 1, 2, 3].map((i) => )}
);
/* ============================================================
voice pulse — the top tint breathes while narration plays
------------------------------------------------------------
Three blurred brand-blue blobs on different periods so the
motion reads organic rather than metronomic. At rest they
settle into the flat gradient from the Figma frames.
============================================================ */
/* `rest`→`peak` is the swing while speaking; the idle state settles to a
fraction of `rest`. Tuned so the top of the screen reads as gently alive,
not as a notification demanding attention: the swing is wide enough to
catch peripheral vision, the periods are long and mutually prime so no
single throb dominates, and the cores stay clear of the title's baseline. */
const BLOBS = [
{ cls: "b1", period: 2.4, rest: 0.34, peak: 0.96, lift: 0.14, delay: 0 },
{ cls: "b2", period: 3.1, rest: 0.26, peak: 0.78, lift: 0.18, delay: 0.35 },
{ cls: "b3", period: 1.9, rest: 0.20, peak: 0.62, lift: 0.22, delay: 0.7 },
];
function VoicePulse({ speaking, reduce }) {
const on = speaking && !reduce;
return (
{BLOBS.map((b) => (
))}
);
}
/* ============================================================
status bar
============================================================ */
function StatusBar() {
return (
9:41
);
}
/* ============================================================
narration
Per SECTION, not per block — the pipeline ships one audio
file per section and that is the unit that gets highlighted.
Resolution order:
1. section.audio[lang] ->