Mega Footer Links

"use client";

interface LinkColumn {
  title: string;
  links: { label: string; url: string }[];
}

interface MegaFooterLinksProps {
  companyName?: string;
  description?: string;
  columns?: LinkColumn[];
  copyright?: string;
}

export default function MegaFooterLinks({
  companyName = "Entreprise",
  description = "Solutions digitales sur mesure.",
  columns = [],
  copyright = "Tous droits reserves.",
}: MegaFooterLinksProps) {
  return (
    <footer
      style={{
        paddingTop: "var(--section-padding-y)",
        paddingBottom: "2rem",
        background: "var(--color-background-dark)",
      }}
    >
      <div
        className="mx-auto"
        style={{
          maxWidth: "var(--container-max-width)",
          paddingLeft: "var(--container-padding-x)",
          paddingRight: "var(--container-padding-x)",
        }}
      >
        <div className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-5 gap-8 mb-12">
          {/* Brand */}
          <div className="col-span-2 md:col-span-4 lg:col-span-1">
            <h3
              className="text-lg font-bold mb-3"
              style={{ color: "var(--color-foreground-on-dark)" }}
            >
              {companyName}
            </h3>
            <p className="text-sm leading-relaxed max-w-xs" style={{ color: "var(--color-foreground-on-dark)", opacity: 0.6 }}>
              {description}
            </p>
          </div>

          {/* Link columns */}
          {columns.map((col) => (
            <div key={col.title}>
              <h4
                className="text-sm font-semibold mb-4"
                style={{ color: "var(--color-foreground-on-dark)" }}
              >
                {col.title}
              </h4>
              <ul className="flex flex-col gap-2.5">
                {col.links.map((link) => (
                  <li key={link.label}>
                    <a
                      href={link.url}
                      className="text-sm transition-opacity hover:opacity-100"
                      style={{
                        color: "var(--color-foreground-on-dark)",
                        opacity: 0.5,
                        textDecoration: "none",
                      }}
                    >
                      {link.label}
                    </a>
                  </li>
                ))}
              </ul>
            </div>
          ))}
        </div>

        <div
          className="pt-6 text-center"
          style={{ borderTop: "1px solid rgba(255,255,255,0.1)" }}
        >
          <p className="text-xs" style={{ color: "var(--color-foreground-on-dark)", opacity: 0.4 }}>
            {new Date().getFullYear()} {companyName}. {copyright}
          </p>
        </div>
      </div>
    </footer>
  );
}