import Image from 'next/image';
import * as React from 'react';

import LogoBlack from '../assets/logo/Logo Black Transparent.svg';

export const Footer: React.FC = () => {
  const currentYear = new Date().getFullYear();

  return (
    <footer className="py-16 mt-24 border-t border-slate-100 bg-white relative z-10">
      <div className="narrow-container">
        <div className="grid grid-cols-1 md:grid-cols-2 gap-12 items-end">
          <div className="space-y-8">
            <div className="flex items-center gap-3">
              <Image
                src={LogoBlack}
                alt="Marc Mintel"
                height={72}
              />
            </div>
          </div>
          
          <div className="flex flex-col md:items-end gap-4 text-sm font-mono text-slate-300 uppercase tracking-widest">
            <span>© {currentYear}</span>
            <div className="flex gap-8">
              <a href="/about" className="hover:text-slate-900 transition-colors no-underline">Über mich</a>
              <a href="/contact" className="hover:text-slate-900 transition-colors no-underline">Kontakt</a>
              <a href="https://github.com/marcmintel" className="hover:text-slate-900 transition-colors no-underline">GitHub</a>
            </div>
          </div>
        </div>
      </div>
    </footer>
  );
};
