/* ═══════════════════════════════════════════════════════════
   FOOTER — marca, colunas de links, contato real e copyright
   Dados de contato exigidos pelas políticas de Google/Meta Ads.
   ═══════════════════════════════════════════════════════════ */

const footerStyles = {
  brandText: { marginTop: 12 },
};

const FOOTER_COLS = [
  {
    title: 'Produto',
    links: [
      ['Funcionalidades', '#funcionalidades'],
      ['Planos e preços', '#planos'],
      ['FAQ', '#faq'],
      ['Teste grátis', '#cta'],
    ],
  },
  {
    title: 'Empresa',
    links: [
      ['Quem somos', LINKS.quemSomos],
      ['No que acreditamos', `${LINKS.quemSomos}#valores`],
      ['Contato', '#contato'],
    ],
  },
  {
    title: 'Legal & Suporte',
    links: [
      ['Perguntas frequentes', '#faq'],
      ['Política de Privacidade', LINKS.privacidade],
      ['Termos de Uso', LINKS.termos],
      ['Contato', '#contato'],
    ],
  },
];

function Footer() {
  return (
    <footer>
      <div className="container">
        <div className="footer-top">
          <div className="footer-brand">
            <Logo />
            <p style={footerStyles.brandText}>
              O sistema de gestão odontológica feito por dentistas. Tecnologia que cuida para você
              cuidar dos seus pacientes.
            </p>
          </div>

          {FOOTER_COLS.map((col) => (
            <div className="footer-col" key={col.title}>
              <h4>{col.title}</h4>
              <ul>
                {col.links.map(([label, href]) => (
                  <li key={label + href}>
                    <a href={href}>{label}</a>
                  </li>
                ))}
              </ul>
            </div>
          ))}
        </div>

        <div className="footer-contact" id="contato">
          <div className="footer-contact-item">
            <span className="fc-label">WhatsApp comercial</span>
            <a href={LINKS.waInfo} target="_blank" rel="noopener">
              (77) 98874-9316
            </a>
          </div>
          <div className="footer-contact-item">
            <span className="fc-label">E-mail</span>
            <a href="mailto:contato@klyvo.app.br">contato@klyvo.app.br</a>
          </div>
          <div className="footer-contact-item">
            <span className="fc-label">Endereço</span>
            <a
              href="https://www.google.com/maps/search/?api=1&query=Avenida+Gilenilda+Alves%2C+700%2C+Boa+Vista%2C+Vit%C3%B3ria+da+Conquista%2FBA"
              target="_blank"
              rel="noopener"
            >
              Avenida Gilenilda Alves, 700, Bairro Boa Vista, Vitória da Conquista/BA
            </a>
          </div>
          <div className="footer-contact-item">
            <span className="fc-label">Atendimento comercial</span>
            <span>Segunda a sexta, 8h às 18h</span>
          </div>
        </div>

        <div className="footer-bottom">
          <p className="footer-copy">
            © 2026 Klyvo Serviços LTDA — CNPJ 67.519.663/0001-98. Todos os direitos reservados.
          </p>
          <div className="footer-seals">
            <span className="seal">
              <Icon d={ICONS.lock} size={13} />
              SSL
            </span>
            <span className="seal">
              <Icon d={ICONS.shield} size={13} />
              Privacidade
            </span>
          </div>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { Footer });