const { useState: useStateO, useMemo: useMemoO, useEffect: useEffectO } = React;

const OverviewPage = () => {
  const D = window.PipalData;
  const I = window.Icons;
  const sb = window.supabaseClient;

  // ── state ──────────────────────────────────────────────────────────────────
  const [loading, setLoading] = useStateO(true);
  const [orders, setOrders] = useStateO([]);        // last 30 days
  const [driversOnline, setDriversOnline] = useStateO(0);
  const [driversTotal, setDriversTotal] = useStateO(0);
  const [openIssues, setOpenIssues] = useStateO(0);
  const [activeRoutes, setActiveRoutes] = useStateO([]);
  const [kycQueue, setKycQueue] = useStateO([]);
  const [incidents, setIncidents] = useStateO([]);
  const [topStores, setTopStores] = useStateO([]);

  // ── fetch ──────────────────────────────────────────────────────────────────
  const doFetch = async () => {
    if (!sb) return;
    setLoading(true);
    const thirtyDaysAgo = new Date(Date.now() - 30 * 24 * 60 * 60 * 1000).toISOString();

    const [ordersRes, driversRes, issuesRes, routesRes, kycRes, incidentsRes, storesRes] = await Promise.all([
      sb.from('orders')
        .select('id, total_amount, platform_fee_amount, created_at, store_id, order_status')
        .gte('created_at', thirtyDaysAgo)
        .order('created_at', { ascending: false }),
      sb.from('delivery_partners').select('user_id, is_online, is_active'),
      sb.from('deliveries').select('id, status').in('status', ['failed', 'returning_to_store', 'returned']),
      sb.from('routes')
        .select('id, driver_id, status, dispatch_window, total_stops, total_distance_m, total_duration_s, dispatched_at, created_at, window_end')
        .in('status', ['assembling', 'optimized', 'dispatched'])
        .order('created_at', { ascending: false })
        .limit(10),
      sb.from('kyc_submissions')
        .select('id, full_name, document_type, status, created_at')
        .eq('status', 'pending')
        .order('created_at', { ascending: false })
        .limit(5),
      sb.from('status_incidents')
        .select('id, title, severity, started_at, status, affected_components')
        .is('resolved_at', null)
        .order('started_at', { ascending: false })
        .limit(5),
      sb.from('seller_metrics')
        .select('store_id, total_orders, orders_last_30_days, revenue_last_30_days, avg_rating')
        .order('revenue_last_30_days', { ascending: false })
        .limit(12),
    ]);

    setOrders(ordersRes.data || []);

    const allDrivers = driversRes.data || [];
    setDriversTotal(allDrivers.length);
    setDriversOnline(allDrivers.filter(d => d.is_online).length);

    setOpenIssues((issuesRes.data || []).length);

    // Enrich routes with driver names + stops done + gmv
    const routes = routesRes.data || [];
    if (routes.length > 0) {
      const driverIds = [...new Set(routes.map(r => r.driver_id).filter(Boolean))];
      const routeIds = routes.map(r => r.id);
      const [profilesRes, deliveriesRes, stopsRes] = await Promise.all([
        driverIds.length ? sb.from('user_profiles').select('id, display_name').in('id', driverIds) : { data: [] },
        sb.from('deliveries').select('route_id, order_id').in('route_id', routeIds),
        sb.from('route_stops').select('route_id, status').in('route_id', routeIds),
      ]);
      const profileMap = {};
      (profilesRes.data || []).forEach(p => { profileMap[p.id] = p.display_name; });
      const orderIds = [...new Set((deliveriesRes.data || []).map(d => d.order_id).filter(Boolean))];
      let orderAmtMap = {};
      if (orderIds.length > 0) {
        const { data: oa } = await sb.from('orders').select('id, total_amount').in('id', orderIds);
        (oa || []).forEach(o => { orderAmtMap[o.id] = Number(o.total_amount || 0); });
      }
      const delivsByRoute = {};
      (deliveriesRes.data || []).forEach(d => { (delivsByRoute[d.route_id] = delivsByRoute[d.route_id] || []).push(d); });
      const stopsByRoute = {};
      (stopsRes.data || []).forEach(s => { (stopsByRoute[s.route_id] = stopsByRoute[s.route_id] || []).push(s); });
      setActiveRoutes(routes.map(r => ({
        ...r,
        driver_name: profileMap[r.driver_id] || '—',
        gmv: (delivsByRoute[r.id] || []).reduce((sum, d) => sum + (orderAmtMap[d.order_id] || 0), 0),
        stops_done: (stopsByRoute[r.id] || []).filter(s => s.status === 'completed').length,
      })));
    } else {
      setActiveRoutes([]);
    }

    setKycQueue(kycRes.data || []);
    setIncidents(incidentsRes.data || []);

    // Two-step: fetch store names for the top seller_metrics rows
    const metrics = (storesRes.data || []).filter(sm => Number(sm.revenue_last_30_days) > 0);
    if (metrics.length > 0) {
      const storeIds = metrics.map(sm => sm.store_id).filter(Boolean);
      const { data: storeRows } = await sb.from('stores').select('id, name, category').in('id', storeIds);
      const storeMap = {};
      (storeRows || []).forEach(s => { storeMap[s.id] = s; });
      setTopStores(metrics.map(sm => {
        const store = storeMap[sm.store_id] || {};
        return {
          id: sm.store_id,
          name: store.name || sm.store_id?.slice(0, 8).toUpperCase() || '—',
          category: store.category || '—',
          orders_30d: sm.orders_last_30_days || 0,
          gmv_30d: Number(sm.revenue_last_30_days || 0),
          total_orders: sm.total_orders || 0,
          rating: sm.avg_rating ? Number(sm.avg_rating).toFixed(1) : null,
        };
      }));
    } else {
      setTopStores([]);
    }

    setLoading(false);
  };

  useEffectO(() => { doFetch(); }, []);

  // ── derived metrics ────────────────────────────────────────────────────────
  const now = new Date();
  const todayStart = new Date(now.getFullYear(), now.getMonth(), now.getDate());
  const yesterdayStart = new Date(todayStart); yesterdayStart.setDate(todayStart.getDate() - 1);

  const todayOrders = useMemoO(() => orders.filter(o => new Date(o.created_at) >= todayStart), [orders]);
  const yesterdayOrders = useMemoO(() => {
    return orders.filter(o => { const d = new Date(o.created_at); return d >= yesterdayStart && d < todayStart; });
  }, [orders]);

  const gmvToday = useMemoO(() => todayOrders.reduce((s, o) => s + Number(o.total_amount || 0), 0), [todayOrders]);
  const gmvYesterday = useMemoO(() => yesterdayOrders.reduce((s, o) => s + Number(o.total_amount || 0), 0), [yesterdayOrders]);
  const orderCountToday = todayOrders.length;
  const orderCountYesterday = yesterdayOrders.length;

  const gmv30d = useMemoO(() => orders.reduce((s, o) => s + Number(o.total_amount || 0), 0), [orders]);

  // Revenue 14D array (zero-filled)
  const revenue14d = useMemoO(() => {
    const map = {};
    orders.forEach(o => {
      const d = new Date(o.created_at);
      const key = `${d.getFullYear()}-${d.getMonth()}-${d.getDate()}`;
      map[key] = (map[key] || 0) + Number(o.total_amount || 0);
    });
    return Array.from({ length: 14 }, (_, i) => {
      const dt = new Date(now); dt.setDate(dt.getDate() - (13 - i)); dt.setHours(0,0,0,0);
      return map[`${dt.getFullYear()}-${dt.getMonth()}-${dt.getDate()}`] || 0;
    });
  }, [orders]);
  const revenue14dTotal = revenue14d.reduce((a, b) => a + b, 0);

  // Prev 14D for delta
  const revenue14dPrevTotal = useMemoO(() => orders
    .filter(o => { const days = (now - new Date(o.created_at)) / 86400000; return days >= 14 && days < 28; })
    .reduce((s, o) => s + Number(o.total_amount || 0), 0), [orders]);
  const revenue14dDelta = revenue14dPrevTotal > 0
    ? ((revenue14dTotal - revenue14dPrevTotal) / revenue14dPrevTotal * 100).toFixed(1)
    : null;

  // Today by hour
  const gmvByHour = useMemoO(() => {
    const arr = Array(24).fill(0);
    todayOrders.forEach(o => { arr[new Date(o.created_at).getHours()] += Number(o.total_amount || 0); });
    return arr;
  }, [todayOrders]);

  // Heatmap: orders by DOW×hour (Mon=0 … Sun=6) from all available data
  const heatData = useMemoO(() => {
    const matrix = Array.from({ length: 7 }, () => Array(24).fill(0));
    orders.forEach(o => {
      const d = new Date(o.created_at);
      const dow = (d.getDay() + 6) % 7; // Mon=0, Sun=6
      matrix[dow][d.getHours()]++;
    });
    return matrix;
  }, [orders]);

  const labels14 = useMemoO(() => Array.from({ length: 14 }, (_, i) => {
    const dt = new Date(now); dt.setDate(dt.getDate() - (13 - i));
    return dt.toLocaleDateString('en-US', { month: 'short', day: 'numeric' });
  }), []);
  const hourLabels = Array.from({ length: 24 }, (_, i) => String(i).padStart(2, '0'));
  const nowHour = now.getHours();
  const peakHour = gmvByHour.indexOf(Math.max(...gmvByHour));
  const dateStr = now.toLocaleDateString('en-US', { weekday: 'short', month: 'short', day: '2-digit' })
    + ' · ' + now.toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit', hour12: false }) + ' NPT';

  return (
    <div className="page" data-screen-label="01 Overview">
      <div className="page-h">
        <div>
          <div className="ts">
            <span className="live">LIVE</span>
            <span style={{margin:"0 8px"}}>·</span>
            {dateStr}
          </div>
          <h1>Operations</h1>
        </div>
        <div className="acts">
          <button className="btn" onClick={doFetch}><I.refresh size={12}/>Refresh</button>
          <button className="btn primary"><I.zap size={12}/>Open dispatch</button>
        </div>
      </div>

      {/* KPI strip */}
      <div className="kpi-grid">
        <div className="kpi">
          <div className="lbl">GMV today</div>
          <div className="val">{loading ? '—' : D.compactCurrency(gmvToday)}</div>
          <div className="sub">
            {!loading && gmvYesterday > 0 ? (
              <>
                <span className={`delta ${gmvToday >= gmvYesterday ? 'up' : 'down'}`}>
                  {gmvToday >= gmvYesterday ? <I.arrowUp size={10}/> : <I.arrowDn size={10}/>}
                  {Math.abs(((gmvToday - gmvYesterday) / gmvYesterday) * 100).toFixed(1)}%
                </span>
                <span>vs yesterday</span>
              </>
            ) : (
              <span className="muted">{loading ? '' : 'No prior data'}</span>
            )}
          </div>
          {gmvByHour.some(v => v > 0) && (
            <div style={{position:"absolute", left:14, right:14, bottom:8, height:18, opacity:.6}}>
              <Sparkline data={gmvByHour.slice(0, nowHour + 1)} height={18} fill={false}/>
            </div>
          )}
        </div>
        <div className="kpi">
          <div className="lbl">Orders today</div>
          <div className="val">{loading ? '—' : orderCountToday.toLocaleString()}</div>
          <div className="sub">
            {!loading && orderCountYesterday > 0 ? (
              <>
                <span className={`delta ${orderCountToday >= orderCountYesterday ? 'up' : 'down'}`}>
                  {orderCountToday >= orderCountYesterday ? <I.arrowUp size={10}/> : <I.arrowDn size={10}/>}
                  {Math.abs(((orderCountToday - orderCountYesterday) / orderCountYesterday) * 100).toFixed(1)}%
                </span>
                <span>vs yesterday</span>
              </>
            ) : (
              <span className="muted">{loading ? '' : orderCountToday === 0 ? 'No orders yet' : `${orderCountToday} placed`}</span>
            )}
          </div>
        </div>
        <div className="kpi">
          <div className="lbl">GMV · 30 days</div>
          <div className="val">{loading ? '—' : D.compactCurrency(gmv30d)}</div>
          <div className="sub">
            <span className="muted">{loading ? '' : `${orders.length} order${orders.length !== 1 ? 's' : ''}`}</span>
          </div>
        </div>
        <div className="kpi">
          <div className="lbl">Drivers online</div>
          <div className="val">{loading ? '—' : driversOnline}<span className="unit">/ {driversTotal}</span></div>
          <div className="sub">
            <span className={`chip ${!loading && driversOnline / Math.max(driversTotal, 1) >= 0.7 ? 'pos' : 'warn'} dot`}>
              {loading ? '' : driversOnline / Math.max(driversTotal, 1) >= 0.7 ? 'healthy' : 'low coverage'}
            </span>
          </div>
        </div>
        <div className="kpi">
          <div className="lbl">Open issues</div>
          <div className="val">{loading ? '—' : openIssues}</div>
          <div className="sub">
            <span className={`chip ${!loading && openIssues > 0 ? 'warn' : 'pos'} dot`}>
              {loading ? '' : openIssues > 0 ? `${openIssues} delivery issue${openIssues !== 1 ? 's' : ''}` : 'all clear'}
            </span>
          </div>
        </div>
      </div>

      {/* Two-column row: revenue chart + today by hour */}
      <div className="mob-stack" style={{ display: "grid", gridTemplateColumns: "1.6fr 1fr", gap: 16, marginTop: 16 }}>
        <div className="panel">
          <div className="panel-h">
            <span>Revenue · last 14 days</span>
            <span className="meta">NPR</span>
            <div className="right"><I.more size={14} className="muted"/></div>
          </div>
          <div style={{ padding: "12px 14px 8px" }}>
            <div style={{ display:"flex", alignItems:"baseline", gap: 16, marginBottom: 6 }}>
              <div style={{ fontSize: 24, fontWeight: 500, letterSpacing: "-0.02em" }}>
                {loading ? '—' : D.compactCurrency(revenue14dTotal)}
              </div>
              {!loading && revenue14dDelta !== null && (
                <div className={`delta ${Number(revenue14dDelta) >= 0 ? 'up' : 'down'}`}>
                  {Number(revenue14dDelta) >= 0 ? <I.arrowUp size={10}/> : <I.arrowDn size={10}/>}
                  {Math.abs(Number(revenue14dDelta))}% vs prev period
                </div>
              )}
              <div className="muted" style={{fontFamily:"var(--font-mono)", fontSize:11, marginLeft:"auto"}}>
                {labels14[0]} → {labels14[13]}
              </div>
            </div>
            <AreaChart
              data={loading ? Array(14).fill(0) : revenue14d}
              labels={labels14} height={210} yFmt={D.compactCurrency}/>
          </div>
        </div>

        <div className="panel">
          <div className="panel-h">
            <span>Today by hour</span>
            <div className="right">
              <span className="meta">NPT</span>
              {!loading && gmvByHour.some(v => v > 0) && (
                <span className="chip accent dot">peak {String(peakHour).padStart(2,'0')}:00</span>
              )}
            </div>
          </div>
          <div style={{padding: "16px 14px"}}>
            <BarChart
              data={loading ? Array(24).fill(0) : gmvByHour}
              labels={hourLabels} height={130} highlightIdx={nowHour}/>
            <div style={{display:"grid", gridTemplateColumns:"repeat(3,1fr)", gap:8, marginTop:14}}>
              <Stat label="Orders today" value={loading ? '—' : orderCountToday}/>
              <Stat label="GMV today" value={loading ? '—' : D.compactCurrency(gmvToday)} tone={gmvToday > 0 ? "accent" : undefined}/>
              <Stat label="Avg order" value={!loading && orderCountToday > 0 ? D.currency(gmvToday / orderCountToday) : '—'}/>
            </div>
          </div>
          <div style={{borderTop:"1px solid var(--hairline)", padding:"12px 14px"}}>
            <div className="row" style={{justifyContent:"space-between", marginBottom:8}}>
              <div className="lbl-mini">Order density · available history</div>
              <div className="muted" style={{fontFamily:"var(--font-mono)", fontSize:10}}>orders/hr</div>
            </div>
            <Heatmap rows={7} cols={24}
              data={loading ? Array.from({length:7}, () => Array(24).fill(0)) : heatData}
              rowLabels={["Mon","Tue","Wed","Thu","Fri","Sat","Sun"]}
              colLabels={hourLabels}/>
          </div>
        </div>
      </div>

      {/* Live ops row: dispatch / verifications / incidents */}
      <div className="mob-stack" style={{ display: "grid", gridTemplateColumns: "1.4fr 1fr 1fr", gap: 16, marginTop: 16 }}>
        <div className="panel">
          <div className="panel-h">
            <span>In-flight routes</span>
            <span className="meta">{activeRoutes.length} active</span>
            <div className="right">
              <button className="btn ghost" style={{height:24}} onClick={doFetch}><I.refresh size={11}/></button>
            </div>
          </div>
          {loading ? (
            <div className="muted" style={{padding:16, fontSize:12}}>Loading…</div>
          ) : activeRoutes.length === 0 ? (
            <div className="muted" style={{padding:24, textAlign:"center", fontSize:12}}>No active routes</div>
          ) : (
            <div className="t-wrap"><table className="t">
              <thead><tr>
                <th>Route</th><th>Driver</th><th>Window</th><th>Progress</th>
                <th style={{textAlign:"right"}}>GMV</th>
              </tr></thead>
              <tbody>
                {activeRoutes.map(r => (
                  <tr key={r.id}>
                    <td><span className="id">{r.id.slice(0,8).toUpperCase()}</span></td>
                    <td>{r.driver_name}</td>
                    <td><span className="chip dot">{r.dispatch_window}</span></td>
                    <td style={{minWidth:140}}>
                      <div className="row gap-2">
                        <div style={{flex:1, height:4, background:"var(--surface-3)", borderRadius:2, overflow:"hidden"}}>
                          <div style={{width:`${r.total_stops > 0 ? (r.stops_done/r.total_stops)*100 : 0}%`, height:"100%", background:"var(--accent)"}}/>
                        </div>
                        <span className="num muted" style={{fontSize:10.5}}>{r.stops_done}/{r.total_stops}</span>
                      </div>
                    </td>
                    <td className="num" style={{textAlign:"right"}}>{D.currency(r.gmv)}</td>
                  </tr>
                ))}
              </tbody>
            </table></div>
          )}
        </div>

        <div className="panel">
          <div className="panel-h">
            <span>Verification queue</span>
            {!loading && kycQueue.length > 0 && (
              <span className="chip neg" style={{marginLeft:6}}>{kycQueue.length} pending</span>
            )}
            <div className="right"><I.shield size={13} className="muted"/></div>
          </div>
          {loading ? (
            <div className="muted" style={{padding:16, fontSize:12}}>Loading…</div>
          ) : kycQueue.length === 0 ? (
            <div style={{padding:24, textAlign:"center"}}>
              <span className="chip pos dot">Queue clear</span>
              <div className="muted" style={{fontSize:11.5, marginTop:8}}>No pending KYC submissions</div>
            </div>
          ) : (
            <div>
              {kycQueue.map((v, idx) => (
                <div key={v.id} style={{
                  display:"grid", gridTemplateColumns:"auto 1fr auto",
                  alignItems:"center", gap:10, padding:"10px 14px",
                  borderBottom: idx < kycQueue.length - 1 ? "1px solid var(--hairline)" : "none"
                }}>
                  <div style={{
                    width:28, height:28, borderRadius:4,
                    background:"var(--surface-2)", display:"grid", placeItems:"center",
                    color:"var(--ink-3)", fontFamily:"var(--font-mono)", fontSize:10
                  }}>{(v.document_type || 'D')[0].toUpperCase()}</div>
                  <div style={{minWidth:0}}>
                    <div style={{fontWeight:500, fontSize:12.5, color:"var(--ink)"}}>{v.full_name}</div>
                    <div className="muted" style={{fontSize:11, fontFamily:"var(--font-mono)"}}>
                      {v.id.slice(0,8).toUpperCase()} · {v.document_type}
                    </div>
                  </div>
                  <div className="row gap-2">
                    <button className="btn ghost" style={{height:22, padding:"0 6px"}}><I.check size={12}/></button>
                    <button className="btn ghost" style={{height:22, padding:"0 6px"}}><I.x size={12}/></button>
                  </div>
                </div>
              ))}
            </div>
          )}
        </div>

        <div className="panel">
          <div className="panel-h">
            <span>Incidents</span>
            <span className="meta">open</span>
            <div className="right">
              {!loading && incidents.length > 0
                ? <I.warn size={13} style={{color:"var(--warn)"}}/>
                : <I.check size={13} style={{color:"var(--pos, #16a34a)"}}/>}
            </div>
          </div>
          {loading ? (
            <div className="muted" style={{padding:16, fontSize:12}}>Loading…</div>
          ) : incidents.length === 0 ? (
            <div style={{padding:24, textAlign:"center"}}>
              <span className="chip pos dot">All clear</span>
              <div className="muted" style={{fontSize:11.5, marginTop:8}}>No open incidents</div>
            </div>
          ) : (
            <div style={{padding:"12px 14px", display:"flex", flexDirection:"column", gap:10}}>
              {incidents.map(it => {
                const sev = it.severity || 'low';
                const tone = (sev === 'critical' || sev === 'high') ? 'neg' : sev === 'medium' ? 'warn' : 'info';
                const ageMin = Math.round((Date.now() - new Date(it.started_at)) / 60000);
                const ageStr = ageMin < 60 ? `${ageMin}m` : `${Math.floor(ageMin/60)}h ${ageMin%60}m`;
                return (
                  <div key={it.id} className="row gap-3" style={{alignItems:"flex-start"}}>
                    <div style={{
                      width:4, alignSelf:"stretch", borderRadius:2,
                      background: tone==="neg" ? "var(--neg)" : tone==="warn" ? "var(--warn)" : "var(--info, #3b82f6)",
                    }}/>
                    <div style={{flex:1, minWidth:0}}>
                      <div style={{fontFamily:"var(--font-mono)", fontSize:10, color:"var(--ink-3)", letterSpacing:"0.06em"}}>{sev.toUpperCase()}</div>
                      <div style={{fontSize:12.5, color:"var(--ink)", marginTop:1}}>{it.title}</div>
                    </div>
                    <div className="num muted" style={{fontSize:11}}>{ageStr}</div>
                  </div>
                );
              })}
            </div>
          )}
        </div>
      </div>

      {/* Top stores */}
      <div className="panel" style={{marginTop:16}}>
        <div className="panel-h">
          <span>Top stores · last 30 days</span>
          <div className="right"><span className="chip">By GMV</span></div>
        </div>
        {loading ? (
          <div className="muted" style={{padding:16, fontSize:12}}>Loading…</div>
        ) : topStores.length === 0 ? (
          <div className="muted" style={{padding:24, textAlign:"center", fontSize:12}}>No store data available</div>
        ) : (
          <div className="t-wrap"><table className="t">
            <thead><tr>
              <th>#</th><th>Store</th><th>Category</th>
              <th style={{textAlign:"right"}}>Orders (30d)</th>
              <th style={{textAlign:"right"}}>GMV (30d)</th>
              <th style={{textAlign:"right"}}>All-time orders</th>
              <th style={{textAlign:"right"}}>Rating</th>
              <th style={{width:24}}></th>
            </tr></thead>
            <tbody>
              {topStores.map((s, i) => (
                <tr key={s.id}>
                  <td className="num muted">{String(i+1).padStart(2,"0")}</td>
                  <td>
                    <div style={{display:"flex", alignItems:"center", gap:8}}>
                      <div style={{width:20,height:20,borderRadius:3,background:"var(--surface-3)",display:"grid",placeItems:"center",color:"var(--ink-3)",fontSize:10,fontWeight:600}}>{s.name[0]}</div>
                      <span style={{color:"var(--ink)", fontWeight:500}}>{s.name}</span>
                      <span className="id">· {s.id.slice(0,8).toUpperCase()}</span>
                    </div>
                  </td>
                  <td className="muted" style={{textTransform:"capitalize"}}>{s.category}</td>
                  <td className="num" style={{textAlign:"right"}}>{s.orders_30d.toLocaleString()}</td>
                  <td className="num" style={{textAlign:"right", color:"var(--ink)"}}>{D.compactCurrency(s.gmv_30d)}</td>
                  <td className="num" style={{textAlign:"right"}}>{s.total_orders.toLocaleString()}</td>
                  <td className="num" style={{textAlign:"right"}}>
                    {s.rating ? <span className="chip accent">{s.rating} ★</span> : <span className="muted">—</span>}
                  </td>
                  <td><I.externalArrow size={12} className="muted"/></td>
                </tr>
              ))}
            </tbody>
          </table></div>
        )}
      </div>
    </div>
  );
};

const Stat = ({ label, value, tone }) => (
  <div>
    <div className="lbl-mini" style={{
      fontFamily:"var(--font-mono)", fontSize:9.5, letterSpacing:"0.06em",
      textTransform:"uppercase", color:"var(--ink-3)"
    }}>{label}</div>
    <div style={{
      fontSize:16, fontWeight:500, marginTop:2, letterSpacing:"-0.01em",
      color: tone==="accent" ? "var(--accent-ink)" : "var(--ink)",
      fontFamily:"var(--font-sans)", fontFeatureSettings:'"tnum" 1'
    }}>{value}</div>
  </div>
);

window.OverviewPage = OverviewPage;