avbeat-com/src/components/Footer.tsx

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

// DO NOT OVERRIDE — Footer column structure and link targets
const footerColumns = [
{
  heading: "About",
  links: [
  { label: "About BroadcastBeat", 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" }]

},
{
  heading: "Categories",
  links: [
  { label: "News", href: "/news" },
  { label: "Gear & Reviews", href: "/gear" },
  { label: "Show Coverage", href: "/show-coverage" },
  { label: "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/broadcastbeat" },
  { label: "Twitter / X", href: "https://twitter.com/broadcastbeat" },
  { label: "Facebook", href: "https://facebook.com/broadcastbeat" },
  { label: "Instagram", href: "https://instagram.com/broadcastbeat" },
  { label: "YouTube", href: "https://youtube.com/@broadcastbeat" },
  { label: "RSS Feed", href: "/rss" }]

}];


export default function Footer() {
  return (
    <footer className="bg-[#0d0d0d] border-t border-[#222]">
      {/* Footer Ad Row */}
      <div className="max-w-container mx-auto px-4 pt-8 pb-4">
        <div className="flex flex-wrap justify-center gap-4 mb-8">
          {/* DO NOT OVERRIDE — footer ad placeholder */}
          <div className="ad-placeholder w-[300px] h-[250px]">
            <AppImage
              src="https://img.rocket.new/generatedImages/rocket_gen_img_189430e3f-1768594771653.png"
              alt="Advertisement — BroadcastBeat sponsor"
              width={300}
              height={250}
              className="w-full h-full object-contain" />
            
          </div>
        </div>

        {/* Multi-column link section */}
        <div className="border-t border-[#222] 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-[#3b82f6] uppercase tracking-widest mb-4 pb-2 border-b border-[#3b82f6]/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-[#777777] hover:text-[#3b82f6] transition-colors leading-relaxed inline-block">
                        {link?.label}
                      </a> :

                <Link
                  href={link?.href}
                  className="footer-link font-body text-sm text-[#777777] hover:text-[#3b82f6] 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-[#222] pt-5 pb-3 flex flex-col sm:flex-row items-center justify-between gap-4">
          <Link href="/home-page">
            <AppImage
              src="https://img.rocket.new/generatedImages/rocket_gen_img_171722b35-1771356128623.png"
              alt="BroadcastBeat — Broadcast Engineering News"
              width={150}
              height={20}
              className="h-5 w-auto object-contain brightness-0 invert opacity-50" />
            
          </Link>

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

          <div className="flex items-center gap-4 text-xs font-body text-[#555]">
            <Link href="/privacy" className="hover:text-[#3b82f6] transition-colors">Privacy Policy</Link>
            <Link href="/terms" className="hover:text-[#3b82f6] transition-colors">Terms of Service</Link>
            <span>© 2026 Relevant Media Properties. All rights reserved.</span>
          </div>
        </div>

        {/* NAB Official Media Partner badge area */}
        {/* DO NOT OVERRIDE — NAB partner badge section */}
        <div className="border-t border-[#222] pt-4 pb-2 flex justify-center">
          <div className="flex items-center gap-3 text-[#444] text-xs font-body">
            <div className="w-8 h-8 bg-[#1a1a1a] border border-[#333] rounded flex items-center justify-center">
              <span className="text-[#3b82f6] font-bold text-[10px]">NAB</span>
            </div>
            <span>Official Media Partner — NAB Show</span>
          </div>
        </div>
      </div>
    </footer>);

}