// =============================================================================
// DASHBOARD — Calm landing screen. One big number, top 3, quick actions.
// =============================================================================

function Dashboard({ activeWeek, onNav }) {
  const [scope, setScope] = useState("all");
  const { teams, scoresByWeek, loading } = useLiveSeasonData();

  const isAll = scope === "all";
  const weeksInScope = isAll
    ? RVL_WEEKS.filter(w => rvlIsWeekUnlocked(w.id))
    : RVL_WEEKS.filter(w => w.id === scope);
  const scopeLabel = isAll
    ? `Cumulative · through ${(weeksInScope[weeksInScope.length - 1] || {}).label || "—"}`
    : (() => { const w = RVL_WEEKS.find(x => x.id === scope); return w ? `${w.label} · ${w.range}` : "—"; })();
  const focus = isAll ? null : RVL_WEEKLY_FOCUS[scope];

  const ranked = useMemo(() => {
    const rows = teams.map(team => {
      let pts = 0;
      for (const w of weeksInScope) {
        pts += rvlTeamWeekTotalLive(team, scoresByWeek[w.id] || {});
        pts += rvlTeamWeekBonusTotal(team, w.id);
      }
      return { team, weekPts: pts };
    });
    rows.sort((a, b) => b.weekPts - a.weekPts);
    let lastPts = null, lastRank = 0;
    rows.forEach(r => {
      if (r.weekPts !== lastPts) { lastRank++; lastPts = r.weekPts; }
      r.rank = lastRank;
    });
    return rows;
  }, [teams, scoresByWeek, scope]);

  const totals = useMemo(() => {
    let visitors = 0, inducted = 0, oneToOnes = 0, referrals = 0, present = 0, totalMembers = 0, totalPts = 0;
    let danceCard = 0, bniConnect = 0, training = 0, m2c = 0, testimonials = 0, specificAsks = 0;
    for (const t of teams) {
      for (const m of t.members) totalMembers++;
    }
    for (const w of weeksInScope) {
      const weekData = scoresByWeek[w.id] || {};
      for (const t of teams) {
        totalPts += rvlTeamWeekTotalLive(t, weekData);
        totalPts += rvlTeamWeekBonusTotal(t, w.id);
        for (const m of t.members) {
          const s = weekData[m.id] || {};
          if (s.present) present++;
          for (const v of (s.visitors || [])) {
            if (v.category === "induction") inducted++;
            else visitors++;
          }
          oneToOnes += Math.min((s.one_to_ones || []).length, 2);
          referrals += (s.referrals || []).length;
          if (s.dance_card) danceCard++;
          bniConnect += s.bni_connect || 0;
          training += s.training || 0;
          m2c += s.m2c_photo || 0;
          testimonials += s.testimonial || 0;
          specificAsks += s.specific_ask || 0;
        }
      }
    }
    return { visitors, inducted, oneToOnes, referrals, present, totalMembers, totalPts, danceCard, bniConnect, training, m2c, testimonials, specificAsks };
  }, [teams, scoresByWeek, scope]);

  const [teamPage, setTeamPage] = useState(1);
  const [memberPage, setMemberPage] = useState(1);
  const PAGE = 10;

  if (loading || teams.length === 0) return <PageLoader label="Loading dashboard…"/>;

  const top = ranked[0];
  const second = ranked[1] || { weekPts: 0 };
  const gap = (top.weekPts - second.weekPts);

  return (
    <div className="rise" style={{ display: "flex", flexDirection: "column", gap: 20 }}>

      {/* Headline card — one resonant number, week context, top team */}
      <div className="card dash-headline" style={{
        padding: "32px 32px 28px",
        display: "grid",
        gridTemplateColumns: "minmax(0, 1.4fr) minmax(280px, 1fr)",
        gap: 32,
      }}>
        <div style={{ minWidth: 0 }}>
          <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: 12, marginBottom: 8, flexWrap: "wrap" }}>
            <div className="kicker">{scopeLabel}</div>
            <CustomSelect
              value={scope}
              onChange={setScope}
              size="sm"
              width="180px"
              options={[
                { value: "all", label: "All weeks (cumulative)" },
                ...RVL_WEEKS.map(w => {
                  const locked = !rvlIsWeekUnlocked(w.id);
                  return {
                    value: w.id,
                    label: locked ? `${w.label} 🔒` : w.label,
                    disabled: locked,
                    disabledReason: locked ? `Opens ${rvlWeekUnlockLabel(w.id)}` : "",
                  };
                }),
              ]}
            />
          </div>
          <div style={{ display: "flex", alignItems: "baseline", gap: 14, flexWrap: "wrap", marginBottom: 8 }}>
            <div className="display" style={{
              fontSize: "clamp(72px, 10vw, 132px)",
              lineHeight: 0.92,
              color: "var(--crimson)",
            }}>
              <Counter value={totals.visitors} duration={900}/>
            </div>
            <div style={{ fontSize: 18, fontWeight: 600, color: "var(--ink-dim)", letterSpacing: "-0.01em" }}>
              visitors brought {isAll ? "this season" : "this week"}
            </div>
          </div>
          {totals.inducted > 0 && (
            <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 8 }}>
              <span style={{
                display: "inline-flex", alignItems: "center", gap: 6,
                background: "linear-gradient(135deg, var(--gold-light), var(--gold))",
                color: "#2a1c00", fontWeight: 700, fontSize: 13,
                padding: "4px 14px", borderRadius: 999,
                boxShadow: "0 2px 8px rgba(180,140,0,.25)",
              }}>
                <span style={{ fontSize: 18, fontWeight: 800 }}>{totals.inducted}</span>
                ★ inducted {isAll ? "this season" : "this week"}
              </span>
            </div>
          )}
          <p style={{
            margin: 0, color: "var(--ink-dim)", fontSize: 15, lineHeight: 1.5,
            maxWidth: 520,
          }}>
            {isAll ? (
              <>Across <strong style={{ color: "var(--ink)" }}>{totals.totalMembers} members</strong> over{" "}
              <strong style={{ color: "var(--ink)" }}>{RVL_WEEKS.length} weeks</strong>, with{" "}
              <strong style={{ color: "var(--ink)" }}>{totals.oneToOnes} 121s</strong> and{" "}
              <strong style={{ color: "var(--ink)" }}>{totals.referrals} referrals</strong> on the board.</>
            ) : (
              <>That&apos;s across <strong style={{ color: "var(--ink)" }}>{totals.present}/{totals.totalMembers} members</strong> who showed up,
              with <strong style={{ color: "var(--ink)" }}>{totals.oneToOnes} 121s</strong> and{" "}
              <strong style={{ color: "var(--ink)" }}>{totals.referrals} referrals</strong> on the board.</>
            )}
          </p>
        </div>

        <div style={{
          background: "var(--bg-card-2)",
          border: "1px solid var(--line)",
          borderRadius: 14,
          padding: 18,
          display: "flex", flexDirection: "column", gap: 12,
        }}>
          <div className="kicker">★ Top of the table</div>
          {top.weekPts === 0 ? (
            <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 6, padding: "16px 0", textAlign: "center" }}>
              <div style={{ fontSize: 28, opacity: 0.35 }}>🏆</div>
              <div style={{ fontSize: 13, fontWeight: 600, color: "var(--ink-dim)" }}>No points logged yet</div>
              <div style={{ fontSize: 11, color: "var(--ink-mute)" }}>Leaderboard updates once entries are in</div>
            </div>
          ) : (
            <>
              <div style={{ display: "flex", alignItems: "flex-start", justifyContent: "space-between", gap: 14 }}>
                <div style={{ display: "flex", alignItems: "center", gap: 14, minWidth: 0 }}>
                  <TeamCrest team={top.team} size={56}/>
                  <div style={{ minWidth: 0 }}>
                    <div className="display" style={{ fontSize: 22, lineHeight: 1, marginBottom: 4 }}>{top.team.name}</div>
                    <div style={{ fontSize: 12, color: "var(--ink-mute)" }}>{top.team.captain?.name || "—"}</div>
                  </div>
                </div>
                <div className="display" style={{ fontSize: 56, color: "var(--ink)", lineHeight: 1, flexShrink: 0 }}>
                  {top.weekPts}
                </div>
              </div>
              {(() => {
                let att = 0, vis = 0, ind = 0, o2o = 0, ref = 0;
                for (const w of weeksInScope) {
                  const wd = scoresByWeek[w.id] || {};
                  for (const m of top.team.members) {
                    const s = wd[m.id] || {};
                    if (s.present || s.sub) att++;
                    for (const v of (s.visitors || [])) { if (v.category === "induction") ind++; else vis++; }
                    o2o += Math.min((s.one_to_ones || []).length, 2);
                    ref += Math.min((s.referrals || []).length, 5);
                  }
                }
                let testi = 0, mcmPts = 0;
                for (const w of weeksInScope) {
                  const wd = scoresByWeek[w.id] || {};
                  for (const m of top.team.members) {
                    const s = wd[m.id] || {};
                    testi += s.testimonial || 0;
                  }
                  const wb = rvlTeamWeekBonus(top.team, w.id);
                  mcmPts += wb.mcm;
                }
                const chip = (label, val, gold) => (
                  <div key={label} style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 2, padding: "6px 10px", background: gold ? "rgba(212,168,71,.12)" : "var(--bg-card-2)", borderRadius: 8, border: gold ? "1px solid rgba(212,168,71,.3)" : "1px solid var(--line)" }}>
                    <div style={{ fontSize: 16, fontWeight: 800, color: gold ? "var(--gold-light)" : "var(--ink)", lineHeight: 1 }}>{val}</div>
                    <div style={{ fontSize: 9, fontWeight: 700, letterSpacing: "0.1em", textTransform: "uppercase", color: gold ? "var(--gold)" : "var(--ink-mute)" }}>{label}</div>
                  </div>
                );
                return (
                  <div style={{ display: "flex", alignItems: "flex-end", justifyContent: "space-between", gap: 10 }}>
                    <div style={{ display: "grid", gridTemplateColumns: "repeat(4, auto)", gap: 6 }}>
                      {chip("Attn", att)}
                      {chip("Visitors", vis)}
                      {chip("Inducted", ind, ind > 0)}
                      {chip("121s", o2o)}
                      {chip("Refs", ref)}
                      {chip("Testi.", testi)}
                      {chip("MCM", mcmPts > 0 ? `+${mcmPts}` : 0, mcmPts > 0)}
                      {chip("Members", top.team.members.length)}
                    </div>
                    <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: "0.12em", textTransform: "uppercase", color: "var(--ink-mute)", textAlign: "right" }}>
                      {isAll ? "Total points" : "Week points"}<br/>
                      {gap > 0 ? <span style={{ color: "var(--good)" }}>+{gap} ahead of #2</span> : <span>tied with #2</span>}
                    </div>
                  </div>
                );
              })()}
            </>
          )}
        </div>
      </div>

      {/* This week's focus — single subtle banner */}
      {focus && (
        <div style={{
          display: "flex", alignItems: "center", gap: 12,
          padding: "12px 16px",
          background: "var(--bg-card)",
          border: "1px solid var(--line)",
          borderRadius: 12,
        }}>
          <div style={{
            width: 32, height: 32, borderRadius: 8, background: "rgba(212,168,71,.16)",
            display: "grid", placeItems: "center", fontSize: 16, flexShrink: 0,
          }}>{focus.emoji}</div>
          <div style={{ minWidth: 0, flex: 1 }}>
            <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: "0.12em", textTransform: "uppercase", color: "var(--ink-mute)" }}>
              This week&apos;s focus · {focus.activity}
            </div>
            <div style={{ fontSize: 13, color: "var(--ink-dim)" }}>{focus.note}</div>
          </div>
        </div>
      )}

      {/* KPI tiles — 2 rows of 5 */}
      <div style={{
        display: "grid",
        gridTemplateColumns: "repeat(5, minmax(0, 1fr))",
        gap: 12,
      }} className="dash-kpi-row">
        <KpiTile label="Visitors" value={totals.visitors} onEye={() => onNav("entry", "visitors", scope)}/>
        <KpiTile label="Inducted" value={totals.inducted} onEye={() => onNav("entry", "inducted", scope)} gold/>
        <KpiTile label="1-2-1" value={totals.oneToOnes} onEye={() => onNav("entry", "one21", scope)}/>
        <KpiTile label="Referrals" value={totals.referrals} onEye={() => onNav("entry", "referrals", scope)}/>
        <KpiTile label="Dance Card" value={totals.danceCard} onEye={() => onNav("entry", "dance_card", scope)}/>
        <KpiTile label="BNI Connect Profile" value={totals.bniConnect} onEye={() => onNav("entry", "bni_connect", scope)}/>
        <KpiTile label="Training" value={totals.training} onEye={() => onNav("entry", "training", scope)}/>
        <KpiTile label="M2C" value={totals.m2c} onEye={() => onNav("entry", "m2c", scope)}/>
        <KpiTile label="Testimonials" value={totals.testimonials} onEye={() => onNav("entry", "testimonial", scope)}/>
        <KpiTile label="Specific Ask" value={totals.specificAsks} onEye={() => onNav("entry", "specific_ask", scope)}/>
      </div>

      {/* Three-up: Teams · Members · Empty */}
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 16, alignItems: "stretch" }} className="dash-three-up">

        {/* Card 1 — Top 3 Teams */}
        <div className="card" style={{ padding: 0, overflow: "hidden" }}>
          <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", padding: "14px 18px", borderBottom: "1px solid var(--line)" }}>
            <div>
              <div className="kicker">Top Teams {isAll ? "· season" : "· this week"}</div>
              <div style={{ fontSize: 12, color: "var(--ink-mute)", marginTop: 2 }}>Of {teams.length} teams · by {isAll ? "total" : "week"} pts</div>
            </div>
            <button onClick={() => onNav("leaderboard")} style={{ background: "transparent", border: 0, color: "var(--crimson)", fontSize: 12, fontWeight: 600, cursor: "pointer" }}>All →</button>
          </div>
          {ranked.filter(r => r.weekPts > 0).length === 0 ? (
            <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 6, padding: "28px 0", textAlign: "center" }}>
              <div style={{ fontSize: 28, opacity: 0.3 }}>🏆</div>
              <div style={{ fontSize: 13, fontWeight: 600, color: "var(--ink-dim)" }}>No points logged yet</div>
              <div style={{ fontSize: 11, color: "var(--ink-mute)" }}>Standings appear once entries are in</div>
            </div>
          ) : ranked.filter(r => r.weekPts > 0).slice((teamPage - 1) * PAGE, teamPage * PAGE).map((r, i, arr) => (
            <div key={r.team.id} style={{ display: "grid", gridTemplateColumns: "40px 1fr auto", alignItems: "center", gap: 10, padding: "12px 16px", borderBottom: i === arr.length - 1 ? 0 : "1px solid var(--line)", background: i === 0 ? "linear-gradient(90deg, rgba(212,168,71,.10), rgba(255,255,255,0) 60%)" : "transparent" }}>
              <RankBadge rank={r.rank} size={32}/>
              <div style={{ display: "flex", alignItems: "center", gap: 10, minWidth: 0 }}>
                <TeamCrest team={r.team} size={32}/>
                <div style={{ minWidth: 0 }}>
                  <div className="display" style={{ fontSize: 15, lineHeight: 1, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{r.team.name}</div>
                  <div style={{ fontSize: 11, color: "var(--ink-mute)", marginTop: 1 }}>{r.team.captain?.name || "—"}</div>
                </div>
              </div>
              <div className="display" style={{ fontSize: 22, color: i === 0 ? "var(--crimson)" : "var(--ink)", lineHeight: 1 }}>{r.weekPts}</div>
            </div>
          ))}
          {ranked.filter(r => r.weekPts > 0).length > PAGE && (
            <MiniPager page={teamPage} total={ranked.filter(r => r.weekPts > 0).length} perPage={PAGE} onChange={setTeamPage}/>
          )}
        </div>

        {/* Card 2 — Top Members */}
        {(() => {
          const memberRows = [];
          for (const w of weeksInScope) {
            const wkScores = scoresByWeek[w.id] || {};
            for (const team of teams) {
              for (const member of team.members) {
                const s = wkScores[member.id] || {};
                const existing = memberRows.find(m => m.memberId === member.id);
                const pts = rvlPointsForMemberWeek ? rvlPointsForMemberWeek(s) : (s.present ? 5 : 0);
                if (existing) { existing.pts += pts; }
                else { memberRows.push({ memberId: member.id, name: member.name, team, pts }); }
              }
            }
          }
          memberRows.sort((a, b) => b.pts - a.pts);
          const nonZero = memberRows.filter(r => r.pts > 0);
          let lastPts2 = null, lastRank2 = 0;
          nonZero.forEach(r => { if (r.pts !== lastPts2) { lastRank2++; lastPts2 = r.pts; } r.rank = lastRank2; });
          const top3 = nonZero.slice((memberPage - 1) * PAGE, memberPage * PAGE);
          return (
            <div className="card" style={{ padding: 0, overflow: "hidden" }}>
              <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", padding: "14px 18px", borderBottom: "1px solid var(--line)" }}>
                <div>
                  <div className="kicker">Top Members {isAll ? "· season" : "· this week"}</div>
                  <div style={{ fontSize: 12, color: "var(--ink-mute)", marginTop: 2 }}>Individual performance</div>
                </div>
                <button onClick={() => onNav("members")} style={{ background: "transparent", border: 0, color: "var(--crimson)", fontSize: 12, fontWeight: 600, cursor: "pointer" }}>All →</button>
              </div>
              {nonZero.length === 0 ? (
                <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 6, padding: "28px 0", textAlign: "center" }}>
                  <div style={{ fontSize: 28, opacity: 0.3 }}>👤</div>
                  <div style={{ fontSize: 13, fontWeight: 600, color: "var(--ink-dim)" }}>No member scores yet</div>
                  <div style={{ fontSize: 11, color: "var(--ink-mute)" }}>Appears once entries are in</div>
                </div>
              ) : top3.map((r, i, arr) => (
                <div key={r.memberId} style={{ display: "grid", gridTemplateColumns: "40px 1fr auto", alignItems: "center", gap: 10, padding: "12px 16px", borderBottom: i === arr.length - 1 ? 0 : "1px solid var(--line)", background: i === 0 ? "linear-gradient(90deg, rgba(212,168,71,.10), rgba(255,255,255,0) 60%)" : "transparent" }}>
                  <RankBadge rank={r.rank} size={32}/>
                  <div style={{ display: "flex", alignItems: "center", gap: 10, minWidth: 0 }}>
                    <Avatar name={r.name} size={32} color={r.team.crest?.primary || "var(--crimson)"}/>
                    <div style={{ minWidth: 0 }}>
                      <div style={{ fontSize: 14, fontWeight: 700, lineHeight: 1, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{r.name}</div>
                      <div style={{ fontSize: 11, color: "var(--ink-mute)", marginTop: 1 }}>{r.team.name}</div>
                    </div>
                  </div>
                  <div className="display" style={{ fontSize: 22, color: i === 0 ? "var(--crimson)" : "var(--ink)", lineHeight: 1 }}>{r.pts}</div>
                </div>
              ))}
              {nonZero.length > PAGE && (
                <MiniPager page={memberPage} total={nonZero.length} perPage={PAGE} onChange={setMemberPage}/>
              )}
            </div>
          );
        })()}

        {/* Card 3 — Placeholder */}
        <div className="card" style={{ padding: 18, display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", gap: 8, minHeight: 180, textAlign: "center" }}>
          <div style={{ fontSize: 32, opacity: 0.2 }}>📊</div>
          <div style={{ fontSize: 13, fontWeight: 600, color: "var(--ink-dim)" }}>Coming soon</div>
          <div style={{ fontSize: 11, color: "var(--ink-mute)" }}>More insights on the way</div>
        </div>

      </div>

      <style>{`
        @media (max-width: 880px) {
          .dash-headline, .dash-two-up, .dash-three-up { grid-template-columns: 1fr !important; }
          .dash-kpi-row { grid-template-columns: repeat(2, 1fr) !important; }
        }
      `}</style>
    </div>
  );
}

function MiniPager({ page, total, perPage, onChange }) {
  const totalPages = Math.ceil(total / perPage);
  if (totalPages <= 1) return null;
  const btnStyle = (active, disabled) => ({
    width: 26, height: 26, display: "grid", placeItems: "center", borderRadius: 6,
    border: `1px solid ${active ? "var(--crimson)" : "var(--line)"}`,
    background: active ? "var(--crimson)" : "var(--bg-card)",
    color: active ? "#fff" : "var(--ink-dim)",
    fontWeight: active ? 700 : 400, fontSize: 12,
    cursor: disabled ? "default" : "pointer", opacity: disabled ? 0.35 : 1,
  });
  const pages = [];
  const delta = 1;
  let last = 0;
  for (let p = 1; p <= totalPages; p++) {
    if (p === 1 || p === totalPages || (p >= page - delta && p <= page + delta)) {
      if (last && p - last > 1) pages.push("…");
      pages.push(p);
      last = p;
    }
  }
  return (
    <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", padding: "8px 14px", borderTop: "1px solid var(--line)", background: "var(--bg-card-2)", flexWrap: "wrap", gap: 4 }}>
      <span style={{ fontSize: 11, color: "var(--ink-mute)" }}>
        {(page - 1) * perPage + 1}–{Math.min(page * perPage, total)} of {total}
      </span>
      <div style={{ display: "flex", gap: 3, alignItems: "center" }}>
        <button onClick={() => onChange(p => Math.max(1, p - 1))} disabled={page === 1} style={btnStyle(false, page === 1)}>⟨</button>
        {pages.map((p, i) => p === "…" ? (
          <span key={`e${i}`} style={{ width: 26, textAlign: "center", fontSize: 12, color: "var(--ink-mute)" }}>…</span>
        ) : (
          <button key={p} onClick={() => onChange(p)} style={btnStyle(p === page, false)}>{p}</button>
        ))}
        <button onClick={() => onChange(p => Math.min(totalPages, p + 1))} disabled={page === totalPages} style={btnStyle(false, page === totalPages)}>⟩</button>
      </div>
    </div>
  );
}

function KpiTile({ label, value, onEye, gold }) {
  const goldActive = gold && value > 0;
  return (
    <div className="card" style={{
      padding: "16px 18px", position: "relative", overflow: "hidden",
      ...(gold ? {
        background: goldActive
          ? "linear-gradient(135deg, #7a5200 0%, #b08526 50%, #d4a847 100%)"
          : "linear-gradient(135deg, #6b4f1a 0%, #8a6820 100%)",
        border: goldActive ? "1.5px solid #d4a847" : "1.5px solid #a07828",
        boxShadow: goldActive ? "0 4px 20px rgba(176,133,38,.35)" : "0 2px 10px rgba(0,0,0,.2)",
      } : {}),
    }}>
      <div className="kicker" style={{ marginBottom: 6, color: gold ? "rgba(255,255,255,.7)" : undefined }}>{label}</div>
      <div className="display" style={{ fontSize: 36, lineHeight: 1, color: gold ? "#fff" : "var(--ink)" }}>
        {typeof value === "number" ? <Counter value={value} duration={700}/> : value}
      </div>
      {gold && (
        <div style={{ fontSize: 9, fontWeight: 700, letterSpacing: "0.1em", textTransform: "uppercase", color: "rgba(255,255,255,.65)", marginTop: 4 }}>
          {goldActive ? `${value * 100} pts earned` : "none yet"}
        </div>
      )}
      {onEye && (
        <button onClick={onEye} title={`View ${label} in Score Entry`} style={{
          position: "absolute", top: 10, right: 10,
          background: "transparent", border: 0, cursor: "pointer",
          color: gold ? "rgba(255,255,255,.7)" : "var(--ink-mute)", padding: 6, borderRadius: 8,
          display: "grid", placeItems: "center",
          transition: "color .15s, background .15s",
        }}
        onMouseEnter={e => { e.currentTarget.style.color = gold ? "#fff" : "var(--crimson)"; if (gold) e.currentTarget.style.background = "rgba(255,255,255,.15)"; }}
        onMouseLeave={e => { e.currentTarget.style.color = gold ? "rgba(255,255,255,.7)" : "var(--ink-mute)"; if (gold) e.currentTarget.style.background = "transparent"; }}
        >
          <svg width="15" height="15" viewBox="0 0 24 24" fill="currentColor">
            <path d="M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zm0 12.5a5 5 0 1 1 0-10 5 5 0 0 1 0 10zm0-8a3 3 0 1 0 0 6 3 3 0 0 0 0-6z"/>
          </svg>
        </button>
      )}
    </div>
  );
}

function DashAction({ label, sub, onClick, primary }) {
  return (
    <button
      onClick={onClick}
      style={{
        display: "flex", alignItems: "center", justifyContent: "space-between",
        width: "100%",
        padding: "12px 14px",
        background: primary ? "var(--crimson)" : "var(--bg-card-2)",
        color: primary ? "#fff" : "var(--ink)",
        border: primary ? "1px solid var(--crimson-deep)" : "1px solid var(--line)",
        borderRadius: 10,
        textAlign: "left",
        cursor: "pointer",
        transition: "transform .08s ease, background .15s ease",
      }}
      onMouseEnter={e => !primary && (e.currentTarget.style.background = "var(--bg-card)")}
      onMouseLeave={e => !primary && (e.currentTarget.style.background = "var(--bg-card-2)")}
    >
      <div>
        <div style={{ fontWeight: 600, fontSize: 14, lineHeight: 1.2 }}>{label}</div>
        <div style={{ fontSize: 11, opacity: primary ? 0.8 : 0.6, marginTop: 2 }}>{sub}</div>
      </div>
      <span style={{ fontSize: 16, opacity: 0.7 }}>→</span>
    </button>
  );
}

window.Dashboard = Dashboard;
