// components.jsx — Componentes compartidos para MiPC y su Mundo
// (Header, Footer, ProductCard, ProductImage, Banners, Breadcrumbs, Rating, etc.)
const { useState, useEffect, useRef, useMemo, useCallback } = React;
// ── Iconos SVG (line, stroke-current) ────────────────────────────────
const Icon = {
search: () => ,
cart: () => ,
user: () => ,
heart: () => ,
menu: () => ,
truck: () => ,
shield: () => ,
card: () => ,
headset: () => ,
chevron: ({d='right'}) => ,
star: ({filled}) => ,
close: () => ,
check: () => ,
trash: () => ,
filter: () => ,
};
// ── ProductImage (placeholder SVG por categoría + color) ─────────────
function ProductImage({ p, size = 'card' }) {
const big = size === 'big';
const sz = big ? 460 : 220;
const bg = p.color || '#64748b';
const cat = p.categoria;
// Glifo grande translúcido del icono de la categoría
const cats = window.MiPCInventario.categorias.find(c => c.id === cat);
return (
);
}
// ── Rating estrellas ─────────────────────────────────────────────────
function Rating({ value = 0, reviews, size = 14 }) {
const full = Math.round(value);
return (
{[1,2,3,4,5].map(i => (
))}
{reviews != null && ({reviews})}
);
}
// ── Badge ────────────────────────────────────────────────────────────
function Badge({ children, tone = 'default' }) {
return {children};
}
// ── ProductCard ──────────────────────────────────────────────────────
function ProductCard({ p, onClick, onAdd }) {
const fmt = window.MiPCInventario.formatoCOP;
const desc = p.precioAntes && p.precioAntes > p.precio
? Math.round((1 - p.precio / p.precioAntes) * 100) : 0;
return (
{desc > 0 &&
-{desc}%}
{p.marca}
{p.nombre}
{p.precioAntes && p.precioAntes > p.precio && (
{fmt(p.precioAntes)}
)}
{fmt(p.precio)}
{p.envioGratis &&
Envío gratis
}
);
}
// ── Header ───────────────────────────────────────────────────────────
function Header({ route, cartCount, onNavigate, onSearch, query, setQuery, showBanners }) {
const cats = window.MiPCInventario.categorias;
const [openMenu, setOpenMenu] = useState(false);
const submit = (e) => { e.preventDefault(); onSearch(query); };
return (
);
}
// ── Footer ───────────────────────────────────────────────────────────
function Footer() {
return (
);
}
// ── Breadcrumbs ──────────────────────────────────────────────────────
function Breadcrumbs({ items, onNavigate }) {
return (
);
}
// ── Hero / Carrusel principal ────────────────────────────────────────
function Hero({ onNavigate, variant = 'A' }) {
const slidesA = [
{ kicker:'TECNO DAYS', titulo:'Hasta 40% OFF', sub:'En los mejores portátiles para estudio y trabajo', cta:'Ver portátiles', to:'/categoria/computadores', bg:'#dc2626', accent:'#fbbf24' },
{ kicker:'GAMING', titulo:'Arma tu setup', sub:'PS5, sillas, monitores 165Hz y más', cta:'Explorar gaming', to:'/categoria/gaming', bg:'#1e3a8a', accent:'#22c55e' },
{ kicker:'NUEVO', titulo:'iPhone 15 ya llegó', sub:'Llévalo con 12 cuotas sin interés', cta:'Lo quiero', to:'/categoria/celulares', bg:'#0f172a', accent:'#f59e0b' },
];
const [idx, setIdx] = useState(0);
useEffect(() => {
const t = setInterval(() => setIdx(i => (i + 1) % slidesA.length), 6000);
return () => clearInterval(t);
}, []);
const s = slidesA[idx];
return (
{s.kicker}
{s.titulo}
{s.sub}
{slidesA.map((_,i) => (
);
}
// ── Strip de beneficios ──────────────────────────────────────────────
function BenefitsStrip() {
const items = [
{ icon: , t:'Envío gratis', s:'A partir de $150.000' },
{ icon: , t:'Compra protegida', s:'30 días para cambios' },
{ icon: , t:'Hasta 36 cuotas', s:'Con tarjeta de crédito' },
{ icon: , t:'Atención 24/7', s:'Chat, WhatsApp y línea' },
];
return (
);
}
// ── Grid de categorías circulares ────────────────────────────────────
function CategoryCircles({ onNavigate }) {
const cats = window.MiPCInventario.categorias;
return (
Compra por categoría
{cats.map(c => (
))}
);
}
Object.assign(window, {
Icon, ProductImage, Rating, Badge, ProductCard,
Header, Footer, Breadcrumbs, Hero, BenefitsStrip, CategoryCircles,
});
