import Link from "next/link";

/**
 * O rodapé do centro de aprendizado, um só para as três páginas.
 *
 * Ele nasceu dentro da capa e ficou só lá: quem entrava num módulo ou num
 * artigo caía num rodapé de uma linha, sem WhatsApp, sem planos e sem caminho
 * de volta. Agora mora aqui, e a capa, a lista do módulo e o artigo usam o
 * mesmo — que é o que um portal faz.
 */

/* O mesmo número que atende em "preciso de ajuda com meu acesso" na tela de
   entrada do sistema. Um lugar só, porque número de atendimento espalhado é
   número que envelhece torto. */
export const WHATSAPP = "5587988701216";
export const zap = (texto: string) => `https://wa.me/${WHATSAPP}?text=${encodeURIComponent(texto)}`;

export const SITE = "https://ktalogu.com.br";
export const SISTEMA = "https://admin.ktalogu.com.br";

export default function RodapeDoHelp() {
  return (
    <footer className="hl-pe hl-grao">
      <div className="hl-pe-dentro">
        <div>
          <span className="hl-chapa">Não achou?</span>
          <h2>Fale com gente de verdade.</h2>
          <p>
            Se o que você procura não está aqui, o time responde no WhatsApp. E o artigo nasce da sua pergunta: toda
            busca sem resposta entra na fila.
          </p>
        </div>
        <div className="hl-pe-acoes">
          <a className="hl-btn hl-btn-zap" href={zap("Olá! Preciso de ajuda com a Ktalogu.")} target="_blank" rel="noreferrer">
            <svg width="19" height="19" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
              <path d="M12.04 2c-5.46 0-9.9 4.44-9.9 9.9 0 1.75.46 3.45 1.32 4.95L2 22l5.3-1.38a9.86 9.86 0 0 0 4.74 1.21h.01c5.46 0 9.9-4.44 9.9-9.9 0-2.65-1.03-5.14-2.9-7.01A9.82 9.82 0 0 0 12.04 2Zm0 18.03h-.01a8.2 8.2 0 0 1-4.18-1.15l-.3-.18-3.11.82.83-3.04-.2-.31a8.19 8.19 0 0 1-1.26-4.37c0-4.54 3.7-8.23 8.24-8.23 2.2 0 4.27.86 5.82 2.42a8.18 8.18 0 0 1 2.41 5.82c0 4.54-3.69 8.22-8.24 8.22Zm4.52-6.16c-.25-.12-1.47-.72-1.69-.81-.23-.08-.39-.12-.56.13-.16.24-.64.8-.79.97-.14.16-.29.18-.54.06-.25-.13-1.05-.39-2-1.23-.74-.66-1.23-1.47-1.38-1.72-.14-.25-.01-.38.11-.5.11-.11.25-.29.37-.44.13-.14.17-.24.25-.41.09-.16.04-.31-.02-.43-.06-.12-.56-1.34-.76-1.84-.2-.48-.4-.42-.56-.43h-.48c-.16 0-.43.06-.65.31-.22.25-.85.84-.85 2.04 0 1.2.87 2.36.99 2.53.12.16 1.71 2.61 4.14 3.66.58.25 1.03.4 1.38.51.58.19 1.11.16 1.53.1.47-.07 1.47-.6 1.68-1.18.2-.58.2-1.07.14-1.18-.06-.11-.22-.17-.47-.29Z" />
            </svg>
            Falar no WhatsApp
          </a>
          <a className="hl-btn hl-btn-marca" href={SISTEMA}>
            Voltar ao sistema
          </a>
        </div>
      </div>

      {/* Cada coluna responde a uma intenção diferente de quem chegou aqui:
          conhecer, aprender, entrar, assinar. */}
      <div className="hl-pe-colunas">
        <div className="hl-pe-coluna">
          <span className="hl-chapa">Ktalogu</span>
          <a href={SITE}>Conhecer o sistema</a>
          <a href={`${SITE}/#recursos`}>Recursos</a>
          <a href={`${SITE}/#loja`}>Loja virtual</a>
          <a href="https://lojas.ktalogu.com.br">Lojas que usam</a>
        </div>
        <div className="hl-pe-coluna">
          <span className="hl-chapa">Aprender</span>
          <Link href="/aprender#modulos">Todos os módulos</Link>
          <Link href="/aprender/primeiros-passos">Primeiros passos</Link>
          <Link href="/aprender/pdv">PDV e caixa</Link>
          <Link href="/aprender/orcamentos">Orçamentos</Link>
        </div>
        <div className="hl-pe-coluna">
          <span className="hl-chapa">Começar</span>
          <a href={`${SITE}/#preco`}>Planos e preços</a>
          <a href={`${SITE}/#preco`}>Quero assinar</a>
          <a href={SISTEMA}>Entrar no sistema</a>
          <a href={zap("Olá! Quero conhecer a Ktalogu.")} target="_blank" rel="noreferrer">
            Falar com o comercial
          </a>
        </div>
        <div className="hl-pe-coluna">
          <span className="hl-chapa">Suporte</span>
          <a href={zap("Olá! Preciso de ajuda com a Ktalogu.")} target="_blank" rel="noreferrer">
            WhatsApp do suporte
          </a>
          <a href={zap("Olá! Queria sugerir um artigo para o manual:")} target="_blank" rel="noreferrer">
            Sugerir um artigo
          </a>
          <a href={zap("Olá! Achei um erro no manual:")} target="_blank" rel="noreferrer">
            Achei um erro
          </a>
        </div>
      </div>

      <div className="hl-pe-fim">
        <div>
          <span>© {new Date().getFullYear()} Ktalogu · Centro de aprendizado</span>
          <span className="hl-mono">help.ktalogu.com.br</span>
        </div>
      </div>
    </footer>
  );
}