/* global React */
const DISCORD_URL = 'https://discord.gg/2Ne68KwUeQ';
window.DISCORD_URL = DISCORD_URL;

const WishlistModal = ({ onClose }) => {
  React.useEffect(() => {
    const onKey = (e) => { if (e.key === 'Escape') onClose(); };
    document.addEventListener('keydown', onKey);
    document.body.style.overflow = 'hidden';
    return () => {
      document.removeEventListener('keydown', onKey);
      document.body.style.overflow = '';
    };
  }, [onClose]);

  return (
    <div onClick={onClose} style={{
      position: 'fixed', inset: 0, zIndex: 100,
      background: 'rgba(0,0,0,0.78)',
      backdropFilter: 'blur(8px)', WebkitBackdropFilter: 'blur(8px)',
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      padding: 24,
      animation: 'fadeIn 200ms var(--ease-out) both',
    }}>
      <div onClick={(e) => e.stopPropagation()} style={{
        background: 'var(--pond-black)',
        border: '2px solid var(--pond-white)',
        boxShadow: '8px 8px 0 var(--pond-white)',
        padding: '40px 36px 36px',
        maxWidth: 480, width: '100%',
        position: 'relative',
        animation: 'popIn 280ms var(--ease-spring) both',
      }}>
        <button onClick={onClose} aria-label="Close" style={{
          position: 'absolute', top: 12, right: 14,
          background: 'transparent', border: 0, color: 'var(--pond-mist)',
          fontSize: 22, lineHeight: 1, cursor: 'pointer', padding: 6,
          fontFamily: 'var(--font-display)',
        }}>×</button>

        <div style={{
          fontSize: 12, fontWeight: 700, letterSpacing: '0.16em',
          textTransform: 'uppercase', color: 'var(--pond-mist)',
        }}>Pouring Pints</div>

        <h2 style={{
          fontFamily: 'var(--font-display)', fontWeight: 800,
          fontSize: 'clamp(36px, 6vw, 56px)', lineHeight: 0.95, letterSpacing: '-0.03em',
          margin: '14px 0 16px',
        }}>COMING SOON.</h2>

        <p style={{ color: 'var(--pond-mist)', fontSize: 16, lineHeight: 1.6, margin: '0 0 28px' }}>
          The Steam page isn't quite ready yet. Join the Discord — that's where
          we'll announce the wishlist link the moment it's live.
        </p>

        <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
          <a href={DISCORD_URL} target="_blank" rel="noopener" style={{
            display: 'inline-flex', alignItems: 'center', gap: 10,
            fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 14,
            letterSpacing: '0.04em',
            background: 'var(--pond-white)', color: 'var(--pond-black)',
            border: '2px solid var(--pond-white)',
            padding: '14px 22px', textDecoration: 'none',
          }}>JOIN THE DISCORD →</a>
          <button onClick={onClose} style={{
            display: 'inline-flex', alignItems: 'center',
            fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 14,
            letterSpacing: '0.04em',
            background: 'transparent', color: 'var(--pond-white)',
            border: '2px solid var(--pond-white)',
            padding: '14px 22px', cursor: 'pointer',
          }}>MAYBE LATER</button>
        </div>
      </div>
    </div>
  );
};

window.WishlistModal = WishlistModal;