function Footer() {
  const { lang, t } = useLang();
  const year = new Date().getFullYear();
  const siteVersion = window.__OFUQ_SITE_VERSION__ || 'v1.0.0';

  const goTo = (id) => {
    const el = document.getElementById(id);
    if (el) {
      const top = el.getBoundingClientRect().top + window.scrollY - 70;
      window.scrollTo({ top, behavior: 'smooth' });
    }
  };

  return (
    <footer className="relative pt-20 pb-10 border-t border-white/8">
      <div className="absolute inset-0 -z-10 grid-dots opacity-30 [mask-image:radial-gradient(circle_at_50%_0%,black_0%,transparent_70%)]" />

      <div className="mx-auto max-w-7xl px-5 lg:px-8">
        <div className="grid lg:grid-cols-12 gap-10 mb-12">
          <div className="lg:col-span-5">
            <OfuqLogo height={28} />
            <p className={`mt-5 text-white/55 max-w-sm leading-relaxed ${lang === 'ar' ? 'text-[14.5px]' : 'text-[14px]'}`}>
              {t.footer.tagline}
            </p>
          </div>

          <div className="lg:col-span-2">
            <div className="text-[11px] uppercase tracking-[0.2em] text-white/40 mb-4" style={{ fontFamily: 'Inter, sans-serif' }}>{t.footer.links}</div>
            <ul className="space-y-2.5">
              {['home', 'services', 'taboor', 'about', 'contact'].map(id => (
                <li key={id}>
                  <button onClick={() => goTo(id)} className="text-[13.5px] text-white/65 hover:text-white transition">
                    {t.nav[id === 'taboor' ? 'taboor' : id]}
                  </button>
                </li>
              ))}
            </ul>
          </div>

          <div className="lg:col-span-2">
            <div className="text-[11px] uppercase tracking-[0.2em] text-white/40 mb-4" style={{ fontFamily: 'Inter, sans-serif' }}>{t.footer.products}</div>
            <ul className="space-y-2.5">
              <li>
                <a href="https://taboor.ofuq.tech" target="_blank" rel="noopener noreferrer" className="text-[13.5px] text-white/65 hover:text-white transition inline-flex items-center gap-1.5">
                  Taboor <I.External size={11} />
                </a>
              </li>
            </ul>
          </div>

          <div className="lg:col-span-3">
            <div className="text-[11px] uppercase tracking-[0.2em] text-white/40 mb-4" style={{ fontFamily: 'Inter, sans-serif' }}>{t.footer.reach}</div>
            <ul className="space-y-2.5" style={{ direction: 'ltr', textAlign: lang === 'ar' ? 'right' : 'left' }}>
              <li>
                <a href="mailto:info@ofuq.tech" className="text-[13.5px] text-white/65 hover:text-white transition" style={{ fontFamily: 'Inter, sans-serif' }}>
                  info@ofuq.tech
                </a>
              </li>
              <li>
                <a href="https://ofuq.tech" className="text-[13.5px] text-white/65 hover:text-white transition" style={{ fontFamily: 'Inter, sans-serif' }}>
                  ofuq.tech
                </a>
              </li>
            </ul>
          </div>
        </div>

        <div className="pt-6 border-t border-white/8 flex flex-col sm:flex-row items-center justify-between gap-3 text-[12.5px] text-white/40">
          <div style={{ fontFamily: lang === 'ar' ? 'Cairo' : 'Inter' }}>
            © {year} OFUQ Tech · {t.footer.rights}
          </div>
          <div className="flex items-center gap-2" style={{ fontFamily: lang === 'ar' ? 'Cairo' : 'Inter' }}>
            <span className="inline-flex items-center gap-1 rounded-full border border-white/12 px-2 py-0.5 text-[11.5px] text-white/55">
              {t.footer.version}: {siteVersion}
            </span>
            <span className="w-1 h-1 rounded-full bg-purple-400/70" />
            <span>{t.footer.built}</span>
          </div>
        </div>
      </div>
    </footer>
  );
}

window.Footer = Footer;