/* ============ KIRO Jewelry — shared data, icons, components ============ */ const { useState, useEffect, useMemo, useRef, useCallback } = React; /* ---------- Seed catalog ---------- */ const SEED_CATEGORIES = [ { id: "anillos", name: "Anillos", tagline: "Para todos los días, para los días raros." }, { id: "collares", name: "Collares", tagline: "Capas que cuentan una historia." }, { id: "pulseras", name: "Pulseras", tagline: "El gesto que se queda en la muñeca." }, { id: "aretes", name: "Aretes", tagline: "Pequeños detalles, grandes momentos." }, ]; const SEED_PRODUCTS = [ // Anillos { id: "p01", name: "Anillo Lumen", price: 1290, category: "anillos", material: "Plata 925 con baño de oro 18k", color: "gold", sizes: ["5","6","7","8","9"], tag: "Nuevo", description: "Una banda fina con un solitario que captura la luz como una lágrima. Pensada para usarse sola o apilada con tus favoritos.", photos: 4 }, { id: "p02", name: "Anillo Solenne", price: 1690, category: "anillos", material: "Oro 14k macizo", color: "gold", sizes: ["5","6","7","8"], description: "Una silueta arquitectónica con una piedra central de circonia talla cojín. Para quien busca un statement discreto.", photos: 4 }, { id: "p03", name: "Anillo Demi", price: 890, category: "anillos", material: "Plata 925", color: "silver", sizes: ["6","7","8","9"], tag: "Bestseller", description: "El básico que no es básico: una banda media con textura cepillada y un acabado mate suave.", photos: 3 }, // Collares { id: "p04", name: "Collar Aria", price: 1450, category: "collares", material: "Oro 14k con perla cultivada", color: "gold", sizes: ["40 cm","45 cm","50 cm"], tag: "Edición", description: "Una perla barroca suspendida sobre una cadena rolo ultra fina. Una pieza para los días en que quieres flotar.", photos: 4 }, { id: "p05", name: "Collar Vega", price: 1190, category: "collares", material: "Plata 925 con baño de oro 18k", color: "gold", sizes: ["42 cm","45 cm"], description: "Cadena gargantilla de eslabón medio, terminada a mano. La pieza que se pone una vez y nunca se quita.", photos: 3 }, { id: "p06", name: "Collar Mira", price: 1590, category: "collares", material: "Oro 14k macizo", color: "gold", sizes: ["40 cm","45 cm"], tag: "Nuevo", description: "Tres dijes geométricos en oro pulido, suspendidos de una cadena box delicada. Cada dije se mueve de forma independiente.", photos: 4 }, // Pulseras { id: "p07", name: "Pulsera Sole", price: 990, category: "pulseras", material: "Oro 14k con piedras semipreciosas", color: "gold", sizes: ["S (16 cm)","M (18 cm)","L (20 cm)"], description: "Una hilera de granates engastados a mano sobre una cadena cable. Se ajusta con un cierre desliable.", photos: 3 }, { id: "p08", name: "Pulsera Cleo", price: 1290, category: "pulseras", material: "Plata 925 envejecida", color: "silver", sizes: ["S","M","L"], tag: "Bestseller", description: "Eslabón cubano fundido en plata maciza, con un cierre de mosquetón firme. Pesa, y se siente.", photos: 4 }, // Aretes { id: "p09", name: "Aretes Lila", price: 690, category: "aretes", material: "Plata 925 con baño de oro 18k", color: "gold", sizes: ["Único"], description: "Aros pequeños con textura martillada. Para usar todos los días, en pares o desparejados.", photos: 3 }, { id: "p10", name: "Aretes Mer", price: 1190, category: "aretes", material: "Oro 14k con topacios", color: "gold", sizes: ["Único"], tag: "Edición", description: "Aretes drop con un topacio azul talla pera. La piedra se mueve, atrapa luz, y desaparece bajo el cabello.", photos: 4 }, { id: "p11", name: "Aretes Studs Pavé", price: 890, category: "aretes", material: "Plata 925 con circonias", color: "silver", sizes: ["Único"], description: "Studs redondos de 6 mm cubiertos en pavé. La pieza que reemplaza a tus piercings básicos para siempre.", photos: 3 }, { id: "p12", name: "Aretes Helena", price: 1390, category: "aretes", material: "Oro 14k con perlas cultivadas", color: "gold", sizes: ["Único"], tag: "Nuevo", description: "Argollas medianas con una perla cultivada que se desliza libremente sobre el aro. Movimiento y luz.", photos: 4 }, ]; /* ---------- Seed content (editable from admin) ---------- */ const SEED_CONTENT = { utilityBar: "Envío gratis en pedidos sobre S/ 350 · 30 días de garantía · Hecho en Perú", hero: { eyebrow: "Colección · Otoño / Invierno 26", titleLine1: "Pequeñas piezas,", titleLine2: "grandes rituales.", body: "Joyería hecha a mano para usarse a diario. Oro 14k macizo, plata 925 y piedras seleccionadas, fabricadas en Cusco en lotes pequeños.", cta1: "Ver colección", cta2: "Conoce los materiales", image: null, imagePositionMobile: "right center", cornerMeta: "01 — Lookbook", cornerCredit: "Fotografía: estudio kiro", }, values: [ { icon: "leaf", title: "Materiales", body: "Oro 14k macizo, plata 925 reciclada y piedras seleccionadas a mano." }, { icon: "truck", title: "Envíos", body: "Gratis a partir de S/ 350. Entregas de 2 a 5 días en todo Perú." }, { icon: "shield", title: "Garantía", body: "Reparaciones de por vida. Cambios y devoluciones sin preguntas durante 30 días." }, { icon: "box", title: "Empaque", body: "Caja de cartón reciclado, bolsita de algodón orgánico, sin plásticos." }, ], editorial: { eyebrow: "El taller", titleStart: "Cada pieza pasa", titleItalic: "por once manos", titleEnd: "antes de llegar a la tuya.", body: "Trabajamos con un equipo de orfebres en Cusco — una tradición platera viva desde la época prehispánica. Cada pieza se funde, lima, pule y engasta a mano. Sin máquinas, sin atajos, sin prisa.", cta: "Conocer a los artesanos", image: null, }, footer: { tagline: "Joyería contemporánea hecha a mano en pequeños lotes. Diseñada en Lima, fabricada en Cusco.", col1Title: "Tienda", col2Title: "Cuidado", col2Body: "Damos mantenimiento gratuito de por vida a todas nuestras piezas: pulido, baño y ajustes. Reparaciones sin costo cuando son por uso natural. Solo escríbenos y nos encargamos.", col3Title: "Nosotros", col3Items: ["Historia", "Artesanos", "Sustentabilidad", "Tiendas físicas", "Contacto"], sizingTitle: "¿No sabes tu talla?", sizingButtonLabel: "Guía de tallas de anillos", sizingImage: null, sizingContent: "Hay tres formas confiables de saber tu talla de anillo en casa. Tómate un par de minutos, es más fácil de lo que parece.\n\n" + "MÉTODO 1 — Medir un anillo que ya te quede bien\n" + "1. Elige un anillo que uses en el dedo donde quieres el nuevo.\n" + "2. Apoya el anillo sobre una regla y mide el diámetro interior (de borde interno a borde interno) en milímetros.\n" + "3. Compara con nuestra tabla:\n" + " • 15.7 mm → talla 5\n" + " • 16.5 mm → talla 6\n" + " • 17.3 mm → talla 7\n" + " • 18.1 mm → talla 8\n" + " • 18.9 mm → talla 9\n" + " • 19.8 mm → talla 10\n\n" + "MÉTODO 2 — Tira de papel\n" + "1. Corta una tira de papel de aproximadamente 1 cm de ancho.\n" + "2. Envuélvela alrededor del dedo, justo en la base.\n" + "3. Marca con un lápiz dónde se cruzan los extremos.\n" + "4. Estira la tira y mide los milímetros entre las dos marcas: esa es la circunferencia.\n" + "5. Compara: 49 mm = talla 5 · 51.5 mm = talla 6 · 54 mm = talla 7 · 56.5 mm = talla 8 · 59 mm = talla 9 · 62 mm = talla 10.\n\n" + "MÉTODO 3 — Pídenos un medidor por WhatsApp\n" + "Si quieres tener total seguridad antes de comprar, escríbenos por WhatsApp y te enviamos un medidor de papel gratis a tu casa, o agendamos una cita para tomarte la medida en persona.\n\n" + "TIPS\n" + "• Mídete al final del día, cuando los dedos están un poco más hinchados.\n" + "• Evita medirte si tienes mucho frío o calor.\n" + "• Si quedas entre dos tallas, elige la mayor.\n" + "• Para anillos anchos (más de 6 mm) considera una talla más.", copyrightLeft: "© 2026 KIRO Jewelry", copyrightRight: "Hecho con cariño en PE · Lima → Cusco", }, social: { instagram: "https://instagram.com/kirojewelry", tiktok: "https://tiktok.com/@kirojewelry", whatsapp: "https://wa.me/51954796222", }, }; /* ---------- Content deep-merge ---------- * Used to fill in any missing keys on a partial content object loaded from * the DB. Keeps the app resilient to schema additions over time without * having to do a migration each time. */ function mergeContent(partial) { const c = partial || {}; return { ...SEED_CONTENT, ...c, hero: { ...SEED_CONTENT.hero, ...(c.hero || {}) }, footer: { ...SEED_CONTENT.footer, ...(c.footer || {}) }, editorial: { ...SEED_CONTENT.editorial, ...(c.editorial || {}) }, social: { ...SEED_CONTENT.social, ...(c.social || {}) }, values: c.values || SEED_CONTENT.values, }; } /* ---------- Format ---------- */ const fmtPrice = (n) => "S/ " + Number(n).toLocaleString("es-PE"); /* ---------- Icons (line, burgundy) ---------- */ const Icon = ({ name, size = 18 }) => { const paths = { search: <>, user: <>, bag: <>, heart: <>, menu: <>, arrow: <>, chevR: <>, chevD: <>, close: <>, plus: <>, edit: <>, trash: <>, check: <>, star: <>, truck: <>, shield: <>, leaf: <>, // unused — whatsapp is rendered as a filled glyph below whatsapp: null, chart: <>, box: <>, tag: <>, instagram:<>, tiktok: <>, }; if (name === "whatsapp") { return ( ); } return ( {paths[name]} ); }; /* ---------- Image placeholder with deterministic style per product ---------- */ function ProductImg({ p, idx = 0, label }) { // If a real image is uploaded, prefer it const images = Array.isArray(p.images) ? p.images.filter(Boolean) : (p.image ? [p.image] : []); if (images.length > 0) { const src = images[idx % images.length] || images[0]; return (
{p.name {label && (
{label}
)}
); } // deterministic background tint based on product id const seed = (p.id || "x").charCodeAt(0) + (p.id || "x").charCodeAt(p.id.length-1) + idx; const palette = [ { bg: "#FBF1EE", grain: "rgba(107,31,37,0.06)" }, { bg: "#F2D6D1", grain: "rgba(107,31,37,0.08)" }, { bg: "#E8C9C3", grain: "rgba(107,31,37,0.1)" }, { bg: "#6B1F25", grain: "rgba(255,255,255,0.06)", dark: true }, { bg: "#3A1418", grain: "rgba(255,255,255,0.04)", dark: true }, ]; const sel = palette[seed % palette.length]; // simple decorative shape suggestion based on category const cat = p.category; const shapeFor = { anillos: , collares: , pulseras: , aretes: , }[cat]; return (
{shapeFor} {label && (
{label}
)}
); } /* ---------- Brand logo lockup ---------- */ function BrandLogo({ size = 26, sub = true, color }) { const c = color || "var(--burgundy)"; return (
KIR
{sub && (
JEWELRY
)}
); } /* ---------- Social links (used in header + footer) ---------- */ function SocialLinks({ social, size = 20, variant = "default" }) { const items = [ { key: "instagram", url: social?.instagram, label: "Instagram", icon: "instagram" }, { key: "tiktok", url: social?.tiktok, label: "TikTok", icon: "tiktok" }, { key: "whatsapp", url: social?.whatsapp, label: "WhatsApp", icon: "whatsapp" }, ].filter(x => x.url && String(x.url).trim()); if (items.length === 0) return null; return (
{items.map(it => ( ))}
); } /* ---------- Header ---------- */ function Header({ route, navigate, bagCount = 0, store }) { const cats = (store && store.categories) || SEED_CATEGORIES; const utilityText = store?.content?.utilityBar ?? SEED_CONTENT.utilityBar; const [menuOpen, setMenuOpen] = useState(false); // Close drawer when the route changes useEffect(() => { setMenuOpen(false); }, [route.path]); // Lock body scroll while drawer is open useEffect(() => { document.body.style.overflow = menuOpen ? "hidden" : ""; return () => { document.body.style.overflow = ""; }; }, [menuOpen]); const go = (path) => { setMenuOpen(false); navigate(path); }; return ( <>
{utilityText}
); } /* ---------- Footer ---------- */ function Footer({ store, navigate, openSizeGuide }) { const f = store?.content?.footer ?? SEED_CONTENT.footer; const cats = (store && store.categories) || SEED_CATEGORIES; return ( ); } /* ---------- Size guide modal ---------- */ function SizeGuideModal({ open, onClose, title, content, image }) { useEffect(() => { if (!open) return; const onKey = (e) => { if (e.key === "Escape") onClose(); }; document.addEventListener("keydown", onKey); const prev = document.body.style.overflow; document.body.style.overflow = "hidden"; return () => { document.removeEventListener("keydown", onKey); document.body.style.overflow = prev; }; }, [open, onClose]); if (!open) return null; return (
e.stopPropagation()} role="dialog" aria-modal="true">
KIRO · Guía

{title}

{image ? ( {title} ) : (
{content}
)}
); } /* ---------- Product card ---------- */ function ProductCard({ p, onClick }) { return (
{p.tag && {p.tag}}
Vista rápida
{p.name}
{fmtPrice(p.price)}
); } /* Export to window so other JSX files can use them */ Object.assign(window, { SEED_CATEGORIES, SEED_PRODUCTS, SEED_CONTENT, mergeContent, fmtPrice, Icon, ProductImg, BrandLogo, Header, Footer, ProductCard, SizeGuideModal, SocialLinks, });