export function BrutalistMegaFooter() {
  const cols = [
    { h: "PRODUCT", items: ["Components", "Templates", "CLI", "Figma kit"] },
    { h: "RESOURCES", items: ["Docs", "Changelog", "Guides", "Status"] },
    { h: "COMPANY", items: ["About", "License", "Careers", "Press"] },
  ];

  return (
    <footer className="bg-[#111111] text-[#FAFAF8] px-8 py-14">
      <div className="mx-auto max-w-5xl">
        <div className="grid grid-cols-1 gap-0 border-2 border-[#FAFAF8] md:grid-cols-4">
          <div className="border-b-2 border-[#FAFAF8] p-7 md:border-b-0 md:border-r-2">
            <div
              className="text-[40px] font-bold leading-[0.9] tracking-[-0.03em]"
              style={{ fontFamily: "Arial, Helvetica, sans-serif" }}
            >
              VELYN
              <br />
              KIT®
            </div>
            <p className="mt-4 font-mono text-[11px] uppercase tracking-[0.1em] text-[#FAFAF8]/60">
              Ship loud. Build solid.
            </p>
          </div>

          {cols.map((c, idx) => (
            <div
              key={c.h}
              className={`p-7 ${
                idx < cols.length - 1
                  ? "border-b-2 border-[#FAFAF8] md:border-b-0 md:border-r-2"
                  : ""
              }`}
            >
              <h4 className="mb-4 font-mono text-[11px] font-bold tracking-[0.14em] text-[#FAFAF8]">
                {c.h}
              </h4>
              <ul className="space-y-2.5">
                {c.items.map((it) => (
                  <li key={it}>
                    <a
                      href="#"
                      className="text-[14px] font-medium text-[#FAFAF8]/75 underline-offset-4 hover:text-[#FAFAF8] hover:underline"
                    >
                      {it}
                    </a>
                  </li>
                ))}
              </ul>
            </div>
          ))}
        </div>

        <div className="mt-4 flex flex-wrap items-center justify-between gap-3 border-2 border-[#FAFAF8] bg-[#FAFAF8] px-5 py-3 font-mono text-[11px] font-bold uppercase tracking-[0.1em] text-[#111111]">
          <span>© 2026 — All wrongs reversed</span>
          <span>EST. BERLIN</span>
        </div>
      </div>
    </footer>
  );
}
Brutalist Mega Footer
