function Marquee({ items, bg = 'var(--ink)', color = 'var(--paper)', size = 80, italic = true, reverse = false, tilt = -2, lift = 60 }) {
	const { isMobile } = useBreakpoint();
	const mobileSize = Math.max(36, Math.round(size * 0.6));
	const displaySize = isMobile ? mobileSize : size;

	const row = (
		<div className="ticker-track" style={{ animationDirection: reverse ? 'reverse' : 'normal' }}>
			{[0, 1].map(rep => (
				<div key={rep} style={{ display: 'inline-flex', alignItems: 'center' }}>
					{items.map((it, i) => (
						<div key={`${rep}-${i}`} style={{ display: 'inline-flex', alignItems: 'center', padding: `0 ${isMobile ? 20 : 36}px` }}>
							<span className="display" style={{
								fontSize: displaySize,
								fontStyle: italic ? 'italic' : 'normal',
								fontWeight: italic ? 400 : 900,
								fontFamily: italic ? 'var(--ff-display-italic)' : 'var(--ff-display)',
								color,
								lineHeight: 1.05,
								whiteSpace: 'nowrap',
							}}>{it}</span>
							<span style={{
								display: 'inline-block',
								width: isMobile ? 8 : 14, height: isMobile ? 8 : 14,
								borderRadius: '50%',
								background: 'var(--pink)',
								margin: `0 ${isMobile ? 14 : 24}px`,
								flexShrink: 0,
							}} />
						</div>
					))}
				</div>
			))}
		</div>
	);

	return (
		<div style={{
			background: 'transparent',
			overflow: 'visible',
			margin: `-${isMobile ? Math.round(lift * 0.6) : lift}px 0 -${isMobile ? Math.round(lift * 0.6) : lift}px`,
			padding: `${isMobile ? 24 : 40}px 0`,
			position: 'relative',
			zIndex: 2,
			pointerEvents: 'none',
		}}>
			<div style={{
				background: bg,
				overflow: 'hidden',
				padding: `${isMobile ? 14 : 20}px 0`,
				transform: `rotate(${tilt}deg)`,
				width: '108%',
				marginLeft: '-4%',
				boxShadow: '0 20px 50px rgba(0,0,0,.12)',
			}}>
				{row}
			</div>
		</div>
	);
}
window.Marquee = Marquee;