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

// Centered card layout shared by the player login / register pages. `subtitle`
// labels the card; `footer` is optional content under the card (e.g. cross-links).
export default function PlayerShell({ subtitle, children, footer }) {
  const { siteTitle, heroImage } = useSite()
  const bg = `linear-gradient(180deg,rgba(11,15,20,0.72),rgba(11,15,20,0.9)),url('${heroImage}')`
  return (
    <main
      style={{
        minHeight: '100vh',
        display: 'grid',
        placeItems: 'center',
        padding: '40px 18px',
        overflow: 'hidden',
        backgroundColor: 'var(--bg-deep)',
        backgroundImage: bg,
        backgroundPosition: 'center',
        backgroundRepeat: 'no-repeat',
        backgroundSize: 'min(60vh, 520px)',
      }}
    >
      <div style={{ width: '100%', maxWidth: 400 }}>
        <div style={{ textAlign: 'center', marginBottom: 26 }}>
          <div style={{ marginBottom: 14 }}>
            <MoonDot size={15} glow={0.55} />
          </div>
          <h1 className="display" style={{ margin: 0, fontSize: '1.7rem', letterSpacing: '0.04em', color: 'var(--head)' }}>
            {siteTitle}
          </h1>
          <p className="sans" style={{ margin: '6px 0 0', color: '#9aa6b4', fontSize: '0.8rem', letterSpacing: '0.16em', textTransform: 'uppercase' }}>
            {subtitle}
          </p>
        </div>

        <div
          style={{
            border: '1px solid var(--line)',
            borderRadius: 12,
            padding: 28,
            background: 'linear-gradient(180deg,rgba(25,34,49,0.92),rgba(20,26,33,0.92))',
            backdropFilter: 'blur(6px)',
            boxShadow: '0 24px 60px rgba(0,0,0,0.5)',
          }}
        >
          {children}
        </div>

        {footer}

        <p style={{ textAlign: 'center', margin: '20px 0 0' }}>
          <Link to="/" className="sans" style={{ color: 'var(--accent)', fontSize: '0.84rem', textDecoration: 'none' }}>
            ← Back to site
          </Link>
        </p>
      </div>
    </main>
  )
}

// Off-screen honeypot styling (matches the admin login): present for bots, never
// seen or filled by real users. Name must equal the server HONEYPOT_FIELD.
export const honeypotStyle = {
  position: 'absolute',
  left: '-9999px',
  top: 'auto',
  width: '1px',
  height: '1px',
  opacity: 0,
  pointerEvents: 'none',
}