{!ready ? (
// First visit — sheet loading. Render 15 skeleton cards so
// the user never sees stale embedded fallback content flash.
Array.from({ length: 15 }, (_, i) => {
const col = i % 5;
const lastRow = i >= 10;
return (
{lang === 'pl' ? 'Zapytaj o ten model' : 'Ask about this model'}
{item.brand || '—'}
{item.model}
{lang === 'pl'
? 'Po kliknięciu kopiujemy nazwę modelu do schowka i otwieramy wybrany kanał — wystarczy wkleić wiadomość.'
: 'On click we copy the model name to your clipboard and open the chosen channel — just paste the message.'}
);
}
window.StockPage = StockPage;
window.ChannelPicker = ChannelPicker;
// — SneakerMark —
// Animated brutalist sneaker silhouette — the creative replacement
// for the flame on the stock subpage header. Side-view sneaker drawn
// with a chunky outline (no real brand cues), with a subtle "walking"
// rock animation and a few motion-line dashes behind it.
function SneakerMark({ size = 96, color = '#16110d', accent = '#ff4413', bg = '#f1ede4' }) {
return (
);
}
// The creative replacement for the flame on the stock subpage. A chunky
// 2-digit catalog index that animates when filters change (counts up or
// down with an easing curve). Underneath, a small "INDEX 26.18" stamp
// gives it the catalog/inventory feel. Reads as the live tally of what
// the user is currently filtering down to.
function CatalogCounter({ visible, total, lang, colors }) {
const [shown, setShown] = React.useState(visible);
const fromRef = React.useRef(visible);
React.useEffect(() => {
const from = fromRef.current;
const to = visible;
if (from === to) return;
const duration = 380;
const start = performance.now();
let raf;
const tick = (t) => {
const p = Math.min(1, (t - start) / duration);
const eased = 1 - Math.pow(1 - p, 3);
setShown(Math.round(from + (to - from) * eased));
if (p < 1) raf = requestAnimationFrame(tick);
else fromRef.current = to;
};
raf = requestAnimationFrame(tick);
return () => cancelAnimationFrame(raf);
}, [visible]);
const pad = (n) => n.toString().padStart(2, '0');
return (
{pad(shown)}/{pad(total)}
);
}
// — SearchGlyph —
// Minimal magnifying-glass icon used in the search input.
function SearchGlyph({ color = '#16110d' }) {
return (
);
}