import { motion } from 'framer-motion'
import { Building2, Mail, MapPin, Phone } from 'lucide-react'
import { Link, useLocation } from 'react-router-dom'
import { COMPANY_INFO, NAVIGATION_MENU } from '../lib/constants'
import { getLocaleFromPathname, withLocalePath } from '../lib/i18n'

export const Footer: React.FC = () => {
  const location = useLocation()
  const locale = getLocaleFromPathname(location.pathname)
  const currentYear = new Date().getFullYear()

  return (
    <footer className="bg-primary-dark text-white" role="contentinfo">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-10">
          <div className="space-y-5">
            <Link
              to={withLocalePath(locale, '/')}
              className="inline-flex items-center gap-3"
              aria-label={locale === 'en' ? 'Go to homepage' : '返回首页'}
            >
              <div className="flex items-center justify-center w-10 h-10 rounded-lg bg-accent text-primary-dark">
                <Building2 size={22} />
              </div>
              <div>
                <div className="text-base font-semibold">{locale === 'en' ? COMPANY_INFO.nameEn : COMPANY_INFO.name}</div>
                <div className="text-[11px] tracking-wider text-white/70">{COMPANY_INFO.nameEn.toUpperCase()}</div>
              </div>
            </Link>

            <p className="text-sm text-white/75 leading-relaxed max-w-sm">{COMPANY_INFO.description}</p>

            <ul className="space-y-2 text-sm text-white/75">
              <li className="flex items-start gap-2">
                <MapPin size={16} className="mt-0.5 text-accent" />
                <span>{COMPANY_INFO.headquarters}</span>
              </li>
              <li className="flex items-start gap-2">
                <Phone size={16} className="mt-0.5 text-accent" />
                <span>{COMPANY_INFO.phone}</span>
              </li>
              <li className="flex items-start gap-2">
                <Mail size={16} className="mt-0.5 text-accent" />
                <span>{COMPANY_INFO.email}</span>
              </li>
            </ul>
          </div>

          <div>
            <h2 className="text-sm font-semibold tracking-wider text-white/90 uppercase">
              {locale === 'en' ? 'Navigation' : '网站导航'}
            </h2>
            <ul className="mt-4 space-y-2 text-sm">
              {NAVIGATION_MENU.filter((n) => n.id !== 'home').map((n) => (
                <li key={n.id}>
                  <Link
                    to={withLocalePath(locale, n.path)}
                    className="text-white/75 hover:text-white transition-colors"
                  >
                    {locale === 'en'
                      ? n.id === 'about'
                        ? 'About'
                        : n.id === 'scope'
                          ? 'Services'
                          : n.id === 'cases'
                            ? 'Cases'
                            : n.id === 'news'
                              ? 'News'
                              : n.id === 'learning'
                                ? 'Learning'
                                : n.id === 'assistant'
                                  ? 'AI Assistant'
                                  : n.id === 'contact'
                                    ? 'Contact'
                                    : n.label
                      : n.label}
                  </Link>
                </li>
              ))}
            </ul>
          </div>

          <div>
            <h2 className="text-sm font-semibold tracking-wider text-white/90 uppercase">
              {locale === 'en' ? 'Notes' : '说明'}
            </h2>
            <p className="mt-4 text-sm text-white/75 leading-relaxed">
              {locale === 'en'
                ? 'This website is a placeholder version. Content and data will be updated after official materials are provided.'
                : '本网站为占位版本，内容与数据后续将根据集团正式资料完善与更新。'}
            </p>
          </div>

          <div>
            <h2 className="text-sm font-semibold tracking-wider text-white/90 uppercase">
              {locale === 'en' ? 'Contact' : '联系'}
            </h2>
            <div className="mt-4 space-y-3 text-sm text-white/75">
              <div>
                <div className="text-white/60">{locale === 'en' ? 'Email' : '邮箱'}</div>
                <div className="text-white/85">{COMPANY_INFO.email}</div>
              </div>
              <div>
                <div className="text-white/60">{locale === 'en' ? 'Phone' : '电话'}</div>
                <div className="text-white/85">{COMPANY_INFO.phone}</div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div className="border-t border-white/10">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6 flex flex-col md:flex-row items-center justify-between gap-3">
          <motion.p className="text-xs text-white/60" initial={{ opacity: 0 }} whileInView={{ opacity: 1 }} viewport={{ once: true }}>
            © {currentYear} {COMPANY_INFO.fullName}. {locale === 'en' ? 'All rights reserved.' : '版权所有。'}
          </motion.p>
          <p className="text-xs text-white/50">{locale === 'en' ? 'ICP filing: TBD' : 'ICP备案：待补充'}</p>
        </div>
      </div>
    </footer>
  )
}

export default Footer