/* ─────────────────────────────────────────────────
   Home variants — V02..V08 (7 alternative Home screens)
   All Rose-DNA, hot pink + pastels. Vary structure, type,
   icons, layout, "acidness". Each variant renders its own
   tab bar so we can show DNA-shifts there too.
   ───────────────────────────────────────────────── */

/* tiny helper: simple working tab bar with custom skin per variant */
function VariantTabBar({ active, onChange, skin = {} }) {
  const tabs = [
    { id:"home",    label:"йога"    },
    { id:"classes", label:"занятия" },
    { id:"online",  label:"онлайн"  },
    { id:"profile", label:"профиль" },
  ];
  const {
    bg = "#fff",
    border = "2.5px solid #e91e8c",
    activeBg = "#e91e8c",
    activeFg = "#fff",
    inactiveFg = "#e91e8c",
    rounded = 0,
    fontSize = 12,
    fontFamily = "'Nunito',sans-serif",
    fontWeight = 900,
    iconKind = "lotus", // controls home icon
  } = skin;
  return (
    <div style={{
      position:"absolute", left:0, right:0, bottom:0, height:72,
      background: bg, borderTop: border,
      display:"flex",
      borderRadius: rounded,
    }}>
      {tabs.map(t=>{
        const isActive = t.id===active;
        const ico = t.id==="home"?iconKind: t.id==="classes"?"calendar": t.id==="online"?"play":"user";
        return (
          <div key={t.id} onClick={()=>onChange(t.id)}
            style={{
              flex:1, display:"flex", flexDirection:"column",
              alignItems:"center", justifyContent:"center", gap:6,
              background: isActive? activeBg:"transparent",
              color: isActive? activeFg:inactiveFg,
              cursor:"pointer", transition:"background .2s, color .2s",
            }}>
            <TabIcon kind={ico} color={isActive?activeFg:inactiveFg}/>
            <span style={{fontFamily, fontWeight, fontSize}}>{t.label}</span>
          </div>
        );
      })}
    </div>
  );
}

/* shared frame container so each variant fills the iOS canvas.
   If customTabBar (render fn) is provided, use it instead of the skinned VariantTabBar.
   This lets the configurator swap tab bars across all home variants. */
function HomeFrame({ bg, children, tabSkin, tabIdState, customTabBar }) {
  const [tab, setTab] = tabIdState ?? React.useState("home");
  return (
    <div style={{position:"relative", width:"100%", height:"100%", background:bg, overflow:"hidden"}}>
      <div style={{position:"absolute", inset:0, paddingBottom:72, overflowY:"auto"}}>
        {children}
      </div>
      <TabBarSlot active={tab} onChange={setTab} fallback={
        customTabBar
          ? customTabBar({ active: tab, onChange: setTab })
          : <VariantTabBar active={tab} onChange={setTab} skin={tabSkin}/>
      }/>
    </div>
  );
}

/* Context that the configurator uses to inject a different tab bar render fn */
const TabBarContext = React.createContext(null);
function TabBarSlot({ active, onChange, fallback }) {
  const render = React.useContext(TabBarContext);
  if (render) return render({ active, onChange });
  return fallback;
}
function TabBarOverride({ render, children }) {
  return <TabBarContext.Provider value={render}>{children}</TabBarContext.Provider>;
}

/* ============ V02 — TABULAR / iOS Settings-style ============ */
function HomeV02() {
  return (
    <HomeFrame bg="#fff5fa" tabSkin={{ activeBg:"#e91e8c", border:"1px solid #f0c8dc" }}>
      <div style={{padding:"20px 18px 12px"}}>
        <div style={{fontFamily:"'Nunito',sans-serif",fontWeight:900,fontSize:34,color:"#2d2d2d",lineHeight:1,letterSpacing:"-0.02em"}}>главная</div>
        <div style={{fontFamily:"'Space Mono',monospace",fontSize:11,color:"#9d6b8a",marginTop:4,letterSpacing:"0.08em"}}>29 APR · ANNA</div>
      </div>

      {/* grouped list — iOS Settings */}
      <div style={{padding:"0 18px"}}>
        <div style={{fontFamily:"'Space Mono',monospace",fontSize:10,letterSpacing:"0.16em",color:"#9d6b8a",textTransform:"uppercase",margin:"14px 8px 6px"}}>записаться</div>
        <div style={{background:"#fff",borderRadius:14,border:"1px solid #f0c8dc",overflow:"hidden"}}>
          {[
            { l:"Виньяса флоу", r:"08:00 · 4 места", c:"#c4b5fd" },
            { l:"Инь-йога",     r:"10:30 · 1 место", c:"#a7f3d0" },
            { l:"Аштанга",      r:"12:00 · мест нет", c:"#fde68a", muted:true },
            { l:"Медитация",    r:"18:00 · 9 мест",  c:"#f9a8d4" },
          ].map((r,i,a)=>(
            <div key={i} style={{display:"flex",alignItems:"center",gap:12,padding:"12px 14px",borderBottom:i<a.length-1?"1px solid #fce4ec":"none",opacity:r.muted?0.5:1}}>
              <div style={{width:10,height:32,borderRadius:5,background:r.c,flexShrink:0}}/>
              <div style={{flex:1,fontFamily:"'Nunito',sans-serif",fontWeight:900,fontSize:15,color:"#2d2d2d"}}>{r.l.toLowerCase()}</div>
              <div style={{fontFamily:"'Space Mono',monospace",fontSize:11,color:"#9d6b8a"}}>{r.r}</div>
              <div style={{color:"#e91e8c",fontFamily:"'Nunito',sans-serif",fontWeight:900}}>›</div>
            </div>
          ))}
        </div>

        <div style={{fontFamily:"'Space Mono',monospace",fontSize:10,letterSpacing:"0.16em",color:"#9d6b8a",textTransform:"uppercase",margin:"18px 8px 6px"}}>обучение</div>
        <div style={{background:"#fff",borderRadius:14,border:"1px solid #f0c8dc",overflow:"hidden"}}>
          {COURSES.slice(0,2).map((c,i,a)=>(
            <div key={c.id} style={{display:"flex",alignItems:"center",gap:12,padding:"12px 14px",borderBottom:i<a.length-1?"1px solid #fce4ec":"none"}}>
              <div style={{width:32,height:32,borderRadius:9,background:PASTEL[c.colorIdx],display:"grid",placeItems:"center"}}>
                <PlayIcon size={20} color="#fff"/>
              </div>
              <div style={{flex:1}}>
                <div style={{fontFamily:"'Nunito',sans-serif",fontWeight:900,fontSize:14,color:"#2d2d2d"}}>{c.title}</div>
                <div style={{fontFamily:"'Space Mono',monospace",fontSize:10,color:"#9d6b8a"}}>{c.instructor.toLowerCase()} · {Math.floor(c.durationMin/60)}h</div>
              </div>
              <div style={{color:"#e91e8c",fontFamily:"'Nunito',sans-serif",fontWeight:900}}>›</div>
            </div>
          ))}
        </div>

        <div style={{fontFamily:"'Space Mono',monospace",fontSize:10,letterSpacing:"0.16em",color:"#9d6b8a",textTransform:"uppercase",margin:"18px 8px 6px"}}>новости</div>
        <div style={{background:"#fff",borderRadius:14,border:"1px solid #f0c8dc",overflow:"hidden"}}>
          {NEWS.map((n,i,a)=>(
            <div key={n.id} style={{padding:"12px 14px",borderBottom:i<a.length-1?"1px solid #fce4ec":"none"}}>
              <div style={{display:"flex",gap:8,alignItems:"center",marginBottom:4}}>
                <div style={{width:8,height:8,borderRadius:"50%",background:newsBadgeColor(n.category)}}/>
                <div style={{fontFamily:"'Space Mono',monospace",fontSize:9,color:"#9d6b8a",letterSpacing:"0.12em",textTransform:"uppercase"}}>{n.category}</div>
              </div>
              <div style={{fontFamily:"'Nunito',sans-serif",fontWeight:900,fontSize:14,color:"#2d2d2d"}}>{n.title.toLowerCase()}</div>
            </div>
          ))}
        </div>
        <div style={{height:24}}/>
      </div>
    </HomeFrame>
  );
}

/* ============ V03 — MAGAZINE / editorial big type ============ */
function HomeV03() {
  return (
    <HomeFrame bg="#fff" tabSkin={{ bg:"#fff", border:"1px solid #2d2d2d", activeBg:"#2d2d2d", activeFg:"#fff", inactiveFg:"#2d2d2d", fontSize:11 }}>
      <div style={{padding:"24px 22px 0"}}>
        <div style={{display:"flex",justifyContent:"space-between",alignItems:"baseline"}}>
          <div style={{fontFamily:"'Space Mono',monospace",fontSize:10,letterSpacing:"0.18em",textTransform:"uppercase",color:"#2d2d2d"}}>vol. 04 · issue 29</div>
          <div style={{fontFamily:"'Space Mono',monospace",fontSize:10,color:"#e91e8c"}}>apr 2026</div>
        </div>
        <div style={{height:1,background:"#2d2d2d",margin:"12px 0"}}/>
      </div>

      {/* HUGE editorial title */}
      <div style={{padding:"4px 22px"}}>
        <div style={{fontFamily:"'Nunito',sans-serif",fontWeight:900,fontSize:78,color:"#2d2d2d",lineHeight:0.85,letterSpacing:"-0.04em"}}>
          практика
        </div>
        <div style={{fontFamily:"'Nunito',sans-serif",fontWeight:900,fontStyle:"italic",fontSize:78,color:"#e91e8c",lineHeight:0.85,letterSpacing:"-0.04em"}}>
          сегодня
        </div>
      </div>

      {/* subhead */}
      <div style={{padding:"18px 22px 0",display:"flex",gap:16}}>
        <div style={{flex:1,fontFamily:"'Space Mono',monospace",fontSize:13,color:"#2d2d2d",lineHeight:1.4}}>
          Виньяса с Аленой в&nbsp;08:00, инь с&nbsp;Машей в&nbsp;10:30. Мест ещё хватает на оба&nbsp;занятия.
        </div>
        <div style={{width:64,fontFamily:"'Nunito',sans-serif",fontWeight:900,fontSize:60,color:"#e91e8c",lineHeight:1,letterSpacing:"-0.04em"}}>5</div>
      </div>

      {/* divider with dropcap-style hint */}
      <div style={{margin:"18px 22px 0",height:1,background:"#2d2d2d"}}/>

      {/* feature: next class */}
      <div style={{padding:"14px 22px"}}>
        <div style={{display:"flex",justifyContent:"space-between",alignItems:"baseline",marginBottom:10}}>
          <div style={{fontFamily:"'Space Mono',monospace",fontSize:10,letterSpacing:"0.18em",textTransform:"uppercase",color:"#9d6b8a"}}>следующее занятие</div>
          <div style={{fontFamily:"'Space Mono',monospace",fontSize:10,color:"#9d6b8a"}}>—</div>
        </div>
        <div style={{display:"flex",gap:14,alignItems:"flex-start"}}>
          <div style={{fontFamily:"'Nunito',sans-serif",fontWeight:900,fontSize:48,color:"#e91e8c",lineHeight:1,letterSpacing:"-0.03em"}}>08:00</div>
          <div style={{flex:1,paddingTop:6}}>
            <div style={{fontFamily:"'Nunito',sans-serif",fontWeight:900,fontSize:22,color:"#2d2d2d",letterSpacing:"-0.02em",lineHeight:1.05}}>виньяса флоу</div>
            <div style={{fontFamily:"'Space Mono',monospace",fontSize:12,color:"#9d6b8a",marginTop:2}}>алена · зал&nbsp;1 · 60&nbsp;мин · 8 мест</div>
          </div>
        </div>
      </div>

      <div style={{margin:"4px 22px",height:1,background:"#2d2d2d"}}/>

      {/* news as bylines */}
      <div style={{padding:"14px 22px 24px"}}>
        <div style={{fontFamily:"'Space Mono',monospace",fontSize:10,letterSpacing:"0.18em",textTransform:"uppercase",color:"#9d6b8a",marginBottom:10}}>колонка</div>
        {NEWS.slice(0,2).map((n,i)=>(
          <div key={n.id} style={{marginBottom:14}}>
            <div style={{fontFamily:"'Nunito',sans-serif",fontWeight:900,fontStyle:i%2?"italic":"normal",fontSize:24,color:"#2d2d2d",lineHeight:1.05,letterSpacing:"-0.02em"}}>{n.title}</div>
            <div style={{fontFamily:"'Space Mono',monospace",fontSize:12,color:"#9d6b8a",marginTop:4,lineHeight:1.5}}>{n.summary}</div>
            <div style={{fontFamily:"'Space Mono',monospace",fontSize:10,color:"#e91e8c",marginTop:6,letterSpacing:"0.12em",textTransform:"uppercase"}}>{n.date}</div>
          </div>
        ))}
      </div>
    </HomeFrame>
  );
}

/* ============ V04 — BRUTALIST / hot pink to the max ============ */
function HomeV04() {
  return (
    <HomeFrame bg="#e91e8c" tabSkin={{ bg:"#000", border:"4px solid #000", activeBg:"#fff", activeFg:"#000", inactiveFg:"#fff" }}>
      <div style={{padding:"20px 18px 0"}}>
        <div style={{display:"flex",justifyContent:"space-between",alignItems:"flex-start",gap:12}}>
          <div style={{fontFamily:"'Nunito',sans-serif",fontWeight:900,fontSize:54,color:"#fff",lineHeight:0.85,letterSpacing:"-0.04em"}}>
            ЙОГА.<br/>СЕГОДНЯ.
          </div>
          <div style={{background:"#000",color:"#fff",padding:"8px 12px",fontFamily:"'Space Mono',monospace",fontSize:11,fontWeight:700,border:"3px solid #fff"}}>29.04</div>
        </div>
      </div>

      {/* big black sticker */}
      <div style={{margin:"18px 18px 0",background:"#000",color:"#fff",padding:"14px 16px",border:"3px solid #fff",boxShadow:"6px 6px 0 #fff"}}>
        <div style={{fontFamily:"'Space Mono',monospace",fontSize:10,letterSpacing:"0.2em"}}>NEXT UP</div>
        <div style={{fontFamily:"'Nunito',sans-serif",fontWeight:900,fontSize:30,lineHeight:1,marginTop:4,letterSpacing:"-0.02em"}}>VINYASA 08:00</div>
        <div style={{fontFamily:"'Space Mono',monospace",fontSize:11,marginTop:6}}>алена · зал 1 · ещё 8 мест</div>
        <div style={{marginTop:10,display:"flex",gap:8}}>
          <div style={{flex:1,background:"#e91e8c",color:"#fff",textAlign:"center",padding:"8px",fontFamily:"'Nunito',sans-serif",fontWeight:900,fontSize:13,border:"2px solid #fff"}}>записаться</div>
          <div style={{background:"#fff",color:"#000",padding:"8px 12px",fontFamily:"'Nunito',sans-serif",fontWeight:900,fontSize:13}}>↗</div>
        </div>
      </div>

      {/* tile grid */}
      <div style={{padding:"18px",display:"grid",gridTemplateColumns:"1fr 1fr",gap:10}}>
        {[
          {l:"ОНЛАЙН",bg:"#fff",fg:"#000"},
          {l:"СТУДИЯ",bg:"#000",fg:"#fff"},
          {l:"ОДИН РАЗ",bg:"#000",fg:"#fff"},
          {l:"АБОНЕМЕНТ",bg:"#fff",fg:"#000"},
        ].map((t,i)=>(
          <div key={i} style={{background:t.bg,color:t.fg,padding:"18px 14px",border:"3px solid #000",boxShadow:"5px 5px 0 #000",fontFamily:"'Nunito',sans-serif",fontWeight:900,fontSize:18,letterSpacing:"-0.02em",textAlign:"center"}}>{t.l}</div>
        ))}
      </div>

      {/* news bar */}
      <div style={{margin:"6px 18px 24px",background:"#000",border:"3px solid #fff",padding:"10px 14px"}}>
        <div style={{color:"#fff",fontFamily:"'Space Mono',monospace",fontSize:10,letterSpacing:"0.18em",marginBottom:8}}>NEWS // 03 ITEMS</div>
        {NEWS.map((n,i)=>(
          <div key={n.id} style={{display:"flex",alignItems:"center",gap:10,padding:"6px 0",borderTop:i?"1px dashed #fff":"none"}}>
            <div style={{fontFamily:"'Space Mono',monospace",fontSize:10,color:"#e91e8c",fontWeight:700}}>{String(i+1).padStart(2,"0")}</div>
            <div style={{flex:1,fontFamily:"'Nunito',sans-serif",fontWeight:900,fontSize:13,color:"#fff",letterSpacing:"-0.01em"}}>{n.title.toUpperCase()}</div>
            <div style={{color:"#fff"}}>→</div>
          </div>
        ))}
      </div>
    </HomeFrame>
  );
}

/* ============ V05 — SOFT / pillow / mega-rounded ============ */
function HomeV05() {
  return (
    <HomeFrame bg="#fde2ec" tabSkin={{ bg:"#fff", border:"none", activeBg:"#e91e8c", rounded:"36px 36px 0 0" }}>
      <div style={{padding:"20px 22px 8px"}}>
        <div style={{fontFamily:"'Space Mono',monospace",fontSize:11,color:"#9d6b8a",letterSpacing:"0.1em"}}>привет, анна</div>
        <div style={{fontFamily:"'Nunito',sans-serif",fontWeight:900,fontSize:36,color:"#2d2d2d",lineHeight:1,letterSpacing:"-0.02em",marginTop:4}}>что выберем сегодня?</div>
      </div>

      {/* big pillow CTAs */}
      <div style={{padding:"16px 22px",display:"grid",gridTemplateColumns:"1fr",gap:14}}>
        <div style={{background:"#fff",borderRadius:32,padding:"22px 24px",boxShadow:"0 8px 0 rgba(233,30,140,0.15)",border:"1.5px solid #fff"}}>
          <div style={{display:"flex",alignItems:"center",gap:14}}>
            <div style={{width:62,height:62,borderRadius:"50%",background:"#fde68a",display:"grid",placeItems:"center",fontSize:30}}>☀</div>
            <div style={{flex:1}}>
              <div style={{fontFamily:"'Nunito',sans-serif",fontWeight:900,fontSize:20,color:"#2d2d2d"}}>записаться</div>
              <div style={{fontFamily:"'Space Mono',monospace",fontSize:12,color:"#9d6b8a"}}>5 занятий сегодня</div>
            </div>
            <div style={{width:36,height:36,borderRadius:"50%",background:"#e91e8c",color:"#fff",display:"grid",placeItems:"center",fontSize:18,fontWeight:900}}>›</div>
          </div>
        </div>

        <div style={{background:"#a7f3d0",borderRadius:32,padding:"22px 24px",boxShadow:"0 8px 0 rgba(233,30,140,0.18)",border:"1.5px solid rgba(255,255,255,0.7)"}}>
          <div style={{display:"flex",alignItems:"center",gap:14}}>
            <div style={{width:62,height:62,borderRadius:"50%",background:"#fff",display:"grid",placeItems:"center"}}>
              <PlayIcon size={28} color="#e91e8c"/>
            </div>
            <div style={{flex:1}}>
              <div style={{fontFamily:"'Nunito',sans-serif",fontWeight:900,fontSize:20,color:"#2d2d2d"}}>онлайн курсы</div>
              <div style={{fontFamily:"'Space Mono',monospace",fontSize:12,color:"#2d2d2d",opacity:0.7}}>смотреть в любое время</div>
            </div>
          </div>
        </div>
      </div>

      {/* horizontal pill chips: classes */}
      <div style={{padding:"4px 22px"}}>
        <div style={{fontFamily:"'Nunito',sans-serif",fontWeight:900,fontSize:14,color:"#9d6b8a",margin:"4px 6px 8px",textTransform:"lowercase"}}>сегодня</div>
        <div style={{display:"flex",gap:10,overflowX:"auto",paddingBottom:6,scrollbarWidth:"none"}}>
          {CLASSES.slice(0,4).map(c=>(
            <div key={c.id} style={{
              flexShrink:0,minWidth:130,padding:"14px 16px",borderRadius:24,
              background:classCategoryColor(c.name),
              border:"1.5px solid rgba(255,255,255,0.8)",
              boxShadow:"0 4px 0 rgba(233,30,140,0.15)",
            }}>
              <div style={{fontFamily:"'Nunito',sans-serif",fontWeight:900,fontSize:22,color:"#2d2d2d",letterSpacing:"-0.02em"}}>{c.time}</div>
              <div style={{fontFamily:"'Space Mono',monospace",fontSize:11,color:"#2d2d2d",fontWeight:700,marginTop:2}}>{c.name.toLowerCase()}</div>
              <div style={{fontFamily:"'Space Mono',monospace",fontSize:10,color:"#9d6b8a",marginTop:1}}>{c.teacher.toLowerCase()}</div>
            </div>
          ))}
        </div>
      </div>

      {/* news pillow */}
      <div style={{padding:"16px 22px 24px"}}>
        <div style={{background:"#fff",borderRadius:32,padding:"18px 22px",boxShadow:"0 8px 0 rgba(233,30,140,0.15)",border:"1.5px solid #fff"}}>
          <div style={{fontFamily:"'Nunito',sans-serif",fontWeight:900,fontSize:14,color:"#e91e8c",marginBottom:10,textTransform:"lowercase"}}>новости студии</div>
          {NEWS.slice(0,2).map((n,i,a)=>(
            <div key={n.id} style={{padding:"10px 0",borderBottom:i<a.length-1?"1px dashed #f0c8dc":"none"}}>
              <div style={{fontFamily:"'Nunito',sans-serif",fontWeight:900,fontSize:14,color:"#2d2d2d"}}>{n.title.toLowerCase()}</div>
              <div style={{fontFamily:"'Space Mono',monospace",fontSize:11,color:"#9d6b8a",marginTop:2}}>{n.summary}</div>
            </div>
          ))}
        </div>
      </div>
    </HomeFrame>
  );
}

/* ============ V06 — NEON / Y2K acid kawaii ============ */
function HomeV06() {
  return (
    <HomeFrame bg="#000" tabSkin={{ bg:"#000", border:"2px solid #ff10a3", activeBg:"#ff10a3", activeFg:"#fff", inactiveFg:"#ff10a3" }}>
      <div style={{padding:"22px 18px 0"}}>
        <div style={{display:"flex",justifyContent:"space-between",alignItems:"flex-start"}}>
          <div>
            <div style={{fontFamily:"'Nunito',sans-serif",fontWeight:900,fontSize:42,color:"#ff10a3",lineHeight:0.9,letterSpacing:"-0.03em",textShadow:"0 0 18px rgba(255,16,163,0.7)"}}>::yoga::</div>
            <div style={{fontFamily:"'Space Mono',monospace",fontSize:11,color:"#a7f3d0",marginTop:6,letterSpacing:"0.16em"}}>★ ANNA . ONLINE</div>
          </div>
          <div style={{padding:"6px 10px",background:"#1f1f1f",border:"1px solid #ff10a3",fontFamily:"'Space Mono',monospace",fontSize:10,color:"#ff10a3",letterSpacing:"0.18em"}}>29APR_06</div>
        </div>
      </div>

      <div style={{padding:"16px 18px"}}>
        <div style={{padding:"16px 18px",background:"linear-gradient(135deg,#ff10a3,#a855f7)",borderRadius:0,clipPath:"polygon(0 0, 100% 0, 100% 90%, 95% 100%, 0 100%)"}}>
          <div style={{fontFamily:"'Space Mono',monospace",fontSize:10,color:"#fff",letterSpacing:"0.2em",opacity:0.85}}>>>> NEXT</div>
          <div style={{fontFamily:"'Nunito',sans-serif",fontWeight:900,fontSize:36,color:"#fff",letterSpacing:"-0.03em",lineHeight:1,marginTop:4}}>vinyasa 08:00</div>
          <div style={{fontFamily:"'Space Mono',monospace",fontSize:12,color:"#fde68a",marginTop:6}}>// alena · room_1 · 08_seats_left</div>
        </div>
      </div>

      {/* neon tile grid */}
      <div style={{padding:"4px 18px",display:"grid",gridTemplateColumns:"1fr 1fr",gap:10}}>
        {[
          {l:"online",  c:"#a7f3d0", t:"#000"},
          {l:"studio",  c:"#fde68a", t:"#000"},
          {l:"single",  c:"#ff10a3", t:"#fff"},
          {l:"weekly",  c:"#a855f7", t:"#fff"},
        ].map((t,i)=>(
          <div key={i} style={{background:"#0d0d0d",border:`1px solid ${t.c}`,padding:"14px 12px",position:"relative"}}>
            <div style={{fontFamily:"'Nunito',sans-serif",fontWeight:900,fontSize:22,color:t.c,letterSpacing:"-0.02em",textShadow:`0 0 12px ${t.c}`}}>{t.l}</div>
            <div style={{position:"absolute",top:6,right:8,width:6,height:6,borderRadius:"50%",background:t.c,boxShadow:`0 0 8px ${t.c}`}}/>
          </div>
        ))}
      </div>

      <div style={{padding:"14px 18px 24px"}}>
        <div style={{fontFamily:"'Space Mono',monospace",fontSize:10,letterSpacing:"0.2em",color:"#a7f3d0",margin:"4px 2px 8px"}}>::news_log::</div>
        {NEWS.map((n,i)=>(
          <div key={n.id} style={{padding:"10px 12px",border:"1px solid #1f1f1f",marginBottom:6,background:"#0d0d0d"}}>
            <div style={{display:"flex",alignItems:"center",gap:8,marginBottom:2}}>
              <span style={{fontFamily:"'Space Mono',monospace",fontSize:9,color:"#ff10a3",letterSpacing:"0.16em"}}>{String(i+1).padStart(2,"0")}.{n.category.toLowerCase()}</span>
              <span style={{flex:1,height:1,background:"#1f1f1f"}}/>
              <span style={{fontFamily:"'Space Mono',monospace",fontSize:9,color:"#9d6b8a"}}>{n.date}</span>
            </div>
            <div style={{fontFamily:"'Nunito',sans-serif",fontWeight:900,fontSize:14,color:"#fff",letterSpacing:"-0.01em"}}>{n.title.toLowerCase()}</div>
          </div>
        ))}
      </div>
    </HomeFrame>
  );
}

/* ============ V07 — STORIES / TikTok carousel ============ */
function HomeV07() {
  const stories = [
    { c:"#c4b5fd", l:"виньяса",   t:"08:00", who:"алена" },
    { c:"#a7f3d0", l:"инь",       t:"10:30", who:"маша"  },
    { c:"#fde68a", l:"аштанга",   t:"12:00", who:"денис" },
    { c:"#f9a8d4", l:"медитация", t:"18:00", who:"ира"   },
    { c:"#fed7aa", l:"растяжка",  t:"19:30", who:"маша"  },
  ];
  return (
    <HomeFrame bg="#fff" tabSkin={{ bg:"rgba(255,255,255,0.85)", border:"none", activeBg:"#e91e8c" }}>
      {/* avatar row stories-style */}
      <div style={{padding:"22px 0 14px 18px"}}>
        <div style={{fontFamily:"'Nunito',sans-serif",fontWeight:900,fontSize:24,color:"#2d2d2d",marginBottom:14,letterSpacing:"-0.02em"}}>сегодня <span style={{color:"#e91e8c",fontStyle:"italic"}}>5</span> практик</div>
        <div style={{display:"flex",gap:12,overflowX:"auto",paddingBottom:8,scrollbarWidth:"none"}}>
          {stories.map((s,i)=>(
            <div key={i} style={{flexShrink:0,textAlign:"center"}}>
              <div style={{width:64,height:64,borderRadius:"50%",padding:3,background:"linear-gradient(135deg,#e91e8c,#fde68a)"}}>
                <div style={{width:"100%",height:"100%",borderRadius:"50%",background:s.c,display:"grid",placeItems:"center",border:"3px solid #fff"}}>
                  <div style={{fontFamily:"'Nunito',sans-serif",fontWeight:900,fontSize:13,color:"#2d2d2d",letterSpacing:"-0.02em"}}>{s.t}</div>
                </div>
              </div>
              <div style={{fontFamily:"'Space Mono',monospace",fontSize:10,color:"#9d6b8a",marginTop:6}}>{s.l}</div>
            </div>
          ))}
        </div>
      </div>

      {/* Big TikTok card snap */}
      <div style={{padding:"4px 0 8px"}}>
        <div style={{display:"flex",gap:14,overflowX:"auto",scrollSnapType:"x mandatory",padding:"6px 18px 18px",scrollbarWidth:"none"}}>
          {CLASSES.slice(0,3).map(c=>(
            <div key={c.id} style={{
              flexShrink:0,scrollSnapAlign:"center",width:230,height:330,
              borderRadius:28,padding:"18px",
              background:`linear-gradient(180deg, ${classCategoryColor(c.name)} 0%, #fff5fa 100%)`,
              border:"1.5px solid rgba(255,255,255,0.8)",
              boxShadow:"0 12px 0 rgba(233,30,140,0.15)",
              display:"flex",flexDirection:"column",justifyContent:"space-between",
            }}>
              <div>
                <div style={{display:"flex",justifyContent:"space-between",alignItems:"center"}}>
                  <div style={{padding:"4px 10px",borderRadius:12,background:"#fff",fontFamily:"'Space Mono',monospace",fontSize:10,fontWeight:700,color:"#e91e8c",letterSpacing:"0.1em"}}>{c.level}</div>
                  <div style={{fontFamily:"'Space Mono',monospace",fontSize:11,color:"#2d2d2d"}}>{c.duration}мин</div>
                </div>
              </div>
              <div>
                <div style={{fontFamily:"'Nunito',sans-serif",fontWeight:900,fontSize:36,color:"#2d2d2d",lineHeight:1,letterSpacing:"-0.03em"}}>{c.time}</div>
                <div style={{fontFamily:"'Nunito',sans-serif",fontWeight:900,fontSize:22,color:"#2d2d2d",marginTop:4,letterSpacing:"-0.02em"}}>{c.name.toLowerCase()}</div>
                <div style={{fontFamily:"'Space Mono',monospace",fontSize:12,color:"#9d6b8a",marginTop:4}}>{c.teacher.toLowerCase()} · {c.spotsTotal-c.spotsTaken} мест</div>
                <div style={{marginTop:14,padding:"10px",background:"#e91e8c",color:"#fff",borderRadius:14,fontFamily:"'Nunito',sans-serif",fontWeight:900,fontSize:14,textAlign:"center"}}>записаться →</div>
              </div>
            </div>
          ))}
        </div>
      </div>

      {/* News strip */}
      <div style={{padding:"4px 18px 24px"}}>
        <div style={{fontFamily:"'Nunito',sans-serif",fontWeight:900,fontSize:14,color:"#9d6b8a",marginBottom:8,textTransform:"lowercase"}}>новости</div>
        <div style={{display:"flex",gap:10,overflowX:"auto",scrollbarWidth:"none"}}>
          {NEWS.map(n=>(
            <div key={n.id} style={{flexShrink:0,width:200,padding:14,borderRadius:18,background:newsBadgeColor(n.category),boxShadow:"0 4px 0 rgba(233,30,140,0.15)",border:"1.5px solid rgba(255,255,255,0.7)"}}>
              <div style={{fontFamily:"'Space Mono',monospace",fontSize:9,color:"#2d2d2d",opacity:0.6,letterSpacing:"0.14em",textTransform:"uppercase"}}>{n.category}</div>
              <div style={{fontFamily:"'Nunito',sans-serif",fontWeight:900,fontSize:14,color:"#2d2d2d",marginTop:6,letterSpacing:"-0.01em"}}>{n.title}</div>
            </div>
          ))}
        </div>
      </div>
    </HomeFrame>
  );
}

/* ============ V08 — BENTO GRID / modular ============ */
function HomeV08() {
  return (
    <HomeFrame bg="#fff5fa" tabSkin={{ activeBg:"#e91e8c" }}>
      <div style={{padding:"20px 16px 8px"}}>
        <div style={{display:"flex",justifyContent:"space-between",alignItems:"baseline"}}>
          <div style={{fontFamily:"'Nunito',sans-serif",fontWeight:900,fontSize:28,color:"#2d2d2d",letterSpacing:"-0.02em"}}>
            bento <em style={{color:"#e91e8c",fontStyle:"italic"}}>day</em>
          </div>
          <div style={{fontFamily:"'Space Mono',monospace",fontSize:11,color:"#9d6b8a"}}>29 apr · ср</div>
        </div>
      </div>

      {/* bento grid */}
      <div style={{padding:"6px 16px 24px",display:"grid",gridTemplateColumns:"repeat(6,1fr)",gridAutoRows:"68px",gap:8}}>

        {/* big next class */}
        <div style={{gridColumn:"span 6",gridRow:"span 2",background:"#e91e8c",color:"#fff",borderRadius:20,padding:"14px 18px",boxShadow:"0 4px 0 rgba(233,30,140,0.3)",display:"flex",flexDirection:"column",justifyContent:"space-between"}}>
          <div style={{fontFamily:"'Space Mono',monospace",fontSize:10,letterSpacing:"0.18em",opacity:0.9}}>NEXT · 1ч 23мин</div>
          <div>
            <div style={{fontFamily:"'Nunito',sans-serif",fontWeight:900,fontSize:48,letterSpacing:"-0.03em",lineHeight:1}}>08:00</div>
            <div style={{fontFamily:"'Nunito',sans-serif",fontWeight:900,fontSize:20,marginTop:2,letterSpacing:"-0.02em"}}>виньяса · алена</div>
          </div>
        </div>

        {/* progress / streak */}
        <div style={{gridColumn:"span 3",gridRow:"span 2",background:"#a7f3d0",borderRadius:20,padding:14,boxShadow:"0 4px 0 rgba(233,30,140,0.15)",border:"1.5px solid rgba(255,255,255,0.7)"}}>
          <div style={{fontFamily:"'Space Mono',monospace",fontSize:10,color:"#2d2d2d",opacity:0.6,letterSpacing:"0.14em"}}>STREAK</div>
          <div style={{fontFamily:"'Nunito',sans-serif",fontWeight:900,fontSize:48,color:"#2d2d2d",letterSpacing:"-0.03em",lineHeight:1,marginTop:6}}>12</div>
          <div style={{fontFamily:"'Space Mono',monospace",fontSize:11,color:"#2d2d2d",opacity:0.7}}>дней подряд</div>
        </div>

        {/* mini-tile online */}
        <div style={{gridColumn:"span 3",background:"#fde68a",borderRadius:18,padding:10,boxShadow:"0 4px 0 rgba(233,30,140,0.12)",display:"flex",alignItems:"center",gap:8}}>
          <PlayIcon size={26} color="#e91e8c"/>
          <div>
            <div style={{fontFamily:"'Nunito',sans-serif",fontWeight:900,fontSize:13,color:"#2d2d2d",letterSpacing:"-0.01em"}}>онлайн</div>
            <div style={{fontFamily:"'Space Mono',monospace",fontSize:9,color:"#9d6b8a"}}>4 курса</div>
          </div>
        </div>

        {/* mini-tile abonement */}
        <div style={{gridColumn:"span 3",background:"#fff",borderRadius:18,padding:10,boxShadow:"0 4px 0 rgba(233,30,140,0.12)",border:"1.5px solid #f0c8dc"}}>
          <div style={{fontFamily:"'Space Mono',monospace",fontSize:9,color:"#9d6b8a",letterSpacing:"0.14em"}}>АБОНЕМЕНТ</div>
          <div style={{display:"flex",alignItems:"baseline",gap:4,marginTop:2}}>
            <div style={{fontFamily:"'Nunito',sans-serif",fontWeight:900,fontSize:22,color:"#e91e8c",lineHeight:1,letterSpacing:"-0.02em"}}>7</div>
            <div style={{fontFamily:"'Space Mono',monospace",fontSize:10,color:"#9d6b8a"}}>/12</div>
          </div>
        </div>

        {/* row of 3 small classes */}
        {CLASSES.slice(1,4).map(c=>(
          <div key={c.id} style={{gridColumn:"span 2",background:classCategoryColor(c.name),borderRadius:14,padding:"8px 8px 10px",boxShadow:"0 3px 0 rgba(233,30,140,0.12)",border:"1.5px solid rgba(255,255,255,0.6)"}}>
            <div style={{fontFamily:"'Nunito',sans-serif",fontWeight:900,fontSize:16,color:"#2d2d2d",lineHeight:1,letterSpacing:"-0.02em"}}>{c.time}</div>
            <div style={{fontFamily:"'Space Mono',monospace",fontSize:10,color:"#2d2d2d",marginTop:2,fontWeight:700}}>{c.name.split(" ")[0].toLowerCase()}</div>
          </div>
        ))}

        {/* big news */}
        <div style={{gridColumn:"span 6",background:"#fff",borderRadius:20,padding:"14px 16px",boxShadow:"0 4px 0 rgba(233,30,140,0.15)",border:"1.5px solid #f0c8dc"}}>
          <div style={{fontFamily:"'Space Mono',monospace",fontSize:10,letterSpacing:"0.16em",color:"#e91e8c",marginBottom:6}}>NEWS · 03</div>
          {NEWS.slice(0,2).map((n,i,a)=>(
            <div key={n.id} style={{padding:"6px 0",borderTop:i?"1px dashed #f0c8dc":"none",display:"flex",alignItems:"center",gap:10}}>
              <div style={{width:8,height:8,borderRadius:"50%",background:newsBadgeColor(n.category)}}/>
              <div style={{flex:1,fontFamily:"'Nunito',sans-serif",fontWeight:900,fontSize:13,color:"#2d2d2d",letterSpacing:"-0.01em"}}>{n.title.toLowerCase()}</div>
              <div style={{color:"#e91e8c",fontFamily:"'Nunito',sans-serif",fontWeight:900,fontSize:14}}>›</div>
            </div>
          ))}
        </div>
      </div>
    </HomeFrame>
  );
}

Object.assign(window, {
  HomeV02, HomeV03, HomeV04, HomeV05, HomeV06, HomeV07, HomeV08,
  VariantTabBar, HomeFrame, TabBarOverride
});