// Big call-to-action strip directing visitors into the public Product Studio portal.
// Sits between pricing and footer.
function PSCallout() {
  const url = window.PORTAL_URL || 'https://productstudio.thevaultstock.com/';
  return (
    <section className="ps-section" data-mobile-pad="true" data-mobile-y="lg" style={{
      background: 'var(--cocoa)', color: 'var(--cream)',
      padding: '120px 48px', position: 'relative', overflow: 'hidden'
    }}>
      <div className="grain" style={{ position: 'absolute', inset: 0, pointerEvents: 'none' }} />
      <div style={{ position: 'relative', maxWidth: 1100, margin: '0 auto', textAlign: 'center' }}>
        <div className="eyebrow" style={{ color: 'var(--sand)', marginBottom: 18 }}>
          <span style={{ display: 'inline-block', width: 24, height: 1, background: 'var(--sand)', verticalAlign: 'middle', marginRight: 12 }}></span>
          Live now
        </div>
        <h2 className="celestial ps-callout-h2" style={{
          fontSize: 'clamp(56px, 8vw, 132px)', margin: 0, color: 'var(--cream)', lineHeight: 1
        }}>
          Open the studio.
          <span className="ps-callout-sub" style={{
            display: 'block', marginTop: 14,
            fontStyle: 'normal', letterSpacing: '-0.02em', fontFamily: '"La Villa", sans-serif',
            fontSize: 'clamp(40px, 6vw, 96px)', textTransform: 'uppercase', fontWeight: 400, lineHeight: 1
          }}>HAVE A LOOK AROUND.</span>
        </h2>
        <p style={{
          fontFamily: '"La Villa", sans-serif', fontSize: 17, lineHeight: 1.55,
          color: 'var(--sand)', maxWidth: 560, margin: '32px auto 0'
        }}>
          Free to explore. Upload your product, browse 10,000+ Vault Stock backdrops, see compositions before you buy. Add credits when you're ready to generate.
        </p>
        <div style={{ marginTop: 44, display: 'flex', gap: 16, justifyContent: 'center', flexWrap: 'wrap' }}>
          <a href={url} target="_blank" rel="noopener noreferrer" style={{
            fontFamily: '"La Villa", sans-serif', fontWeight: 500, fontSize: 13,
            letterSpacing: '0.22em', textTransform: 'uppercase', textDecoration: 'none',
            padding: '20px 40px', borderRadius: 999,
            background: 'var(--cream)', color: 'var(--cocoa)',
            display: 'inline-flex', alignItems: 'center', gap: 14,
            transition: 'transform 240ms cubic-bezier(.22,.61,.36,1)'
          }}
          onMouseEnter={e => e.currentTarget.style.transform = 'translateY(-2px)'}
          onMouseLeave={e => e.currentTarget.style.transform = 'none'}>
            Open Product Studio
            <span style={{ fontFamily: '"La Villa", sans-serif', fontSize: 16, letterSpacing: 0 }}>→</span>
          </a>
        </div>

        {/* tiny portal URL display */}
        <div style={{
          marginTop: 28,
          fontFamily: '"La Villa", sans-serif', fontSize: 11,
          letterSpacing: '0.22em', textTransform: 'uppercase',
          color: 'var(--sand)', opacity: 0.7
        }}>
          productstudio.thevaultstock.com
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { PSCallout });