support_frontend/src/components/layout/footer.tsx

import * as React from 'react';
import { Headphones, Github, Twitter, Linkedin } from 'lucide-react';
import { cn } from '@/lib/utils';
import { Container } from '@/components/marketing/container';
import { Badge } from '@/components/ui/badge';
import { IconButton } from '@/components/ui/icon-button';

export interface FooterLink {
  label: string;
  href: string;
  external?: boolean;
}

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

export interface FooterProps extends React.HTMLAttributes<HTMLElement> {
  brandName?: string;
  description?: string;
  columns?: FooterColumn[];
  copyright?: string;
}

const defaultColumns: FooterColumn[] = [
  {
    title: 'Product',
    links: [
      { label: 'AI Support Co-Pilot', href: '#co-pilot' },
      { label: 'Omnichannel Ticketing', href: '#ticketing' },
      { label: 'Knowledge Base', href: '#knowledge-base' },
      { label: 'Analytics & SLA', href: '#analytics' },
      { label: 'Integrations', href: '#integrations' },
    ],
  },
  {
    title: 'Solutions',
    links: [
      { label: 'Enterprise SaaS', href: '#enterprise' },
      { label: 'E-Commerce', href: '#ecommerce' },
      { label: 'FinTech', href: '#fintech' },
      { label: 'Startups', href: '#startups' },
    ],
  },
  {
    title: 'Resources',
    links: [
      { label: 'Documentation', href: '#docs' },
      { label: 'API Reference', href: '#api' },
      { label: 'Guides & Case Studies', href: '#guides' },
      { label: 'Community', href: '#community' },
      { label: 'Status Page', href: '#status' },
    ],
  },
  {
    title: 'Company',
    links: [
      { label: 'About Us', href: '#about' },
      { label: 'Careers', href: '#careers' },
      { label: 'Blog', href: '#blog' },
      { label: 'Press Kit', href: '#press' },
      { label: 'Contact Sales', href: '#contact' },
    ],
  },
  {
    title: 'Legal',
    links: [
      { label: 'Privacy Policy', href: '#privacy' },
      { label: 'Terms of Service', href: '#terms' },
      { label: 'Security & SOC 2', href: '#security' },
      { label: 'GDPR Compliance', href: '#gdpr' },
    ],
  },
];

const Footer = React.forwardRef<HTMLElement, FooterProps>(
  (
    {
      className,
      brandName = 'SupportHub',
      description = 'The enterprise customer support platform built for modern high-growth SaaS teams.',
      columns = defaultColumns,
      copyright = `© ${new Date().getFullYear()} SupportHub, Inc. All rights reserved.`,
      ...props
    },
    ref
  ) => {
    return (
      <footer
        ref={ref}
        className={cn('w-full border-t border-border bg-card/50 text-foreground pt-16 pb-12', className)}
        {...props}
      >
        <Container size="wide">
          <div className="grid grid-cols-1 gap-12 lg:grid-cols-6 mb-16">
            {/* Brand Information Column */}
            <div className="lg:col-span-2 flex flex-col gap-4">
              <a href="/" className="flex items-center gap-2.5">
                <div className="h-9 w-9 rounded-xl bg-primary text-primary-foreground flex items-center justify-center font-bold shadow-sm">
                  <Headphones className="h-5 w-5" />
                </div>
                <span className="text-xl font-bold tracking-tight text-foreground">
                  {brandName}
                </span>
              </a>
              <p className="text-sm text-muted-foreground leading-relaxed max-w-sm">
                {description}
              </p>
              <div className="flex items-center gap-2 mt-2">
                <IconButton aria-label="GitHub" variant="ghost" size="sm" asChild>
                  <a href="https://github.com" target="_blank" rel="noopener noreferrer">
                    <Github className="h-4 w-4" />
                  </a>
                </IconButton>
                <IconButton aria-label="Twitter" variant="ghost" size="sm" asChild>
                  <a href="https://twitter.com" target="_blank" rel="noopener noreferrer">
                    <Twitter className="h-4 w-4" />
                  </a>
                </IconButton>
                <IconButton aria-label="LinkedIn" variant="ghost" size="sm" asChild>
                  <a href="https://linkedin.com" target="_blank" rel="noopener noreferrer">
                    <Linkedin className="h-4 w-4" />
                  </a>
                </IconButton>
              </div>
            </div>

            {/* Link Columns */}
            <div className="lg:col-span-4 grid grid-cols-2 sm:grid-cols-3 md:grid-cols-5 gap-8">
              {columns.map((col, idx) => (
                <div key={idx} className="flex flex-col gap-3">
                  <h4 className="text-xs font-semibold text-foreground uppercase tracking-wider">
                    {col.title}
                  </h4>
                  <ul className="flex flex-col gap-2.5">
                    {col.links.map((link, linkIdx) => (
                      <li key={linkIdx}>
                        <a
                          href={link.href}
                          className="text-xs sm:text-sm text-muted-foreground hover:text-foreground transition-colors"
                        >
                          {link.label}
                        </a>
                      </li>
                    ))}
                  </ul>
                </div>
              ))}
            </div>
          </div>

          {/* Bottom Bar */}
          <div className="pt-8 border-t border-border/60 flex flex-col sm:flex-row items-center justify-between gap-4 text-xs text-muted-foreground">
            <p>{copyright}</p>
            <div className="flex items-center gap-3">
              <Badge variant="success" size="sm" dot>
                All Systems Operational
              </Badge>
            </div>
          </div>
        </Container>
      </footer>
    );
  }
);

Footer.displayName = 'Footer';

export { Footer };