// Lightweight icon set — hand-drawn, consistent stroke. No external deps.
const Icon = {
  home: (s = 20, c = 'currentColor') => (
    <svg width={s} height={s} viewBox="0 0 24 24" fill="none" stroke={c} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M3 12l9-8 9 8" /><path d="M5 10v10h14V10" /></svg>
  ),
  path: (s = 20, c = 'currentColor') => (
    <svg width={s} height={s} viewBox="0 0 24 24" fill="none" stroke={c} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><circle cx="6" cy="5" r="2.5" /><circle cx="18" cy="12" r="2.5" /><circle cx="6" cy="19" r="2.5" /><path d="M8.5 5 Q 15 5, 15.5 12" strokeDasharray="2 2" /><path d="M15.5 12 Q 15 19, 8.5 19" strokeDasharray="2 2" /></svg>
  ),
  practice: (s = 20, c = 'currentColor') => (
    <svg width={s} height={s} viewBox="0 0 24 24" fill="none" stroke={c} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M12 2 L14 8 L20 8 L15 12 L17 19 L12 15 L7 19 L9 12 L4 8 L10 8 Z" /></svg>
  ),
  league: (s = 20, c = 'currentColor') => (
    <svg width={s} height={s} viewBox="0 0 24 24" fill="none" stroke={c} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M7 4h10v4a5 5 0 01-10 0V4z" /><path d="M4 4h3v2a3 3 0 01-3 3V4z M20 4h-3v2a3 3 0 003 3V4z" /><path d="M9 14v2h6v-2" /><path d="M8 20h8" /></svg>
  ),
  profile: (s = 20, c = 'currentColor') => (
    <svg width={s} height={s} viewBox="0 0 24 24" fill="none" stroke={c} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="8" r="4" /><path d="M4 21c0-4.4 3.6-8 8-8s8 3.6 8 8" /></svg>
  ),
  flame: (s = 20, c = '#FFC400') => (
    <svg width={s} height={s} viewBox="0 0 24 24" fill={c}><path d="M12 2 C 12 6, 16 8, 16 13 C 19 11, 19 14, 19 15 A 7 7 0 0 1 5 15 C 5 12, 7 11, 7 8 C 9 9, 10 7, 10 5 C 11 6, 12 5, 12 2 Z" /></svg>
  ),
  bolt: (s = 20, c = '#D4FF3A') => (
    <svg width={s} height={s} viewBox="0 0 24 24" fill={c}><path d="M13 2 L4 14 L11 14 L10 22 L20 9 L13 9 Z" /></svg>
  ),
  check: (s = 20, c = 'currentColor') => (
    <svg width={s} height={s} viewBox="0 0 24 24" fill="none" stroke={c} strokeWidth="3" strokeLinecap="round" strokeLinejoin="round"><path d="M4 12l5 5 11-11" /></svg>
  ),
  play: (s = 20, c = 'currentColor') => (
    <svg width={s} height={s} viewBox="0 0 24 24" fill={c}><path d="M7 4 L19 12 L7 20 Z" /></svg>
  ),
  lock: (s = 20, c = 'currentColor') => (
    <svg width={s} height={s} viewBox="0 0 24 24" fill="none" stroke={c} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><rect x="5" y="11" width="14" height="10" rx="2" /><path d="M8 11V7a4 4 0 018 0v4" /></svg>
  ),
  arrow_left: (s = 20, c = 'currentColor') => (
    <svg width={s} height={s} viewBox="0 0 24 24" fill="none" stroke={c} strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><path d="M15 6l-6 6 6 6" /></svg>
  ),
  arrow_up: (s = 14, c = '#7BED6F') => (
    <svg width={s} height={s} viewBox="0 0 24 24" fill="none" stroke={c} strokeWidth="3" strokeLinecap="round" strokeLinejoin="round"><path d="M12 19V5M5 12l7-7 7 7" /></svg>
  ),
  arrow_down: (s = 14, c = '#FF4B91') => (
    <svg width={s} height={s} viewBox="0 0 24 24" fill="none" stroke={c} strokeWidth="3" strokeLinecap="round" strokeLinejoin="round"><path d="M12 5v14M5 12l7 7 7-7" /></svg>
  ),
  arrow_right_bold: (s = 16, c = 'currentColor') => (
    <svg width={s} height={s} viewBox="0 0 24 24" fill="none" stroke={c} strokeWidth="3" strokeLinecap="round" strokeLinejoin="round"><path d="M5 12h14M13 6l6 6-6 6" /></svg>
  ),
  x: (s = 20, c = 'currentColor') => (
    <svg width={s} height={s} viewBox="0 0 24 24" fill="none" stroke={c} strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><path d="M6 6l12 12M18 6L6 18" /></svg>
  ),
  lightbulb: (s = 18, c = 'currentColor') => (
    <svg width={s} height={s} viewBox="0 0 24 24" fill="none" stroke={c} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M9 18h6M10 22h4" /><path d="M12 2a6 6 0 00-4 10.5c1 1 1.5 1.8 1.5 3.5h5c0-1.7.5-2.5 1.5-3.5A6 6 0 0012 2z" /></svg>
  ),
  target: (s = 18, c = 'currentColor') => (
    <svg width={s} height={s} viewBox="0 0 24 24" fill="none" stroke={c} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="9" /><circle cx="12" cy="12" r="5" /><circle cx="12" cy="12" r="1.5" fill={c} /></svg>
  ),
  trophy: (s = 18, c = 'currentColor') => (
    <svg width={s} height={s} viewBox="0 0 24 24" fill="none" stroke={c} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M7 4h10v4a5 5 0 01-10 0V4z" /><path d="M4 4h3v2a3 3 0 01-3 3V4z M20 4h-3v2a3 3 0 003 3V4z" /><path d="M9 14v2h6v-2M8 20h8" /></svg>
  ),
  hex: (s = 24, c = 'currentColor', fill = 'none') => (
    <svg width={s} height={s} viewBox="0 0 24 24" fill={fill} stroke={c} strokeWidth="2" strokeLinejoin="round"><path d="M12 2 L21 7 L21 17 L12 22 L3 17 L3 7 Z" /></svg>
  ),
  clock: (s = 14, c = 'currentColor') => (
    <svg width={s} height={s} viewBox="0 0 24 24" fill="none" stroke={c} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="9" /><path d="M12 7v5l3 2" /></svg>
  ),
};

// Bottom tab bar shared across screens
function TabBar({ active, onChange, accent = '#D4FF3A' }) {
  const tabs = [
    { id: 'home', icon: Icon.home, label: 'Home' },
    { id: 'path', icon: Icon.path, label: 'Path' },
    { id: 'practice', icon: Icon.practice, label: 'Practice' },
    { id: 'league', icon: Icon.league, label: 'Liga' },
    { id: 'profile', icon: Icon.profile, label: 'Profil' },
  ];
  return (
    <div style={{
      position: 'relative',
      display: 'flex',
      justifyContent: 'space-around',
      alignItems: 'flex-start',
      padding: '10px 6px 26px',
      background: 'rgba(11,15,20,0.85)',
      backdropFilter: 'blur(20px)',
      WebkitBackdropFilter: 'blur(20px)',
      borderTop: '1px solid rgba(255,255,255,0.06)',
    }}>
      {tabs.map(t => {
        const isActive = active === t.id;
        return (
          <button
            key={t.id}
            onClick={() => onChange(t.id)}
            style={{
              flex: 1,
              display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 4,
              background: 'transparent',
              border: 'none',
              cursor: 'pointer',
              padding: '6px 2px',
              position: 'relative',
              color: isActive ? accent : '#5A6472',
              transition: 'color 0.2s',
            }}
          >
            {isActive && (
              <div style={{
                position: 'absolute',
                top: -1, left: '50%', transform: 'translateX(-50%)',
                width: 26, height: 2, borderRadius: 2,
                background: accent,
                boxShadow: `0 0 10px ${accent}`,
              }} />
            )}
            <div style={{
              filter: isActive ? `drop-shadow(0 0 6px ${accent}66)` : 'none',
            }}>
              {t.icon(22, isActive ? accent : '#5A6472')}
            </div>
            <span style={{
              fontFamily: "'Inter', sans-serif",
              fontSize: 10,
              fontWeight: isActive ? 600 : 500,
              letterSpacing: 0.2,
            }}>{t.label}</span>
          </button>
        );
      })}
    </div>
  );
}

Object.assign(window, { Icon, TabBar });