// TATUS — карта застосунку. Спільний кіт: токени, іконки, фрейм iPhone,
// шапка, нижній таб-бар, AI-кнопка. Точно за реальними скрінами застосунку.

const C = {
  bg: '#0A0A0C',
  bgGlow: 'radial-gradient(120% 60% at 50% -8%, rgba(124,92,255,0.22) 0%, rgba(124,92,255,0.06) 34%, rgba(10,10,12,0) 62%)',
  surface: '#141318',
  surfaceHi: '#1B1A21',
  surfaceSoft: '#211F29',
  surfaceMut: '#0F0E13',
  border: 'rgba(255,255,255,0.07)',
  borderHi: 'rgba(255,255,255,0.12)',
  primary: '#7C5CFF',
  primaryBright: '#8B6CFF',
  primaryDeep: '#5B36E0',
  glow: 'rgba(124,92,255,0.45)',
  glowSoft: 'rgba(124,92,255,0.16)',
  violet: '#B5A0FF',
  orange: '#FB923C',
  orangeDeep: '#E07B1E',
  orangeSoft: 'rgba(251,146,60,0.14)',
  green: '#4ADE80',
  greenDeep: '#22C55E',
  greenSoft: 'rgba(74,222,128,0.14)',
  blue: '#60A5FA',
  pink: '#E879F9',
  teal: '#2DD4BF',
  red: '#FF4D4F',
  gold: '#FFD15C',
  text: '#FFFFFF',
  sub: '#8A8A93',
  faint: 'rgba(255,255,255,0.4)',
};
const FONT = "'Inter', -apple-system, system-ui, sans-serif";
const money = (n) => n.toLocaleString('uk-UA').replace(/,/g, ' ').replace(/\u00A0/g, ' ');

// ─── Icons ───────────────────────────────────────────────────────────────────
function Ic({ n, s = 22, c = C.text, sw = 1.9, style }) {
  const p = { width: s, height: s, viewBox: '0 0 24 24', fill: 'none', stroke: c, strokeWidth: sw, strokeLinecap: 'round', strokeLinejoin: 'round', style };
  switch (n) {
    case 'bell': return <svg {...p}><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9M13.7 21a2 2 0 0 1-3.4 0" /></svg>;
    case 'gear': return <svg {...p}><circle cx="12" cy="12" r="3.2" /><path d="M19.4 15a1.6 1.6 0 0 0 .3 1.8l.1.1a2 2 0 1 1-2.8 2.8l-.1-.1a1.6 1.6 0 0 0-1.8-.3 1.6 1.6 0 0 0-1 1.5V21a2 2 0 1 1-4 0v-.1a1.6 1.6 0 0 0-1-1.5 1.6 1.6 0 0 0-1.8.3l-.1.1a2 2 0 1 1-2.8-2.8l.1-.1a1.6 1.6 0 0 0 .3-1.8 1.6 1.6 0 0 0-1.5-1H3a2 2 0 1 1 0-4h.1a1.6 1.6 0 0 0 1.5-1 1.6 1.6 0 0 0-.3-1.8l-.1-.1a2 2 0 1 1 2.8-2.8l.1.1a1.6 1.6 0 0 0 1.8.3H9a1.6 1.6 0 0 0 1-1.5V3a2 2 0 1 1 4 0v.1a1.6 1.6 0 0 0 1 1.5 1.6 1.6 0 0 0 1.8-.3l.1-.1a2 2 0 1 1 2.8 2.8l-.1.1a1.6 1.6 0 0 0-.3 1.8V9a1.6 1.6 0 0 0 1.5 1H21a2 2 0 1 1 0 4h-.1a1.6 1.6 0 0 0-1.5 1z" /></svg>;
    case 'plus': return <svg {...p}><path d="M12 5v14M5 12h14" /></svg>;
    case 'chevron': return <svg {...p}><path d="M9 18l6-6-6-6" /></svg>;
    case 'down': return <svg {...p}><path d="M6 9l6 6 6-6" /></svg>;
    case 'up': return <svg {...p}><path d="M18 15l-6-6-6 6" /></svg>;
    case 'cal-plus': return <svg {...p}><rect x="3" y="4" width="18" height="18" rx="3" /><path d="M16 2v4M8 2v4M3 10h18M12 14v4M10 16h4" /></svg>;
    case 'cal-rec': return <svg {...p}><rect x="3" y="4" width="18" height="18" rx="3" /><path d="M16 2v4M8 2v4M3 10h18" /><circle cx="12" cy="15.5" r="2.6" /><path d="M12 14.2v1.4l.9.7" /></svg>;
    case 'users': return <svg {...p}><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2" /><circle cx="9" cy="7" r="4" /><path d="M23 21v-2a4 4 0 0 0-3-3.9M16 3.1a4 4 0 0 1 0 7.8" /></svg>;
    case 'user-plus': return <svg {...p}><path d="M14 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" /><circle cx="8" cy="7" r="4" /><path d="M19 8v6M22 11h-6" /></svg>;
    case 'clock': return <svg {...p}><circle cx="12" cy="12" r="9" /><path d="M12 7v5l3 2" /></svg>;
    case 'home': return <svg {...p}><path d="M3 9.5L12 3l9 6.5V21a1 1 0 0 1-1 1h-5v-7H9v7H4a1 1 0 0 1-1-1z" /></svg>;
    case 'wallet': return <svg {...p}><rect x="2.5" y="6" width="19" height="14" rx="3.2" /><path d="M2.5 10h19M16 15h2.5" /></svg>;
    case 'chat': return <svg {...p}><path d="M21 11.5a8.4 8.4 0 0 1-9 8.4 9.9 9.9 0 0 1-4.3-1L3 20l1.3-3.9A8.4 8.4 0 0 1 12 3a8.4 8.4 0 0 1 9 8.5z" /></svg>;
    case 'trend': return <svg {...p}><path d="M23 6l-9.5 9.5-5-5L1 18" /><path d="M17 6h6v6" /></svg>;
    case 'edit': return <svg {...p}><path d="M12 20h9M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4z" /></svg>;
    case 'x': return <svg {...p}><path d="M18 6L6 18M6 6l12 12" /></svg>;
    case 'back': return <svg {...p}><path d="M19 12H5M12 19l-7-7 7-7" /></svg>;
    case 'check': return <svg {...p}><path d="M20 6L9 17l-5-5" /></svg>;
    case 'check2': return <svg {...p}><path d="M18 7L8.5 16.5 4 12M22 7l-9 9" /></svg>;
    case 'info': return <svg {...p}><circle cx="12" cy="12" r="9" /><path d="M12 16v-4M12 8h.01" /></svg>;
    case 'send': return <svg {...p}><path d="M22 2L11 13M22 2l-7 20-4-9-9-4z" /></svg>;
    case 'calc': return <svg {...p}><rect x="4" y="2" width="16" height="20" rx="2.5" /><path d="M8 6h8M8 10h.01M12 10h.01M16 10h.01M8 14h.01M12 14h.01M16 14v4M8 18h4" /></svg>;
    case 'flask': return <svg {...p}><path d="M9 3h6M10 3v5L5 18.5A2 2 0 0 0 6.8 21.5h10.4A2 2 0 0 0 19 18.5L14 8V3" /><path d="M7.5 14h9" /></svg>;
    case 'grid': return <svg {...p}><rect x="3" y="3" width="7" height="7" rx="1.6" /><rect x="14" y="3" width="7" height="7" rx="1.6" /><rect x="3" y="14" width="7" height="7" rx="1.6" /><rect x="14" y="14" width="7" height="7" rx="1.6" /></svg>;
    case 'headset': return <svg {...p}><path d="M4 14v-2a8 8 0 0 1 16 0v2" /><rect x="2.5" y="13.5" width="4" height="7" rx="1.8" /><rect x="17.5" y="13.5" width="4" height="7" rx="1.8" /><path d="M20 19.5a3 3 0 0 1-3 2.5h-2" /></svg>;
    case 'chats': return <svg {...p}><path d="M8 13.5a6.5 6.5 0 1 0-6-4l-1 4 4-1a6.6 6.6 0 0 0 3 1z" /><path d="M14.5 9.5A6.5 6.5 0 0 1 22 16a6.4 6.4 0 0 1-1 3.5l1 3.5-3.5-1a6.5 6.5 0 0 1-9-5" /></svg>;
    case 'trash': return <svg {...p}><path d="M3 6h18M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6M10 11v6M14 11v6" /></svg>;
    case 'spark': return <svg {...p} fill={c} stroke="none"><path d="M12 2l1.7 5.6L19 9l-5.3 1.4L12 16l-1.7-5.6L5 9l5.3-1.4z" /><path d="M19 13l.7 2.3L22 16l-2.3.7L19 19l-.7-2.3L16 16l2.3-.7z" /></svg>;
    case 'search': return <svg {...p}><circle cx="11" cy="11" r="7" /><path d="M21 21l-4.3-4.3" /></svg>;
    case 'pin': return <svg {...p}><path d="M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0z" /><circle cx="12" cy="10" r="2.6" /></svg>;
    case 'coin': return <svg {...p}><circle cx="12" cy="12" r="9" /><path d="M12 7v10M9.5 9.5h4a1.5 1.5 0 0 1 0 3H9.5M9.5 12.5h4.5a1.5 1.5 0 0 1 0 3H9.5" /></svg>;
    case 'receipt': return <svg {...p}><path d="M5 3v18l2.5-1.5L10 21l2-1.5 2 1.5 2.5-1.5L19 21V3H5z" /><path d="M8.5 8h7M8.5 12h7M8.5 16h4" /></svg>;
    case 'globe': return <svg {...p}><circle cx="12" cy="12" r="9" /><path d="M3 12h18M12 3c2.5 2.7 2.5 15.3 0 18M12 3c-2.5 2.7-2.5 15.3 0 18" /></svg>;
    case 'moon': return <svg {...p}><path d="M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8z" /></svg>;
    case 'logout': return <svg {...p}><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4M16 17l5-5-5-5M21 12H9" /></svg>;
    case 'shield': return <svg {...p}><path d="M12 2l8 3v6c0 5-3.5 8.5-8 11-4.5-2.5-8-6-8-11V5l8-3z" /><path d="M9 12l2 2 4-4" /></svg>;
    case 'tg': return <svg {...p} fill={c} stroke="none"><path d="M21.8 4.3 18.5 20c-.25 1.1-.9 1.37-1.83.85l-5.05-3.72-2.44 2.35c-.27.27-.5.5-1 .5l.36-5.12L18.1 6.5c.4-.36-.09-.56-.63-.2L6.94 13.2 2 11.66c-1.07-.34-1.1-1.07.22-1.58l18.3-7.06c.9-.33 1.68.2 1.28 1.28z" /></svg>;
    case 'ig': return <svg {...p}><rect x="3" y="3" width="18" height="18" rx="5.2" /><circle cx="12" cy="12" r="4" /><circle cx="17.4" cy="6.6" r="1.1" fill={c} stroke="none" /></svg>;
    case 'diamond': return <svg {...p}><path d="M6 3h12l3 6-9 12L3 9z" /><path d="M3 9h18M9 3 6.5 9 12 21M15 3l2.5 6L12 21" /></svg>;
    case 'mail-open': return <svg {...p}><path d="M3 9l9-6 9 6v10a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" /><path d="M3 9l9 6 9-6" /></svg>;
    case 'sliders': return <svg {...p}><path d="M4 6h10M18 6h2M4 12h2M10 12h10M4 18h7M15 18h5" /><circle cx="16" cy="6" r="2" /><circle cx="8" cy="12" r="2" /><circle cx="13" cy="18" r="2" /></svg>;
    case 'flag': return <svg {...p}><path d="M4 22V4M4 4l5-2 6 3 5-2v12l-5 2-6-3-5 2" /></svg>;
    case 'mic': return <svg {...p}><rect x="9" y="2" width="6" height="12" rx="3" /><path d="M5 11a7 7 0 0 0 14 0M12 18v4" /></svg>;
    case 'wave': return <svg {...p}><path d="M4 12h2M8 8v8M12 4v16M16 8v8M20 12h0" /></svg>;
    default: return null;
  }
}

// ─── Avatar ──────────────────────────────────────────────────────────────────
function Av({ name, size = 44, color = C.primary, fs }) {
  return (
    <div style={{
      width: size, height: size, borderRadius: '50%', flexShrink: 0,
      background: `linear-gradient(150deg, ${color}, ${color}cc)`,
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      color: '#fff', fontWeight: 700, fontSize: fs || size * 0.42,
    }}>{name}</div>
  );
}

function ProBadge({ small }) {
  return (
    <span style={{
      fontSize: small ? 9.5 : 11, fontWeight: 800, letterSpacing: 0.6, color: '#fff',
      background: `linear-gradient(135deg, ${C.primaryBright}, ${C.primaryDeep})`,
      padding: small ? '2px 6px' : '3px 8px', borderRadius: 7, lineHeight: 1,
      boxShadow: `0 3px 10px ${C.glowSoft}`,
    }}>PRO</span>
  );
}

// ─── Generic atoms ─────────────────────────────────────────────────────────────
function IconBtn({ n, dot, c = C.text, onClick }) {
  return (
    <button onClick={onClick} style={{
      position: 'relative', width: 44, height: 44, borderRadius: 13, cursor: 'pointer',
      background: C.surfaceHi, border: `1px solid ${C.border}`,
      display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0,
    }}>
      <Ic n={n} s={20} c={c} sw={1.9} />
      {dot && <span style={{ position: 'absolute', top: 9, right: 10, width: 8, height: 8, borderRadius: 4, background: C.primaryBright, border: `2px solid ${C.surfaceHi}` }} />}
    </button>
  );
}

function Card({ children, style, pad = 18, r = 22 }) {
  return <div style={{ background: C.surface, border: `1px solid ${C.border}`, borderRadius: r, padding: pad, ...style }}>{children}</div>;
}

// App header (Соломія + bell + gear)
function AppHeader({ name = 'Соломія', pro = false }) {
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '0 18px' }}>
      <Av name={name[0]} size={40} fs={17} />
      <div style={{ flex: 1, minWidth: 0, display: 'flex', alignItems: 'center', gap: 8 }}>
        <span style={{ fontSize: 20, fontWeight: 800, letterSpacing: -0.4, whiteSpace: 'nowrap' }}>{name}</span>
        {pro && <ProBadge />}
      </div>
      <div style={{ display: 'flex', gap: 9 }}>
        <IconBtn n="bell" />
        <IconBtn n="gear" />
      </div>
    </div>
  );
}

// Top bar with back + title (detail screens)
function TopBar({ title, right }) {
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '0 18px' }}>
      <button style={{ width: 42, height: 42, borderRadius: 13, background: C.surfaceHi, border: `1px solid ${C.border}`, cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
        <Ic n="back" s={20} c={C.text} />
      </button>
      <div style={{ flex: 1, textAlign: 'center', fontSize: 21, fontWeight: 800, letterSpacing: -0.4 }}>{title}</div>
      {right || <div style={{ width: 42 }} />}
    </div>
  );
}

function Segmented({ opts, value, accent = 'violet', size = 'lg' }) {
  const grad = accent === 'orange' ? `linear-gradient(150deg, #FBA94C, ${C.orangeDeep})` : `linear-gradient(150deg, ${C.primaryBright}, ${C.primaryDeep})`;
  const sh = accent === 'orange' ? 'rgba(251,146,60,0.35)' : C.glow;
  return (
    <div style={{ display: 'flex', background: C.surface, border: `1px solid ${C.border}`, borderRadius: size === 'lg' ? 15 : 13, padding: 4, gap: 4 }}>
      {opts.map((o) => {
        const on = o === value;
        return (
          <div key={o} style={{
            flex: 1, height: size === 'lg' ? 42 : 36, borderRadius: size === 'lg' ? 11 : 10,
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            background: on ? grad : 'transparent', boxShadow: on ? `0 6px 16px ${sh}` : 'none',
            color: on ? '#fff' : C.sub, fontSize: size === 'lg' ? 14.5 : 13.5, fontWeight: on ? 700 : 600, letterSpacing: -0.2,
          }}>{o}</div>
        );
      })}
    </div>
  );
}

function SecHead({ title, action }) {
  return (
    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 13 }}>
      <div style={{ fontSize: 20, fontWeight: 800, letterSpacing: -0.4 }}>{title}</div>
      {action && <span style={{ color: C.violet, fontSize: 14, fontWeight: 700, display: 'flex', alignItems: 'center', gap: 1 }}>{action}<Ic n="chevron" s={15} c={C.violet} /></span>}
    </div>
  );
}

// Primary gradient button
function PrimaryBtn({ icon, label, style }) {
  return (
    <button style={{
      height: 54, borderRadius: 16, cursor: 'pointer', border: 'none', width: '100%',
      background: `linear-gradient(135deg, ${C.primaryBright}, ${C.primaryDeep})`, boxShadow: `0 12px 26px ${C.glow}`,
      color: '#fff', fontSize: 16.5, fontWeight: 700, display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 9, ...style,
    }}>
      {icon && <Ic n={icon} s={20} c="#fff" sw={2.4} />}{label}
    </button>
  );
}

// ─── Bottom nav (4 tabs) ───────────────────────────────────────────────────────
function BottomNav({ active = 'home', inboxBadge = 1 }) {
  const items = [
    { id: 'home', label: 'Головна', icon: 'home' },
    { id: 'an', label: 'Аналітика', icon: 'wallet' },
    { id: 'cl', label: 'Клієнти', icon: 'users' },
  ];
  return (
    <div style={{
      position: 'absolute', left: 0, right: 0, bottom: 0, zIndex: 40,
      paddingTop: 14, paddingBottom: 22,
      background: 'linear-gradient(to top, rgba(10,10,12,0.99) 70%, rgba(10,10,12,0))',
      backdropFilter: 'blur(14px)', WebkitBackdropFilter: 'blur(14px)',
    }}>
      <div style={{ display: 'flex', justifyContent: 'space-around', alignItems: 'flex-start' }}>
        {items.map((it) => {
          const on = it.id === active;
          return (
            <div key={it.id} style={{ position: 'relative', display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 5, width: 72 }}>
              <div style={{ position: 'relative' }}>
                <Ic n={it.icon} s={23} c={on ? C.primaryBright : C.sub} sw={on ? 2.2 : 1.8} />
                {it.badge ? <span style={{ position: 'absolute', top: -4, right: -7, minWidth: 16, height: 16, padding: '0 4px', borderRadius: 8, background: C.red, color: '#fff', fontSize: 10.5, fontWeight: 800, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>{it.badge}</span> : null}
              </div>
              <span style={{ fontSize: 11, fontWeight: on ? 700 : 500, color: on ? C.primaryBright : C.sub }}>{it.label}</span>
            </div>
          );
        })}
      </div>
    </div>
  );
}

// AI floating action button (disabled for landing build)
function AIFab() {
  return null;
}
function AIFab_unused({ bottom = 88, right = 18 }) {
  return (
    <div style={{ position: 'absolute', bottom, right, zIndex: 45 }}>
      <div style={{ position: 'relative' }}>
        <div style={{
          height: 50, padding: '0 20px 0 18', borderRadius: 26, cursor: 'pointer',
          background: `linear-gradient(135deg, ${C.primaryBright}, ${C.primaryDeep})`, boxShadow: `0 12px 28px ${C.glow}`,
          display: 'flex', alignItems: 'center', gap: 7, paddingRight: 20, paddingLeft: 16,
        }}>
          <Ic n="spark" s={20} c="#fff" />
          <span style={{ color: '#fff', fontSize: 16, fontWeight: 800, letterSpacing: 0.2 }}>AI</span>
        </div>
        <span style={{ position: 'absolute', top: -2, right: -2, width: 13, height: 13, borderRadius: 7, background: C.green, border: `2.5px solid ${C.bg}` }} />
      </div>
    </div>
  );
}

// ─── iPhone frame ──────────────────────────────────────────────────────────────
// Status bar + dynamic island + home indicator. Content flows (no scroll) — set
// artboard height to fit. glow = purple top wash for app screens.
function StatusBar() {
  return (
    <div style={{ height: 54, display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '0 30px 0 34px', position: 'relative', zIndex: 20 }}>
      <span style={{ fontSize: 16, fontWeight: 700, color: '#fff', letterSpacing: 0.3, fontVariantNumeric: 'tabular-nums' }}>9:41</span>
      <div style={{ display: 'flex', alignItems: 'center', gap: 7 }}>
        <svg width="18" height="12" viewBox="0 0 18 12"><rect x="0" y="7.5" width="3" height="4.5" rx="0.6" fill="#fff" /><rect x="4.5" y="5" width="3" height="7" rx="0.6" fill="#fff" /><rect x="9" y="2.5" width="3" height="9.5" rx="0.6" fill="#fff" /><rect x="13.5" y="0" width="3" height="12" rx="0.6" fill="#fff" /></svg>
        <svg width="16" height="12" viewBox="0 0 16 12"><path d="M8 3C10.1 3 12 3.8 13.4 5.2L14.5 4.1C12.8 2.4 10.5 1.3 8 1.3S3.2 2.4 1.5 4.1L2.6 5.2C4 3.8 5.9 3 8 3Z" fill="#fff" /><path d="M8 6.4C9.3 6.4 10.4 6.9 11.2 7.7L12.3 6.6C11.1 5.5 9.6 4.8 8 4.8S4.9 5.5 3.7 6.6L4.8 7.7C5.6 6.9 6.7 6.4 8 6.4Z" fill="#fff" /><circle cx="8" cy="10" r="1.4" fill="#fff" /></svg>
        <svg width="25" height="12" viewBox="0 0 25 12"><rect x="0.5" y="0.5" width="21" height="11" rx="3" stroke="#fff" strokeOpacity="0.4" fill="none" /><rect x="2" y="2" width="18" height="8" rx="1.8" fill="#fff" /><path d="M23 4v4c.7-.3 1.2-1 1.2-2S23.7 4.3 23 4z" fill="#fff" fillOpacity="0.5" /></svg>
      </div>
    </div>
  );
}

function Phone({ children, glow = true }) {
  return (
    <div style={{
      width: '100%', height: '100%', position: 'relative', overflow: 'hidden',
      background: C.bg, color: C.text, fontFamily: FONT, WebkitFontSmoothing: 'antialiased',
    }}>
      {glow && <div style={{ position: 'absolute', top: 0, left: 0, right: 0, height: 380, background: C.bgGlow, pointerEvents: 'none', zIndex: 0 }} />}
      {/* dynamic island */}
      <div style={{ position: 'absolute', top: 13, left: '50%', transform: 'translateX(-50%)', width: 118, height: 34, borderRadius: 18, background: '#000', zIndex: 50 }} />
      <div style={{ position: 'relative', zIndex: 1, minHeight: '100%' }}>
        <StatusBar />
        {children}
      </div>
      {/* home indicator */}
      <div style={{ position: 'absolute', bottom: 7, left: '50%', transform: 'translateX(-50%)', width: 134, height: 5, borderRadius: 3, background: 'rgba(255,255,255,0.5)', zIndex: 60 }} />
    </div>
  );
}

Object.assign(window, {
  C, FONT, money, Ic, Av, ProBadge, IconBtn, Card, AppHeader, TopBar,
  Segmented, SecHead, PrimaryBtn, BottomNav, AIFab, StatusBar, Phone,
});