// All dashboard screens. Each export is consumed by app.jsx.

const { useState: useStateS, useMemo: useMemoS, useEffect: useEffectS } = React;

// ─────────────────────────────────────────────────────────────────────────────
// Suggest action engine — gera ação concreta baseada em dados transacionais
// ─────────────────────────────────────────────────────────────────────────────
function suggestInactiveAction(customer) {
  const { daysInactive, ltv, totalOrders, avgTicket } = customer;
  // Cliente VIP (LTV alto) sumido há muito tempo → visita presencial
  if (ltv >= 80_000 && daysInactive >= 180) {
    return { priority: "high", emoji: "🚨", label: "Visita presencial", detail: `VIP com LTV ${fmtBRLshort(ltv)} sumido há ${daysInactive}d` };
  }
  // LTV médio em risco → ligação direta
  if (ltv >= 30_000 && daysInactive >= 120) {
    return { priority: "medium", emoji: "📞", label: "Ligar", detail: `LTV ${fmtBRLshort(ltv)} parado há ${daysInactive}d` };
  }
  // Histórico recorrente quebrado → WhatsApp pessoal
  if (totalOrders >= 10 && daysInactive >= 90) {
    return { priority: "medium", emoji: "💬", label: "WhatsApp", detail: `${totalOrders} pedidos antes · ticket médio ${fmtBRL(avgTicket)}` };
  }
  // Cauda longa → campanha em massa
  return { priority: "low", emoji: "📧", label: "Campanha", detail: `Incluir em próxima campanha de reativação` };
}

function suggestRecurringAction(customer) {
  const { daysInactive, ltv, totalOrders, avgTicket } = customer;
  // Top VIP em janela de compra → antecipar venda
  if (ltv >= 100_000 && daysInactive <= 14) {
    return { priority: "hot", emoji: "💎", label: "Upsell premium", detail: `VIP recém-comprou · ofertar contrato anual` };
  }
  // Recorrente em janela → ligar pra próximo pedido
  if (totalOrders >= 20 && daysInactive >= 10 && daysInactive <= 30) {
    return { priority: "high", emoji: "📞", label: "Antecipar pedido", detail: `Compra a cada ~${Math.round(365/totalOrders)}d · janela ideal` };
  }
  // Ticket alto crescente → vender mais
  if (avgTicket >= 5_000 && totalOrders >= 5) {
    return { priority: "medium", emoji: "📈", label: "Upsell", detail: `Ticket alto · oferecer linha premium` };
  }
  // Recorrente saudável → manter relacionamento
  return { priority: "low", emoji: "✓", label: "Acompanhar", detail: `Carteira saudável · check mensal` };
}

// ─────────────────────────────────────────────────────────────────────────────
// LOGIN
// ─────────────────────────────────────────────────────────────────────────────
function LoginScreen({ onLogin }) {
  const M = window.MOCK;
  const [email, setEmail] = useStateS("felipe.sergio@cefeq.com.br");
  const [pwd, setPwd] = useStateS("••••••••");
  const [loading, setLoading] = useStateS(false);
  const [selectedUserId, setSelectedUserId] = useStateS("u01");

  function loginAs(userId) {
    const user = M.USERS.find(u => u.id === userId);
    if (user) {
      window.MOCK.currentUser = user;
      setSelectedUserId(userId);
      setEmail(user.email);
    }
  }

  function submit(e) {
    e.preventDefault();
    if (!window.MOCK.currentUser) {
      window.MOCK.currentUser = M.USERS.find(u => u.id === selectedUserId) || M.USERS[0];
    }
    setLoading(true);
    setTimeout(() => { setLoading(false); onLogin(); }, 600);
  }

  const personaColors = {
    "Admin Master": { bg: "rgba(124, 58, 237, 0.10)", border: "#7C3AED", text: "#7C3AED" },
    "CEO":          { bg: "rgba(32, 48, 144, 0.10)",  border: "#203090", text: "#203090" },
    "Gerência":     { bg: "rgba(229, 184, 0, 0.14)",  border: "#B47B00", text: "#8A5E00" },
  };

  return (
    <div className="login-shell">
      <div className="login-left">
        <div className="login-brand">
          <CefeqLogo size="lg" />
        </div>
        <form className="login-card" onSubmit={submit}>
          <h2>Entrar</h2>
          <p className="login-sub">Acesse seu painel de Business Intelligence</p>

          <label className="field">
            <span>E-mail corporativo</span>
            <input type="email" value={email} onChange={e => setEmail(e.target.value)} />
          </label>

          <label className="field">
            <span>Senha</span>
            <input type="password" value={pwd} onChange={e => setPwd(e.target.value)} />
          </label>

          <div className="login-row">
            <label className="check"><input type="checkbox" defaultChecked/> Manter conectado</label>
            <a className="link">Esqueci minha senha</a>
          </div>

          <button className="btn btn-primary btn-block" disabled={loading}>
            {loading ? "Entrando..." : "Entrar no painel"}
          </button>

          <div className="login-divider"><span>ou</span></div>

          <button type="button" className="btn btn-outline btn-block">
            Entrar com SSO corporativo
          </button>

          <div className="persona-block">
            <div className="persona-block-head">
              <span className="persona-block-title">Entrar como</span>
              <span className="persona-block-sub">demonstração · clique pra trocar perfil</span>
            </div>
            <div className="persona-grid">
              {(M.LOGIN_PERSONAS || []).map(p => {
                const user = M.USERS.find(u => u.id === p.userId);
                if (!user) return null;
                const c = personaColors[user.role] || personaColors["CEO"];
                const active = selectedUserId === p.userId;
                return (
                  <button
                    key={p.userId}
                    type="button"
                    className={`persona-card ${active ? "is-active" : ""}`}
                    onClick={() => loginAs(p.userId)}
                    style={{
                      borderColor: active ? c.border : "var(--border)",
                      background: active ? c.bg : "var(--surface)",
                    }}
                  >
                    <div className="persona-avatar" style={{ background: c.border }}>
                      {user.initials}
                    </div>
                    <div className="persona-meta">
                      <div className="persona-name">{user.name}</div>
                      <div className="persona-role" style={{ color: c.text }}>{user.role}</div>
                      <div className="persona-sub">{p.sub.split(" · ").slice(1).join(" · ") || p.sub}</div>
                    </div>
                    {active && <div className="persona-check" style={{ color: c.text }}>✓</div>}
                  </button>
                );
              })}
            </div>
          </div>

          <div className="login-foot">
            Acesso protegido · 2FA habilitado · Sessão criptografada
          </div>
        </form>
      </div>

      <div className="login-right">
        <div className="login-art">
          <div className="art-blob art-blob-1"/>
          <div className="art-blob art-blob-2"/>

          {/* Headline */}
          <div className="art-headline">
            <div className="art-eyebrow">Painel CEFEQ · BI</div>
            <h1 className="art-title">Decisões mais rápidas,<br/>com dados que <span>fazem sentido</span>.</h1>
          </div>

          {/* Abstract donut */}
          <div className="art-card art-glass-donut">
            <div className="ag-label">Mix de canais</div>
            <svg viewBox="0 0 100 100" className="ag-donut">
              <circle cx="50" cy="50" r="38" fill="none" stroke="rgba(255,255,255,0.15)" strokeWidth="14"/>
              <circle cx="50" cy="50" r="38" fill="none" stroke="var(--cefeq-yellow)" strokeWidth="14"
                strokeDasharray="238.76" strokeDashoffset="60"
                transform="rotate(-90 50 50)" strokeLinecap="round"/>
            </svg>
            <div className="ag-legend">
              <div><span className="dot" style={{background:"var(--cefeq-yellow)"}}/> Loja física</div>
              <div><span className="dot" style={{background:"rgba(255,255,255,0.25)"}}/> E-commerce</div>
            </div>
          </div>

          {/* Sparkline card — no axis labels, no values */}
          <div className="art-card art-glass-spark">
            <div className="ag-label">Tendência mensal</div>
            <svg viewBox="0 0 200 60" className="ag-spark" preserveAspectRatio="none">
              <defs>
                <linearGradient id="sparkFill" x1="0" y1="0" x2="0" y2="1">
                  <stop offset="0%" stopColor="var(--cefeq-yellow)" stopOpacity="0.45"/>
                  <stop offset="100%" stopColor="var(--cefeq-yellow)" stopOpacity="0"/>
                </linearGradient>
              </defs>
              <path d="M0,42 L20,38 L40,36 L60,32 L80,30 L100,26 L120,22 L140,18 L160,14 L180,10 L200,6 L200,60 L0,60 Z"
                fill="url(#sparkFill)"/>
              <path d="M0,42 L20,38 L40,36 L60,32 L80,30 L100,26 L120,22 L140,18 L160,14 L180,10 L200,6"
                fill="none" stroke="var(--cefeq-yellow)" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
              {/* dot at end */}
              <circle cx="200" cy="6" r="3" fill="var(--cefeq-yellow)"/>
              <circle cx="200" cy="6" r="6" fill="var(--cefeq-yellow)" opacity="0.3"/>
            </svg>
            <div className="ag-trend">
              <span className="ag-arrow">↗</span> Crescimento sustentado
            </div>
          </div>

          {/* Mini stacked bars — pure visual, no values */}
          <div className="art-card art-glass-bars">
            <div className="ag-label">Distribuição por setor</div>
            <div className="ag-bars">
              {[80, 62, 55, 44, 38, 30, 24, 20, 14].map((h, i) => (
                <div key={i} className="ag-bar" style={{ height: `${h}%`, animationDelay: `${i * 60}ms` }}/>
              ))}
            </div>
          </div>

          {/* Big percentage tile */}
          <div className="art-card art-glass-pct">
            <div className="ag-pct-ring">
              <svg viewBox="0 0 60 60">
                <circle cx="30" cy="30" r="25" fill="none" stroke="rgba(255,255,255,0.18)" strokeWidth="5"/>
                <circle cx="30" cy="30" r="25" fill="none" stroke="var(--cefeq-yellow)" strokeWidth="5"
                  strokeDasharray="157.08" strokeDashoffset="39"
                  transform="rotate(-90 30 30)" strokeLinecap="round"/>
              </svg>
              <div className="ag-pct-num">75<span>%</span></div>
            </div>
            <div className="ag-pct-meta">
              <div className="ag-pct-lbl">Carteira recorrente</div>
              <div className="ag-pct-sub">clientes com mais de 1 compra</div>
            </div>
          </div>

          {/* Floating dots / decoration */}
          <svg className="art-decor" viewBox="0 0 400 400">
            <g fill="rgba(255,255,255,0.06)">
              <circle cx="40" cy="200" r="2"/>
              <circle cx="80" cy="180" r="2"/>
              <circle cx="120" cy="220" r="2"/>
              <circle cx="160" cy="200" r="2"/>
              <circle cx="200" cy="240" r="2"/>
              <circle cx="240" cy="220" r="2"/>
              <circle cx="280" cy="260" r="2"/>
              <circle cx="320" cy="240" r="2"/>
              <circle cx="360" cy="280" r="2"/>
            </g>
          </svg>

          <div className="art-foot">
            <div className="art-foot-row">
              <Icon name="check" size={14}/> Acesso seguro · 2FA
            </div>
            <div className="art-foot-row">
              <Icon name="check" size={14}/> Dados criptografados
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────────────────────
// OVERVIEW
// ─────────────────────────────────────────────────────────────────────────────
function OverviewScreen({ onNavigate, cardStyle }) {
  const M = window.MOCK;
  const [filtersOpen, setFiltersOpen] = useStateS(false);
  const [tab, setTab] = useStateS("summary");
  const filters = window.useActiveFilters();
  const mult = window.computeFilterMultiplier(filters);

  const ytd25 = M.REVENUE_MONTHLY.slice(0,9).reduce((s,r) => s + (r.y25||0), 0) * mult;
  const ytd26 = M.REVENUE_MONTHLY.slice(0,9).reduce((s,r) => s + (r.y26||0), 0) * mult;
  const growthYTD = (ytd26 - ytd25) / ytd25;

  const totalRev = M.BRANDS.reduce((s,b) => s + b.rev, 0) * mult;
  const totalMarginValue = M.BRANDS.reduce((s,b) => s + b.rev * b.margin, 0);
  const blendedMargin = totalMarginValue / (M.BRANDS.reduce((s,b) => s + b.rev, 0));
  const totalDeals = Math.round(M.SELLERS.reduce((s,v) => s + v.deals, 0) * mult);
  const blendedTicket = M.SELLERS.reduce((s,v) => s + v.rev, 0) / M.SELLERS.reduce((s,v) => s + v.deals, 0);

  const currentPeriod = window.FILTER_OPTIONS.period().find(p => p.id === filters.period);
  const storeOptions = window.FILTER_OPTIONS.stores();
  const allStores = filters.stores.length === storeOptions.length;
  const storesLabel = allStores
    ? "todas as lojas"
    : filters.stores.map(id => storeOptions.find(s => s.id === id)?.short).filter(Boolean).join(", ");

  return (
    <div className="page">
      <div className="page-head">
        <div>
          <div className="muted">
            {currentPeriod.label} ({currentPeriod.range}) · {storesLabel}
          </div>
          <h2 style={{ margin: 0, fontWeight: 600 }}>Boa tarde, Felipe. Aqui está o resumo de hoje.</h2>
        </div>
        <div className="page-head-actions">
          <button className={`btn ${filtersOpen ? "btn-primary" : "btn-ghost"}`} onClick={() => setFiltersOpen(v => !v)}>
            <Icon name="filter" size={14}/> Filtros {filtersOpen ? "✕" : ""}
          </button>
          <button className="btn btn-outline" onClick={() => window.openPrintPreview()}><Icon name="printer" size={14}/> Imprimir PDF</button>
        </div>
      </div>

      <FilterBar open={filtersOpen} onClose={() => setFiltersOpen(false)}/>

      <div className="seg-control" style={{ marginBottom: 14, width: "fit-content" }}>
        <button className={`seg-btn ${tab === "summary" ? "active" : ""}`} onClick={() => setTab("summary")}>
          <Icon name="overview" size={12} style={{ marginRight: 4, verticalAlign: "middle" }}/>
          Resumo
        </button>
        <button className={`seg-btn ${tab === "closing" ? "active" : ""}`} onClick={() => setTab("closing")}>
          <Icon name="check" size={12} style={{ marginRight: 4, verticalAlign: "middle" }}/>
          Fechamento do dia
        </button>
        <button className={`seg-btn ${tab === "stores" ? "active" : ""}`} onClick={() => setTab("stores")}>
          <Icon name="brands" size={12} style={{ marginRight: 4, verticalAlign: "middle" }}/>
          Comparativo entre lojas
        </button>
      </div>

      {tab === "closing" && <DailyClosingScreen embedded={true} />}
      {tab === "stores" && <StoresComparisonTab />}
      {tab !== "summary" ? null : (<>

      <ExecutiveSummary onNavigate={onNavigate} />

      <div className="kpi-grid">
        <KPI label={`Faturamento ${currentPeriod.label}`}
             value={fmtBRLshort(ytd26)}
             delta={filters.compareYoY ? growthYTD : null}
             sub={filters.compareYoY ? `vs. mesmo período de ${M.NOW.prevYear}` : `período: ${currentPeriod.range}`}
             sparkline={M.REVENUE_MONTHLY.map(r => r.y26 * mult)}
             accent="var(--cefeq-blue)" />
        <KPI label="Margem média"
             value={(blendedMargin * 100).toFixed(1).replace(".", ",") + "%"}
             delta={filters.compareYoY ? 0.018 : null}
             sub="margem bruta ponderada"
             sparkline={[0.30, 0.31, 0.31, 0.32, 0.31, 0.33, 0.32, 0.33, 0.33]} />
        <KPI label="Ticket médio"
             value={fmtBRL(Math.round(blendedTicket))}
             delta={filters.compareYoY ? 0.064 : null}
             sub={`em ${fmtInt(totalDeals)} negócios`}
             sparkline={[8200, 8400, 8650, 8500, 8800, 9100, 9050, 9300, 9450]} />
        <KPI label={`Crescimento ${String(M.NOW.prevYear).slice(2)}→${String(M.NOW.year).slice(2)}`}
             value={fmtPct(growthYTD).replace("+", "")}
             delta={null}
             sub={`Ano fiscal projetado: ${fmtBRLshort(ytd26 * 1.34)}`}
             accent="var(--cefeq-yellow-deep)"
             sparkline={[0.10, 0.14, 0.18, 0.20, 0.22, 0.23, 0.24, 0.24, 0.25]} />
      </div>

      <div className="grid-2-1">
        <section className="card">
          <div className="card-head">
            <div>
              <h3>Crescimento mensal · {M.NOW.prevYear} vs {M.NOW.year}</h3>
              <div className="muted">
                Faturamento bruto · YoY total: <strong style={{ color: growthYTD >= 0 ? "var(--success)" : "var(--danger)" }}>
                  {growthYTD >= 0 ? "+" : ""}{(growthYTD * 100).toFixed(1).replace(".", ",")}%
                </strong> ({fmtBRLshort(ytd26 - ytd25)})
              </div>
            </div>
            <div className="legend">
              <span className="lg-dot" style={{ background: "var(--border-strong)" }}/> {M.NOW.prevYear}
              <span className="lg-dot" style={{ background: "var(--cefeq-blue)" }}/> {M.NOW.year}
            </div>
          </div>
          <GrowthBars data={M.REVENUE_MONTHLY.map(r => ({ ...r, y25: r.y25 * mult, y26: r.y26 * mult }))} />

          {/* YoY mês a mês */}
          <div className="yoy-strip">
            {M.REVENUE_MONTHLY.map((r, i) => {
              if (!r.y25 || !r.y26) return null;
              const yoy = (r.y26 - r.y25) / r.y25;
              return (
                <div key={i} className={`yoy-cell ${yoy >= 0 ? "up" : "down"}`}>
                  <div className="yoy-month">{r.m}</div>
                  <div className="yoy-pct">{yoy >= 0 ? "+" : ""}{(yoy * 100).toFixed(0)}%</div>
                </div>
              );
            })}
          </div>
          <div className="muted" style={{ fontSize: 11, marginTop: 8, padding: "0 4px" }}>
            💡 Cada quadrado mostra a variação % do mês comparado ao mesmo mês de {M.NOW.prevYear}.
          </div>
        </section>

        <section className="card">
          <div className="card-head">
            <div>
              <h3>Canal de venda</h3>
              <div className="muted" style={{ fontSize: 11 }}>
                {filters.compareYoY
                  ? `% indicam variação YoY (${M.NOW.year} vs ${M.NOW.prevYear})`
                  : `Comparação YoY desativada nos filtros`}
              </div>
            </div>
            <button className="btn-link" onClick={() => onNavigate("brands")}>Detalhar →</button>
          </div>
          <Donut
            data={M.CHANNELS.map((c, i) => ({
              label: c.name, value: c.rev * mult,
              color: i === 0 ? "var(--cefeq-blue)" : "var(--cefeq-yellow-deep)"
            }))}
            label="Faturamento total"
            size={180}
          />
          <div className="channel-list">
            {M.CHANNELS.map((c, i) => (
              <div key={i} className="channel-row">
                <div className="channel-name">
                  <span className="dot" style={{ background: i === 0 ? "var(--cefeq-blue)" : "var(--cefeq-yellow-deep)" }}/>
                  {c.name}
                </div>
                <div className="channel-vals">
                  <span>{fmtBRLshort(c.rev * mult)}</span>
                  {filters.compareYoY && (
                    <span className={`mini-delta ${c.growth >= 0 ? "up" : "down"}`}>{fmtPct(c.growth)}</span>
                  )}
                </div>
              </div>
            ))}
          </div>
        </section>
      </div>

      <VisitTodayCard onNavigate={onNavigate} />

      <div className="grid-2-1">
        <section className="card">
          <div className="card-head">
            <h3>Top setores</h3>
            <button className="btn-link" onClick={() => onNavigate("sectors")}>Ver análise completa →</button>
          </div>
          <RankBars items={M.SECTORS.slice(0,6)} secondaryKey="growth" />
        </section>

        <section className="card">
          <div className="card-head">
            <h3>Top vendedores</h3>
            <button className="btn-link" onClick={() => onNavigate("sellers")}>Ranking →</button>
          </div>
          <RankBars items={M.SELLERS.slice(0,6)} secondaryKey="growth" color="var(--cefeq-blue)" />
        </section>
      </div>
      </>)}
    </div>
  );
}

// ─────────────────────────────────────────────────────────────────────────────
// STORES COMPARISON — comparativo lado a lado entre lojas/canais
// ─────────────────────────────────────────────────────────────────────────────
function StoresComparisonTab() {
  const M = window.MOCK;
  const filters = window.useActiveFilters();
  const mult = window.computeFilterMultiplier(filters);

  // Todas as unidades ativas: 2 lojas em Ponta Grossa, 1 em Castro, e-commerce e Assistência
  const storesData = M.STORES.filter(s => s.status === "ativa");

  const totalRev = storesData.reduce((s, st) => s + st.rev, 0);
  const totalOrders = storesData.reduce((s, st) => s + st.orders, 0);
  const adjStores = storesData.map(s => ({ ...s, adjRev: s.rev * mult, adjOrders: Math.round(s.orders * mult) }));
  const adjTotal = adjStores.reduce((s, st) => s + st.adjRev, 0);

  const champion = [...adjStores].sort((a, b) => b.adjRev - a.adjRev)[0];
  const bestTicket = [...adjStores].sort((a, b) => b.ticket - a.ticket)[0];
  const mostOrders = [...adjStores].sort((a, b) => b.adjOrders - a.adjOrders)[0];

  const typeColor = (type) => {
    if (type === "Matriz") return "var(--cefeq-blue)";
    if (type === "E-commerce") return "var(--cefeq-yellow-deep)";
    if (type === "Serviço") return "var(--success)";
    return "var(--text-soft)";
  };

  return (
    <div>
      <div className="kpi-grid kpi-4" style={{ marginBottom: 18 }}>
        <KPI label="Faturamento total" value={fmtBRLshort(adjTotal)} sub={`em ${storesData.length} unidades`} accent="var(--cefeq-blue)"/>
        <KPI label="Líder em receita" value={champion.name.split(" · ")[0]}
             sub={`${fmtBRLshort(champion.adjRev)} · ${((champion.adjRev/adjTotal)*100).toFixed(0)}% do total`}
             accent="var(--cefeq-blue)" />
        <KPI label="Maior ticket médio" value={fmtBRL(bestTicket.ticket)}
             sub={bestTicket.name.split(" · ")[0]} accent="var(--cefeq-yellow-deep)" />
        <KPI label="Mais pedidos" value={fmtInt(mostOrders.adjOrders)}
             sub={mostOrders.name.split(" · ")[0]} accent="var(--success)" />
      </div>

      <div className="card">
        <div className="card-head">
          <h3>Lado a lado · {storesData.length} unidades</h3>
          <div className="muted">Ordenado por faturamento no período</div>
        </div>
        <div className="stores-compare-grid">
          {adjStores.sort((a, b) => b.adjRev - a.adjRev).map((s, i) => {
            const share = (s.adjRev / adjTotal) * 100;
            const isLeader = i === 0;
            return (
              <div key={s.id} className={`store-card ${isLeader ? "is-leader" : ""}`} style={{ borderTopColor: typeColor(s.type) }}>
                <div className="store-card-head">
                  <div>
                    <div className="store-type-badge" style={{ background: typeColor(s.type) }}>{s.type}</div>
                    <div className="store-name">{s.name}</div>
                    <div className="muted" style={{ fontSize: 11, marginTop: 2 }}>{s.address}</div>
                  </div>
                  {isLeader && <span style={{ fontSize: 24 }} title="Maior faturamento do período">🏆</span>}
                </div>

                <div className="store-rev">
                  <div className="muted" style={{ fontSize: 10, fontWeight: 700, letterSpacing: "0.06em" }}>FATURAMENTO</div>
                  <div className="store-rev-value">{fmtBRLshort(s.adjRev)}</div>
                  <div className="store-rev-bar">
                    <span style={{ width: `${share}%`, background: typeColor(s.type) }}/>
                  </div>
                  <div className="store-rev-share">{share.toFixed(1).replace(".", ",")}% do total</div>
                </div>

                <div className="store-metrics">
                  <div className="store-metric">
                    <div className="muted" style={{ fontSize: 10 }}>Ticket médio</div>
                    <div className="store-metric-v">{fmtBRL(s.ticket)}</div>
                  </div>
                  <div className="store-metric">
                    <div className="muted" style={{ fontSize: 10 }}>Pedidos</div>
                    <div className="store-metric-v">{fmtInt(s.adjOrders)}</div>
                  </div>
                  <div className="store-metric">
                    <div className="muted" style={{ fontSize: 10 }}>Vendedores</div>
                    <div className="store-metric-v">{s.sellers || "—"}</div>
                  </div>
                </div>

                <div className="store-foot">
                  <div className="muted" style={{ fontSize: 10 }}>GERENTE</div>
                  <div style={{ fontWeight: 600, fontSize: 12 }}>{s.manager}</div>
                </div>
              </div>
            );
          })}
        </div>
        <div className="muted" style={{ fontSize: 11, padding: "10px 16px", borderTop: "1px solid var(--border)" }}>
          💡 Storytelling: <strong>{champion.name.split(" · ")[0]}</strong> lidera com {((champion.adjRev/adjTotal)*100).toFixed(0)}% do faturamento, mas <strong>{bestTicket.name.split(" · ")[0]}</strong> tem o maior ticket médio ({fmtBRL(bestTicket.ticket)}), sugerindo perfil de cliente premium.
        </div>
      </div>
    </div>
  );
}
window.StoresComparisonTab = StoresComparisonTab;

// ─────────────────────────────────────────────────────────────────────────────
// EXECUTIVE SUMMARY — 3 insights acionáveis derivados dos dados (não decorativo)
// ─────────────────────────────────────────────────────────────────────────────
function ExecutiveSummary({ onNavigate }) {
  const M = window.MOCK;
  const filters = window.useActiveFilters();
  const mult = window.computeFilterMultiplier(filters);

  // Calcula insights dinamicamente a partir dos dados + filtros aplicados
  const ytd25 = M.REVENUE_MONTHLY.slice(0, 9).reduce((s, r) => s + (r.y25 || 0), 0) * mult;
  const ytd26 = M.REVENUE_MONTHLY.slice(0, 9).reduce((s, r) => s + (r.y26 || 0), 0) * mult;
  const growthYTD = (ytd26 - ytd25) / ytd25;

  const inactive365 = M.CUSTOMERS.filter(c => c.daysInactive >= 365);
  const ltvAtRisk = inactive365.reduce((s, c) => s + c.ltv, 0);

  // Setor com maior crescimento E maior margem (oportunidade)
  const topGrowthSector = [...M.SECTORS]
    .filter(s => s.margin >= 0.30)
    .sort((a, b) => b.growth - a.growth)[0];

  // Loja que mais cresceu vs caiu (placeholder via STORES rev)
  const sortedStores = [...M.STORES].filter(s => s.status === "ativa").sort((a, b) => b.rev - a.rev);
  const topStore = sortedStores[0];

  // Marca em queda com volume relevante
  const fallingBrand = [...M.BRANDS]
    .filter(b => b.growth < 0 && b.rev > 200_000)
    .sort((a, b) => a.growth - b.growth)[0];

  const insights = [
    {
      type: growthYTD >= 0.15 ? "positive" : growthYTD >= 0 ? "neutral" : "negative",
      icon: growthYTD >= 0.15 ? "🚀" : growthYTD >= 0 ? "📈" : "⚠️",
      title: growthYTD >= 0.15
        ? `Crescimento forte: +${(growthYTD * 100).toFixed(1).replace(".", ",")}% YoY`
        : growthYTD >= 0
        ? `Crescimento modesto: +${(growthYTD * 100).toFixed(1).replace(".", ",")}% YoY`
        : `Atenção: queda de ${(growthYTD * 100).toFixed(1).replace(".", ",")}% YoY`,
      detail: `Faturamento do período: ${fmtBRLshort(ytd26)} vs ${fmtBRLshort(ytd25)} em ${M.NOW.prevYear}. Diferença de ${fmtBRLshort(Math.abs(ytd26 - ytd25))}.`,
      action: growthYTD >= 0.15
        ? "Acelerar investimento em marketing"
        : "Revisar mix de produtos e canal de venda",
      onClick: () => onNavigate("brands"),
    },
    {
      type: "opportunity",
      icon: "💡",
      title: `${topGrowthSector.name} é a melhor oportunidade no momento`,
      detail: `Categoria com +${(topGrowthSector.growth * 100).toFixed(1).replace(".", ",")}% de crescimento E margem de ${(topGrowthSector.margin * 100).toFixed(0)}% — combinação rara.`,
      action: "Reforçar exposição e estoque neste setor",
      onClick: () => onNavigate("sectors"),
    },
    {
      type: "risk",
      icon: "🚨",
      title: `${fmtBRLshort(ltvAtRisk)} parados em clientes inativos há mais de 1 ano`,
      detail: `${inactive365.length} clientes com LTV histórico relevante sem comprar há 12+ meses. Recuperar 10% = ${fmtBRLshort(ltvAtRisk * 0.10)} de faturamento adicional.`,
      action: "Abrir campanha de reativação",
      onClick: () => onNavigate("inactive"),
    },
  ];

  // Adiciona 4º insight se houver marca em queda relevante
  if (fallingBrand) {
    insights.push({
      type: "negative",
      icon: "📉",
      title: `${fallingBrand.name} está em queda: ${(fallingBrand.growth * 100).toFixed(1).replace(".", ",")}% YoY`,
      detail: `Apesar do faturamento ainda relevante (${fmtBRLshort(fallingBrand.rev)}), a marca perde terreno. Pode ser estoque parado ou fornecedor com problema.`,
      action: "Avaliar continuidade ou renegociar",
      onClick: () => onNavigate("brands"),
    });
  }

  return (
    <section className="exec-summary">
      <div className="exec-summary-head">
        <div>
          <div className="exec-summary-eyebrow">📊 RESUMO EXECUTIVO · O QUE PRECISA DE ATENÇÃO HOJE</div>
          <h3 className="exec-summary-title">Insights gerados a partir dos seus dados — em ordem de prioridade</h3>
        </div>
        <div className="muted" style={{ fontSize: 11 }}>
          Atualizado em {new Date().toLocaleString("pt-BR", { day: "2-digit", month: "short", hour: "2-digit", minute: "2-digit" })}
        </div>
      </div>

      <div className="exec-summary-grid">
        {insights.map((ins, i) => (
          <button key={i} className={`exec-card exec-${ins.type}`} onClick={ins.onClick}>
            <div className="exec-card-head">
              <span className="exec-icon">{ins.icon}</span>
              <span className="exec-card-title">{ins.title}</span>
            </div>
            <div className="exec-card-detail">{ins.detail}</div>
            <div className="exec-card-action">
              <span>{ins.action}</span>
              <span className="exec-card-arrow">→</span>
            </div>
          </button>
        ))}
      </div>
    </section>
  );
}

// ─────────────────────────────────────────────────────────────────────────────
// CLIENTES PARA VISITAR HOJE — featured card on Overview
// ─────────────────────────────────────────────────────────────────────────────
// WhatsApp official-style icon (green bubble path)
function WhatsAppIcon({ size = 16 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="currentColor" aria-hidden>
      <path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51l-.57-.01c-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.71.306 1.263.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347zM12.04 21.785h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884zm8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z"/>
    </svg>
  );
}

function PhoneIcon({ size = 16 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden>
      <path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"/>
    </svg>
  );
}

function VisitTodayCard({ onNavigate }) {
  const [openVisit, setOpenVisit] = useStateS(null);
  // Todos os insights derivam APENAS de dados transacionais (vendas, ticket, recência, LTV).
  // O painel não tem CRM nem integração WhatsApp — então nenhuma "resposta positiva" inventada.
  const visits = [
    {
      name: "Construções Aurora",
      reason: "Cliente VIP · sem compras há 187 dias (média histórica: 1 pedido/mês)",
      seller: "Anderson Carvalho",
      urgency: "high",
      urgencyLabel: "RISCO DE PERDA",
      ltv: 142_300,
      phone: "+554232221100",
      lastPurchase: "2025-11-20",
      avgTicket: 8_450,
      orders: 17,
      segment: "Construção civil de grande porte",
      contact: "Carlos Aurora",
      contactRole: "Sócio-diretor",
      dataSource: "Análise de recência: 187 dias sem pedido vs. média histórica de 31 dias entre compras (6× acima do normal)",
      whatsappMsg: "Olá Carlos, tudo bem? Aqui é da CEFEQ Ferramentas. Faz um tempo que não passamos um pedido pra Construções Aurora — gostaria de entender se posso ajudar em algo.",
      nextStep: "Visita presencial — entender se houve troca de fornecedor ou queda de demanda. Cliente representa R$ 142,3k de LTV.",
    },
    {
      name: "Marcenaria Centro Sul",
      reason: "Frequência de compra caiu: a cada 15 dias → agora 37 dias sem pedido",
      seller: "Beatriz Moraes",
      urgency: "medium",
      urgencyLabel: "ALERTA DE FREQUÊNCIA",
      ltv: 84_600,
      phone: "+554232324400",
      lastPurchase: "2026-04-20",
      avgTicket: 1_820,
      orders: 46,
      segment: "Marcenaria sob medida",
      contact: "Rogério Centro",
      contactRole: "Comprador",
      dataSource: "Análise de cadência: histórico de 46 pedidos com intervalo médio de 15,2 dias. Atual: 37 dias (+143% acima da média)",
      whatsappMsg: "Oi Rogério! Notei que vocês costumam passar pedido a cada 15 dias e dessa vez já passaram 37. Aconteceu alguma coisa? Posso ajudar?",
      nextStep: "Ligação rápida — entender desvio na cadência. Risco de churn médio.",
    },
    {
      name: "Empreiteira Boa Vista",
      reason: "Ticket médio subiu 4×: de R$ 2,8k → R$ 12,3k nos últimos 3 pedidos",
      seller: "Carlos Eduardo",
      urgency: "opportunity",
      urgencyLabel: "EM EXPANSÃO",
      ltv: 68_900,
      phone: "+554233334455",
      lastPurchase: "2026-05-22",
      avgTicket: 12_300,
      orders: 9,
      segment: "Obras residenciais e comerciais",
      contact: "Eliane Boa Vista",
      contactRole: "Gestora de compras",
      dataSource: "Análise de crescimento: 3 últimos pedidos com ticket 4,4× acima dos 6 primeiros. Sinal claro de aumento de escala do cliente.",
      whatsappMsg: "Olá Eliane! Acompanhando aqui os últimos pedidos vi que vocês estão crescendo bem o volume com a gente — gostaria de te apresentar nossa condição PJ Premium.",
      nextStep: "Apresentar contrato PJ Premium + linha de crédito proporcional ao novo ticket médio.",
    },
    {
      name: "Oficina Princesa dos Campos",
      reason: "Maior recorrência ativa: 33 pedidos em 12 meses · alta previsibilidade",
      seller: "Daniela Ribeiro",
      urgency: "hot",
      urgencyLabel: "RECORRENTE VIP",
      ltv: 32_100,
      phone: "+554232727900",
      lastPurchase: "2026-05-15",
      avgTicket: 980,
      orders: 33,
      segment: "Oficina mecânica automotiva",
      contact: "Marcelo Princesa",
      contactRole: "Proprietário",
      dataSource: "Análise de recorrência: 33 pedidos em 12 meses (intervalo médio de 11 dias). 12 dias desde última compra — janela ideal de contato pra próximo pedido.",
      whatsappMsg: "Marcelo, beleza? Vi aqui que vocês costumam passar pedido por essa época. Quer que eu já separe o kit que vocês mais levam pra agilizar?",
      nextStep: "Antecipar venda recorrente. Cliente compra a cada ~11 dias, está em janela de próximo pedido.",
    },
  ];

  const urgencyConfig = {
    high:        { bg: "rgba(194, 40, 43, 0.06)",  border: "#C2282B", icon: "🔴", label: "URGENTE" },
    medium:      { bg: "rgba(180, 123, 0, 0.07)",  border: "#B47B00", icon: "🟡", label: "ATENÇÃO" },
    opportunity: { bg: "rgba(32, 48, 144, 0.06)",  border: "#203090", icon: "🔵", label: "OPORTUNIDADE" },
    hot:         { bg: "rgba(15, 127, 80, 0.06)",  border: "#0F7F50", icon: "🟢", label: "QUENTE" },
  };

  function openWhats(v, e) {
    e.stopPropagation();
    const phone = v.phone.replace(/\D/g, "");
    const text = encodeURIComponent(v.whatsappMsg);
    window.open(`https://wa.me/${phone}?text=${text}`, "_blank", "noopener,noreferrer");
  }
  function openTel(v, e) {
    e.stopPropagation();
    window.location.href = `tel:${v.phone}`;
  }

  return (
    <section className="visit-today card">
      <div className="visit-head">
        <div>
          <div className="visit-eyebrow">AGENDA DE HOJE · {window.MOCK.NOW.dayMonthLong}</div>
          <h3 className="visit-title">4 clientes pra visitar hoje</h3>
          <p className="visit-sub">Insights gerados a partir do histórico de compras, recência, ticket médio e LTV — sem suposições, só dados</p>
        </div>
        <button className="btn btn-outline" onClick={() => onNavigate("inactive")}>
          Ver lista completa →
        </button>
      </div>

      <div className="visit-grid">
        {visits.map((v, i) => {
          const c = urgencyConfig[v.urgency];
          return (
            <div
              key={i}
              className={`visit-card urgency-${v.urgency}`}
              style={{ background: c.bg, borderLeftColor: c.border }}
              onClick={() => setOpenVisit(v)}
              role="button"
              tabIndex={0}
              onKeyDown={(e) => { if (e.key === "Enter") setOpenVisit(v); }}
            >
              <div className="visit-card-top">
                <span className="visit-badge" style={{ background: c.border }}>
                  {c.icon} {v.urgencyLabel}
                </span>
                <span className="visit-ltv">LTV {fmtBRLshort(v.ltv)}</span>
              </div>

              <div className="visit-card-body">
                <div className="visit-name">{v.name}</div>
                <div className="visit-reason">{v.reason}</div>
              </div>

              <div className="visit-card-foot">
                <div className="visit-seller-block">
                  <div className="visit-seller-eyebrow">VENDEDOR RESPONSÁVEL</div>
                  <div className="visit-seller-name">{v.seller}</div>
                </div>
                <div className="visit-actions">
                  <button
                    type="button"
                    className="visit-btn visit-btn-whats"
                    title="Abrir WhatsApp"
                    onClick={(e) => openWhats(v, e)}
                  >
                    <WhatsAppIcon size={16}/>
                    <span>WhatsApp</span>
                  </button>
                  <button
                    type="button"
                    className="visit-btn visit-btn-phone"
                    title="Ligar agora"
                    onClick={(e) => openTel(v, e)}
                  >
                    <PhoneIcon size={16}/>
                    <span>Ligar</span>
                  </button>
                  <button
                    type="button"
                    className="visit-btn visit-btn-detail"
                    title="Abrir detalhes do cliente"
                    onClick={(e) => { e.stopPropagation(); setOpenVisit(v); }}
                  >
                    <span>Detalhes →</span>
                  </button>
                </div>
              </div>
            </div>
          );
        })}
      </div>

      <Modal
        open={!!openVisit}
        onClose={() => setOpenVisit(null)}
        title={openVisit?.name}
        subtitle={openVisit && urgencyConfig[openVisit.urgency].label + " · " + openVisit.reason}
        footer={openVisit && <>
          <button className="btn btn-ghost" onClick={() => setOpenVisit(null)}>Fechar</button>
          <button className="btn btn-primary" onClick={(e) => { openWhats(openVisit, e); }}>
            <WhatsAppIcon size={14}/> Abrir WhatsApp
          </button>
        </>}
      >
        {openVisit && (
          <div className="visit-detail">
            <div className="visit-detail-grid">
              <div className="visit-detail-cell">
                <div className="visit-detail-label">LTV total</div>
                <div className="visit-detail-value mono">{fmtBRL(openVisit.ltv)}</div>
              </div>
              <div className="visit-detail-cell">
                <div className="visit-detail-label">Pedidos históricos</div>
                <div className="visit-detail-value mono">{openVisit.orders}</div>
              </div>
              <div className="visit-detail-cell">
                <div className="visit-detail-label">Ticket médio</div>
                <div className="visit-detail-value mono">{fmtBRL(openVisit.avgTicket)}</div>
              </div>
              <div className="visit-detail-cell">
                <div className="visit-detail-label">Última compra</div>
                <div className="visit-detail-value">{openVisit.lastPurchase}</div>
              </div>
            </div>

            <div className="visit-detail-block">
              <div className="visit-detail-label">Contato</div>
              <div className="visit-detail-value">{openVisit.contact} <span className="muted">· {openVisit.contactRole}</span></div>
              <div className="muted mono" style={{ fontSize: 12, marginTop: 4 }}>{openVisit.phone}</div>
            </div>

            <div className="visit-detail-block">
              <div className="visit-detail-label">Segmento</div>
              <div className="visit-detail-value">{openVisit.segment}</div>
            </div>

            <div className="visit-detail-block" style={{
              background: "rgba(32, 48, 144, 0.06)",
              borderLeft: "3px solid var(--cefeq-blue)",
              borderRadius: 6,
              padding: 12,
            }}>
              <div className="visit-detail-label" style={{ color: "var(--cefeq-blue)" }}>
                📊 De onde veio esse insight
              </div>
              <div className="visit-detail-value" style={{ fontWeight: 500, fontSize: 13 }}>{openVisit.dataSource}</div>
            </div>

            <div className="visit-detail-block" style={{
              background: "var(--accent-soft)",
              borderRadius: 8,
              padding: 12,
            }}>
              <div className="visit-detail-label">Próxima ação sugerida</div>
              <div className="visit-detail-value" style={{ fontWeight: 500 }}>{openVisit.nextStep}</div>
            </div>

            <div className="visit-detail-block">
              <div className="visit-detail-label">Vendedor responsável</div>
              <div className="visit-detail-value">{openVisit.seller}</div>
            </div>
          </div>
        )}
      </Modal>
    </section>
  );
}

// ─────────────────────────────────────────────────────────────────────────────
function BrandsScreen() {
  const M = window.MOCK;
  const [selected, setSelected] = useStateS(null);
  const [period, setPeriod] = useStateS("ytd");
  const [dimension, setDimension] = useStateS("brands");
  const [growthFilter, setGrowthFilter] = useStateS("all"); // all | growing | falling
  const [customOpen, setCustomOpen] = useStateS(false);
  const [customFrom, setCustomFrom] = useStateS(M.NOW.yearStartIso);
  const [customTo, setCustomTo] = useStateS(M.NOW.monthEndIso);

  // Multiplicadores por período
  const periodConfig = {
    ytd:     { label: `Ano atual (YTD ${M.NOW.year})`, range: `01/01/${M.NOW.year} → ${M.NOW.monthEndIso.split("-").reverse().join("/")}`, mult: 1.0 },
    "12m":   { label: "Últimos 12 meses",              range: M.NOW.last12Range,                                                            mult: 1.32 },
    quarter: { label: `Trimestre atual (Q${M.NOW.quarter})`, range: M.NOW.quarterRange,                                                      mult: 0.33 },
    custom:  { label: "Personalizado",                  range: `${customFrom} → ${customTo}`,                                                mult: 0.55 },
  };
  const cfg = periodConfig[period];

  // Dimensões disponíveis
  const dimensions = {
    brands:     { label: "Marcas",    icon: "brands",   data: M.BRANDS,     itemKey: "items", itemLabel: "SKUs",      headLabel: "Marca" },
    sectors:    { label: "Setores",   icon: "sectors",  data: M.SECTORS,    itemKey: "items", itemLabel: "SKUs",      headLabel: "Setor" },
    categories: { label: "Categorias",icon: "overview", data: M.CATEGORIES, itemKey: "items", itemLabel: "SKUs",      headLabel: "Categoria" },
    products:   { label: "Produtos",  icon: "brands",   data: M.PRODUCTS,   itemKey: "units", itemLabel: "Unid.",     headLabel: "Produto" },
  };
  const dim = dimensions[dimension];

  const sorted = [...dim.data].sort((a, b) => b.rev - a.rev);
  const totalRev = sorted.reduce((s, x) => s + x.rev, 0);
  const fastestGrowing = [...dim.data].sort((a, b) => b.growth - a.growth)[0];
  const growingCount = dim.data.filter(x => x.growth > 0).length;
  const fallingCount = dim.data.filter(x => x.growth <= 0).length;

  let filteredSorted = sorted;
  if (growthFilter === "growing") filteredSorted = sorted.filter(x => x.growth > 0);
  else if (growthFilter === "falling") filteredSorted = sorted.filter(x => x.growth <= 0);

  const adjustedRev = totalRev * cfg.mult;
  const adjustedSorted = filteredSorted.map(x => ({ ...x, rev: x.rev * cfg.mult }));

  const topThree = sorted.slice(0, 3);
  const topThreeShare = (topThree.reduce((s, x) => s + x.rev, 0) / totalRev) * 100;

  return (
    <div className="page">
      <div className="page-head">
        <div>
          <div className="muted">Análise multi-dimensão · {cfg.label} <span style={{ opacity: 0.7 }}>({cfg.range})</span></div>
          <h2 style={{ margin: 0, fontWeight: 600 }}>Ranking por {dim.label.toLowerCase()}</h2>
        </div>
        <div className="page-head-actions">
          <div className="seg-control">
            <button className={`seg-btn ${period === "ytd" ? "active" : ""}`} onClick={() => setPeriod("ytd")}>Ano atual</button>
            <button className={`seg-btn ${period === "12m" ? "active" : ""}`} onClick={() => setPeriod("12m")}>12 meses</button>
            <button className={`seg-btn ${period === "quarter" ? "active" : ""}`} onClick={() => setPeriod("quarter")}>Trimestre</button>
            <button className={`seg-btn ${period === "custom" ? "active" : ""}`} onClick={() => { setPeriod("custom"); setCustomOpen(true); }}>
              Personalizado…
            </button>
          </div>
          <button className="btn btn-outline" onClick={() => window.openPrintPreview()}><Icon name="printer" size={14}/> Imprimir PDF</button>
        </div>
      </div>

      <div className="seg-control" style={{ marginBottom: 14, width: "fit-content" }}>
        {Object.entries(dimensions).map(([key, d]) => (
          <button
            key={key}
            className={`seg-btn ${dimension === key ? "active" : ""}`}
            onClick={() => { setDimension(key); setGrowthFilter("all"); }}
            type="button"
          >
            <Icon name={d.icon} size={12} style={{ marginRight: 4, verticalAlign: "middle" }}/>
            {d.label}
          </button>
        ))}
      </div>

      <div className="kpi-grid kpi-4">
        <KPI label={`Faturamento ${dim.label.toLowerCase()} (${cfg.label})`} value={fmtBRLshort(adjustedRev)} delta={0.241} />

        <div
          className="kpi kpi-actionable"
          style={{ cursor: "pointer" }}
          onClick={() => setGrowthFilter(growthFilter === "growing" ? "all" : "growing")}
          role="button"
          tabIndex={0}
          title="Clique para filtrar apenas as que cresceram"
        >
          <div className="kpi-label">{dim.label} no período</div>
          <div className="kpi-value" style={{ display: "flex", alignItems: "baseline", gap: 8 }}>
            <span>{sorted.length}</span>
            <span style={{ fontSize: 12, fontWeight: 600, color: "var(--text-muted)" }}>total</span>
          </div>
          <div style={{ display: "flex", gap: 10, fontSize: 12, fontWeight: 600, marginTop: 6 }}>
            <span style={{ color: "var(--success)" }}>↗ {growingCount} crescendo</span>
            <span style={{ color: "var(--danger)" }}>↘ {fallingCount} em queda</span>
          </div>
          <div className="muted" style={{ fontSize: 10, marginTop: 4 }}>
            {growthFilter !== "all" ? "✓ filtrado · clique pra limpar" : "clique pra ver só quem cresceu"}
          </div>
        </div>

        <KPI
          label="Top 3 representam"
          value={topThreeShare.toFixed(1).replace(".", ",") + "%"}
          sub={`${topThree.map(t => t.name.split(" ")[0]).join(" · ")}`}
        />

        <KPI
          label="Maior crescimento"
          value={<span style={{ display: "inline-flex", alignItems: "center", gap: 6 }}>
            <span style={{ fontSize: 22, lineHeight: 1 }}>🏆</span>
            {fastestGrowing.name.length > 20 ? fastestGrowing.name.slice(0, 18) + "…" : fastestGrowing.name}
          </span>}
          sub={`+${(fastestGrowing.growth * 100).toFixed(1).replace(".", ",")}% vs ${M.NOW.prevYear}`}
          accent="var(--success)"
        />
      </div>

      {growthFilter !== "all" && (
        <div className="growth-filter-banner">
          <span>
            <Icon name="filter" size={12}/> Mostrando apenas {growthFilter === "growing" ? "em crescimento" : "em queda"} · <strong>{filteredSorted.length}</strong> {dim.label.toLowerCase()}
          </span>
          <button className="btn-link" onClick={() => setGrowthFilter("all")}>Limpar filtro ✕</button>
        </div>
      )}

      <Modal
        open={customOpen}
        onClose={() => setCustomOpen(false)}
        title="Período personalizado"
        subtitle="Escolha o intervalo de datas pra análise"
        footer={<>
          <button className="btn btn-ghost" onClick={() => setCustomOpen(false)}>Cancelar</button>
          <button className="btn btn-primary" onClick={() => setCustomOpen(false)}>Aplicar</button>
        </>}
      >
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12 }}>
          <label className="field">
            <span>De</span>
            <input type="date" value={customFrom} onChange={(e) => setCustomFrom(e.target.value)}/>
          </label>
          <label className="field">
            <span>Até</span>
            <input type="date" value={customTo} onChange={(e) => setCustomTo(e.target.value)}/>
          </label>
        </div>
        <div className="muted" style={{ fontSize: 12, marginTop: 12 }}>
          Atalhos: <button className="link" onClick={() => { setCustomFrom(`${M.NOW.year}-01-01`); setCustomTo(`${M.NOW.year}-12-31`); }}>Ano todo {M.NOW.year}</button>
          {" · "}
          <button className="link" onClick={() => { setCustomFrom(`${M.NOW.prevYear}-01-01`); setCustomTo(`${M.NOW.prevYear}-12-31`); }}>Ano todo {M.NOW.prevYear}</button>
          {" · "}
          <button className="link" onClick={() => { setCustomFrom(M.NOW.yearStartIso); setCustomTo(M.NOW.monthEndIso); }}>YTD {M.NOW.year}</button>
        </div>
      </Modal>

      <div className="card">
        <div className="card-head">
          <h3>Ranking de {dim.label.toLowerCase()}</h3>
          <div className="muted">
            Clique em qualquer linha para detalhar · <span title="% que cada item representa do faturamento total deste recorte">Participação = % do total no período</span>
          </div>
        </div>
        <div className="table">
          <div className="table-head">
            <div style={{ width: 40 }}>#</div>
            <div style={{ flex: 2 }}>{dim.headLabel}</div>
            <div style={{ flex: 1.5 }}>Faturamento</div>
            <div style={{ flex: 1 }}>Margem</div>
            <div style={{ flex: 1 }}>Crescimento</div>
            <div style={{ flex: 1 }}>{dim.itemLabel}</div>
            <div style={{ flex: 2 }}>Participação (%)</div>
          </div>
          {adjustedSorted.map((b, i) => {
            const medal = i === 0 ? { emoji: "🥇", cls: "rank-gold" }
                        : i === 1 ? { emoji: "🥈", cls: "rank-silver" }
                        : i === 2 ? { emoji: "🥉", cls: "rank-bronze" }
                        : null;
            const share = (b.rev / adjustedRev) * 100;
            const maxRev = adjustedSorted[0]?.rev || 1;
            return (
              <button
                key={b.name + "-" + i}
                className={`table-row ${medal ? medal.cls : ""}`}
                onClick={() => setSelected(b)}
              >
                <div style={{ width: 40 }} className={`mono ${medal ? "rank-pos" : "muted"}`}>
                  {medal ? <span style={{ fontSize: 18 }}>{medal.emoji}</span> : String(i+1).padStart(2,"0")}
                </div>
                <div style={{ flex: 2, fontWeight: 600 }}>
                  {b.name}
                  {b.name === fastestGrowing.name && (
                    <span title="Maior crescimento do período" style={{ marginLeft: 6 }}>🏆</span>
                  )}
                  {dimension === "products" && b.sku && (
                    <div className="muted mono" style={{ fontSize: 10, marginTop: 2 }}>{b.sku}</div>
                  )}
                  {dimension === "categories" && b.sector && (
                    <div className="muted" style={{ fontSize: 10, marginTop: 2 }}>{b.sector}</div>
                  )}
                  {dimension === "products" && b.brand && (
                    <div className="muted" style={{ fontSize: 10, marginTop: 2 }}>{b.brand} · {b.category}</div>
                  )}
                </div>
                <div style={{ flex: 1.5 }} className="mono">{fmtBRL(b.rev)}</div>
                <div style={{ flex: 1 }} className="mono">{(b.margin*100).toFixed(1)}%</div>
                <div style={{ flex: 1 }}><span className={`mini-delta ${b.growth>=0?"up":"down"}`}>{fmtPct(b.growth)}</span></div>
                <div style={{ flex: 1 }} className="mono">{fmtInt(b[dim.itemKey])}</div>
                <div style={{ flex: 2, display: "flex", alignItems: "center", gap: 8 }}>
                  <div className="rb-bar" style={{ flex: 1 }}>
                    <span style={{ width: `${(b.rev/maxRev)*100}%`, background: "var(--cefeq-blue)" }}/>
                  </div>
                  <span className="mono" style={{ fontWeight: 700, fontSize: 12, minWidth: 48, textAlign: "right" }}>
                    {share.toFixed(1).replace(".", ",")}%
                  </span>
                </div>
              </button>
            );
          })}
        </div>
        <div className="muted" style={{ fontSize: 11, padding: "10px 16px", borderTop: "1px solid var(--border)", display: "flex", justifyContent: "space-between" }}>
          <span>
            💡 Storytelling: top 3 concentra <strong>{topThreeShare.toFixed(1).replace(".", ",")}%</strong> do faturamento de {dim.label.toLowerCase()}.
            {topThreeShare > 60 ? " Alta concentração — risco de dependência." : topThreeShare > 40 ? " Concentração moderada — mix saudável." : " Cauda longa relevante — distribuição equilibrada."}
          </span>
          <span>{adjustedSorted.length} {dim.label.toLowerCase()} listados</span>
        </div>
      </div>

      <Modal open={!!selected} onClose={() => setSelected(null)} wide
        title={selected?.name}
        subtitle={`${selected?.items} SKUs · Fornecedor estratégico`}
        footer={<>
          <button className="btn btn-ghost">Ver pedidos de compra</button>
          <button className="btn btn-primary">Abrir relatório completo</button>
        </>}>
        {selected && (
          <>
            <div className="modal-kpi-row">
              <div className="mk">
                <div className="muted">Faturamento</div>
                <div className="mk-v">{fmtBRL(selected.rev)}</div>
              </div>
              <div className="mk">
                <div className="muted">Margem média</div>
                <div className="mk-v">{(selected.margin*100).toFixed(1)}%</div>
              </div>
              <div className="mk">
                <div className="muted">Crescimento</div>
                <div className={`mk-v ${selected.growth>=0?"up":"down"}`}>{fmtPct(selected.growth)}</div>
              </div>
              <div className="mk">
                <div className="muted">SKUs ativos</div>
                <div className="mk-v">{selected.items}</div>
              </div>
            </div>
            <div className="modal-section">
              <h4>Evolução mensal</h4>
              <Sparkline data={[selected.rev*0.06, selected.rev*0.07, selected.rev*0.08, selected.rev*0.08, selected.rev*0.09, selected.rev*0.10, selected.rev*0.10, selected.rev*0.11, selected.rev*0.12]} height={80}/>
            </div>
            <div className="modal-section">
              <h4>Top vendedores desta marca</h4>
              <div className="mini-list">
                {window.MOCK.SELLERS.slice(0,5).map((s, i) => (
                  <div key={s.id} className="mini-row">
                    <span>{i+1}. {s.name}</span>
                    <span className="mono">{fmtBRLshort(selected.rev * (0.18 - i*0.025))}</span>
                  </div>
                ))}
              </div>
            </div>
          </>
        )}
      </Modal>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────────────────────
// SECTORS
// ─────────────────────────────────────────────────────────────────────────────
function SectorsScreen() {
  const M = window.MOCK;
  const [selected, setSelected] = useStateS(null);
  const [filtersOpen, setFiltersOpen] = useStateS(false);
  const total = M.SECTORS.reduce((s,d) => s + d.rev, 0);

  return (
    <div className="page">
      <div className="page-head">
        <div>
          <div className="muted">Análise por categoria de produto</div>
          <h2 style={{ margin: 0, fontWeight: 600 }}>Setores</h2>
        </div>
        <div className="page-head-actions">
          <button className={`btn ${filtersOpen ? "btn-primary" : "btn-ghost"}`} onClick={() => setFiltersOpen(v => !v)}>
            <Icon name="filter" size={14}/> Filtros {filtersOpen ? "✕" : ""}
          </button>
          <button className="btn btn-outline" onClick={() => window.openPrintPreview()}><Icon name="printer" size={14}/> Imprimir PDF</button>
        </div>
      </div>

      <FilterBar open={filtersOpen} onClose={() => setFiltersOpen(false)}/>

      <div className="grid-2-1">
        <div className="card">
          <div className="card-head">
            <h3>Distribuição</h3>
            <div className="muted">{M.SECTORS.length} setores · {fmtBRLshort(total)} YTD</div>
          </div>
          <Donut
            data={M.SECTORS.map(s => ({ label: s.name, value: s.rev, color: s.color }))}
            label="YTD 2026"
            size={220}
          />
          <div className="legend-grid">
            {M.SECTORS.map(s => (
              <div key={s.name} className="lg-row">
                <span className="dot" style={{ background: s.color }}/>
                <span className="lg-lbl">{s.name}</span>
                <span className="lg-val mono">{Math.round((s.rev/total)*100)}%</span>
              </div>
            ))}
          </div>
        </div>

        <div className="card">
          <div className="card-head">
            <h3>Ranking de setores</h3>
          </div>
          <RankBars items={M.SECTORS} secondaryKey="growth" />
        </div>
      </div>

      <div className="card">
        <div className="card-head">
          <h3>Matriz Margem × Crescimento</h3>
          <div className="muted">Bolha = faturamento · Clique para detalhar</div>
        </div>
        <BubbleChart items={M.SECTORS} onSelect={setSelected} />
      </div>

      <Modal open={!!selected} onClose={() => setSelected(null)} wide
        title={selected?.name}
        subtitle="Análise setorial detalhada"
        footer={<button className="btn btn-primary">Abrir relatório completo</button>}>
        {selected && (
          <>
            <div className="modal-kpi-row">
              <div className="mk"><div className="muted">Faturamento</div><div className="mk-v">{fmtBRL(selected.rev)}</div></div>
              <div className="mk"><div className="muted">Margem</div><div className="mk-v">{(selected.margin*100).toFixed(1)}%</div></div>
              <div className="mk"><div className="muted">Crescimento</div><div className={`mk-v ${selected.growth>=0?"up":"down"}`}>{fmtPct(selected.growth)}</div></div>
              <div className="mk"><div className="muted">SKUs</div><div className="mk-v">{selected.items}</div></div>
            </div>
            <div className="modal-section">
              <h4>Sub-categorias (top 5)</h4>
              <div className="mini-list">
                {["Furadeiras e Parafusadeiras", "Lixadeiras", "Serras circulares", "Esmerilhadeiras", "Chaves de impacto"].map((sc, i) => (
                  <div key={i} className="mini-row">
                    <span>{sc}</span>
                    <span className="mono">{fmtBRLshort(selected.rev * (0.32 - i*0.05))}</span>
                  </div>
                ))}
              </div>
            </div>
          </>
        )}
      </Modal>
    </div>
  );
}

function BubbleChart({ items, onSelect }) {
  const w = 720, h = 320, padX = 60, padY = 40;
  const xMin = Math.min(...items.map(i => i.growth)) - 0.05;
  const xMax = Math.max(...items.map(i => i.growth)) + 0.05;
  const yMin = Math.min(...items.map(i => i.margin)) - 0.02;
  const yMax = Math.max(...items.map(i => i.margin)) + 0.02;
  const maxR = Math.max(...items.map(i => i.rev));
  const xScale = v => padX + ((v - xMin) / (xMax - xMin)) * (w - 2*padX);
  const yScale = v => h - padY - ((v - yMin) / (yMax - yMin)) * (h - 2*padY);
  const rScale = v => 10 + Math.sqrt(v / maxR) * 28;

  return (
    <svg className="bubble-chart" viewBox={`0 0 ${w} ${h}`}>
      {/* grid */}
      <line x1={padX} y1={padY} x2={padX} y2={h-padY} stroke="var(--border)"/>
      <line x1={padX} y1={h-padY} x2={w-padX} y2={h-padY} stroke="var(--border)"/>
      <line x1={xScale(0)} y1={padY} x2={xScale(0)} y2={h-padY} stroke="var(--border)" strokeDasharray="3 3"/>
      {/* axis labels */}
      <text x={w/2} y={h-8} textAnchor="middle" className="bc-axis">Crescimento →</text>
      <text x={12} y={h/2} className="bc-axis" transform={`rotate(-90 12 ${h/2})`}>Margem →</text>
      {items.map((it, i) => (
        <g key={i} className="bubble" onClick={() => onSelect(it)}>
          <circle cx={xScale(it.growth)} cy={yScale(it.margin)} r={rScale(it.rev)}
            fill={it.color} opacity="0.18" stroke={it.color} strokeWidth="1.5"/>
          <text x={xScale(it.growth)} y={yScale(it.margin) + 4} textAnchor="middle" className="bc-lbl">
            {it.name.split(" ")[0]}
          </text>
        </g>
      ))}
    </svg>
  );
}

// ─────────────────────────────────────────────────────────────────────────────
// SELLERS
// ─────────────────────────────────────────────────────────────────────────────
function SellersScreen() {
  const M = window.MOCK;
  const [selected, setSelected] = useStateS(null);
  const [sort, setSort] = useStateS("rev");
  const sorted = useMemoS(() => [...M.SELLERS].sort((a,b) => b[sort] - a[sort]), [sort]);
  const totalRev = M.SELLERS.reduce((s,v) => s + v.rev, 0);
  const totalDeals = M.SELLERS.reduce((s,v) => s + v.deals, 0);

  return (
    <div className="page">
      <div className="page-head">
        <div>
          <div className="muted">Performance comercial</div>
          <h2 style={{ margin: 0, fontWeight: 600 }}>Vendedores</h2>
        </div>
        <div className="page-head-actions">
          <div className="seg-control">
            <button className={`seg-btn ${sort==="rev"?"active":""}`} onClick={() => setSort("rev")}>Faturamento</button>
            <button className={`seg-btn ${sort==="ticket"?"active":""}`} onClick={() => setSort("ticket")}>Ticket médio</button>
            <button className={`seg-btn ${sort==="deals"?"active":""}`} onClick={() => setSort("deals")}>Negócios</button>
            <button className={`seg-btn ${sort==="growth"?"active":""}`} onClick={() => setSort("growth")}>Crescimento</button>
          </div>
          <button className="btn btn-outline" onClick={() => window.openPrintPreview()}><Icon name="printer" size={14}/> Imprimir PDF</button>
        </div>
      </div>

      <div className="kpi-grid kpi-4">
        <KPI label="Vendedores ativos" value={M.SELLERS.length} sub="Equipe comercial" />
        <KPI label="Faturamento da equipe" value={fmtBRLshort(totalRev)} delta={0.21} />
        <KPI label="Ticket médio (equipe)" value={fmtBRL(Math.round(totalRev/totalDeals))} delta={0.064} />
        <KPI label="Negócios fechados" value={fmtInt(totalDeals)} delta={0.13} sub="YTD 2026" />
      </div>

      <div className="card">
        <div className="card-head">
          <h3>Ranking · ordenado por {sort === "rev" ? "faturamento" : sort === "ticket" ? "ticket médio" : sort === "deals" ? "negócios" : "crescimento"}</h3>
          <div className="muted">Clique em qualquer vendedor para abrir o perfil</div>
        </div>
        <div className="table">
          <div className="table-head">
            <div style={{ width: 40 }}>#</div>
            <div style={{ flex: 2 }}>Vendedor</div>
            <div style={{ flex: 1 }}>Canal</div>
            <div style={{ flex: 1.5 }}>Faturamento</div>
            <div style={{ flex: 1 }}>Negócios</div>
            <div style={{ flex: 1.2 }}>Ticket médio</div>
            <div style={{ flex: 1 }}>Cresc.</div>
            <div style={{ flex: 1 }}>Carteira</div>
          </div>
          {sorted.map((v, i) => (
            <button key={v.id} className="table-row" onClick={() => setSelected(v)}>
              <div style={{ width: 40 }} className="muted mono">{String(i+1).padStart(2,"0")}</div>
              <div style={{ flex: 2, display: "flex", alignItems: "center", gap: 10 }}>
                <div className="avatar sm">{v.name.split(" ").map(n=>n[0]).slice(0,2).join("")}</div>
                <span style={{ fontWeight: 600 }}>{v.name}</span>
              </div>
              <div style={{ flex: 1 }}><Pill variant={v.channel==="Físico"?"blue":v.channel==="Online"?"yellow":"neutral"}>{v.channel}</Pill></div>
              <div style={{ flex: 1.5 }} className="mono">{fmtBRL(v.rev)}</div>
              <div style={{ flex: 1 }} className="mono">{v.deals}</div>
              <div style={{ flex: 1.2 }} className="mono">{fmtBRL(v.ticket)}</div>
              <div style={{ flex: 1 }}><span className={`mini-delta ${v.growth>=0?"up":"down"}`}>{fmtPct(v.growth)}</span></div>
              <div style={{ flex: 1 }} className="mono">{v.active} clientes</div>
            </button>
          ))}
        </div>
      </div>

      <Modal open={!!selected} onClose={() => setSelected(null)} wide
        title={selected?.name}
        subtitle={`Vendedor · Canal ${selected?.channel} · Carteira de ${selected?.active} clientes`}
        footer={<>
          <button className="btn btn-ghost"><Icon name="mail" size={14}/> Mensagem</button>
          <button className="btn btn-primary">Abrir perfil completo</button>
        </>}>
        {selected && (
          <>
            <div className="modal-kpi-row">
              <div className="mk"><div className="muted">Faturamento</div><div className="mk-v">{fmtBRL(selected.rev)}</div></div>
              <div className="mk"><div className="muted">Ticket médio</div><div className="mk-v">{fmtBRL(selected.ticket)}</div></div>
              <div className="mk"><div className="muted">Negócios</div><div className="mk-v">{selected.deals}</div></div>
              <div className="mk"><div className="muted">Crescimento</div><div className={`mk-v ${selected.growth>=0?"up":"down"}`}>{fmtPct(selected.growth)}</div></div>
            </div>
            <div className="modal-section">
              <h4>Performance mensal</h4>
              <Sparkline data={Array.from({length:9}, (_,i) => selected.rev * (0.08 + i*0.012) * (1 + selected.growth))} height={70}/>
            </div>
            <div className="modal-section">
              <h4>Top setores</h4>
              <div className="mini-list">
                {window.MOCK.SECTORS.slice(0,4).map((s,i) => (
                  <div key={s.name} className="mini-row">
                    <span><span className="dot" style={{background:s.color, marginRight:8}}/>{s.name}</span>
                    <span className="mono">{fmtBRLshort(selected.rev * (0.30 - i*0.06))}</span>
                  </div>
                ))}
              </div>
            </div>
            <div className="modal-section">
              <h4>Mix de marcas</h4>
              <div className="mini-list">
                {window.MOCK.BRANDS.slice(0,5).map((b,i) => (
                  <div key={b.name} className="mini-row">
                    <span>{b.name}</span>
                    <span className="mono">{fmtBRLshort(selected.rev * (0.28 - i*0.05))}</span>
                  </div>
                ))}
              </div>
            </div>
          </>
        )}
      </Modal>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────────────────────
// INACTIVE CUSTOMERS
// ─────────────────────────────────────────────────────────────────────────────
function InactiveScreen() {
  const M = window.MOCK;
  const globalFilters = window.useActiveFilters();
  const [windowDays, setWindowDays] = useStateS(180);
  const [sellerFilter, setSellerFilter] = useStateS("all");
  const [selected, setSelected] = useStateS(null);
  const [reassigning, setReassigning] = useStateS(null);
  const [campaign, setCampaign] = useStateS(null);
  const [recovering, setRecovering] = useStateS({});
  const [toastNode, showToast] = useToast();

  // Aplica filtros globais (vendedores e setores do FilterBar) sobre o filtro local
  const filtered = useMemoS(() => {
    return M.CUSTOMERS
      .filter(c => c.daysInactive >= windowDays)
      .filter(c => sellerFilter === "all" || c.sellerId === sellerFilter)
      .filter(c => globalFilters.sellers.includes(c.sellerId))
      .filter(c => !c.sector || globalFilters.sectors.includes(c.sector))
      .sort((a,b) => b.daysInactive - a.daysInactive);
  }, [windowDays, sellerFilter, globalFilters]);

  // KPIs respeitam filtros globais (sellers + sectors) — só a Janela varia entre os 3
  const baseFiltered = M.CUSTOMERS
    .filter(c => sellerFilter === "all" || c.sellerId === sellerFilter)
    .filter(c => globalFilters.sellers.includes(c.sellerId))
    .filter(c => !c.sector || globalFilters.sectors.includes(c.sector));

  const inactive90Arr  = baseFiltered.filter(c => c.daysInactive >= 90);
  const inactive180Arr = baseFiltered.filter(c => c.daysInactive >= 180);
  const inactive365Arr = baseFiltered.filter(c => c.daysInactive >= 365);
  const inactive90 = inactive90Arr.length;
  const inactive180 = inactive180Arr.length;
  const inactive365 = inactive365Arr.length;

  // LTV em risco depende da janela ATIVA
  const ltvAtRisk = filtered.reduce((s,c) => s + c.ltv, 0);

  function reassign(customer, newSellerId) {
    const seller = M.SELLERS.find(s => s.id === newSellerId);
    showToast(`${customer.name} reatribuído a ${seller.name}`);
    setReassigning(null);
  }
  function sendCampaign(customer, channel) {
    showToast(`Campanha por ${channel} enviada para ${customer.name}`);
    setCampaign(null);
  }
  function markRecovering(customer) {
    setRecovering(r => ({ ...r, [customer.id]: !r[customer.id] }));
    showToast(recovering[customer.id] ? "Removido da recuperação" : "Marcado em recuperação");
  }

  return (
    <div className="page">
      <div className="page-head">
        <div>
          <div className="muted">Carteira em risco</div>
          <h2 style={{ margin: 0, fontWeight: 600 }}>Clientes inativos</h2>
        </div>
        <div className="page-head-actions">
          <button className="btn btn-outline" onClick={() => window.openPrintPreview()}><Icon name="printer" size={14}/> Imprimir PDF</button>
        </div>
      </div>

      <div className="kpi-grid kpi-4">
        <button
          type="button"
          className={`kpi kpi-actionable ${windowDays === 90 ? "kpi-active" : ""}`}
          onClick={() => setWindowDays(90)}
          style={{ textAlign: "left", borderLeftColor: "var(--warn)" }}
          title="Clique pra filtrar por esta janela"
        >
          <div className="kpi-label">≥ 90 DIAS SEM COMPRA</div>
          <div className="kpi-value" style={{ color: "var(--warn)" }}>{inactive90}</div>
          <div className="muted" style={{ fontSize: 11, marginTop: 4 }}>
            {windowDays === 90 ? "✓ janela ativa" : "clique pra filtrar"}
          </div>
        </button>
        <button
          type="button"
          className={`kpi kpi-actionable ${windowDays === 180 ? "kpi-active" : ""}`}
          onClick={() => setWindowDays(180)}
          style={{ textAlign: "left", borderLeftColor: "var(--cefeq-blue)" }}
          title="Clique pra filtrar por esta janela"
        >
          <div className="kpi-label">≥ 180 DIAS SEM COMPRA</div>
          <div className="kpi-value" style={{ color: "var(--cefeq-blue)" }}>{inactive180}</div>
          <div className="muted" style={{ fontSize: 11, marginTop: 4 }}>
            {windowDays === 180 ? "✓ janela ativa" : "clique pra filtrar"}
          </div>
        </button>
        <button
          type="button"
          className={`kpi kpi-actionable ${windowDays === 365 ? "kpi-active" : ""}`}
          onClick={() => setWindowDays(365)}
          style={{ textAlign: "left", borderLeftColor: "var(--danger)" }}
          title="Clique pra filtrar por esta janela"
        >
          <div className="kpi-label">≥ 365 DIAS SEM COMPRA</div>
          <div className="kpi-value" style={{ color: "var(--danger)" }}>{inactive365}</div>
          <div className="muted" style={{ fontSize: 11, marginTop: 4 }}>
            {windowDays === 365 ? "✓ janela ativa · alto risco" : "alto risco de churn"}
          </div>
        </button>
        <KPI
          label={`LTV em risco · ≥${windowDays} dias`}
          value={fmtBRLshort(ltvAtRisk)}
          sub={`em ${filtered.length} clientes na janela selecionada`}
          accent="var(--cefeq-yellow-deep)"
        />
      </div>

      <div className="card">
        <div className="filter-row">
          <div className="filter-group">
            <label>Janela:</label>
            <div className="seg-control">
              <button className={`seg-btn ${windowDays===90?"active":""}`} onClick={()=>setWindowDays(90)}>90 dias</button>
              <button className={`seg-btn ${windowDays===180?"active":""}`} onClick={()=>setWindowDays(180)}>180 dias</button>
              <button className={`seg-btn ${windowDays===365?"active":""}`} onClick={()=>setWindowDays(365)}>365 dias</button>
            </div>
          </div>
          <div className="filter-group">
            <label>Vendedor:</label>
            <select value={sellerFilter} onChange={e => setSellerFilter(e.target.value)}>
              <option value="all">Todos os vendedores</option>
              {M.SELLERS.map(s => <option key={s.id} value={s.id}>{s.name}</option>)}
            </select>
          </div>
          <div className="filter-meta">
            <strong>{filtered.length}</strong> clientes encontrados
          </div>
        </div>

        <div className="table">
          <div className="table-head">
            <div style={{ flex: 1.8 }}>Cliente</div>
            <div style={{ flex: 1.3 }}>Vendedor</div>
            <div style={{ flex: 0.9 }}>Última compra</div>
            <div style={{ flex: 0.9 }}>LTV</div>
            <div style={{ flex: 1.6 }}>Ação sugerida</div>
            <div style={{ flex: 1 }}>Status</div>
            <div style={{ width: 180 }}>Ações</div>
          </div>
          {filtered.slice(0, 50).map(c => {
            const sa = suggestInactiveAction(c);
            return (
              <div key={c.id} className="table-row">
                <div style={{ flex: 1.8 }} onClick={() => setSelected(c)} className="clickable">
                  <div style={{ fontWeight: 600 }}>{c.name}</div>
                  <div className="muted mono" style={{ fontSize: 11 }}>{c.cnpj}</div>
                </div>
                <div style={{ flex: 1.3 }}>{c.seller}</div>
                <div style={{ flex: 0.9 }} className="mono">{c.daysInactive} dias</div>
                <div style={{ flex: 0.9 }} className="mono">{fmtBRLshort(c.ltv)}</div>
                <div style={{ flex: 1.6 }}>
                  <div className={`action-suggest action-${sa.priority}`}>
                    <span className="action-emoji">{sa.emoji}</span>
                    <div className="action-meta">
                      <div className="action-label">{sa.label}</div>
                      <div className="action-detail">{sa.detail}</div>
                    </div>
                  </div>
                </div>
                <div style={{ flex: 1 }}>
                  {recovering[c.id]
                    ? <Pill variant="blue" icon="flag">Em recuperação</Pill>
                    : c.daysInactive > 180
                      ? <Pill variant="danger">Frio</Pill>
                      : <Pill variant="warn">Atenção</Pill>}
                </div>
                <div style={{ width: 180, display: "flex", gap: 4 }}>
                  <button className="btn-mini" title="Reatribuir" onClick={() => setReassigning(c)}><Icon name="sellers" size={13}/></button>
                  <button className="btn-mini" title="WhatsApp" onClick={() => sendCampaign(c, "WhatsApp")}><Icon name="whatsapp" size={13}/></button>
                  <button className="btn-mini" title="E-mail" onClick={() => sendCampaign(c, "E-mail")}><Icon name="mail" size={13}/></button>
                  <button className={`btn-mini ${recovering[c.id]?"active":""}`} title="Marcar em recuperação" onClick={() => markRecovering(c)}><Icon name="flag" size={13}/></button>
                </div>
              </div>
            );
          })}
          {filtered.length > 50 && <div className="table-foot muted">Mostrando 50 de {filtered.length} · Use exportar para ver todos</div>}
        </div>
      </div>

      {/* Customer detail */}
      <Modal open={!!selected} onClose={() => setSelected(null)} wide
        title={selected?.name}
        subtitle={selected ? `${selected.cnpj} · ${selected.daysInactive} dias sem comprar` : ""}
        footer={<>
          <button className="btn btn-ghost" onClick={() => { setReassigning(selected); setSelected(null); }}>Reatribuir vendedor</button>
          <button className="btn btn-primary" onClick={() => { setCampaign(selected); setSelected(null); }}>Enviar campanha</button>
        </>}>
        {selected && (
          <>
            <div className="modal-kpi-row">
              <div className="mk"><div className="muted">LTV</div><div className="mk-v">{fmtBRL(selected.ltv)}</div></div>
              <div className="mk"><div className="muted">Pedidos</div><div className="mk-v">{selected.totalOrders}</div></div>
              <div className="mk"><div className="muted">Ticket médio</div><div className="mk-v">{fmtBRL(selected.avgTicket)}</div></div>
              <div className="mk"><div className="muted">Canal habitual</div><div className="mk-v">{selected.channel}</div></div>
            </div>
            <div className="modal-section">
              <h4>Detalhes</h4>
              <div className="kv-grid">
                <div><span className="muted">Vendedor responsável</span><b>{selected.seller}</b></div>
                <div><span className="muted">Setor principal</span><b>{selected.sector}</b></div>
                <div><span className="muted">Status</span><b>{selected.daysInactive > 180 ? "Frio" : "Atenção"}</b></div>
                <div><span className="muted">Última compra</span><b>{selected.daysInactive} dias atrás</b></div>
              </div>
            </div>
          </>
        )}
      </Modal>

      {/* Reassign modal */}
      <Modal open={!!reassigning} onClose={() => setReassigning(null)}
        title="Reatribuir vendedor"
        subtitle={reassigning?.name}>
        {reassigning && (
          <div className="reassign-list">
            {M.SELLERS.filter(s => s.id !== reassigning.sellerId).map(s => (
              <button key={s.id} className="reassign-row" onClick={() => reassign(reassigning, s.id)}>
                <div className="avatar sm">{s.name.split(" ").map(n=>n[0]).slice(0,2).join("")}</div>
                <div>
                  <div style={{ fontWeight: 600 }}>{s.name}</div>
                  <div className="muted" style={{ fontSize: 12 }}>{s.active} clientes · {s.channel}</div>
                </div>
                <Icon name="chevron" size={14} style={{ marginLeft: "auto" }}/>
              </button>
            ))}
          </div>
        )}
      </Modal>

      {/* Campaign modal */}
      <Modal open={!!campaign} onClose={() => setCampaign(null)}
        title="Enviar campanha"
        subtitle={campaign?.name}
        footer={<>
          <button className="btn btn-ghost" onClick={() => setCampaign(null)}>Cancelar</button>
          <button className="btn btn-primary" onClick={() => sendCampaign(campaign, "WhatsApp")}>Enviar</button>
        </>}>
        <div className="campaign-form">
          <div className="campaign-channels">
            <button className="ch-btn active"><Icon name="whatsapp" size={16}/> WhatsApp</button>
            <button className="ch-btn"><Icon name="mail" size={16}/> E-mail</button>
          </div>
          <label className="field">
            <span>Template</span>
            <select>
              <option>Voltar para a CEFEQ · Cupom 10%</option>
              <option>Reativação · Lançamentos de ferramentas elétricas</option>
              <option>Visita do consultor</option>
            </select>
          </label>
          <label className="field">
            <span>Mensagem</span>
            <textarea rows="4" defaultValue={`Olá ${campaign?.name?.split(" ")[1] || ""}! Sentimos sua falta. Temos novidades em ferramentas elétricas com condições especiais. Posso te enviar?`}/>
          </label>
        </div>
      </Modal>

      {toastNode}
    </div>
  );
}

// ─────────────────────────────────────────────────────────────────────────────
// RECURRING CUSTOMERS
// ─────────────────────────────────────────────────────────────────────────────
function RecurringScreen() {
  const M = window.MOCK;
  const globalFilters = window.useActiveFilters();
  const [selected, setSelected] = useStateS(null);
  const [sellerFilter, setSellerFilter] = useStateS("all");
  const [sortBy, setSortBy] = useStateS("orders");

  const SORT_OPTIONS = [
    { id: "orders",     label: "Nº de pedidos",  desc: "Mais pedidos primeiro",       key: c => c.totalOrders },
    { id: "ltv",        label: "LTV",            desc: "Maior LTV primeiro",          key: c => c.ltv },
    { id: "ticket",     label: "Ticket médio",   desc: "Maior ticket primeiro",       key: c => c.avgTicket },
    { id: "recency",    label: "Recência",       desc: "Mais recente primeiro",       key: c => -c.daysInactive },
  ];
  const currentSort = SORT_OPTIONS.find(s => s.id === sortBy) || SORT_OPTIONS[0];

  const recurring = useMemoS(() => {
    return M.CUSTOMERS
      .filter(c => c.totalOrders > 1)
      .filter(c => sellerFilter === "all" || c.sellerId === sellerFilter)
      .filter(c => globalFilters.sellers.includes(c.sellerId))
      .filter(c => !c.sector || globalFilters.sectors.includes(c.sector))
      .sort((a,b) => currentSort.key(b) - currentSort.key(a));
  }, [sellerFilter, sortBy, globalFilters]);
  const totalLTV = recurring.reduce((s,c) => s + c.ltv, 0);
  const avgOrders = recurring.length > 0 ? recurring.reduce((s,c) => s + c.totalOrders, 0) / recurring.length : 0;
  const avgTicket = recurring.length > 0 ? recurring.reduce((s,c) => s + c.avgTicket, 0) / recurring.length : 0;
  const top5pct = recurring.slice(0, Math.max(1, Math.floor(recurring.length * 0.05)));
  const top5LTV = top5pct.reduce((s,c) => s + c.ltv, 0);
  const top5Share = totalLTV > 0 ? Math.round(top5LTV/totalLTV*100) : 0;

  return (
    <div className="page">
      <div className="page-head">
        <div>
          <div className="muted">Carteira recorrente · &gt; 1 venda</div>
          <h2 style={{ margin: 0, fontWeight: 600 }}>Clientes recorrentes</h2>
        </div>
        <div className="page-head-actions">
          <button className="btn btn-outline" onClick={() => window.openPrintPreview()}><Icon name="printer" size={14}/> Imprimir PDF</button>
        </div>
      </div>

      <div className="kpi-grid kpi-4">
        <KPI
          label="Clientes recorrentes"
          value={recurring.length}
          sub={sellerFilter === "all" ? `${Math.round(recurring.length/M.CUSTOMERS.length*100)}% da base` : `recorte: ${M.SELLERS.find(s=>s.id===sellerFilter)?.name || ""}`}
        />
        <KPI
          label="LTV total"
          value={fmtBRLshort(totalLTV)}
          delta={0.18}
          sub={`média ${fmtBRLshort(recurring.length > 0 ? totalLTV/recurring.length : 0)} por cliente`}
        />
        <KPI
          label="Pedidos/cliente médio"
          value={avgOrders.toFixed(1).replace(".",",")}
          sub={`ticket médio ${fmtBRL(Math.round(avgTicket))}`}
        />
        <KPI
          label="Top 5% representam"
          value={fmtBRLshort(top5LTV)}
          sub={`${top5Share}% do LTV em ${top5pct.length} clientes`}
          accent="var(--cefeq-yellow-deep)"
        />
      </div>

      <div className="card">
        <div className="filter-row">
          <div className="filter-group">
            <label>Vendedor:</label>
            <select value={sellerFilter} onChange={e => setSellerFilter(e.target.value)}>
              <option value="all">Todos os vendedores</option>
              {M.SELLERS.map(s => <option key={s.id} value={s.id}>{s.name}</option>)}
            </select>
          </div>
          <div className="filter-group">
            <label>Ordenar por:</label>
            <div className="seg-control">
              {SORT_OPTIONS.map(s => (
                <button
                  key={s.id}
                  className={`seg-btn ${sortBy === s.id ? "active" : ""}`}
                  onClick={() => setSortBy(s.id)}
                  type="button"
                  title={s.desc}
                >
                  {s.label}
                </button>
              ))}
            </div>
          </div>
          <div className="filter-meta">
            <strong>{recurring.length}</strong> clientes recorrentes
          </div>
        </div>
        <div className="card-head">
          <h3>Carteira recorrente</h3>
          <div className="muted">{currentSort.desc}</div>
        </div>
        <div className="table">
          <div className="table-head">
            <div style={{ width: 40 }}>#</div>
            <div style={{ flex: 1.8 }}>Cliente</div>
            <div style={{ flex: 1.3 }}>Vendedor</div>
            <div style={{ flex: 0.7 }}>Pedidos</div>
            <div style={{ flex: 1 }}>Ticket médio</div>
            <div style={{ flex: 1 }}>LTV</div>
            <div style={{ flex: 0.8 }}>Última compra</div>
            <div style={{ flex: 1.7 }}>Ação sugerida</div>
          </div>
          {recurring.slice(0, 60).map((c, i) => {
            const sa = suggestRecurringAction(c);
            return (
              <button key={c.id} className="table-row" onClick={() => setSelected(c)}>
                <div style={{ width: 40 }} className="muted mono">{String(i+1).padStart(2,"0")}</div>
                <div style={{ flex: 1.8 }}>
                  <div style={{ fontWeight: 600 }}>{c.name}</div>
                  <div className="muted mono" style={{ fontSize: 11 }}>{c.cnpj}</div>
                </div>
                <div style={{ flex: 1.3 }} className="muted">{c.seller}</div>
                <div style={{ flex: 0.7 }} className="mono">
                  <span className="orders-pill">{c.totalOrders}</span>
                </div>
                <div style={{ flex: 1 }} className="mono">{fmtBRL(c.avgTicket)}</div>
                <div style={{ flex: 1, fontWeight: 600 }} className="mono">{fmtBRLshort(c.ltv)}</div>
                <div style={{ flex: 0.8 }} className="muted">{c.daysInactive} dias</div>
                <div style={{ flex: 1.7 }}>
                  <div className={`action-suggest action-${sa.priority}`}>
                    <span className="action-emoji">{sa.emoji}</span>
                    <div className="action-meta">
                      <div className="action-label">{sa.label}</div>
                      <div className="action-detail">{sa.detail}</div>
                    </div>
                  </div>
                </div>
              </button>
            );
          })}
        </div>
      </div>

      <Modal open={!!selected} onClose={() => setSelected(null)} wide
        title={selected?.name}
        subtitle={selected ? `Cliente recorrente · ${selected.totalOrders} pedidos` : ""}
        footer={<button className="btn btn-primary">Ver histórico completo</button>}>
        {selected && (
          <>
            <div className="modal-kpi-row">
              <div className="mk"><div className="muted">LTV</div><div className="mk-v">{fmtBRL(selected.ltv)}</div></div>
              <div className="mk"><div className="muted">Pedidos</div><div className="mk-v">{selected.totalOrders}</div></div>
              <div className="mk"><div className="muted">Ticket médio</div><div className="mk-v">{fmtBRL(selected.avgTicket)}</div></div>
              <div className="mk"><div className="muted">Última compra</div><div className="mk-v">{selected.daysInactive}d</div></div>
            </div>
            <div className="modal-section">
              <h4>Histórico recente (simulado)</h4>
              <div className="mini-list">
                {Array.from({length:5}).map((_,i) => (
                  <div key={i} className="mini-row">
                    <span>Pedido #{selected.id.slice(1)}-{String(selected.totalOrders-i).padStart(3,"0")} · {30 + i*22} dias atrás</span>
                    <span className="mono">{fmtBRL(Math.round(selected.avgTicket * (0.85 + (i%3)*0.1)))}</span>
                  </div>
                ))}
              </div>
            </div>
          </>
        )}
      </Modal>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────────────────────
// ADMIN
// ─────────────────────────────────────────────────────────────────────────────
function AdminScreen() {
  const M = window.MOCK;
  const [tab, setTab] = useStateS("users");
  const [inviteOpen, setInviteOpen] = useStateS(false);
  const [editing, setEditing] = useStateS(null);
  const [toastNode, showToast] = useToast();

  const totalAccess = M.DAILY_ACCESS.reduce((s,d) => s + d.count, 0);
  const avgAccess = Math.round(totalAccess / M.DAILY_ACCESS.length);

  return (
    <div className="page">
      <div className="page-head">
        <div>
          <div className="muted">Administração · CEFEQ Ferramentas</div>
          <h2 style={{ margin: 0, fontWeight: 600 }}>Painel administrativo</h2>
        </div>
        <div className="page-head-actions">
          <button className="btn btn-primary" onClick={() => setInviteOpen(true)}><Icon name="plus" size={14}/> Convidar usuário</button>
        </div>
      </div>

      <div className="kpi-grid kpi-4">
        <KPI label="Usuários ativos" value={M.USERS.filter(u => u.status === "ativo").length} sub={`${M.USERS.length} total`} />
        <KPI label="Acessos (30d)" value={fmtInt(totalAccess)} sub={`média ${avgAccess}/dia`} sparkline={M.DAILY_ACCESS.map(d => d.count)} />
        <KPI label="Sessão média" value="26 min" sub="por usuário" />
        <KPI label="Unidades" value={M.STORES.filter(s => s.status === "ativa").length} sub="lojas e canais ativos" accent="var(--cefeq-yellow-deep)" />
      </div>

      <div className="tabs">
        <button className={`tab ${tab==="users"?"active":""}`} onClick={()=>setTab("users")}>Usuários e permissões</button>
        <button className={`tab ${tab==="stores"?"active":""}`} onClick={()=>setTab("stores")}>Gestão de lojas</button>
        <button className={`tab ${tab==="heatmap"?"active":""}`} onClick={()=>setTab("heatmap")}>Heatmap de uso</button>
        <button className={`tab ${tab==="volume"?"active":""}`} onClick={()=>setTab("volume")}>Volume de acessos</button>
        <button className={`tab ${tab==="integrations"?"active":""}`} onClick={()=>setTab("integrations")}>
          Integrações <span className="status-dot on" style={{marginLeft:6}}/>
        </button>
        {/* Aba Planos & Preços removida do Admin público — acesso via /planos */}
      </div>

      {tab === "users" && (
        <div className="card">
          <div className="table">
            <div className="table-head">
              <div style={{ flex: 2 }}>Usuário</div>
              <div style={{ flex: 1.5 }}>Perfil</div>
              <div style={{ flex: 1.2 }}>Último acesso</div>
              <div style={{ flex: 1 }}>Sessões</div>
              <div style={{ flex: 1 }}>Tempo médio</div>
              <div style={{ width: 80 }}></div>
            </div>
            {M.USERS.map(u => (
              <div key={u.id} className="table-row">
                <div style={{ flex: 2, display: "flex", alignItems: "center", gap: 10 }}>
                  <div className="avatar sm">{u.name.split(" ").map(n=>n[0]).slice(0,2).join("")}</div>
                  <div>
                    <div style={{ fontWeight: 600 }}>{u.name}</div>
                    <div className="muted" style={{ fontSize: 11 }}>{u.email}</div>
                  </div>
                </div>
                <div style={{ flex: 1.5 }}>
                  <Pill variant={u.role==="CEO"?"blue":u.role==="Gerência"?"yellow":"neutral"}>{u.role}</Pill>
                </div>
                <div style={{ flex: 1.2 }} className="muted">{u.lastSeen}</div>
                <div style={{ flex: 1 }} className="mono">{u.sessions}</div>
                <div style={{ flex: 1 }} className="mono">{u.avgMin} min</div>
                <div style={{ width: 80, textAlign: "right" }}>
                  <button className="btn-mini" onClick={() => setEditing(u)}><Icon name="settings" size={13}/></button>
                </div>
              </div>
            ))}
          </div>
        </div>
      )}

      {tab === "heatmap" && (
        <div className="card">
          <div className="card-head">
            <h3>Heatmap · telas acessadas por usuário</h3>
            <div className="muted">Frequência relativa nos últimos 30 dias</div>
          </div>
          <Heatmap data={M.HEATMAP} screens={M.SCREEN_KEYS} labels={M.SCREEN_LABELS}/>
        </div>
      )}

      {tab === "volume" && (
        <div className="card">
          <div className="card-head">
            <h3>Acessos diários · últimos 30 dias</h3>
            <div className="muted">Total · {fmtInt(totalAccess)}</div>
          </div>
          <VolumeBars data={M.DAILY_ACCESS}/>
        </div>
      )}

      {tab === "integrations" && <IntegrationsTab/>}
      {tab === "stores" && <StoresTab/>}
      {tab === "pricing" && <PricingTab/>}

      <Modal open={inviteOpen} onClose={() => setInviteOpen(false)}
        title="Convidar novo usuário"
        subtitle="Um e-mail com instruções de acesso será enviado"
        footer={<>
          <button className="btn btn-ghost" onClick={() => setInviteOpen(false)}>Cancelar</button>
          <button className="btn btn-primary" onClick={() => { setInviteOpen(false); showToast("Convite enviado"); }}>Enviar convite</button>
        </>}>
        <div className="invite-form">
          <label className="field"><span>Nome completo</span><input placeholder="Ex: Maria Souza"/></label>
          <label className="field"><span>E-mail corporativo</span><input placeholder="maria@cefeq.com.br"/></label>
          <label className="field"><span>Perfil</span>
            <select>
              <option>Vendas</option>
              <option>Gerência</option>
              <option>Financeiro</option>
              <option>Compras</option>
              <option>Marketing</option>
              <option>Diretoria</option>
              <option>Admin Master</option>
            </select>
          </label>
          <div className="perm-block">
            <div className="muted" style={{ marginBottom: 8 }}>Permissões adicionais</div>
            {["Exportar dados", "Editar usuários", "Visualizar margem", "Visualizar e-commerce"].map(p => (
              <label key={p} className="check"><input type="checkbox" defaultChecked={p!=="Editar usuários"}/> {p}</label>
            ))}
          </div>
        </div>
      </Modal>

      <Modal open={!!editing} onClose={() => setEditing(null)}
        title={editing?.name}
        subtitle="Editar permissões"
        footer={<>
          <button className="btn btn-ghost" onClick={() => setEditing(null)}>Cancelar</button>
          <button className="btn btn-primary" onClick={() => { setEditing(null); showToast("Permissões atualizadas"); }}>Salvar</button>
        </>}>
        {editing && (
          <div className="invite-form">
            <label className="field"><span>Perfil</span>
              <select defaultValue={editing.role}>
                <option>Admin Master</option><option>Diretoria</option><option>Gerência</option>
                <option>Vendas</option><option>Financeiro</option><option>Compras</option><option>Marketing</option>
              </select>
            </label>
            <div className="perm-block">
              <div className="muted" style={{ marginBottom: 8 }}>Acessos por área</div>
              {Object.values(M.SCREEN_LABELS).map(s => (
                <label key={s} className="check"><input type="checkbox" defaultChecked/> {s}</label>
              ))}
            </div>
          </div>
        )}
      </Modal>

      {toastNode}
    </div>
  );
}

function Heatmap({ data, screens, labels }) {
  return (
    <div className="heatmap">
      <div className="hm-row hm-head">
        <div className="hm-name"></div>
        {screens.map(s => <div key={s} className="hm-cell hm-h">{labels[s]}</div>)}
      </div>
      {data.map((row, i) => (
        <div key={i} className="hm-row">
          <div className="hm-name">
            <div style={{ fontWeight: 600 }}>{row.user}</div>
            <div className="muted" style={{ fontSize: 11 }}>{row.role}</div>
          </div>
          {row.values.map((v, j) => (
            <div key={j} className="hm-cell" style={{
              background: `rgba(32, 48, 144, ${0.08 + v * 0.82})`,
              color: v > 0.5 ? "#fff" : "var(--text-muted)"
            }}>
              {Math.round(v * 100)}
            </div>
          ))}
        </div>
      ))}
    </div>
  );
}

function VolumeBars({ data }) {
  const max = Math.max(...data.map(d => d.count));
  return (
    <div className="vol-bars">
      {data.map((d, i) => (
        <div key={i} className="vol-col" title={`Dia ${d.day}: ${d.count} acessos`}>
          <div className="vol-bar" style={{ height: `${(d.count / max) * 100}%` }}/>
          {(i % 5 === 0) && <div className="vol-lbl">{d.day}</div>}
        </div>
      ))}
    </div>
  );
}

Object.assign(window, {
  LoginScreen, OverviewScreen, BrandsScreen, SectorsScreen,
  SellersScreen, InactiveScreen, RecurringScreen, AdminScreen
});