import { Link } from 'react-router-dom'
import { useSite } from '../contexts/SiteContext.jsx'

export default function SiteFooter() {
  const { contactEmail } = useSite()
  return (
    <footer
      className="sans"
      style={{
        borderTop: '1px solid var(--line)',
        padding: '28px 16px',
        color: 'var(--muted)',
        textAlign: 'center',
        fontSize: '0.9rem',
        background: 'rgba(9,13,18,0.6)',
      }}
    >
      <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 6 }}>
        <span>UOMysticmoon is an independent private shard project.</span>
        <span style={{ color: 'var(--dim)', fontSize: '0.84rem' }}>
          <a href={`mailto:${contactEmail}`} style={{ color: 'var(--accent)', textDecoration: 'none' }}>
            {contactEmail}
          </a>
          &nbsp;·&nbsp;
          <Link to="/site/status" style={{ color: 'var(--accent)', textDecoration: 'none' }}>
            Shard Status
          </Link>
          &nbsp;·&nbsp;
          <Link to="/admin/login" style={{ color: '#5d6b7d', textDecoration: 'none' }}>
            Admin
          </Link>
        </span>
      </div>
    </footer>
  )
}
