// Armado en México — Introducción / Onboarding tutorial
// ─────────────────────────────────────────────────────────────────
// Pantalla de bienvenida que se muestra en el primer arranque (navegador
// nuevo o app recién instalada) y que puede reproducirse desde MÁS.
// Persistencia del "ya visto" en localStorage: amx_onboarded_v1
// ─────────────────────────────────────────────────────────────────
(function () {
const P = window.PALETTE;
// ── Tile de ícono (mismo lenguaje visual que MenuScreen) ──────────
function IconTile({ icon, accent }) {
return (
{icon}
);
}
// ── Fila de función (ícono + título + descripción) ────────────────
function FeatureRow({ icon, title, desc, accent }) {
return (
{title}
{desc}
);
}
// ── Etiqueta "✕ no" para las intenciones ──────────────────────────
function NoChip({ children }) {
return (
✕{children}
);
}
// ── Definición de los pasos ───────────────────────────────────────
// visual: nodo grande; eyebrow/title/body: texto. tone: 'accent' tiñe.
function buildSlides(vp) {
const logoSize = vp.isDesktop ? 168 : 138;
return [
{
key: 'welcome',
eyebrow: '◆ BIENVENIDO',
title: 'Armado en México',
body: 'Tu enciclopedia táctica de las armas legales en México. Conoce, compara y aprende — todo en un mismo lugar.',
tagline: '¡Protege lo que amas!',
visual: (
),
},
{
key: 'mission',
eyebrow: '▲ ANTES DE EMPEZAR',
title: 'Informar, no vender',
body: 'Somos un proyecto privado y divulgativo. Mostramos las armas de fuego solo con fines informativos y de transparencia — no tramitamos permisos. Lo único que comercializamos son tres armas traumáticas de defensa menos letal.',
visual: (
No somos gobiernoNo vendemos armas de fuegoNo tramitamos licencias
),
},
{
key: 'explore',
eyebrow: '▤ EXPLORA',
title: 'Arsenal y comparador',
rows: [
{ icon: '▤', title: 'Arsenal', desc: 'Más de 100 fichas con specs, calibre y disponibilidad legal. Filtra por categoría y tipo.' },
{ icon: '⇄', title: 'Comparar', desc: 'Pon dos armas lado a lado y revisa sus diferencias al detalle.' },
],
},
{
key: 'learn',
eyebrow: '◉ APRENDE',
title: 'Conocimiento a la mano',
rows: [
{ icon: '◉', title: 'Calibres', desc: 'Guía de munición: balística, usos y las armas que lo disparan.' },
{ icon: '✦', title: 'Cursos', desc: 'Formación: manejo seguro y tiro defensivo.' },
{ icon: '◎', title: 'Campos de tiro', desc: 'Clubes y polígonos aliados · próximamente.' },
{ icon: '§', title: 'Legalidad', desc: 'Cómo es el trámite ante SEDENA y las categorías legales.' },
],
},
{
key: 'defense',
eyebrow: '◎ DEFENSA MENOS LETAL',
title: 'Armas traumáticas',
body: 'Dispositivos de defensa propulsados por CO₂ en calibre .50 y .68. Sin permiso SEDENA — y lo único que sí puedes comprar con nosotros.',
accent: true,
visual: (
◎
),
},
{
key: 'ready',
eyebrow: '✓ TODO LISTO',
title: 'Empieza a explorar',
body: '¿Quieres repasar esta introducción más tarde? Encuentra «Ver tutorial» en la sección MÁS cuando quieras.',
tagline: 'Tu defensa, nuestra especialidad.',
visual: (
✓
),
},
];
}
// ── Componente principal ──────────────────────────────────────────
function OnboardingTutorial({ open, onClose }) {
const vp = window.useViewport();
const [idx, setIdx] = React.useState(0);
const touch = React.useRef({ x: 0, active: false });
const slides = React.useMemo(() => buildSlides(vp), [vp.isDesktop]);
const count = slides.length;
const last = idx === count - 1;
// Reiniciar al abrir
React.useEffect(() => { if (open) setIdx(0); }, [open]);
// Bloquear el scroll del fondo mientras está abierto
React.useEffect(() => {
if (!open) return;
const prev = document.body.style.overflow;
document.body.style.overflow = 'hidden';
return () => { document.body.style.overflow = prev; };
}, [open]);
const goNext = React.useCallback(() => {
setIdx((i) => (i >= count - 1 ? i : i + 1));
}, [count]);
const goBack = React.useCallback(() => setIdx((i) => Math.max(0, i - 1)), []);
const finish = React.useCallback(() => { onClose && onClose(); }, [onClose]);
// Teclado (escritorio): ← → para navegar, Esc para salir
React.useEffect(() => {
if (!open) return;
const onKey = (e) => {
if (e.key === 'ArrowRight') { e.preventDefault(); last ? finish() : goNext(); }
else if (e.key === 'ArrowLeft') { e.preventDefault(); goBack(); }
else if (e.key === 'Escape') { e.preventDefault(); finish(); }
};
window.addEventListener('keydown', onKey);
return () => window.removeEventListener('keydown', onKey);
}, [open, last, goNext, goBack, finish]);
if (!open) return null;
const s = slides[idx];
// Swipe táctil
const onTouchStart = (e) => { touch.current = { x: e.touches[0].clientX, active: true }; };
const onTouchEnd = (e) => {
if (!touch.current.active) return;
const dx = (e.changedTouches[0].clientX) - touch.current.x;
touch.current.active = false;
if (Math.abs(dx) < 45) return;
if (dx < 0) { last ? finish() : goNext(); } else { goBack(); }
};
const PAD = vp.isDesktop ? 40 : 22;
return (
