import Link from "next/link";
import "./site-footer.css";

type FooterItem = { label: string; href?: string };

type FooterColumn = {
  heading: string;
  items: FooterItem[];
};

const footerColumns: FooterColumn[] = [
  {
    heading: "Platform",
    items: [
      { label: "Portfolio Management" },
      { label: "Trade Lifecycle Management" },
      { label: "Reporting & Client Intelligence" },
      { label: "Compliance & Regulatory Management" },
      { label: "DeepDex Data Infrastructure" },
      { label: "Administration" },
    ],
  },
  {
    heading: "Who We Serve",
    items: [
      { label: "Wealth Managers" },
      { label: "Asset Managers" },
      { label: "Multi-Family Offices" },
      { label: "Independent Advisors" },
    ],
  },
  {
    heading: "Company",
    items: [
      { label: "About Oxyfinz", href: "/about" },
      { label: "Security" },
      { label: "Pricing" },
      { label: "Insights" },
      { label: "FAQs" },
    ],
  },
  {
    heading: "Connect",
    items: [
      { label: "Contact Us", href: "/contact" },
      { label: "Book a Demo", href: "/contact" },
    ],
  },
  {
    heading: "Legal",
    items: [
      { label: "Terms & Conditions", href: "/terms" },
      { label: "Privacy Policy", href: "/privacy" },
      { label: "Cookies Policy", href: "/cookies" },
      { label: "Refund Policy", href: "/refund" },
    ],
  },
];

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

  return (
    <section className="wwd-section wwd-section--follow" id="footer">
      <div className="wwd-inner site-footer-row">
        <div className="site-footer-brand">
          <Link href="/" aria-label="Oxyfinz home" data-oxy-home data-oxy-href="/">
            <img src="/oxyfinz-logo.png" alt="Oxyfinz" />
          </Link>
          <p className="site-footer-tagline">
            One dashboard. Every portfolio. Every data point. Built for wealth
            managers, asset managers and family offices.
          </p>
        </div>
        <div className="site-footer-cols">
          {footerColumns.map((column) => (
            <div className="site-footer-col" key={column.heading}>
              <h3 className="site-footer-heading">{column.heading}</h3>
              {column.items.map((item) =>
                item.href ? (
                  <Link key={item.label} href={item.href} data-oxy-href={item.href} className="site-footer-cell">
                    {item.label}
                  </Link>
                ) : (
                  <span key={item.label} className="site-footer-cell">
                    {item.label}
                  </span>
                )
              )}
            </div>
          ))}
        </div>
      </div>
      <div className="wwd-inner site-footer-bottom">
        <p className="site-footer-copy">&copy; {year} Oxyfinz. All rights reserved.</p>
        <div className="site-footer-social">
          <Link href="/sme-initiative" data-oxy-href="/sme-initiative" className="site-footer-bottom-link">
            SME Initiative
          </Link>
          <span className="site-footer-social-icon" aria-label="LinkedIn">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
              <path d="M20.45 20.45h-3.55v-5.57c0-1.33-.02-3.03-1.85-3.03-1.85 0-2.14 1.45-2.14 2.94v5.66H9.36V9h3.41v1.56h.05c.47-.9 1.63-1.85 3.36-1.85 3.6 0 4.27 2.37 4.27 5.45v6.29zM5.34 7.43a2.06 2.06 0 1 1 0-4.12 2.06 2.06 0 0 1 0 4.12zM7.12 20.45H3.56V9h3.56v11.45z" />
            </svg>
            LinkedIn
          </span>
        </div>
      </div>
    </section>
  );
}