/* global React, window, palette */ // Visual atoms - striped placeholders standing in for product photography. // Intentionally abstract: rectangles + stripes only, with monospace labels. const { useMemo } = React; /* Реактивный детектор мобильной ширины - на инлайн-стилях media-запросы не работают, поэтому ширину отслеживаем через matchMedia. */ function useIsMobile(breakpoint = 820) { const query = `(max-width: ${breakpoint}px)`; const [isMobile, setIsMobile] = React.useState( () => typeof window !== "undefined" && window.matchMedia(query).matches ); React.useEffect(() => { const mq = window.matchMedia(query); const onChange = e => setIsMobile(e.matches); setIsMobile(mq.matches); mq.addEventListener("change", onChange); return () => mq.removeEventListener("change", onChange); }, [query]); return isMobile; } function hash(str) { let h = 0; for (let i = 0; i < str.length; i++) h = ((h << 5) - h + str.charCodeAt(i)) | 0; return Math.abs(h); } /* A flat "case" - coloured rectangle with subtle vertical strap and stripes. Keeps shapes restricted to rect + lines + circles. */ function CasePlate({ id, tones = [palette.cognac, palette.brass, palette.bone], ratio = "4/3", label, dense = false }) { const seed = useMemo(() => hash(id || "x"), [id]); const stripes = (seed % 6) + 4; const [body, accent, ground] = tones; return (
{/* horizontal stripes for fabric/leather texture */} {Array.from({ length: stripes }).map((_, i) => ( ))} {/* case silhouette */} {/* handle */} {/* body */} {/* strap */} {/* corners - small circles for clasps */} {/* monogram square */} {!dense && } {label && (
{label}
)}
); } /* A "bag" silhouette - slightly taller proportion with a top flap. */ function BagPlate({ id, tones = [palette.navy, palette.brass, palette.bone], ratio = "4/5", label }) { const [body, accent, ground] = tones; const seed = useMemo(() => hash(id || "x"), [id]); const stripes = (seed % 5) + 3; return (
{Array.from({ length: stripes }).map((_, i) => ( ))} {/* handle loop */} {/* body */} {/* flap */} {/* clasp */} {/* side stitch */} {label && (
{label}
)}
); } /* A "trunk" / chest - wide horizontal body with a lid seam and metal bands. Used for storage chests (сундуки). */ function TrunkPlate({ id, tones = [palette.cognac, palette.brass, palette.bone], ratio = "4/3", label }) { const seed = useMemo(() => hash(id || "x"), [id]); const stripes = (seed % 5) + 3; const [body, accent, ground] = tones; return (
{Array.from({ length: stripes }).map((_, i) => ( ))} {/* body */} {/* lid seam */} {/* metal bands (vertical) */} {/* corner caps */} {/* lock plate */} {/* side handle hints */} {label && (
{label}
)}
); } /* A round / cylindrical box (шляпная коробка, круглый футляр). */ function RoundPlate({ id, tones = [palette.cognac, palette.brass, palette.bone], ratio = "4/5", label }) { const seed = useMemo(() => hash(id || "x"), [id]); const ringOffset = (seed % 4) + 2; const [body, accent, ground] = tones; return (
{/* body cylinder - large circle */} {/* inner ring (lid edge) */} {/* metal strap across top */} {/* handle on top */} {/* monogram dot */} {label && (
{label}
)}
); } /* A shoe cabinet silhouette - tall rectangle with horizontal drawer seams. */ function ShoeCabinetPlate({ id, tones = [palette.cognac, palette.brass, palette.bone], ratio = "3/4", label }) { const seed = useMemo(() => hash(id || "x"), [id]); const drawers = (seed % 2) + 3; // 3 or 4 drawers const [body, accent, ground] = tones; return (
{/* body */} {/* drawer seams */} {Array.from({ length: drawers }).map((_, i) => { const y = 10 + (110 / drawers) * (i + 1); return ; })} {/* drawer pulls */} {Array.from({ length: drawers }).map((_, i) => { const cy = 10 + (110 / drawers) * (i + 0.5); return ; })} {/* feet */} {/* top edge */} {label && (
{label}
)}
); } /* Eyebrow / kicker text */ function Eyebrow({ children, color }) { return (
{children}
); } /* A thin horizontal rule used between editorial sections */ function Rule({ color = "rgba(0,0,0,0.12)", style }) { return
; } Object.assign(window, { CasePlate, BagPlate, TrunkPlate, RoundPlate, ShoeCabinetPlate, Eyebrow, Rule, useIsMobile });