import { Link } from "@tanstack/react-router";
import { Facebook, Instagram, Linkedin } from "lucide-react";
import { CODE_OF_ETHICS, LOGO_WHITE, SOCIAL } from "@/lib/site";

export function SiteFooter() {
  const social = [
    { href: SOCIAL.facebook, Icon: Facebook, label: "Facebook" },
    { href: SOCIAL.instagram, Icon: Instagram, label: "Instagram" },
    { href: SOCIAL.linkedin, Icon: Linkedin, label: "Linkedin" },
  ];
  return (
    <footer>
      <div className="bg-navy">
        <div className="mx-auto flex max-w-[1140px] flex-col items-center justify-between gap-6 px-5 py-8 md:flex-row">
          <img src={LOGO_WHITE} alt="Dome Ventures" className="h-10 w-auto" />
          <nav className="flex flex-wrap justify-center gap-8 text-[15px] text-primary-foreground">
            <Link to="/">Início</Link>
            <a href="/#sobre">Sobre</a>
            <a href="/#beneficios">Benefícios</a>
            <Link to="/portfolio">Portfólio</Link>
            <Link to="/blog">Blog</Link>
          </nav>
          <div className="flex gap-3">
            {social.map(({ href, Icon, label }) => (
              <a key={label} href={href} target="_blank" rel="noreferrer" aria-label={label}
                className="flex h-7 w-7 items-center justify-center rounded-[4px] bg-surface text-navy">
                <Icon className="h-4 w-4" />
              </a>
            ))}
          </div>
        </div>
      </div>
      <div className="bg-footer-bottom">
        <nav className="mx-auto flex max-w-[1140px] flex-wrap justify-center gap-x-8 gap-y-2 px-5 py-6 text-[15px] text-primary-foreground">
          <Link to="/politica-de-privacidade-e-protecao-de-dados-pessoais">Política de privacidade e Proteção de Dados Pessoais</Link>
          <a href={CODE_OF_ETHICS} target="_blank" rel="noreferrer">Código de Ética e Conduta</a>
          <Link to="/politica-de-cookies-br">Política de Cookies</Link>
        </nav>
      </div>
    </footer>
  );
}