import Link from "next/link";
import { LogoStacked } from "./logo";
import { localize } from "@/i18n/config";
import { industryLinks, serviceLinks } from "@/i18n/nav";
import { getUI } from "@/i18n/server";

// The profiles linked from the current aigrowthtechnologies.com footer.
const socials = [
  {
    label: "Instagram",
    href: "https://www.instagram.com/aigrowthmediaservice/",
    icon: (
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.4">
        <rect x="3" y="3" width="18" height="18" rx="5" />
        <circle cx="12" cy="12" r="4" />
        <path d="M17.5 6.5v.01" />
      </svg>
    ),
  },
  {
    label: "Facebook",
    href: "https://www.facebook.com/growth360partners",
    icon: (
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.4">
        <path d="M14 8h3V4h-3a4 4 0 0 0-4 4v3H7v4h3v6h4v-6h3l1-4h-4V8z" />
      </svg>
    ),
  },
  {
    label: "LinkedIn",
    href: "https://www.linkedin.com/company/growth360partners",
    icon: (
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.4">
        <rect x="3" y="3" width="18" height="18" />
        <path d="M8 10v7M8 7v.01M12 17v-4a2 2 0 0 1 4 0v4M12 10v7" />
      </svg>
    ),
  },
];

export default async function SiteFooter() {
  const { locale, t } = await getUI();
  const columns = [
    { title: t.nav.services, links: serviceLinks(t, locale) },
    { title: t.nav.industries, links: industryLinks(t, locale) },
    {
      title: t.footer.company,
      links: [
        { label: t.nav.about, href: localize("/about", locale) },
        { label: t.nav.allServices, href: localize("/services", locale) },
        { label: t.nav.allIndustries, href: localize("/industries", locale) },
        { label: t.nav.contact, href: localize("/contact", locale) },
        { label: t.sitemap.nav, href: localize("/sitemap", locale) },
      ],
    },
  ];

  return (
    <footer className="footer">
      <div className="wrap">
        <div className="footer-top">
          <div className="footer-brand">
            <LogoStacked href={localize("/", locale)} label={t.logoHome} />
            <p>{t.footer.tagline}</p>
            <div className="socials">
              {socials.map((s) => (
                <a key={s.label} href={s.href} aria-label={s.label} target="_blank" rel="noopener noreferrer">
                  {s.icon}
                </a>
              ))}
            </div>
          </div>
          <div className="footer-cols">
            {columns.map((col) => (
              <div key={col.title}>
                <h4>{col.title}</h4>
                <ul>
                  {col.links.map((l) => (
                    <li key={l.href}>
                      <Link href={l.href}>{l.label}</Link>
                    </li>
                  ))}
                </ul>
              </div>
            ))}
          </div>
        </div>
        <p className="footer-word" aria-hidden="true" dir="ltr">
          AI Growth Technologies
        </p>
        <div className="footer-bottom">
          <span>{t.footer.rights}</span>
          <span>{t.footer.cities}</span>
        </div>
      </div>
    </footer>
  );
}