/* global React, ReactDOM, RETAILERS, CAT_TINT, DEALS, useTweaks, TweaksPanel, TweakSection, TweakSlider, TweakToggle, TweakRadio, TweakSelect, TweakColor */ const { useState, useEffect, useMemo, useRef } = React; const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{ "density": "regular", "accent": "#c2a753", "showSparklines": true, "showHotBadges": true, "compactSidebar": false, "monoNumerics": true }/*EDITMODE-END*/; // ─── Iconography (no emoji; small, original glyphs) ───────────────────────── const Star = ({ size = 14, color = 'currentColor', filled = true, strokeWidth = 1.4 }) => ( ); const SparkStar = ({ size = 10, color = 'currentColor' }) => ( ); const IconSearch = ({ size = 15 }) => ( ); const IconChevron = ({ size = 12 }) => ( ); const IconArrow = ({ size = 12 }) => ( ); const IconBarcode = ({ size = 13 }) => ( ); const IconShare = ({ size = 13 }) => ( ); const IconBookmark = ({ size = 13, filled = false }) => ( ); const IconFilter = ({ size = 13 }) => ( ); const IconBell = ({ size = 14 }) => ( ); const IconLightning = ({ size = 12 }) => ( ); // ─── Star Monitors logo (real SM monogram from brand assets) ──────────────── const StarLogo = ({ height = 36 }) => ( Star Monitors ); // ─── Product thumbnail — uses real image with swatch fallback ─────────────── const Thumb = ({ cat, sku, size, img }) => { const tint = CAT_TINT[cat] || ['#666', '#222']; const seed = parseInt(sku.slice(-3), 10) || 0; const angle = (seed * 7) % 360; const [failed, setFailed] = useState(!img); if (!failed && img) { return (
{cat} setFailed(true)} style={{ width: '100%', height: '100%', objectFit: 'contain', display: 'block' }}/>
); } // Fallback: tinted swatch with category label return (
{cat}
#{sku.slice(-4)}
); }; // ─── Sparkline (discount trajectory over time) ────────────────────────────── const Sparkline = ({ data, color = '#c2a753', width = 56, height = 18 }) => { if (!data || !data.length) return null; const max = Math.max(...data), min = Math.min(...data); const range = max - min || 1; const pts = data.map((v, i) => { const x = (i / (data.length - 1)) * (width - 2) + 1; const y = height - 1 - ((v - min) / range) * (height - 2); return `${x.toFixed(1)},${y.toFixed(1)}`; }); return ( ); }; // ─── Live "pulse" indicator ───────────────────────────────────────────────── const LivePulse = ({ color = '#5fb87c' }) => ( ); // ─── Odometer — split-flap / scrolling digit display ───────────────────────── const Odometer = ({ value, size = 16, color = '#c2a753' }) => { const str = (value || 0).toLocaleString(); const digitH = size * 1.2; return ( {str.split('').map((ch, i) => { if (!/\d/.test(ch)) { return {ch}; } const d = parseInt(ch, 10); return ( {[0,1,2,3,4,5,6,7,8,9].map(n => ( {n} ))} ); })} ); }; // ─── Filter pill checkbox row ─────────────────────────────────────────────── const FilterRow = ({ label, count, checked, onChange }) => ( ); // ─── Sidebar ──────────────────────────────────────────────────────────────── const Sidebar = ({ t, retailer, filters, setFilters, savedCount, drawerOpen, onCloseDrawer }) => { const r = RETAILERS.find(x => x.id === retailer); const baseCount = r ? r.count : 0; const [liveCount, setLiveCount] = React.useState(baseCount); // Reset to retailer's base when the tab changes React.useEffect(() => { setLiveCount(baseCount); }, [baseCount]); // Auto-tick: simulate new deals coming in every ~1.8s React.useEffect(() => { const id = setInterval(() => { setLiveCount(c => c + Math.floor(Math.random() * 3) + 1); }, 1800); return () => clearInterval(id); }, [retailer]); return ( {drawerOpen &&
} ); }; window.SM_Components = { Star, SparkStar, IconSearch, IconChevron, IconArrow, IconBarcode, IconShare, IconBookmark, IconFilter, IconBell, IconLightning, StarLogo, Thumb, Sparkline, LivePulse, Odometer, FilterRow, Sidebar };