// catalog.jsx — /solucoes catalog data + components
// Exports to window: CatalogHero, CatalogGrid, CustomBlock, SOLUTIONS, FILTERS

const FILTERS = ['Todas', 'RH', 'Suprimentos', 'Financeiro', 'TI e Governança', 'Plataforma', 'Outras'];

// slug do nome, igual ao das páginas geradas em /solucoes/<slug>
const _solSlug = (s) => s.normalize('NFD').replace(/[̀-ͯ]/g, '').toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/^-+|-+$/g, '');

// [name, desc, prazo, erps[], category, icon]
const SOLUTIONS = [
  ['Contratação de Profissional', 'Admissão digital de ponta a ponta, do aceite à integração com o ERP.', '6 a 8 semanas', ['Protheus', 'RM'], 'RH', 'user-plus'],
  ['Recrutamento e Seleção', 'Gestão de vagas e candidatos, da abertura até a contratação.', '4 a 6 semanas', [], 'RH', 'user-search'],
  ['Requisição de Vaga', 'Abertura e aprovação de vagas com fluxo padronizado.', '4 semanas', ['Protheus', 'RM'], 'RH', 'clipboard-list'],
  ['Alteração de Cargos e Salários', 'Solicitação e aprovação de mudanças de cargo e salário.', '4 semanas', [], 'RH', 'arrow-up-narrow-wide'],
  ['Solicitação de Desligamento', 'Fluxo de desligamento com aprovações e registro completo.', '4 a 6 semanas', [], 'RH', 'user-minus'],
  ['Avaliação de Colaboradores', 'Ciclos de avaliação de desempenho estruturados e rastreáveis.', '2 a 3 semanas', ['Protheus', 'RM', 'Datasul'], 'RH', 'star'],
  ['Gestão de Hierarquia', 'Estrutura organizacional sempre atualizada e disponível.', '1 semana', [], 'RH', 'network'],
  ['Portal de Compras', 'Da requisição à ordem de compra, com cotação e aprovação.', '4 a 6 semanas', ['Protheus'], 'Suprimentos', 'shopping-cart'],
  ['Solicitação de Contratos', 'Pedido, revisão e aprovação de contratos com histórico.', '4 a 6 semanas', [], 'Suprimentos', 'file-signature'],
  ['Cadastro de Fornecedor', 'Onboarding e homologação de fornecedores sem retrabalho.', '2 a 3 semanas', ['Protheus', 'Winthor'], 'Suprimentos', 'truck'],
  ['Solicitação de EPI e Uniforme', 'Pedidos de EPI e uniforme com controle de entrega.', '4 a 6 semanas', [], 'Suprimentos', 'hard-hat'],
  ['Cadastro de Produtos', 'Criação e aprovação de novos produtos com governança.', '4 semanas', [], 'Suprimentos', 'package'],
  ['Pagamento de Notas', 'Aprovação e pagamento de notas com alçadas e anexos.', '4 a 6 semanas', ['Protheus', 'Consinco', 'Winthor'], 'Financeiro', 'receipt'],
  ['Pagamento Antecipado', 'Solicitação e aprovação de adiantamentos com controle.', '4 a 6 semanas', [], 'Financeiro', 'banknote'],
  ['Portal de Entrada de Notas', 'Recebimento e conferência de notas fiscais em um só lugar.', '4 a 6 semanas', [], 'Financeiro', 'file-input'],
  ['Cadastro de Cliente', 'Registro e aprovação de novos clientes com padronização.', '2 a 3 semanas', [], 'Outras', 'contact'],
  ['Central de Serviços', 'Portal único para chamados e solicitações internas.', '1 semana', [], 'TI e Governança', 'headset'],
  ['Solicitação de Mudança GMUD', 'Gestão de mudanças com aprovação e rastreabilidade.', '1 semana', [], 'TI e Governança', 'git-pull-request'],
  ['Central de Relatórios', 'Relatórios e indicadores dos seus processos, num só painel.', '2 a 3 semanas', [], 'Plataforma', 'chart-no-axes-column'],
  ['Painel de Aprovação em Lote', 'Aprove várias solicitações de uma vez, com visão consolidada.', '2 a 3 semanas', [], 'Plataforma', 'list-checks'],
  ['Intranet Corporativa', 'Comunicação interna e acesso a serviços num só lugar.', '1 semana', [], 'Plataforma', 'layout-panel-top'],
  ['Kanban', 'Quadros visuais para acompanhar demandas e fluxos.', '1 semana', [], 'Plataforma', 'columns-3'],
  ['Timesheet', 'Registro de tempo e apontamentos por projeto.', '4 a 6 semanas', [], 'Outras', 'timer'],
];

function CatalogHero() {
  const L = window.JYNX_LINKS;
  return (
    <section className="cathero">
      <div className="cathero__atmo" aria-hidden="true"></div>
      <div className="wrap cathero__inner">
        <div className="eyebrow" data-reveal>Catálogo de soluções</div>
        <h1 data-reveal style={{ '--reveal-delay': '60ms' }}>
          Soluções prontas para<br />o seu ambiente TOTVS
        </h1>
        <p data-reveal style={{ '--reveal-delay': '120ms' }}>
          Mais de 20 automações que rodam no Fluig, implantam em semanas e são suas para sempre.
          Filtre pela área que mais trava hoje e veja prazo e ERP de cada uma.
        </p>
        <div className="cathero__meta" data-reveal style={{ '--reveal-delay': '180ms' }}>
          <span className="cathero__stat"><b>+20</b> soluções no catálogo</span>
          <span className="cathero__stat">Implantação em <b>semanas</b>, não meses</span>
          <span className="cathero__stat">Sua para <b>sempre</b>, sem lock-in</span>
        </div>
      </div>
    </section>
  );
}

function SolutionCard({ data, delay }) {
  const [name, desc, prazo, erps, cat, icon] = data;
  const L = window.JYNX_LINKS;
  return (
    <article className="sol card" data-reveal style={{ '--reveal-delay': delay + 'ms' }}>
      <div className="sol__top">
        <span className="sol__ic"><Icon name={icon} size={20} /></span>
        <span className="sol__prazo"><Icon name="clock" size={13} /> {prazo}</span>
      </div>
      <h3 className="sol__name">{name}</h3>
      <p className="sol__desc">{desc}</p>
      <div className="sol__foot">
        <div className="sol__erps">
          {erps.length
            ? erps.map(e => <span key={e} className="sol__erp">{e}</span>)
            : <span className="sol__cat">{cat}</span>}
        </div>
        <a href={'/solucoes/' + _solSlug(name)} className="sol__more">Saiba mais <Icon name="arrow-right" size={15} /></a>
      </div>
    </article>
  );
}

function CatalogGrid({ motion }) {
  const [active, setActive] = React.useState('Todas');
  const counts = React.useMemo(() => {
    const c = { Todas: SOLUTIONS.length };
    FILTERS.slice(1).forEach(f => { c[f] = SOLUTIONS.filter(s => s[4] === f).length; });
    return c;
  }, []);
  const list = active === 'Todas' ? SOLUTIONS : SOLUTIONS.filter(s => s[4] === active);
  return (
    <section className="catalog" id="catalogo">
      <div className="catalog__bar">
        <div className="wrap catalog__filters">
          {FILTERS.map(f => (
            <button key={f} className={'chip' + (active === f ? ' chip--on' : '')} onClick={() => setActive(f)}>
              {f} <span className="chip__n">{counts[f]}</span>
            </button>
          ))}
        </div>
      </div>
      <div className="wrap">
        <div className="catalog__grid" key={active}>
          {list.map((s, i) => <SolutionCard key={s[0]} data={s} delay={Math.min(i, 8) * 50} />)}
        </div>
      </div>
    </section>
  );
}

function CustomBlock() {
  const L = window.JYNX_LINKS;
  return (
    <section className="custom section--ink" id="sob-medida">
      <div className="custom__glow" aria-hidden="true"></div>
      <div className="wrap custom__inner" data-reveal>
        <JynxMark size={40} color="var(--accent)" />
        <h2>Não encontrou o que precisa?</h2>
        <p>Desenvolvemos sob medida para o seu processo. Conte o desafio e damos uma resposta em até 48 horas.</p>
        <div className="custom__btns">
          <a href={L.signup} className="btn btn--primary btn--lg">Cadastre-se gratuitamente <Icon name="arrow-right" size={18} /></a>
          <a href={L.wa} className="btn btn--ghost btn--lg"><Icon name="message-circle" size={18} /> Falar pelo WhatsApp</a>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { CatalogHero, CatalogGrid, CustomBlock, SOLUTIONS, FILTERS });