// NewsletterCTA.jsx — Substack follow strip, responsive
function ChNewsletterCTA() {
  const isMobile = window.useIsMobile();
  const [hover, setHover] = React.useState(false);

  return (
    <section style={{
      background: '#1B544F',
      padding: isMobile ? '64px 24px' : '100px 40px',
      fontFamily: 'Montserrat, sans-serif',
      position: 'relative', overflow: 'hidden',
    }}>
      {/* Decorative glow */}
      <div style={{
        position: 'absolute', top: -120, right: -120,
        width: 480, height: 480, borderRadius: '50%',
        background: 'radial-gradient(circle, rgba(127,214,207,0.10) 0%, transparent 70%)',
        pointerEvents: 'none',
      }} />

      <div style={{
        maxWidth: 760, margin: '0 auto', textAlign: 'center', position: 'relative',
      }}>
        <div style={{
          display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8,
          fontWeight: 700, fontSize: 11, letterSpacing: '3.5px', textTransform: 'uppercase',
          color: '#7FD6CF', marginBottom: 18,
        }}>
          <svg width="14" height="14" 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>

        <h2 style={{
          fontWeight: 800, fontSize: isMobile ? 28 : 42, lineHeight: 1.15, letterSpacing: '-0.5px',
          color: '#fff', margin: '0 0 20px',
        }}>
          Read us every week.
        </h2>

        <p style={{
          fontSize: isMobile ? 15 : 17, lineHeight: 1.75,
          color: 'rgba(255,255,255,0.72)', margin: '0 0 36px',
        }}>
          Psychology for people tired of bad advice.
        </p>

        <a
          href="https://clinicallyhappy.substack.com/"
          target="_blank"
          rel="noopener noreferrer"
          onMouseEnter={() => setHover(true)}
          onMouseLeave={() => setHover(false)}
          style={{
            display: 'inline-flex', alignItems: 'center', gap: 10,
            padding: '16px 36px', borderRadius: 999,
            background: hover ? '#fff' : '#7FD6CF',
            color: '#0E3B37',
            textDecoration: 'none',
            fontSize: 13, fontWeight: 700, letterSpacing: '1.5px', textTransform: 'uppercase',
            boxShadow: hover
              ? '0 16px 36px rgba(127,214,207,0.35), 0 0 0 4px rgba(127,214,207,0.18)'
              : '0 6px 20px rgba(127,214,207,0.20)',
            transform: hover ? 'translateY(-2px) scale(1.04)' : 'translateY(0) scale(1)',
            transition: 'all 240ms cubic-bezier(0.22, 0.61, 0.36, 1)',
          }}
        >
          Follow on Substack
          <svg width="12" height="12" viewBox="0 0 24 24" fill="none"
               stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
            <path d="M7 17 17 7"/><path d="M8 7h9v9"/>
          </svg>
        </a>
      </div>
    </section>
  );
}

window.ChNewsletterCTA = ChNewsletterCTA;