import React from "react";
import Link from "next/link";
import AppImage from "@/components/ui/AppImage";
import AnimatedLogo from "@/components/AnimatedLogo";
import {
  LinkedInIcon,
  InstagramIcon,
  TwitterXIcon,
  FacebookIcon } from
"@/components/ui/Icons";
import AdImage from "@/components/AdImage";
import { pickAds } from "@/lib/ads";

// DO NOT OVERRIDE — Footer column structure and link targets
const footerColumns = [
{
  heading: "About",
  links: [
  { label: "About AV Beat", href: "/about" },
  { label: "Our Mission", href: "/about#mission" },
  { label: "Editorial Team", href: "/about#team" },
  { label: "Advertise With Us", href: "/advertise" },
  { label: "Contact Us", href: "/advertise#contact" },
  { label: "Newsletter", href: "/home-page#newsletter" },
  { label: "Video Archive", href: "/video-archive" }]

},
{
  heading: "Categories",
  links: [
  { label: "Industry News", href: "/news" },
  { label: "Gear & Reviews", href: "/gear" },
  { label: "Show Coverage", href: "/show-coverage" },
  { label: "Production Technology", href: "/technology" },
  { label: "Live Production", href: "/news?category=live-production" },
  { label: "AI & Automation", href: "/technology?category=ai" },
  { label: "Streaming", href: "/technology?category=streaming" },
  { label: "Audio", href: "/gear?category=audio" }]

},
{
  heading: "Events",
  links: [
  { label: "NAB Show", href: "/show-coverage" },
  { label: "IBC", href: "/show-coverage?event=ibc" },
  { label: "Cine Gear", href: "/show-coverage?event=cine-gear" },
  { label: "SXSW", href: "/show-coverage?event=sxsw" },
  { label: "Streaming Summit", href: "/show-coverage?event=streaming-summit" },
  { label: "All Events", href: "/show-coverage" }]

},
{
  heading: "Follow Us",
  links: [
  { label: "LinkedIn", href: "https://linkedin.com/company/avbeat" },
  { label: "Twitter / X", href: "https://twitter.com/avbeat" },
  { label: "Facebook", href: "https://facebook.com/avbeat" },
  { label: "Instagram", href: "https://instagram.com/avbeat" },
  { label: "YouTube", href: "https://youtube.com/@avbeat" },
  { label: "RSS Feed", href: "/rss" }]

}];


export default function Footer() {
  return (
    <footer className="bg-[#F8FAFC] border-t border-[#DCE6F2]">
      {/* Footer Ad Row — site-wide 728x90 (rotates if multiple in pool) */}
      <div className="max-w-container mx-auto px-4 pt-8 pb-4">
        {pickAds("728x90", 1).length > 0 && (
          <div className="flex justify-center mb-8">
            <AdImage ad={pickAds("728x90", 1)[0]} page="footer" />
          </div>
        )}

        {/* Multi-column link section */}
        <div className="border-t border-[#DCE6F2] pt-8 pb-6 grid grid-cols-2 md:grid-cols-4 gap-8">
          {footerColumns?.map((col) =>
          <div key={col?.heading}>
              <h4 className="font-body font-bold text-xs text-[#1D4ED8] uppercase tracking-widest mb-4 pb-2 border-b border-[#1D4ED8]/20">
                {col?.heading}
              </h4>
              <ul className="space-y-2">
                {col?.links?.map((link) =>
              <li key={link?.label}>
                    {link?.href?.startsWith("http") ?
                <a
                  href={link?.href}
                  target="_blank"
                  rel="noopener noreferrer"
                  className="footer-link font-body text-sm text-[#475569] hover:text-[#1D4ED8] transition-colors leading-relaxed inline-block">
                        {link?.label}
                      </a> :

                <Link
                  href={link?.href}
                  className="footer-link font-body text-sm text-[#475569] hover:text-[#1D4ED8] transition-colors leading-relaxed inline-block">
                        {link?.label}
                      </Link>
                }
                  </li>
              )}
              </ul>
            </div>
          )}
        </div>

        {/* Footer Bottom */}
        {/* DO NOT OVERRIDE — footer bottom bar layout */}
        <div className="border-t border-[#DCE6F2] pt-5 pb-3 flex flex-col sm:flex-row items-center justify-between gap-4">
          <Link
            href="/home-page"
            aria-label="AV Beat — home"
            className="flex-shrink-0 opacity-90 hover:opacity-100 transition-opacity">
            <AnimatedLogo size={36} variant="onLight" />
          </Link>

          <div className="flex items-center gap-4">
            <a href="https://linkedin.com/company/avbeat" target="_blank" rel="noopener noreferrer" aria-label="AV Beat on LinkedIn"
            className="text-[#475569] hover:text-[#1D4ED8] transition-colors social-icon">
              <LinkedInIcon size={17} />
            </a>
            <a href="https://instagram.com/avbeat" target="_blank" rel="noopener noreferrer" aria-label="AV Beat on Instagram"
            className="text-[#475569] hover:text-[#1D4ED8] transition-colors social-icon">
              <InstagramIcon size={17} />
            </a>
            <a href="https://twitter.com/avbeat" target="_blank" rel="noopener noreferrer" aria-label="AV Beat on Twitter/X"
            className="text-[#475569] hover:text-[#1D4ED8] transition-colors social-icon">
              <TwitterXIcon size={17} />
            </a>
            <a href="https://facebook.com/avbeat" target="_blank" rel="noopener noreferrer" aria-label="AV Beat on Facebook"
            className="text-[#475569] hover:text-[#1D4ED8] transition-colors social-icon">
              <FacebookIcon size={17} />
            </a>
          </div>

          <div className="flex items-center gap-4 text-xs font-body text-[#475569]">
            <Link href="/privacy" className="hover:text-[#1D4ED8] transition-colors">Privacy Policy</Link>
            <Link href="/terms" className="hover:text-[#1D4ED8] transition-colors">Terms of Service</Link>
            <span className="inline-flex items-center gap-2 flex-wrap">
              © 2026. All rights reserved.
            </span>
          </div>
        </div>

      </div>
    </footer>);

}