// AccessSubscribe.jsx — single, dignified CTA. Hands off to Substack.
// Substack URL goes in via prop or a default placeholder.
const AccessSubscribe = ({ substackUrl = 'https://artoflivingdigitally.substack.com/subscribe' }) => {
  const isMobile = useIsMobile();
  return (
  <section data-ground="navy" style={{
    background: 'var(--ld-navy)',
    color: 'var(--ld-pearl-100)',
    paddingTop: isMobile ? 'clamp(56px, 10vw, 120px)' : 'clamp(96px, 12vw, 160px)',
    paddingBottom: isMobile ? 'clamp(56px, 10vw, 120px)' : 'clamp(96px, 12vw, 160px)',
    position: 'relative',
    overflow: 'hidden',
  }}>
    <div className="container-narrow" style={{ textAlign: 'center' }}>
      <div className="eyebrow-gold" style={{ marginBottom: 18, color: 'var(--ld-gold)' }}>
        II. To Subscribe
      </div>
      <hr style={{ border: 'none', borderTop: '1px solid var(--ld-gold)', width: 36, margin: isMobile ? '0 auto 36px' : '0 auto 56px' }} />

      <h2 style={{
        fontFamily: 'Cormorant Garamond, serif',
        fontWeight: 300,
        fontSize: isMobile ? 'clamp(26px, 7.5vw, 42px)' : 'clamp(36px, 5vw, 64px)',
        lineHeight: 1.1,
        letterSpacing: '-0.01em',
        color: 'var(--ld-pearl-100)',
        margin: 0,
        textWrap: 'balance',
      }}>
        Receive ACCESS<sup style={{ fontSize: '0.4em', color: 'var(--ld-gold)' }}>™</sup>
        {' '}as it is <em style={{ fontStyle: 'italic' }}>written</em>.
      </h2>

      <p style={{
        fontFamily: 'Cormorant Garamond, serif',
        fontStyle: 'italic',
        fontSize: isMobile ? 'clamp(15px, 4vw, 18px)' : 'clamp(18px, 2vw, 22px)',
        lineHeight: 1.55,
        color: 'rgba(235,221,197,0.78)',
        margin: isMobile ? '24px auto 0' : '36px auto 0',
        maxWidth: 560,
        textWrap: 'balance',
      }}>
        A standing invitation. The letter arrives when there is something
        worth sending — and never otherwise.
      </p>

      <a
        href={substackUrl}
        target="_blank"
        rel="noreferrer"
        style={{
          display: 'inline-flex', alignItems: 'center', gap: 14,
          marginTop: isMobile ? 36 : 56,
          padding: isMobile ? '16px 32px' : '20px 44px',
          background: 'var(--ld-pearl-100)',
          color: 'var(--ld-navy)',
          fontFamily: 'Cormorant Garamond, serif',
          fontVariantCaps: 'all-small-caps',
          fontWeight: 500, letterSpacing: '0.16em',
          fontSize: isMobile ? 18 : 22,
          borderBottom: 'none',
          border: '1px solid var(--ld-gold)',
          borderRadius: 2,
          transition: 'all 320ms cubic-bezier(0.32,0.08,0.24,1)',
        }}
        onMouseEnter={e => {
          e.currentTarget.style.background = 'var(--ld-gold)';
          e.currentTarget.style.color = 'var(--ld-navy)';
        }}
        onMouseLeave={e => {
          e.currentTarget.style.background = 'var(--ld-pearl-100)';
          e.currentTarget.style.color = 'var(--ld-navy)';
        }}
      >
        Subscribe to ACCESS
        <span style={{ fontSize: '0.5em', color: 'var(--ld-gold)' }}>™</span>
      </a>

      <div style={{
        fontFamily: 'Montserrat, sans-serif', fontWeight: 500,
        fontSize: 11, letterSpacing: '0.22em', textTransform: 'uppercase',
        color: 'rgba(235,221,197,0.55)',
        marginTop: 28,
      }}>
        Hosted on Substack · Free to read
      </div>
    </div>

    <div aria-hidden="true" style={{
      position: 'absolute', right: 'clamp(24px, 5vw, 80px)', bottom: 'clamp(24px, 5vw, 80px)',
      color: 'var(--ld-gold)', opacity: 0.25, fontSize: 22,
    }}>✦</div>
  </section>
  );
};

window.AccessSubscribe = AccessSubscribe;