// Downloads page
const DOWNLOADS = [
  { name: "AnyDesk — Acesso Remoto", desc: "Use para receber atendimento remoto rápido. Sem instalação obrigatória.", type: "EXE", size: "6,3 MB", tag: "Suporte", cat: "Suporte" },
  { name: "TeamViewer QuickSupport", desc: "Alternativa ao AnyDesk. Leve e direto ao ponto.", type: "EXE", size: "12,1 MB", tag: "Suporte", cat: "Suporte" },
  { name: "Java Runtime 8 (update 381)", desc: "Necessário para o emissor gratuito de NF-e da SEFAZ.", type: "EXE", size: "78,4 MB", tag: "Fiscal", cat: "Fiscal" },
  { name: "Driver Bematech MP-4200 TH", desc: "Pacote oficial de driver para a impressora não-fiscal Bematech.", type: "ZIP", size: "24,7 MB", tag: "PDV", cat: "PDV" },
  { name: "Driver Elgin i9 / i7", desc: "Drivers homologados para impressoras não-fiscais Elgin.", type: "ZIP", size: "32,0 MB", tag: "PDV", cat: "PDV" },
  { name: "Configurador de Leitor Honeywell", desc: "Utilitário para programar leitores de código Honeywell (prefixo/sufixo).", type: "ZIP", size: "8,2 MB", tag: "PDV", cat: "PDV" },
  { name: "Assinador SERPRO", desc: "Aplicativo oficial para assinatura de documentos com certificado digital.", type: "EXE", size: "18,6 MB", tag: "Fiscal", cat: "Fiscal" },
  { name: "Checklist de Implantação — PDF", desc: "Documento que usamos em campo. Serve de guia antes de trocar de ERP.", type: "PDF", size: "0,4 MB", tag: "Guia", cat: "Guias" },
];

function DownloadsPage() {
  const cats = ["Todos", "Suporte", "Fiscal", "PDV", "Guias"];
  const [active, setActive] = React.useState("Todos");
  const filtered = active === "Todos" ? DOWNLOADS : DOWNLOADS.filter(d => d.cat === active);

  return (
    <>
      <section className="hero-page">
        <div className="grid-bg" />
        <div className="wrap">
          <div className="crumbs"><a href="#/home">Home</a> / Downloads</div>
          <h1 className="h-display">Os arquivos que usamos em atendimento.</h1>
          <p className="lede">Acesso remoto, drivers, utilitários e guias. Todos conferidos — nada de link duvidoso.</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="dl-list">
            {filtered.map((d, i) => {
              const iconClass = d.type === "EXE" ? "exe" : d.type === "ZIP" ? "zip" : "";
              return (
                <div className="dl-row" key={i}>
                  <div className={"dl-icon " + iconClass}>{d.type}</div>
                  <div className="dl-meta">
                    <h4>{d.name}</h4>
                    <p>{d.desc}</p>
                  </div>
                  <span className="dl-tag">{d.tag}</span>
                  <span className="dl-size">{d.size}</span>
                  <a className="dl-btn" href="#" onClick={(e) => e.preventDefault()}>
                    <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><path d="M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z"/></svg>
                    Baixar
                  </a>
                </div>
              );
            })}
          </div>
        </div>
      </section>

      <FinalCTA />
    </>
  );
}

Object.assign(window, { DownloadsPage });