import { Link } from "@tanstack/react-router";
import { Instagram, Facebook, Mail, MapPin } from "lucide-react";
import logo from "@/assets/logo-aifeira.jpeg";

export function SiteFooter() {
  return (
    <footer className="border-t border-border bg-primary text-primary-foreground">
      <div className="mx-auto grid max-w-7xl gap-10 px-4 py-14 sm:px-6 lg:grid-cols-4 lg:px-8">
        <div>
          <div className="flex items-center gap-2">
            <img src={logo} alt="AiFeira" className="h-10 w-10 rounded-full object-cover" />
            <span className="font-display text-xl font-bold">AiFeira</span>
          </div>
          <p className="mt-4 text-sm text-primary-foreground/80">
          O sabor da feira, na palma da sua mão. Conectando feirantes, produtores e
            quem ama comida fresca de verdade.
          </p>
          <p className="mt-4 flex items-center gap-2 text-sm text-primary-foreground/80">
            <MapPin className="h-4 w-4" /> Brasília — DF
          </p>
        </div>
        <FooterCol title="Navegar" links={[
          ["Início", "/"],
          ["Sobre nós", "/sobre"],
          ["Como funciona", "/como-funciona"],
          ["Funcionalidades", "/funcionalidades"],
        ]} />
        <FooterCol title="Mais" links={[
          ["Produtos", "/produtos"],
          ["Blog & Recursos", "/blog"],
          ["Contato & Suporte", "/contato"],
          ["Termos & Políticas", "/termos"],
        ]} />
        <div>
          <h4 className="font-display text-lg">Fique por dentro</h4>
          <p className="mt-2 text-sm text-primary-foreground/80">
            Receitas, dicas e produtores da semana.
          </p>
          <form className="mt-4 flex overflow-hidden rounded-full bg-primary-foreground/10 ring-1 ring-primary-foreground/20">
            <input
              type="email"
              required
              placeholder="seu@email.com"
              className="flex-1 bg-transparent px-4 py-2 text-sm placeholder:text-primary-foreground/50 focus:outline-none"
            />
            <button className="bg-highlight px-4 text-sm font-semibold text-highlight-foreground">
              Assinar
            </button>
          </form>
          <div className="mt-5 flex gap-3">
            <a aria-label="Instagram" href="#" className="grid h-9 w-9 place-items-center rounded-full bg-primary-foreground/10 hover:bg-primary-foreground/20"><Instagram className="h-4 w-4" /></a>
            <a aria-label="Facebook" href="#" className="grid h-9 w-9 place-items-center rounded-full bg-primary-foreground/10 hover:bg-primary-foreground/20"><Facebook className="h-4 w-4" /></a>
            <a aria-label="Email" href="mailto:contato@aifeira.com.br" className="grid h-9 w-9 place-items-center rounded-full bg-primary-foreground/10 hover:bg-primary-foreground/20"><Mail className="h-4 w-4" /></a>
          </div>
        </div>
      </div>
      <div className="border-t border-primary-foreground/15">
        <div className="mx-auto flex max-w-7xl flex-col items-center justify-between gap-2 px-4 py-5 text-xs text-primary-foreground/70 sm:flex-row sm:px-6 lg:px-8">
          <span>© {new Date().getFullYear()} AiFeira. Todos os direitos reservados.</span>
          <span>Feito com 🌱 para fortalecer a agricultura familiar.</span>
        </div>
      </div>
    </footer>
  );
}

function FooterCol({ title, links }: { title: string; links: [string, string][] }) {
  return (
    <div>
      <h4 className="font-display text-lg">{title}</h4>
      <ul className="mt-3 space-y-2 text-sm text-primary-foreground/80">
        {links.map(([label, to]) => (
          <li key={to}>
            <Link to={to} className="hover:text-highlight">{label}</Link>
          </li>
        ))}
      </ul>
    </div>
  );
}