// HM Veículos — componentes compartilhados v2 const { useState, useEffect, useRef, useCallback } = React; // Helpers const fmtBRL = (n) => { const num = typeof n === "number" ? n : parseFloat(n); if (!Number.isFinite(num)) return "0"; return num.toLocaleString("pt-BR", { minimumFractionDigits: 2, maximumFractionDigits: 2 }); }; const fmtKM = (n) => { const num = typeof n === "number" ? n : parseFloat(n); if (!Number.isFinite(num)) return "0 km"; return num.toLocaleString("pt-BR") + " km"; }; // ----- Icons ----- const Icon = { Whatsapp: ({ size = 20 }) => ( ), Phone: ({ size = 18 }) => (), Menu: ({ size = 22 }) => (), Close: ({ size = 22 }) => (), ArrowLeft: ({ size = 18 }) => (), ArrowRight: ({ size = 18 }) => (), ArrowUpRight: ({ size = 18 }) => (), Instagram: ({ size = 18 }) => (), Facebook: ({ size = 18 }) => (), Pin: ({ size = 18 }) => (), Clock: ({ size = 18 }) => (), Shield: ({ size = 24 }) => (), Search: ({ size = 24 }) => (), Hand: ({ size = 24 }) => (), Sparkle: ({ size = 24 }) => (), ChevDouble: ({ size = 18 }) => (), }; // ----- WhatsApp Picker ----- // Botão de WhatsApp que abre um seletor quando há mais de um contato // configurado em site_settings (contato.whatsapp_contatos). Se houver só // um, abre o WhatsApp direto sem modal. function WAPicker({ message, children, className, ariaLabel, onSelect }) { const [open, setOpen] = useState(false); const contacts = (window.getWAContacts ? window.getWAContacts() : []) || []; const msg = message || "Olá! Vim através do site da HM Veículos e gostaria de atendimento."; const directLink = (c) => { const num = (c && c.numero) || ""; const t = `?text=${encodeURIComponent(msg)}`; if (!num) return `https://wa.me/${t}`; return `https://wa.me/${num}${t}`; }; const fireSelect = (c) => { if (typeof onSelect === "function") onSelect(c); }; // Sem contatos cadastrados — degrade gracioso: link de fallback if (contacts.length === 0) { return ( fireSelect(null)}> {children} ); } // Apenas 1 contato — link direto sem modal if (contacts.length === 1) { return ( fireSelect(contacts[0])}> {children} ); } // Múltiplos contatos — abre modal de seleção (portal no body para evitar z-index/stacking-context) const modal = open ? (

setOpen(false)} role="dialog" aria-modal="true">

e.stopPropagation()}>

Com quem você quer falar?

{ fireSelect(c); setOpen(false); }} >

{c.nome}

) : null; return ( {ReactDOM.createPortal(modal, document.body)} ); } // ----- Logo ----- function Logo({ onClick, dark, size = 24 }) { return ( { e.preventDefault(); onClick && onClick(); }} className={"logo" + (dark ? " dark" : "")}>

); } // ----- Scroll Progress bar ----- function ScrollProgress() { const ref = useRef(null); useEffect(() => { const onScroll = () => { const max = document.documentElement.scrollHeight - window.innerHeight; const p = max > 0 ? window.scrollY / max : 0; if (ref.current) ref.current.style.transform = `scaleX(${p})`; }; window.addEventListener("scroll", onScroll, { passive: true }); onScroll(); return () => window.removeEventListener("scroll", onScroll); }, []); return

; } // ----- Header ----- function Header({ onNav, route }) { const [scrolled, setScrolled] = useState(false); const [mobileOpen, setMobileOpen] = useState(false); useEffect(() => { const onScroll = () => setScrolled(window.scrollY > 12); onScroll(); window.addEventListener("scroll", onScroll, { passive: true }); return () => window.removeEventListener("scroll", onScroll); }, []); useEffect(() => { setMobileOpen(false); }, [route]); const links = [ { label: "Início", href: "#top", onClick: () => onNav("home") }, { label: "Estoque", href: "#estoque", onClick: () => onNav("home", "estoque") }, { label: "Sobre", href: "#sobre", onClick: () => onNav("home", "sobre") }, { label: "Consignação", href: "#consignacao", onClick: () => onNav("home", "consignacao") }, { label: "Contato", href: "#contato", onClick: () => onNav("home", "contato") }, ]; return (

onNav("home")} />

{links.map((l) => ( { e.preventDefault(); l.onClick(); setMobileOpen(false); }}>{l.label} ))} Falar pelo WhatsApp

); } // ----- Footer ----- function fmtPhone(raw) { // 5537999074004 → "(37) 99907-4004" · 3730151575 → "(37) 3015-1575" const d = String(raw || "").replace(/[^0-9]/g, ""); if (!d) return ""; const local = d.length > 11 ? d.slice(d.length - 11) : d; // tira o 55 do começo se tiver if (local.length === 11) return `(${local.slice(0,2)}) ${local.slice(2,7)}-${local.slice(7)}`; if (local.length === 10) return `(${local.slice(0,2)}) ${local.slice(2,6)}-${local.slice(6)}`; return d; } function Footer() { const get = (k, fb) => (window.getSetting ? window.getSetting(k, fb) : fb); const nome = get("loja.nome", "HM Veículos"); const endereco = get("loja.endereco", "Rua Rio de Janeiro, 1215 — Centro, Divinópolis/MG"); const horario = get("loja.horario", "Seg–Sex 8h–18h · Sáb 8h–12h"); const fixo = get("contato.fixo", "3730151575"); const email = get("contato.email", ""); const ig = get("social.instagram", "https://instagram.com/loja.hmveiculos"); const fb = get("social.facebook", "https://facebook.com/lojahmveiculos"); const igHandle = (ig || "").replace(/^https?:\/\/(www\.)?instagram\.com\//, "@").replace(/\/$/, ""); const fbHandle = (fb || "").replace(/^https?:\/\/(www\.)?facebook\.com\//, "/").replace(/\/$/, ""); const waContacts = (window.getWAContacts ? window.getWAContacts() : []) || []; return (