// Dashboard shell + home view
const NAV = [
  { id: "home", label: "Home", icon: "Home" },
  { id: "roadmap", label: "Counselor's Roadmap", icon: "Compass" },
  { id: "training", label: "Training Sessions", icon: "PlayCircle", badge: "New" },
  { id: "resources", label: "Resource Hub", icon: "Book" },
  { id: "impact", label: "Impact & Engagement", icon: "TrendingUp" },
];

const ADMIN_NAV = [
  { id: "admin_overview", label: "Overview", icon: "BarChart" },
  { id: "admin_training", label: "Training Sessions", icon: "PlayCircle" },
  { id: "admin_resources", label: "Resource Library", icon: "Book" },
  { id: "admin_reports", label: "Counselor Reports", icon: "Report" },
  { id: "admin_users", label: "Accounts", icon: "Users" },
];

function Shell({ view, setView, role, children, chatOpen, setChatOpen }) {
  const isAdmin = role === "admin";
  const nav = isAdmin ? ADMIN_NAV : NAV;
  const user = isAdmin ? window.DATA.ADMIN : window.DATA.COUNSELOR;
  const { streak, trailing } = window.useStreak();

  return (
    <div style={{ display: "grid", gridTemplateColumns: "240px 1fr", minHeight: "100vh" }}>
      <aside style={{
        background: "#1B3D2F",
        borderRight: "none",
        padding: "18px 14px",
        position: "sticky", top: 0, height: "100vh",
        display: "flex", flexDirection: "column",
      }}>
        {/* Logo */}
        <div style={{ display: "flex", alignItems: "center", gap: 9, padding: "4px 6px 20px" }}>
          <window.Logo size={28} />
          <div>
    <div style={{ fontSize: 13, fontWeight: 600, letterSpacing: -0.01, lineHeight: 1.1, color: "white" }}>Student Athlete Success Academy</div>
            <div style={{ fontSize: 10, color: "rgba(255,255,255,0.45)", letterSpacing: 0.06, textTransform: "uppercase" }}>
              {isAdmin ? "Admin Console" : "Counselor Portal"}
            </div>
          </div>
        </div>

        {/* Nav items */}
        <nav style={{ display: "flex", flexDirection: "column", gap: 2 }}>
          {nav.map(item => {
            const Icon = window.I[item.icon];
            const active = view === item.id;
            return (
              <button
                key={item.id}
                onClick={() => setView(item.id)}
                style={{
                  display: "flex", alignItems: "center", gap: 10,
                  padding: "9px 10px", borderRadius: 7,
                  color: active ? "white" : "rgba(255,255,255,0.62)",
                  background: active ? "rgba(255,255,255,0.12)" : "transparent",
                  border: "1px solid transparent",
                  fontSize: 13.5, fontWeight: active ? 500 : 400,
                  letterSpacing: -0.005, width: "100%", textAlign: "left",
                  transition: "background 120ms, color 120ms",
                }}
                onMouseEnter={e => { if (!active) e.currentTarget.style.background = "rgba(255,255,255,0.07)"; e.currentTarget.style.color = "white"; }}
                onMouseLeave={e => { if (!active) e.currentTarget.style.background = "transparent"; e.currentTarget.style.color = active ? "white" : "rgba(255,255,255,0.62)"; }}
              >
                <Icon size={16} stroke={active ? "white" : "rgba(255,255,255,0.55)"} />
                <span style={{ flex: 1 }}>{item.label}</span>
                {item.badge && (
                  <span style={{
                    fontSize: 10, padding: "2px 6px", borderRadius: 999,
                    background: "#E8A020", color: "#1B3D2F",
                    fontWeight: 600, letterSpacing: 0.02,
                  }}>{item.badge}</span>
                )}
              </button>
            );
          })}
        </nav>

        {/* Streak card */}
        {!isAdmin && (
          <div style={{
            marginTop: 20, padding: "13px 14px",
            background: "rgba(255,255,255,0.07)", border: "1px solid rgba(255,255,255,0.12)",
            borderRadius: 10,
          }}>
            <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
              <window.I.Flame size={14} stroke={streak > 0 ? "#E8A020" : "rgba(255,255,255,0.4)"} />
              <div style={{ fontSize: 12, fontWeight: 500, color: "white", letterSpacing: -0.005 }}>
                {streak > 0 ? `${streak}-day streak` : "No active streak"}
              </div>
            </div>
            <div style={{ marginTop: 10, display: "flex", gap: 3 }}>
              {trailing.map((d, i) => (
                <div key={d.day} title={d.day} style={{
                  flex: 1, height: 20, borderRadius: 2,
                  background: d.active
                    ? `rgba(232,160,32,${0.35 + (i / 14) * 0.55})`
                    : "rgba(255,255,255,0.1)",
                }} />
              ))}
            </div>
            <div style={{ fontSize: 11, color: "rgba(255,255,255,0.45)", marginTop: 8, lineHeight: 1.4 }}>
              {streak > 0
                ? `You've been active ${streak} day${streak === 1 ? "" : "s"} in a row — keep it going!`
                : "Log in and complete an activity to start a streak."}
            </div>
          </div>
        )}

        <div style={{ flex: 1 }} />

        {/* User footer */}
        <div style={{
          display: "flex", alignItems: "center", gap: 10,
          padding: "10px 8px", borderTop: "1px solid rgba(255,255,255,0.12)", marginTop: 12,
        }}>
          <window.UI.Avatar
            initials={user.initials}
            size={32}
            color={isAdmin ? "#E07830" : "#2B8C8C"}
          />
          <div style={{ flex: 1, minWidth: 0 }}>
            <div style={{ fontSize: 12.5, fontWeight: 500, lineHeight: 1.2, color: "white", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{user.name}</div>
            <div style={{ fontSize: 11, color: "rgba(255,255,255,0.45)", marginTop: 2, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>
              {user.school || user.district}
            </div>
          </div>
          <button style={{ padding: 5, borderRadius: 6, opacity: 0.6 }} title="Sign out">
            <window.I.Logout size={14} stroke="white" />
          </button>
        </div>
      </aside>

      <main style={{ minWidth: 0, position: "relative" }}>
        {children}
        {!isAdmin && <ChatFab open={chatOpen} onClick={() => setChatOpen(!chatOpen)} />}
      </main>
    </div>
  );
}

function ChatFab({ open, onClick }) {
  if (open) return null;
  return (
    <button
      onClick={onClick}
      style={{
        position: "fixed", bottom: 24, right: 24, zIndex: 40,
        display: "inline-flex", alignItems: "center", gap: 9,
        padding: "12px 18px 12px 14px",
        background: "var(--ink)", color: "white", borderRadius: 999,
        boxShadow: "0 8px 24px -6px rgba(27,61,47,0.35)",
        fontSize: 13.5, fontWeight: 500, letterSpacing: -0.005,
        border: "1px solid rgba(255,255,255,0.1)",
      }}
    >
      <window.I.Sparkles size={16} stroke="#E8A020" />
      
    </button>
  );
}

function TopBar({ title, subtitle, right }) {
  return (
    <div style={{
      display: "flex", alignItems: "center", gap: 18,
      padding: "20px 32px", borderBottom: "1px solid var(--line)",
      background: "var(--bg)", position: "sticky", top: 0, zIndex: 10,
    }}>
      <div style={{ flex: 1, minWidth: 0 }}>
        <div style={{ fontSize: 19, fontWeight: 600, letterSpacing: -0.01 }}>{title}</div>
        {subtitle && <div style={{ fontSize: 13, color: "var(--ink-3)", marginTop: 2 }}>{subtitle}</div>}
      </div>
      {right}
    </div>
  );
}

function HomeView({ setView, openSession }) {
  const { COUNSELOR, IMPACT, TRAINING_SESSIONS } = window.DATA;
  const { Btn, Progress } = window.UI;
  const [hour] = useState(new Date().getHours());
  const greeting = hour < 12 ? "Good morning" : hour < 18 ? "Good afternoon" : "Good evening";

  const latestSession = TRAINING_SESSIONS[0];
  const inProgress = TRAINING_SESSIONS.find(s => !s.completed && s.watchedSeconds > 0);

  return (
    <>
      <TopBar
        title={`${greeting}, ${COUNSELOR.name.split(" ")[0]}.`}
        subtitle={`${COUNSELOR.school} · ${new Date().toLocaleDateString("en-US", { weekday: "long", month: "long", day: "numeric" })}`}
        right={
          <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
            <div style={{ position: "relative" }}>
              <input
                placeholder="Search trainings, resources…"
                style={{
                  width: 260, padding: "8px 12px 8px 34px",
                  background: "var(--bg-2)", border: "1px solid var(--line)",
                  borderRadius: 8, fontSize: 13,
                }}
              />
              <window.I.Search size={14} stroke="var(--ink-3)" style={{ position: "absolute", left: 11, top: "50%", transform: "translateY(-50%)" }} />
            </div>
            <button style={{ padding: 8, border: "1px solid var(--line)", borderRadius: 8, background: "var(--card)" }}>
              <window.I.Bell size={15} stroke="var(--ink-2)" />
            </button>
          </div>
        }
      />

      <div style={{ padding: 32, display: "flex", flexDirection: "column", gap: 28 }}>
        {/* Hero */}
        <div style={{
          padding: 28,
          borderRadius: "var(--radius-lg)",
          background: "linear-gradient(135deg, #1B3D2F 0%, #224d3a 60%, #2C5C44 100%)",
          color: "white", position: "relative", overflow: "hidden",
          animation: "slideUp 320ms ease",
        }}>
          <svg style={{ position: "absolute", inset: 0, opacity: 0.3 }}>
            <defs>
              <pattern id="hg" width="36" height="36" patternUnits="userSpaceOnUse">
                <path d="M36 0 L0 0 0 36" fill="none" stroke="white" strokeWidth="0.5" opacity="0.2" />
              </pattern>
            </defs>
            <rect width="100%" height="100%" fill="url(#hg)" />
          </svg>

          <div style={{ display: "grid", gridTemplateColumns: "1fr 360px", gap: 32, alignItems: "center", position: "relative" }}>
            <div>
              <div style={{ display: "inline-flex", alignItems: "center", gap: 7, fontSize: 11, letterSpacing: 0.06, textTransform: "uppercase", color: "#E8A020", fontWeight: 500 }}>
                <span style={{ width: 6, height: 6, borderRadius: 999, background: "#E8A020", animation: "pulse 2.5s infinite" }} />
                New this month
              </div>
              <h2 className="serif" style={{ fontSize: 34, lineHeight: 1.1, margin: "10px 0 10px", letterSpacing: -0.015 }}>
                {latestSession.title}
              </h2>
              <p style={{ color: "rgba(255,255,255,0.75)", fontSize: 14, lineHeight: 1.55, maxWidth: 560 }}>
                {latestSession.subtitle}
              </p>
              <div style={{ display: "flex", alignItems: "center", gap: 18, marginTop: 22, fontSize: 12.5, color: "rgba(255,255,255,0.7)" }}>
                <span style={{ display: "inline-flex", alignItems: "center", gap: 6 }}>
                  <window.I.Clock size={13} /> {latestSession.duration} min
                </span>
                <span style={{ display: "inline-flex", alignItems: "center", gap: 6 }}>
                  <window.I.Users size={13} /> {latestSession.views} counselors watched
                </span>
                <span>with {latestSession.instructor}</span>
              </div>
              <div style={{ display: "flex", gap: 10, marginTop: 22 }}>
                <button
                  onClick={() => openSession(latestSession)}
                  style={{
                    padding: "11px 18px", borderRadius: 8,
                    background: "white", color: "var(--ink)",
                    fontWeight: 500, fontSize: 13.5,
                    display: "inline-flex", alignItems: "center", gap: 8,
                  }}
                >
                  <window.I.Play size={13} /> Watch now
                </button>
                <button
                  onClick={() => setView("training")}
                  style={{
                    padding: "11px 18px", borderRadius: 8,
                    background: "rgba(255,255,255,0.08)", color: "white",
                    border: "1px solid rgba(255,255,255,0.16)",
                    fontWeight: 500, fontSize: 13.5,
                  }}
                >
                  All sessions
                </button>
              </div>
            </div>
            <div style={{
              aspectRatio: "1272/712", borderRadius: 12,
              backgroundImage: `url('assets/recruiting-thumb.png')`,
              backgroundSize: "cover",
              backgroundPosition: "center center",
              backgroundRepeat: "no-repeat",
              position: "relative", overflow: "hidden",
              boxShadow: "0 12px 32px -10px rgba(0,0,0,0.3)",
              border: "1px solid rgba(255,255,255,0.12)",
            }}>
              {/* Subtle bottom gradient for legibility */}
              <div style={{
                position: "absolute", left: 0, right: 0, bottom: 0, height: "55%",
                background: "linear-gradient(to top, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0) 100%)",
                pointerEvents: "none",
              }} />

              {/* Playback pill — bottom-left, doesn't obscure face */}
              <div style={{
                position: "absolute", bottom: 14, left: 14,
                display: "inline-flex", alignItems: "center", gap: 6,
                background: "rgba(255,255,255,0.95)",
                borderRadius: 999, padding: "5px 5px 5px 5px",
                boxShadow: "0 4px 14px -4px rgba(0,0,0,0.3)",
              }}>
                <button style={{
                  width: 32, height: 32, borderRadius: 999,
                  background: "#1B3D2F", color: "white",
                  display: "inline-flex", alignItems: "center", justifyContent: "center",
                  paddingLeft: 2,
                }}>
                  <window.I.Play size={13} stroke="white" sw={2.5} />
                </button>
                <div style={{ fontSize: 12, fontWeight: 500, color: "var(--ink)", padding: "0 10px 0 2px", letterSpacing: -0.005 }}>
                  Play episode
                </div>
              </div>

              {/* Duration chip — bottom-right */}
              <div style={{
                position: "absolute", bottom: 16, right: 14,
                fontSize: 11, color: "white",
                background: "rgba(0,0,0,0.55)",
                padding: "4px 9px", borderRadius: 999,
                fontFamily: "Geist Mono, monospace",
                display: "inline-flex", alignItems: "center", gap: 5,
              }}>
                <window.I.Clock size={11} stroke="white" />
                {latestSession.duration}:00
              </div>
            </div>
          </div>
        </div>

        {/* Continue + quick links */}
        <div style={{ display: "grid", gridTemplateColumns: "1.6fr 1fr", gap: 20 }}>
          {inProgress && (
            <div style={{
              padding: 20, ...window.UI, border: "1px solid var(--line)",
              borderRadius: "var(--radius)", background: "var(--card)",
              display: "flex", flexDirection: "column", gap: 14,
            }}>
              <div style={{ fontSize: 11, color: "var(--ink-3)", letterSpacing: 0.06, textTransform: "uppercase", fontWeight: 500 }}>
                Continue watching
              </div>
              <div style={{ display: "flex", gap: 16, alignItems: "center" }}>
                <div style={{
                  width: 150, aspectRatio: "16/10", borderRadius: 8,
                  backgroundImage: "url('assets/continue-watching.png')",
                  backgroundSize: "cover",
                  backgroundPosition: "center",
                  flexShrink: 0,
                  position: "relative", overflow: "hidden",
                }}>
                  <div style={{
                    position: "absolute", bottom: 8, left: 8, right: 8, height: 3,
                    background: "rgba(255,255,255,0.3)", borderRadius: 2,
                  }}>
                    <div style={{
                      width: `${(inProgress.watchedSeconds / (inProgress.duration * 60)) * 100}%`,
                      height: "100%", background: "#E8A020", borderRadius: 2,
                    }} />
                  </div>
                </div>
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{ marginBottom: 4 }}>
                    <window.UI.Tag cat={inProgress.category} />
                  </div>
                  <div style={{ fontSize: 15, fontWeight: 500, letterSpacing: -0.008, marginBottom: 4 }}>{inProgress.title}</div>
                  <div style={{ fontSize: 12.5, color: "var(--ink-3)" }}>
                    {Math.floor(inProgress.watchedSeconds / 60)} min watched · {inProgress.duration - Math.floor(inProgress.watchedSeconds / 60)} min left
                  </div>
                </div>
                <Btn variant="outline" size="sm" onClick={() => openSession(inProgress)} icon={<window.I.Play size={12} />}>Resume</Btn>
              </div>
            </div>
          )}

          <div style={{
            padding: 20, borderRadius: "var(--radius)",
            background: "var(--card)", border: "1px solid var(--line)",
          }}>
            <div style={{ fontSize: 11, color: "var(--ink-3)", letterSpacing: 0.06, textTransform: "uppercase", fontWeight: 500, marginBottom: 12 }}>
              This month's progress
            </div>
            <div style={{ display: "flex", alignItems: "baseline", gap: 6 }}>
              <div className="serif" style={{ fontSize: 38, lineHeight: 1, letterSpacing: -0.015 }}>{IMPACT.minutesThisMonth}</div>
              <div style={{ fontSize: 13, color: "var(--ink-3)" }}>min</div>
            </div>
            <Progress value={IMPACT.minutesThisMonth} max={240} color="var(--accent)" />
            <div style={{ fontSize: 12, color: "var(--ink-3)", marginTop: 8 }}>
              {240 - IMPACT.minutesThisMonth} min to hit your monthly target
            </div>
          </div>
        </div>

        {/* Quick pillars */}
        <div>
          <div style={{ fontSize: 13, fontWeight: 500, color: "var(--ink-2)", marginBottom: 12, letterSpacing: -0.005 }}>Jump to a pillar</div>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 12 }}>
            {[
              { cat: "recruiting", icon: "Compass", count: 5 },
              { cat: "mental_health", icon: "Heart", count: 5 },
              { cat: "academic", icon: "Graduation", count: 4 },
              { cat: "ncaa", icon: "Shield", count: 4 },
            ].map(p => {
              const Icon = window.I[p.icon];
              const def = window.DATA.TAGS[p.cat];
              return (
                <button
                  key={p.cat}
                  onClick={() => setView("resources")}
                  className="hover-lift"
                  style={{
                    padding: 16, borderRadius: "var(--radius)",
                    background: "var(--card)", border: "1px solid var(--line)",
                    textAlign: "left", cursor: "pointer",
                    display: "flex", flexDirection: "column", gap: 10,
                  }}
                >
                  <div style={{
                    width: 34, height: 34, borderRadius: 8,
                    background: (p.cat === "ncaa" || p.cat === "mental_health") ? "transparent" : `var(--${def.color}-soft)`,
                    display: "flex", alignItems: "center", justifyContent: "center",
                    overflow: "hidden",
                  }}>
                    {p.cat === "ncaa" ? (
                      <img
                        src="assets/ncaa-logo.png"
                        alt="NCAA"
                        style={{ width: 34, height: 34, borderRadius: 999, objectFit: "cover", display: "block" }}
                      />
                    ) : p.cat === "recruiting" ? (
                      <img
                        src="assets/recruiting-logo.avif"
                        alt="Recruiting"
                        style={{ width: 50, height: 50, borderRadius: 999, objectFit: "contain", background: "white", padding: 7, display: "block" }}
                      />
                    ) : p.cat === "mental_health" ? (
                      <img
                        src="assets/mental-health-logo.webp"
                        alt="Mental Health"
                        style={{ width: 50, height: 50, borderRadius: 999, objectFit: "cover", background: "white", display: "block" }}
                      />
                    ) : p.cat === "academic" ? (
                      <img
                        src="assets/academic-logo.png"
                        alt="Academic Planning"
                        style={{ width: 50, height: 50, borderRadius: 999, objectFit: "contain", background: "white", padding: 7, display: "block" }}
                      />
                    ) : (
                      <Icon size={16} stroke={`var(--${def.color === "gold" ? "gold" : def.color === "success" ? "success" : def.color === "purple" ? "purple" : "accent"})`} />
                    )}
                  </div>
                  <div>
                    <div style={{ fontSize: 14, fontWeight: 500, letterSpacing: -0.005 }}>{def.label}</div>
                    <div style={{ fontSize: 12, color: "var(--ink-3)", marginTop: 2 }}>{p.count} resources</div>
                  </div>
                </button>
              );
            })}
          </div>
        </div>

        {/* Recent activity + milestones */}
        <div style={{ display: "grid", gridTemplateColumns: "1.3fr 1fr", gap: 20 }}>
          <div style={{
            padding: "20px 22px", borderRadius: "var(--radius)",
            background: "var(--card)", border: "1px solid var(--line)",
          }}>
            <div style={{ display: "flex", alignItems: "baseline", justifyContent: "space-between", marginBottom: 14 }}>
              <div style={{ fontSize: 14, fontWeight: 500, letterSpacing: -0.005 }}>Recent activity</div>
              <button onClick={() => setView("impact")} style={{ fontSize: 12, color: "var(--accent-ink)" }}>View all →</button>
            </div>
            {IMPACT.recentActivity.slice(0, 4).map((a, i) => (
              <div key={i} style={{
                display: "flex", gap: 12, padding: "10px 0",
                borderTop: i > 0 ? "1px solid var(--line)" : "none",
              }}>
                <div style={{
                  width: 30, height: 30, borderRadius: 7, flexShrink: 0,
                  background: activityColor(a.kind, "soft"),
                  display: "flex", alignItems: "center", justifyContent: "center",
                }}>
                  {React.createElement(window.I[activityIcon(a.kind)], { size: 14, stroke: activityColor(a.kind) })}
                </div>
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{ fontSize: 13, lineHeight: 1.4 }}>
                    <span style={{ color: "var(--ink-3)" }}>{a.action} </span>
                    <span style={{ fontWeight: 500 }}>{a.target}</span>
                  </div>
                  {a.detail && <div style={{ fontSize: 12, color: "var(--ink-3)", marginTop: 1 }}>{a.detail}</div>}
                </div>
                <div style={{ fontSize: 11.5, color: "var(--ink-4)", whiteSpace: "nowrap" }}>{a.when}</div>
              </div>
            ))}
          </div>

          <div style={{
            padding: "20px 22px", borderRadius: "var(--radius)",
            background: "var(--card)", border: "1px solid var(--line)",
          }}>
            <div style={{ display: "flex", alignItems: "baseline", justifyContent: "space-between", marginBottom: 14 }}>
              <div style={{ fontSize: 14, fontWeight: 500, letterSpacing: -0.005 }}>Next milestone</div>
              <button onClick={() => setView("impact")} style={{ fontSize: 12, color: "var(--accent-ink)" }}>All →</button>
            </div>
            {IMPACT.milestones.filter(m => !m.earned).slice(0, 1).map(m => (
              <div key={m.id}>
                <div style={{ display: "flex", gap: 12, alignItems: "flex-start" }}>
                  <div style={{
                    width: 44, height: 44, borderRadius: 10,
                    background: "var(--gold-soft)",
                    display: "flex", alignItems: "center", justifyContent: "center",
                  }}>
                    <window.I.Trophy size={20} stroke="var(--gold)" />
                  </div>
                  <div style={{ flex: 1 }}>
                    <div style={{ fontSize: 14, fontWeight: 500 }}>{m.title}</div>
                    <div style={{ fontSize: 12.5, color: "var(--ink-3)", marginTop: 2, lineHeight: 1.4 }}>{m.desc}</div>
                  </div>
                </div>
                <div style={{ marginTop: 16 }}>
                  <Progress value={m.progress} max={m.total} color="var(--gold)" />
                  <div style={{ display: "flex", justifyContent: "space-between", marginTop: 7 }}>
                    <div style={{ fontSize: 12, color: "var(--ink-3)" }}>{m.progress} / {m.total}</div>
                    <div style={{ fontSize: 12, color: "var(--ink-2)", fontWeight: 500 }}>{Math.round((m.progress / m.total) * 100)}%</div>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </>
  );
}

function activityIcon(kind) {
  return ({ download: "Download", watch: "Play", share: "Share", complete: "CheckCircle", support: "Chat" })[kind] || "Clock";
}
function activityColor(kind, soft) {
  const map = {
    download: ["var(--accent)", "var(--accent-soft)"],
    watch: ["var(--purple)", "var(--purple-soft)"],
    share: ["var(--success)", "var(--success-soft)"],
    complete: ["var(--gold)", "var(--gold-soft)"],
    support: ["var(--ink-2)", "var(--bg-2)"],
  };
  const [c, s] = map[kind] || ["var(--ink-2)", "var(--bg-2)"];
  return soft ? s : c;
}

window.Shell = Shell;
window.TopBar = TopBar;
window.HomeView = HomeView;