Modern Footer Layout

'use client';

import './MinimalFooterGrid.css';

/**
 * MinimalFooterGrid — Multi-column grid footer for project links and brand info.
 */
export interface MinimalFooterGridProps {
  brandName?: string;
  className?: string;
}

export function MinimalFooterGrid({ brandName = 'AstroKit', className = '' }: MinimalFooterGridProps) {
  return (
    <>
      <footer className={`m-footer ${className}`} data-rk-f90449="">
        <div className="f-row" data-rk-f90449="">
          <div className="f-info" data-rk-f90449="">
            <span className="f-brand" data-rk-f90449="">{brandName}</span>
            <span className="f-copy" data-rk-f90449="">© {new Date().getFullYear()} All rights reserved.</span>
          </div>
          <div className="f-links" data-rk-f90449="">
            <div className="f-col" data-rk-f90449="">
              <span className="f-col-title" data-rk-f90449="">Product</span>
              <a href="#components" data-rk-f90449="">Components</a>
              <a href="#docs" data-rk-f90449="">Documentation</a>
              <a href="#pricing" data-rk-f90449="">Pricing</a>
            </div>
            <div className="f-col" data-rk-f90449="">
              <span className="f-col-title" data-rk-f90449="">Community</span>
              <a href="https://github.com" target="_blank" rel="noopener" data-rk-f90449="">GitHub</a>
              <a href="https://discord.com" target="_blank" rel="noopener" data-rk-f90449="">Discord</a>
              <a href="https://x.com" target="_blank" rel="noopener" data-rk-f90449="">Twitter</a>
            </div>
          </div>
        </div>
      </footer>
    </>
  );
}

export default MinimalFooterGrid;

/* MinimalFooterGrid — ported from astro-component-kit (layout/MinimalFooterGrid.astro) */

.m-footer:where([data-rk-f90449]) {
  width: 100%;
  padding: 3rem 1.5rem;
  border-top: 1px solid rgb(var(--ink-rgb, 255 255 255) / 0.08);
  background: rgba(0, 0, 0, 0.2);
}
.f-row:where([data-rk-f90449]) {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 2rem;
}
.f-info:where([data-rk-f90449]) {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.f-brand:where([data-rk-f90449]) {
  font-weight: 800;
  font-size: 1.2rem;
  color: #fff;
}
.f-copy:where([data-rk-f90449]) {
  font-size: 0.8rem;
  color: #64748b;
}
.f-links:where([data-rk-f90449]) {
  display: flex;
  gap: 3rem;
}
.f-col:where([data-rk-f90449]) {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.f-col-title:where([data-rk-f90449]) {
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #94a3b8;
  margin-bottom: 0.25rem;
}
a:where([data-rk-f90449]) {
  color: #cbd5e1;
  font-size: 0.85rem;
  text-decoration: none;
  transition: color 0.2s ease;
}
a:hover:where([data-rk-f90449]) {
  color: #fff;
}