Portfolio/src/components/layout/Footer.tsx

import Link from 'next/link';
import { getLocale, getTranslations } from 'next-intl/server';
import { Mail, Linkedin, Github, MapPin } from 'lucide-react';

const Footer = async () => {
  const locale = await getLocale();
  const t = await getTranslations('footer');
  const currentYear = new Date().getFullYear();

  return (
    <footer className="relative bg-card/50 backdrop-blur-sm border-t border-border/30 pt-6 sm:pt-8 pb-4 px-4 sm:px-6 lg:px-8">
      <div className="max-w-7xl mx-auto">
        <div className="flex flex-col sm:grid sm:grid-cols-2 lg:grid-cols-4 gap-6 sm:gap-8">
          {/* Contact Section */}
          <div>
            <h3 className="text-foreground text-base font-semibold mb-3">
              {t('sections.contact.title')}
            </h3>
            <div className="space-y-2">
              <a
                href={`mailto:${t('sections.contact.email')}`}
                className="group flex items-center gap-2 text-muted-foreground hover:text-foreground transition-colors duration-200 text-sm w-fit"
              >
                <Mail className="h-4 w-4 text-muted-foreground group-hover:text-foreground transition-colors duration-200 flex-shrink-0" />
                <span>{t('sections.contact.email')}</span>
              </a>
              <div className="flex items-center gap-2 text-muted-foreground text-sm w-fit">
                <MapPin className="h-4 w-4 text-muted-foreground flex-shrink-0" />
                <span>{t('sections.contact.location')}</span>
              </div>
            </div>
          </div>

          {/* Navigation Section */}
          <div>
            <h3 className="text-foreground text-base font-semibold mb-3 text-left">
              {t('sections.navigation.title')}
            </h3>
            <nav className="flex flex-col space-y-2">
              <Link
                href={`/${locale}/portfolio`}
                className="text-muted-foreground hover:text-foreground transition-colors duration-200 text-sm w-fit"
              >
                {t('sections.navigation.links.portfolio')}
              </Link>
              <Link
                href={`/${locale}/blog`}
                className="text-muted-foreground hover:text-foreground transition-colors duration-200 text-sm w-fit"
              >
                {t('sections.navigation.links.blog')}
              </Link>
              <Link
                href={`/${locale}/about`}
                className="text-muted-foreground hover:text-foreground transition-colors duration-200 text-sm w-fit"
              >
                {t('sections.navigation.links.about')}
              </Link>
              <Link
                href={`/${locale}/contact`}
                className="text-muted-foreground hover:text-foreground transition-colors duration-200 text-sm w-fit"
              >
                {t('sections.navigation.links.contact')}
              </Link>
            </nav>
          </div>

          {/* Social Media Section */}
          <div>
            <h3 className="text-foreground text-base font-semibold mb-3 text-left">
              {t('sections.social.title')}
            </h3>
            <div className="flex space-x-4">
              <a
                href="https://www.linkedin.com/in/damjan-savić-720288127/"
                target="_blank"
                rel="noopener noreferrer"
                className="group text-muted-foreground hover:text-foreground transition-colors duration-200"
                aria-label="LinkedIn"
              >
                <Linkedin className="transform transition-transform group-hover:scale-110" size={20} />
              </a>
              <a
                href="https://github.com/damjan1996"
                target="_blank"
                rel="noopener noreferrer"
                className="group text-muted-foreground hover:text-foreground transition-colors duration-200"
                aria-label="GitHub"
              >
                <Github className="transform transition-transform group-hover:scale-110" size={20} />
              </a>
            </div>
          </div>

          {/* Legal Section */}
          <div className="border-t sm:border-t-0 lg:border-t border-border/30 pt-4 sm:pt-0 lg:pt-4">
            <div className="flex flex-col space-y-4">
              <p className="text-muted-foreground text-xs text-left">
                &copy; {currentYear} Damjan Savić. {t('legal.copyright')}
              </p>
              <div className="flex space-x-4">
                <Link
                  href={`/${locale}/privacy`}
                  className="text-muted-foreground hover:text-foreground text-xs transition-colors duration-200"
                >
                  {t('legal.links.privacy')}
                </Link>
                <Link
                  href={`/${locale}/imprint`}
                  className="text-muted-foreground hover:text-foreground text-xs transition-colors duration-200"
                >
                  {t('legal.links.imprint')}
                </Link>
                <Link
                  href={`/${locale}/terms`}
                  className="text-muted-foreground hover:text-foreground text-xs transition-colors duration-200"
                >
                  {t('legal.links.terms')}
                </Link>
              </div>
            </div>
          </div>
        </div>
      </div>
    </footer>
  );
};

export default Footer;