import Link from "next/link";
import Image from "next/image";

type FooterLink = { label: string; href: string };

type FooterColumn = {
  title: string;
  links: FooterLink[];
};

const socialLinks = [
  { href: "https://www.facebook.com/", icon: "fab fa-facebook-f" },
  { href: "https://www.twitter.com/", icon: "fab fa-twitter" },
  { href: "https://www.linkedin.com/", icon: "fab fa-linkedin-in" },
  { href: "https://www.whatsapp.com/", icon: "fab fa-whatsapp" },
];

const footerColumns: FooterColumn[] = [
  {
    title: "Product",
    links: [
      { label: "Product Tour", href: "/about" },
      { label: "Analytics", href: "/contact" },
      { label: "Product Overview", href: "/contact" },
      { label: "What's New", href: "/contact" },
      { label: "Templates", href: "/contact" },
    ],
  },
  {
    title: "Company",
    links: [
      { label: "What we Offer", href: "/about" },
      { label: "Our Story", href: "/contact" },
      { label: "Latest Posts", href: "/blog" },
      { label: "Help Center", href: "/contact" },
      { label: "Our Partners", href: "/contact" },
    ],
  },
  {
    title: "Resources",
    links: [
      { label: "Blog", href: "/blog" },
      { label: "Pricing", href: "/pricing" },
      { label: "FAQ", href: "/faq" },
      { label: "Events", href: "/portfolio" },
      { label: "Ebook & Guide", href: "/contact" },
    ],
  },
  {
    title: "Services",
    links: [
      { label: "Web Page Design", href: "/service-details" },
      { label: "WordPress Theme", href: "/service-details" },
      { label: "Web Application", href: "/service-details" },
      { label: "iOS Application", href: "/service-details" },
      { label: "UX Research", href: "/service-details" },
    ],
  },
];

export default function Footer() {
  return (
    <footer className="footer-wrapper bg-black2 footer-layout6">
      <div className="widget-area">
        <div className="container" style={{'marginTop': '50px'}}>
          <div className="row justify-content-between">
            {/* Brand / About */}
            <div className="col-md-6 col-xxl-3 col-xl-4">
              <div className="widget footer-widget">
                <div className="th-widget-about">
                  <div className="about-logo">
                    <Link className="icon-masking" href="/">
                      <Image
                        src="/assets/img/logo-white.png"
                        alt="12 Apostles Cathedral"
                        width={160}
                        height={48}
                      />
                    </Link>
                  </div>
                  <p className="about-text">
                    The history of the Cathedral of the Twelve Apostles is a testament to the unwavering faith, visionary leadership, and the relentless pursuit of spiritual growth within our community.
                  </p>
                  <div className="th-social">
                    {socialLinks.map((s) => (
                      <a key={s.href} href={s.href} target="_blank" rel="noopener noreferrer">
                        <i className={s.icon} />
                      </a>
                    ))}
                  </div>
                </div>
              </div>
            </div>

            {/* Link columns */}
            {footerColumns.map((col) => (
              <div key={col.title} className="col-md-6 col-xl-auto">
                <div className="widget widget_nav_menu footer-widget">
                  <h3 className="widget_title">{col.title}</h3>
                  <div className="menu-all-pages-container">
                    <ul className="menu">
                      {col.links.map((link) => (
                        <li key={link.label}>
                          <Link href={link.href}>{link.label}</Link>
                        </li>
                      ))}
                    </ul>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
      <div className="copyright-wrap border-0 text-center bg-title">
        <div className="container">
          <p className="copyright-text text-white">
            Copyright <i className="fal fa-copyright" /> 2025{" "}
            <a href="https://themeforest.net/user/themeholy" target="_blank" rel="noopener noreferrer">
              Sassa
            </a>
            . All Rights Reserved.
          </p>
        </div>
      </div>
    </footer>
  );
}