import { Link, useLocation } from 'react-router-dom'
import { footer, images } from '../content/site'
import './Footer.css'

export function Footer() {
  const location = useLocation()
  const contactPath =
    location.pathname === '/h5' || location.pathname.startsWith('/h5/') ? '/h5/contact' : '/contact'

  return (
    <footer className="site-footer">
      <div className="container footer-inner">
        <div className="footer-brand">
          <img src={images.logo} alt="杜康好客" className="footer-logo" />
          <div>
            <p className="footer-slogan">{footer.slogan}</p>
          </div>
        </div>
        <div className="footer-meta">
          <p>
            {footer.domain} · {footer.copyright} · {footer.icp}
          </p>
          <p>{footer.compliance}</p>
          <p>{footer.dataNote}</p>
          <p>
            <Link to={contactPath}>联系我们</Link>
          </p>
        </div>
      </div>
    </footer>
  )
}