import Link from 'next/link';
import { ArrowUp, Terminal } from 'lucide-react';

const QUICK_LINKS = [
  { label: 'Quick Start',      href: '#quick-start'       },
  { label: 'Authentication',   href: '#auth'              },
  { label: 'Page Builder',     href: '#page-builder'      },
  { label: 'Database Schema',  href: '#database-schema'   },
  { label: 'API Routes',       href: '#api-routes'        },
  { label: 'Troubleshooting',  href: '#troubleshooting'   },
  { label: 'Deployment',       href: '#vercel'            },
  { label: 'Changelog',        href: '#changelog'         },
];

const OTHER_LINKS = [
  { label: 'Homepage',         href: '/'           },
  { label: 'Live Demo',        href: '/demo'       },
  { label: 'Buy — $49',        href: '/checkout'   },
  { label: 'Privacy Policy',   href: '/privacy'    },
  { label: 'Terms of Use',     href: '/terms'      },
  { label: 'Contact',          href: '/contact'    },
];

interface DocsFooterProps {
  /** Current version string displayed in the footer */
  version?: string;
}

export default function DocsFooter({ version = 'v1.0.0' }: DocsFooterProps) {
  return (
    <footer
      className="border-t border-gray-100 bg-white"
      style={{ fontFamily: "'DM Sans', system-ui, sans-serif" }}
      aria-label="Documentation footer"
    >
      {/* ── Main grid ─────────────────────────────────────────────── */}
      <div className="max-w-[860px] px-6 md:px-14 py-12 grid sm:grid-cols-2 gap-10 md:ml-56">

        {/* Quick links */}
        <div>
          <h3 className="text-[10px] font-semibold uppercase tracking-widest text-gray-400 mb-4">
            In this docs
          </h3>
          <ul className="grid grid-cols-2 gap-x-6 gap-y-2">
            {QUICK_LINKS.map(({ label, href }) => (
              <li key={label}>
                <a
                  href={href}
                  className="text-sm text-gray-500 hover:text-gray-900 transition-colors"
                >
                  {label}
                </a>
              </li>
            ))}
          </ul>
        </div>

        {/* Other links */}
        <div>
          <h3 className="text-[10px] font-semibold uppercase tracking-widest text-gray-400 mb-4">
            Other
          </h3>
          <ul className="grid grid-cols-2 gap-x-6 gap-y-2">
            {OTHER_LINKS.map(({ label, href }) => (
              <li key={label}>
                <Link
                  href={href}
                  className="text-sm text-gray-500 hover:text-gray-900 transition-colors"
                >
                  {label}
                </Link>
              </li>
            ))}
          </ul>
        </div>
      </div>

      {/* ── Bottom bar ────────────────────────────────────────────── */}
      <div className="border-t border-gray-100">
        <div className="max-w-[860px] px-6 md:px-14 py-4 flex items-center justify-between md:ml-56">
          {/* Logo + version */}
          <div className="flex items-center gap-2">
            <Link href="/" className="flex items-center gap-1.5 group" aria-label="NextDash home">
              <div className="w-5 h-5 rounded bg-gray-900 flex items-center justify-center group-hover:bg-gray-700 transition-colors">
                <Terminal className="w-3 h-3 text-white" />
              </div>
              <span className="text-xs font-medium text-gray-600 group-hover:text-gray-900 transition-colors">
                NextDash
              </span>
            </Link>
            <span className="text-[10px] font-mono text-gray-300 border border-gray-100 rounded px-1.5 py-0.5">
              {version}
            </span>
          </div>

          {/* Copyright */}
          <p className="text-[10px] text-gray-400 hidden sm:block">
            © {new Date().getFullYear()} NextDash. All rights reserved.
          </p>

          {/* Back to top */}
          <a
            href="#quick-start"
            className="flex items-center gap-1.5 text-xs text-gray-400 hover:text-gray-700 transition-colors"
            aria-label="Back to top"
          >
            Back to top
            <ArrowUp className="w-3.5 h-3.5" />
          </a>
        </div>
      </div>
    </footer>
  );
}