import Image from "next/image";

function LinkedinIcon({ size = 16, className = "" }: { size?: number; className?: string }) {
  return (
    <svg xmlns="http://www.w3.org/2000/svg" width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className={className}>
      <path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z" />
      <rect width="4" height="12" x="2" y="9" />
      <circle cx="4" cy="4" r="2" />
    </svg>
  );
}

const navSections = [
  {
    title: "Navigation",
    links: [
      { label: "About", href: "#about" },
      { label: "Services", href: "#services" },
      { label: "Projects", href: "#projects" },
      { label: "Gallery", href: "#gallery" },
      { label: "Contact", href: "#contact" },
    ],
  },
  {
    title: "Expertise",
    links: [
      { label: "Systems Design", href: "#about" },
      { label: "IP & Cloud Production", href: "#about" },
      { label: "Broadcast Integration", href: "#about" },
      { label: "XR / Virtual Production", href: "#projects" },
    ],
  },
];

export default function Footer() {
  return (
    <footer className="bg-surface pt-16 pb-8 border-t border-border">
      <div className="max-w-6xl mx-auto px-6">
        {/* Top section */}
        <div className="grid grid-cols-1 md:grid-cols-12 gap-12 md:gap-8 pb-12 border-b border-border">
          {/* Brand column */}
          <div className="md:col-span-5">
            <div className="flex items-center gap-3 mb-5">
              <Image
                src="/images/dragon-mark.png"
                alt="Wild Dragon"
                width={24}
                height={24}
                className="brightness-0 invert opacity-60"
              />
              <span className="font-mono text-[11px] tracking-[0.2em] uppercase text-white/40">
                Wild Dragon
              </span>
            </div>
            <p className="text-sm text-white/40 leading-relaxed max-w-sm mb-6">
              Broadcast systems integration and production facility design for
              sports, corporate, financial services, and defense organizations.
            </p>
            <div className="flex items-center gap-4">
              <a
                href="https://www.linkedin.com/in/zachary-gaetano-05962386/"
                target="_blank"
                rel="noopener noreferrer"
                className="w-9 h-9 rounded-full border border-border flex items-center justify-center text-white/40 hover:text-accent hover:border-accent/30 transition-all duration-200"
                aria-label="LinkedIn"
              >
                <LinkedinIcon size={14} />
              </a>
              <a
                href="mailto:zgaetano@wilddragon.net"
                className="w-9 h-9 rounded-full border border-border flex items-center justify-center text-white/40 hover:text-accent hover:border-accent/30 transition-all duration-200"
                aria-label="Email"
              >
                <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                  <rect width="20" height="16" x="2" y="4" rx="2" />
                  <path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7" />
                </svg>
              </a>
            </div>
          </div>

          {/* Nav columns */}
          {navSections.map((section) => (
            <div key={section.title} className="md:col-span-3">
              <p className="font-mono text-[10px] tracking-[0.2em] uppercase text-white/30 mb-4">
                {section.title}
              </p>
              <ul className="space-y-2.5">
                {section.links.map((link) => (
                  <li key={link.label}>
                    <a
                      href={link.href}
                      className="text-[13px] text-white/40 hover:text-accent transition-colors duration-200"
                    >
                      {link.label}
                    </a>
                  </li>
                ))}
              </ul>
            </div>
          ))}
        </div>

        {/* Bottom bar */}
        <div className="flex flex-col sm:flex-row items-center justify-between gap-4 pt-8">
          <p className="text-[11px] text-white/25">
            &copy; {new Date().getFullYear()} Zachary Gaetano. All rights reserved.
          </p>
          <p className="text-[11px] text-white/20">
            Washington, DC Area
          </p>
        </div>
      </div>
    </footer>
  );
}