/* footer.jsx — rodapé do AchaMais */
const { IconSearch: FIconSearch } = window;

function Footer() {
  const cols = [
    {
      title: 'Produto',
      links: ['Como funciona', 'Plataformas suportadas', 'Tabela de comissões', 'Novidades'],
    },
    {
      title: 'Suporte',
      links: ['Central de ajuda', 'Configurar APIs', 'Fale conosco', 'Status do sistema'],
    },
    {
      title: 'Legal',
      links: ['Termos e condições', 'Política de privacidade', 'Política de cookies', 'Programa de afiliados'],
    },
  ];
  return (
    <footer className="border-t border-edge bg-[#0c0c0c]">
      <div className="mx-auto max-w-6xl px-5 py-14">
        <div className="grid grid-cols-2 gap-10 md:grid-cols-[1.4fr_1fr_1fr_1fr]">
          {/* marca + descrição */}
          <div className="col-span-2 md:col-span-1">
            <div className="flex items-center gap-2.5">
              <span className="flex h-8 w-8 items-center justify-center rounded-lg bg-gradient-to-br from-brand to-coral text-ink">
                <FIconSearch size={16} className="text-ink" />
              </span>
              <span className="font-syne text-lg font-extrabold tracking-tight text-white">Acha<span className="text-brand">Mais</span></span>
            </div>
            <p className="mt-4 max-w-xs text-sm leading-relaxed text-zinc-500">
              Pesquise um produto e compare preço e comissão real do Mercado Livre e da Shopee, lado a lado. Feito para afiliados que querem ganhar mais.
            </p>
            <div className="mt-5 flex items-center gap-2">
              <span className="inline-flex items-center gap-1.5 rounded-full border border-gold/30 bg-gold/10 px-2.5 py-1 text-[11px] font-semibold text-gold">Mercado Livre</span>
              <span className="inline-flex items-center gap-1.5 rounded-full border border-coral/30 bg-coral/10 px-2.5 py-1 text-[11px] font-semibold text-coral">Shopee</span>
            </div>
          </div>

          {cols.map((c) => (
            <div key={c.title}>
              <h4 className="mb-4 text-xs font-semibold uppercase tracking-wider text-zinc-400">{c.title}</h4>
              <ul className="space-y-2.5">
                {c.links.map((l) => (
                  <li key={l}>
                    <a href="#" className="text-sm text-zinc-500 transition-colors hover:text-zinc-200">{l}</a>
                  </li>
                ))}
              </ul>
            </div>
          ))}
        </div>

        <div className="mt-12 flex flex-col items-start justify-between gap-4 border-t border-edge pt-6 sm:flex-row sm:items-center">
          <p className="text-xs text-zinc-600">© 2026 AchaMais. Todos os direitos reservados.</p>
          <p className="max-w-xl text-xs leading-relaxed text-zinc-700">
            AchaMais é uma ferramenta independente de pesquisa para afiliados e não possui vínculo oficial com o Mercado Livre ou a Shopee. As comissões exibidas são estimativas.
          </p>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { Footer });