/* Shared components: Icons, Sidebar, Brand, Progress, Badge, Toast, Modal */ // ============ ICONS (Lucide-style, stroke 1.75) ============ const Icon = ({ d, size = 18, stroke = 1.75, fill, extra, ...rest }) => ( {typeof d === 'string' ? : d} {extra} ); const I = { home: (p) => , play: (p) => , book: (p) => , chat: (p) => , award: (p) => , user: (p) => , users: (p) => , logout: (p) => , check: (p) => , checkCircle: (p) => , circle: (p) => , lock: (p) => , search: (p) => , bell: (p) => , flame: (p) => , chevronLeft: (p) => , chevronRight: (p) => , chevronDown: (p) => , chevronUp: (p) => , x: (p) => , plus: (p) => , edit: (p) => , trash: (p) => , download: (p) => , upload: (p) => , link: (p) => , file: (p) => , filePdf: (p) => , text: (p) => , clock: (p) => , calendar: (p) => , video: (p) => , settings: (p) => , barChart: (p) => , trendUp: (p) => , trendDown: (p) => , alert: (p) => , info: (p) => , star: (p) => , sparkle: (p) => , dragHandle: (p) => , menu: (p) => , eye: (p) => , eyeOff: (p) => , send: (p) => , filter: (p) => , mail: (p) => , shield: (p) => , globe: (p) => , monitor: (p) => , lightning: (p) => , trophy: (p) => , flag: (p) => , zap: (p) => , target: (p) => , save: (p) => , external: (p) => , sliders: (p) => , }; // ============ BRAND LOCKUP ============ // Official symbol + typographic wordmark (honest fallback — the full lockup // PNG is not in the repo; see ASSETS.md). function BrandLockup({ dark = true, size = 'md' }) { const scale = size === 'sm' ? 0.85 : size === 'lg' ? 1.25 : 1; return (
Fluência Contábil
Fluência Contábil
Contabilidade para quem quer ser fluente
); } // ============ SIDEBAR ============ function Sidebar({ area, user, route, onNavigate, onLogout }) { const alunoItems = [ { id: 'dashboard', icon: I.home, label: 'Dashboard' }, { id: 'aulas', icon: I.play, label: 'Aulas' }, { id: 'duvidas', icon: I.chat, label: 'Dúvidas', badge: 3 }, { id: 'certificado', icon: I.award, label: 'Certificado' }, ...(user && user.plano === 'anual' ? [{ id: 'mentoria', icon: I.sparkle, label: 'Mentoria', gold: true }] : []), { id: 'perfil', icon: I.user, label: 'Perfil' }, ]; const adminItems = [ { id: 'admin', icon: I.home, label: 'Dashboard' }, { id: 'admin-aulas', icon: I.play, label: 'Aulas' }, { id: 'admin-alunos', icon: I.users, label: 'Alunos', badge: 247 }, { id: 'admin-duvidas', icon: I.chat, label: 'Dúvidas', badge: 14 }, { id: 'admin-metricas', icon: I.barChart, label: 'Métricas' }, { id: 'admin-config', icon: I.settings, label: 'Configurações' }, ]; const items = area === 'admin' ? adminItems : alunoItems; return ( ); } // ============ CARD / PROGRESS / BADGE ============ function Card({ children, style, className = '', ...rest }) { return
{children}
; } function Progress({ value = 0, size = 'md', label, rightLabel }) { const cls = size === 'sm' ? 'fc-progress fc-progress-sm' : size === 'xs' ? 'fc-progress fc-progress-xs' : 'fc-progress'; return (
{(label || rightLabel) && (
{label} {rightLabel}
)}
); } function Badge({ tone = 'gold', children, icon: IconEl }) { return ( {IconEl && } {children} ); } // ============ TOAST ============ const ToastCtx = React.createContext(null); function ToastProvider({ children }) { const [toasts, setToasts] = React.useState([]); const push = React.useCallback((msg, opts = {}) => { const id = Math.random(); setToasts(ts => [...ts, { id, msg, gold: opts.gold, icon: opts.icon }]); setTimeout(() => setToasts(ts => ts.filter(t => t.id !== id)), 3200); }, []); return ( {children}
{toasts.map(t => (
{t.icon ? : } {t.msg}
))}
); } const useToast = () => React.useContext(ToastCtx); // ============ MODAL ============ function Modal({ open, onClose, title, children, footer, wide }) { if (!open) return null; return (
e.stopPropagation()}>

{title}

{children}
{footer &&
{footer}
}
); } // ============ VIDEO PLAYER MOCK ============ function VideoPlayer({ aulaTitulo, email }) { return (
{email}
Fluência Contábil · {aulaTitulo}
); } // ============ EMPTY STATE ============ function EmptyState({ icon: IconEl = I.info, title, description, cta }) { return (
{title}
{description}
{cta}
); } // ============ TAG / STATUS PILLS ============ function StatusPill({ status }) { const map = { ativo: { tone: 'green', label: 'Ativo' }, expirado: { tone: 'gray', label: 'Expirado' }, cancelado: { tone: 'red', label: 'Cancelado' }, inadimplente: { tone: 'yellow', label: 'Inadimplente' }, 'inativo-14d':{ tone: 'yellow', label: 'Inativo 14d+' }, cortesia: { tone: 'blue', label: 'Cortesia' }, rascunho: { tone: 'gray', label: 'Rascunho' }, publicada: { tone: 'green', label: 'Publicada' }, }; const it = map[status] || { tone: 'gray', label: status }; return {it.label}; } // ============ Export to window ============ Object.assign(window, { I, Icon, BrandLockup, Sidebar, Card, Progress, Badge, ToastProvider, useToast, Modal, VideoPlayer, EmptyState, StatusPill, });