frontend/src/components/layout/Footer.tsx

import { Database } from 'lucide-react';

export function Footer() {
  return (
    <footer className="bg-slate-900 text-white mt-12">
      <div className="max-w-7xl mx-auto px-6 py-8 flex flex-col md:flex-row gap-4 items-center justify-between">
        <div className="flex items-center gap-2">
          <Database className="w-5 h-5" />
          <span className="font-semibold">MuSProt</span>
        </div>
        <p className="text-sm text-slate-400">
          Multistate protein structures, pairwise comparisons, energy scores, and functional annotations.
        </p>
        <a
          href="https://huggingface.co/spaces/omaib/MuSProt"
          target="_blank"
          rel="noopener noreferrer"
          className="text-sm text-slate-400 hover:text-white transition-colors"
        >
          Hosted on Hugging Face
        </a>
      </div>
    </footer>
  );
}