import { useLang } from '../context/LanguageContext';

export default function Footer() {
  const { t } = useLang();
  const currentYear = new Date().getFullYear();

  return (
    <footer className="bg-[#00243d] text-slate-300 py-16 border-t-[6px] border-untan-yellow">
      <div className="max-w-7xl mx-auto px-4 lg:px-8">
        <div className="grid grid-cols-1 md:grid-cols-4 gap-12 mb-16">
          {/* Brand */}
          <div className="md:col-span-2">
            <div className="flex items-center gap-4 mb-6">
              <img
                src="https://upload.wikimedia.org/wikipedia/id/0/03/Lambang_Universitas_Tanjungpura.png"
                alt="Logo UNTAN"
                className="w-12 h-12 object-contain"
              />
              <div className="flex flex-col">
                <span className="text-xl font-bold font-display uppercase tracking-widest leading-tight text-white m-0">INFORMATIKA</span>
                <span className="text-[10px] tracking-[0.15em] uppercase text-untan-yellow">UNTAN PONTIANAK</span>
              </div>
            </div>
            <p className="text-sm font-medium leading-relaxed max-w-md text-slate-400 whitespace-pre-line">
              {t.footer.desc}
            </p>
          </div>

          {/* Kategori */}
          <div>
            <h4 className="text-white font-bold text-sm uppercase mb-6 tracking-wide">{t.footer.kategori}</h4>
            <ul className="space-y-3 font-medium text-sm">
              <li>
                <a
                  href="https://informatika.untan.ac.id"
                  target="_blank"
                  rel="noopener noreferrer"
                  className="hover:text-untan-yellow transition-colors"
                >
                  {t.footer.berita}
                </a>
              </li>
              <li>
                <a
                  href="https://informatika.untan.ac.id"
                  target="_blank"
                  rel="noopener noreferrer"
                  className="hover:text-untan-yellow transition-colors"
                >
                  {t.footer.pengumuman}
                </a>
              </li>
              <li>
                <a
                  href="#achievement-grid-section"
                  onClick={(e) => {
                    e.preventDefault();
                    document.getElementById('achievement-grid-section')?.scrollIntoView({ behavior: 'smooth' });
                  }}
                  className="hover:text-untan-yellow transition-colors"
                >
                  {t.footer.prestasi}
                </a>
              </li>
            </ul>
          </div>

          {/* Tautan Penting */}
          <div>
            <h4 className="text-white font-bold text-sm uppercase mb-6 tracking-wide">{t.footer.tautan}</h4>
            <ul className="space-y-3 font-medium text-sm">
              <li>
                <a
                  href="https://siakad.untan.ac.id"
                  target="_blank"
                  rel="noopener noreferrer"
                  className="hover:text-untan-yellow transition-colors"
                >
                  {t.footer.siakad}
                </a>
              </li>
              <li>
                <a
                  href="https://elearning.untan.ac.id"
                  target="_blank"
                  rel="noopener noreferrer"
                  className="hover:text-untan-yellow transition-colors"
                >
                  {t.footer.elearning}
                </a>
              </li>
            </ul>
          </div>
        </div>

        {/* Bottom bar */}
        <div className="pt-8 border-t border-white/10 flex flex-col md:flex-row justify-between items-center gap-4 text-xs font-medium">
          <div>
            © {currentYear} Program Studi Informatika Universitas Tanjungpura. {t.footer.rights}
          </div>
          <div className="flex gap-6">
            <a href="#" className="hover:text-white transition-colors">{t.footer.privacy}</a>
            <a href="#" className="hover:text-white transition-colors">{t.footer.terms}</a>
          </div>
        </div>
      </div>
    </footer>
  );
}