// Componentes compartidos — Auto Paniagua const { useState, useEffect, useRef } = React; const fmtUSD = (n) => "US$ " + n.toLocaleString("en-US"); const fmtKm = (n) => n === 0 ? "0 km" : n.toLocaleString("es-DO") + " km"; const WA_NUMBER = "18094827301"; const waLink = (msg) => `https://wa.me/${WA_NUMBER}?text=${encodeURIComponent(msg)}`; // ---- Logo (oficial) ---- function Logo({ size = 30, onClick }) { return ( ); } // ---- Botón ---- function Btn({ children, variant = "primary", size = "md", icon, iconRight, onClick, href, className = "", ...p }) { const cls = `ap-btn ap-btn-${variant} ap-btn-${size} ${className}`; const inner = <> {icon ? {icon} : null} {children} {iconRight ? {iconRight} : null} ; if (href) return {inner}; return ; } // ---- Spec chip ---- function Spec({ icon, label }) { return ( {icon} {label} ); } // ---- Tarjeta de vehículo ---- const FAVS_KEY = "ap-favs-v3"; function getFavs() { try { return JSON.parse(localStorage.getItem(FAVS_KEY) || "[]"); } catch { return []; } } function CarCard({ v, onOpen }) { const tagClass = v.condicion === "nuevo" ? "ap-tag-new" : "ap-tag-used"; const [faved, setFaved] = useState(() => getFavs().includes(v.id)); const toggleFav = (e) => { e.stopPropagation(); const favs = getFavs(); const next = faved ? favs.filter((id) => id !== v.id) : [...favs, v.id]; try { localStorage.setItem(FAVS_KEY, JSON.stringify(next)); } catch {} setFaved(!faved); window.dispatchEvent(new CustomEvent("ap-favs-changed")); }; return (
onOpen(v)}>
{`${v.marca} {v.condicion}

{v.marca}

{v.modelo}

Precio

{fmtUSD(v.precio)}

{Icons.arrowRight({ size: 18 })}
); } // ---- Header ---- function Header({ go, current, theme, toggleTheme }) { const [scrolled, setScrolled] = useState(false); const [openMenu, setOpenMenu] = useState(false); const [favsCount, setFavsCount] = useState(() => getFavs().length); useEffect(() => { const onFavsChanged = () => setFavsCount(getFavs().length); window.addEventListener("ap-favs-changed", onFavsChanged); return () => window.removeEventListener("ap-favs-changed", onFavsChanged); }, []); useEffect(() => { const root = document.querySelector(".ap-scroll"); const el = root || window; const onScroll = () => setScrolled((root ? root.scrollTop : window.scrollY) > 12); el.addEventListener("scroll", onScroll); onScroll(); return () => el.removeEventListener("scroll", onScroll); }, []); const nav = [ { id: "home", label: "Inicio" }, { id: "listing", label: "Vehículos" }, { id: "calculator", label: "Calculadora" }, { id: "contacto", label: "Contacto" }]; return ( <>
{Icons.pin({ size: 14 })} Ave. Rómulo Betancourt #2080, Santo Domingo
{Icons.phone({ size: 14 })} 809-482-7301 Líderes desde 1994
go("home")} />
{favsCount > 0 && ( )} Cotiza ahora
{openMenu ?
setOpenMenu(false)}>
e.stopPropagation()}>
{go("home");setOpenMenu(false);}} />
{nav.map((n) => )} Cotiza por WhatsApp
: null} ); } // ---- Footer ---- function Footer({ go }) { const D = window.AP_DATA; return ( ); } // ---- Sección título ---- function SectionHead({ overline, title, action, onAction }) { return (
{overline ?

{overline}

: null}

{title}

{action ? : null}
); } // ---- Botón flotante WhatsApp ---- function WhatsAppFab() { return ( {Icons.whatsapp({ size: 28 })} ); } // Select con búsqueda. options: array de strings o {value, label}. function SearchSelect({ value, onChange, options, placeholder, className }) { const [open, setOpen] = useState(false); const [q, setQ] = useState(""); const ref = useRef(null); const opts = (options || []).map((o) => (typeof o === "object" ? o : { value: o, label: String(o) })); const current = opts.find((o) => String(o.value) === String(value)); useEffect(() => { if (!open) return undefined; const onDoc = (e) => { if (ref.current && !ref.current.contains(e.target)) setOpen(false); }; const onKey = (e) => { if (e.key === "Escape") setOpen(false); }; document.addEventListener("mousedown", onDoc); document.addEventListener("keydown", onKey); return () => { document.removeEventListener("mousedown", onDoc); document.removeEventListener("keydown", onKey); }; }, [open]); const filtered = q ? opts.filter((o) => o.label.toLowerCase().includes(q.toLowerCase())) : opts; return (
{open ? (
setQ(e.target.value)} />
{filtered.length ? filtered.map((o) => ( )) :
Sin resultados
}
) : null}
); } Object.assign(window, { fmtUSD, fmtKm, waLink, WA_NUMBER, getFavs, Logo, Btn, Spec, CarCard, Header, Footer, SectionHead, WhatsAppFab, SearchSelect });