// Armado en México — Pantallas de Producto, Comparador, Legal, FAQ, Acerca const { useState: useState2, useMemo: useMemo2 } = React; // ════════════════════════════════════════════════════════════════ // PRODUCT — Ficha completa de un arma // ════════════════════════════════════════════════════════════════ function ProductScreen({ armaId, onOpenArma, onNav, compareIds, toggleCompare }) { const vp = window.useViewport(); const arma = window.findArma(armaId); const [tab, setTab] = useState2('specs'); const [showSuggest, setShowSuggest] = useState2(false); // track de visita una vez por mount useEffect(() => { if (arma && window.Store) window.Store.trackVisit(arma.id); }, [arma?.id]); if (!arma) return
Arma no encontrada
; const availMeta = window.CATEGORIES.disponibilidad.find((d) => d.id === arma.avail); const inCmp = compareIds.includes(arma.id); const containerMax = { maxWidth: 1200, margin: '0 auto', width: '100%' }; const PAD = vp.isDesktop ? 28 : 16; const flag = window.countryFlag(arma.pais); const priceHistory = window.Store ? window.Store.getPriceHistory(arma.id) : []; // armas relacionadas (mismo tipo) const related = window.DB.filter((a) => a.tipo === arma.tipo && a.id !== arma.id).slice(0, 4); return (
{/* HERO IMAGE — original (foto principal del arma) */}
{/* readouts */}
◢ ID-{String(arma.id).padStart(3, '0')}
{arma.nombre} {e.target.src = window.armaPlaceholder(arma);e.target.onerror = null;}} /> {/* bottom readouts */}
━━ {arma.longitud} {arma.peso} ●
{/* TITLE BLOCK — original */}
{arma.marca} · {arma.pais} · {arma.anio}
{arma.nombre}
{arma.mecanismo}
{/* ═══════════════════════════════════════════════════════════ GUNSMITH PANEL — ficha HUD táctica rediseñada ─ Header: nombre + pestañas tipo/marca + nivel de uso ─ Centro: imagen grande del arma + tarjetas flotantes ─ Stats panel + leyenda (Diseño original; estética táctica, no afiliada a marca alguna) ═══════════════════════════════════════════════════════════ */} {(() => { const ORANGE = window.GUN_ACCENT || '#F5C518'; const ORANGE_DEEP = window.GUN_ACCENT_DEEP || '#D4A910'; const NIVEL = { dcam: 'Civil', seguridad: 'Policial', ejercito: 'Militar' }; const nivel = NIVEL[arma.avail] || 'Civil'; const statsKeys = [ { k: 'precision', l: 'Precisión' }, { k: 'poder', l: 'Daño' }, { k: 'alcance', l: 'Alcance' }, { k: 'manejo', l: 'Movilidad' }, { k: 'capacidad', l: 'Capacidad' }, { k: 'retroceso', l: 'Retroceso', invert: true }]; // Tarjeta flotante (estilo HUD táctico) — mobile-first sizing const FloatCard = ({ icon, fallbackIcon, label, value, connectorSide = 'bottom' }) =>
{/* dot naranja arriba-derecha */} {/* icono */}
{icon ? {label} {e.target.style.display = 'none';if (e.target.nextSibling) e.target.nextSibling.style.display = 'block';}} /> : null} {fallbackIcon || '◆'}
{/* texto */}
{label}
{value}
{/* línea conectora — apunta hacia el arma */} {connectorSide === 'bottom' && } {connectorSide === 'top' && }
; return (
{/* topograph overlay */}
{/* ── HEADER ───────────────────────────────────────────── */}
{/* LEFT — título + pestañas */}
{arma.nombre}
{/* TABS */}
{/* TAB ACTIVA — tipo de arma */}
{arma.tipo}
{/* TAB inactiva — marca + bandera + país */}
{arma.marca} {arma.pais}
{/* RIGHT — nivel de uso */}
Nivel de uso
{nivel}
{arma.availLabel}
{/* ── ÁREA CENTRAL: imagen + tarjetas flotantes ───────── Layout unificado mobile-first. La app es móvil; escritorio solo aumenta tamaños. */} {true ?
{/* TARJETAS ARRIBA (3) — connector vía SVG overlay (sin conector propio) */}
{/* ── SVG CONNECTOR OVERLAY ────────────────────────── Solo las líneas indicadas: 4 conectores simples + 1 regla horizontal para Longitud. Sin extras. */} {/* CALIBRE — curva down-right hacia donde irá la imagen del cartucho */} {/* LONGITUD — regla: drop vertical + línea horizontal que mide el arma */} {/* MECANISMO — curva down-left hacia el cuerpo del arma */} {/* PESO — curva up-right hacia el cuerpo del arma */} {/* CAPACIDAD — curva up-left hacia el cargador del arma */} {/* IMAGEN DEL ARMA — centrada horizontal */}
{/* underglow sutil */}
{arma.img ? {arma.nombre} {e.target.src = window.armaPlaceholder(arma);e.target.onerror = null;}} /> :
[ ▢ PNG SIN FONDO ]
{arma.nombre}
}
{/* TARJETAS ABAJO (2) — connector vía SVG overlay */}
: null } {/* ── STATS PANEL — abajo-izquierda ───────────────────── */}
ESTADISTICAS
Est. divulgativa
{statsKeys.map((s) => { const raw = arma.stats[s.k] || 0; const v = s.invert ? 100 - raw : raw; return (
{s.l}
); })}
{/* disclaimer */}
Las estadísticas mostradas son estimaciones cualitativas derivadas de las especificaciones técnicas. Se proveen con fines divulgativos y de comparación entre modelos.
); })()} {/* TABS */}
{[ { id: 'specs', label: 'Specs' }, { id: 'legal', label: 'Legal' }, { id: 'history', label: 'Historia' }]. map((t) => )}
{/* TAB CONTENT */}
{tab === 'specs' &&
Especificaciones Técnicas
Precio Referencia DCAM
◆ Precio Actual (con IVA)
{arma.priceExact}
Ref. DCAM: {arma.dcamRef}
Nivel:
{/* CALIFICACIÓN DE USUARIOS */} {/* HISTORIAL DE PRECIOS */} {priceHistory.length > 0 && Historial de precios
{priceHistory.slice().reverse().map((h, i) => { const d = new Date(h.date); return (
{i === 0 ? '● ACTUAL' : '○'} {h.price} {h.note && · {h.note}}
{d.toLocaleDateString('es-MX', { day: '2-digit', month: 'short', year: 'numeric' })}
); })}
} Usos Recomendados
{arma.uses.map((u) => { const meta = window.CATEGORIES.uso.find((x) => x.id === u); return ( {meta?.icon || '●'} {meta?.label || u} ); })}
} {tab === 'legal' &&
Estatus Legal en México
{arma.legalTit}
{arma.legalDesc}
Disponibilidad
{arma.disponibilidad.map((d, i) =>
▸ {d}
)}
} {tab === 'history' &&
Dossier Histórico
━━━ ENTRADA · {arma.anio} ━━━
{arma.historia}
}
{/* SUGERIR CAMBIOS */}
{showSuggest && setShowSuggest(false)} /> } {/* VIDEO YOUTUBE (sólo si hay) */} {/* RELATED */} {related.length > 0 &&
Misma Categoría
{related.map((a) =>
onOpenArma(a.id)} onCompare={() => toggleCompare(a.id)} inCompare={compareIds.includes(a.id)} />
)}
}
); } window.ProductScreen = ProductScreen; // ════════════════════════════════════════════════════════════════ // RATING BLOCK — bloque visual para calificar un arma (1-5★) // ════════════════════════════════════════════════════════════════ function RatingBlock({ armaId }) { const [, force] = useState2(0); useEffect(() => window.Store && window.Store.onChange(() => force((x) => x + 1)), []); const rating = window.Store ? window.Store.getRating(armaId) : { avg: 0, count: 0 }; const userR = window.Store ? window.Store.getUserRating(armaId) : 0; const [thanks, setThanks] = useState2(false); const onRate = (n) => { window.Store && window.Store.addRating(armaId, n); setThanks(true); setTimeout(() => setThanks(false), 1800); }; return ( Calificación de usuarios
{/* Promedio destacado */}
{rating.count ? rating.avg.toFixed(1) : '—'} /5
{rating.count === 0 ? 'Sé el primero en calificar' : `${rating.count} ${rating.count === 1 ? 'calificación' : 'calificaciones'}`}
{/* Acción del usuario */}
{userR ? 'Tu calificación' : 'Califica este modelo'}
{thanks && ✓ ¡Gracias! }
); } window.RatingBlock = RatingBlock; // ════════════════════════════════════════════════════════════════ // YOUTUBE BLOCK — embed de video de Armas M&S (si existe) // ════════════════════════════════════════════════════════════════ function YouTubeBlock({ arma, padX = 16 }) { const [loaded, setLoaded] = useState2(false); const vid = window.youtubeId(arma.youtube); if (!vid) return null; // si no hay video, no se renderiza nada const thumb = `https://i.ytimg.com/vi/${vid}/hqdefault.jpg`; const embed = `https://www.youtube-nocookie.com/embed/${vid}?rel=0&autoplay=1&modestbranding=1`; return (
@ArmasMS ↗ }>Video Review · YouTube
!loaded && setLoaded(true)}> {loaded ?