/* ============================================================ Carzello — shared primitives, icons, formatters, hooks ============================================================ */ const { useState, useEffect, useRef, useMemo, useCallback } = React; /* ---- formatters ---- */ const fmtUSD = (n) => "$" + Number(Math.round(n || 0)).toLocaleString("en-US"); const fmtUSDc = (n) => "$" + Number(n || 0).toLocaleString("en-US", { minimumFractionDigits: 2, maximumFractionDigits: 2 }); const fmtMiles = (n) => Number(n).toLocaleString("en-US") + " mi"; function fmtRemaining(ms) { if (ms <= 0) return "Ended"; const s = Math.floor(ms / 1000); const d = Math.floor(s / 86400), h = Math.floor((s % 86400) / 3600), m = Math.floor((s % 3600) / 60), sec = s % 60; if (d > 0) return `${d}d ${h}h`; if (h > 0) return `${h}:${String(m).padStart(2, "0")}:${String(sec).padStart(2, "0")}`; return `${m}:${String(sec).padStart(2, "0")}`; } function fmtClock(d) { const p = (n) => String(n).padStart(2, "0"); return `${p(d.getUTCHours())}:${p(d.getUTCMinutes())}:${p(d.getUTCSeconds())}`; } function timeAgo(ts) { const s = Math.floor((Date.now() - ts) / 1000); if (s < 5) return "just now"; if (s < 60) return s + "s ago"; const m = Math.floor(s / 60); if (m < 60) return m + "m ago"; const h = Math.floor(m / 60); if (h < 24) return h + "h ago"; return Math.floor(h / 24) + "d ago"; } /* ---- icons ---- */ const I = { search: (p) => , gavel: (p) => , star: (p) => , starF: (p) => , bell: (p) => , sliders: (p) => , chevron: (p) => , chevL: (p) => , chevD: (p) => , x: (p) => , check: (p) => , truck: (p) => , doc: (p) => , shield: (p) => , clock: (p) => , pin: (p) => , car: (p) => , grid: (p) => , list: (p) => , plus: (p) => , user: (p) => , bolt: (p) => , tag: (p) => , camera: (p) => , alert: (p) => , info: (p) => , eye: (p) => , back: (p) => , upload: (p) => , cog: (p) => , globe: (p) => , offer: (p) => , trend: (p) => , store: (p) => , mail: (p) => , phone: (p) => , copy: (p) => , key: (p) => , }; /* ---- hooks ---- */ // Re-render every `ms` so countdowns advance. (Store also ticks, but this // keeps standalone countdowns smooth even on screens not reading the store.) function useTick(ms = 1000) { const [, set] = useState(0); useEffect(() => { const t = setInterval(() => set(n => n + 1), ms); return () => clearInterval(t); }, [ms]); } function useServerClock() { useTick(1000); return new Date(); } // Navigation (hash router) function useRoute() { const parse = () => { const h = (window.location.hash || "#/browse").replace(/^#/, ""); const parts = h.split("/").filter(Boolean); return { name: parts[0] || "browse", param: parts[1] || null, sub: parts[2] || null, parts }; }; const [route, setRoute] = useState(parse); useEffect(() => { const on = () => setRoute(parse()); window.addEventListener("hashchange", on); return () => window.removeEventListener("hashchange", on); }, []); return route; } function navigate(path) { window.location.hash = path; } // Accessible dialog: move focus in, trap Tab, Escape to close, restore focus on close. function useFocusTrap(onClose) { const ref = useRef(null); useEffect(() => { const node = ref.current; if (!node) return; const prev = document.activeElement; const sel = 'a[href],button:not([disabled]),input:not([disabled]),select:not([disabled]),textarea:not([disabled]),[tabindex]:not([tabindex="-1"])'; const focusables = () => Array.from(node.querySelectorAll(sel)).filter(el => el.offsetParent !== null); (focusables()[0] || node).focus(); function onKey(e) { if (e.key === "Escape") { e.preventDefault(); onClose && onClose(); return; } if (e.key !== "Tab") return; const f = focusables(); if (!f.length) return; const a = f[0], b = f[f.length - 1]; if (e.shiftKey && document.activeElement === a) { e.preventDefault(); b.focus(); } else if (!e.shiftKey && document.activeElement === b) { e.preventDefault(); a.focus(); } } node.addEventListener("keydown", onKey); return () => { node.removeEventListener("keydown", onKey); if (prev && prev.focus) prev.focus(); }; }, []); return ref; } // Spread onto a non-button element to make it a keyboard-operable control. function clickable(onClick, label) { return { role: "button", tabIndex: 0, "aria-label": label, onClick, onKeyDown: (e) => { if (e.key === "Enter" || e.key === " ") { e.preventDefault(); onClick(e); } }, }; } /* ---- AutoGrade badge ---- */ function AutoGrade({ score, size, showLabel }) { const pct = (score / 5) * 100; const c = gradeColor(score); const cls = "autograde " + (size === "sm" ? "sm" : size === "lg" ? "lg" : ""); return ( {score.toFixed(1)} {showLabel && AutoGrade{gradeLabel(score)}} ); } function GradeChip({ score }) { return {score.toFixed(1)}{gradeLabel(score)}; } /* ---- Pill ---- */ function Pill({ kind, dot, children, style }) { return {dot && }{children}; } /* ---- Photo placeholder ---- */ function Photo({ label, count, className, style, hue = 210, src, ...rest }) { if (src) { return (

{label

{label && {label}} {count != null && {count}}

); } return (

); } /* ---- Countdown ---- */ function Countdown({ to, className = "", prefix }) { useTick(1000); const ms = to - Date.now(); const danger = ms > 0 && ms < 60000; const warn = ms > 0 && ms < 300000; return {prefix}{fmtRemaining(ms)}; } /* ---- Watch (star) button ---- */ function WatchBtn({ id, className = "watch" }) { const s = useStore(); const on = s.watchlist.has(id); return ( ); } /* ---- NAAA sale light ---- */ function SaleLight({ lot, full }) { const sl = saleLight(lot); const color = sl.light === "green" ? "var(--green)" : sl.light === "yellow" ? "var(--amber)" : "var(--red)"; return ( ); } /* ---- Market-value badge (good-buy signal) ---- */ function MarketBadge({ lot, full }) { const { t } = useT(); const ms = marketSignal(lot.highBid, lot.marketValue); if (!ms) return null; const key = ms.pct >= 0.10 ? "mkt.greatBuy" : ms.kind === "green" ? "mkt.below" : ms.kind === "amber" ? "mkt.at" : "mkt.above"; return ( {t(key)} {full && ms.save > 0 ? ` · ${t("mkt.save")} ${fmtUSD(ms.save)}` : ""} ); } /* ---- Market estimate (Sayarah estimate + sold comps) ---- */ function MarketEstimate({ lot }) { const { t } = useT(); const [open, setOpen] = useState(false); const est = estimateFromComps(lot); return (

{t("mkt.estimate")}

{fmtUSD(lot.marketValue)}

{est &&

{fmtUSD(est.low)}–{fmtUSD(est.high)} · {est.n} {t("mkt.sold")}

}

{est && } {est && open && (

{est.comps.slice(0, 4).map((c, i) => (

{c.year} {c.make} {c.model} {c.grade.toFixed(1)} · {c.dest} · {c.daysAgo}d {fmtUSD(c.final)}

))}

{t("mkt.disclaimer")}

)}

); } /* ---- Listing card (responsive grid item) ---- */ function ListingCard({ lot }) { const { t } = useT(); const mine = lot.highBidder === "you"; const youBid = lot.yourMax != null; const cls = "lcard " + (mine ? "winning " : youBid ? "outbid " : ""); const titleStatus = lot.title === "Clean" ? "green" : lot.title === "Branded" ? "amber" : "red"; const open = () => navigate(`/lot/${lot.id}`); return (

{lot.status === "scheduled" ? LANE {lot.lane} : lot.saleType === "live" && LIVE} {(lot.tags || []).slice(0, 1).map((t, i) => {t.label})}

{lot.owned ? t("tag.owned") : t("tag.consigned")} {lot.photos}

{lot.autograde.toFixed(1)}

{lot.trim}

{fmtMiles(lot.mileage)} {lot.drivetrain} {lot.transmission} {lot.title}

{lot.location} · {lot.seller}

{mine ? "Your bid · winning" : youBid ? "High bid · outbid" : `High bid · ${lot.bidCount}`}

{fmtUSD(lot.highBid)}

{lot.status === "ended" ? "Status" : lot.status === "scheduled" ? "Opens in" : "Ends in"}

{lot.status === "ended" ?

{lot.result === "won" ? "Won" : "Ended"}

: lot.status === "scheduled" ? : }

); } /* ---- Modal + Sheet ---- */ function Modal({ children, onClose, label }) { const ref = useFocusTrap(onClose); return (

); } function Sheet({ children, onClose, title }) { const ref = useFocusTrap(onClose); return ( <>