// NewsletterPopup.jsx — Substack follow prompt
function ChNewsletterPopup({ onClose }) {
  const isMobile = window.useIsMobile();

  return (
    <div
      onClick={onClose}
      style={{
        position: 'fixed', inset: 0, zIndex: 200,
        background: 'rgba(20,19,15,0.52)',
        backdropFilter: 'blur(5px)',
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        padding: isMobile ? 16 : 24,
        animation: 'chFadeIn 280ms ease',
      }}
    >
      <style>{`
        @keyframes chFadeIn  { from { opacity:0 } to { opacity:1 } }
        @keyframes chPopUp   { from { transform:translateY(24px) scale(0.97); opacity:0 } to { transform:translateY(0) scale(1); opacity:1 } }
        .ch-substack-btn:hover { background:#143D39 !important; transform:translateY(-2px) !important; }
      `}</style>

      <div
        onClick={(e) => e.stopPropagation()}
        style={{
          background: '#F0EEE6',
          borderRadius: isMobile ? 20 : 36,
          width: '100%', maxWidth: 480,
          padding: isMobile ? '40px 24px 36px' : '52px 48px 48px',
          position: 'relative',
          textAlign: 'center',
          fontFamily: 'Montserrat, sans-serif',
          boxShadow: '0 40px 100px rgba(0,0,0,0.22)',
          animation: 'chPopUp 360ms cubic-bezier(0.22,0.61,0.36,1)',
          overflow: 'hidden',
        }}
      >
        {/* Soft mint glow */}
        <div style={{
          position: 'absolute', top: -60, left: '50%', transform: 'translateX(-50%)',
          width: 380, height: 220,
          background: 'radial-gradient(ellipse at center, rgba(127,214,207,0.26) 0%, transparent 70%)',
          pointerEvents: 'none',
        }} />

        {/* Close */}
        <button
          onClick={onClose}
          aria-label="Close"
          style={{
            position: 'absolute', top: 16, right: 16,
            width: 40, height: 40, borderRadius: '50%',
            border: 'none', background: 'rgba(27,84,79,0.10)',
            cursor: 'pointer', fontSize: 22, color: '#1B544F',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            fontWeight: 700, lineHeight: 1, transition: 'background 200ms ease',
          }}
          onMouseEnter={(e) => e.currentTarget.style.background = 'rgba(27,84,79,0.20)'}
          onMouseLeave={(e) => e.currentTarget.style.background = 'rgba(27,84,79,0.10)'}
        >×</button>

        {/* Logo */}
        <img src="/assets/logo-teal-nb.png" alt="Clinically Happy"
             style={{ height: isMobile ? 99 : 125, marginBottom: 20, position: 'relative' }} />

        {/* Eyebrow */}
        <div style={{
          display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 7,
          fontWeight: 700, fontSize: 13, letterSpacing: '3px', textTransform: 'uppercase',
          color: '#7FD6CF', marginBottom: 12, position: 'relative',
        }}>
          <svg width="16" height="16" viewBox="0 0 24 24" fill="#FF6719" style={{ flexShrink: 0 }}>
            <path d="M22.539 8.242H1.46V5.406h21.08v2.836zM1.46 10.812V24L12 18.11 22.54 24V10.812H1.46zM22.54 0H1.46v2.836h21.08V0z"/>
          </svg>
          On Substack
        </div>

        {/* Headline */}
        <h2 style={{
          fontWeight: 800, fontSize: isMobile ? 28 : 36, lineHeight: 1.1, letterSpacing: '-0.5px',
          color: '#1B544F', margin: '0 0 16px', position: 'relative',
        }}>Don't miss us on Substack.</h2>

        <p style={{
          fontSize: 14, lineHeight: 1.75, color: '#555',
          margin: '0 0 28px', position: 'relative',
        }}>
          Psychology for people tired of bad advice.
        </p>

        <a
          href="https://clinicallyhappy.substack.com/"
          target="_blank"
          rel="noopener noreferrer"
          className="ch-substack-btn"
          style={{
            display: 'block', width: '100%', padding: '18px',
            background: '#1B544F', color: '#fff',
            fontFamily: 'Montserrat, sans-serif',
            fontWeight: 700, fontSize: 14, letterSpacing: '2px', textTransform: 'uppercase',
            border: 'none', borderRadius: 10, cursor: 'pointer',
            textDecoration: 'none',
            transition: 'background 200ms ease, transform 180ms ease',
            boxSizing: 'border-box',
          }}
        >Follow on Substack</a>

        <button
          onClick={onClose}
          style={{
            background: 'none', border: 'none', cursor: 'pointer',
            color: '#999', fontSize: 13, marginTop: 16,
            textDecoration: 'underline', textUnderlineOffset: 3,
            fontFamily: 'Montserrat, sans-serif',
          }}
        >Maybe later</button>
      </div>
    </div>
  );
}

window.ChNewsletterPopup = ChNewsletterPopup;