/* global React, Icon, Pill, fmt,
   GESTAO_PERIOD, REVENUE_HISTORY, CONTRACTS, COST_STRUCTURE,
   TEAM_ALLOCATION, CLIENT_HEALTH, PROPOSALS, ALERTS, GOALS, DAILY_CALENDAR,
   STAGE_META, PAYMENT_STATUS_META, BURNOUT_META, TREND_META, RISK_META,
   TEAM,
   BlockCard, Punch, BigStat, brl, brlK */
const { useState: useStateSec, useMemo: useMemoSec } = React;

/* ============================================================
   SECTION · OVERVIEW · executive snapshot
   ============================================================ */
function SectionOverview() {
  const lastClosed = REVENUE_HISTORY[REVENUE_HISTORY.length - 2]; // mês fechado anterior
  const current    = REVENUE_HISTORY[REVENUE_HISTORY.length - 1]; // mês corrente em andamento
  const margin     = Math.round(((current.revenue - current.costs) / current.revenue) * 100);
  const profit     = current.revenue - current.costs;
  const mrrGrowth  = ((current.revenue - lastClosed.revenue) / lastClosed.revenue) * 100;

  const activeContracts = CONTRACTS.filter(c => c.status !== 'pausado').length;
  const overdue = CONTRACTS.filter(c => c.status === 'atrasado').reduce((a, c) => a + c.monthly, 0);
  const pipelineValue = PROPOSALS.filter(p => p.stage !== 'perdida').reduce((a, p) => a + p.monthly, 0);

  return (
    <div>
      {/* ALERTAS no topo */}
      {ALERTS.length > 0 && (
        <BlockCard kicker="precisa de você agora" title="**Alertas** ativos">
          <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
            {ALERTS.map(a => {
              const toneMap = {
                error:   { color: 'var(--error)',   bg: 'rgba(243,77,77,0.10)'   },
                warning: { color: 'var(--warning)', bg: 'rgba(243,174,77,0.10)' },
                info:    { color: 'var(--accent)',  bg: 'rgba(119,184,241,0.10)' },
                success: { color: 'var(--success)', bg: 'rgba(111,200,120,0.10)' },
              };
              const t = toneMap[a.tone] || toneMap.info;
              return (
                <div key={a.id} style={{
                  padding: '12px 16px',
                  background: t.bg, border: `1px solid ${t.color}40`,
                  borderLeft: `3px solid ${t.color}`,
                  borderRadius: 'var(--r-btn)',
                  display: 'grid', gridTemplateColumns: '1fr auto', gap: 12, alignItems: 'center',
                }}>
                  <span style={{ fontSize: 14, color: 'var(--text)', lineHeight: 1.4 }}>{a.text}</span>
                  <button style={{
                    appearance: 'none', border: `1px solid ${t.color}`,
                    background: 'transparent', color: t.color,
                    padding: '5px 12px', borderRadius: 999,
                    fontSize: 11, fontWeight: 500, fontFamily: 'inherit', cursor: 'pointer',
                    whiteSpace: 'nowrap',
                  }}>{a.action} →</button>
                </div>
              );
            })}
          </div>
        </BlockCard>
      )}

      {/* KPIs grandes */}
      <BlockCard kicker="snapshot · mês em andamento" title="Os **números agora**">
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))', gap: 12 }}>
          <BigStat label="MRR atual"            value={brlK(current.revenue)} sub={`+${fmt.dec(mrrGrowth,1)}% vs mês anterior`} accent />
          <BigStat label="Margem operacional"   value={margin + '%'} sub={brlK(profit) + ' de lucro projetado'} accent />
          <BigStat label="Contratos ativos"     value={activeContracts} sub={CONTRACTS.length + ' total na carteira'} />
          <BigStat label="A receber em atraso"  value={overdue > 0 ? brl(overdue) : 'Zero'} sub={overdue > 0 ? '1 cliente · cobrar' : 'Tudo em dia'} tone={overdue > 0 ? 'error' : 'success'} />
          <BigStat label="Pipeline em aberto"   value={brlK(pipelineValue) + '/mês'} sub={PROPOSALS.filter(p => p.stage !== 'perdida').length + ' propostas em jogo'} />
          <BigStat label="Time"                 value={TEAM_ALLOCATION.length + ' pessoas'} sub={'utilização média ' + Math.round(TEAM_ALLOCATION.reduce((a,t) => a + t.utilizationPct, 0)/TEAM_ALLOCATION.length) + '%'} />
        </div>
      </BlockCard>

      {/* Receita ao longo do tempo */}
      <BlockCard kicker="evolução" title="**Receita** dos últimos 7 meses">
        {window.LineChart && React.createElement(window.LineChart, {
          data: REVENUE_HISTORY.map(r => ({ label: r.month, value: r.revenue })),
          height: 240,
          formatY: (v) => 'R$ ' + (v/1000).toFixed(0) + 'k',
          formatTooltip: (v) => brl(v),
        })}
      </BlockCard>

      {/* Metas */}
      <BlockCard kicker="metas do trimestre" title="**Para onde** estamos indo">
        <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
          {GOALS.map(g => {
            const pct = g.invert
              ? Math.max(0, Math.min(100, ((g.target - g.current + 1) / (g.target + 1)) * 100))
              : Math.min(100, (g.current / g.target) * 100);
            const fmt2 = (n) => g.format === 'brl' ? brlK(n) : g.format === 'pct' ? n + '%' : n;
            const onTrack = g.invert ? g.current <= g.target : g.current >= g.target * 0.85;
            return (
              <div key={g.id}>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 6, gap: 12 }}>
                  <span style={{ fontSize: 14, color: 'var(--text)', fontWeight: 500 }}>{g.label}</span>
                  <span style={{ fontSize: 13, color: 'var(--text-muted)', whiteSpace: 'nowrap' }}>
                    <span className="num" style={{ color: 'var(--text)', fontWeight: 500 }}>{fmt2(g.current)}</span>
                    <span style={{ color: 'var(--text-faint)' }}> / {fmt2(g.target)}</span>
                  </span>
                </div>
                <div style={{ height: 8, background: 'var(--surface-soft)', borderRadius: 999, overflow: 'hidden', border: '1px solid var(--border)' }}>
                  <div style={{
                    height: '100%', width: pct + '%',
                    background: onTrack ? 'linear-gradient(90deg, #6FC878, var(--beza-purple))' : 'linear-gradient(90deg, #F3AE4D, #F34D4D)',
                    borderRadius: 999, transition: 'width var(--t-slow)',
                  }} />
                </div>
              </div>
            );
          })}
        </div>
      </BlockCard>
    </div>
  );
}

/* ============================================================
   SECTION · FINANCEIRO
   ============================================================ */
const PAYMENT_STATUS_LS = 'beza_payment_status_v1';

function SectionFinanceiro() {
  const [overrides, setOverrides] = useStateSec(() => {
    try { return JSON.parse(localStorage.getItem(PAYMENT_STATUS_LS) || '{}'); } catch { return {}; }
  });

  const setStatus = (slug, newStatus) => {
    const next = { ...overrides, [slug]: newStatus };
    setOverrides(next);
    try { localStorage.setItem(PAYMENT_STATUS_LS, JSON.stringify(next)); } catch {}
  };

  const contracts = CONTRACTS.map(c => ({ ...c, status: overrides[c.slug] ?? c.status }));

  const current  = REVENUE_HISTORY[REVENUE_HISTORY.length - 1];
  const totalMRR = contracts.filter(c => c.status !== 'pausado').reduce((a, c) => a + c.monthly, 0);
  const overdue  = contracts.filter(c => c.status === 'atrasado').reduce((a, c) => a + c.monthly, 0);
  const paused   = contracts.filter(c => c.status === 'pausado').reduce((a, c) => a + c.monthly, 0);

  return (
    <div>
      <BlockCard kicker="situação atual" title="**Recebíveis** do mês">
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))', gap: 12 }}>
          <BigStat label="A receber · maio" value={brl(totalMRR)} sub={contracts.filter(c => c.status === 'em-dia').length + ' contratos em dia'} accent />
          <BigStat label="Em atraso" value={overdue > 0 ? brl(overdue) : 'Zero'} sub={contracts.filter(c => c.status === 'atrasado').length + ' cliente(s)'} tone={overdue > 0 ? 'error' : 'success'} />
          <BigStat label="Pausados" value={paused > 0 ? brl(paused) : 'Zero'} sub={contracts.filter(c => c.status === 'pausado').length + ' contrato(s)'} tone={paused > 0 ? 'warning' : undefined} />
          <BigStat label="Ticket médio" value={brl(Math.round(totalMRR / Math.max(1, contracts.filter(c => c.status !== 'pausado').length)))} sub="por contrato ativo" />
        </div>
      </BlockCard>

      <BlockCard kicker="por contrato" title="**Cada cliente**, individualmente" padding={0}>
        <div style={{ padding: '10px 18px', borderBottom: '1px solid var(--border)', fontSize: 11, color: 'var(--text-faint)' }}>
          Clique no status para alterar · salvo neste navegador
        </div>
        <table style={{ width: '100%', borderCollapse: 'collapse', fontSize: 14 }}>
          <thead>
            <tr style={{ background: 'var(--surface-soft)' }}>
              <th style={th}>Cliente</th>
              <th style={th}>Tier</th>
              <th style={{ ...th, textAlign: 'right' }}>Mensalidade</th>
              <th style={{ ...th, textAlign: 'right' }}>Margem</th>
              <th style={th}>Vencimento</th>
              <th style={th}>Status</th>
            </tr>
          </thead>
          <tbody>
            {contracts.sort((a, b) => b.monthly - a.monthly).map(c => {
              const meta = PAYMENT_STATUS_META[c.status] || PAYMENT_STATUS_META['em-dia'];
              return (
                <tr key={c.slug} style={{ borderTop: '1px solid var(--border)' }}>
                  <td style={td}>
                    <div style={{ fontWeight: 500 }}>{c.brand}</div>
                    {c.isNew && <span style={{ fontSize: 10, color: 'var(--accent)', textTransform: 'uppercase', letterSpacing: '0.08em' }}>★ novo · inicia jun</span>}
                  </td>
                  <td style={td}><Pill>{c.tier}</Pill></td>
                  <td style={{ ...td, textAlign: 'right', fontVariantNumeric: 'tabular-nums', fontWeight: 500 }}>{brl(c.monthly)}</td>
                  <td style={{ ...td, textAlign: 'right' }}>
                    <span style={{ color: c.margin >= 55 ? 'var(--success)' : c.margin >= 45 ? 'var(--text)' : 'var(--warning)', fontWeight: 500 }}>
                      {c.margin}%
                    </span>
                  </td>
                  <td style={{ ...td, color: 'var(--text-muted)' }}>dia {c.paymentDay}</td>
                  <td style={td}>
                    <select
                      value={c.status}
                      onChange={(e) => setStatus(c.slug, e.target.value)}
                      style={{
                        appearance: 'none',
                        border: `1px solid ${meta.color}50`,
                        background: meta.color + '18',
                        color: meta.color,
                        padding: '5px 10px',
                        borderRadius: 'var(--r-btn)',
                        fontFamily: 'inherit',
                        fontSize: 12,
                        fontWeight: 500,
                        cursor: 'pointer',
                        outline: 'none',
                        minWidth: 100,
                      }}
                    >
                      {Object.entries(PAYMENT_STATUS_META).map(([k, v]) => (
                        <option key={k} value={k} style={{ background: 'var(--bg)', color: 'var(--text)' }}>
                          {v.label}
                        </option>
                      ))}
                    </select>
                  </td>
                </tr>
              );
            })}
          </tbody>
        </table>
      </BlockCard>
    </div>
  );
}

const th = {
  padding: '14px 18px', textAlign: 'left',
  fontSize: 11, fontWeight: 500, letterSpacing: '0.08em',
  textTransform: 'uppercase', color: 'var(--text-faint)',
};
const td = { padding: '14px 18px', color: 'var(--text)', verticalAlign: 'middle' };

/* ============================================================
   SECTION · CUSTOS & RETORNO
   ============================================================ */
function SectionCustos() {
  const current = REVENUE_HISTORY[REVENUE_HISTORY.length - 1];
  const totalCost = COST_STRUCTURE.reduce((a, c) => a + c.monthly, 0);
  const margin = ((current.revenue - totalCost) / current.revenue) * 100;
  const profit = current.revenue - totalCost;

  // agrupa por categoria
  const grouped = COST_STRUCTURE.reduce((acc, c) => {
    (acc[c.category] = acc[c.category] || []).push(c);
    return acc;
  }, {});

  return (
    <div>
      <BlockCard kicker="estrutura mensal" title="**Pra onde vai** o dinheiro">
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))', gap: 12, marginBottom: 24 }}>
          <BigStat label="Receita · maio"  value={brl(current.revenue)} accent />
          <BigStat label="Custos totais"   value={brl(totalCost)} sub={Math.round(totalCost/current.revenue*100) + '% da receita'} />
          <BigStat label="Lucro projetado" value={brl(profit)} sub={fmt.dec(margin, 1) + '% de margem'} accent={margin >= 50} tone={margin < 40 ? 'warning' : undefined} />
          <BigStat label="Custo por cliente" value={brl(Math.round(totalCost / CONTRACTS.filter(c => c.status !== 'pausado').length))} sub="média de ativos" />
        </div>

        <div style={{ display: 'flex', flexDirection: 'column', gap: 18 }}>
          {Object.entries(grouped).map(([cat, items]) => {
            const subtotal = items.reduce((a, i) => a + i.monthly, 0);
            return (
              <div key={cat}>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 8 }}>
                  <span className="t-overline" style={{ color: 'var(--accent)' }}>{cat}</span>
                  <span className="num" style={{ fontSize: 14, fontWeight: 500, color: 'var(--text)' }}>{brl(subtotal)}</span>
                </div>
                <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
                  {items.map((it, i) => (
                    <div key={i} style={{
                      padding: '10px 14px',
                      background: 'var(--surface-soft)',
                      border: '1px solid var(--border)',
                      borderRadius: 'var(--r-btn)',
                      display: 'grid', gridTemplateColumns: '1fr auto auto', gap: 14, alignItems: 'center',
                    }}>
                      <span style={{ fontSize: 13, color: 'var(--text)' }}>{it.label}</span>
                      <span style={{ fontSize: 11, color: 'var(--text-faint)', fontVariantNumeric: 'tabular-nums' }}>{it.share}%</span>
                      <span className="num" style={{ fontSize: 14, fontWeight: 500, color: 'var(--text)' }}>{brl(it.monthly)}</span>
                    </div>
                  ))}
                </div>
              </div>
            );
          })}
        </div>
      </BlockCard>

      <BlockCard kicker="margem por contrato" title="Quais clientes **dão mais retorno**">
        <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
          {CONTRACTS.filter(c => c.status !== 'pausado').sort((a,b) => b.margin - a.margin).map(c => {
            const profit = Math.round(c.monthly * c.margin / 100);
            return (
              <div key={c.slug} style={{
                display: 'grid', gridTemplateColumns: '180px 1fr 100px 100px', gap: 14, alignItems: 'center',
                padding: '10px 14px',
                background: 'var(--surface-soft)',
                border: '1px solid var(--border)',
                borderRadius: 'var(--r-btn)',
              }}>
                <span style={{ fontSize: 14, color: 'var(--text)', fontWeight: 500 }}>{c.brand}</span>
                <div style={{ height: 8, background: 'var(--surface)', borderRadius: 999, overflow: 'hidden', border: '1px solid var(--border)' }}>
                  <div style={{
                    height: '100%', width: c.margin + '%',
                    background: c.margin >= 60 ? '#6FC878' : c.margin >= 45 ? 'var(--accent)' : '#F3AE4D',
                    borderRadius: 999,
                  }} />
                </div>
                <span className="num" style={{ fontSize: 13, fontWeight: 500, color: 'var(--text)', textAlign: 'right' }}>{c.margin}%</span>
                <span className="num" style={{ fontSize: 13, color: 'var(--text-muted)', textAlign: 'right' }}>{brl(profit)}</span>
              </div>
            );
          })}
        </div>
      </BlockCard>
    </div>
  );
}

/* ============================================================
   SECTION · TIME · com toggle de período + produtividade
   ============================================================ */
function SectionTime() {
  const [period, setPeriod] = useStateSec('semana');

  const periods = [
    { id: 'hoje',      label: 'Hoje',          divisor: 30 },
    { id: 'semana',    label: 'Esta semana',   divisor: 4.3 },
    { id: 'mes',       label: 'Este mês',      divisor: 1 },
    { id: 'trimestre', label: 'Trimestre',     divisor: 0.33 },
  ];
  const current = periods.find(p => p.id === period);

  // Mock numbers · derivados da pauta + clickup
  const teamWithMetrics = TEAM_ALLOCATION.map((t, idx) => {
    // varia com o período
    const baseDelivered = [22, 28, 26][idx];
    const baseAssigned  = [25, 32, 30][idx];
    const delivered = Math.round(baseDelivered / current.divisor);
    const assigned  = Math.round(baseAssigned / current.divisor);
    const onTime    = Math.round(delivered * [0.92, 0.85, 0.96][idx]);
    const overdue   = assigned - delivered;
    const completion = assigned > 0 ? Math.round((delivered / assigned) * 100) : 0;
    const onTimeRate = delivered > 0 ? Math.round((onTime / delivered) * 100) : 0;
    const trend = [+8, -3, +12][idx]; // % vs período anterior

    return { ...t, delivered, assigned, onTime, overdue, completion, onTimeRate, trend };
  });

  const totalDelivered = teamWithMetrics.reduce((a, t) => a + t.delivered, 0);
  const totalAssigned  = teamWithMetrics.reduce((a, t) => a + t.assigned, 0);
  const totalCompletion = Math.round((totalDelivered / totalAssigned) * 100);
  const totalOverdue = teamWithMetrics.reduce((a, t) => a + t.overdue, 0);

  return (
    <div>
      <BlockCard
        kicker="produtividade do time"
        title={`**O time** ${period === 'hoje' ? 'hoje' : period === 'semana' ? 'esta semana' : period === 'mes' ? 'este mês' : 'no trimestre'}`}
        action={
          <div style={{ display: 'inline-flex', gap: 4, padding: 4, border: '1px solid var(--border)', borderRadius: 'var(--r-pill)', background: 'var(--surface)' }}>
            {periods.map(p => (
              <button key={p.id} onClick={() => setPeriod(p.id)} style={{
                appearance: 'none', border: 'none',
                padding: '6px 12px', fontSize: 12,
                borderRadius: 999, fontFamily: 'inherit', cursor: 'pointer',
                background: period === p.id ? 'var(--accent-soft)' : 'transparent',
                color: period === p.id ? 'var(--accent)' : 'var(--text-muted)',
                fontWeight: period === p.id ? 500 : 400,
              }}>{p.label}</button>
            ))}
          </div>
        }
      >
        {/* Visão geral consolidada */}
        <div style={{
          display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(180px, 1fr))',
          gap: 12, marginBottom: 24,
        }}>
          <BigStat label="Entregues" value={totalDelivered} sub={`de ${totalAssigned} planejadas`} accent />
          <BigStat label="Cumprimento" value={totalCompletion + '%'} sub={totalCompletion >= 90 ? 'no ritmo' : totalCompletion >= 75 ? 'razoável' : 'abaixo do esperado'} accent={totalCompletion >= 90} tone={totalCompletion < 75 ? 'warning' : undefined} />
          <BigStat label="Atrasadas" value={totalOverdue} tone={totalOverdue > 3 ? 'error' : totalOverdue > 0 ? 'warning' : undefined} />
          <BigStat label="Utilização média" value={Math.round(teamWithMetrics.reduce((a,t) => a + t.utilizationPct, 0)/teamWithMetrics.length) + '%'} sub="capacidade ocupada" />
        </div>

        {/* Cards por pessoa */}
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(320px, 1fr))', gap: 12 }}>
          {teamWithMetrics.map(t => {
            const burnout = BURNOUT_META[t.burnoutRisk];
            const completionColor =
              t.completion >= 95 ? '#6FC878' :
              t.completion >= 80 ? 'var(--accent)' :
              t.completion >= 60 ? '#F3AE4D' : '#F34D4D';
            return (
              <div key={t.id} style={{
                padding: 'var(--space-4)',
                background: 'var(--surface)',
                border: '1px solid var(--border)',
                borderRadius: 'var(--r-card)',
                display: 'flex', flexDirection: 'column', gap: 14,
              }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
                  <div style={{
                    width: 44, height: 44, borderRadius: '50%',
                    background: 'linear-gradient(135deg, var(--accent), var(--beza-deep))',
                    color: '#fff',
                    display: 'flex', alignItems: 'center', justifyContent: 'center',
                    fontSize: 16, fontWeight: 500,
                  }}>{t.name[0]}</div>
                  <div style={{ flex: 1 }}>
                    <div style={{ fontSize: 16, fontWeight: 500, color: 'var(--text)' }}>{t.name}</div>
                    <div style={{ fontSize: 12, color: 'var(--text-faint)' }}>{t.role}</div>
                  </div>
                  <Pill tone="neutral" style={{ color: burnout.color, borderColor: burnout.color + '40' }}>
                    {burnout.label}
                  </Pill>
                </div>

                {/* Cumprimento da pauta */}
                <div>
                  <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 4, alignItems: 'baseline' }}>
                    <span className="t-overline" style={{ color: 'var(--text-faint)' }}>Cumprimento da pauta</span>
                    <span style={{ display: 'inline-flex', alignItems: 'baseline', gap: 6 }}>
                      <span className="num" style={{ fontSize: 18, fontWeight: 500, color: completionColor }}>{t.completion}%</span>
                      <span style={{ fontSize: 11, color: t.trend > 0 ? 'var(--success)' : t.trend < 0 ? 'var(--error)' : 'var(--text-faint)' }}>
                        {t.trend > 0 ? '+' : ''}{t.trend}%
                      </span>
                    </span>
                  </div>
                  <div style={{ height: 8, background: 'var(--surface-soft)', borderRadius: 999, overflow: 'hidden', border: '1px solid var(--border)' }}>
                    <div style={{ height: '100%', width: t.completion + '%', background: completionColor, borderRadius: 999, transition: 'width var(--t-slow)' }} />
                  </div>
                </div>

                {/* Entregas detalhadas */}
                <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 12, paddingTop: 10, borderTop: '1px solid var(--border)' }}>
                  <Mini label="Entregues"  value={t.delivered} />
                  <Mini label="No prazo"   value={t.onTimeRate + '%'} />
                  <Mini label="Atrasadas"  value={t.overdue} />
                </div>

                {/* Pé · alocação e custo */}
                <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 12, paddingTop: 10, borderTop: '1px solid var(--border)', fontSize: 11 }}>
                  <Mini label="Utilização"  value={t.utilizationPct + '%'} />
                  <Mini label="Clientes"    value={t.clients} />
                  <Mini label="ClickUp"     value="🟢 ok" />
                </div>
              </div>
            );
          })}
        </div>

        <div style={{
          marginTop: 18, padding: '10px 14px',
          background: 'var(--surface-soft)', border: '1px solid var(--border)',
          borderRadius: 'var(--r-btn)',
          fontSize: 12, color: 'var(--text-faint)', display: 'flex', justifyContent: 'space-between', flexWrap: 'wrap', gap: 12,
        }}>
          <span>Dados consolidados da Pauta + ClickUp · atualizado a cada 5 min</span>
          <span style={{ color: 'var(--success)', display: 'inline-flex', alignItems: 'center', gap: 6 }}>
            <span style={{ width: 6, height: 6, borderRadius: '50%', background: 'currentColor' }} />
            sincronizado
          </span>
        </div>
      </BlockCard>
    </div>
  );
}

function Mini({ label, value }) {
  return (
    <div>
      <div className="t-overline" style={{ color: 'var(--text-faint)', fontSize: 10, marginBottom: 2 }}>{label}</div>
      <div className="num" style={{ fontSize: 14, fontWeight: 500, color: 'var(--text)' }}>{value}</div>
    </div>
  );
}

/* ============================================================
   SECTION · CLIENTES (saúde / churn / expansão)
   ============================================================ */
function SectionClientes() {
  const churnRisk = CLIENT_HEALTH.filter(c => c.churnRisk === 'alto' || c.churnRisk === 'medio');
  const expansion = CLIENT_HEALTH.filter(c => c.expansionPotential === 'alto');
  const avgHealth = Math.round(CLIENT_HEALTH.reduce((a, c) => a + c.healthScore, 0) / CLIENT_HEALTH.length);

  return (
    <div>
      <BlockCard kicker="snapshot" title="A **saúde** da carteira">
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))', gap: 12 }}>
          <BigStat label="Saúde média" value={avgHealth + '%'} accent={avgHealth >= 70} tone={avgHealth < 60 ? 'warning' : undefined} />
          <BigStat label="Em risco de churn" value={churnRisk.length} sub={churnRisk.length === 0 ? 'tranquilo' : 'olhar de perto'} tone={churnRisk.length > 1 ? 'warning' : undefined} />
          <BigStat label="Potencial de expansão" value={expansion.length} sub="proposta de upgrade" accent />
          <BigStat label="Novos · 90 dias" value={CLIENT_HEALTH.filter(c => c.monthsActive <= 3).length} />
        </div>
      </BlockCard>

      <BlockCard kicker="cliente por cliente" title="**Saúde + sinais** de cada um" padding={0}>
        <table style={{ width: '100%', borderCollapse: 'collapse', fontSize: 14 }}>
          <thead>
            <tr style={{ background: 'var(--surface-soft)' }}>
              <th style={th}>Cliente</th>
              <th style={{ ...th, textAlign: 'center' }}>Saúde</th>
              <th style={{ ...th, textAlign: 'center' }}>Risco</th>
              <th style={{ ...th, textAlign: 'center' }}>Expansão</th>
              <th style={{ ...th, textAlign: 'center' }}>Meses</th>
              <th style={th}>Sinal mais recente</th>
            </tr>
          </thead>
          <tbody>
            {CLIENT_HEALTH.sort((a, b) => a.healthScore - b.healthScore).map(c => {
              const trend = TREND_META[c.trend];
              const risk = RISK_META[c.churnRisk];
              const exp  = RISK_META[c.expansionPotential] || { color: 'var(--text-faint)' };
              return (
                <tr key={c.slug} style={{ borderTop: '1px solid var(--border)' }}>
                  <td style={{ ...td, fontWeight: 500 }}>{c.brand}</td>
                  <td style={{ ...td, textAlign: 'center' }}>
                    <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6 }}>
                      <span className="num" style={{ fontSize: 15, fontWeight: 500, color: c.healthScore >= 80 ? 'var(--success)' : c.healthScore >= 60 ? 'var(--text)' : 'var(--error)' }}>
                        {c.healthScore}
                      </span>
                      <span style={{ fontSize: 14, color: trend.color }}>{trend.icon}</span>
                    </span>
                  </td>
                  <td style={{ ...td, textAlign: 'center' }}>
                    <Pill tone="neutral" style={{ color: risk.color, borderColor: risk.color + '40' }}>{c.churnRisk}</Pill>
                  </td>
                  <td style={{ ...td, textAlign: 'center' }}>
                    <Pill tone="neutral" style={{ color: exp.color, borderColor: exp.color + '40' }}>{c.expansionPotential}</Pill>
                  </td>
                  <td style={{ ...td, textAlign: 'center', color: 'var(--text-muted)', fontVariantNumeric: 'tabular-nums' }}>{c.monthsActive}</td>
                  <td style={{ ...td, color: 'var(--text-muted)', fontSize: 13, lineHeight: 1.4, maxWidth: 380 }}>
                    {c.signal || <span style={{ color: 'var(--text-faint)' }}>—</span>}
                  </td>
                </tr>
              );
            })}
          </tbody>
        </table>
      </BlockCard>
    </div>
  );
}

Object.assign(window, { SectionOverview, SectionFinanceiro, SectionCustos, SectionTime, SectionClientes, Mini });