import { Mail } from "lucide-react";
import { GithubIcon, LinkedinIcon, InstagramIcon } from "./BrandIcons";
import { profile } from "../data/profile";

export default function Footer() {
  const year = new Date().getFullYear();

  const links = [
    { icon: Mail, href: `mailto:${profile.social.email}`, label: "Email" },
    { icon: GithubIcon, href: profile.social.github, label: "GitHub" },
    { icon: LinkedinIcon, href: profile.social.linkedin, label: "LinkedIn" },
    { icon: InstagramIcon, href: profile.social.instagram, label: "Instagram" },
  ];

  return (
    <footer className="border-t border-[color:var(--color-border)] mt-32">
      <div className="container-px mx-auto max-w-6xl py-12 flex flex-col gap-8 md:flex-row md:items-center md:justify-between">
        <div className="flex items-center gap-4">
          <img
            src={profile.logo}
            alt={profile.logoAlt}
            className="h-11 w-11 object-contain opacity-90"
          />
          <div>
            <p className="font-display font-semibold text-lg">
              {profile.name} <span className="text-gradient">.</span>
            </p>
            <p className="text-sm text-[color:var(--color-muted)] mt-1">{profile.role}</p>
          </div>
        </div>

        <ul className="flex flex-wrap gap-6 text-sm text-[color:var(--color-muted)]">
          {profile.nav.map((item) => (
            <li key={item.href}>
              <a href={item.href} className="hover:text-[color:var(--color-ink)] transition-colors">
                {item.label}
              </a>
            </li>
          ))}
        </ul>

        <div className="flex gap-3">
          {links.map(({ icon: Icon, href, label }) => (
            <a
              key={label}
              href={href}
              aria-label={label}
              target="_blank"
              rel="noreferrer"
              className="grid place-items-center h-10 w-10 rounded-full border border-[color:var(--color-border)] text-[color:var(--color-muted)] hover:text-[color:var(--color-accent)] hover:border-[color:var(--color-accent)] transition-colors"
            >
              <Icon size={17} />
            </a>
          ))}
        </div>
      </div>

      <div className="container-px mx-auto max-w-6xl pb-10 flex flex-col sm:flex-row gap-2 sm:items-center sm:justify-between text-xs text-[color:var(--color-muted)]">
        <p>
          © {year} {profile.name}. {profile.tagline}
        </p>
        <p>Diseñado y construido a mano.</p>
      </div>
    </footer>
  );
}
