// CieloCell V2 icons + brand mascot
// Mascot: a cloud with eyes — drawn as SVG so it can change color + expression.
// Wordmark: "cielocell" lowercase in Unbounded Black 900.
const Icon = ({ d, size = 24, color = 'currentColor', fill = 'none', strokeWidth = 2, style = {}, paths }) => (
);
const CCIcon = {
Home: (p) => } />,
Plans: (p) => } />,
Activity: (p) => } />,
Profile: (p) => } />,
Play: (p) => } />,
Check: (p) => ,
CheckCircle: (p) => } />,
Star: (p) => ,
Cloud: (p) => ,
ChevronRight: (p) => ,
ChevronLeft: (p) => ,
ChevronDown: (p) => ,
X: (p) => ,
Download: (p) => } />,
UserPlus: (p) => } />,
MessageSquare: (p) => } />,
Zap: (p) => ,
Plus: (p) => ,
ArrowRight: (p) => ,
Shield: (p) => ,
ShieldCheck: (p) => } />,
CreditCard: (p) => } />,
Smartphone: (p) => } />,
Globe: (p) => } />,
MapPin: (p) => } />,
Bell: (p) => } />,
Lock: (p) => } />,
HelpCircle: (p) => } />,
Headphones: (p) => } />,
Signal: (p) => } />,
Clock: (p) => } />,
TrendingUp: (p) => } />,
Eye: (p) => } />,
Share2: (p) => } />,
Info: (p) => } />,
Menu: (p) => } />,
Settings: (p) => } />,
RefreshCw: (p) => } />,
Search: (p) => } />,
};
// ── Cloud-with-eyes Mascot — the heart of the V2 brand ──
// color: any CSS color (defaults to hot pink). expression: 'idle' | 'blink' | 'happy' | 'wow' | 'sleepy'
const CCMascot = ({ size = 96, color = CC.pink, expression = 'idle', eyeColor = CC.ink, style = {} }) => {
// Cloud silhouette — a chunky 4-bump cloud, slightly squished, friendly
const cloudPath = "M50 145c-22 0-40-15-40-35 0-14 8-26 20-32-2-6-2-12 0-18 4-14 18-24 34-24 14 0 26 7 32 18 6-4 14-6 22-4 16 4 26 18 24 34 14 4 24 16 24 30 0 18-16 33-36 33H50z";
// Eyes
const eyeSpacing = 28;
const eyeY = 90;
const cx1 = 100 - eyeSpacing / 2;
const cx2 = 100 + eyeSpacing / 2;
let eyes;
if (expression === 'blink') {
eyes = <>;
} else if (expression === 'happy') {
eyes = <>;
} else if (expression === 'wow') {
eyes = <>;
} else if (expression === 'sleepy') {
eyes = <>;
} else { // idle — round eyes
eyes = <>;
}
return (
);
};
// ── Brand Cloud Mark (compact, lockup-friendly) ──
// Used as the small mark in the wordmark lockup. Defaults to pink mascot.
const CCCloudMark = ({ size = 64, color, eyeColor, style = {} }) => (
);
// ── Wordmark — "cielocell" lowercase in Unbounded Black 900 ──
const CCWordmark = ({ size = 32, color, style = {} }) => (
cielocell
);
// ── Combined Logo Lockup ──
// theme: 'light' (cream bg, pink mascot, ink wordmark)
// 'dark' (ink bg, lime mascot, cream wordmark)
// 'pink' (pink bg, ink mascot, ink wordmark)
// 'lime' (lime bg, ink mascot, ink wordmark)
const CCLogo = ({ size = 'md', theme = 'light', layout = 'row', style = {} }) => {
const sizes = { xs: { mark: 18, word: 16 }, sm: { mark: 26, word: 22 }, md: { mark: 36, word: 30 }, lg: { mark: 56, word: 46 }, xl: { mark: 88, word: 72 } };
const s = sizes[size] || sizes.md;
const themes = {
light: { mascot: CC.pink, eye: CC.ink, word: CC.ink },
dark: { mascot: CC.lime, eye: CC.ink, word: CC.cream },
pink: { mascot: CC.ink, eye: CC.pink, word: CC.ink },
lime: { mascot: CC.ink, eye: CC.lime, word: CC.ink },
};
const t = themes[theme] || themes.light;
if (layout === 'col') {
return (
);
}
return (
);
};
// ── App icon tile ──
const CCAppIcon = ({ size = 64, theme = 'pink', style = {} }) => {
const themes = {
pink: { bg: CC.pink, mascot: CC.cream, eye: CC.ink },
lime: { bg: CC.lime, mascot: CC.ink, eye: CC.lime },
ink: { bg: CC.ink, mascot: CC.lime, eye: CC.ink },
cream: { bg: CC.cream, mascot: CC.pink, eye: CC.ink },
};
const t = themes[theme] || themes.pink;
return (
);
};
Object.assign(window, { CCIcon, CCLogo, CCMascot, CCCloudMark, CCWordmark, CCAppIcon });