/* =====================================================================
   Hino Site — showcase.jsx
   Demonstração interativa fiel ao sistema real (ERP + Portal BI).
   Conteúdo baseado nos manuais (Notion) e telas reais do Hino ERP.
   Dados são de demonstração (Estabelecimento "1 - APRESENTACAO").
   Carregado via <script type="text/babel" src="showcase.jsx">
   ===================================================================== */
const { useState } = React;

// ── Sparkline ──────────────────────────────────────────────────────
function Sparkline({ values, color, width = 52, height = 20 }) {
  if (!values || values.length < 2) return null;
  const max = Math.max(...values), min = Math.min(...values);
  const range = max - min || 1;
  const pts = values.map((v, i) =>
    `${(i / (values.length - 1)) * width},${height - ((v - min) / range) * height}`
  ).join(' ');
  return (
    <svg width={width} height={height} viewBox={`0 0 ${width} ${height}`}
      style={{ overflow: 'visible', display: 'block' }}>
      <polyline points={pts} fill="none" stroke={color}
        strokeWidth={1.5} strokeLinecap="round" strokeLinejoin="round" />
    </svg>
  );
}

// ── Helpers de grid ERP ────────────────────────────────────────────
function erpTh(label, w) {
  return <th key={label} style={{ background:'linear-gradient(180deg,#f3f5f8,#e0e4ec)', borderRight:'1px solid #c5c9d0', borderBottom:'1px solid #aab0bc', padding:'4px 8px', textAlign:'left', fontWeight:600, fontSize:10.5, whiteSpace:'nowrap', ...(w ? { width:w } : {}) }}>{label}</th>;
}
function erpTd(val, extra = {}) {
  return <td style={{ padding:'3px 8px', borderRight:'1px solid #e6e8ec', borderBottom:'1px solid #e6e8ec', whiteSpace:'nowrap', ...extra }}>{val}</td>;
}
function BackLink({ onClick, children }) {
  return (
    <div onClick={onClick} style={{ display:'inline-flex', alignItems:'center', gap:6, color:'#0b58c9', cursor:'pointer', fontSize:11.5, padding:'7px 12px', borderBottom:'1px solid #c5c9d0', background:'#f7f8fa', width:'100%' }}>
      ‹ Voltar à lista <span style={{ color:'#8a8f9b' }}>— {children}</span>
    </div>
  );
}
function Field({ label, value, w }) {
  return (
    <div style={{ display:'flex', flexDirection:'column', gap:2, minWidth:w || 120 }}>
      <span style={{ fontSize:9.5, color:'#7a8090', textTransform:'uppercase', letterSpacing:'.04em' }}>{label}</span>
      <div style={{ background:'#fff', border:'1px solid #c5c9d0', borderRadius:2, padding:'3px 7px', fontSize:11.5, color:'#1a2030' }}>{value}</div>
    </div>
  );
}

// ── ERP Window Chrome ──────────────────────────────────────────────
function ErpWindow({ appTitle, moduleTab, ribbonGroups, docTabs, statusLeft, children }) {
  const allTabs = ['Arquivo', moduleTab, 'Gerais', 'Auxiliares', 'Ambiente', 'Utilitários', 'Customizações - Dunas'];
  const S = {
    root: { borderRadius: 8, overflow: 'hidden', background: '#ecf0f5', border: '1px solid rgba(0,0,0,.2)', boxShadow: '0 28px 70px rgba(0,0,0,.55)', color: '#1a2030', fontFamily: "'Segoe UI',system-ui,sans-serif", fontSize: 12, userSelect: 'none' },
    title: { height: 28, display: 'flex', alignItems: 'center', padding: '0 8px 0 6px', gap: 8, background: 'linear-gradient(180deg,#fdfdfd,#e6e8ec)', borderBottom: '1px solid #c5c9d0' },
    logo: { width: 22, height: 22, borderRadius: '50%', background: '#0b3c8c', display: 'grid', placeItems: 'center', fontFamily: 'Barlow Condensed', fontWeight: 900, color: '#29ABE2', fontSize: 13, flexShrink: 0 },
    tabs: { display: 'flex', alignItems: 'flex-end', padding: '4px 8px 0', height: 26, background: '#d8dde4', borderBottom: '1px solid #aab0bc', gap: 1 },
    ribbon: { background: '#ecf0f5', borderBottom: '1px solid #aab0bc', padding: '6px 10px 4px', display: 'flex', gap: 0, alignItems: 'stretch', overflowX: 'auto' },
    doctabs: { background: '#ecf0f5', borderBottom: '1px solid #c5c9d0', display: 'flex', alignItems: 'center', height: 24, padding: '0 4px', gap: 1 },
    toolbar: { display: 'flex', alignItems: 'center', gap: 3, padding: '3px 8px', background: '#f7f8fa', borderBottom: '1px solid #c5c9d0', height: 25, fontSize: 11, color: '#2a2f3a' },
    statusbar: { background: 'linear-gradient(180deg,#dde2ea,#c8ced8)', borderTop: '1px solid #aab0bc', padding: '3px 12px', display: 'flex', gap: 16, fontSize: 11 },
  };
  return (
    <div style={S.root}>
      <div style={S.title}>
        <div style={S.logo}>H</div>
        <span style={{ flex: 1, textAlign: 'center', fontSize: 11.5, fontWeight: 500 }}>{appTitle} — Hino - ERP</span>
        {['–','□','✕'].map((b, i) => <div key={i} style={{ width: 30, height: 22, display: 'grid', placeItems: 'center', fontSize: 11, color: '#4a5060', cursor: 'default' }}>{b}</div>)}
      </div>
      <div style={S.tabs}>
        {allTabs.map(t => (
          <div key={t} style={{ padding: '4px 10px 5px', fontSize: 11.5, whiteSpace: 'nowrap', background: t === moduleTab ? '#ecf0f5' : '#c8ced8', border: '1px solid #aab0bc', borderBottom: t === moduleTab ? '1px solid #ecf0f5' : 'none', borderRadius: '4px 4px 0 0', color: t === moduleTab ? '#0b3c8c' : '#2a2f3a', fontWeight: t === moduleTab ? 600 : 400 }}>{t}</div>
        ))}
      </div>
      <div style={S.ribbon}>
        {ribbonGroups.map(g => (
          <div key={g.label} style={{ display: 'flex', flexDirection: 'column', borderRight: '1px solid #cbd0d9', padding: '0 8px 2px', flexShrink: 0 }}>
            <div style={{ display: 'flex', gap: 2, padding: '2px 0 4px' }}>
              {g.items.map(it => (
                <div key={it.label} style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 2, padding: '2px 5px', borderRadius: 3, cursor: 'default', minWidth: 46, fontSize: 9.5, color: '#2a2f3a' }}>
                  <div style={{ width: 24, height: 24, display: 'grid', placeItems: 'center', fontSize: 13, color: it.color }}>{it.icon}</div>
                  <span style={{ whiteSpace: 'nowrap' }}>{it.label}</span>
                </div>
              ))}
            </div>
            <div style={{ fontSize: 9.5, color: '#50566a', textAlign: 'center', borderTop: '1px dotted #c5c9d0', paddingTop: 2 }}>{g.label}</div>
          </div>
        ))}
      </div>
      <div style={S.doctabs}>
        {docTabs.map(t => (
          <div key={t.label} style={{ padding: '3px 10px 4px', fontSize: 11.5, background: t.active ? '#fff' : '#d8dde4', border: '1px solid #aab0bc', borderBottom: t.active ? '1px solid #fff' : 'none', marginRight: 1, display: 'flex', alignItems: 'center', gap: 6, borderRadius: '3px 3px 0 0', color: t.active ? '#0b3c8c' : '#2a2f3a', fontWeight: t.active ? 600 : 400 }}>
            {t.label} <span style={{ color: '#888', fontSize: 10 }}>✕</span>
          </div>
        ))}
      </div>
      <div style={S.toolbar}>
        {['◀','▶'].map(b => <button key={b} style={{ background: 'none', border: 'none', cursor: 'default', padding: '1px 5px', color: '#2a2f3a' }}>{b}</button>)}
        <div style={{ width: 1, height: 14, background: '#c5c9d0', margin: '0 3px' }} />
        {['➕ Novo','✎ Editar','💾 Salvar'].map(b => <button key={b} style={{ background: 'none', border: 'none', cursor: 'default', padding: '1px 6px', color: '#2a2f3a' }}>{b}</button>)}
        <div style={{ width: 1, height: 14, background: '#c5c9d0', margin: '0 3px' }} />
        {['🔍 Filtrar','↻ Atualizar','⎘ Imprimir'].map(b => <button key={b} style={{ background: 'none', border: 'none', cursor: 'default', padding: '1px 6px', color: '#2a2f3a' }}>{b}</button>)}
        <span style={{ marginLeft: 'auto', color: '#50566a' }}>Período: 01/01/2025 → 12/05/2026</span>
      </div>
      {children}
      <div style={S.statusbar}>
        <span>{statusLeft}</span>
        <span style={{ marginLeft: 'auto' }}>Versão: <b>1.10.45.80</b></span>
      </div>
    </div>
  );
}

const SPILLS = { APROVADO:{bg:'#c2e7b0',c:'#1f5f1a'}, PENDENTE:{bg:'#ffe0a3',c:'#7a4500'}, SEPARADO:{bg:'#b6dafb',c:'#0b3c8c'}, AGUARDANDO:{bg:'#ffd66b',c:'#6f4a00'}, FECHADO:{bg:'#ffcece',c:'#7a1a1a'}, ABERTO:{bg:'#c2e7b0',c:'#1f5f1a'}, 'EM ABERTO':{bg:'#c2e7b0',c:'#1f5f1a'}, 'APROV. PARCIAL':{bg:'#cfe0ff',c:'#0b3c8c'}, 'NÍVEL 1':{bg:'#ffe0a3',c:'#7a4500'}, FATURADO:{bg:'#b6dafb',c:'#0b3c8c'}, PRODUZINDO:{bg:'#c2e7b0',c:'#1f5f1a'}, PARADA:{bg:'#ffcece',c:'#7a1a1a'}, SETUP:{bg:'#ffe0a3',c:'#7a4500'} };
function Pill({ s }) {
  const p = SPILLS[s] || { bg:'#eee', c:'#333' };
  return <span style={{ display:'inline-block', padding:'1px 6px', borderRadius:2, background:p.bg, color:p.c, fontSize:10, fontWeight:600 }}>{s}</span>;
}

// ════════════════════════════════════════════════════════════════════
//  VENDAS — Pedido de Venda (lista + detalhe do pedido)
// ════════════════════════════════════════════════════════════════════
const VENDAS_ROWS = [
  { num:'5701', ver:'60',  cli:'FUNDICAO METALURGICA JMS LTDA ME',  status:'APROVADO', sep:'AGUARDANDO', tipo:'FECHADO', valor:'50,00',     bg:'#d5f0b6', vend:'J. VIEIRA',  cfop:'5101', dt:'02/05/26' },
  { num:'5699', ver:'307', cli:'SUPREMETAL LTDA.',                   status:'PENDENTE',  sep:'AGUARDANDO', tipo:'FECHADO', valor:'14.892,40', bg:'#fff7c9', vend:'R. ALMEIDA', cfop:'5102', dt:'02/05/26' },
  { num:'5698', ver:'60',  cli:'FUNDICAO METALURGICA JMS LTDA ME',  status:'APROVADO', sep:'AGUARDANDO', tipo:'FECHADO', valor:'1.000,00',  bg:'#fff', vend:'J. VIEIRA',  cfop:'5101', dt:'03/05/26' },
  { num:'5694', ver:'76',  cli:'VALEO SISTEMAS AUTOMOTIVOS LTDA',   status:'APROVADO', sep:'AGUARDANDO', tipo:'FECHADO', valor:'285,60',    bg:'#fff', vend:'M. REIS',    cfop:'6101', dt:'03/05/26' },
  { num:'5692', ver:'60',  cli:'FUNDICAO METALURGICA JMS LTDA ME',  status:'APROVADO', sep:'AGUARDANDO', tipo:'FECHADO', valor:'7,25',      bg:'#fff', vend:'J. VIEIRA',  cfop:'5101', dt:'04/05/26' },
  { num:'5689', ver:'76',  cli:'VALEO SISTEMAS AUTOMOTIVOS LTDA',   status:'APROVADO', sep:'SEPARADO',   tipo:'FECHADO', valor:'17.850,00', bg:'#cfe6ff', vend:'J. VIEIRA',  cfop:'6101', dt:'06/05/26' },
  { num:'5687', ver:'60',  cli:'FUNDICAO METALURGICA JMS LTDA ME',  status:'APROVADO', sep:'AGUARDANDO', tipo:'ABERTO',  valor:'0,00',      bg:'#fff', vend:'R. ALMEIDA', cfop:'5101', dt:'06/05/26' },
  { num:'5686', ver:'60',  cli:'FUNDICAO METALURGICA JMS LTDA ME',  status:'APROVADO', sep:'AGUARDANDO', tipo:'FECHADO', valor:'44,00',     bg:'#fff', vend:'M. REIS',    cfop:'5101', dt:'07/05/26' },
];
const VENDAS_ITENS = {
  '5689': [
    { p:'AC-22H-1500CT', d:'AREIA COBERTA AC-22 H',      un:'KG', qtd:'1.200,0000', pr:'8,50',  tot:'10.200,00' },
    { p:'TPR-0034',      d:'TAMPAO S/ ROSCA 3/4P',       un:'PC', qtd:'500,0000',   pr:'9,30',  tot:'4.650,00'  },
    { p:'700.00003',     d:'PRODUTO INJETADO PA-12',     un:'UN', qtd:'300,0000',   pr:'10,00', tot:'3.000,00'  },
  ],
};
const VENDAS_ITENS_DEFAULT = [
  { p:'700.00003', d:'PRODUTO INJETADO PA-12', un:'UN', qtd:'5,0000', pr:'10,00', tot:'50,00' },
];

function VendasDetail({ row, onBack }) {
  const itens = VENDAS_ITENS[row.num] || VENDAS_ITENS_DEFAULT;
  return (
    <div style={{ background:'#fff' }}>
      <BackLink onClick={onBack}>Pedido nº {row.num}</BackLink>
      <div style={{ padding:'12px 14px', display:'flex', flexWrap:'wrap', gap:12, borderBottom:'1px solid #e6e8ec', background:'#f7f8fa' }}>
        <Field label="Pedido" value={row.num} w={70}/>
        <Field label="Versão" value={row.ver} w={56}/>
        <Field label="Cliente" value={row.cli} w={240}/>
        <Field label="Vendedor" value={row.vend} w={110}/>
        <Field label="CFOP" value={row.cfop} w={60}/>
        <Field label="Emissão" value={row.dt} w={84}/>
        <Field label="Status" value={<Pill s={row.status}/>} w={96}/>
        <Field label="Separação" value={<Pill s={row.sep}/>} w={104}/>
        <Field label="Tipo" value={<Pill s={row.tipo}/>} w={84}/>
      </div>
      <div style={{ padding:'8px 14px 4px', fontSize:11, fontWeight:700, color:'#50566a' }}>Itens do pedido</div>
      <div style={{ overflow:'auto', maxHeight:200, padding:'0 8px' }}>
        <table style={{ width:'100%', borderCollapse:'collapse', fontSize:11 }}>
          <thead><tr>{[['Produto',110],['Descrição',null],['Un',46],['Quantidade',96],['Preço un.',80],['Total',96]].map(([h,w])=>erpTh(h,w))}</tr></thead>
          <tbody>
            {itens.map((it,i) => (
              <tr key={i} style={{ background:i%2?'#f7faff':'#fff' }}>
                {erpTd(it.p, { color:'#0b58c9' })}
                {erpTd(it.d)}
                {erpTd(it.un)}
                {erpTd(it.qtd, { textAlign:'right', fontFamily:'monospace' })}
                {erpTd(it.pr, { textAlign:'right', fontFamily:'monospace' })}
                {erpTd(it.tot, { textAlign:'right', fontFamily:'monospace', fontWeight:600 })}
              </tr>
            ))}
          </tbody>
        </table>
      </div>
      <div style={{ display:'flex', justifyContent:'flex-end', gap:24, padding:'10px 18px', borderTop:'1px solid #e6e8ec', background:'#f7f8fa', fontSize:11.5 }}>
        <span>Itens: <b>{itens.length}</b></span>
        <span>Total mercadorias: <b style={{ color:'#1f5f1a' }}>R$ {row.valor}</b></span>
      </div>
    </div>
  );
}

function VendasMock() {
  const [open, setOpen] = useState(null);
  const [fAprov, setFAprov] = useState(true);
  const [fPend, setFPend] = useState(true);
  const rows = VENDAS_ROWS.filter(r => (fAprov || r.status !== 'APROVADO') && (fPend || r.status !== 'PENDENTE'));
  const RIBBON = [
    { label:'Parâmetros', items:[{icon:'⚙',label:'Parâmetros',color:'#555'},{icon:'📋',label:'Pol. Comercial',color:'#0b3c8c'}] },
    { label:'Tabela de Preço', items:[{icon:'💰',label:'Preço Venda',color:'#1f5f1a'},{icon:'📊',label:'Preço Segmento',color:'#0b3c8c'}] },
    { label:'Pedidos', items:[{icon:'📝',label:'Pedido (Compl.)',color:'#7a4500'},{icon:'📅',label:'Programação',color:'#0b3c8c'},{icon:'👥',label:'Carteira',color:'#555'}] },
    { label:'Análise', items:[{icon:'🔍',label:'Análise Ped.',color:'#0b3c8c'},{icon:'📦',label:'Desmembrados',color:'#555'}] },
  ];
  return (
    <ErpWindow appTitle="(VE) Pedido de Venda" moduleTab="Vendas" ribbonGroups={RIBBON}
      docTabs={[{label:'(PD) Acompanhamento de Produção',active:false},{label:'(VE) Pedido de Venda',active:true}]}
      statusLeft="Usuário: LUCAS MUNIZ DE OLIVEIRA  |  Estabelecimento: 1 - APRESENTACAO">
      {open
        ? <VendasDetail row={open} onBack={() => setOpen(null)} />
        : <div style={{ display:'flex', background:'#fff', maxHeight:380, overflow:'hidden' }}>
            <div style={{ flex:1, overflow:'auto' }}>
              <div style={{ padding:'5px 10px', fontSize:10.5, color:'#50566a', borderBottom:'1px solid #eef0f3', background:'#fbfcfd' }}>💡 Clique em um pedido para abrir os itens</div>
              <table style={{ width:'100%', borderCollapse:'collapse', fontSize:11 }}>
                <thead><tr>{[['Número',70],['Versão',54],['Cliente',null],['Status',90],['Status Sep.',100],['Tipo pedido',90],['Valor merc.',90]].map(([h,w])=>erpTh(h,w))}</tr></thead>
                <tbody>
                  {rows.map(r => (
                    <tr key={r.num} onClick={() => setOpen(r)} style={{ background:r.bg, cursor:'pointer' }}
                      onMouseEnter={e=>e.currentTarget.style.outline='1px solid #0b58c9'} onMouseLeave={e=>e.currentTarget.style.outline='none'}>
                      {erpTd(r.num, { color:'#0b58c9', textDecoration:'underline' })}
                      {erpTd(r.ver)}
                      {erpTd(r.cli, { maxWidth:220, overflow:'hidden', textOverflow:'ellipsis' })}
                      {erpTd(<Pill s={r.status}/>)}
                      {erpTd(<Pill s={r.sep}/>)}
                      {erpTd(<Pill s={r.tipo}/>)}
                      {erpTd(r.valor, { textAlign:'right', fontFamily:'monospace' })}
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
            <div style={{ width:160, background:'#f7f8fa', borderLeft:'1px solid #c5c9d0', padding:'10px 12px', flexShrink:0, fontSize:11 }}>
              <div style={{ fontWeight:700, fontSize:10.5, color:'#50566a', textTransform:'uppercase', marginBottom:8 }}>Filtros</div>
              <div style={{ fontWeight:600, fontSize:10.5, margin:'6px 0' }}>Status</div>
              {[['Aprovado',fAprov,setFAprov],['Pendente',fPend,setFPend],['Em análise',false,()=>{}],['Cancelado',false,()=>{}]].map(([lbl,val,fn])=>(
                <div key={lbl} onClick={()=>fn(!val)} style={{ display:'flex', alignItems:'center', gap:6, marginBottom:5, cursor:'pointer' }}>
                  <div style={{ width:11, height:11, border:'1px solid #8a8f9b', background:val?'#0b3c8c':'#fff', boxShadow:val?'inset 0 0 0 2px #fff':'' }}/>
                  <span>{lbl}</span>
                </div>
              ))}
              <div style={{ marginTop:14, fontSize:10.5, color:'#50566a' }}>{rows.length} de {VENDAS_ROWS.length} registros</div>
            </div>
          </div>}
    </ErpWindow>
  );
}

// ════════════════════════════════════════════════════════════════════
//  COMPRAS — Solicitação de Compra (lista + detalhe)
// ════════════════════════════════════════════════════════════════════
const SC_ROWS = [
  { num:'6792', dt:'12/05/26', sol:'HINO.MUNIZ',   status:'EM ABERTO',      itens:3, val:'2.480,00' },
  { num:'6791', dt:'12/05/26', sol:'R. ALMEIDA',   status:'NÍVEL 1',        itens:1, val:'870,00'   },
  { num:'6788', dt:'11/05/26', sol:'M. REIS',      status:'APROV. PARCIAL', itens:5, val:'13.250,00'},
  { num:'6785', dt:'10/05/26', sol:'HINO.MUNIZ',   status:'APROVADO',       itens:2, val:'4.100,00' },
  { num:'6781', dt:'09/05/26', sol:'J. VIEIRA',    status:'APROVADO',       itens:4, val:'9.640,00' },
];
const SC_ITENS = {
  '6792': [
    { p:'AC-22H-1500CT', d:'AREIA COBERTA AC-22 H', un:'KG', orig:'20,0000', aprov:'20,0000', prev:'19/05/26', cc:'301 - FUNDIÇÃO' },
    { p:'FESI-75',       d:'FERRO SILÍCIO FeSi 75%', un:'KG', orig:'500,0000', aprov:'500,0000', prev:'21/05/26', cc:'301 - FUNDIÇÃO' },
    { p:'EPI-BOT-42',    d:'BOTINA DE SEGURANÇA RASPA', un:'PAR', orig:'6,0000', aprov:'6,0000', prev:'16/05/26', cc:'500 - SEGURANÇA' },
  ],
};
const SC_ITENS_DEFAULT = [
  { p:'AC-22H-1500CT', d:'AREIA COBERTA AC-22 H', un:'KG', orig:'20,0000', aprov:'20,0000', prev:'19/05/26', cc:'301 - FUNDIÇÃO' },
];

function ComprasDetail({ row, onBack }) {
  const [tab, setTab] = useState('Observação');
  const itens = SC_ITENS[row.num] || SC_ITENS_DEFAULT;
  const txt = { 'Observação':'Material para reposição de linha — prioridade conforme data prevista.', 'Aplicação':'Linha de fundição / moldagem em casca (shell molding).', 'Motivo':'Saldo abaixo do estoque mínimo apontado pelo MRP.' };
  return (
    <div style={{ background:'#fff' }}>
      <BackLink onClick={onBack}>Solicitação nº {row.num}</BackLink>
      <div style={{ padding:'12px 14px', display:'flex', flexWrap:'wrap', gap:12, borderBottom:'1px solid #e6e8ec', background:'#f7f8fa' }}>
        <Field label="Solicitação" value={row.num} w={70}/>
        <Field label="Data" value={row.dt} w={84}/>
        <Field label="Solicitante" value={row.sol} w={130}/>
        <Field label="Status" value={<Pill s={row.status}/>} w={120}/>
        <Field label="Valor estimado" value={`R$ ${row.val}`} w={110}/>
      </div>
      <div style={{ padding:'8px 14px 4px', fontSize:11, fontWeight:700, color:'#50566a' }}>Itens da solicitação</div>
      <div style={{ overflow:'auto', maxHeight:160, padding:'0 8px' }}>
        <table style={{ width:'100%', borderCollapse:'collapse', fontSize:11 }}>
          <thead><tr>{[['Produto',120],['Descrição',null],['Un',44],['Qtd. Orig.',86],['Qtd. Aprov.',86],['Prev. Entr.',86],['Centro de Custo',140]].map(([h,w])=>erpTh(h,w))}</tr></thead>
          <tbody>
            {itens.map((it,i) => (
              <tr key={i} style={{ background:i%2?'#f7faff':'#fff' }}>
                {erpTd(it.p, { color:'#0b58c9' })}
                {erpTd(it.d)}
                {erpTd(it.un)}
                {erpTd(it.orig, { textAlign:'right', fontFamily:'monospace' })}
                {erpTd(it.aprov, { textAlign:'right', fontFamily:'monospace' })}
                {erpTd(it.prev)}
                {erpTd(it.cc)}
              </tr>
            ))}
          </tbody>
        </table>
      </div>
      <div style={{ borderTop:'1px solid #e6e8ec', marginTop:6 }}>
        <div style={{ display:'flex', gap:1, padding:'0 8px', background:'#ecf0f5' }}>
          {['Observação','Aplicação','Motivo'].map(t => (
            <div key={t} onClick={()=>setTab(t)} style={{ padding:'5px 14px', fontSize:11, cursor:'pointer', background:tab===t?'#fff':'transparent', borderBottom:tab===t?'2px solid #0b3c8c':'2px solid transparent', color:tab===t?'#0b3c8c':'#2a2f3a', fontWeight:tab===t?600:400 }}>{t}</div>
          ))}
        </div>
        <div style={{ padding:'12px 16px', fontSize:11.5, color:'#2a2f3a', minHeight:48, background:'#fff' }}>{txt[tab]}</div>
      </div>
    </div>
  );
}

function ComprasMock() {
  const [open, setOpen] = useState(null);
  const RIBBON = [
    { label:'Cadastros', items:[{icon:'📝',label:'Solic. Compra',color:'#0b3c8c'},{icon:'📑',label:'Cotação',color:'#7a4500'},{icon:'🛒',label:'Pedido Compra',color:'#1f5f1a'}] },
    { label:'Aprovação', items:[{icon:'✔',label:'Aprovar',color:'#1f5f1a'},{icon:'✘',label:'Reprovar',color:'#b91c1c'},{icon:'📊',label:'Por Nível',color:'#0b3c8c'}] },
    { label:'Análise', items:[{icon:'🔍',label:'Acompanhar',color:'#0b3c8c'},{icon:'💲',label:'Mapa Cotação',color:'#555'}] },
  ];
  return (
    <ErpWindow appTitle="(CP) Solicitação de Compras" moduleTab="Compras" ribbonGroups={RIBBON}
      docTabs={[{label:'(CP) Solicitação de Compras',active:true},{label:'(CP) Mapa de Cotação',active:false}]}
      statusLeft="Usuário: HINO.MUNIZ  |  Estabelecimento: 1 - APRESENTACAO">
      {open
        ? <ComprasDetail row={open} onBack={() => setOpen(null)} />
        : <div style={{ background:'#fff', maxHeight:380, overflow:'auto' }}>
            <div style={{ padding:'5px 10px', fontSize:10.5, color:'#50566a', borderBottom:'1px solid #eef0f3', background:'#fbfcfd' }}>💡 Clique numa solicitação para ver itens, centro de custo e observações · MENU » COMPRAS » Cadastros » Solicitação de Compra</div>
            <table style={{ width:'100%', borderCollapse:'collapse', fontSize:11 }}>
              <thead><tr>{[['Número',80],['Data',90],['Solicitante',null],['Status',130],['Itens',60],['Valor est. (R$)',110]].map(([h,w])=>erpTh(h,w))}</tr></thead>
              <tbody>
                {SC_ROWS.map(r => (
                  <tr key={r.num} onClick={() => setOpen(r)} style={{ cursor:'pointer', background:'#fff' }}
                    onMouseEnter={e=>e.currentTarget.style.background='#eaf2ff'} onMouseLeave={e=>e.currentTarget.style.background='#fff'}>
                    {erpTd(r.num, { color:'#0b58c9', textDecoration:'underline' })}
                    {erpTd(r.dt)}
                    {erpTd(r.sol)}
                    {erpTd(<Pill s={r.status}/>)}
                    {erpTd(r.itens, { textAlign:'center' })}
                    {erpTd(r.val, { textAlign:'right', fontFamily:'monospace' })}
                  </tr>
                ))}
              </tbody>
            </table>
          </div>}
    </ErpWindow>
  );
}

// ════════════════════════════════════════════════════════════════════
//  ESTOQUE — Saldo de Estoque (lista + detalhe: locais / endereços / Kardex)
// ════════════════════════════════════════════════════════════════════
const EST_ROWS = [
  { p:'TPR-0034',  d:'TAMPAO S/ ROSCA 3/4P',      um:'PC', local:'ALMOX', saldo:'43,0000',     res:'10,0000',  disp:'33,0000',     cap:'200' },
  { p:'CXP-AZ-01', d:'CAIXA PLÁSTICA AZUL',        um:'UN', local:'ALMOX', saldo:'59.580,0000', res:'0,0000',   disp:'59.580,0000', cap:'80.000' },
  { p:'100.00001', d:'PVC BASE',                   um:'KG', local:'ALMOX', saldo:'7.250,0000',  res:'7,2000',   disp:'7.242,8000',  cap:'10.000' },
  { p:'200.00002', d:'GALHO MOÍDO',                um:'KG', local:'PROC',  saldo:'318,0000',    res:'1,8000',   disp:'316,2000',    cap:'500' },
  { p:'700.00003', d:'PRODUTO INJETADO PA-12',     um:'UN', local:'PA',    saldo:'1.240,0000',  res:'300,0000', disp:'940,0000',    cap:'2.000' },
  { p:'EPI-BOT-42',d:'BOTINA DE SEGURANÇA RASPA',  um:'PAR',local:'ALMOX', saldo:'12,0000',    res:'0,0000',   disp:'12,0000',     cap:'50' },
];
const EST_LOCAIS = {
  'TPR-0034': [
    { loc:'ALMOX', desc:'ALMOXARIFADO',  saldo:'43,0000',  res:'10,0000', disp:'33,0000' },
    { loc:'INSP',  desc:'INSPEÇÃO',      saldo:'5,0000',   res:'0,0000',  disp:'5,0000'  },
    { loc:'PROC',  desc:'PROCESSO',      saldo:'0,0000',   res:'0,0000',  disp:'0,0000'  },
  ],
};
const EST_ENDER = {
  'TPR-0034': [
    { end:'RUA 1 · PRAT A · POS 01', tipo:'PRATELEIRA', lote:'L-2405-12', qtd:'25,0000' },
    { end:'RUA 1 · PRAT A · POS 02', tipo:'PRATELEIRA', lote:'L-2405-19', qtd:'18,0000' },
  ],
};
const EST_KARDEX = {
  'TPR-0034': [
    { dt:'12/05/26', tipo:'Transferência Interna', doc:'ALMOX→PROC', ent:'',        sai:'10,0000', sld:'33,0000' },
    { dt:'10/05/26', tipo:'Entrada NF',            doc:'NF 84.213',   ent:'30,0000', sai:'',        sld:'43,0000' },
    { dt:'08/05/26', tipo:'Ajuste de Estoque',     doc:'AJ 1180',     ent:'',        sai:'3,0000',  sld:'13,0000' },
    { dt:'02/05/26', tipo:'Consumo OP',            doc:'OP 17939',    ent:'',        sai:'7,0000',  sld:'16,0000' },
  ],
};
function EstoqueDetail({ row, onBack }) {
  const [tab, setTab] = useState('locais');
  const locais = EST_LOCAIS[row.p] || [{ loc:row.local, desc:row.local, saldo:row.saldo, res:row.res, disp:row.disp }];
  const ender = EST_ENDER[row.p] || [{ end:'RUA 1 · PRAT A · POS 01', tipo:'PRATELEIRA', lote:'—', qtd:row.saldo }];
  const kardex = EST_KARDEX[row.p] || [{ dt:'10/05/26', tipo:'Entrada NF', doc:'NF 84.000', ent:row.saldo, sai:'', sld:row.saldo }];
  return (
    <div style={{ background:'#fff' }}>
      <BackLink onClick={onBack}>{row.p} · {row.d}</BackLink>
      <div style={{ padding:'12px 14px', display:'flex', flexWrap:'wrap', gap:12, borderBottom:'1px solid #e6e8ec', background:'#f7f8fa' }}>
        <Field label="Produto" value={row.p} w={110}/>
        <Field label="Descrição" value={row.d} w={210}/>
        <Field label="UM" value={row.um} w={50}/>
        <Field label="Saldo total" value={row.saldo} w={110}/>
        <Field label="Reservado" value={row.res} w={100}/>
        <Field label="Disponível" value={<b style={{ color:'#1f5f1a' }}>{row.disp}</b>} w={110}/>
      </div>
      <div style={{ display:'flex', gap:1, padding:'0 8px', background:'#ecf0f5', borderBottom:'1px solid #c5c9d0' }}>
        {[['locais','Saldos por local'],['ender','Endereços (3D)'],['kardex','Kardex']].map(([id,l]) => (
          <div key={id} onClick={()=>setTab(id)} style={{ padding:'6px 14px', fontSize:11.5, cursor:'pointer', background:tab===id?'#fff':'transparent', borderBottom:tab===id?'2px solid #0b3c8c':'2px solid transparent', color:tab===id?'#0b3c8c':'#2a2f3a', fontWeight:tab===id?600:400, marginBottom:-1 }}>{l}</div>
        ))}
      </div>
      <div style={{ overflow:'auto', maxHeight:210, padding:'0 8px' }}>
        {tab==='locais' && (
          <table style={{ width:'100%', borderCollapse:'collapse', fontSize:11 }}>
            <thead><tr>{[['Local',90],['Descrição',null],['Saldo',100],['Reservado',100],['Disponível',100]].map(([h,w])=>erpTh(h,w))}</tr></thead>
            <tbody>{locais.map((l,i)=>(<tr key={i} style={{ background:i%2?'#f7faff':'#fff' }}>{erpTd(l.loc,{fontWeight:600})}{erpTd(l.desc)}{erpTd(l.saldo,{textAlign:'right',fontFamily:'monospace'})}{erpTd(l.res,{textAlign:'right',fontFamily:'monospace'})}{erpTd(l.disp,{textAlign:'right',fontFamily:'monospace',color:'#1f5f1a'})}</tr>))}</tbody>
          </table>
        )}
        {tab==='ender' && (
          <table style={{ width:'100%', borderCollapse:'collapse', fontSize:11 }}>
            <thead><tr>{[['Endereço físico',null],['Tipo',120],['Lote',110],['Qtd.',100]].map(([h,w])=>erpTh(h,w))}</tr></thead>
            <tbody>{ender.map((e,i)=>(<tr key={i} style={{ background:i%2?'#f7faff':'#fff' }}>{erpTd(e.end,{fontWeight:600,color:'#0b58c9'})}{erpTd(e.tipo)}{erpTd(e.lote)}{erpTd(e.qtd,{textAlign:'right',fontFamily:'monospace'})}</tr>))}</tbody>
          </table>
        )}
        {tab==='kardex' && (
          <table style={{ width:'100%', borderCollapse:'collapse', fontSize:11 }}>
            <thead><tr>{[['Data',86],['Movimento',null],['Documento',120],['Entrada',90],['Saída',90],['Saldo',90]].map(([h,w])=>erpTh(h,w))}</tr></thead>
            <tbody>{kardex.map((k,i)=>(<tr key={i} style={{ background:i%2?'#f7faff':'#fff' }}>{erpTd(k.dt)}{erpTd(k.tipo)}{erpTd(k.doc,{color:'#0b58c9'})}{erpTd(k.ent,{textAlign:'right',fontFamily:'monospace',color:'#1f5f1a'})}{erpTd(k.sai,{textAlign:'right',fontFamily:'monospace',color:'#b91c1c'})}{erpTd(k.sld,{textAlign:'right',fontFamily:'monospace',fontWeight:600})}</tr>))}</tbody>
          </table>
        )}
      </div>
    </div>
  );
}
function EstoqueMock() {
  const [open, setOpen] = useState(null);
  const RIBBON = [
    { label:'Consultas', items:[{icon:'📦',label:'Saldo Estoque',color:'#0b3c8c'},{icon:'🏷️',label:'Endereços',color:'#7a4500'},{icon:'📒',label:'Kardex',color:'#555'}] },
    { label:'Movimentações', items:[{icon:'⚖',label:'Ajuste',color:'#b91c1c'},{icon:'🔁',label:'Transferência',color:'#1f5f1a'},{icon:'🧾',label:'Inventário',color:'#0b3c8c'}] },
    { label:'Coletor', items:[{icon:'📱',label:'App Mobile',color:'#9d4edd'},{icon:'📊',label:'Contagem',color:'#555'}] },
  ];
  return (
    <ErpWindow appTitle="(ES) Saldo de Estoque" moduleTab="Estoque" ribbonGroups={RIBBON}
      docTabs={[{label:'(ES) Saldo de Estoque',active:true},{label:'(ES) Endereços de Estoque',active:false}]}
      statusLeft="Usuário: HINO.MUNIZ  |  Estabelecimento: 1 - APRESENTACAO">
      {open
        ? <EstoqueDetail row={open} onBack={() => setOpen(null)} />
        : <div style={{ background:'#fff', maxHeight:380, overflow:'auto' }}>
            <div style={{ padding:'5px 10px', fontSize:10.5, color:'#50566a', borderBottom:'1px solid #eef0f3', background:'#fbfcfd' }}>💡 Clique num produto para ver saldos por local, endereçamento físico 3D e Kardex</div>
            <table style={{ width:'100%', borderCollapse:'collapse', fontSize:11 }}>
              <thead><tr>{[['Produto',100],['Descrição',null],['UM',46],['Local',74],['Saldo',100],['Reservado',96],['Disponível',100],['Capac.',70]].map(([h,w])=>erpTh(h,w))}</tr></thead>
              <tbody>
                {EST_ROWS.map(r => (
                  <tr key={r.p} onClick={() => setOpen(r)} style={{ cursor:'pointer', background:'#fff' }}
                    onMouseEnter={e=>e.currentTarget.style.background='#eaf2ff'} onMouseLeave={e=>e.currentTarget.style.background='#fff'}>
                    {erpTd(r.p, { color:'#0b58c9', textDecoration:'underline' })}
                    {erpTd(r.d, { maxWidth:200, overflow:'hidden', textOverflow:'ellipsis' })}
                    {erpTd(r.um)}
                    {erpTd(r.local, { fontWeight:600 })}
                    {erpTd(r.saldo, { textAlign:'right', fontFamily:'monospace' })}
                    {erpTd(r.res, { textAlign:'right', fontFamily:'monospace' })}
                    {erpTd(r.disp, { textAlign:'right', fontFamily:'monospace', color:'#1f5f1a', fontWeight:600 })}
                    {erpTd(r.cap, { textAlign:'right', color:'#7a8090' })}
                  </tr>
                ))}
              </tbody>
            </table>
          </div>}
    </ErpWindow>
  );
}

// ════════════════════════════════════════════════════════════════════
//  PRODUÇÃO — Apontamento + OEE (lista de OPs + detalhe com paradas)
// ════════════════════════════════════════════════════════════════════
const OEE_MAQ = [
  { m:'INJ-01 · Injetora Arburg 270t', disp:96, perf:97, qual:99, oee:92.4 },
  { m:'INJ-02 · Injetora Engel 180t',  disp:93, perf:95, qual:99, oee:88.1 },
  { m:'PRENSA-A · Schuler 400t',        disp:82, perf:91, qual:99, oee:74.0 },
  { m:'FUND-1 · Fundição alumínio',     disp:76, perf:92, qual:99, oee:69.2 },
];
const OP_ROWS = [
  { op:'17939', prod:'700.00003 · PRODUTO INJETADO PA-12', maq:'INJ-01', prog:'4.000', real:'3.680', ref:'22', status:'PRODUZINDO' },
  { op:'17938', prod:'CXP-AZ-01 · CAIXA PLÁSTICA AZUL',    maq:'INJ-02', prog:'2.200', real:'2.200', ref:'8',  status:'FATURADO'  },
  { op:'17935', prod:'TPR-0034 · TAMPAO S/ ROSCA 3/4P',    maq:'PRENSA-A',prog:'1.200', real:'640',  ref:'14', status:'PARADA'    },
  { op:'17931', prod:'700.00009 · SUPORTE L 90°',          maq:'PRENSA-A',prog:'900',   real:'0',    ref:'0',  status:'SETUP'     },
  { op:'17928', prod:'200.00002 · GALHO MOÍDO',            maq:'FUND-1',  prog:'500',   real:'500',  ref:'31', status:'FATURADO'  },
];
const OP_APONT = {
  '17939': [
    { ini:'06/05 14:02', fim:'06/05 15:40', tipo:'Produção', qtd:'1.480', obs:'Turno B' },
    { ini:'06/05 15:55', fim:'06/05 17:20', tipo:'Produção', qtd:'1.320', obs:'Turno B' },
    { ini:'06/05 17:20', fim:'06/05 17:38', tipo:'Parada',   qtd:'—',     obs:'Troca de molde (setup)' },
    { ini:'06/05 17:38', fim:'06/05 18:30', tipo:'Produção', qtd:'880',   obs:'Turno B' },
  ],
};
function OeeBar({ pct, color }) {
  return <div style={{ flex:1, height:8, borderRadius:99, background:'#e6e8ec', overflow:'hidden' }}><div style={{ width:pct+'%', height:'100%', background:color }}/></div>;
}
function ProducaoDetail({ row, onBack }) {
  const ap = OP_APONT[row.op] || [{ ini:'06/05 08:00', fim:'06/05 12:00', tipo:'Produção', qtd:row.real, obs:'Turno A' }];
  return (
    <div style={{ background:'#fff' }}>
      <BackLink onClick={onBack}>OP {row.op}</BackLink>
      <div style={{ padding:'12px 14px', display:'flex', flexWrap:'wrap', gap:12, borderBottom:'1px solid #e6e8ec', background:'#f7f8fa' }}>
        <Field label="Ordem" value={row.op} w={70}/>
        <Field label="Produto" value={row.prod} w={250}/>
        <Field label="Recurso" value={row.maq} w={90}/>
        <Field label="Programado" value={row.prog} w={90}/>
        <Field label="Realizado" value={<b style={{ color:'#1f5f1a' }}>{row.real}</b>} w={90}/>
        <Field label="Refugado" value={<b style={{ color:'#b91c1c' }}>{row.ref}</b>} w={80}/>
        <Field label="Status" value={<Pill s={row.status}/>} w={104}/>
      </div>
      <div style={{ padding:'8px 14px 4px', fontSize:11, fontWeight:700, color:'#50566a' }}>Apontamentos de chão de fábrica (terminal / coletor)</div>
      <div style={{ overflow:'auto', maxHeight:170, padding:'0 8px' }}>
        <table style={{ width:'100%', borderCollapse:'collapse', fontSize:11 }}>
          <thead><tr>{[['Início',110],['Término',110],['Tipo',96],['Qtd.',80],['Observação',null]].map(([h,w])=>erpTh(h,w))}</tr></thead>
          <tbody>
            {ap.map((a,i) => (
              <tr key={i} style={{ background:a.tipo==='Parada'?'#fff1f1':(i%2?'#f7faff':'#fff') }}>
                {erpTd(a.ini)}{erpTd(a.fim)}
                {erpTd(<Pill s={a.tipo==='Parada'?'PARADA':'PRODUZINDO'}/>)}
                {erpTd(a.qtd,{textAlign:'right',fontFamily:'monospace'})}
                {erpTd(a.obs)}
              </tr>
            ))}
          </tbody>
        </table>
      </div>
      <div style={{ padding:'10px 16px', borderTop:'1px solid #e6e8ec', background:'#f7f8fa', fontSize:11.5 }}>
        OEE calculado no lançamento · <b>Disp</b> × <b>Perf</b> × <b>Qual</b> — consumo de MP pela estrutura (BOM) baixado no Kardex automaticamente.
      </div>
    </div>
  );
}
function ProducaoMock() {
  const [open, setOpen] = useState(null);
  const RIBBON = [
    { label:'Produção', items:[{icon:'🏭',label:'Apontamento',color:'#0b3c8c'},{icon:'📋',label:'Ordens (OP)',color:'#7a4500'},{icon:'⏱',label:'Paradas',color:'#b91c1c'}] },
    { label:'OEE', items:[{icon:'📈',label:'Painel O.E.E.',color:'#1f5f1a'},{icon:'⚡',label:'Produtividade',color:'#FF7043'},{icon:'🔧',label:'Acomp. Máq.',color:'#555'}] },
    { label:'Terminal', items:[{icon:'🖥️',label:'Terminal Fábrica',color:'#9d4edd'},{icon:'📱',label:'Coletor',color:'#555'}] },
  ];
  return (
    <ErpWindow appTitle="(PD) Apontamento de Produção · O.E.E." moduleTab="Produção" ribbonGroups={RIBBON}
      docTabs={[{label:'(PD) Apontamento de Produção',active:true},{label:'(PD) Painel O.E.E.',active:false}]}
      statusLeft="Usuário: HINO.MUNIZ  |  Estabelecimento: 1 - APRESENTACAO  |  Turno B">
      {open
        ? <ProducaoDetail row={open} onBack={() => setOpen(null)} />
        : <div style={{ background:'#fff', maxHeight:380, overflow:'auto' }}>
            <div style={{ padding:'10px 12px', borderBottom:'1px solid #e6e8ec', background:'#f7f8fa' }}>
              <div style={{ fontSize:10.5, fontWeight:700, color:'#50566a', textTransform:'uppercase', marginBottom:8 }}>OEE por recurso — tempo real (Disponibilidade × Performance × Qualidade)</div>
              {OEE_MAQ.map(o => (
                <div key={o.m} style={{ display:'grid', gridTemplateColumns:'180px 1fr 52px', gap:10, alignItems:'center', marginBottom:6, fontSize:11 }}>
                  <span style={{ whiteSpace:'nowrap', overflow:'hidden', textOverflow:'ellipsis' }}>{o.m}</span>
                  <OeeBar pct={o.oee} color={o.oee>=85?'#1f9e54':o.oee>=70?'#e08e0b':'#d23b3b'}/>
                  <span style={{ textAlign:'right', fontFamily:'monospace', fontWeight:700, color:o.oee>=85?'#1f7a44':o.oee>=70?'#7a4500':'#b91c1c' }}>{o.oee.toFixed(1)}%</span>
                </div>
              ))}
            </div>
            <div style={{ padding:'5px 10px', fontSize:10.5, color:'#50566a', borderBottom:'1px solid #eef0f3', background:'#fbfcfd' }}>💡 Clique numa ordem de produção para ver apontamentos e paradas</div>
            <table style={{ width:'100%', borderCollapse:'collapse', fontSize:11 }}>
              <thead><tr>{[['OP',64],['Produto',null],['Recurso',86],['Program.',80],['Realiz.',80],['Refugo',70],['Status',104]].map(([h,w])=>erpTh(h,w))}</tr></thead>
              <tbody>
                {OP_ROWS.map(r => (
                  <tr key={r.op} onClick={() => setOpen(r)} style={{ cursor:'pointer', background:'#fff' }}
                    onMouseEnter={e=>e.currentTarget.style.background='#eaf2ff'} onMouseLeave={e=>e.currentTarget.style.background='#fff'}>
                    {erpTd(r.op, { color:'#0b58c9', textDecoration:'underline' })}
                    {erpTd(r.prod, { maxWidth:220, overflow:'hidden', textOverflow:'ellipsis' })}
                    {erpTd(r.maq)}
                    {erpTd(r.prog, { textAlign:'right', fontFamily:'monospace' })}
                    {erpTd(r.real, { textAlign:'right', fontFamily:'monospace', color:'#1f5f1a' })}
                    {erpTd(r.ref, { textAlign:'right', fontFamily:'monospace', color:'#b91c1c' })}
                    {erpTd(<Pill s={r.status}/>)}
                  </tr>
                ))}
              </tbody>
            </table>
          </div>}
    </ErpWindow>
  );
}

// ════════════════════════════════════════════════════════════════════
//  MPS / MRP (planejamento)
// ════════════════════════════════════════════════════════════════════
const MRP_ROWS = [
  { prod:'000002',cod:'21058',seq:'1',dt:'01/01/...',nec:'0', solic:'0',  prog:'1',  saldo:'0',aceite:'0', sldA:'1',  desc:'RUCULA',      bg:'#fff' },
  { prod:'000003',cod:'21061',seq:'1',dt:'01/01/...',nec:'0', solic:'100',prog:'14', saldo:'0',aceite:'14',sldA:'14', desc:'IOGURTE...',   bg:'#fff7c9' },
  { prod:'000007',cod:'21675',seq:'1',dt:'15/01/...',nec:'0', solic:'100',prog:'10', saldo:'0',aceite:'110',sldA:'110',desc:'PA. SEXT...', bg:'#fff7c9' },
  { prod:'000008',cod:'24396',seq:'1',dt:'14/09/...',nec:'0', solic:'5',  prog:'25', saldo:'0',aceite:'30',sldA:'30', desc:'SILICONE...', bg:'#fff7c9' },
  { prod:'000008',cod:'22309',seq:'2',dt:'24/05/...',nec:'0', solic:'1',  prog:'0',  saldo:'0',aceite:'31',sldA:'31', desc:'SILICONE...', bg:'#fff7c9' },
  { prod:'000008',cod:'21144',seq:'3',dt:'11/02/...',nec:'0', solic:'6',  prog:'0',  saldo:'0',aceite:'37',sldA:'37', desc:'SILICONE...', bg:'#fff7c9' },
];
function MrpMock() {
  const [mrpTab, setMrpTab] = useState('mps');
  const [mpsF, setMpsF] = useState('todos');
  const rows = mrpTab === 'mrp' ? MRP_ROWS.filter(r => r.seq === '1') : MRP_ROWS;
  const RIBBON = [
    { label:'Compras',  items:[{icon:'🛒',label:'Compras',color:'#0b3c8c'},{icon:'📄',label:'Faturamento',color:'#7a4500'}] },
    { label:'Produção', items:[{icon:'⚡',label:'Produtividade',color:'#FF7043'},{icon:'📈',label:'Eficiência OEE',color:'#1f5f1a'},{icon:'📋',label:'Painel O.E.E.',color:'#0b3c8c'}] },
    { label:'Vendas',   items:[{icon:'💰',label:'Vendas',color:'#9d4edd'},{icon:'🎯',label:'Metas',color:'#555'}] },
    { label:'Curva ABC',items:[{icon:'📉',label:'Curva ABC',color:'#0b3c8c'}] },
  ];
  const th = l => <th key={l} style={{ background:'linear-gradient(180deg,#f3f5f8,#e0e4ec)', borderRight:'1px solid #c5c9d0', borderBottom:'1px solid #aab0bc', padding:'3px 7px', textAlign:'left', fontWeight:600, fontSize:10, whiteSpace:'nowrap' }}>{l}</th>;
  const td = (v, extra={}) => <td style={{ padding:'2px 7px', borderRight:'1px solid #e6e8ec', borderBottom:'1px solid #e6e8ec', fontSize:11, ...extra }}>{v}</td>;
  return (
    <ErpWindow appTitle="(PD) Planejamento (MPS / MRP)" moduleTab="Cubos" ribbonGroups={RIBBON}
      docTabs={[{label:'(PD) Planejamento (MPS/MRP)',active:true},{label:'(ES) Saldo Estoque',active:false}]}
      statusLeft="Usuário: HINO.MUNIZ  |  Estabelecimento: 1 - APRESENTACAO">
      <div style={{ background:'#f7f8fa', borderBottom:'1px solid #c5c9d0', padding:'6px 12px', display:'grid', gridTemplateColumns:'1fr 1fr auto', gap:16, fontSize:11 }}>
        <div>
          <div style={{ fontWeight:700, fontSize:10.5, marginBottom:3 }}>MPS</div>
          <div style={{ color:'#555', marginBottom:4 }}>Atualizado em: <b>12/05/2026 13:11:06</b></div>
          {['Todos','Aceite(s)','Efetivado(s)'].map(f => (
            <label key={f} style={{ display:'flex', alignItems:'center', gap:5, cursor:'pointer', marginBottom:2, fontSize:11 }}>
              <input type="radio" readOnly checked={mpsF === f.toLowerCase().replace('(s)','')} onChange={() => setMpsF(f.toLowerCase().replace('(s)',''))} style={{ accentColor:'#0b3c8c' }}/> {f}
            </label>
          ))}
        </div>
        <div>
          <div style={{ fontWeight:700, fontSize:10.5, marginBottom:3 }}>MRP</div>
          <div style={{ color:'#555', marginBottom:4 }}>Atualizado em: <b>12/05/2026 13:11:43</b></div>
          {['Todos','Aceite(s)','Efetivado(s)'].map(f => (
            <label key={f} style={{ display:'flex', alignItems:'center', gap:5, cursor:'pointer', marginBottom:2, fontSize:11 }}>
              <input type="radio" readOnly defaultChecked={f==='Todos'} style={{ accentColor:'#0b3c8c' }}/> {f}
            </label>
          ))}
        </div>
        <div style={{ fontSize:11, lineHeight:1.7 }}>
          <b>Produto:</b> 000002 - RUCULA<br/>
          <b>Estoque mínimo:</b> 0 &nbsp; <b>Máximo:</b> 0<br/>
          <b>Lead time:</b> 0 &nbsp; <b>Lote mínimo:</b> 0
        </div>
      </div>
      <div style={{ background:'#ecf0f5', borderBottom:'1px solid #c5c9d0', display:'flex', padding:'0 8px', gap:1 }}>
        {[['mps','MPS (Plano mestre de produção)'],['mrp','MRP (Necessidade de materiais)'],['mpsxmrp','MPSxMRP']].map(([id,label]) => (
          <div key={id} onClick={() => setMrpTab(id)} style={{ padding:'5px 14px 6px', fontSize:11.5, cursor:'pointer', background:mrpTab===id?'#fff':'transparent', borderBottom:mrpTab===id?'2px solid #0b3c8c':'2px solid transparent', color:mrpTab===id?'#0b3c8c':'#2a2f3a', fontWeight:mrpTab===id?600:400, marginBottom:-1 }}>{label}</div>
        ))}
      </div>
      <div style={{ background:'#fff', overflow:'auto', maxHeight:240 }}>
        <table style={{ width:'100%', borderCollapse:'collapse' }}>
          <thead><tr>{['Efetivar','Produto','Cód. MRP','Seq.','Data com.','Necessid.','Solic. Co.','Prog. Co.','Saldo est.','Aceite','Sld. Aceite','Descrição'].map(th)}</tr></thead>
          <tbody>
            {rows.map((r, i) => (
              <tr key={i} style={{ background:r.bg }}>
                {td(<input type="checkbox" style={{ accentColor:'#0b3c8c' }}/>)}
                {td(r.prod)}{td(r.cod)}{td(r.seq)}{td(r.dt)}
                {td(r.nec, { color:'#0b58c9' })}{td(r.solic, { color:'#0b58c9' })}{td(r.prog, { color:'#0b58c9' })}
                {td(r.saldo)}{td(r.aceite)}{td(r.sldA, { fontWeight:600 })}{td(r.desc)}
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </ErpWindow>
  );
}

// ════════════════════════════════════════════════════════════════════
//  PORTAL BI (dark) — abas por área
// ════════════════════════════════════════════════════════════════════
const BI_AREAS = {
  geral: { label:'Visão Geral', kpis:[
    { label:'FATURAMENTO',      value:'R$ 1,84M', trend:12.3, glow:'#00C896', spark:[8,9,11,10,12,13,14,16] },
    { label:'MARGEM MÉDIA',     value:'32.1%',    trend:1.8,  glow:'#4B9EFF', spark:[28,29,30,30,31,31,32,32] },
    { label:'OEE GLOBAL',       value:'87.4%',    trend:2.1,  glow:'#FF7043', spark:[80,82,84,85,86,86,87,87] },
    { label:'A RECEBER 30D',    value:'R$ 3,8M',  trend:4.1,  glow:'#9B6DFF', spark:[5,7,9,8,11,10,12,12] },
    { label:'GIRO DO ESTOQUE',  value:'6.2x',     trend:0.4,  glow:'#FFB547', spark:[5,5,6,6,6,6,6,6] },
    { label:'INADIMPLÊNCIA',    value:'2.1%',     trend:-0.6, glow:'#FF4B6E', spark:[3,3,2,2,2,2,2,2] },
  ]},
  producao: { label:'Produção', kpis:[
    { label:'OEE GLOBAL',     value:'87.4%',  trend:2.1,  glow:'#FF7043', spark:[80,82,84,85,86,86,87,87] },
    { label:'PRODUÇÃO (UN)',  value:'2,13M',  trend:8.4,  glow:'#00C896', spark:[7,8,9,9,10,11,12,13] },
    { label:'TAXA DE REFUGO', value:'1.8%',   trend:-0.3, glow:'#FF4B6E', spark:[3,3,2,2,2,2,2,2] },
    { label:'OPs ATIVAS',     value:'142',    trend:null, glow:'#4B9EFF', spark:[120,130,128,135,140,141,142,142] },
    { label:'HORAS PARADA',   value:'37h',    trend:-5.2, glow:'#FFB547', spark:[60,55,50,46,42,40,38,37] },
    { label:'DISPONIB.',      value:'94.0%',  trend:0.8,  glow:'#9B6DFF', spark:[90,91,92,92,93,93,94,94] },
  ]},
  vendas: { label:'Vendas', kpis:[
    { label:'FATURAMENTO',   value:'R$ 1,84M', trend:12.3, glow:'#00C896', spark:[8,9,11,10,12,13,14,16] },
    { label:'PEDIDOS',       value:'318',      trend:6.1,  glow:'#4B9EFF', spark:[260,270,285,290,300,310,315,318] },
    { label:'TICKET MÉDIO',  value:'R$ 8,7k',  trend:4.2,  glow:'#9B6DFF', spark:[7,7,8,8,8,8,9,9] },
    { label:'CARTEIRA',      value:'R$ 4,9M',  trend:null, glow:'#FFB547', spark:[4,4,4,5,5,5,5,5] },
    { label:'MARGEM',        value:'32.1%',    trend:1.8,  glow:'#FF7043', spark:[28,29,30,30,31,31,32,32] },
    { label:'CHURN',         value:'1.9%',     trend:-0.4, glow:'#FF4B6E', spark:[3,3,2,2,2,2,2,2] },
  ]},
  estoque: { label:'Estoque', kpis:[
    { label:'GIRO DO ESTOQUE', value:'6.2x',     trend:0.4,  glow:'#FFB547', spark:[5,5,6,6,6,6,6,6] },
    { label:'COBERTURA',       value:'58 dias',  trend:-3.0, glow:'#4B9EFF', spark:[70,68,65,63,61,60,59,58] },
    { label:'VALOR ESTOQUE',   value:'R$ 2,4M',  trend:null, glow:'#00C896', spark:[2,2,2,2,2,2,2,2] },
    { label:'ITENS RUPTURA',   value:'7',        trend:-2.0, glow:'#FF4B6E', spark:[12,11,10,9,9,8,7,7] },
    { label:'ACURACIDADE',     value:'99.1%',    trend:0.2,  glow:'#9B6DFF', spark:[98,98,99,99,99,99,99,99] },
    { label:'RESERVADO',       value:'R$ 318k',  trend:null, glow:'#FF7043', spark:[3,3,3,3,3,3,3,3] },
  ]},
  financeiro: { label:'Financeiro', kpis:[
    { label:'SALDO ATUAL',   value:'R$ 4,2M',  trend:6.2,  glow:'#00C896', spark:[3,3,4,4,4,4,4,4] },
    { label:'A RECEBER 30D', value:'R$ 3,8M',  trend:4.1,  glow:'#4B9EFF', spark:[5,7,9,8,11,10,12,12] },
    { label:'A PAGAR 30D',   value:'R$ 2,9M',  trend:2.8,  glow:'#FF7043', spark:[4,5,6,6,7,7,8,8] },
    { label:'INADIMPLÊNCIA', value:'2.1%',     trend:-0.6, glow:'#FF4B6E', spark:[3,3,2,2,2,2,2,2] },
    { label:'MARGEM DRE',    value:'18.4%',    trend:1.1,  glow:'#9B6DFF', spark:[16,16,17,17,18,18,18,18] },
    { label:'PMR',           value:'42 dias',  trend:-1.5, glow:'#FFB547', spark:[48,47,46,45,44,43,42,42] },
  ]},
};
const BI_ROLES = {
  CEO: [
    {label:'RECEITA LÍQUIDA',value:'R$ 1,72M', sub:'Faturamento via NFs de saída',      trend:11.8,glow:'#00C896'},
    {label:'EBITDA',          value:'R$ 312k',  sub:'Margem operacional do período',     trend:3.4, glow:'#4B9EFF'},
    {label:'OEE GLOBAL',      value:'87.4%',    sub:'Eficiência global de equipamentos', trend:2.1, glow:'#FF7043'},
    {label:'TICKET MÉDIO',    value:'R$ 8,7k',  sub:'Valor médio por pedido de venda',   trend:4.2, glow:'#FFB547'},
  ],
  CFO: [
    {label:'A RECEBER 30D',value:'R$ 3,8M', sub:'Títulos vencendo em 30 dias',   trend:4.1, glow:'#00C896'},
    {label:'A PAGAR 30D',  value:'R$ 2,9M', sub:'Obrigações no período',         trend:2.8, glow:'#FF7043'},
    {label:'SALDO ATUAL',  value:'R$ 4,2M', sub:'Posição consolidada',           trend:6.2, glow:'#4B9EFF'},
    {label:'INADIMPLÊNCIA',value:'2.1%',    sub:'Títulos vencidos sem baixa',    trend:-0.6,glow:'#FF4B6E'},
  ],
  CPO: [
    {label:'OEE GLOBAL',  value:'87.4%',sub:'Disponibilidade × Performance × Qualidade',trend:2.1, glow:'#FF7043'},
    {label:'PRODUÇÃO',    value:'2,13M',sub:'Unidades produzidas no período',           trend:8.4, glow:'#00C896'},
    {label:'REFUGO',      value:'1.8%', sub:'Índice de não-conformidade',               trend:-0.3,glow:'#FF4B6E'},
    {label:'OPs ATIVAS',  value:'142',  sub:'Ordens de produção em andamento',          trend:null,glow:'#4B9EFF'},
  ],
};

function BiPortalMock() {
  const [area, setArea] = useState('geral');
  const [role, setRole] = useState('CEO');
  const cards = BI_ROLES[role];
  const kpis = BI_AREAS[area].kpis;
  const glass = { background:'linear-gradient(180deg,rgba(255,255,255,.025),rgba(255,255,255,.008))', border:'1px solid rgba(255,255,255,.06)', borderRadius:14 };
  const navAreas = [['geral','Visão Geral'],['producao','Produção'],['vendas','Vendas'],['estoque','Estoque'],['financeiro','Financeiro']];
  return (
    <div style={{ borderRadius:14, overflow:'hidden', background:'radial-gradient(circle at 20% 0%,rgba(75,158,255,.1),transparent 40%),radial-gradient(circle at 85% 15%,rgba(0,200,150,.06),transparent 35%),#0e1116', border:'1px solid rgba(255,255,255,.06)', boxShadow:'0 28px 70px rgba(0,0,0,.6)', fontFamily:"Inter,system-ui,sans-serif", color:'#fff', fontSize:13 }}>
      <div style={{ display:'flex', alignItems:'center', gap:12, padding:'10px 18px', borderBottom:'1px solid rgba(255,255,255,.05)', background:'rgba(13,16,24,.7)' }}>
        <div style={{ display:'flex', gap:2 }}>{['–','□','✕'].map(b=><div key={b} style={{width:24,height:16,display:'grid',placeItems:'center',fontSize:10,color:'rgba(255,255,255,.45)'}}>{b}</div>)}</div>
        <div style={{ display:'flex', alignItems:'center', gap:8 }}>
          <div style={{ width:26,height:26,borderRadius:8,background:'linear-gradient(135deg,#0D1E8A,#29ABE2)',display:'grid',placeItems:'center',fontSize:14,fontWeight:700 }}>H</div>
          <div><div style={{ font:'700 13px Inter',letterSpacing:'.01em' }}>Portal Hino</div><div style={{ font:'500 9px Inter',color:'rgba(255,255,255,.38)',letterSpacing:'.1em',textTransform:'uppercase' }}>ERP DASHBOARDS</div></div>
        </div>
        <div style={{ display:'flex', gap:2, marginLeft:12, flexWrap:'wrap' }}>
          {navAreas.map(([id,label])=>(
            <div key={id} onClick={()=>setArea(id)} style={{ fontSize:11.5, cursor:'pointer', color:area===id?'#fff':'rgba(255,255,255,.5)', padding:'5px 10px', borderRadius:7, background:area===id?'rgba(75,158,255,.18)':'transparent', border:area===id?'1px solid rgba(75,158,255,.3)':'1px solid transparent' }}>{label}</div>
          ))}
        </div>
        <div style={{ marginLeft:'auto', display:'flex', gap:8, alignItems:'center' }}>
          <div style={{ padding:'6px 12px', background:'rgba(255,255,255,.04)', border:'1px solid rgba(255,255,255,.08)', borderRadius:8, fontSize:11.5 }}>APRESENTACAO ▾</div>
        </div>
      </div>
      <div style={{ padding:'16px 20px 20px' }}>
        <div style={{ display:'flex', justifyContent:'space-between', alignItems:'flex-end', marginBottom:14 }}>
          <div>
            <div style={{ font:'500 10px Inter', letterSpacing:'.18em', textTransform:'uppercase', color:'rgba(255,255,255,.4)', marginBottom:4 }}>{BI_AREAS[area].label} · Todos os estabelecimentos</div>
            <div style={{ font:'700 22px Inter', letterSpacing:'-.02em' }}>Dashboard · maio de 2026</div>
          </div>
          <button style={{ padding:'8px 16px', background:'rgba(75,158,255,.12)', border:'1px solid rgba(75,158,255,.3)', borderRadius:8, color:'#4B9EFF', font:'600 12px Inter', cursor:'default' }}>⟳ Atualizar dados</button>
        </div>
        <div style={{ font:'600 10px Inter', letterSpacing:'.18em', textTransform:'uppercase', color:'rgba(255,255,255,.28)', marginBottom:10 }}>INDICADORES DO MÊS — {BI_AREAS[area].label}</div>
        <div style={{ ...glass, display:'grid', gridTemplateColumns:'repeat(6,1fr)', overflow:'hidden', marginBottom:14 }}>
          {kpis.map((k, i) => (
            <div key={k.label} style={{ padding:'14px 16px 12px', borderRight:i<5?'1px solid rgba(255,255,255,.055)':'none', position:'relative' }}>
              <div style={{ position:'absolute', top:0, left:0, right:0, height:2, background:`linear-gradient(90deg,${k.glow}70,transparent)` }}/>
              <div style={{ font:'500 8.5px Inter', letterSpacing:'.1em', textTransform:'uppercase', color:'rgba(255,255,255,.36)', marginBottom:7 }}>{k.label}</div>
              <div style={{ font:'600 16px Inter', letterSpacing:'-.01em', fontVariantNumeric:'tabular-nums', lineHeight:1 }}>{k.value}</div>
              <div style={{ display:'flex', justifyContent:'space-between', alignItems:'flex-end', marginTop:8 }}>
                {k.trend != null ? <span style={{ font:'500 9.5px Inter', color:k.trend>=0?'#00C896':'#FF4B6E' }}>{k.trend>0?'▲':'▼'} {Math.abs(k.trend).toFixed(1)}%</span> : <span style={{ font:'500 9.5px Inter', color:'rgba(255,255,255,.25)' }}>—</span>}
                <Sparkline values={k.spark} color={k.glow} width={44} height={16}/>
              </div>
            </div>
          ))}
        </div>
        <div style={{ display:'flex', justifyContent:'space-between', alignItems:'center', marginBottom:12 }}>
          <div style={{ display:'flex', gap:6, alignItems:'center' }}>
            <div style={{ font:'600 10px Inter', letterSpacing:'.14em', textTransform:'uppercase', color:'rgba(255,255,255,.28)', marginRight:6 }}>PAINEL EXECUTIVO</div>
            {[['CEO','Estratégico','#4B9EFF'],['CFO','Financeiro','#00C896'],['CPO','Operacional','#FF7043']].map(([id,desc,col])=>(
              <button key={id} onClick={()=>setRole(id)} style={{ padding:'6px 12px', borderRadius:8, cursor:'pointer', border:`1px solid ${role===id?col+'55':'rgba(255,255,255,.07)'}`, background:role===id?`${col}18`:'rgba(255,255,255,.03)', color:role===id?col:'rgba(255,255,255,.5)', font:'600 11px Inter', display:'flex', alignItems:'center', gap:5 }}>
                {id} <span style={{ font:'400 10px Inter', opacity:.7 }}>{desc}</span>
              </button>
            ))}
          </div>
          <div style={{ font:'500 10px Inter', color:'rgba(255,255,255,.35)' }}>01/01/2026 → 12/05/2026</div>
        </div>
        <div style={{ display:'grid', gridTemplateColumns:'repeat(4,1fr)', gap:10 }}>
          {cards.map(c => (
            <div key={c.label} style={{ ...glass, padding:'16px 16px 14px', position:'relative', overflow:'hidden' }}>
              <div style={{ position:'absolute', top:-30, right:-30, width:90, height:90, borderRadius:'50%', background:`radial-gradient(circle,${c.glow}20,transparent 70%)`, pointerEvents:'none' }}/>
              <div style={{ font:'500 9px Inter', letterSpacing:'.1em', textTransform:'uppercase', color:'rgba(255,255,255,.36)', marginBottom:8 }}>{c.label}</div>
              <div style={{ font:'600 20px Inter', letterSpacing:'-.02em', fontVariantNumeric:'tabular-nums', lineHeight:1 }}>{c.value}</div>
              <div style={{ font:'400 10.5px Inter', color:'rgba(255,255,255,.35)', margin:'5px 0 8px', lineHeight:1.4 }}>{c.sub}</div>
              {c.trend != null && <div style={{ font:'500 10.5px Inter', color:c.trend>=0?'#00C896':'#FF4B6E' }}>{c.trend>0?'▲':'▼'} {Math.abs(c.trend).toFixed(1)}% vs período ant.</div>}
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

// ── Showcase Section ───────────────────────────────────────────────
const MODULES = [
  { id:'vendas',   label:'Vendas' },
  { id:'compras',  label:'Compras' },
  { id:'estoque',  label:'Estoque' },
  { id:'producao', label:'Produção / OEE' },
  { id:'mrp',      label:'MPS / MRP' },
  { id:'bi',       label:'Portal BI' },
];

function ShowcaseSection() {
  const [active, setActive] = useState('vendas');
  const [animKey, setAnimKey] = useState(0);
  function go(id) { setActive(id); setAnimKey(k => k + 1); }
  return (
    <div>
      <div className="showcase-tabs" style={{ marginBottom:28 }}>
        {MODULES.map(m => (
          <button key={m.id} className={active === m.id ? 'on' : ''} onClick={() => go(m.id)}>
            › {m.label}
          </button>
        ))}
      </div>
      <div key={animKey} style={{ animation:'showcaseFadeIn .28s ease' }}>
        {active === 'vendas'   && <VendasMock />}
        {active === 'compras'  && <ComprasMock />}
        {active === 'estoque'  && <EstoqueMock />}
        {active === 'producao' && <ProducaoMock />}
        {active === 'mrp'      && <MrpMock />}
        {active === 'bi'       && <BiPortalMock />}
      </div>
    </div>
  );
}

// ── Mount ──────────────────────────────────────────────────────────
const _root = document.getElementById('demo-root');
if (_root) ReactDOM.createRoot(_root).render(<ShowcaseSection />);