/* ─────────────────────────────────────────────────
   Tab Bar Variants — TabBarV01..TabBarV20
   Each one is a complete replacement for RoseTabBar.
   Signature: ({ active, onChange }) => JSX
   The 4 tabs are always: home · classes · online · profile
   ───────────────────────────────────────────────── */

const TABS = [
  { id:"home",    label:"йога",    short:"йога",  letter:"Й", num:"01", glyph:"✿", emoji:"🧘", icon:"lotus" },
  { id:"classes", label:"занятия", short:"клас.", letter:"З", num:"02", glyph:"◐", emoji:"📅", icon:"calendar" },
  { id:"online",  label:"онлайн",  short:"online",letter:"О", num:"03", glyph:"▶", emoji:"▶",  icon:"play" },
  { id:"profile", label:"профиль", short:"я",     letter:"Я", num:"04", glyph:"☺", emoji:"😊", icon:"user" },
];

/* ============ V01 — ORIGINAL (reference) ============ */
function TabBarV01({active,onChange}){
  return <RoseTabBar active={active} onChange={onChange}/>;
}

/* ============ V02 — FLOATING PILL (centered, not full-width) ============ */
function TabBarV02({active,onChange}){
  return (
    <div style={{position:"absolute",left:0,right:0,bottom:14,display:"flex",justifyContent:"center",pointerEvents:"none"}}>
      <div style={{display:"flex",gap:4,padding:6,background:"#fff",borderRadius:999,boxShadow:"0 8px 0 rgba(233,30,140,0.18), 0 0 0 1px rgba(233,30,140,0.1)",pointerEvents:"auto",border:"1px solid rgba(233,30,140,0.15)"}}>
        {TABS.map(t=>{
          const a = t.id===active;
          return (
            <button key={t.id} onClick={()=>onChange(t.id)} style={{
              border:"none",cursor:"pointer",
              padding:a?"10px 18px":"10px 12px",
              borderRadius:999,
              background:a?"#e91e8c":"transparent",
              color:a?"#fff":"#9d6b8a",
              display:"flex",alignItems:"center",gap:6,
              fontFamily:"'Nunito',sans-serif",fontWeight:900,fontSize:13,letterSpacing:"-0.01em",
            }}>
              <TabIcon kind={t.icon} color={a?"#fff":"#9d6b8a"}/>
              {a && <span>{t.label}</span>}
            </button>
          );
        })}
      </div>
    </div>
  );
}

/* ============ V03 — DOCK (centered, glassy) ============ */
function TabBarV03({active,onChange}){
  return (
    <div style={{position:"absolute",left:0,right:0,bottom:18,display:"flex",justifyContent:"center"}}>
      <div style={{display:"flex",gap:14,padding:"12px 20px",background:"rgba(255,255,255,0.8)",backdropFilter:"blur(12px)",borderRadius:28,boxShadow:"0 10px 0 rgba(233,30,140,0.15)",border:"1.5px solid rgba(255,255,255,0.9)"}}>
        {TABS.map(t=>{
          const a = t.id===active;
          return (
            <button key={t.id} onClick={()=>onChange(t.id)} style={{
              border:"none",cursor:"pointer",
              width:48,height:48,borderRadius:16,
              background:a?"#e91e8c":"transparent",
              color:a?"#fff":"#9d6b8a",
              display:"grid",placeItems:"center",
              boxShadow:a?"0 4px 0 rgba(233,30,140,0.3)":"none",
              transform:a?"translateY(-4px)":"none",transition:"all .2s",
            }}>
              <TabIcon kind={t.icon} color={a?"#fff":"#9d6b8a"}/>
            </button>
          );
        })}
      </div>
    </div>
  );
}

/* ============ V04 — SEGMENTED PILL (text-only, centered) ============ */
function TabBarV04({active,onChange}){
  return (
    <div style={{position:"absolute",left:0,right:0,bottom:20,display:"flex",justifyContent:"center"}}>
      <div style={{display:"flex",padding:4,background:"#fde2ec",borderRadius:999,border:"1px solid #f0c8dc"}}>
        {TABS.map(t=>{
          const a = t.id===active;
          return (
            <button key={t.id} onClick={()=>onChange(t.id)} style={{
              border:"none",cursor:"pointer",
              padding:"8px 14px",borderRadius:999,
              background:a?"#fff":"transparent",
              color:a?"#e91e8c":"#9d6b8a",
              fontFamily:"'Nunito',sans-serif",fontWeight:900,fontSize:12,letterSpacing:"-0.01em",
              boxShadow:a?"0 2px 0 rgba(233,30,140,0.12)":"none",
            }}>{t.label}</button>
          );
        })}
      </div>
    </div>
  );
}

/* ============ V05 — FAB CENTER (4 tabs around big center button) ============ */
function TabBarV05({active,onChange}){
  return (
    <div style={{position:"absolute",left:0,right:0,bottom:0,height:84,background:"#fff",borderTop:"2px solid #e91e8c"}}>
      <div style={{display:"flex",height:"100%"}}>
        {[TABS[0],TABS[1]].map(t=>{
          const a = t.id===active;
          return (
            <div key={t.id} onClick={()=>onChange(t.id)} style={{flex:1,display:"flex",flexDirection:"column",alignItems:"center",justifyContent:"center",gap:4,cursor:"pointer",color:a?"#e91e8c":"#cba9bd"}}>
              <TabIcon kind={t.icon} color={a?"#e91e8c":"#cba9bd"}/>
              <span style={{fontFamily:"'Nunito',sans-serif",fontWeight:900,fontSize:11}}>{t.label}</span>
            </div>
          );
        })}
        <div style={{width:80}}/>
        {[TABS[2],TABS[3]].map(t=>{
          const a = t.id===active;
          return (
            <div key={t.id} onClick={()=>onChange(t.id)} style={{flex:1,display:"flex",flexDirection:"column",alignItems:"center",justifyContent:"center",gap:4,cursor:"pointer",color:a?"#e91e8c":"#cba9bd"}}>
              <TabIcon kind={t.icon} color={a?"#e91e8c":"#cba9bd"}/>
              <span style={{fontFamily:"'Nunito',sans-serif",fontWeight:900,fontSize:11}}>{t.label}</span>
            </div>
          );
        })}
      </div>
      {/* Big center FAB - acts as "записаться" */}
      <button style={{position:"absolute",left:"50%",top:-22,transform:"translateX(-50%)",width:64,height:64,borderRadius:"50%",background:"#e91e8c",color:"#fff",border:"4px solid #fff",cursor:"pointer",fontFamily:"'Nunito',sans-serif",fontWeight:900,fontSize:28,boxShadow:"0 6px 0 rgba(233,30,140,0.3)"}}>＋</button>
    </div>
  );
}

/* ============ V06 — NUMBERS ONLY (brutalist, hot pink) ============ */
function TabBarV06({active,onChange}){
  return (
    <div style={{position:"absolute",left:0,right:0,bottom:0,height:64,background:"#e91e8c",display:"flex",borderTop:"3px solid #2d2d2d"}}>
      {TABS.map((t,i)=>{
        const a = t.id===active;
        return (
          <div key={t.id} onClick={()=>onChange(t.id)} style={{
            flex:1,display:"flex",alignItems:"center",justifyContent:"center",gap:8,cursor:"pointer",
            background:a?"#2d2d2d":"transparent",
            color:a?"#fff":"rgba(255,255,255,0.85)",
            borderLeft:i?"1.5px solid rgba(255,255,255,0.3)":"none",
          }}>
            <span style={{fontFamily:"'Nunito',sans-serif",fontWeight:900,fontSize:24,letterSpacing:"-0.04em",lineHeight:1}}>{t.num}</span>
            <span style={{fontFamily:"'Space Mono',monospace",fontSize:9,fontWeight:700,letterSpacing:"0.16em",textTransform:"uppercase"}}>{t.label.slice(0,4)}</span>
          </div>
        );
      })}
    </div>
  );
}

/* ============ V07 — CAPSULE (rounded ends, centered bubble for active) ============ */
function TabBarV07({active,onChange}){
  const idx = TABS.findIndex(t=>t.id===active);
  return (
    <div style={{position:"absolute",left:14,right:14,bottom:18,height:64,background:"#fff",borderRadius:32,boxShadow:"0 6px 0 rgba(233,30,140,0.18)",border:"1px solid #f0c8dc",position:"absolute",display:"flex",alignItems:"center",padding:"0 6px"}}>
      {/* sliding bubble */}
      <div style={{
        position:"absolute",
        top:6,bottom:6,
        left:`calc(${(idx/4)*100}% + 6px)`,
        width:`calc(${100/4}% - 12px)`,
        background:"#e91e8c",borderRadius:24,
        boxShadow:"0 3px 0 rgba(233,30,140,0.3)",
        transition:"left .25s cubic-bezier(.2,.9,.3,1.4)",
      }}/>
      {TABS.map((t,i)=>{
        const a = t.id===active;
        return (
          <div key={t.id} onClick={()=>onChange(t.id)} style={{flex:1,position:"relative",zIndex:1,display:"flex",flexDirection:"column",alignItems:"center",justifyContent:"center",cursor:"pointer",gap:2}}>
            <TabIcon kind={t.icon} color={a?"#fff":"#9d6b8a"}/>
            <span style={{fontFamily:"'Nunito',sans-serif",fontWeight:900,fontSize:10,color:a?"#fff":"#9d6b8a",letterSpacing:"-0.01em"}}>{t.label}</span>
          </div>
        );
      })}
    </div>
  );
}

/* ============ V08 — STICKER STACK (Y2K, rotated tabs) ============ */
function TabBarV08({active,onChange}){
  const colors = ["#fde68a","#a7f3d0","#c4b5fd","#f9a8d4"];
  return (
    <div style={{position:"absolute",left:0,right:0,bottom:0,height:80,background:"#fde2ec",display:"flex",alignItems:"flex-end",justifyContent:"center",gap:8,padding:"0 12px 8px",borderTop:"2px dashed #e91e8c"}}>
      {TABS.map((t,i)=>{
        const a = t.id===active;
        const rot = [-2,1.5,-1.5,2][i];
        return (
          <button key={t.id} onClick={()=>onChange(t.id)} style={{
            border:"2px solid #2d2d2d",cursor:"pointer",
            padding:a?"12px 14px":"8px 10px",
            background:a?"#e91e8c":colors[i],
            color:a?"#fff":"#2d2d2d",
            fontFamily:"'Nunito',sans-serif",fontWeight:900,fontSize:a?14:12,
            transform:`rotate(${rot}deg)${a?" translateY(-6px)":""}`,
            boxShadow:"3px 3px 0 #2d2d2d",
            display:"flex",flexDirection:"column",alignItems:"center",gap:2,
            letterSpacing:"-0.01em",
            transition:"all .15s",
          }}>
            <span style={{fontFamily:"'Nunito',sans-serif",fontWeight:900,fontSize:14}}>{t.glyph}</span>
            <span>{t.label}</span>
          </button>
        );
      })}
    </div>
  );
}

/* ============ V09 — DOTS ONLY (minimal zen) ============ */
function TabBarV09({active,onChange}){
  return (
    <div style={{position:"absolute",left:0,right:0,bottom:0,height:64,background:"#fff",display:"flex",alignItems:"center",justifyContent:"center",gap:32,borderTop:"1px solid #f0c8dc"}}>
      {TABS.map(t=>{
        const a = t.id===active;
        return (
          <div key={t.id} onClick={()=>onChange(t.id)} style={{cursor:"pointer",display:"flex",flexDirection:"column",alignItems:"center",gap:6}}>
            <div style={{
              width:a?14:8,height:a?14:8,borderRadius:"50%",
              background:a?"#e91e8c":"#f0c8dc",
              transition:"all .2s",
            }}/>
            {a && <div style={{position:"absolute",bottom:6,fontFamily:"'Space Mono',monospace",fontSize:9,color:"#9d6b8a",letterSpacing:"0.16em",textTransform:"uppercase"}}>{t.label}</div>}
          </div>
        );
      })}
    </div>
  );
}

/* ============ V10 — VERTICAL LABELS (text bottom-stack) ============ */
function TabBarV10({active,onChange}){
  return (
    <div style={{position:"absolute",left:0,right:0,bottom:0,height:62,background:"#fff",display:"flex",borderTop:"1.5px solid #e91e8c"}}>
      {TABS.map((t,i)=>{
        const a = t.id===active;
        return (
          <div key={t.id} onClick={()=>onChange(t.id)} style={{
            flex:1,display:"flex",alignItems:"center",justifyContent:"center",gap:8,cursor:"pointer",
            borderLeft:i?"1px solid #fce4ec":"none",
            background:a?"linear-gradient(180deg, #fff5fa, #fde2ec)":"transparent",
            position:"relative",
          }}>
            {a && <div style={{position:"absolute",left:0,right:0,top:0,height:3,background:"#e91e8c"}}/>}
            <TabIcon kind={t.icon} color={a?"#e91e8c":"#cba9bd"}/>
            <span style={{fontFamily:"'Nunito',sans-serif",fontWeight:900,fontSize:13,color:a?"#e91e8c":"#9d6b8a",letterSpacing:"-0.01em"}}>{t.label}</span>
          </div>
        );
      })}
    </div>
  );
}

/* ============ V11 — TOP BAR (move it to TOP instead of bottom) ============ */
function TabBarV11({active,onChange}){
  return (
    <div style={{position:"absolute",left:0,right:0,top:0,height:54,background:"#e91e8c",display:"flex",zIndex:5}}>
      {TABS.map((t,i)=>{
        const a = t.id===active;
        return (
          <div key={t.id} onClick={()=>onChange(t.id)} style={{
            flex:1,display:"flex",alignItems:"center",justifyContent:"center",gap:6,cursor:"pointer",
            color:"#fff",
            background:a?"rgba(255,255,255,0.2)":"transparent",
            borderBottom:a?"3px solid #fff":"3px solid transparent",
          }}>
            <TabIcon kind={t.icon} color="#fff"/>
            {a && <span style={{fontFamily:"'Nunito',sans-serif",fontWeight:900,fontSize:13,letterSpacing:"-0.01em"}}>{t.label}</span>}
          </div>
        );
      })}
    </div>
  );
}

/* ============ V12 — EMOJI BIG (oversized icons, no labels) ============ */
function TabBarV12({active,onChange}){
  const colors = {home:"#f9a8d4",classes:"#a7f3d0",online:"#c4b5fd",profile:"#fde68a"};
  return (
    <div style={{position:"absolute",left:0,right:0,bottom:0,height:80,background:"#fff",display:"flex",alignItems:"center",justifyContent:"space-around",padding:"0 16px",borderTop:"1.5px solid #f0c8dc"}}>
      {TABS.map(t=>{
        const a = t.id===active;
        return (
          <button key={t.id} onClick={()=>onChange(t.id)} style={{
            border:"none",cursor:"pointer",
            width:a?60:48,height:a?60:48,borderRadius:"50%",
            background:a?colors[t.id]:"#fff",
            display:"grid",placeItems:"center",
            boxShadow:a?"0 5px 0 rgba(233,30,140,0.2)":"none",
            border:a?"none":"1px dashed #f0c8dc",
            transform:a?"translateY(-8px)":"none",transition:"all .2s",
            fontSize:a?28:20,
          }}>
            <TabIcon kind={t.icon} color={a?"#2d2d2d":"#9d6b8a"}/>
          </button>
        );
      })}
    </div>
  );
}

/* ============ V13 — UNDERLINE (editorial, text-led) ============ */
function TabBarV13({active,onChange}){
  return (
    <div style={{position:"absolute",left:0,right:0,bottom:0,height:60,background:"#fff",display:"flex",justifyContent:"center",alignItems:"center",gap:28,borderTop:"1px solid #2d2d2d"}}>
      {TABS.map(t=>{
        const a = t.id===active;
        return (
          <div key={t.id} onClick={()=>onChange(t.id)} style={{cursor:"pointer",position:"relative",padding:"6px 0"}}>
            <span style={{
              fontFamily:"'Nunito',sans-serif",
              fontWeight:a?900:700,
              fontSize:a?17:14,
              color:a?"#2d2d2d":"#9d6b8a",
              fontStyle:a?"italic":"normal",
              letterSpacing:"-0.02em",
              transition:"all .2s",
            }}>{t.label}</span>
            {a && <div style={{position:"absolute",left:0,right:0,bottom:0,height:3,background:"#e91e8c",borderRadius:2}}/>}
          </div>
        );
      })}
    </div>
  );
}

/* ============ V14 — NEON Y2K (dark bg, glow icons) ============ */
function TabBarV14({active,onChange}){
  return (
    <div style={{position:"absolute",left:0,right:0,bottom:0,height:72,background:"#1a0a14",display:"flex",borderTop:"2px solid #e91e8c",boxShadow:"0 -10px 30px rgba(233,30,140,0.4)"}}>
      {TABS.map((t,i)=>{
        const a = t.id===active;
        return (
          <div key={t.id} onClick={()=>onChange(t.id)} style={{
            flex:1,display:"flex",flexDirection:"column",alignItems:"center",justifyContent:"center",gap:4,cursor:"pointer",
            borderLeft:i?"1px dashed rgba(233,30,140,0.3)":"none",
            position:"relative",
          }}>
            <div style={{
              padding:6,borderRadius:"50%",
              border:a?"1.5px solid #e91e8c":"1px solid rgba(233,30,140,0.3)",
              boxShadow:a?"0 0 12px #e91e8c, inset 0 0 8px rgba(233,30,140,0.6)":"none",
            }}>
              <TabIcon kind={t.icon} color={a?"#fff":"#e91e8c"}/>
            </div>
            <span style={{
              fontFamily:"'Space Mono',monospace",fontSize:9,fontWeight:700,letterSpacing:"0.18em",textTransform:"uppercase",
              color:a?"#fff":"#e91e8c",
              textShadow:a?"0 0 6px #e91e8c":"none",
            }}>{t.label}</span>
          </div>
        );
      })}
    </div>
  );
}

/* ============ V15 — CIRCLE FAB ROW (4 separate circles, floating) ============ */
function TabBarV15({active,onChange}){
  return (
    <div style={{position:"absolute",left:0,right:0,bottom:18,display:"flex",justifyContent:"center",gap:10}}>
      {TABS.map(t=>{
        const a = t.id===active;
        return (
          <button key={t.id} onClick={()=>onChange(t.id)} style={{
            border:"none",cursor:"pointer",
            width:a?64:52,height:a?64:52,borderRadius:"50%",
            background:a?"#e91e8c":"#fff",
            color:a?"#fff":"#9d6b8a",
            display:"flex",flexDirection:"column",alignItems:"center",justifyContent:"center",gap:0,
            boxShadow: a? "0 6px 0 rgba(233,30,140,0.3), 0 0 0 3px #fff" : "0 4px 0 rgba(233,30,140,0.15)",
            transition:"all .2s",
          }}>
            <TabIcon kind={t.icon} color={a?"#fff":"#9d6b8a"}/>
            {a && <span style={{fontFamily:"'Nunito',sans-serif",fontWeight:900,fontSize:9,letterSpacing:"0.04em",marginTop:2}}>{t.label}</span>}
          </button>
        );
      })}
    </div>
  );
}

/* ============ V16 — WIDE ACTIVE (active expands, others shrink to icons) ============ */
function TabBarV16({active,onChange}){
  return (
    <div style={{position:"absolute",left:0,right:0,bottom:0,height:68,background:"#fff",display:"flex",borderTop:"1px solid #f0c8dc",padding:"10px",gap:6}}>
      {TABS.map(t=>{
        const a = t.id===active;
        return (
          <button key={t.id} onClick={()=>onChange(t.id)} style={{
            border:"none",cursor:"pointer",
            flex:a?2.4:1,
            borderRadius:18,
            background:a?"#e91e8c":"#fde2ec",
            color:a?"#fff":"#9d6b8a",
            display:"flex",alignItems:"center",justifyContent:"center",gap:8,
            transition:"flex .25s cubic-bezier(.2,.9,.3,1.2)",
            padding:"0 12px",
          }}>
            <TabIcon kind={t.icon} color={a?"#fff":"#9d6b8a"}/>
            {a && <span style={{fontFamily:"'Nunito',sans-serif",fontWeight:900,fontSize:14,letterSpacing:"-0.01em"}}>{t.label}</span>}
          </button>
        );
      })}
    </div>
  );
}

/* ============ V17 — INDICATOR DOT (icons row + colored dot underneath active) ============ */
function TabBarV17({active,onChange}){
  const idx = TABS.findIndex(t=>t.id===active);
  return (
    <div style={{position:"absolute",left:0,right:0,bottom:0,height:64,background:"#fff",borderTop:"1px solid #f0c8dc",position:"relative"}}>
      <div style={{display:"flex",height:"100%"}}>
        {TABS.map(t=>{
          const a = t.id===active;
          return (
            <div key={t.id} onClick={()=>onChange(t.id)} style={{flex:1,display:"flex",flexDirection:"column",alignItems:"center",justifyContent:"center",gap:4,cursor:"pointer"}}>
              <TabIcon kind={t.icon} color={a?"#e91e8c":"#cba9bd"}/>
              <span style={{fontFamily:"'Nunito',sans-serif",fontWeight:a?900:700,fontSize:11,color:a?"#e91e8c":"#9d6b8a",letterSpacing:"-0.01em"}}>{t.label}</span>
            </div>
          );
        })}
      </div>
      <div style={{
        position:"absolute",
        bottom:6,
        left:`calc(${(idx+0.5)*(100/4)}% - 4px)`,
        width:8,height:8,borderRadius:"50%",background:"#e91e8c",
        transition:"left .25s cubic-bezier(.2,.9,.3,1.4)",
      }}/>
    </div>
  );
}

/* ============ V18 — LETTERS ONLY (russian initials, monospace blocks) ============ */
function TabBarV18({active,onChange}){
  return (
    <div style={{position:"absolute",left:0,right:0,bottom:0,height:60,background:"#fff5fa",display:"flex",justifyContent:"center",alignItems:"center",gap:8,padding:"0 16px",borderTop:"1.5px solid #f0c8dc"}}>
      {TABS.map(t=>{
        const a = t.id===active;
        return (
          <button key={t.id} onClick={()=>onChange(t.id)} style={{
            border:a?"none":"1.5px solid #f0c8dc",
            background:a?"#e91e8c":"#fff",
            color:a?"#fff":"#9d6b8a",
            cursor:"pointer",
            width:42,height:42,borderRadius:14,
            fontFamily:"'Nunito',sans-serif",fontWeight:900,fontSize:18,letterSpacing:"-0.02em",
            display:"grid",placeItems:"center",
            boxShadow:a?"0 4px 0 rgba(233,30,140,0.25)":"none",
            position:"relative",
          }}>
            {t.letter}
            {a && <span style={{position:"absolute",bottom:-16,fontFamily:"'Space Mono',monospace",fontSize:9,color:"#e91e8c",fontWeight:700,letterSpacing:"0.12em",textTransform:"uppercase"}}>{t.label}</span>}
          </button>
        );
      })}
    </div>
  );
}

/* ============ V19 — TICKETS (perforated stubs) ============ */
function TabBarV19({active,onChange}){
  return (
    <div style={{position:"absolute",left:0,right:0,bottom:0,height:74,background:"#fde2ec",display:"flex",borderTop:"3px dashed #e91e8c",padding:"6px"}}>
      {TABS.map((t,i)=>{
        const a = t.id===active;
        return (
          <div key={t.id} onClick={()=>onChange(t.id)} style={{
            flex:1,position:"relative",margin:"0 3px",cursor:"pointer",
            background:a?"#e91e8c":"#fff",
            color:a?"#fff":"#9d6b8a",
            borderRadius:8,
            display:"flex",flexDirection:"column",alignItems:"center",justifyContent:"center",gap:2,
            boxShadow:a?"0 3px 0 rgba(233,30,140,0.3)":"0 2px 0 rgba(233,30,140,0.1)",
            border:a?"none":"1px dashed #f0c8dc",
          }}>
            {/* perforation circles on sides */}
            <div style={{position:"absolute",left:-4,top:"50%",transform:"translateY(-50%)",width:8,height:8,borderRadius:"50%",background:"#fde2ec"}}/>
            <div style={{position:"absolute",right:-4,top:"50%",transform:"translateY(-50%)",width:8,height:8,borderRadius:"50%",background:"#fde2ec"}}/>
            <span style={{fontFamily:"'Space Mono',monospace",fontSize:8,fontWeight:700,letterSpacing:"0.16em",opacity:0.85}}>{t.num}</span>
            <span style={{fontFamily:"'Nunito',sans-serif",fontWeight:900,fontSize:12,letterSpacing:"-0.01em"}}>{t.label}</span>
          </div>
        );
      })}
    </div>
  );
}

/* ============ V20 — DASHBOARD STATS (each tab shows a count) ============ */
function TabBarV20({active,onChange}){
  const meta = {home:"5", classes:"3", online:"4", profile:"7"};
  return (
    <div style={{position:"absolute",left:0,right:0,bottom:0,height:78,background:"#fff",display:"flex",borderTop:"1px solid #f0c8dc"}}>
      {TABS.map((t,i)=>{
        const a = t.id===active;
        return (
          <div key={t.id} onClick={()=>onChange(t.id)} style={{
            flex:1,position:"relative",cursor:"pointer",
            display:"flex",flexDirection:"column",alignItems:"center",justifyContent:"center",gap:2,
            borderLeft:i?"1px solid #fce4ec":"none",
            background:a?"#fde2ec":"transparent",
          }}>
            {a && <div style={{position:"absolute",left:0,right:0,top:0,height:3,background:"#e91e8c"}}/>}
            <div style={{display:"flex",alignItems:"center",gap:6}}>
              <TabIcon kind={t.icon} color={a?"#e91e8c":"#9d6b8a"}/>
              <div style={{
                padding:"1px 6px",borderRadius:8,
                background:a?"#e91e8c":"#9d6b8a",color:"#fff",
                fontFamily:"'Space Mono',monospace",fontSize:9,fontWeight:700,letterSpacing:"0.04em",
              }}>{meta[t.id]}</div>
            </div>
            <span style={{fontFamily:"'Nunito',sans-serif",fontWeight:900,fontSize:11,color:a?"#2d2d2d":"#9d6b8a",letterSpacing:"-0.01em"}}>{t.label}</span>
          </div>
        );
      })}
    </div>
  );
}

const TAB_VARIANTS = [
  { n:"01", Comp: TabBarV01, name:"исходный",        tag:"reference",   desc:"оригинал из app: full-width, активная — на горячем розовом, иконки + подпись." },
  { n:"02", Comp: TabBarV02, name:"плавающая пилюля",tag:"floating pill",desc:"центрированная капсула, не на всю ширину. неактивные — только иконки, активная разворачивается с подписью." },
  { n:"03", Comp: TabBarV03, name:"док",             tag:"glass dock",  desc:"квадратные кнопки 48×48 с матовым фоном (glass), активная всплывает на 4px и подсвечена розовым." },
  { n:"04", Comp: TabBarV04, name:"сегмент",         tag:"text only",   desc:"чисто типографическая капсула на пастельном фоне — без иконок. активная — белая плашка с розовым текстом." },
  { n:"05", Comp: TabBarV05, name:"FAB центр",       tag:"action-led",  desc:"4 таба разделены на 2+2 вокруг большой круглой кнопки + (call-to-action). иконка действия важнее навигации." },
  { n:"06", Comp: TabBarV06, name:"номера",          tag:"brutal",      desc:"горячий розовый на полную ширину, гигантские номера 01–04 + микроподпись. брутализм, чёрная активная." },
  { n:"07", Comp: TabBarV07, name:"капсула со слайдом",tag:"sliding",   desc:"белая капсула с тенью; активная плашка плавно перемещается между табами cubic-bezier-spring." },
  { n:"08", Comp: TabBarV08, name:"стикеры",         tag:"y2k",         desc:"4 стикерные кнопки с поворотом ±2°, чёрная обводка 2px, hard shadow 3px. активная увеличивается и поднимается." },
  { n:"09", Comp: TabBarV09, name:"точки",           tag:"minimal zen", desc:"только 4 точки по центру, активная — больше и розовая. подпись появляется поверх как тонкий caption." },
  { n:"10", Comp: TabBarV10, name:"вертикальный акцент",tag:"top stripe",desc:"иконка + подпись в строку, активная — с градиентным фоном и розовой полоской 3px сверху." },
  { n:"11", Comp: TabBarV11, name:"верхний бар",     tag:"top nav",     desc:"навигация переехала наверх, на розовом. активная — с подсветкой и белой подчеркивающей полосой." },
  { n:"12", Comp: TabBarV12, name:"круги-аватары",   tag:"oversized",   desc:"4 больших круга с пастельной заливкой по типу занятия, активная — увеличена и поднята. без подписей." },
  { n:"13", Comp: TabBarV13, name:"подчёркивание",   tag:"editorial",   desc:"редакторский стиль: только текст по центру, активная — italic, крупнее, с розовой чертой снизу." },
  { n:"14", Comp: TabBarV14, name:"неон",            tag:"y2k acid",    desc:"тёмный фон с розовым glow, иконки в кружках с подсветкой. активная — neon-glow с textShadow." },
  { n:"15", Comp: TabBarV15, name:"круглые FAB",     tag:"circle row",  desc:"4 отдельных плавающих круга по центру, активная вырастает с 52 до 64px и получает второе кольцо-обводку." },
  { n:"16", Comp: TabBarV16, name:"эластик",         tag:"elastic",     desc:"flex-расширение: активная занимает в 2.4 раза больше места и показывает подпись, остальные — только иконки." },
  { n:"17", Comp: TabBarV17, name:"индикатор-точка", tag:"dot under",   desc:"стандартный layout, но активная отмечена не цветом, а скользящей точкой 8px снизу." },
  { n:"18", Comp: TabBarV18, name:"буквы",           tag:"initials",    desc:"4 квадратных кнопки 42×42 с инициалами Й·З·О·Я, активная — розовая с подписью под ней (caption)." },
  { n:"19", Comp: TabBarV19, name:"билеты",          tag:"tickets",     desc:"билетные стабы с перфорацией по бокам и пунктирной верхней границей. номер сверху, название снизу." },
  { n:"20", Comp: TabBarV20, name:"счётчики",        tag:"with badges", desc:"каждый таб показывает мини-бейдж с количеством (5 классов, 3 курса, 7 платежей) — utility-tab." },
];

Object.assign(window, {
  TabBarV01, TabBarV02, TabBarV03, TabBarV04, TabBarV05,
  TabBarV06, TabBarV07, TabBarV08, TabBarV09, TabBarV10,
  TabBarV11, TabBarV12, TabBarV13, TabBarV14, TabBarV15,
  TabBarV16, TabBarV17, TabBarV18, TabBarV19, TabBarV20,
  TAB_VARIANTS, TABS,
});