/* HelpBnk mobile — shared primitives across variants Aligned with web design system (styles.css, home.css, shared.jsx) */ const { useState, useEffect, useRef, useMemo, useCallback } = React; /* ---------- Palette mirroring web styles.css ---------- */ const HB = { bg: '#FFFFFF', bgSubtle:'#F4F6F9', bgTint: '#E8F0FB', ink: '#0B1220', ink2: '#1B2434', ink3: '#4A5566', ink4: '#7B8595', ink5: '#B6BECB', line: '#E8ECF2', lineStr: '#D6DCE6', accent: '#2D7FF9', accentInk:'#1255C3', accentTint:'#E8F0FB', /* secondary teal/cyan from the logo gradient, only used on the Journey card */ cyan1: '#3FB8E6', cyan2: '#7BD9E6', }; /* Web tile palette (from styles.css) */ const TILE = [ ['#E8F0FB','#1F4FA0'], ['#E6F4EC','#1F6E45'], ['#FBF1E2','#8C5A1F'], ['#F5ECFB','#6A2EA8'], ['#FCEAEA','#A82E2E'], ['#E5F3F5','#1F6F7A'], ['#F1F2F5','#34425A'], ['#FBF7E0','#7A6A1F'], ]; /* Web avatar gradients (from home.css) */ const AV_GRAD = [ 'linear-gradient(135deg,#FF8A65,#D84315)', 'linear-gradient(135deg,#5C6BC0,#283593)', 'linear-gradient(135deg,#26A69A,#00695C)', 'linear-gradient(135deg,#AB47BC,#6A1B9A)', 'linear-gradient(135deg,#42A5F5,#1565C0)', 'linear-gradient(135deg,#66BB6A,#2E7D32)', 'linear-gradient(135deg,#EC407A,#AD1457)', 'linear-gradient(135deg,#FFA726,#E65100)', ]; /* Intent prompt tints (from home.css) */ const PROMPT_TONES = { ask: { bg:'rgba(45,127,249,0.12)', fg:'#2D7FF9' }, belong: { bg:'rgba(216,67,21,0.12)', fg:'#D84315' }, find: { bg:'rgba(0,105,92,0.12)', fg:'#00695C' }, learn: { bg:'rgba(106,27,154,0.12)', fg:'#6A1B9A' }, tools: { bg:'rgba(230,81,0,0.12)', fg:'#E65100' }, }; /* ---------- HelpBnk wordmark using the real asset ---------- */ const HelpBnkWordmark = ({ size = 22 }) => ( HelpBnk ); const HelpBnkMark = ({ size = 28 }) => ( HelpBnk ); /* ---------- Icon set mirroring web shared.jsx Icon ---------- */ const MI = { Home: (p) => , HomeFill: (p) => , Users: (p) => , Grad: (p) => , Wrench: (p) => , Coins: (p) => , Search: (p) => , Bell: (p) => , Compass: (p) => , Globe: (p) => , Book: (p) => , Sparkles: (p) => , Mic: (p) => , ArrowUp: (p) => , ArrowR: (p) => , ChevR: (p) => , Plus: (p) => , Sort: (p) => , Heart: (p) => , Comment: (p) => , Share: (p) => , Dots: (p) => , Calendar: (p) => , Hash: (p) => , }; /* ---------- Status bar (390-wide tuned) ---------- */ const StatusBar = ({ dark = false }) => { const c = dark ? '#fff' : '#000'; return (
9:41
); }; /* ---------- Phone frame wrapper ---------- */ const Phone = ({ children, dark = false, bg = '#fff' }) => (
{children}
{/* Bezel drawn on top so the dark phone edge stays visible all the way around, even over the bottom nav */}
); /* ---------- Avatar — web gradient palette ---------- */ const Avatar = ({ name='A B', idx=0, size=36, ring=false }) => { const initials = name.split(' ').map(n=>n[0]).slice(0,2).join('').toUpperCase(); return (
{initials}
); }; /* ---------- Striped placeholder ---------- */ const Stripes = ({ label, h, r=12, tone='light', style }) => (
{label}
); /* ---------- Intent prompts — same set as web home ---------- */ const INTENT_PROMPTS = [ { tone:'ask', icon:'Users', label:'Ask another founder a question' }, { tone:'belong', icon:'Globe', label:'Find a community of founders like me' }, { tone:'learn', icon:'Book', label:'Find a course to learn about business' }, { tone:'tools', icon:'Wrench', label:'Find the right tools for my business' }, ]; /* ---------- Feed posts ---------- */ const FEED_POSTS = [ { id:1, name:'Lina Alturki', handle:'EU DTC Founders', when:'12m', body:`I joined HelpBnk last month, and the community has been so supportive. I've already made valuable connections and gained insights into my career and finances.`, likes:16, replies:21, av:0, follow:true }, { id:2, name:'Marcus Wei', handle:'EU DTC Founders', when:'38m', body:`How is everyone handling the new IOSS thresholds for sub-€150 shipments into France? My 3PL just bumped fees.`, likes:18, replies:22, av:1 }, { id:3, name:'Esther Kim', handle:'AI Builders', when:'1h', body:`Shared our last 3 winning ad creatives. Top one ran 0.87 CPC for 9 days straight. AMA.`, likes:91, replies:31, av:2 }, ]; /* ---------- Bottom nav matching web pages ---------- */ const NAV_ITEMS = [ { id:'Home', icon:'HomeFill', altIcon:'Home', label:'Home', href:'index.html' }, { id:'Community', icon:'Users', label:'Community', href:'community.html' }, { id:'AI', icon:'Sparkles', label:'AI', href:'chat.html' }, { id:'Learn', icon:'Grad', label:'Learn', href:'learn.html' }, { id:'Tools', icon:'Wrench', label:'Tools', href:'tools.html' }, ]; const BottomNav = ({ active='Home', dark=false, emphasizeAI=false }) => { const fg = dark ? 'rgba(255,255,255,.55)' : HB.ink4; const fgA = dark ? '#fff' : HB.ink; return (
{NAV_ITEMS.map(it => { const isA = it.id === active; const isAI = it.id === 'AI'; /* Center AI tab gets a gradient pill treatment when emphasized */ if (isAI && emphasizeAI) { return ( ); } const Cmp = MI[isA && it.altIcon ? it.icon : (it.altIcon || it.icon)] || MI.Home; return ( ); })}
); }; Object.assign(window, { HB, TILE, AV_GRAD, PROMPT_TONES, HelpBnkWordmark, HelpBnkMark, MI, StatusBar, Phone, Avatar, Stripes, INTENT_PROMPTS, FEED_POSTS, NAV_ITEMS, BottomNav, });