// Montar Kit — escolha 3 camisetas, ganhe 1 meia. // Layout: catálogo de produtos (esq, arrastável) + painel do kit (dir, sticky). // Interação: arrastar ou clicar nos produtos para adicioná-los aos slots. function KitPage() { const [tweaks, setTweak] = useTweaks(/*EDITMODE-BEGIN*/{"accent": "#f2752f"}/*EDITMODE-END*/); React.useEffect(() => { const meta = { "#f2752f": "#f3c27d", "#c19a4b": "#e5cc94" }; document.documentElement.style.setProperty("--ide-accent", tweaks.accent); document.documentElement.style.setProperty("--ide-accent-soft", meta[tweaks.accent] || "#f3c27d"); }, [tweaks.accent]); const allShirts = window.allProducts.filter(p => p.tipo === "camiseta"); const allSocks = window.allProducts.filter(p => p.tipo === "meia"); const KIT_LIMIT = 3; const KIT_PRICE = 219.90; const [shirts, setShirts] = React.useState([]); const [sock, setSock] = React.useState(null); const [picking, setPicking] = React.useState(null); const [cart, setCart] = useCart(); const [cartOpen, setCartOpen] = React.useState(false); const [searchOpen, setSearchOpen] = React.useState(false); const [toast, setToast] = React.useState({ visible: false, item: null }); const toastTimer = React.useRef(null); const cartCount = cart.reduce((sum, it) => sum + it.qty, 0); // Drag state const [dragPid, setDragPid] = React.useState(null); const [dragOverSlot, setDragOverSlot] = React.useState(null); // 0 | 1 | 2 | "sock" const shirtsFull = shirts.length === KIT_LIMIT; const kitComplete = shirtsFull && sock != null; const dragProduct = dragPid ? window.allProducts.find(p => p.id === dragPid) : null; const isDraggingShirt = dragProduct?.tipo === "camiseta"; const isDraggingSock = dragProduct?.tipo === "meia"; React.useEffect(() => { document.title = "Montar Kit — Ide.hub"; }, []); React.useEffect(() => { const handler = (e) => { if (e.key === "Escape") { setPicking(null); setCartOpen(false); setSearchOpen(false); } }; window.addEventListener("keydown", handler); return () => window.removeEventListener("keydown", handler); }, []); // ── Drag handlers ──────────────────────────────────────────── const onDragStart = (e, pid) => { e.dataTransfer.setData("text/plain", pid); e.dataTransfer.effectAllowed = "copy"; setDragPid(pid); }; const onDragEnd = () => { setDragPid(null); setDragOverSlot(null); }; const onSlotDragOver = (e, slotKey) => { const isShirtSlot = slotKey !== "sock"; const ok = isShirtSlot ? isDraggingShirt && (!shirtsFull || shirts[slotKey] != null) : isDraggingSock && shirtsFull && !sock; if (!ok) return; e.preventDefault(); e.dataTransfer.dropEffect = "copy"; setDragOverSlot(slotKey); }; const onSlotDragLeave = (e) => { if (!e.currentTarget.contains(e.relatedTarget)) setDragOverSlot(null); }; const onSlotDrop = (e, slotKey) => { e.preventDefault(); const pid = e.dataTransfer.getData("text/plain"); const p = window.allProducts.find(x => x.id === pid); if (!p) { onDragEnd(); return; } if (slotKey === "sock") { if (p.tipo === "meia" && shirtsFull) setPicking({ product: p, kind: "sock" }); } else { if (p.tipo === "camiseta") { const editIdx = shirts[slotKey] != null ? slotKey : undefined; setPicking({ product: p, kind: "shirt", editIdx }); } } onDragEnd(); }; // ── Click handlers ─────────────────────────────────────────── const addShirt = (product) => { if (!shirtsFull) setPicking({ product, kind: "shirt" }); }; const addSock = (product) => { if (shirtsFull && !sock) setPicking({ product, kind: "sock" }); }; const editShirt = (idx) => { const p = allShirts.find(x => x.id === shirts[idx].pid); setPicking({ product: p, kind: "shirt", editIdx: idx }); }; const removeShirt = (idx) => setShirts(prev => prev.filter((_, i) => i !== idx)); const clearSock = () => setSock(null); const confirmPick = ({ size, color }) => { if (picking.kind === "shirt") { const newSel = { pid: picking.product.id, size, color }; if (picking.editIdx != null) { setShirts(prev => prev.map((s, i) => i === picking.editIdx ? newSel : s)); } else { setShirts(prev => [...prev, newSel]); } } else { setSock({ pid: picking.product.id, size, color }); } setPicking(null); }; // ── Pricing ────────────────────────────────────────────────── const shirtsOriginal = shirts.reduce((sum, s) => { return sum + (allShirts.find(x => x.id === s.pid)?.price || 0); }, 0); const kitPrice = shirtsFull ? KIT_PRICE : shirtsOriginal; const sockPrice = sock ? (allSocks.find(x => x.id === sock.pid)?.price || 0) : 0; const savings = Math.max(0, shirtsOriginal - kitPrice) + sockPrice; const finalizeKit = () => { if (!kitComplete) return; shirts.forEach(s => { const p = allShirts.find(x => x.id === s.pid); if (!p) return; setCart(prev => [...prev, { lineId: `${p.id}-${s.size}-${s.color}-kit`, id: p.id, name: p.name, subtitle: `Kit · ${p.subtitle}`, price: KIT_PRICE / KIT_LIMIT, img: p.img, size: s.size, color: s.color, qty: 1, }]); }); const sockP = allSocks.find(x => x.id === sock.pid); if (sockP) { setCart(prev => [...prev, { lineId: `${sockP.id}-${sock.size}-${sock.color}-brinde`, id: sockP.id, name: `${sockP.name} (BRINDE)`, subtitle: "Brinde do kit", price: 0, img: sockP.img, size: sock.size, color: sock.color, qty: 1, }]); } setCartOpen(true); clearTimeout(toastTimer.current); setToast({ visible: true, item: { name: "Kit montado!", img: allShirts.find(x => x.id === shirts[0].pid)?.img } }); toastTimer.current = setTimeout(() => setToast({ visible: false, item: null }), 2600); }; const removeFromCart = (lineId) => setCart(prev => prev.filter(l => l.lineId !== lineId)); const changeQty = (lineId, qty) => setCart(prev => prev.map(l => l.lineId === lineId ? { ...l, qty } : l)); return ( setSearchOpen(true)} onCartOpen={() => setCartOpen(true)} /> {/* HERO */}
Promo · Edição Outono 2026

Monte seu kit.
3 camisetas + 1 meia de brinde.

Arraste ou clique nas peças para montar seu kit por R$ {KIT_PRICE.toFixed(2).replace(".", ",")}. Frete grátis incluído.

  • 01
    Economize até R$ 80

    Comparado ao preço unitário das 3 camisetas.

  • 02
    Meia de brinde

    Escolha a cor depois das camisetas.

  • 03
    Frete grátis

    Kit já passa do mínimo automaticamente.

{/* MAIN TWO-COLUMN LAYOUT */}
{/* ── LEFT: Product catalog ── */}
{/* Shirts */}
Passo 1

Escolha 3 camisetas

{shirts.length} / {KIT_LIMIT}
{allShirts.map((p, i) => { const inKit = shirts.filter(s => s.pid === p.id).length; return (
!shirtsFull && onDragStart(e, p.id)} onDragEnd={onDragEnd} onClick={() => addShirt(p)} style={{ transitionDelay: `${i * 30}ms` }} > {inKit > 0 && No kit ×{inKit}}
{p.isNew && Novo} {p.name} {!shirtsFull && (
Arrastar para o kit
)}
{p.subtitle}

{p.name}

R$ {p.price.toFixed(2).replace(".", ",")}
{p.colors.map(c => )}
); })}
{/* Socks */}
{shirtsFull ? "Passo 2" : "Bloqueado"}

Escolha sua meia de brinde

{!shirtsFull ? Termine as 3 camisetas : {allSocks.length} cores }
{allSocks.map((p, i) => { const isSelected = sock?.pid === p.id; return (
shirtsFull && onDragStart(e, p.id)} onDragEnd={onDragEnd} onClick={() => addSock(p)} style={{ transitionDelay: `${i * 60}ms` }} >
{p.name}
Brinde

{p.name}

R$ {p.price.toFixed(2).replace(".", ",")} Grátis
{isSelected ? : }
); })}
{/* ── RIGHT: Sticky kit panel ── */}
Seu kit {shirts.length}/{KIT_LIMIT} camisetas
{/* Shirt slots */} {Array.from({ length: KIT_LIMIT }).map((_, idx) => { const sel = shirts[idx]; const p = sel ? allShirts.find(x => x.id === sel.pid) : null; const isOver = dragOverSlot === idx; const isAccepting = isDraggingShirt && !shirtsFull && !sel; return (
onSlotDragOver(e, idx)} onDragLeave={onSlotDragLeave} onDrop={(e) => onSlotDrop(e, idx)} > 0{idx + 1} {p ? (
{p.name}
{p.name} Tam {sel.size} · {sel.color}
) : ( {isOver ? "Solte aqui" : "Arraste ou clique"} )}
); })} {/* Sock slot */} {(() => { const sockP = sock ? allSocks.find(x => x.id === sock.pid) : null; const isOver = dragOverSlot === "sock"; return (
onSlotDragOver(e, "sock")} onDragLeave={onSlotDragLeave} onDrop={(e) => onSlotDrop(e, "sock")} > BRINDE {sockP ? (
{sockP.name}
{sockP.name} {sock.color} · Grátis
) : ( {isOver ? "Solte aqui" : !shirtsFull ? "Termine as camisetas" : "Arraste ou clique"} )}
); })()}
{/* Drag feedback */} {dragPid && (
{isDraggingShirt && !shirtsFull && "Solte em um slot de camiseta"} {isDraggingShirt && shirtsFull && "Kit de camisetas já completo"} {isDraggingSock && shirtsFull && !sock && "Solte no slot de brinde"} {isDraggingSock && !shirtsFull && "Termine as camisetas primeiro"}
)} {/* Pricing */} {shirts.length > 0 && (
{!shirtsFull && (
Subtotal parcial R$ {shirtsOriginal.toFixed(2).replace(".", ",")}
)} {shirtsFull && (
Preço cheio R$ {shirtsOriginal.toFixed(2).replace(".", ",")}
Total do kit R$ {kitPrice.toFixed(2).replace(".", ",")}
{savings > 0 && ( Você economiza R$ {savings.toFixed(2).replace(".", ",")} )} )}
)}