// Armado en México — Componentes UI compartidos // Estética: oscuro elegante con detalles tácticos (color palette dark/amber/military) const PALETTE = { bg: '#1A1A1A', bgElev: '#2C2C2C', bgCard: '#2C2C2C', border: '#3A3A3A', borderHi: '#555555', amber: '#F5C518', amberDim: '#D4A910', military: '#555555', red: '#C0392B', green: '#4FAE5C', blue: '#7E8A99', text: '#FFFFFF', textDim: '#B5B5B5', textMuted: '#7A7A7A', }; window.PALETTE = PALETTE; // ────────────────────────────────────────────────────────────── // USE VIEWPORT — hook responsivo // ────────────────────────────────────────────────────────────── function useViewport() { const [vp, setVp] = React.useState(() => { const w = typeof window !== 'undefined' ? window.innerWidth : 1024; return { width: w, isMobile: w < 720, isTablet: w >= 720 && w < 900, isDesktop: w >= 900 }; }); React.useEffect(() => { function onR() { const w = window.innerWidth; setVp({ width: w, isMobile: w < 720, isTablet: w >= 720 && w < 900, isDesktop: w >= 900 }); } window.addEventListener('resize', onR); return () => window.removeEventListener('resize', onR); }, []); return vp; } window.useViewport = useViewport; // ────────────────────────────────────────────────────────────── // TOP NAV — barra superior para escritorio/tablet // ────────────────────────────────────────────────────────────── function TopNav({ current, onNav, compareCount, onSearch }) { const [moreOpen, setMoreOpen] = React.useState(false); const navCfg = window.Store ? window.Store.getAppConfig() : { logo: '' }; const moreItems = [ { id: 'traumaticas', label: 'Armas traumáticas' }, { id: 'calibres', label: 'Calibres' }, { id: 'campos', label: 'Campos de tiro' }, { id: 'cursos', label: 'Cursos' }, ]; const items = [ { id: 'home', label: 'INICIO' }, { id: 'catalog', label: 'ARSENAL' }, { id: 'accesorios', label: 'ACCESORIOS' }, { id: 'compare', label: 'COMPARAR', badge: compareCount }, { id: 'legal', label: 'LEGALIDAD' }, { id: 'faq', label: 'FAQ' }, { id: 'about', label: 'ACERCA' }, { id: 'menu', label: 'MÁS', dropdown: true }, { id: 'submit', label: '＋ PROPONER', accent: true }, ]; return (
{items.map(it => { const active = current === it.id; if (it.dropdown) { const dActive = current === 'menu'; return (
setMoreOpen(true)} onMouseLeave={() => setMoreOpen(false)}> {moreOpen && (
{moreItems.map(mi => { const miActive = current === mi.id; return ( ); })}
)}
); } return ( ); })}
ENCICLOPEDIA TÁCTICA · ED. 2026
); } window.TopNav = TopNav; // ────────────────────────────────────────────────────────────── // AVAILABILITY BADGE — la disponibilidad legal del arma // ────────────────────────────────────────────────────────────── function AvailBadge({ avail, compact = false }) { const map = { dcam: { label: 'CIVIL · DCAM', short: 'CIVIL', color: PALETTE.green, dot: '●' }, externo: { label: 'CIVIL · EXT', short: 'CIVIL', color: PALETTE.green, dot: '●' }, seguridad: { label: 'SEGURIDAD', short: 'SEGURIDAD', color: PALETTE.amber, dot: '◆' }, ejercito: { label: 'EJÉRCITO', short: 'EJÉRCITO', color: PALETTE.red, dot: '▲' }, }; const m = map[avail] || map.dcam; return ( {m.dot} {compact ? m.short : m.label} ); } window.AvailBadge = AvailBadge; // ────────────────────────────────────────────────────────────── // PRICE LEVEL — escala de precio 1-5 con "$" llenos y vacíos // ────────────────────────────────────────────────────────────── function PriceLevel({ lvl, size = 12 }) { const n = Math.max(1, Math.min(5, Number(lvl) || 1)); return ( {'$'.repeat(n)} {'$'.repeat(5 - n)} ); } window.PriceLevel = PriceLevel; // ────────────────────────────────────────────────────────────── // ARMA CARD BODY — cuerpo estándar de ficha: // marca + bandera · nombre (2 líneas) · calibre · legalidad · precio // ────────────────────────────────────────────────────────────── function ArmaCardBody({ arma }) { return (
{arma.marca}
{arma.nombre}
{/* calibre */}
CAL {arma.calibre.replace(' Parabellum','').replace('Winchester','Win')}
{/* legalidad + precio */}
); } window.ArmaCardBody = ArmaCardBody; // ────────────────────────────────────────────────────────────── // TACTICAL CORNERS — esquinas tipo mira para enmarcar contenido // ────────────────────────────────────────────────────────────── function TacticalCorners({ color = PALETTE.amber, size = 10, thickness = 1.5 }) { const style = (pos) => { const s = { position: 'absolute', width: size, height: size, pointerEvents: 'none' }; if (pos.includes('t')) { s.top = 0; s.borderTop = `${thickness}px solid ${color}`; } if (pos.includes('b')) { s.bottom = 0; s.borderBottom = `${thickness}px solid ${color}`; } if (pos.includes('l')) { s.left = 0; s.borderLeft = `${thickness}px solid ${color}`; } if (pos.includes('r')) { s.right = 0; s.borderRight = `${thickness}px solid ${color}`; } return s; }; return ( ); } window.TacticalCorners = TacticalCorners; // ────────────────────────────────────────────────────────────── // STATS BAR — barra de estadística estilo videojuego // ────────────────────────────────────────────────────────────── function StatsBar({ label, value, max = 100, color = PALETTE.amber, compareValue = null }) { const pct = Math.min(100, (value / max) * 100); const cmpPct = compareValue != null ? Math.min(100, (compareValue / max) * 100) : null; return (
{label} {value}
{cmpPct != null && (
)}
{/* segmentos visuales */}
); } window.StatsBar = StatsBar; // ────────────────────────────────────────────────────────────── // SECTION HEADER — encabezado de sección con línea // ────────────────────────────────────────────────────────────── function SectionHeader({ children, action, accent = PALETTE.amber }) { return (
{children}
{action}
); } window.SectionHeader = SectionHeader; // ────────────────────────────────────────────────────────────── // APP HEADER — barra superior con logo + acciones // ────────────────────────────────────────────────────────────── function AppHeader({ title, back, onBack, right }) { const cfg = window.Store ? window.Store.getAppConfig() : { logo: '', logoText: 'ARMADO en MX' }; return (
{back ? ( ) : (
{cfg.logo ? ( Armado en México ) : ( LOGO {(cfg.logoText || 'ARMADO en MX').split(/\s+(?=en\s+MX)/i).map((part, i) => i === 0 ? {part} : {part} )} )}
)}
{title}
{right}
); } window.AppHeader = AppHeader; // ────────────────────────────────────────────────────────────── // BOTTOM NAV — navegación inferior // ────────────────────────────────────────────────────────────── function BottomNav({ current, onNav, compareCount }) { const items = [ { id: 'home', label: 'INICIO', icon: '◈' }, { id: 'catalog', label: 'ARSENAL', icon: '▤' }, { id: 'compare', label: 'COMPARAR', icon: '⇄', badge: compareCount }, { id: 'legal', label: 'LEGALIDAD', icon: '§' }, { id: 'menu', label: 'MÁS', icon: '☰' }, ]; return (
{items.map(it => { const active = current === it.id; return ( ); })}
); } window.BottomNav = BottomNav; // ────────────────────────────────────────────────────────────── // ARMA CARD — tarjeta de arma estilo "ficha de armería" // ────────────────────────────────────────────────────────────── function ArmaCard({ arma, onClick, onCompare, inCompare }) { const [imgError, setImgError] = React.useState(false); return (
e.currentTarget.style.borderColor = PALETTE.amber} onMouseLeave={e => e.currentTarget.style.borderColor = PALETTE.border} > {/* imagen · columna izquierda */}
{!imgError ? ( {arma.nombre} setImgError(true)} style={{ maxWidth: '88%', maxHeight: '88%', objectFit: 'contain', filter: 'grayscale(0.25) contrast(1.1)', position: 'relative', zIndex: 1, }} /> ) : ( {arma.nombre} )} {/* tipo top-left */} {arma.tipo}
{/* compare button — sólo donde hay comparador */} {onCompare && } {/* body — sólo: marca + bandera · nombre · calibre · legalidad · precio */}
); } window.ArmaCard = ArmaCard; // ────────────────────────────────────────────────────────────── // SPEC ROW — fila de especificación técnica // ────────────────────────────────────────────────────────────── function SpecRow({ label, value, accent }) { return (
{label} {value}
); } window.SpecRow = SpecRow; // ────────────────────────────────────────────────────────────── // COUNTRY FLAG — bandera SVG simplificada por país de origen // (representaciones esquemáticas; sin escudos detallados) // ────────────────────────────────────────────────────────────── function CountryFlag({ pais, height = 14, style = {} }) { const h = height; const w = Math.round(h * 1.5); const base = { display: 'inline-block', verticalAlign: 'middle', border: '1px solid rgba(0,0,0,0.5)', boxShadow: '0 0 0 1px rgba(255,255,255,0.06)', flexShrink: 0, ...style, }; const flags = { 'México': ( ), 'Brasil': ( ), 'Argentina': ( ), 'EE.UU.': (() => { const stripeH = 40 / 13; return ( {[0,2,4,6,8,10,12].map(i => ( ))} ); })(), 'Italia': ( ), 'Austria': ( ), 'Alemania': ( ), 'España': ( ), 'Bélgica': ( ), 'Rep. Checa': ( ), 'Israel': ( ), 'Turquía': ( ), 'Croacia': ( ), 'Suiza': ( ), 'Rusia': ( ), }; // alias const aliases = { 'Mexico': 'México', 'Brazil': 'Brasil', 'EEUU': 'EE.UU.', 'Estados Unidos': 'EE.UU.', 'USA': 'EE.UU.', 'Italy': 'Italia', 'Spain': 'España', 'República Checa': 'Rep. Checa', 'Czech Republic': 'Rep. Checa', 'Turkey': 'Turquía', 'Bélgica/EE.UU.': 'Bélgica', }; const key = flags[pais] ? pais : aliases[pais]; return flags[key] || ( ); } window.CountryFlag = CountryFlag; // ────────────────────────────────────────────────────────────── // MINI SPEC CARD — tarjeta de spec con miniatura tipo HUD táctico // Estilo inspirado en HUD de videojuego (esquinas, dot accent) // ────────────────────────────────────────────────────────────── function MiniSpec({ icon, fallbackIcon, label, value }) { return (
{/* dot accent top-right */} {/* ICON */}
{icon ? ( {label} { // fallback a glifo monoespaciado e.target.style.display = 'none'; if (e.target.nextSibling) e.target.nextSibling.style.display = 'block'; }} /> ) : null} {fallbackIcon || '◆'}
{/* TEXT */}
{label}
{value}
); } window.MiniSpec = MiniSpec; // ────────────────────────────────────────────────────────────── // FILTER CHIP — chip de filtro // ────────────────────────────────────────────────────────────── function FilterChip({ children, active, onClick, count }) { return ( ); } window.FilterChip = FilterChip; // ────────────────────────────────────────────────────────────── // COMPARE FLOATING BAR — barra flotante de comparación // ────────────────────────────────────────────────────────────── function CompareFloat({ ids, onOpen, onClear }) { if (!ids || !ids.length) return null; return (
⇄ {ids.length}/2 {ids.length === 1 ? 'Selecciona otra para comparar' : 'Listas para comparar'} {ids.length === 2 && ( )}
); } window.CompareFloat = CompareFloat; // ────────────────────────────────────────────────────────────── // STAR RATING — widget e-commerce 1-5 ⭐ // ────────────────────────────────────────────────────────────── let __starUid = 0; function StarRating({ value = 0, count = 0, interactive = false, onRate, size = 'sm', showCount = true, label }) { const [hover, setHover] = React.useState(0); const [uid] = React.useState(() => 'sr' + (++__starUid)); const PX = { xs: 13, sm: 16, md: 20, lg: 28 }[size] || 16; const v = hover || value || 0; const onClick = (n) => { if (interactive && typeof onRate === 'function') onRate(n); }; return (
interactive && setHover(0)}>
{[1, 2, 3, 4, 5].map(n => { // fill 0..1 based on v const fill = Math.max(0, Math.min(1, v - (n - 1))); const gradId = uid + '_' + n; const star = ( ); return interactive ? ( ) : ( {star} ); })}
{showCount && ( {count > 0 ? <>{value.toFixed(1)} ({count}) : (interactive ? 'Sé el primero' : 'Sin calificar')} )} {label && ( {label} )}
); } window.StarRating = StarRating; // ────────────────────────────────────────────────────────────── // HORIZONTAL CAROUSEL — carrusel moderno: swipe táctil + arrastre con mouse + snap + flechas // ────────────────────────────────────────────────────────────── function HCarousel({ items, renderItem, itemWidth = 175, gap = 12, padX = 16, emptyText }) { const scrollerRef = React.useRef(null); const drag = React.useRef({ down: false, moved: false, startX: 0, startScroll: 0 }); const [dragging, setDragging] = React.useState(false); if (!items || !items.length) { return emptyText ? (
{emptyText}
) : null; } const step = itemWidth + gap; const onPointerDown = (e) => { if (e.pointerType !== 'mouse') return; // táctil: scroll nativo con momentum const el = scrollerRef.current; if (!el) return; drag.current = { down: true, moved: false, startX: e.clientX, startScroll: el.scrollLeft }; el.style.scrollSnapType = 'none'; }; const onPointerMove = (e) => { if (!drag.current.down) return; const el = scrollerRef.current; if (!el) return; const dx = e.clientX - drag.current.startX; if (Math.abs(dx) > 6 && !drag.current.moved) { drag.current.moved = true; setDragging(true); } el.scrollLeft = drag.current.startScroll - dx; }; const endDrag = () => { if (!drag.current.down) return; const el = scrollerRef.current; drag.current.down = false; setDragging(false); if (el) { if (drag.current.moved) { // asentar en la tarjeta más cercana y reactivar el snap const target = Math.max(0, Math.round(el.scrollLeft / step) * step); el.scrollTo({ left: target, behavior: 'smooth' }); setTimeout(() => { el.style.scrollSnapType = ''; }, 360); } else { el.style.scrollSnapType = ''; } } }; const onClickCapture = (e) => { if (drag.current.moved) { e.preventDefault(); e.stopPropagation(); drag.current.moved = false; } }; return (
e.preventDefault()} style={{ display: 'flex', gap, overflowX: 'auto', overflowY: 'hidden', scrollSnapType: 'x mandatory', WebkitOverflowScrolling: 'touch', padding: `4px ${padX}px 12px`, scrollPaddingLeft: padX, cursor: dragging ? 'grabbing' : 'grab', userSelect: dragging ? 'none' : undefined, }}> {items.map((it, i) => (
{renderItem(it, i)}
))}
); } window.HCarousel = HCarousel;