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

export default function Maintenance() {
  const { settings, contactEmail, siteShortName, heroImage } = useSite()
  const heroBg = `linear-gradient(180deg,rgba(11,15,20,0.55) 0%,rgba(11,15,20,0.74) 60%,rgba(11,15,20,0.92) 100%),url('${heroImage}')`
  const message =
    settings.maintenance_message ||
    `${siteShortName} is in maintenance while we shape its towns, roads, and dungeons. The gates will open soon. Until then, follow along as the world wakes.`

  return (
    <main
      style={{
        minHeight: '100vh',
        display: 'grid',
        alignContent: 'center',
        justifyItems: 'center',
        textAlign: 'center',
        padding: '80px max(18px,calc((100% - 760px)/2))',
        overflow: 'hidden',
        backgroundColor: 'var(--bg-deep)',
        backgroundImage: heroBg,
        backgroundPosition: 'center',
        backgroundRepeat: 'no-repeat',
        backgroundSize: 'min(60vh, 520px)',
      }}
    >
      <div style={{ maxWidth: 640, textShadow: '0 2px 22px rgba(0,0,0,0.85)' }}>
        <div style={{ marginBottom: 26 }}>
          <MoonDot size={18} glow={0.6} />
        </div>
        <p className="eyebrow" style={{ color: '#c2d2e6', letterSpacing: '0.24em' }}>
          Building beneath the moon
        </p>
        <h1
          className="display"
          style={{ margin: 0, fontSize: 'clamp(2.6rem,7vw,4.6rem)', lineHeight: 1.05, letterSpacing: '0.02em' }}
        >
          The world is not yet open
        </h1>
        <p style={{ maxWidth: 520, margin: '24px auto 0', color: '#cdd6e0', fontSize: '1.14rem' }}>{message}</p>
        <div style={{ display: 'flex', flexWrap: 'wrap', gap: 12, justifyContent: 'center', marginTop: 34 }}>
          <Link to="/site/news" className="btn btn-primary">
            Read the news
          </Link>
          <a href={`mailto:${contactEmail}`} className="btn btn-ghost">
            Contact us
          </a>
        </div>
        <p className="sans" style={{ margin: '40px 0 0', color: '#7a8696', fontSize: '0.82rem' }}>
          {contactEmail} &nbsp;·&nbsp;{' '}
          <Link to="/admin/login" style={{ color: 'var(--accent)', textDecoration: 'none' }}>
            Admin
          </Link>
        </p>
      </div>
    </main>
  )
}