function Footer() {
  const { t } = useLang();

  return (
    <footer className="border-t border-ink-100 bg-ink-50/40">
      <div className="max-w-[1200px] mx-auto px-6 md:px-10 py-12">
        <div className="grid md:grid-cols-4 gap-8">
          <div className="md:col-span-2">
            <div className="flex items-center gap-2.5">
              <IconLogo size={32}/>
              <div>
                <div className="text-[15px] font-extrabold text-ink-900">{t.brand.name}</div>
                <div className="text-[10.5px] font-bold uppercase tracking-[0.14em] text-ink-400">{t.brand.sub} · {t.brand.tagline}</div>
              </div>
            </div>
            <p className="mt-4 text-[14px] text-ink-500 max-w-sm leading-relaxed">{t.footer.tagline}</p>
            <div className="mt-4 flex items-center gap-2">
              <LangToggle/>
            </div>
          </div>

          <div>
            <div className="text-[11px] font-bold uppercase tracking-[0.14em] text-ink-400 mb-3">{t.footer.links.product}</div>
            <ul className="space-y-2 text-[13.5px] text-ink-600">
              <li><a href="#community" className="hover:text-hanyang-700">{t.nav.community}</a></li>
              <li><a href="#rewards" className="hover:text-hanyang-700">{t.nav.rewards}</a></li>
              <li><a href="#ai" className="hover:text-hanyang-700">{t.nav.ai}</a></li>
              <li><a href="#pricing" className="hover:text-hanyang-700">{t.nav.pricing}</a></li>
            </ul>
          </div>

          <div>
            <div className="text-[11px] font-bold uppercase tracking-[0.14em] text-ink-400 mb-3">{t.footer.links.company}</div>
            <ul className="space-y-2 text-[13.5px] text-ink-600">
              <li>Hanyang MBA</li>
              <li>Seoul, Korea</li>
              <li>
                <a href="mailto:kndli.210@gmail.com" className="hover:text-hanyang-700">
                  kndli.210@gmail.com
                </a>
              </li>
              <li>
                <a href="https://bella-nest.vercel.app/team" target="_blank" rel="noopener" className="hover:text-hanyang-700 inline-flex items-center gap-1">
                  드림팀 보기
                  <span className="text-[10px] text-ink-400">↗</span>
                </a>
              </li>
            </ul>
          </div>
        </div>

        <div className="mt-10 pt-6 border-t border-ink-100 flex flex-col md:flex-row items-start md:items-center justify-between gap-2">
          <div className="text-[12px] text-ink-400 font-medium">{t.footer.built}</div>
          <div className="flex items-center gap-4 text-[12px] text-ink-400">
            <span>Next.js 16</span>
            <span>·</span>
            <span>Supabase + pgvector</span>
            <span>·</span>
            <span>shadcn/ui</span>
          </div>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { Footer });