Footer Brutalist

"use client";

import { motion } from "framer-motion";
import { ArrowUpRight } from "lucide-react";

interface FooterLink {
  label: string;
  href: string;
}

interface FooterColumn {
  title: string;
  links: FooterLink[];
}

interface SocialLink {
  platform: string;
  href: string;
}

interface FooterBrutalistProps {
  brandName?: string;
  brandTagline?: string;
  columns?: FooterColumn[];
  socialLinks?: SocialLink[];
  copyright?: string;
}

export default function FooterBrutalist({
  brandName = "Brand",
  brandTagline = "",
  columns = [],
  socialLinks = [],
  copyright = "",
}: FooterBrutalistProps) {
  return (
    <footer
      style={{
        background: "var(--color-background-dark)",
        color: "var(--color-foreground-on-dark)",
        borderTop: "4px solid var(--color-foreground)",
      }}
    >
      {/* Brand banner */}
      <div
        style={{
          borderBottom: "3px solid var(--color-border-dark)",
          padding: "2rem var(--container-padding-x)",
          maxWidth: "var(--container-max-width)",
          margin: "0 auto",
        }}
      >
        <motion.h2
          initial={{ opacity: 0, y: 20 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true }}
          transition={{ duration: 0.5 }}
          style={{
            fontSize: "clamp(2.5rem, 6vw, 5rem)",
            fontWeight: 900,
            textTransform: "uppercase",
            letterSpacing: "-0.03em",
            lineHeight: 1,
            color: "var(--color-foreground-on-dark)",
          }}
        >
          {brandName}
        </motion.h2>
        {brandTagline && (
          <p
            style={{
              marginTop: "0.75rem",
              fontSize: "0.875rem",
              textTransform: "uppercase",
              letterSpacing: "0.15em",
              color: "var(--color-foreground-muted)",
            }}
          >
            {brandTagline}
          </p>
        )}
      </div>

      {/* Columns */}
      <div
        style={{
          maxWidth: "var(--container-max-width)",
          margin: "0 auto",
          padding: "2.5rem var(--container-padding-x)",
          display: "grid",
          gridTemplateColumns: "1fr",
          gap: "2rem",
          borderBottom: "3px solid var(--color-border-dark)",
        }}
        className="md:!grid-cols-2 lg:!grid-cols-4"
      >
        {columns.map((col) => (
          <div key={col.title}>
            <h4
              style={{
                fontSize: "0.6875rem",
                fontWeight: 800,
                textTransform: "uppercase",
                letterSpacing: "0.2em",
                color: "var(--color-accent)",
                marginBottom: "1.25rem",
                borderBottom: "2px solid var(--color-accent)",
                paddingBottom: "0.5rem",
                display: "inline-block",
              }}
            >
              {col.title}
            </h4>
            <div style={{ display: "flex", flexDirection: "column", gap: "0.625rem" }}>
              {col.links.map((link) => (
                <a
                  key={link.href + link.label}
                  href={link.href}
                  style={{
                    fontSize: "0.8125rem",
                    fontWeight: 600,
                    textTransform: "uppercase",
                    letterSpacing: "0.05em",
                    color: "var(--color-foreground-on-dark)",
                    textDecoration: "none",
                    display: "inline-flex",
                    alignItems: "center",
                    gap: "0.25rem",
                  }}
                >
                  {link.label}
                  <ArrowUpRight style={{ width: 12, height: 12, opacity: 0.5 }} />
                </a>
              ))}
            </div>
          </div>
        ))}
      </div>

      {/* Bottom */}
      <div
        style={{
          maxWidth: "var(--container-max-width)",
          margin: "0 auto",
          padding: "1.5rem var(--container-padding-x)",
          display: "flex",
          flexWrap: "wrap",
          justifyContent: "space-between",
          alignItems: "center",
          gap: "1rem",
        }}
      >
        <p
          style={{
            fontSize: "0.6875rem",
            fontWeight: 700,
            textTransform: "uppercase",
            letterSpacing: "0.1em",
            color: "var(--color-foreground-muted)",
          }}
        >
          {copyright}
        </p>
        {socialLinks.length > 0 && (
          <div style={{ display: "flex", gap: "1.5rem" }}>
            {socialLinks.map((s) => (
              <a
                key={s.platform}
                href={s.href}
                style={{
                  fontSize: "0.75rem",
                  fontWeight: 800,
                  textTransform: "uppercase",
                  letterSpacing: "0.1em",
                  color: "var(--color-foreground-on-dark)",
                  textDecoration: "none",
                  borderBottom: "2px solid var(--color-accent)",
                  paddingBottom: "2px",
                }}
              >
                {s.platform}
              </a>
            ))}
          </div>
        )}
      </div>
    </footer>
  );
}