// Tutoriais page
const TUTORIALS = [
  { cat: "ERP", title: "Configurando CFOP e CST para venda no varejo", desc: "Evitar rejeição na NFC-e começa na parametrização. Passo a passo comentado.", time: "08:42", char: "01", variant: "var-a" },
  { cat: "Fiscal", title: "Instalando o certificado digital A1 no Windows", desc: "Como importar o PFX, salvar a senha com segurança e testar no emissor.", time: "06:15", char: "02", variant: "var-b" },
  { cat: "PDV", title: "Configurando impressora fiscal Bematech MP-4200", desc: "Drivers, porta serial e teste de cupom. Feito ao vivo em um cliente.", time: "11:03", char: "03", variant: "var-c" },
  { cat: "ERP", title: "Cadastro de produtos: NCM e tributação correta", desc: "Os campos que a maioria dos comerciantes erra — e o impacto na nota.", time: "09:28", char: "04", variant: "var-a" },
  { cat: "Rede", title: "Wi-Fi da loja travando? Diagnóstico em 5 passos", desc: "Da análise de sinal à separação de rede cliente/operação.", time: "07:40", char: "05", variant: "var-b" },
  { cat: "Fiscal", title: "Contingência NF-e: o que fazer quando a SEFAZ cai", desc: "Emissão em contingência offline, retransmissão e o que dizer pro cliente.", time: "05:52", char: "06", variant: "var-c" },
  { cat: "PDV", title: "Leitor de código de barras: ajuste de prefixo e sufixo", desc: "Ajuste fino pro leitor disparar Enter e acelerar o caixa.", time: "04:18", char: "07", variant: "var-a" },
  { cat: "Automação", title: "Integrando balança com o ERP de supermercado", desc: "Protocolo, cadastro de PLU e conferência de preço.", time: "12:31", char: "08", variant: "var-b" },
  { cat: "Geral", title: "Backup automático da base do ERP — do jeito certo", desc: "Agendamento, rotação de cópias e teste de restauração (o que ninguém faz).", time: "10:05", char: "09", variant: "var-c" },
];

function TutoriaisPage() {
  const cats = ["Todos", "ERP", "Fiscal", "PDV", "Rede", "Automação", "Geral"];
  const [active, setActive] = React.useState("Todos");
  const filtered = active === "Todos" ? TUTORIALS : TUTORIALS.filter(t => t.cat === active);

  return (
    <>
      <section className="hero-page">
        <div className="grid-bg" />
        <div className="wrap">
          <div className="crumbs"><a href="#/home">Home</a> / Tutoriais</div>
          <h1 className="h-display">Tutoriais práticos, em vídeo curto.</h1>
          <p className="lede">Cada tutorial parte de um caso real de suporte. A ideia é você assistir, aplicar e seguir em frente.</p>
        </div>
      </section>

      <section className="section">
        <div className="wrap">
          <div className="filters">
            {cats.map(c => (
              <button key={c} className={active === c ? "active" : ""} onClick={() => setActive(c)}>{c}</button>
            ))}
          </div>
          <div className="tut-grid">
            {filtered.map((t, i) => (
              <article key={i} className="tut-card">
                <div className={"tut-thumb " + t.variant}>
                  <div className="pxgrid" />
                  <div className="bigchar">{t.char}</div>
                  <div className="play" aria-hidden="true">
                    <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><path d="M8 5v14l11-7z"/></svg>
                  </div>
                </div>
                <div className="tut-body">
                  <div className="tut-meta">
                    <span className="cat">{t.cat}</span>
                    <span>{t.time}</span>
                  </div>
                  <h3>{t.title}</h3>
                  <p>{t.desc}</p>
                  <div className="foot">
                    <span>Vídeo</span>
                    <span className="watch">Assistir →</span>
                  </div>
                </div>
              </article>
            ))}
          </div>
          {filtered.length === 0 && (
            <p className="muted mono" style={{ textAlign: "center", padding: 40 }}>Nenhum tutorial nesta categoria ainda.</p>
          )}
        </div>
      </section>

      <FinalCTA />
    </>
  );
}

Object.assign(window, { TutoriaisPage });