/* lead2play — Draft 2 (fresh). Self-contained, bilingual. */ const { useState, useEffect, useRef } = React; const ICONS = { search: <>, arrow: , brain: , chat: }; function Icon({ name }) { return ( ); } function Logo() { return ( lead2play ); } /* ── Header ──────────────────────────────────────────────── */ function Header({ t, lang, onToggleLang }) { return (
); } /* ── Search ──────────────────────────────────────────────── */ function Search({ t, games, onPick }) { const [q, setQ] = useState(""); const [open, setOpen] = useState(false); const [on, setOn] = useState(0); const ref = useRef(null); const matches = q.trim() ? games.filter(g => g.name.toLowerCase().includes(q.trim().toLowerCase())).slice(0, 5) : games.slice(0, 5); useEffect(() => { const fn = e => { if (ref.current && !ref.current.contains(e.target)) setOpen(false); }; document.addEventListener("mousedown", fn); return () => document.removeEventListener("mousedown", fn); }, []); const pick = g => { setQ(g.name); setOpen(false); onPick(g); }; const key = e => { if (!open) return; if (e.key === "ArrowDown") { e.preventDefault(); setOn(a => Math.min(a + 1, matches.length - 1)); } else if (e.key === "ArrowUp") { e.preventDefault(); setOn(a => Math.max(a - 1, 0)); } else if (e.key === "Enter") { e.preventDefault(); if (matches[on]) pick(matches[on]); } else if (e.key === "Escape") setOpen(false); }; return (
{ setQ(e.target.value); setOpen(true); setOn(0); }} onFocus={() => setOpen(true)} onKeyDown={key} aria-label={t["search.ph"]} />
{open && matches.length > 0 && (
{matches.map((g, i) => (
setOn(i)} onClick={() => pick(g)}> {g.emoji}{g.name}{g.genre}
))}
)}
{t["search.popular"]} {games.slice(0, 5).map(g => pick(g)}>{g.emoji} {g.name})}
); } /* ── Hero ─────────────────────────────────────────────────── */ function Hero({ t, games, onPick }) { return (
{t["hero.eyebrow"]}

{t["hero.pre"]}{t["hero.em"]}{t["hero.post"]}

{t["hero.sub"]}

200+ {t["trust.a"]} {t["trust.b"]} {t["trust.c"]}
); } /* ── How it works ────────────────────────────────────────── */ function How({ t }) { const ics = ["search", "brain", "chat"]; return (
{t["how.eyebrow"]}

{t["how.title"]}

{t["steps"].map((s, i) => (
{"0" + (i + 1)}

{s.t}

{s.d}

))}
); } /* ── Report ──────────────────────────────────────────────── */ function Report({ t, game }) { if (!game) return null; return (
{t["report.eyebrow"]}

{t["report.title"]}

{game.emoji}

{game.name}

{game.genre} · {game.platform}
{t["report.age"]} {game.age}

{game.lede}

{t["report.skills"]}

{game.skills.map((s, i) => (
{s.name}{s.level}%
))}

{game.science}

{game.source}

{t["report.tip"]}

{game.tip}

); } /* ── Science band ────────────────────────────────────────── */ function Science({ t, science }) { return (
{t["science.eyebrow"]}

{t["science.title"]}

{t["science.sub"]}

{t["stats"].map((s, i) =>
{s.n}
{s.c}
)}
{science.map((s, i) => (

{s.title}

{s.body}

{s.source}
))}
); } /* ── Library ─────────────────────────────────────────────── */ function Library({ t, games, onPick }) { return (
{t["library.eyebrow"]}

{t["library.title"]}

{games.map(g => (
onPick(g)}>
{g.emoji}
{g.age}
{g.name}
{g.genre}
{g.skills.slice(0, 2).map(s => {s.name})}
))}
); } /* ── Quotes ──────────────────────────────────────────────── */ function Quotes({ t, stories }) { return (
{t["parents.eyebrow"]}

{t["parents.title"]}

{stories.map((s, i) => (
“{s.quote}”
{s.name.charAt(0)} {s.name}{s.role}
))}
); } /* ── FAQ ─────────────────────────────────────────────────── */ function FAQ({ t, faq }) { const [open, setOpen] = useState(0); return (
{t["faq.eyebrow"]}

{t["faq.title"]}

{faq.map((f, i) => (
{f.a}
))}
); } /* ── CTA + footer ────────────────────────────────────────── */ function CTAFooter({ t }) { return (
{t["cta.eyebrow"]}

{t["cta.title1"]}
{t["cta.title2"]}

{t["cta.sub"]}

 ); } Object.assign(window, { Icon, Logo, Header, Search, Hero, How, Report, Science, Library, Quotes, FAQ, CTAFooter });