/* ─────────────────────────────────────────────────
   Home variants — V15..V21 (final 7 alternative Homes)
   ───────────────────────────────────────────────── */

/* ============ V15 — TYPO ONLY / words as UI ============ */
function HomeV15() {
  return (
    <HomeFrame bg="#fff" tabSkin={{ bg:"#fff", border:"1px solid #2d2d2d", activeBg:"#e91e8c" }}>
      <div style={{padding:"22px 18px 0",display:"flex",justifyContent:"space-between",fontFamily:"'Space Mono',monospace",fontSize:10,color:"#9d6b8a",letterSpacing:"0.16em"}}>
        <span>YOGA · 26·04·29</span><span>06:37</span>
      </div>

      {/* huge typographic stack — clickable lines */}
      <div style={{padding:"12px 18px 0"}}>
        {[
          { l:"записаться",   c:"#e91e8c", big:true,   r:"5 классов" },
          { l:"продолжить",   c:"#2d2d2d", big:false,  r:"утренняя · 21 день" },
          { l:"купить",       c:"#2d2d2d", big:false,  r:"3 курса" },
          { l:"абонемент",    c:"#9d6b8a", big:false,  r:"7 / 12" },
          { l:"новости",      c:"#9d6b8a", big:false,  r:"3" },
        ].map((row,i)=>(
          <div key={i} style={{
            padding:"14px 0",
            borderTop:i?"1px solid #2d2d2d":"none",
            display:"flex",alignItems:"baseline",justifyContent:"space-between",gap:12,
          }}>
            <div style={{
              fontFamily:"'Nunito',sans-serif",fontWeight:900,
              fontSize: row.big?60:38,
              color: row.c,
              letterSpacing:"-0.04em",lineHeight:0.95,
              fontStyle: i===2?"italic":"normal",
            }}>{row.l}</div>
            <div style={{fontFamily:"'Space Mono',monospace",fontSize:11,color:"#9d6b8a",letterSpacing:"0.08em",textAlign:"right",flexShrink:0,paddingBottom:4}}>{row.r}<br/><span style={{color:row.c,fontWeight:700}}>→</span></div>
          </div>
        ))}
      </div>

      {/* tiny footer marquee */}
      <div style={{padding:"22px 18px 24px"}}>
        <div style={{borderTop:"1px solid #2d2d2d",paddingTop:14}}>
          <div style={{fontFamily:"'Space Mono',monospace",fontSize:10,color:"#9d6b8a",letterSpacing:"0.18em",textTransform:"uppercase"}}>сейчас в эфире</div>
          <div style={{fontFamily:"'Nunito',sans-serif",fontWeight:900,fontSize:18,color:"#2d2d2d",marginTop:4,letterSpacing:"-0.01em"}}>
            <span style={{color:"#e91e8c"}}>· · · </span>виньяса с аленой через 1ч 23мин<span style={{color:"#e91e8c"}}> · · ·</span>
          </div>
        </div>
      </div>
    </HomeFrame>
  );
}

/* ============ V16 — CASSETTE / stickerbook Y2K ============ */
function HomeV16() {
  return (
    <HomeFrame bg="#fde2ec" tabSkin={{ bg:"#fff", border:"3px dashed #e91e8c", activeBg:"#e91e8c" }}>
      <div style={{padding:"20px 18px 0",position:"relative"}}>
        <div style={{display:"inline-block",transform:"rotate(-3deg)",padding:"8px 14px",background:"#e91e8c",color:"#fff",fontFamily:"'Nunito',sans-serif",fontWeight:900,fontSize:24,letterSpacing:"-0.02em",border:"3px solid #fff",boxShadow:"4px 4px 0 #2d2d2d"}}>YOGA♥STUDIO</div>
        <div style={{display:"inline-block",transform:"rotate(2deg) translateY(-4px)",marginLeft:8,padding:"6px 10px",background:"#fde68a",fontFamily:"'Space Mono',monospace",fontWeight:700,fontSize:11,color:"#2d2d2d",border:"2px solid #2d2d2d",boxShadow:"3px 3px 0 #2d2d2d"}}>★ vol.04</div>
      </div>

      {/* stack of stickers - classes */}
      <div style={{padding:"22px 18px 0",position:"relative"}}>
        {[
          { l:"виньяса", t:"08:00", c:"#c4b5fd", rot:-2, ml:0    },
          { l:"инь",     t:"10:30", c:"#a7f3d0", rot:1.5, ml:18  },
          { l:"аштанга", t:"12:00", c:"#fde68a", rot:-1,  ml:6,   dim:true },
          { l:"медитация", t:"18:00", c:"#f9a8d4", rot:2,  ml:24 },
        ].map((s,i)=>(
          <div key={i} style={{
            display:"flex",alignItems:"center",gap:12,
            padding:"10px 14px",margin:`${i?-4:0}px 0 0 ${s.ml}px`,
            background:s.c,
            border:"3px solid #fff",
            boxShadow:"4px 4px 0 #2d2d2d",
            transform:`rotate(${s.rot}deg)`,
            opacity:s.dim?0.5:1,
            position:"relative",zIndex:10-i,
          }}>
            <div style={{fontFamily:"'Nunito',sans-serif",fontWeight:900,fontSize:24,letterSpacing:"-0.03em",color:"#2d2d2d",lineHeight:1}}>{s.t}</div>
            <div style={{flex:1,fontFamily:"'Nunito',sans-serif",fontWeight:900,fontSize:20,letterSpacing:"-0.02em",color:"#2d2d2d"}}>{s.l}</div>
            <div style={{fontFamily:"'Space Mono',monospace",fontSize:10,color:"#2d2d2d",fontWeight:700,padding:"2px 6px",background:"#fff",border:"1px solid #2d2d2d"}}>{s.dim?"FULL":"GO!"}</div>
          </div>
        ))}
      </div>

      {/* polaroid news */}
      <div style={{padding:"32px 18px 24px",display:"flex",gap:16}}>
        <div style={{flex:1,padding:"10px 10px 14px",background:"#fff",border:"1px solid #2d2d2d",boxShadow:"4px 4px 0 #2d2d2d",transform:"rotate(-2deg)"}}>
          <div style={{height:90,background:newsBadgeColor(NEWS[0].category),marginBottom:8,position:"relative"}}>
            <div style={{position:"absolute",inset:0,display:"grid",placeItems:"center",fontFamily:"'Nunito',sans-serif",fontWeight:900,fontSize:32,color:"#fff",letterSpacing:"-0.03em"}}>!</div>
          </div>
          <div style={{fontFamily:"'Nunito',sans-serif",fontWeight:900,fontSize:11,letterSpacing:"-0.01em",color:"#2d2d2d"}}>{NEWS[0].title.toLowerCase()}</div>
        </div>
        <div style={{flex:1,padding:"10px 10px 14px",background:"#fff",border:"1px solid #2d2d2d",boxShadow:"4px 4px 0 #2d2d2d",transform:"rotate(3deg)",marginTop:14}}>
          <div style={{height:90,background:newsBadgeColor(NEWS[1].category),marginBottom:8,position:"relative"}}>
            <div style={{position:"absolute",inset:0,display:"grid",placeItems:"center",fontFamily:"'Nunito',sans-serif",fontWeight:900,fontSize:32,color:"#fff",letterSpacing:"-0.03em"}}>%</div>
          </div>
          <div style={{fontFamily:"'Nunito',sans-serif",fontWeight:900,fontSize:11,letterSpacing:"-0.01em",color:"#2d2d2d"}}>{NEWS[1].title.toLowerCase()}</div>
        </div>
      </div>
    </HomeFrame>
  );
}

/* ============ V17 — DASHBOARD / table-first ============ */
function HomeV17() {
  return (
    <HomeFrame bg="#fff5fa" tabSkin={{ bg:"#fff", border:"1px solid #f0c8dc", activeBg:"#e91e8c" }}>
      <div style={{padding:"22px 18px 4px",display:"flex",justifyContent:"space-between",alignItems:"baseline"}}>
        <div>
          <div style={{fontFamily:"'Space Mono',monospace",fontSize:10,color:"#9d6b8a",letterSpacing:"0.16em"}}>DASHBOARD · MORNING</div>
          <div style={{fontFamily:"'Nunito',sans-serif",fontWeight:900,fontSize:24,color:"#2d2d2d",letterSpacing:"-0.02em",marginTop:2}}>среда, 29</div>
        </div>
        <div style={{display:"flex",gap:6}}>
          {["день","нед","мес"].map((l,i)=>(
            <div key={i} style={{padding:"4px 10px",borderRadius:8,background:i===0?"#e91e8c":"#fff",color:i===0?"#fff":"#9d6b8a",fontFamily:"'Space Mono',monospace",fontSize:10,fontWeight:700,letterSpacing:"0.12em",border:i===0?"none":"1px solid #f0c8dc"}}>{l}</div>
          ))}
        </div>
      </div>

      {/* KPI strip */}
      <div style={{padding:"12px 18px 0",display:"grid",gridTemplateColumns:"repeat(3,1fr)",gap:8}}>
        {[
          { l:"запланировано", v:"5", sub:"классов" },
          { l:"абонемент",     v:"7", sub:"/12 ост." },
          { l:"streak",        v:"12", sub:"дней" },
        ].map((k,i)=>(
          <div key={i} style={{padding:"10px 12px",background:"#fff",borderRadius:12,border:"1px solid #f0c8dc"}}>
            <div style={{fontFamily:"'Space Mono',monospace",fontSize:9,color:"#9d6b8a",letterSpacing:"0.16em",textTransform:"uppercase"}}>{k.l}</div>
            <div style={{display:"flex",alignItems:"baseline",gap:4,marginTop:2}}>
              <div style={{fontFamily:"'Nunito',sans-serif",fontWeight:900,fontSize:24,color:"#e91e8c",lineHeight:1,letterSpacing:"-0.02em"}}>{k.v}</div>
              <div style={{fontFamily:"'Space Mono',monospace",fontSize:10,color:"#9d6b8a"}}>{k.sub}</div>
            </div>
          </div>
        ))}
      </div>

      {/* table */}
      <div style={{padding:"14px 18px 0"}}>
        <div style={{background:"#fff",borderRadius:12,border:"1px solid #f0c8dc",overflow:"hidden"}}>
          <div style={{display:"grid",gridTemplateColumns:"60px 1fr 80px 26px",gap:8,padding:"10px 14px",borderBottom:"1px solid #f0c8dc",background:"#fff5fa",fontFamily:"'Space Mono',monospace",fontSize:9,color:"#9d6b8a",letterSpacing:"0.14em",textTransform:"uppercase"}}>
            <span>время</span><span>занятие</span><span>места</span><span></span>
          </div>
          {CLASSES.map(c=>{
            const free = c.spotsTotal - c.spotsTaken;
            const status = free<=0?"full":free<=2?"low":"ok";
            return (
              <div key={c.id} style={{display:"grid",gridTemplateColumns:"60px 1fr 80px 26px",gap:8,padding:"10px 14px",borderTop:"1px solid #fce4ec",alignItems:"center"}}>
                <div style={{fontFamily:"'Nunito',sans-serif",fontWeight:900,fontSize:14,color:"#2d2d2d",letterSpacing:"-0.01em"}}>{c.time}</div>
                <div>
                  <div style={{fontFamily:"'Nunito',sans-serif",fontWeight:900,fontSize:13,color:"#2d2d2d",letterSpacing:"-0.01em"}}>{c.name.toLowerCase()}</div>
                  <div style={{fontFamily:"'Space Mono',monospace",fontSize:10,color:"#9d6b8a"}}>{c.teacher.toLowerCase()} · {c.duration}мин</div>
                </div>
                <div style={{display:"flex",alignItems:"center",gap:6}}>
                  <div style={{flex:1,height:4,borderRadius:2,background:"#fce4ec",position:"relative"}}>
                    <div style={{position:"absolute",left:0,top:0,bottom:0,width:`${(c.spotsTaken/c.spotsTotal)*100}%`,background: status==="full"?"#9d6b8a":status==="low"?"#e91e8c":"#a7f3d0",borderRadius:2}}/>
                  </div>
                  <div style={{fontFamily:"'Space Mono',monospace",fontSize:9,color:"#9d6b8a"}}>{free}/{c.spotsTotal}</div>
                </div>
                <div style={{color: status==="full"?"#9d6b8a":"#e91e8c",fontFamily:"'Nunito',sans-serif",fontWeight:900}}>›</div>
              </div>
            );
          })}
        </div>
      </div>

      {/* news rows */}
      <div style={{padding:"14px 18px 24px"}}>
        <div style={{fontFamily:"'Space Mono',monospace",fontSize:10,color:"#9d6b8a",letterSpacing:"0.16em",margin:"4px 4px 6px"}}>NEWS · 03</div>
        <div style={{background:"#fff",borderRadius:12,border:"1px solid #f0c8dc",overflow:"hidden"}}>
          {NEWS.map((n,i,a)=>(
            <div key={n.id} style={{padding:"8px 14px",borderTop:i?"1px solid #fce4ec":"none",display:"flex",alignItems:"center",gap:10}}>
              <div style={{fontFamily:"'Space Mono',monospace",fontSize:9,color:"#9d6b8a"}}>{n.date.split(",")[0]}</div>
              <div style={{flex:1,fontFamily:"'Space Mono',monospace",fontSize:11,color:"#2d2d2d"}}>{n.title}</div>
              <div style={{padding:"2px 6px",borderRadius:4,background:newsBadgeColor(n.category),fontFamily:"'Space Mono',monospace",fontSize:8,fontWeight:700,letterSpacing:"0.1em",textTransform:"uppercase",color:"#2d2d2d"}}>{n.category.slice(0,3)}</div>
            </div>
          ))}
        </div>
      </div>
    </HomeFrame>
  );
}

/* ============ V18 — HERO CLASS / full-bleed next ============ */
function HomeV18() {
  return (
    <HomeFrame bg="#c4b5fd" tabSkin={{ bg:"rgba(255,255,255,0.95)", border:"none", activeBg:"#e91e8c" }}>
      {/* Top "next class" hero — full bleed */}
      <div style={{position:"relative",height:380,padding:"24px 22px 22px",overflow:"hidden",background:"linear-gradient(160deg, #c4b5fd 0%, #f9a8d4 100%)"}}>
        {/* big lotus mark */}
        <svg viewBox="0 0 200 200" style={{position:"absolute",right:-40,bottom:-40,width:280,height:280,opacity:0.35}}>
          <g fill="#fff">
            <ellipse cx="100" cy="90" rx="14" ry="40"/>
            <ellipse cx="76" cy="95" rx="16" ry="36" transform="rotate(-25 76 95)"/>
            <ellipse cx="124" cy="95" rx="16" ry="36" transform="rotate(25 124 95)"/>
            <ellipse cx="56" cy="105" rx="14" ry="28" transform="rotate(-50 56 105)"/>
            <ellipse cx="144" cy="105" rx="14" ry="28" transform="rotate(50 144 105)"/>
          </g>
        </svg>

        <div style={{position:"relative",display:"flex",justifyContent:"space-between",alignItems:"flex-start"}}>
          <div style={{padding:"4px 10px",background:"rgba(255,255,255,0.5)",borderRadius:14,fontFamily:"'Space Mono',monospace",fontSize:10,fontWeight:700,letterSpacing:"0.16em",color:"#2d2d2d"}}>СЛЕДУЮЩЕЕ ЗАНЯТИЕ</div>
          <div style={{padding:"4px 10px",background:"#e91e8c",color:"#fff",borderRadius:14,fontFamily:"'Space Mono',monospace",fontSize:10,fontWeight:700,letterSpacing:"0.12em"}}>через 1ч 23мин</div>
        </div>

        <div style={{position:"absolute",left:22,bottom:90,right:22}}>
          <div style={{fontFamily:"'Nunito',sans-serif",fontWeight:900,fontSize:96,color:"#fff",lineHeight:0.85,letterSpacing:"-0.05em",textShadow:"0 4px 0 rgba(45,45,45,0.15)"}}>08:00</div>
          <div style={{fontFamily:"'Nunito',sans-serif",fontWeight:900,fontSize:32,color:"#2d2d2d",lineHeight:1,letterSpacing:"-0.03em",marginTop:6}}>виньяса флоу</div>
          <div style={{fontFamily:"'Space Mono',monospace",fontSize:14,color:"#2d2d2d",marginTop:6,opacity:0.8}}>с аленой · зал 1 · 60 мин · 8 мест свободно</div>
        </div>

        <div style={{position:"absolute",left:22,right:22,bottom:22,display:"flex",gap:10}}>
          <div style={{flex:1,padding:"14px",background:"#e91e8c",color:"#fff",borderRadius:18,boxShadow:"0 4px 0 rgba(45,45,45,0.15)",fontFamily:"'Nunito',sans-serif",fontWeight:900,fontSize:15,textAlign:"center",letterSpacing:"-0.01em"}}>записаться</div>
          <div style={{padding:"14px 18px",background:"rgba(255,255,255,0.7)",color:"#2d2d2d",borderRadius:18,fontFamily:"'Nunito',sans-serif",fontWeight:900,fontSize:15,backdropFilter:"blur(6px)"}}>♡</div>
          <div style={{padding:"14px 18px",background:"rgba(255,255,255,0.7)",color:"#2d2d2d",borderRadius:18,fontFamily:"'Nunito',sans-serif",fontWeight:900,fontSize:15,backdropFilter:"blur(6px)"}}>↗</div>
        </div>
      </div>

      {/* below: rest of day */}
      <div style={{background:"#fff5fa",padding:"18px 22px"}}>
        <div style={{display:"flex",justifyContent:"space-between",alignItems:"baseline",marginBottom:10}}>
          <div style={{fontFamily:"'Nunito',sans-serif",fontWeight:900,fontSize:14,color:"#9d6b8a",textTransform:"lowercase"}}>дальше сегодня</div>
          <div style={{fontFamily:"'Space Mono',monospace",fontSize:10,color:"#e91e8c",letterSpacing:"0.12em"}}>4 ЗАНЯТИЯ</div>
        </div>
        <div style={{display:"flex",gap:10,overflowX:"auto",scrollbarWidth:"none"}}>
          {CLASSES.slice(1,5).map(c=>(
            <div key={c.id} style={{flexShrink:0,width:120,padding:"12px 14px",borderRadius:18,background:classCategoryColor(c.name),border:"1.5px solid rgba(255,255,255,0.7)",boxShadow:"0 4px 0 rgba(233,30,140,0.15)"}}>
              <div style={{fontFamily:"'Nunito',sans-serif",fontWeight:900,fontSize:18,color:"#2d2d2d",letterSpacing:"-0.02em",lineHeight:1}}>{c.time}</div>
              <div style={{fontFamily:"'Nunito',sans-serif",fontWeight:900,fontSize:13,color:"#2d2d2d",marginTop:4,letterSpacing:"-0.01em"}}>{c.name.toLowerCase()}</div>
              <div style={{fontFamily:"'Space Mono',monospace",fontSize:10,color:"#9d6b8a",marginTop:1}}>{c.teacher.toLowerCase()}</div>
            </div>
          ))}
        </div>
      </div>
    </HomeFrame>
  );
}

/* ============ V19 — POSTER / illustrated, big shapes ============ */
function HomeV19() {
  return (
    <HomeFrame bg="#fde2ec" tabSkin={{ activeBg:"#e91e8c" }}>
      <div style={{position:"relative",padding:"22px 18px 0",overflow:"hidden",height:390}}>
        {/* big background shapes */}
        <div style={{position:"absolute",left:-20,top:60,width:160,height:160,borderRadius:"50%",background:"#fde68a"}}/>
        <div style={{position:"absolute",right:-30,top:120,width:200,height:200,borderRadius:"50%",background:"#a7f3d0",opacity:0.7,mixBlendMode:"multiply"}}/>
        <div style={{position:"absolute",left:80,top:200,width:120,height:120,borderRadius:"50%",background:"#e91e8c",opacity:0.85,mixBlendMode:"multiply"}}/>

        <div style={{position:"relative"}}>
          <div style={{fontFamily:"'Space Mono',monospace",fontSize:10,color:"#2d2d2d",letterSpacing:"0.18em",fontWeight:700}}>POSTER · APR 29 · 2026</div>
          <div style={{fontFamily:"'Nunito',sans-serif",fontWeight:900,fontSize:60,color:"#2d2d2d",lineHeight:0.85,letterSpacing:"-0.04em",marginTop:12}}>
            день<br/>как <em style={{fontStyle:"italic",color:"#fff"}}>цвет</em>
          </div>
        </div>

        <div style={{position:"absolute",left:18,bottom:10,right:18,padding:"14px 18px",background:"rgba(255,255,255,0.8)",backdropFilter:"blur(8px)",borderRadius:20,border:"1.5px solid #fff"}}>
          <div style={{display:"flex",alignItems:"center",gap:12}}>
            <div style={{width:42,height:42,borderRadius:"50%",background:"#e91e8c",color:"#fff",display:"grid",placeItems:"center",fontFamily:"'Nunito',sans-serif",fontWeight:900,fontSize:11}}>NOW</div>
            <div style={{flex:1}}>
              <div style={{fontFamily:"'Nunito',sans-serif",fontWeight:900,fontSize:16,color:"#2d2d2d",letterSpacing:"-0.01em"}}>виньяса · 08:00</div>
              <div style={{fontFamily:"'Space Mono',monospace",fontSize:11,color:"#9d6b8a"}}>алена · через 1ч 23мин</div>
            </div>
            <div style={{padding:"8px 14px",background:"#e91e8c",color:"#fff",borderRadius:12,fontFamily:"'Nunito',sans-serif",fontWeight:900,fontSize:13}}>гоу</div>
          </div>
        </div>
      </div>

      {/* posters of 4 categories */}
      <div style={{padding:"16px 18px 0",display:"grid",gridTemplateColumns:"1fr 1fr",gap:10}}>
        {[
          { l:"flow",       c:"#c4b5fd", icon:"~" },
          { l:"yin",        c:"#a7f3d0", icon:"○" },
          { l:"breath",     c:"#fde68a", icon:"◊" },
          { l:"meditation", c:"#f9a8d4", icon:"☼" },
        ].map((t,i)=>(
          <div key={i} style={{position:"relative",aspectRatio:"4/3",borderRadius:18,background:t.c,padding:"14px",border:"1.5px solid rgba(255,255,255,0.7)",boxShadow:"0 5px 0 rgba(233,30,140,0.15)",overflow:"hidden"}}>
            <div style={{position:"absolute",right:-14,top:-26,fontFamily:"'Nunito',sans-serif",fontWeight:900,fontSize:120,color:"rgba(255,255,255,0.5)",lineHeight:1}}>{t.icon}</div>
            <div style={{position:"relative",fontFamily:"'Nunito',sans-serif",fontWeight:900,fontSize:32,color:"#2d2d2d",letterSpacing:"-0.04em",lineHeight:1}}>{t.l}</div>
            <div style={{position:"absolute",left:14,bottom:12,fontFamily:"'Space Mono',monospace",fontSize:10,color:"#2d2d2d",fontWeight:700,letterSpacing:"0.1em"}}>EXPLORE →</div>
          </div>
        ))}
      </div>

      <div style={{padding:"14px 18px 24px"}}>
        <div style={{padding:"10px 14px",background:"#fff",borderRadius:14,border:"1.5px dashed #f0c8dc",fontFamily:"'Space Mono',monospace",fontSize:11,color:"#2d2d2d"}}>
          ✦ {NEWS[2].title.toLowerCase()} — {NEWS[2].date}
        </div>
      </div>
    </HomeFrame>
  );
}

/* ============ V20 — CHECKLIST / habits ============ */
function HomeV20() {
  const checks = [
    { l:"медитация утром",   t:"06:30", done:true,  c:"#a7f3d0" },
    { l:"виньяса",          t:"08:00", done:false, c:"#c4b5fd", next:true },
    { l:"вода 2л",          t:"в течение дня", done:false, c:"#bae6fd" },
    { l:"растяжка",         t:"19:30", done:false, c:"#fed7aa" },
    { l:"дневник",          t:"22:00", done:false, c:"#fde68a" },
  ];
  return (
    <HomeFrame bg="#fff5fa" tabSkin={{ activeBg:"#e91e8c" }}>
      <div style={{padding:"22px 22px 0"}}>
        <div style={{display:"flex",justifyContent:"space-between",alignItems:"flex-start"}}>
          <div>
            <div style={{fontFamily:"'Nunito',sans-serif",fontWeight:900,fontSize:30,color:"#2d2d2d",letterSpacing:"-0.02em",lineHeight:1}}>привычки</div>
            <div style={{fontFamily:"'Space Mono',monospace",fontSize:11,color:"#9d6b8a",marginTop:6}}>сегодня: 1 из 5</div>
          </div>
          <div style={{position:"relative",width:64,height:64}}>
            <svg width="64" height="64" viewBox="0 0 64 64">
              <circle cx="32" cy="32" r="26" fill="none" stroke="#fce4ec" strokeWidth="6"/>
              <circle cx="32" cy="32" r="26" fill="none" stroke="#e91e8c" strokeWidth="6" strokeLinecap="round" strokeDasharray={`${0.2*163.36} 163.36`} transform="rotate(-90 32 32)"/>
            </svg>
            <div style={{position:"absolute",inset:0,display:"grid",placeItems:"center",fontFamily:"'Nunito',sans-serif",fontWeight:900,fontSize:16,color:"#e91e8c",letterSpacing:"-0.02em"}}>20%</div>
          </div>
        </div>
      </div>

      <div style={{padding:"18px 22px 0"}}>
        {checks.map((c,i)=>(
          <div key={i} style={{
            display:"flex",alignItems:"center",gap:14,
            padding:"14px 16px",margin:"6px 0",
            borderRadius:18,
            background: c.done? "rgba(167,243,208,0.4)" : c.next? c.c : "#fff",
            border: c.next? "2px solid #e91e8c" : "1.5px solid rgba(255,255,255,0.7)",
            boxShadow: c.next? "0 4px 0 rgba(233,30,140,0.25)" : "0 3px 0 rgba(233,30,140,0.1)",
            opacity: c.done? 0.7 : 1,
          }}>
            {/* big checkbox */}
            <div style={{width:28,height:28,borderRadius:9,background:c.done?"#e91e8c":"rgba(255,255,255,0.8)",border:c.done?"none":"2px solid #e91e8c",display:"grid",placeItems:"center",flexShrink:0}}>
              {c.done && <div style={{color:"#fff",fontFamily:"'Nunito',sans-serif",fontWeight:900,fontSize:16}}>✓</div>}
            </div>
            <div style={{flex:1}}>
              <div style={{fontFamily:"'Nunito',sans-serif",fontWeight:900,fontSize:16,color:"#2d2d2d",letterSpacing:"-0.01em",textDecoration:c.done?"line-through":"none"}}>{c.l}</div>
              <div style={{fontFamily:"'Space Mono',monospace",fontSize:11,color:"#9d6b8a"}}>{c.t}</div>
            </div>
            {c.next && <div style={{padding:"4px 8px",borderRadius:8,background:"#e91e8c",color:"#fff",fontFamily:"'Space Mono',monospace",fontSize:9,fontWeight:700,letterSpacing:"0.12em"}}>NEXT</div>}
          </div>
        ))}
      </div>

      <div style={{padding:"18px 22px 24px"}}>
        <div style={{padding:"14px 16px",background:"#fde2ec",borderRadius:18,border:"1.5px dashed #e91e8c"}}>
          <div style={{fontFamily:"'Space Mono',monospace",fontSize:9,color:"#e91e8c",letterSpacing:"0.16em",fontWeight:700}}>STREAK</div>
          <div style={{display:"flex",alignItems:"baseline",gap:8,marginTop:2}}>
            <div style={{fontFamily:"'Nunito',sans-serif",fontWeight:900,fontSize:32,color:"#e91e8c",letterSpacing:"-0.03em",lineHeight:1}}>12</div>
            <div style={{fontFamily:"'Space Mono',monospace",fontSize:12,color:"#2d2d2d"}}>дней подряд — лучший результат!</div>
          </div>
        </div>
      </div>
    </HomeFrame>
  );
}

/* ============ V21 — SPLIT / left teacher · right schedule ============ */
function HomeV21() {
  return (
    <HomeFrame bg="#fff" tabSkin={{ activeBg:"#e91e8c" }}>
      <div style={{padding:"20px 18px 0"}}>
        <div style={{display:"flex",justifyContent:"space-between",alignItems:"baseline"}}>
          <div style={{fontFamily:"'Nunito',sans-serif",fontWeight:900,fontSize:24,color:"#2d2d2d",letterSpacing:"-0.02em"}}>учителя <em style={{color:"#e91e8c",fontStyle:"italic"}}>сегодня</em></div>
          <div style={{fontFamily:"'Space Mono',monospace",fontSize:10,color:"#9d6b8a",letterSpacing:"0.12em"}}>04 / 04</div>
        </div>
      </div>

      {/* big horizontal teacher rail */}
      <div style={{padding:"14px 0 8px"}}>
        <div style={{display:"flex",gap:12,overflowX:"auto",padding:"6px 18px",scrollbarWidth:"none"}}>
          {[
            { name:"Алена", letter:"А", c:"#c4b5fd", classes:1, time:"08:00" },
            { name:"Маша",  letter:"М", c:"#a7f3d0", classes:2, time:"10:30" },
            { name:"Денис", letter:"Д", c:"#fde68a", classes:1, time:"12:00", full:true },
            { name:"Ира",   letter:"И", c:"#f9a8d4", classes:1, time:"18:00" },
          ].map((t,i)=>(
            <div key={i} style={{flexShrink:0,width:140,padding:"14px 16px",borderRadius:24,background:t.c,border:"1.5px solid rgba(255,255,255,0.7)",boxShadow:"0 5px 0 rgba(233,30,140,0.15)",opacity:t.full?0.55:1}}>
              <div style={{width:48,height:48,borderRadius:"50%",background:"#fff",display:"grid",placeItems:"center",fontFamily:"'Nunito',sans-serif",fontWeight:900,fontSize:22,color:"#e91e8c",letterSpacing:"-0.02em"}}>{t.letter}</div>
              <div style={{fontFamily:"'Nunito',sans-serif",fontWeight:900,fontSize:18,color:"#2d2d2d",marginTop:10,letterSpacing:"-0.02em"}}>{t.name.toLowerCase()}</div>
              <div style={{fontFamily:"'Space Mono',monospace",fontSize:11,color:"#2d2d2d",opacity:0.7,marginTop:2}}>{t.classes} класс · {t.time}</div>
            </div>
          ))}
        </div>
      </div>

      {/* split: left "follow" feed · right "today" agenda */}
      <div style={{padding:"10px 18px 18px",display:"grid",gridTemplateColumns:"1fr 1fr",gap:12}}>
        <div>
          <div style={{fontFamily:"'Space Mono',monospace",fontSize:10,color:"#9d6b8a",letterSpacing:"0.16em",margin:"4px 4px 8px"}}>ОТ АЛЕНЫ</div>
          <div style={{padding:"12px 14px",background:"#fde2ec",borderRadius:16,border:"1.5px solid rgba(255,255,255,0.7)",boxShadow:"0 4px 0 rgba(233,30,140,0.12)"}}>
            <div style={{fontFamily:"'Nunito',sans-serif",fontWeight:900,fontSize:13,color:"#2d2d2d",letterSpacing:"-0.01em",lineHeight:1.2}}>пришла новая последовательность для утренней практики — попробуем сегодня в 08:00 :)</div>
            <div style={{fontFamily:"'Space Mono',monospace",fontSize:10,color:"#e91e8c",marginTop:8,letterSpacing:"0.1em",fontWeight:700}}>♥ 24 · 2 ч назад</div>
          </div>
        </div>
        <div>
          <div style={{fontFamily:"'Space Mono',monospace",fontSize:10,color:"#9d6b8a",letterSpacing:"0.16em",margin:"4px 4px 8px"}}>ОТ МАШИ</div>
          <div style={{padding:"12px 14px",background:"#a7f3d0",borderRadius:16,border:"1.5px solid rgba(255,255,255,0.7)",boxShadow:"0 4px 0 rgba(233,30,140,0.12)"}}>
            <div style={{fontFamily:"'Nunito',sans-serif",fontWeight:900,fontSize:13,color:"#2d2d2d",letterSpacing:"-0.01em",lineHeight:1.2}}>инь-йога вечером — глубокое раскрытие бёдер. возьмите блок и плед.</div>
            <div style={{fontFamily:"'Space Mono',monospace",fontSize:10,color:"#e91e8c",marginTop:8,letterSpacing:"0.1em",fontWeight:700}}>♥ 18 · 4 ч назад</div>
          </div>
        </div>
      </div>

      <div style={{padding:"4px 18px 24px"}}>
        <div style={{display:"flex",alignItems:"center",gap:10,padding:"12px 14px",background:"#e91e8c",color:"#fff",borderRadius:16,boxShadow:"0 4px 0 rgba(233,30,140,0.3)"}}>
          <div style={{flex:1}}>
            <div style={{fontFamily:"'Nunito',sans-serif",fontWeight:900,fontSize:16,letterSpacing:"-0.01em"}}>записаться на сегодня</div>
            <div style={{fontFamily:"'Space Mono',monospace",fontSize:11,opacity:0.9,marginTop:2}}>5 классов · 4 учителя</div>
          </div>
          <div style={{padding:"6px 12px",background:"rgba(255,255,255,0.2)",borderRadius:10,fontFamily:"'Nunito',sans-serif",fontWeight:900}}>›</div>
        </div>
      </div>
    </HomeFrame>
  );
}

Object.assign(window, {
  HomeV15, HomeV16, HomeV17, HomeV18, HomeV19, HomeV20, HomeV21,
});