import { Link } from "@tanstack/react-router";
import { Instagram, Linkedin, Mail, MapPin } from "lucide-react";
import { Logo } from "./Logo";

export function Footer() {
  return (
    <footer className="relative mt-32 border-t border-border/60 bg-[color:var(--surface)]">
      <div className="container-page py-12 sm:py-16">
        <div className="grid gap-12 lg:grid-cols-[1.4fr_1fr_1fr_1fr]">
          <div className="space-y-5">
            <Logo />
            <p className="max-w-sm text-sm leading-relaxed text-muted-foreground">
              Cuidar de pessoas e fortalecer empresas é o nosso maior talento.
            </p>
            <div className="flex items-center gap-3">
              <a
                className="grid h-9 w-9 place-items-center rounded-full border border-border text-muted-foreground transition-colors hover:border-[color:var(--life)]/60 hover:text-foreground"
                href="https://www.linkedin.com/in/eliandromaurat/"
                target="_blank"
                rel="noopener noreferrer"
                aria-label="LinkedIn"
              >
                <Linkedin className="h-4 w-4" />
              </a>
              <a
                className="grid h-9 w-9 place-items-center rounded-full border border-border text-muted-foreground transition-colors hover:border-[color:var(--life)]/60 hover:text-foreground"
                href="https://www.instagram.com/institutovidasegura/"
                target="_blank"
                rel="noopener noreferrer"
                aria-label="Instagram"
              >
                <Instagram className="h-4 w-4" />
              </a>
            </div>
          </div>

          <FooterCol
            title="Soluções"
            links={[
              { to: "/solucoes", label: "A solução em três camadas" },
              { to: "/solucoes/safe-company", label: "Safe Company · governança" },
              { to: "/solucoes/mind-family", label: "Mind Family · acolhimento" },
            ]}
          />
          <FooterCol
            title="Instituto"
            links={[
              { to: "/sobre", label: "Sobre nós" },
              { to: "/manifesto", label: "Manifesto" },
              { to: "/impacto", label: "Impacto" },
              { to: "/conteudos", label: "Insights" },
              { to: "/contato", label: "Contato" },
            ]}
          />
          <div>
            <h3 className="text-xs font-semibold uppercase tracking-[0.18em] text-muted-foreground">
              Contato
            </h3>
            <ul className="mt-5 space-y-3 text-sm text-muted-foreground">
              <li className="flex items-start gap-2">
                <Mail className="mt-0.5 h-4 w-4 text-[color:var(--life)]" />
                <span>contato@institutovidasegura.com.br</span>
              </li>
              <li className="flex items-start gap-2">
                <MapPin className="mt-0.5 h-4 w-4 text-[color:var(--life)]" />
                <span>Teresópolis - RJ · Atendimento nacional</span>
              </li>
            </ul>
          </div>
        </div>

        <div className="mt-14 flex flex-col items-start justify-between gap-3 border-t border-border/60 pt-6 text-xs text-muted-foreground sm:flex-row sm:items-center">
          <span>© {new Date().getFullYear()} Instituto Vida Segura. Todos os direitos reservados.</span>
          <span className="font-display italic text-foreground/80">
            Governança que protege. Acolhimento que transforma.
          </span>
        </div>
      </div>
    </footer>
  );
}

function FooterCol({
  title,
  links,
}: {
  title: string;
  links: { to: string; label: string }[];
}) {
  return (
    <div>
      <h3 className="text-xs font-semibold uppercase tracking-[0.18em] text-muted-foreground">
        {title}
      </h3>
      <ul className="mt-5 space-y-3 text-sm">
        {links.map((l) => (
          <li key={l.to}>
            <Link
              to={l.to}
              className="text-muted-foreground transition-colors hover:text-foreground"
            >
              {l.label}
            </Link>
          </li>
        ))}
      </ul>
    </div>
  );
}