'use client';

import Link from 'next/link';
import { useLanguage } from '@/context/LanguageContext';

export default function Footer() {
  const { t } = useLanguage();

  return (
    <footer className="bg-surface-container w-full py-12">
      <div className="flex flex-col md:flex-row justify-between items-center px-12 w-full max-w-screen-2xl mx-auto gap-8">
        <div className="flex flex-col items-center md:items-start gap-2">
          <div className="font-headline font-black text-on-surface text-2xl tracking-tighter">
            KINETIC PRECISION
          </div>
          <p className="font-body text-sm tracking-wide text-on-surface-variant">
            {t('footer_rights')}
          </p>
        </div>

        <div className="flex flex-wrap justify-center gap-8">
          <Link href="#" className="font-body text-sm tracking-wide text-on-surface-variant hover:text-on-surface transition-all hover:underline">
            {t('footer_contact')}
          </Link>
          <Link href="#" className="font-body text-sm tracking-wide text-on-surface-variant hover:text-on-surface transition-all hover:underline">
            {t('footer_legal')}
          </Link>
          <Link href="#" className="font-body text-sm tracking-wide text-on-surface-variant hover:text-on-surface transition-all hover:underline">
            {t('footer_privacy')}
          </Link>
          <Link href="#" className="font-body text-sm tracking-wide text-on-surface-variant hover:text-on-surface transition-all hover:underline">
            {t('footer_sustainability')}
          </Link>
        </div>

        <div className="flex gap-4">
          <div className="w-10 h-10 rounded-full bg-surface-container-high flex items-center justify-center hover:bg-primary hover:text-on-primary transition-all cursor-pointer">
            <span className="material-symbols-outlined text-lg">share</span>
          </div>
          <div className="w-10 h-10 rounded-full bg-surface-container-high flex items-center justify-center hover:bg-primary hover:text-on-primary transition-all cursor-pointer">
            <span className="material-symbols-outlined text-lg">public</span>
          </div>
        </div>
      </div>
    </footer>
  );
}