// playbook-gestao.jsx — Gestão section: Designers + Contas tabs with CRUD

const { useState: useStateG, useEffect: useEffectG } = React;
const TG = window.PDATA;

/* ─── SHARED UI (mirrors playbook-sections.jsx) ──────── */
const gTypeColors = {
  A: { bg: 'rgba(139,92,246,.12)', border: 'rgba(139,92,246,.3)', text: 'oklch(72% .18 295)', badge: 'rgba(139,92,246,.85)' },
  B: { bg: 'rgba(59,130,246,.12)', border: 'rgba(59,130,246,.3)', text: 'oklch(72% .18 235)', badge: 'rgba(59,130,246,.85)' },
  C: { bg: 'rgba(34,197,94,.12)',  border: 'rgba(34,197,94,.3)',  text: 'oklch(72% .18 160)', badge: 'rgba(34,197,94,.85)' },
};

const GTypeBadge = ({ type }) => (
  <span style={{ display:'inline-flex', alignItems:'center', padding:'3px 10px', borderRadius: 999, fontSize: 12, fontWeight: 700, letterSpacing:'.06em', background: gTypeColors[type].badge, color:'#fff' }}>{type}</span>
);

const GHeader = ({ num, title, desc }) => (
  <div style={{ marginBottom: 32, paddingBottom: 24, borderBottom: '1px solid var(--br)' }}>
    <span style={{ display:'block', fontFamily:'var(--ffd)', fontSize: 12, fontWeight: 700, color:'var(--acc)', letterSpacing:'.1em', textTransform:'uppercase', marginBottom: 10 }}>{num}</span>
    <h1 style={{ fontFamily:'var(--ffd)', fontSize: 34, fontWeight: 800, letterSpacing:'-.02em', lineHeight: 1.1, color:'var(--fg)', marginBottom: 12 }}>{title}</h1>
    <p style={{ fontSize: 17, color:'var(--fg2)', lineHeight: 1.6, maxWidth: 680 }}>{desc}</p>
  </div>
);

/* ─── INPUT / FORM PRIMITIVES ────────────────────────── */
const Field = ({ label, children }) => (
  <div style={{ marginBottom: 16 }}>
    <label style={{ display:'block', fontSize: 12, fontWeight: 600, letterSpacing:'.04em', textTransform:'uppercase', color:'var(--fg3)', marginBottom: 6 }}>{label}</label>
    {children}
  </div>
);

const inputStyle = {
  width: '100%', padding: '10px 12px', borderRadius: 8,
  border: '1px solid var(--br2)', background: 'var(--bg2)',
  color: 'var(--fg)', fontSize: 14, fontFamily: 'var(--ffb)',
  outline: 'none', transition: 'border .15s',
};

const Btn = ({ variant = 'default', children, onClick, type, style }) => {
  const styles = {
    primary: { background: 'var(--acc)', color: '#fff', border: '1px solid var(--acc)' },
    default: { background: 'var(--card)', color: 'var(--fg)', border: '1px solid var(--br2)' },
    ghost:   { background: 'transparent', color: 'var(--fg2)', border: '1px solid transparent' },
    danger:  { background: 'rgba(239,68,68,.12)', color: 'oklch(65% .22 25)', border: '1px solid rgba(239,68,68,.3)' },
  };
  return (
    <button type={type || 'button'} onClick={onClick} style={{
      padding: '8px 14px', borderRadius: 8, fontSize: 13, fontWeight: 600,
      cursor: 'pointer', transition: 'all .15s', fontFamily: 'var(--ffb)',
      ...styles[variant], ...style,
    }}>{children}</button>
  );
};

/* ─── MODAL ──────────────────────────────────────────── */
function Modal({ open, onClose, title, children, footer }) {
  useEffectG(() => {
    if (!open) return;
    const onKey = e => { if (e.key === 'Escape') onClose(); };
    window.addEventListener('keydown', onKey);
    return () => window.removeEventListener('keydown', onKey);
  }, [open, onClose]);
  if (!open) return null;
  return (
    <div onClick={onClose} style={{
      position:'fixed', inset: 0, background:'rgba(0,0,0,.55)',
      backdropFilter: 'blur(4px)', zIndex: 1000,
      display:'flex', alignItems:'center', justifyContent:'center',
      animation: 'fadeUp .15s ease',
    }}>
      <div className="modal-panel" onClick={e => e.stopPropagation()} style={{
        background:'var(--card)', borderRadius: 14,
        border:'1px solid var(--br2)', width: 480, maxWidth: '92vw',
        maxHeight: '88vh', overflow: 'hidden',
        display:'flex', flexDirection:'column',
        boxShadow:'0 30px 80px rgba(0,0,0,.5)',
      }}>
        <div style={{ padding: '20px 24px', borderBottom: '1px solid var(--br)', display:'flex', alignItems:'center', justifyContent:'space-between' }}>
          <p style={{ fontFamily:'var(--ffd)', fontSize: 18, fontWeight: 700 }}>{title}</p>
          <button onClick={onClose} style={{ background:'transparent', border:'none', color:'var(--fg2)', fontSize: 18, cursor:'pointer', padding: 4, lineHeight: 1 }}>×</button>
        </div>
        <div style={{ padding: 24, overflowY: 'auto', flex: 1 }}>
          {children}
        </div>
        {footer && <div style={{ padding: '16px 24px', borderTop: '1px solid var(--br)', display:'flex', justifyContent:'flex-end', gap: 8 }}>{footer}</div>}
      </div>
    </div>
  );
}

/* ─── DESIGNER FORM ──────────────────────────────────── */
function DesignerForm({ initial, accountsList, onSubmit, onCancel }) {
  const [name, setName]   = useStateG(initial?.name || '');
  const [role, setRole]   = useStateG(initial?.role || 'Designer Pleno');
  const [email, setEmail] = useStateG(initial?.email || '');
  // Selected account ids
  const initialAccIds = initial ? accountsList.filter(a => a.designerName === initial.name).map(a => a.id) : [];
  const [accIds, setAccIds] = useStateG(initialAccIds);

  const submit = (e) => {
    e?.preventDefault();
    if (!name.trim()) return;
    onSubmit({ name: name.trim(), role: role.trim(), email: email.trim(), accountIds: accIds });
  };

  const toggleAcc = (id) => {
    setAccIds(prev => prev.includes(id) ? prev.filter(x => x !== id) : [...prev, id]);
  };

  return (
    <form onSubmit={submit}>
      <Field label="Nome"><input style={inputStyle} value={name} onChange={e => setName(e.target.value)} placeholder="Nome completo" autoFocus /></Field>
      <Field label="Cargo">
        <select style={{ ...inputStyle, cursor: 'pointer' }} value={role} onChange={e => setRole(e.target.value)}>
          <option>Designer Júnior</option>
          <option>Designer Pleno</option>
          <option>Designer Sênior</option>
          <option>Designer Lead</option>
          <option>Direção Criativa</option>
          <option>Designer (Pausado)</option>
        </select>
      </Field>
      <Field label="E-mail"><input type="email" style={inputStyle} value={email} onChange={e => setEmail(e.target.value)} placeholder="nome@operacao.design" /></Field>
      <Field label="Contas atribuídas">
        <div style={{ maxHeight: 200, overflowY: 'auto', border: '1px solid var(--br)', borderRadius: 8, padding: 8, background:'var(--bg2)' }}>
          {accountsList.length === 0 && <p style={{ fontSize: 13, color:'var(--fg3)', padding: 12, textAlign:'center' }}>Nenhuma conta cadastrada</p>}
          {accountsList.map(a => (
            <label key={a.id} style={{ display:'flex', alignItems:'center', gap: 10, padding:'7px 8px', borderRadius: 6, cursor: 'pointer', transition:'background .12s' }}
              onMouseEnter={e => e.currentTarget.style.background = 'var(--br)'}
              onMouseLeave={e => e.currentTarget.style.background = 'transparent'}>
              <input type="checkbox" checked={accIds.includes(a.id)} onChange={() => toggleAcc(a.id)} style={{ accentColor: 'var(--acc)' }} />
              <GTypeBadge type={a.type} />
              <span style={{ fontSize: 14, flex: 1 }}>{a.name}</span>
              {a.designerName && a.designerName !== initial?.name && <span style={{ fontSize: 11, color:'var(--fg3)' }}>{a.designerName}</span>}
            </label>
          ))}
        </div>
        <p style={{ fontSize: 12, color:'var(--fg3)', marginTop: 6 }}>Selecionar transfere a conta do designer atual.</p>
      </Field>
      <div style={{ display:'flex', justifyContent:'flex-end', gap: 8, marginTop: 20 }}>
        <Btn variant="ghost" onClick={onCancel}>Cancelar</Btn>
        <Btn variant="primary" type="submit" onClick={submit} style={{ whiteSpace: 'nowrap' }}>{initial ? 'Salvar' : 'Adicionar Designer'}</Btn>
      </div>
    </form>
  );
}

/* ─── ACCOUNT FORM ───────────────────────────────────── */
function AccountForm({ initial, designersList, onSubmit, onCancel }) {
  const [name, setName] = useStateG(initial?.name || '');
  const [type, setType] = useStateG(initial?.type || 'B');
  const [designerName, setDesignerName] = useStateG(initial?.designerName || '');

  const submit = (e) => {
    e?.preventDefault();
    if (!name.trim()) return;
    onSubmit({ name: name.trim(), type, designerName: designerName || null });
  };

  return (
    <form onSubmit={submit}>
      <Field label="Nome da Conta"><input style={inputStyle} value={name} onChange={e => setName(e.target.value)} placeholder="Ex: Prisma Pay" autoFocus /></Field>
      <Field label="Segmento / Tipo">
        <div style={{ display:'flex', gap: 8 }}>
          {['A','B','C'].map(t => (
            <button key={t} type="button" onClick={() => setType(t)} style={{
              flex: 1, padding: '10px 12px', borderRadius: 8, cursor: 'pointer',
              border: `1.5px solid ${type === t ? gTypeColors[t].border : 'var(--br)'}`,
              background: type === t ? gTypeColors[t].bg : 'var(--bg2)',
              transition: 'all .15s',
              display:'flex', alignItems:'center', justifyContent:'center', gap: 8,
            }}>
              <GTypeBadge type={t} />
              <span style={{ fontSize: 13, fontWeight: 600, color: type === t ? gTypeColors[t].text : 'var(--fg2)' }}>{TG.accounts[t].label}</span>
            </button>
          ))}
        </div>
      </Field>
      <Field label="Designer Responsável">
        <select style={{ ...inputStyle, cursor: 'pointer' }} value={designerName} onChange={e => setDesignerName(e.target.value)}>
          <option value="">— Sem designer alocado —</option>
          {designersList.map(d => <option key={d.id} value={d.name}>{d.name} · {d.role}</option>)}
        </select>
      </Field>
      <div style={{ display:'flex', justifyContent:'flex-end', gap: 8, marginTop: 20 }}>
        <Btn variant="ghost" onClick={onCancel}>Cancelar</Btn>
        <Btn variant="primary" type="submit" onClick={submit}>{initial ? 'Salvar' : 'Adicionar Conta'}</Btn>
      </div>
    </form>
  );
}

/* ─── CONFIRM MODAL ──────────────────────────────────── */
function ConfirmModal({ open, title, message, onConfirm, onCancel }) {
  return (
    <Modal open={open} onClose={onCancel} title={title}>
      <p style={{ fontSize: 15, color:'var(--fg2)', lineHeight: 1.6, marginBottom: 20 }}>{message}</p>
      <div style={{ display:'flex', justifyContent:'flex-end', gap: 8 }}>
        <Btn variant="ghost" onClick={onCancel}>Cancelar</Btn>
        <Btn variant="danger" onClick={onConfirm}>Remover</Btn>
      </div>
    </Modal>
  );
}

/* ─── DESIGNERS TAB ──────────────────────────────────── */
function DesignersTab() {
  const store = window.useStore();
  const designers = store.getDesigners();
  const accounts = store.getAccounts();
  const [editing, setEditing] = useStateG(null);
  const [adding, setAdding]   = useStateG(false);
  const [confirmRemove, setConfirmRemove] = useStateG(null);
  const [search, setSearch]   = useStateG('');

  const filtered = search
    ? designers.filter(d => d.name.toLowerCase().includes(search.toLowerCase()) || d.role.toLowerCase().includes(search.toLowerCase()))
    : designers;

  const accountsOf = (name) => accounts.filter(a => a.designerName === name);

  function commitDesigner(form, originalId) {
    if (originalId) {
      const orig = designers.find(d => d.id === originalId);
      // Apply patch — handle name change separately to also rename in accounts
      if (orig.name !== form.name) {
        store.renameDesigner(originalId, orig.name, form.name);
      }
      store.updateDesigner(originalId, { role: form.role, email: form.email });
      // Reassign accounts: assign selected; unassign previously-his that are now unselected
      const targetSet = new Set(form.accountIds);
      const newName = form.name;
      accounts.forEach(a => {
        const wasHis = a.designerName === orig.name || a.designerName === newName;
        const shouldBe = targetSet.has(a.id);
        if (shouldBe && a.designerName !== newName) {
          store.updateAccount(a.id, { designerName: newName });
        } else if (!shouldBe && wasHis) {
          store.updateAccount(a.id, { designerName: null });
        }
      });
    } else {
      store.addDesigner({ name: form.name, role: form.role, email: form.email });
      // Assign selected accounts to this new designer
      form.accountIds.forEach(aid => store.updateAccount(aid, { designerName: form.name }));
    }
    setAdding(false); setEditing(null);
  }

  return (
    <div>
      <div className="management-toolbar" style={{ display:'flex', justifyContent:'space-between', alignItems:'center', marginBottom: 16, gap: 12 }}>
        <input value={search} onChange={e => setSearch(e.target.value)} placeholder="Buscar designer…"
          style={{ ...inputStyle, maxWidth: 320 }} />
        <Btn variant="primary" onClick={() => setAdding(true)}>+ Adicionar Designer</Btn>
      </div>

      {filtered.length === 0 && (
        <div style={{ textAlign:'center', padding: 60, background:'var(--card)', border:'1px dashed var(--br2)', borderRadius: 12 }}>
          <p style={{ fontSize: 15, color:'var(--fg2)' }}>Nenhum designer {search ? 'corresponde à busca' : 'cadastrado'}.</p>
        </div>
      )}

      <div style={{ background:'var(--card)', border:'1px solid var(--br)', borderRadius: 12, overflow:'hidden' }}>
        {filtered.map((d, i) => {
          const accs = accountsOf(d.name);
          return (
            <div className="management-list-row" key={d.id} style={{ display:'flex', alignItems:'center', gap: 16, padding:'16px 20px', borderBottom: i < filtered.length - 1 ? '1px solid var(--br)' : 'none' }}>
              <div style={{ width: 38, height: 38, borderRadius: '50%', background:'var(--bg3,var(--bg2))', display:'flex', alignItems:'center', justifyContent:'center', fontSize: 13, fontWeight: 700, color:'var(--fg2)', border: '1px solid var(--br2)', flexShrink: 0 }}>{d.initials}</div>
              <div className="management-main" style={{ flex: 1, minWidth: 0 }}>
                <div className="management-name-line" style={{ display:'flex', alignItems:'center', gap: 10, marginBottom: 3 }}>
                  <p style={{ fontSize: 15, fontWeight: 600 }}>{d.name}</p>
                  <span style={{ fontSize: 11, padding:'2px 7px', borderRadius: 4, background:'var(--bg2)', color:'var(--fg2)' }}>{d.role}</span>
                </div>
                <p style={{ fontSize: 13, color:'var(--fg3)' }}>{d.email || <span style={{ fontStyle:'italic' }}>sem e-mail</span>}</p>
              </div>
              <div className="management-tags" style={{ display:'flex', flexWrap:'wrap', gap: 4, maxWidth: 280, justifyContent:'flex-end' }}>
                {accs.length === 0 && <span style={{ fontSize: 12, color:'var(--fg3)', fontStyle:'italic' }}>Sem contas</span>}
                {accs.map(a => (
                  <span key={a.id} style={{ fontSize: 11, padding:'2px 7px', borderRadius: 4, background: gTypeColors[a.type].bg, color: gTypeColors[a.type].text, border: `1px solid ${gTypeColors[a.type].border}` }}>{a.name}</span>
                ))}
              </div>
              <div className="management-actions" style={{ display:'flex', gap: 6, flexShrink: 0 }}>
                <Btn variant="ghost" onClick={() => setEditing(d)} style={{ padding: '6px 10px' }}>✎</Btn>
                <Btn variant="ghost" onClick={() => setConfirmRemove(d)} style={{ padding: '6px 10px', color:'oklch(65% .22 25)' }}>×</Btn>
              </div>
            </div>
          );
        })}
      </div>

      <Modal open={adding} onClose={() => setAdding(false)} title="Adicionar Designer">
        <DesignerForm accountsList={accounts} onSubmit={f => commitDesigner(f, null)} onCancel={() => setAdding(false)} />
      </Modal>
      <Modal open={!!editing} onClose={() => setEditing(null)} title="Editar Designer">
        {editing && <DesignerForm initial={editing} accountsList={accounts} onSubmit={f => commitDesigner(f, editing.id)} onCancel={() => setEditing(null)} />}
      </Modal>
      <ConfirmModal open={!!confirmRemove}
        title="Remover Designer"
        message={confirmRemove ? `Tem certeza que deseja remover ${confirmRemove.name}? As contas que ele atende ficarão sem designer alocado.` : ''}
        onConfirm={() => { store.removeDesigner(confirmRemove.id); setConfirmRemove(null); }}
        onCancel={() => setConfirmRemove(null)} />
    </div>
  );
}

/* ─── ACCOUNTS TAB ───────────────────────────────────── */
function AccountsTab() {
  const store = window.useStore();
  const designers = store.getDesigners();
  const accounts  = store.getAccounts();
  const [editing, setEditing] = useStateG(null);
  const [adding, setAdding]   = useStateG(false);
  const [confirmRemove, setConfirmRemove] = useStateG(null);
  const [filter, setFilter]   = useStateG('all');
  const [search, setSearch]   = useStateG('');

  let filtered = filter === 'all' ? accounts : accounts.filter(a => a.type === filter);
  if (search) filtered = filtered.filter(a => a.name.toLowerCase().includes(search.toLowerCase()) || (a.designerName && a.designerName.toLowerCase().includes(search.toLowerCase())));

  function commitAccount(form, id) {
    if (id) store.updateAccount(id, form);
    else store.addAccount(form);
    setAdding(false); setEditing(null);
  }

  return (
    <div>
      <div className="management-toolbar" style={{ display:'flex', justifyContent:'space-between', alignItems:'center', marginBottom: 16, gap: 12, flexWrap:'wrap' }}>
        <div style={{ display:'flex', gap: 12, alignItems:'center', flex: 1, flexWrap:'wrap' }}>
          <input value={search} onChange={e => setSearch(e.target.value)} placeholder="Buscar conta ou designer…" style={{ ...inputStyle, maxWidth: 280 }} />
          <div style={{ display:'flex', gap: 6 }}>
            {[['all','Todas'],['A','A'],['B','B'],['C','C']].map(([v,l]) => (
              <button key={v} onClick={() => setFilter(v)} style={{
                padding:'8px 14px', borderRadius: 8, fontSize: 13, fontWeight: 600,
                border: `1px solid ${filter===v ? 'var(--acc)' : 'var(--br)'}`,
                background: filter===v ? 'var(--acc-bg)' : 'var(--card)',
                color: filter===v ? 'var(--acc)' : 'var(--fg2)',
                cursor:'pointer', transition:'all .15s', fontFamily:'var(--ffb)',
              }}>{l}</button>
            ))}
          </div>
        </div>
        <Btn variant="primary" onClick={() => setAdding(true)}>+ Adicionar Conta</Btn>
      </div>

      {filtered.length === 0 && (
        <div style={{ textAlign:'center', padding: 60, background:'var(--card)', border:'1px dashed var(--br2)', borderRadius: 12 }}>
          <p style={{ fontSize: 15, color:'var(--fg2)' }}>Nenhuma conta {search || filter !== 'all' ? 'corresponde aos filtros' : 'cadastrada'}.</p>
        </div>
      )}

      <div style={{ background:'var(--card)', border:'1px solid var(--br)', borderRadius: 12, overflow:'hidden' }}>
        {filtered.map((a, i) => {
          const designer = designers.find(d => d.name === a.designerName);
          const tc = gTypeColors[a.type];
          return (
            <div className="management-list-row" key={a.id} style={{ display:'flex', alignItems:'center', gap: 16, padding:'16px 20px', borderBottom: i < filtered.length - 1 ? '1px solid var(--br)' : 'none' }}>
              <div style={{ width: 6, height: 38, borderRadius: 3, background: tc.badge, flexShrink: 0 }} />
              <div className="management-main" style={{ flex: 1, minWidth: 0 }}>
                <div className="management-name-line" style={{ display:'flex', alignItems:'center', gap: 10, marginBottom: 3 }}>
                  <p style={{ fontSize: 15, fontWeight: 600 }}>{a.name}</p>
                  <GTypeBadge type={a.type} />
                  <span style={{ fontSize: 12, color:'var(--fg3)' }}>{TG.accounts[a.type].label}</span>
                </div>
                <p style={{ fontSize: 13, color:'var(--fg2)' }}>
                  {designer
                    ? <><span style={{ color:'var(--fg3)' }}>Responsável: </span>{designer.name} <span style={{ color:'var(--fg3)' }}>· {designer.role}</span></>
                    : <span style={{ fontStyle:'italic', color:'oklch(72% .18 85)' }}>Sem designer alocado</span>}
                </p>
              </div>
              <div className="management-actions" style={{ display:'flex', gap: 6, flexShrink: 0 }}>
                <Btn variant="ghost" onClick={() => setEditing(a)} style={{ padding: '6px 10px' }}>✎</Btn>
                <Btn variant="ghost" onClick={() => setConfirmRemove(a)} style={{ padding: '6px 10px', color:'oklch(65% .22 25)' }}>×</Btn>
              </div>
            </div>
          );
        })}
      </div>

      <Modal open={adding} onClose={() => setAdding(false)} title="Adicionar Conta">
        <AccountForm designersList={designers} onSubmit={f => commitAccount(f, null)} onCancel={() => setAdding(false)} />
      </Modal>
      <Modal open={!!editing} onClose={() => setEditing(null)} title="Editar Conta">
        {editing && <AccountForm initial={editing} designersList={designers} onSubmit={f => commitAccount(f, editing.id)} onCancel={() => setEditing(null)} />}
      </Modal>
      <ConfirmModal open={!!confirmRemove}
        title="Remover Conta"
        message={confirmRemove ? `Tem certeza que deseja remover a conta ${confirmRemove.name}?` : ''}
        onConfirm={() => { store.removeAccount(confirmRemove.id); setConfirmRemove(null); }}
        onCancel={() => setConfirmRemove(null)} />
    </div>
  );
}

/* ─── GESTÃO ROOT ────────────────────────────────────── */
function Gestao() {
  const [tab, setTab] = useStateG('designers');
  const store = window.useStore();
  const dCount = store.getDesigners().length;
  const aCount = store.getAccounts().length;

  return (
    <div>
      <GHeader num="Gestão" title="Gestão da Operação" desc="Cadastre, edite e organize designers e contas. Tudo é salvo localmente e reflete nas demais seções do playbook." />

      <div className="management-tabs" style={{ display:'flex', gap: 0, marginBottom: 24, borderBottom: '1px solid var(--br)' }}>
        {[
          ['designers', 'Designers', dCount],
          ['accounts',  'Contas',    aCount],
        ].map(([id, label, count]) => (
          <button key={id} onClick={() => setTab(id)} style={{
            padding: '12px 20px', background: 'transparent', border: 'none',
            borderBottom: `2px solid ${tab === id ? 'var(--acc)' : 'transparent'}`,
            marginBottom: -1, cursor: 'pointer', transition: 'all .15s',
            fontFamily: 'var(--ffb)', fontSize: 14, fontWeight: 600,
            color: tab === id ? 'var(--fg)' : 'var(--fg2)',
            display: 'flex', alignItems: 'center', gap: 8,
          }}>
            {label}
            <span style={{
              padding: '1px 8px', borderRadius: 999, fontSize: 11,
              background: tab === id ? 'var(--acc-bg)' : 'var(--bg2)',
              color: tab === id ? 'var(--acc)' : 'var(--fg3)',
              fontWeight: 700,
            }}>{count}</span>
          </button>
        ))}
        <div style={{ flex: 1 }} />
        <button className="restore-button" onClick={() => { if (confirm('Restaurar dados originais? Suas alterações serão perdidas.')) window.Store.reset(); }}
          style={{ padding: '8px 12px', background: 'transparent', border: 'none', cursor: 'pointer', color: 'var(--fg3)', fontSize: 12, alignSelf: 'center' }}>
          Restaurar padrão
        </button>
      </div>

      {tab === 'designers' ? <DesignersTab /> : <AccountsTab />}
    </div>
  );
}

Object.assign(window.SECTIONS, { Gestao });