{[
"I want to start",
"I want to start learning ETFs",
"I want to start investing safely",
"I want to start with ETFs",
].filter(s => s.toLowerCase().includes(search.toLowerCase())).map((s, i) => (
))}
{/* spine — circles are 18px wide + 3px border each side = 24px effective, positioned at left:-24
of an item that starts at x=24 (parent paddingLeft). Circle center sits at x=12,
so spine width:2 needs left:11. */}
{items.map((l, i) => {
const isDone = completed.includes(l.id) || i === 0;
return (
{isDone && }
{l.title}
{l.desc}
);
})}
go("learn-lesson")}>Start Learning
);
};
/* ───── Screen 6 — Lesson (Flash cards) ───── */
const FLASH_CARDS = [
{ title: "Understanding ETFs", body: <>An ETF (Exchange Traded Fund) is a type of investment fund that tracks a group of assets like stocks, bonds, or commodities., tags: ["Stocks", "Commodities", "Bonds"], visual: "basket",
sources: [{ name: "Investor.gov — ETFs", url: "investor.gov/etfs" }] },
{ title: "Diversification, baked in", body: <>One ETF can hold hundreds of companies — so when one drops, others can cushion the fall., tags: ["Mix", "Spread", "Steady"], visual: "diversification",
sources: [{ name: "Investor.gov — Diversification", url: "investor.gov/diversification" }] },
{ title: "Bought like a stock", body: <>You can buy or sell ETF shares on the exchange any time during market hours., tags: ["Market", "Liquid"], visual: "exchange",
sources: [{ name: "SEC.gov — ETF Investor Bulletin", url: "sec.gov/oiea/etfs" }] },
{ title: "Low effort, low fees", body: <>Most ETFs follow an index, so management costs are tiny compared to mutual funds., tags: ["Passive", "Cheap"], visual: "fees",
sources: [{ name: "Vanguard — Cost of investing", url: "investor.vanguard.com/investor-resources-education" }] },
{ title: "Build your portfolio", body: <>Combine a few ETFs to cover different regions, sectors, and risk levels — your starter kit., tags: ["Mix it up"], visual: "portfolio",
sources: [{ name: "Investor.gov — Asset Allocation", url: "investor.gov/asset-allocation" }] },
{ title: "Long game wins", body: <>ETFs reward patience. Time in the market beats timing the market., tags: ["Stay"], visual: "long-game",
sources: [{ name: "FINRA — Time-Tested Strategies", url: "finra.org/investors" }] },
];
/* Small inline SVG visuals — one per flashcard */
const VisualBasket = () => (
);
const VisualDiversification = () => (
);
const VisualExchange = () => (
);
const VisualFees = () => (
);
const VisualPortfolio = () => (
);
const VisualLongGame = () => (
);
const VISUALS = {
basket: VisualBasket,
diversification: VisualDiversification,
exchange: VisualExchange,
fees: VisualFees,
portfolio: VisualPortfolio,
"long-game": VisualLongGame,
};
const LessonScreen = ({ go, onChangeTab, openAI, onComplete }) => {
const [idx, setIdx] = useState(0);
const total = FLASH_CARDS.length;
const next = () => {
if (idx < total - 1) setIdx(i => i + 1);
else { onComplete(); go("learn-congrats"); }
};
const prev = () => idx > 0 ? setIdx(i => i - 1) : go("learn-progress");
const touchStart = useRef(0);
const onTS = e => { touchStart.current = e.touches[0].clientX; };
const onTE = e => {
const dx = e.changedTouches[0].clientX - touchStart.current;
if (Math.abs(dx) < 50) return;
if (dx < 0) next(); else prev();
};
const card = FLASH_CARDS[idx];
return (
}