// Cart drawer, Quick view modal, Search overlay, Floating WhatsApp. const WPP_NUMBER = "5542984137740"; function CartDrawer({ open, onClose, items, onChangeQty, onRemove, onClearCart, freeShippingThreshold = 299 }) { const [step, setStep] = React.useState("cart"); // "cart" | "checkout" | "confirmed" const [form, setForm] = React.useState({ name: "", email: "", phone: "", cpf: "", cep: "", street: "", number: "", complement: "", neighborhood: "", city: "", state: "", payment: "pix" }); const [errors, setErrors] = React.useState({}); const [sending, setSending] = React.useState(false); const [cepLoading, setCepLoading] = React.useState(false); const subtotal = items.reduce((sum, it) => sum + it.price * it.qty, 0); const remaining = Math.max(0, freeShippingThreshold - subtotal); const progressPct = Math.min(100, (subtotal / freeShippingThreshold) * 100); const pixTotal = subtotal * 0.95; const pixDiscount = subtotal * 0.05; const finalTotal = form.payment === "pix" ? pixTotal : subtotal; React.useEffect(() => { if (!open) { setStep("cart"); setErrors({}); setSending(false); } }, [open]); const setField = (key, val) => setForm(prev => ({ ...prev, [key]: val })); const maskPhone = (v) => { const d = v.replace(/\D/g, "").slice(0, 11); if (d.length === 0) return ""; if (d.length <= 2) return `(${d}`; if (d.length <= 6) return `(${d.slice(0,2)}) ${d.slice(2)}`; if (d.length <= 10) return `(${d.slice(0,2)}) ${d.slice(2,6)}-${d.slice(6)}`; return `(${d.slice(0,2)}) ${d.slice(2,7)}-${d.slice(7)}`; }; const maskCPF = (v) => { const d = v.replace(/\D/g, "").slice(0, 11); if (d.length <= 3) return d; if (d.length <= 6) return `${d.slice(0,3)}.${d.slice(3)}`; if (d.length <= 9) return `${d.slice(0,3)}.${d.slice(3,6)}.${d.slice(6)}`; return `${d.slice(0,3)}.${d.slice(3,6)}.${d.slice(6,9)}-${d.slice(9)}`; }; const maskCEP = (v) => { const d = v.replace(/\D/g, "").slice(0, 8); return d.length > 5 ? `${d.slice(0,5)}-${d.slice(5)}` : d; }; const lookupCEP = async (raw) => { const digits = raw.replace(/\D/g, ""); if (digits.length !== 8) return; setCepLoading(true); try { const res = await fetch(`https://viacep.com.br/ws/${digits}/json/`); const data = await res.json(); if (!data.erro) { setForm(prev => ({ ...prev, street: data.logradouro || prev.street, neighborhood: data.bairro || prev.neighborhood, city: data.localidade || prev.city, state: data.uf || prev.state })); } } catch {} finally { setCepLoading(false); } }; const validate = () => { const e = {}; if (!form.name.trim()) e.name = "Obrigatório"; if (!form.email.trim() || !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(form.email)) e.email = "E-mail inválido"; if (form.phone.replace(/\D/g, "").length < 10) e.phone = "Telefone inválido"; if (form.cpf.replace(/\D/g, "").length !== 11) e.cpf = "CPF inválido"; if (form.cep.replace(/\D/g, "").length !== 8) e.cep = "CEP inválido"; if (!form.street.trim()) e.street = "Obrigatório"; if (!form.number.trim()) e.number = "Número obrigatório"; setErrors(e); return Object.keys(e).length === 0; }; const sendToWhatsApp = () => { if (!validate()) return; setSending(true); const payLabel = { pix: "Pix (5% de desconto)", cartao: "Cartão de crédito", boleto: "Boleto" }[form.payment]; const addressFull = `${form.street}, ${form.number}${form.complement ? ` - ${form.complement}` : ""}\n${form.neighborhood}, ${form.city}/${form.state} — CEP ${form.cep}`; const itemLines = items.map(it => `• ${it.qty}x ${it.name} — Tam ${it.size} | Cor ${it.color} — R$ ${(it.price * it.qty).toFixed(2).replace(".", ",")}` ).join("\n"); const lines = [ "Olá! Quero finalizar meu pedido na Ide.hub 🙌", "", "*DADOS DO CLIENTE*", `Nome: ${form.name.trim()}`, `E-mail: ${form.email.trim()}`, `Telefone: ${form.phone.trim()}`, `CPF: ${form.cpf.trim()}`, `Endereço:\n${addressFull}`, "", "*PAGAMENTO*", payLabel, "", "*ITENS DO PEDIDO*", itemLines, "", `Subtotal: R$ ${subtotal.toFixed(2).replace(".", ",")}`, form.payment === "pix" ? `Desconto Pix (5%): - R$ ${pixDiscount.toFixed(2).replace(".", ",")}` : null, `*TOTAL: R$ ${finalTotal.toFixed(2).replace(".", ",")}*`, `Frete: ${subtotal >= freeShippingThreshold ? "Grátis ✓" : "A calcular"}`, ].filter(l => l !== null).join("\n"); window.open(`https://wa.me/${WPP_NUMBER}?text=${encodeURIComponent(lines)}`, "_blank", "noopener"); onClearCart && onClearCart(); setSending(false); setStep("confirmed"); }; const PayOption = ({ value, label, badge }) => (
setField("payment", value)} >
{label} {badge && {badge}}
); return (
); } // ─────────────────────────────────────────────── // Quick view modal // ─────────────────────────────────────────────── function QuickView({ product, onClose, onAddToCart }) { const [size, setSize] = React.useState(product?.sizes?.[1] || product?.sizes?.[0]); const [color, setColor] = React.useState(product?.colors?.[0]); const [imgIdx, setImgIdx] = React.useState(0); if (!product) return null; const images = [product.img, product.imgAlt].filter(Boolean); return (
e.stopPropagation()}>
{product.name} {product.isNew && Novo}
{images.length > 1 && (
{images.map((src, i) => ( ))}
)}
{product.subtitle}

{product.name}

R$ {product.price.toFixed(2).replace(".", ",")} ou 6x de R$ {(product.price/6).toFixed(2).replace(".", ",")} sem juros
{Array.from({ length: 5 }).map((_, j) => ( ))} 4,9 · 128 avaliações

{product.inspiration}

Cor · {color}
{product.colors.map((c) => ( ))}
Tamanho Guia de medidas
{product.sizes.map((s) => ( ))}
Tirar dúvida no WhatsApp
  • Frete grátis acima de R$ 299
  • Compra 100% segura
  • Trocas grátis em 30 dias
); } // ─────────────────────────────────────────────── // Search overlay // ─────────────────────────────────────────────── function SearchOverlay({ open, onClose, onSelect }) { const [q, setQ] = React.useState(""); const inputRef = React.useRef(null); React.useEffect(() => { if (open) { setTimeout(() => inputRef.current?.focus(), 80); } else { setQ(""); } }, [open]); React.useEffect(() => { if (!open) return; const handler = (e) => { if (e.key === "Escape") onClose(); }; window.addEventListener("keydown", handler); return () => window.removeEventListener("keydown", handler); }, [open, onClose]); const norm = (s) => s.toLowerCase(); const results = q.trim() ? window.allProducts.filter(p => norm(p.name).includes(norm(q)) || norm(p.cat).includes(norm(q)) || norm(p.subtitle).includes(norm(q)) ).slice(0, 6) : window.allProducts.slice(0, 4); const popular = ["Cristo em Mim", "Reino", "Hoodie Presença", "Frutos do Espírito"]; if (!open) return null; return (
e.stopPropagation()}>
setQ(e.target.value)} placeholder="O que você está buscando?" /> {q && }
{q ? "Resultados" : "Mais buscados"}
{popular.map(p => ( ))}
{results.length === 0 ? (

Nada encontrado para "{q}". Tente outro termo.

) : ( {q ? `${results.length} ${results.length === 1 ? "peça" : "peças"}` : "Em destaque"}
{results.map(p => ( ))}
)}
); } // ─────────────────────────────────────────────── // Floating WhatsApp + add-to-cart toast // ─────────────────────────────────────────────── function FloatingWhatsApp() { return ( Fale com a gente ); } function CartToast({ visible, item }) { return (
{item && (
{item.name}
Adicionado à sacola {item.name}
)}
); } window.CartDrawer = CartDrawer; window.QuickView = QuickView; window.SearchOverlay = SearchOverlay; window.FloatingWhatsApp = FloatingWhatsApp; window.CartToast = CartToast;