// platform-mock.jsx — detailed JYNX platform UI (catalog + dashboard) for the hero
// Exports to window: PlatformMock

const PM_NAV = [
  ['layout-grid', 'Catálogo', true],
  ['folder-kanban', 'Projetos', false],
  ['chart-line', 'Indicadores', false],
  ['wallet', 'Financeiro', false],
  ['life-buoy', 'Service Desk', false],
];

const PM_SOLUTIONS = [
  ['Pagamento de Notas', 'Financeiro', '4-6 sem', ['Protheus'], 'receipt'],
  ['Admissão Digital', 'RH', '6-8 sem', ['Protheus', 'RM'], 'user-plus'],
  ['Portal de Compras', 'Compras', '4-6 sem', ['Protheus'], 'shopping-cart'],
  ['Central de Serviços', 'TI', '1 sem', ['Fluig'], 'headset'],
];

function PlatformMock() {
  return (
    <div className="pm" role="img" aria-label="Plataforma JYNX">
      {/* window chrome */}
      <div className="pm__chrome">
        <span className="pm__dot" style={{ background: '#FF5F57' }}></span>
        <span className="pm__dot" style={{ background: '#FEBC2E' }}></span>
        <span className="pm__dot" style={{ background: '#28C840' }}></span>
        <div className="pm__url"><Icon name="lock" size={11} /> os.jynx.com.br</div>
      </div>

      <div className="pm__body">
        {/* sidebar */}
        <aside className="pm__side">
          <div className="pm__brand"><JynxMark size={20} color="var(--accent)" /></div>
          {PM_NAV.map(([ic, label, active]) => (
            <div key={label} className={'pm__navi' + (active ? ' is-active' : '')} title={label}>
              <Icon name={ic} size={18} />
            </div>
          ))}
        </aside>

        {/* main */}
        <main className="pm__main">
          <div className="pm__topbar">
            <div>
              <div className="pm__crumb">Catálogo de soluções</div>
              <div className="pm__title">+20 soluções prontas</div>
            </div>
            <div className="pm__search"><Icon name="search" size={14} /><span>Buscar por dor, área ou ERP</span></div>
          </div>

          <div className="pm__filters">
            {['Todas', 'RH', 'Financeiro', 'Compras', 'TI'].map((f, i) => (
              <span key={f} className={'pm__chip' + (i === 0 ? ' is-on' : '')}>{f}</span>
            ))}
          </div>

          <div className="pm__grid">
            {PM_SOLUTIONS.map(([name, area, prazo, erps, ic]) => (
              <div key={name} className="pm__card">
                <div className="pm__cardtop">
                  <span className="pm__cardic"><Icon name={ic} size={16} /></span>
                  <span className="pm__prazo"><Icon name="clock" size={11} /> {prazo}</span>
                </div>
                <div className="pm__cardname">{name}</div>
                <div className="pm__cardarea">{area}</div>
                <div className="pm__erps">{erps.map(e => <span key={e} className="pm__erp">{e}</span>)}</div>
              </div>
            ))}
          </div>
        </main>

        {/* right rail: live tracking */}
        <aside className="pm__rail">
          <div className="pm__railhd">Projeto em andamento</div>
          <div className="pm__proj">
            <div className="pm__projrow">
              <span>Admissão Digital</span>
              <span className="pm__badge">No prazo</span>
            </div>
            <div className="pm__bar"><i style={{ width: '72%' }}></i></div>
            <div className="pm__projmeta">Etapa 3 de 4 · entrega em 9 dias</div>
          </div>

          <div className="pm__railhd">Indicadores</div>
          <div className="pm__kpis">
            <div className="pm__kpi"><b>95%</b><span>chamados no SLA</span></div>
            <div className="pm__kpi"><b>4h</b><span>tempo de admissão</span></div>
          </div>
          <div className="pm__spark">
            {[34, 52, 41, 63, 58, 78, 72, 88].map((h, i) => (
              <i key={i} style={{ height: h + '%' }}></i>
            ))}
          </div>
          <div className="pm__fin">
            <span><Icon name="wallet" size={13} /> Financeiro</span>
            <span className="pm__finok"><Icon name="check" size={12} /> em dia</span>
          </div>
        </aside>
      </div>
    </div>
  );
}

window.PlatformMock = PlatformMock;