"use client";

import Link from "next/link";
import { socialIcons } from "./icons";
import { socials, type FooterLink, type HomeContent } from "@/lib/content";
import { trackNav } from "@/components/Tracking";
import Image from "@/components/Image";

const F = { fontFamily: "Lato,sans-serif" };

/** Prepend "/" to bare hash links so they navigate to the home page hash from any page. */
function footerHref(link: FooterLink): string {
  return link.url.startsWith("#") ? `/${link.url}` : link.url;
}

export default function Footer({ content }: { content: HomeContent }) {
  const { footer } = content;
  return (
    <footer style={{ background: "rgba(255,255,255,.5)", backdropFilter: "blur(12px)", WebkitBackdropFilter: "blur(12px)", borderTop: "1px solid rgba(255,255,255,.7)", padding: "64px 56px 30px", color: "#4a4f54" }}>
      <div className="footer-grid" style={{ maxWidth: 1280, margin: "0 auto" }}>
        <div>
          <Image src={footer.logo || "/img/logo.webp"} alt="Sigma Tax Pro" style={{ height: 42 }} />
          <p style={{ ...F, fontSize: 14, lineHeight: 1.6, margin: "18px 0 0", maxWidth: 280 }}>{footer.blurb}</p>
          <p style={{ ...F, fontSize: 13, margin: "16px 0 0", color: "#1b2023" }}>
            {footer.address}<br />{footer.phone}
          </p>
          <div style={{ display: "flex", gap: 10, marginTop: 20 }}>
            {socials.map((s) => {
              const Icon = socialIcons[s.icon];
              return (
                <a key={s.label} className="social-link hv2" href={s.href} aria-label={s.label} target="_blank" rel="noopener noreferrer" style={{ display: "inline-flex", alignItems: "center", justifyContent: "center", width: 36, height: 36, border: "1px solid rgba(2,47,49,.18)", color: "#4a4f54", transition: "background .12s, color .12s, border-color .12s" }}>
                  <Icon />
                </a>
              );
            })}
          </div>
        </div>
        <div>
          <h5 style={{ ...F, color: "#1b2023", fontSize: 13, letterSpacing: ".06em", textTransform: "uppercase", margin: "0 0 14px" }}>{footer.col1Heading}</h5>
          <div style={{ display: "flex", flexDirection: "column", gap: 9, ...F, fontSize: 14 }}>
            {footer.col1Links.map((link) => (
              <a key={link.label} className="footer-link" href={footerHref(link)} onClick={() => trackNav("Footer", link.label)}>{link.label}</a>
            ))}
          </div>
        </div>
        <div>
          <h5 style={{ ...F, color: "#1b2023", fontSize: 13, letterSpacing: ".06em", textTransform: "uppercase", margin: "0 0 14px" }}>{footer.col2Heading}</h5>
          <div style={{ display: "flex", flexDirection: "column", gap: 9, ...F, fontSize: 14 }}>
            {footer.col2Links.map((link) => (
              <a key={link.label} className="footer-link" href={footerHref(link)} onClick={() => trackNav("Footer", link.label)}>{link.label}</a>
            ))}
          </div>
        </div>
        <div>
          <h5 style={{ ...F, color: "#1b2023", fontSize: 13, letterSpacing: ".06em", textTransform: "uppercase", margin: "0 0 14px" }}>{footer.col3Heading}</h5>
          <div style={{ display: "flex", flexDirection: "column", gap: 9, ...F, fontSize: 14 }}>
            {footer.col3Links.map((link) => (
              link.label === "Blog"
                ? <Link key={link.label} className="footer-link" href={footerHref(link)} onClick={() => trackNav("Footer", link.label)}>{link.label}</Link>
                : <a key={link.label} className="footer-link" href={footerHref(link)} onClick={() => trackNav("Footer", link.label)}>{link.label}</a>
            ))}
          </div>
        </div>
      </div>
      <div style={{ maxWidth: 1280, margin: "40px auto 0", paddingTop: 22, borderTop: "1px solid rgba(2,47,49,.10)", display: "flex", justifyContent: "space-between", gap: 16, flexWrap: "wrap", ...F, fontSize: 13 }}>
        <span>&copy; {new Date().getFullYear()} Sigma Tax Pro LLC. All rights reserved.</span>
        <span style={{ display: "flex", gap: 18, flexWrap: "wrap" }}>
          {footer.legalLinks.map((link) => (
            <a key={link.label} className="footer-link" href={link.url} onClick={() => trackNav("Footer", link.label)}>{link.label}</a>
          ))}
        </span>
      </div>
    </footer>
  );
}