/* ═══════════════════════════════════════ ROMAJA — Pages: Home, Tienda, Producto, Sobre Mí, Contacto, FAQ ═══════════════════════════════════════ */ /* ══════════ HOME ══════════ */ const PageHome = () => { const { navigate } = useNav(); const isMobile = useMobile(); const featured = PRODUCTS.filter(p => p.destacado); const newProducts = [...PRODUCTS] .sort((a, b) => new Date(b.created_at || 0) - new Date(a.created_at || 0) || b.id - a.id) .slice(0, 4); return (

{/* HERO — imagen horizontal recomendada: 800×500px o similar */}

Romaja — Crochet y Bisutería hecha a mano

Tejido con
alma

Piezas únicas de crochet y bisutería artesanal, hechas a mano en Costa Rica. Cada creación tiene su propia historia.

{/* CATEGORÍAS */}

{Object.entries(CATEGORIES).map(([key, cat]) => { const hasImg = key === "crochet" || key === "bisuteria"; const bgImg = key === "crochet" ? "uploads/crochet.jpg" : "uploads/bisuteria.jpeg"; return (

navigate(`/tienda/${key}`)} style={{ cursor: "pointer", background: hasImg ? `linear-gradient(to bottom, rgba(0,0,0,0.68) 0%, rgba(0,0,0,0) 100%), url('${bgImg}') center/cover no-repeat` : cat.bg, padding: "44px 40px", borderRadius: 2, position: "relative", overflow: "hidden", transition: "transform 0.2s, box-shadow 0.2s" }} onMouseEnter={e => { e.currentTarget.style.transform = "translateY(-3px)"; e.currentTarget.style.boxShadow = "0 10px 28px rgba(58,44,30,0.1)"; }} onMouseLeave={e => { e.currentTarget.style.transform = "none"; e.currentTarget.style.boxShadow = "none"; }}>

{cat.label}

{cat.subcategories.map(s => ( {s} ))}

Ver todo →

); })}

{/* PRODUCTOS DESTACADOS */} {featured.length > 0 && (

{featured.slice(0, 9).map(p => )}

)} {/* BANNER PERSONALIZACIÓN */}

Pedidos Especiales

Diseñá tu pieza única

¿Querés algo especial? Hacemos pedidos personalizados con los colores, materiales y diseño que vos elijas.

Consultar por WhatsApp

{!isMobile &&

}

{/* NOVEDADES */}

{newProducts.map(p => )}

); }; /* ══════════ TIENDA ══════════ */ const PageTienda = ({ catFilter, subFilter }) => { const { navigate, route } = useNav(); const isMobile = useMobile(); const [activeCat, setActiveCat] = React.useState(catFilter || "all"); const [activeSub, setActiveSub] = React.useState(subFilter || "all"); const [sort, setSort] = React.useState("default"); const [search, setSearch] = React.useState(""); React.useEffect(() => { setActiveCat(catFilter || "all"); setActiveSub(subFilter || "all"); setSearch(""); }, [catFilter, subFilter]); let filtered = PRODUCTS; if (search.trim()) filtered = filtered.filter(p => p.name.toLowerCase().includes(search.trim().toLowerCase())); if (activeCat !== "all") filtered = filtered.filter(p => p.category === activeCat); if (activeSub !== "all") filtered = filtered.filter(p => p.sub === activeSub); if (sort === "asc") filtered = [...filtered].sort((a,b) => a.price - b.price); if (sort === "desc") filtered = [...filtered].sort((a,b) => b.price - a.price); // CATEGORIES[activeCat] puede no existir si la URL trae una categoría // inválida (link viejo, typo, bot) — sin este chequeo, tirar de // .subcategories sobre undefined rompía toda la página. const currentSubs = (activeCat !== "all" && CATEGORIES[activeCat]) ? CATEGORIES[activeCat].subcategories : []; return (

{/* Filtros */}

{Object.entries(CATEGORIES).map(([key, cat]) => ( ))}

{currentSubs.length > 0 && (

{currentSubs.map(s => ( ))}

)}

setSearch(e.target.value)} style={{ border: `1px solid ${T.border}`, background: T.bg, color: T.dark, padding: "8px 32px 8px 12px", fontSize: 12, fontFamily: "'Lato', sans-serif", borderRadius: 2, outline: "none", width: isMobile ? "100%" : 200 }} /> {search && }

Ordenar:

{filtered.length === 0 ? (

Sin resultados

Intentá con otra categoría

) : (

{filtered.map(p => )}

)}

); }; /* ══════════ DETALLE DE PRODUCTO ══════════ */ const PageProducto = ({ productId }) => { const { navigate } = useNav(); const { addItem } = useCart(); const isMobile = useMobile(); React.useLayoutEffect(() => { window.scrollTo(0, 0); }, [productId]); const product = PRODUCTS.find(p => p.id === parseInt(productId)); const [selectedColor, setSelectedColor] = React.useState(0); const [selectedSize, setSelectedSize] = React.useState(0); const [qty, setQty] = React.useState(1); const [added, setAdded] = React.useState(false); // OJO: este hook tiene que declararse siempre, ANTES del return condicional // de abajo. Si se declara después (como estaba antes), la cantidad de hooks // que llama el componente cambia según si hay producto o no, y React explota // ("Rendered fewer hooks than expected") al navegar client-side entre un // producto válido y uno inexistente — eso dejaba la página en blanco. const [activeImg, setActiveImg] = React.useState(0); if (!product) return (

Producto no encontrado

); const sameSub = PRODUCTS.filter(p => p.sub === product.sub && p.id !== product.id).sort(() => Math.random() - 0.5); const sameCat = PRODUCTS.filter(p => p.category === product.category && p.sub !== product.sub && p.id !== product.id).sort(() => Math.random() - 0.5); const related = [...sameSub, ...sameCat].slice(0, 3); const cat = CATEGORIES[product.category]; const allImages = [product.imagen_url, ...(product.imagenes || [])].filter(Boolean); const outOfStock = product.stock <= 0; const handleAdd = () => { if (outOfStock) return; addItem(product, qty, { color: product.colors?.[selectedColor], size: product.sizes?.[selectedSize] }); setAdded(true); setTimeout(() => setAdded(false), 2000); }; return (

{/* Imagen */}

{allImages.length > 0 ?

{ e.target.style.display = "none"; }} style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover", objectPosition: "center", display: "block" }} /> :

{product.name}

}

{cat.label}

{allImages.length > 1 && (

{allImages.map((img, i) => (

setActiveImg(i)} style={{ width: 60, height: 60, borderRadius: 2, overflow: "hidden", cursor: "pointer", border: `2px solid ${activeImg === i ? T.primary : T.border}`, transition: "border-color 0.15s", }}>

))}

)}

{/* Info */}

{product.sub}

{product.name}

{formatPrice(product.price)}

{product.description}

{/* Colores */} {product.colors && (

Color: {product.colors[selectedColor]}

{product.colors.map((c, i) => ( ))}

)} {/* Tallas */} {product.sizes && (

Talla

{product.sizes.map((s, i) => ( ))}

)} {/* Stock */} {outOfStock ? (

Agotado por el momento

) : product.stock <= 5 && (

⚡ Solo quedan {product.stock} unidades

)} {/* Cantidad + Agregar */}

{qty}

🚚 Envío coordinado por WhatsApp
💳 Pago por Sinpe Móvil al {SINPE_NUMBER}
✂️ Hecho a mano en Costa Rica

{/* Relacionados */} {related.length > 0 && (

{related.map(p => )}

)}

); }; /* ══════════ SOBRE MÍ ══════════ */ const PageSobreMi = () => { const { navigate } = useNav(); const isMobile = useMobile(); return (

Mi Historia

Cada pieza, una historia

Soy Jacqueline, y Romaja nació de mi pasión por crear con las manos. Empecé tejiendo para mí misma, y poco a poco fui descubriendo que cada pieza que hacía tenía algo especial: la huella de quien la crea y la personalidad de quien la usa.

Hoy Romaja es un pequeño emprendimiento 100% costarricense donde combino el crochet artesanal con bisutería hecha a mano. Uso materiales de calidad y trabajo con mucho cuidado para que cada pieza sea duradera y única.

Si estás aquí, gracias por apoyar lo hecho a mano. Significa muchísimo. 🌿

{/* Valores */}

{[ { icon: "✂️", title: "100% Artesanal", desc: "Cada pieza es tejida o ensamblada a mano, con dedicación y paciencia." }, { icon: "🌿", title: "Materiales de calidad", desc: "Usamos hilos, piedras y metales seleccionados cuidadosamente." }, { icon: "💛", title: "Hecho con amor", desc: "Detrás de cada pieza hay horas de trabajo y mucho cariño." }, ].map(v => (

{v.icon}

{v.title}

{v.desc}

))}

); }; /* ══════════ CONTACTO ══════════ */ const PageContacto = () => { const isMobile = useMobile(); return (

{[ { icon: "💬", title: "WhatsApp", desc: "La forma más rápida de contactarnos. Respondemos todos los días.", action: "Escribirnos", link: WHATSAPP_LINK, color: "#25D366" }, { icon: "📸", title: "Instagram", desc: "Mirá nuestras novedades y escribinos por DM.", action: "Ver @romajacr", link: "https://instagram.com/romajacr", color: "#E1306C" }, ].map(c => (

{c.icon}

{c.title}

{c.desc}

{c.action}

))}

Información útil

📱 Teléfono / Sinpe:
6059-8892

⏰ Horario de atención:
Lunes a sábado, 8am – 8pm

🚚 Envíos:
Todo Costa Rica — coordinamos por WhatsApp

💳 Pagos:
Sinpe Móvil — fácil y seguro

); }; /* ══════════ FAQ ══════════ */ const FaqItem = ({ q, a }) => { const [open, setOpen] = React.useState(false); return (

{open &&

{a}

}

); }; const PageFAQ = () => { const faqs = [ { q: "¿Cómo hago un pedido?", a: "Agregá los productos que te gusten al carrito, luego completá tu información en el checkout. Una vez que tengás el resumen, hacés el Sinpe Móvil y nos mandás el comprobante por WhatsApp. ¡Así de fácil!" }, { q: "¿Cuál es el número de Sinpe Móvil?", a: `El número de Sinpe Móvil es ${SINPE_NUMBER}, a nombre de ${SINPE_NAME}. Siempre confirmá el nombre antes de transferir.` }, { q: "¿Hacen pedidos personalizados?", a: "¡Sí! Podés escribirnos por WhatsApp para coordinar una pieza personalizada con los colores, materiales o diseño que vos quieras. Los pedidos especiales tienen un tiempo de entrega de 1 a 2 semanas según la complejidad." }, { q: "¿Cómo son los envíos?", a: "Coordinamos el envío directamente por WhatsApp. Trabajamos con Correos de Costa Rica y mensajería según tu ubicación. El costo de envío se define según la zona." }, { q: "¿Cuánto tarda en llegar mi pedido?", a: "Una vez confirmado el pago, preparamos tu pedido en 1-3 días hábiles. El envío depende del servicio de mensajería, generalmente entre 1-4 días hábiles adicionales." }, { q: "¿Puedo cambiar o devolver un producto?", a: "Aceptamos cambios dentro de los 7 días después de recibido el pedido si el producto presenta algún defecto de fabricación. Los pedidos personalizados no aplican para devolución. Escribinos al WhatsApp para coordinar." }, { q: "¿Las piezas son realmente hechas a mano?", a: "¡100%! Cada pieza de crochet es tejida a ganchillo, y cada accesorio de bisutería es ensamblado a mano. No manejamos productos de fábrica." }, { q: "¿Puedo ver los productos antes de comprar?", a: "Podés escribirnos al WhatsApp para ver más fotos o videos de un producto específico. También seguinos en @romajacr en Instagram donde publicamos constantemente." }, ]; const isMobile = useMobile(); return (

{faqs.map((f, i) => )}

¿Tenés otra pregunta?

Escribinos por WhatsApp y te respondemos rápido.

Contactar por WhatsApp

); }; Object.assign(window, { PageHome, PageTienda, PageProducto, PageSobreMi, PageContacto, PageFAQ });

Tejido conalma

Diseñá tu pieza única

{product.name}

Cada pieza, una historia

Tejido con
alma