import { Link } from 'react-router-dom'
import type { MouseEvent } from 'react'
import { PRIMARY_NAV } from '@/data/nav'
import { getCMSConfig, useCMS, useCMSTexts } from '@/services/cms'

export default function Footer() {
  const { data: config } = useCMS(getCMSConfig, null)
  const { data: texts } = useCMSTexts()
  const hotline = String(config?.hotline || '').trim()
  const phoneLink = hotline.replace(/[^\d+]/g, '')
  const companyName = texts['footer.company'] || '成都阿美巴企业管理咨询有限公司'
  const address = String(config?.contact_address || '四川省成都市双流区正兴街道湖畔路北段366号1栋3楼1号').trim()
  // Desktop falls back to AMap's web search. On phones use the operating system's
  // map-navigation scheme so the user's installed/default map app handles the route.
  const amapLink = `https://uri.amap.com/search?keyword=${encodeURIComponent(address)}&city=${encodeURIComponent('成都')}&view=map&src=ameiba`
  const openNavigation = (event: MouseEvent<HTMLAnchorElement>) => {
    const ua = window.navigator.userAgent
    const destination = encodeURIComponent(address)
    if (/Android/i.test(ua)) {
      event.preventDefault()
      window.location.href = `geo:0,0?q=${destination}`
    } else if (/iPhone|iPad|iPod/i.test(ua)) {
      event.preventDefault()
      window.location.href = `maps://?q=${destination}`
    }
  }
  return (
    <footer className="site-footer">
      <div className="container footer-grid">
        <div>
          <div className="footer-brand">{companyName}</div>
          <p className="footer-desc">
            {texts['footer.description'] || config?.slogan || '帮助企业看清位置、找到方向、持续进化。'}
          </p>
          <a className="footer-address" href={amapLink} onClick={openNavigation} aria-label={`导航至${address}`}>
            <span>{texts['footer.address_title'] || '公司地址'}</span>
            <strong>{address}</strong>
            <em>{texts['footer.navigate_label'] || '打开地图导航'} →</em>
          </a>
        </div>
        <div>
          <h4>{texts['footer.navigation_title'] || '网站导航'}</h4>
          <ul>
            {PRIMARY_NAV.map(n => (
              <li key={n.key}>
                <Link to={n.path}>{n.label}</Link>
              </li>
            ))}
          </ul>
        </div>
        <div>
          <h4>{texts['footer.action_title'] || '行动入口'}</h4>
          <ul>
            <li>
              <Link to="/self-check">看看你的企业（轻量对照）</Link>
            </li>
            <li>
              <Link to="/contact">咨询获取方案</Link>
            </li>
          </ul>
          {(hotline || config?.contact_email) && <p className="footer-desc" style={{marginTop:16}}>
            {hotline && <a className="footer-contact-link" href={`tel:${phoneLink}`} aria-label={`拨打电话 ${hotline}`}>{hotline}</a>}
            {hotline && config?.contact_email && ' · '}
            {config?.contact_email && <a className="footer-contact-link" href={`mailto:${config.contact_email}`}>{config.contact_email}</a>}
          </p>}
        </div>
        <div className="footer-qr">
          <h4>{texts['footer.qr_title'] || '关注我们'}</h4>
          <div className="footer-qr-list">
            <figure>
              <img src="/images/xcx.jpg" alt={texts['footer.xcx_qr_label'] || '微信小程序二维码'} />
              <figcaption>{texts['footer.xcx_qr_label'] || '微信小程序'}</figcaption>
            </figure>
            <figure>
              <img src="/images/fwh.jpg" alt={texts['footer.fwh_qr_label'] || '微信服务号二维码'} />
              <figcaption>{texts['footer.fwh_qr_label'] || '微信服务号'}</figcaption>
            </figure>
          </div>
        </div>
      </div>
      <div className="container footer-bottom">
        <p>{texts['footer.copyright'] || '© 2026 成都阿美巴企业管理咨询有限公司 | aiameiba.com · ameiba.cn'}</p>
        <p className="footer-links">
          <Link to="/contact">联系我们</Link> · <Link to="/self-check">看看你的企业</Link>
        </p>
      </div>
    </footer>
  )
}