// hubs.jsx — /segmentos and /recursos
// Reuses PageHero + PageCTA (svc-pages.jsx) and Conteudos + FAQ (sections3.jsx)
// Exports: SegmentosPage, RecursosPage

/* ============================ /segmentos ============================ */
// [icon, name, one-liner, deepAnchor|null]
const SEGMENTS = [
  ['factory', 'Indústria', 'Do chão de fábrica ao fiscal, processos que não podem parar.', 'industria'],
  ['shopping-bag', 'Varejo e distribuição', 'Giro alto, multiloja e pressão constante por margem.', 'varejo'],
  ['hard-hat', 'Construção', 'Obras, medições e suprimentos sob controle.', 'construcao'],
  ['briefcase', 'Serviços', 'Operações orientadas a pessoas, contratos e atendimento.', null],
  ['wheat', 'Agronegócio', 'Safra, estoque e fiscal no ritmo do campo.', null],
  ['heart-pulse', 'Saúde', 'Processos críticos, compliance e rastreabilidade.', null],
  ['graduation-cap', 'Educação', 'Gestão acadêmica, financeira e administrativa integrada.', null],
  ['truck', 'Logística', 'Movimentação, prazos e integração de ponta a ponta.', null],
  ['building-2', 'Empresas multiunidade', 'Padrão e governança entre filiais e centros de distribuição.', null],
];

const SEG_DEEP = {
  industria: {
    icon: 'factory', name: 'Indústria',
    intro: 'Operação que não pode parar, com forte componente fiscal e de suprimentos.',
    dores: ['Compras e requisições no email', 'Redigitação entre Fluig e o ERP', 'Aprovações sem rastreabilidade', 'Backlog de TI travando a fábrica'],
    solucoes: ['Portal de Compras', 'Pagamento de Notas', 'Solicitação de EPI e Uniforme', 'Central de Serviços'],
    integracoes: ['Fluig + Protheus', 'Fluig + Datasul', 'APIs e webservices'],
  },
  varejo: {
    icon: 'shopping-bag', name: 'Varejo e distribuição',
    intro: 'Alto volume de cadastros, notas e fornecedores, com pressão por agilidade.',
    dores: ['Cadastro de produtos lento', 'Cotação por email', 'Entrada de notas manual', 'Fornecedores sem padrão'],
    solucoes: ['Cadastro de Produtos', 'Portal de Entrada de Notas', 'Cadastro de Fornecedor', 'Pagamento de Notas'],
    integracoes: ['Fluig + Protheus', 'Fluig + Winthor', 'Datasets e integrações'],
  },
  construcao: {
    icon: 'hard-hat', name: 'Construção',
    intro: 'Obras distribuídas, contratos e medições que exigem controle e aprovação.',
    dores: ['Medição de obra no papel', 'Contratos sem fluxo', 'Suprimentos descentralizados', 'Aprovações espalhadas'],
    solucoes: ['Solicitação de Contratos', 'Portal de Compras', 'Painel de Aprovação em Lote', 'Central de Serviços'],
    integracoes: ['Fluig + Protheus', 'Fluig + RM', 'SSO e Identity'],
  },
};

function SegDeep({ data }) {
  const L = window.JYNX_LINKS;
  const cols = [
    ['triangle-alert', 'Dores típicas', data.dores],
    ['boxes', 'Soluções aplicáveis', data.solucoes],
    ['workflow', 'Integrações comuns', data.integracoes],
  ];
  return (
    <section className="section seg-deep" id={Object.keys(SEG_DEEP).find(k => SEG_DEEP[k] === data)}>
      <div className="wrap">
        <div className="seg-deep__head" data-reveal>
          <span className="seg-deep__ic"><Icon name={data.icon} size={24} /></span>
          <div>
            <div className="eyebrow">Setor em foco</div>
            <h2>{data.name}</h2>
            <p>{data.intro}</p>
          </div>
        </div>
        <div className="seg-deep__cols">
          {cols.map(([ic, title, items], ci) => (
            <div key={title} className="seg-deep__col card" data-reveal style={{ '--reveal-delay': (ci * 80) + 'ms' }}>
              <div className="seg-deep__coltop">
                <span className="seg-deep__colic"><Icon name={ic} size={18} /></span>
                <h3>{title}</h3>
              </div>
              <ul>
                {items.map(it => <li key={it}><Icon name="check" size={15} /> {it}</li>)}
              </ul>
            </div>
          ))}
        </div>
        <div className="seg-deep__clients" data-reveal>
          <span className="seg-deep__clientslabel">Empresas que confiam na JYNX</span>
          <ClientLogos compact />
        </div>
        <div className="seg-deep__cta" data-reveal>
          <a href={L.demo} className="btn btn--primary btn--lg">Solicitar diagnóstico do setor <Icon name="arrow-right" size={18} /></a>
        </div>
      </div>
    </section>
  );
}

function SegmentosPage() {
  const L = window.JYNX_LINKS;
  return (
    <React.Fragment>
      <PageHero
        eyebrow="Segmentos"
        h1={['Soluções TOTVS', 'para o seu setor']}
        sub="Cada setor tem suas dores, seus fluxos e suas integrações. Veja como a JYNX aplica soluções prontas e serviços ao contexto da sua operação."
        primary={['Solicitar diagnóstico', L.demo]}
        secondary={['Falar com especialista', L.wa]}
      />

      <section className="section seg-hub" id="setores">
        <div className="wrap">
          <div className="seg-grid">
            {SEGMENTS.map(([ic, name, line, anchor], i) => (
              <a key={name} href={anchor ? '#' + anchor : L.demo} className={'seg-card card' + (anchor ? ' seg-card--deep' : '')} data-reveal style={{ '--reveal-delay': (Math.min(i, 6) * 50) + 'ms' }}>
                <div className="seg-card__top">
                  <span className="seg-card__ic"><Icon name={ic} size={22} /></span>
                  {anchor && <span className="seg-card__badge">Casos reais</span>}
                </div>
                <h3>{name}</h3>
                <p>{line}</p>
                <span className="seg-card__cta">{anchor ? 'Ver detalhes' : 'Falar com especialista'} <Icon name={anchor ? 'arrow-down' : 'arrow-up-right'} size={15} /></span>
              </a>
            ))}
          </div>
        </div>
      </section>

      <div className="seg-deeps section--alt">
        <SegDeep data={SEG_DEEP.industria} />
        <SegDeep data={SEG_DEEP.varejo} />
        <SegDeep data={SEG_DEEP.construcao} />
      </div>

      <PageCTA
        title="Não viu o seu setor em detalhe?"
        sub="Conte o seu cenário. O diagnóstico mostra como a JYNX se aplica à sua operação, qualquer que seja o segmento."
        primary={['Solicitar diagnóstico', L.demo]}
        secondary={['Falar com especialista', L.wa]}
      />
    </React.Fragment>
  );
}

/* ============================ /recursos ============================ */
const GLOSSARIO = [
  ['Protheus', 'ERP da TOTVS para gestão financeira, fiscal, suprimentos e mais.'],
  ['Fluig', 'Plataforma TOTVS de processos (BPM), portais e gestão de documentos.'],
  ['RM', 'ERP TOTVS forte em RH, educação e backoffice.'],
  ['Datasul', 'ERP TOTVS voltado à indústria e à manufatura.'],
  ['Winthor', 'ERP TOTVS para atacado distribuidor e varejo.'],
  ['ADVPL', 'Linguagem de desenvolvimento e customização do Protheus.'],
  ['AMS', 'Application Management Services, gestão e manutenção do ambiente.'],
  ['GMUD', 'Gestão de Mudanças, controle formal de alterações no ambiente.'],
  ['Dataset', 'Fonte de dados do Fluig usada em formulários e fluxos.'],
  ['SSO', 'Single Sign-On, login único entre sistemas.'],
  ['Webservice', 'Serviço para integração entre sistemas pela web.'],
  ['SLA', 'Service Level Agreement, acordo de nível de serviço.'],
];

const REC_SOON = [
  ['book-open', 'Guias e e-books', 'Materiais aprofundados sobre automação e TOTVS.'],
  ['video', 'Webinars', 'Sessões ao vivo e gravadas com especialistas.'],
  ['award', 'Cases', 'Histórias de clientes que evoluíram com a JYNX.'],
  ['file-code-2', 'Materiais técnicos', 'Documentos para os times de TI e integração.'],
  ['clipboard-check', 'Templates e checklists', 'Modelos prontos para acelerar a sua operação.'],
];

function RecursosPage() {
  const L = window.JYNX_LINKS;
  return (
    <React.Fragment>
      <PageHero
        eyebrow="Recursos"
        h1={['Conteúdo para evoluir', 'seu ambiente TOTVS']}
        sub="Artigos, FAQ e glossário para tirar dúvidas e tomar decisões melhores no ecossistema TOTVS. Material novo entra com frequência."
        primary={['Solicitar diagnóstico', L.demo]}
        secondary={['Falar com especialista', L.wa]}
      />

      {/* Blog por intenção (reaproveita Conteudos da home) */}
      <Conteudos />

      {/* Mais formatos, marcados para preencher */}
      <section className="section rec-soon" id="formatos">
        <div className="wrap">
          <div className="section-head" data-reveal>
            <div className="eyebrow">Mais formatos</div>
            <h2>Em breve, novos<br />materiais por aqui</h2>
            <p>Estamos preparando estes formatos. Por enquanto, eles ficam marcados, sem conteúdo de exemplo.</p>
          </div>
          <div className="rec-soon__grid">
            {REC_SOON.map(([ic, t, d], i) => (
              <div key={t} className="rec-soon__card card" data-reveal style={{ '--reveal-delay': (i * 60) + 'ms' }}>
                <span className="rec-soon__ic"><Icon name={ic} size={20} /></span>
                <div className="rec-soon__txt">
                  <h3>{t}</h3>
                  <p>{d}</p>
                </div>
                <span className="rec-soon__badge">Em breve</span>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Glossário TOTVS */}
      <section className="section rec-gloss section--alt" id="glossario">
        <div className="wrap">
          <div className="section-head" data-reveal>
            <div className="eyebrow">Glossário TOTVS</div>
            <h2>O ecossistema TOTVS,<br />sem siglas no caminho</h2>
            <p>Os termos que mais aparecem quando o assunto é Protheus, Fluig e companhia.</p>
          </div>
          <div className="rec-gloss__grid">
            {GLOSSARIO.map(([term, def], i) => (
              <div key={term} className="rec-gloss__item card" data-reveal style={{ '--reveal-delay': (Math.min(i, 8) * 40) + 'ms' }}>
                <span className="rec-gloss__term">{term}</span>
                <span className="rec-gloss__def">{def}</span>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* FAQ (reaproveita o accordion da home) */}
      <FAQ />

      <PageCTA
        title="Pronto para colocar em prática?"
        sub="Solicite um diagnóstico gratuito ou fale com um especialista para aplicar tudo isso ao seu ambiente."
        primary={['Solicitar diagnóstico', L.demo]}
        secondary={['Falar com especialista', L.wa]}
      />
    </React.Fragment>
  );
}

Object.assign(window, { SegmentosPage, RecursosPage });