[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8},"actionData","errors","root",{"_26":27,"_28":29,"_30":12,"_31":12,"_32":12,"_33":12,"_34":12,"_35":12,"_36":37},"routes/canvas.shared.$sharedTextdocId",{"_9":10,"_11":12},"sharedTextdoc",{"_13":14,"_15":-7,"_16":17,"_18":19,"_20":21,"_22":23,"_24":12,"_25":12},"isAuthenticated",false,"sharedTextdocId","69347bd906fc819188a1b5ef08c91147","versionInt","title","Tienda Control Facil Informatica","type","code/react","content","// Tienda_Control_Facil_Informatica.jsx\n// Página única (React + Tailwind). Exporta un componente por defecto.\n// Instrucciones: reemplaza los productos en `PRODUCTS` con tus propios datos y fotos.\n// Para desplegar rápidamente: crea un proyecto con Vite/Next.js o sube este archivo en una app React y usa Netlify / Vercel.\n\nimport React, { useState } from \"react\";\n\nconst PRODUCTS = [\n {\n id: \"prod-001\",\n title: \"Producto 1\",\n price: 0.0,\n short: \"Descripción del producto\",\n img: \"https://via.placeholder.com/400x300?text=Imagen+4\",\n stock: 4,\n },\n];\n\nexport default function TiendaControlFacil() {\n const [cart, setCart] = useState([]);\n const [query, setQuery] = useState(\"\");\n const [showCheckout, setShowCheckout] = useState(false);\n const [orderInfo, setOrderInfo] = useState({ name: \"\", phone: \"\", address: \"\" });\n const filtered = PRODUCTS.filter((p) =>\n (p.title + p.short).toLowerCase().includes(query.toLowerCase())\n );\n\n function addToCart(product) {\n setCart((c) => {\n const exists = c.find((x) => x.id === product.id);\n if (exists) {\n return c.map((x) => (x.id === product.id ? { ...x, qty: x.qty + 1 } : x));\n }\n return [...c, { ...product, qty: 1 }];\n });\n }\n\n function changeQty(id, delta) {\n setCart((c) =>\n c\n .map((x) => (x.id === id ? { ...x, qty: Math.max(1, x.qty + delta) } : x))\n .filter((x) => x.qty > 0)\n );\n }\n\n function removeItem(id) {\n setCart((c) => c.filter((x) => x.id !== id));\n }\n\n function total() {\n return cart.reduce((s, i) => s + i.price * i.qty, 0).toFixed(2);\n }\n\n function submitOrder() {\n // Punto para conectar una API real (WhatsApp, correo o un backend)\n // Por ahora simulamos el envío y limpiamos el carrito.\n const order = {\n customer: orderInfo,\n items: cart,\n total: total(),\n date: new Date().toISOString(),\n };\n // TODO: enviar `order` a tu correo/WhatsApp/ERP\n console.log(\"Orden creada:\", order);\n alert(\"Gracias \" + orderInfo.name + \", recibimos tu pedido. Nos comunicaremos pronto.\");\n setCart([]);\n setShowCheckout(false);\n setOrderInfo({ name: \"\", phone: \"\", address: \"\" });\n }\n\n return (\n

Control Fácil Informática

Escuintla, Guatemala — Mini PC y servicios

\n setQuery(e.target.value)}\n placeholder=\"Buscar productos...\"\n className=\"border rounded px-3 py-2 text-sm\"\n />\n setShowCheckout(true)}\n >\n Carrito ({cart.reduce((s, i) => s + i.qty, 0)})\n \n

\n\n

Productos

\n {filtered.map((p) => (\n

{p.title}

{p.short}

Q {p.price.toFixed(2)}

Stock: {p.stock}

\n addToCart(p)}\n className=\"bg-green-600 text-white px-3 py-2 rounded text-sm\"\n >\n Añadir\n \n

\n ))}\n

\n\n

Resumen

Artículos en carrito: {cart.reduce((s, i) => s + i.qty, 0)}

\n {cart.length === 0 ? (\n

Tu carrito está vacío.

\n ) : (\n

\n
\n
{it.title}
\n
Q {it.price.toFixed(2)} x {it.qty}
\n
\n
\n \n \n \n
\n

\n )}\n

Total

Q {total()}

\n setShowCheckout(true)}\n disabled={cart.length === 0}\n className={`mt-4 w-full px-4 py-2 rounded ${cart.length===0? 'bg-gray-300':'bg-blue-600 text-white'}`}\n >\n Finalizar compra\n \n

\n\n

Contacto rápido

Tel/WhatsApp: +502 5623-XXXX

Escuintla, Guatemala

También podemos integrar pagos con PayPal, Stripe o pago contra entrega.

\n\n

Horarios

Lun - Vie: 8:00 - 18:00

Sáb: 9:00 - 13:00

\n\n

Sobre nosotros

Control Fácil Informática ofrece equipos y servicios en Escuintla. Puedes reemplazar este texto con tu historia, fotos y políticas de venta.

\n\n {showCheckout && (\n

Finalizar compra

\n setOrderInfo({ ...orderInfo, name: e.target.value })}\n placeholder=\"Nombre completo\"\n className=\"w-full border px-3 py-2 rounded\"\n />\n setOrderInfo({ ...orderInfo, phone: e.target.value })}\n placeholder=\"Teléfono / WhatsApp\"\n className=\"w-full border px-3 py-2 rounded\"\n />\n setOrderInfo({ ...orderInfo, address: e.target.value })}\n placeholder=\"Dirección de entrega\"\n className=\"w-full border px-3 py-2 rounded\"\n />\n\n

Total:

Q {total()}

\n\n

\n setShowCheckout(false)}\n className=\"flex-1 px-4 py-2 rounded border\"\n >\n Cancelar\n \n \n Enviar pedido\n \n

\n )}\n\n \n

\n );\n}\n","access","public","isModerationBlocked","isAnonifyApiKeyDetected","dd",{"_38":39,"_40":41},"disablePrefetch",true,"shouldPrefetchAccount","shouldPrefetchUser","shouldPrefetchSystemHints","promoteCss","disableSSR","stripModulepreloadImports","statsigGateEvaluationsPromise",["P",37],"traceId","6564918129781127066","traceTime",1781060164167]