/* Reusable visual primitives: WasherPortal, Bubbles, Ribbons, Icons */
const GoldRibbonUnderline = ({ className = "" }) => (
);
const HoursRibbonUnderline = () => (
);
const CurlingLiquidRibbon = ({ className = "", style = {} }) => (
);
const RibbonDivider = ({ flip = false }) => (
);
const Sparkle = ({ size = 16, color = "#FFC627", className = "" }) => (
);
const WasherPortal = ({ className = "" }) => (
);
/* Floating bubble field around hero */
const BubbleField = () => {
const bubbles = [
{ size: 88, top: '4%', left: '8%', delay: 0, dur: 11 },
{ size: 56, top: '12%', right: '12%', delay: 1, dur: 9 },
{ size: 36, top: '32%', left: '2%', delay: 2, dur: 13 },
{ size: 70, bottom: '8%', right: '4%', delay: 0.5, dur: 12 },
{ size: 28, bottom: '24%', left: '14%', delay: 3, dur: 8 },
{ size: 44, top: '52%', right: '0%', delay: 1.5, dur: 10 },
{ size: 24, top: '68%', left: '8%', delay: 2.5, dur: 7 },
{ size: 52, top: '78%', right: '22%', delay: 0.8, dur: 14 },
{ size: 32, top: '24%', right: '34%', delay: 1.8, dur: 9.5 },
{ size: 40, bottom: '40%', left: '22%', delay: 2.2, dur: 11.5 },
];
return (
<>
{bubbles.map((b, i) => (
))}
);
};
/* Coin icons as SVG */
const IconCalendar = () => (
);
const IconChat = () => (
);
const IconHeart = () => (
);
const IconBundle = () => (
);
/* Star sparkle for stickers */
const StickerStar = ({ className = "", size = 22 }) => (
);
Object.assign(window, {
GoldRibbonUnderline, HoursRibbonUnderline, CurlingLiquidRibbon,
RibbonDivider, Sparkle, WasherPortal, BubbleField,
IconCalendar, IconChat, IconHeart, IconBundle, StickerStar,
});