// Sticky mobile CTA bar.
// Mobile-only (≤780px). Slides up from the bottom once the visitor has
// scrolled past the hero's own button (~560px), so the "Open the Studio"
// action is always one thumb-tap away no matter how far they've scrolled.
// Desktop never sees it. Hidden until scrolled so it doesn't duplicate the
// hero CTA on first paint.
function PSStickyCTA() {
  const [show, setShow] = React.useState(false);

  React.useEffect(() => {
    const onScroll = () => setShow(window.scrollY > 560);
    window.addEventListener('scroll', onScroll, { passive: true });
    onScroll();
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  return (
    <>
      <style>{`
        .ps-sticky-cta { display: none; }
        @media (max-width: 780px) {
          .ps-sticky-cta {
            display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
            padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
            background: rgba(242, 236, 228, 0.92);
            -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
            border-top: 1px solid var(--border-1);
            transform: translateY(120%);
            transition: transform 300ms cubic-bezier(.22,.61,.36,1);
          }
          .ps-sticky-cta.show { transform: translateY(0); }
        }
      `}</style>
      <div className={`ps-sticky-cta${show ? ' show' : ''}`} aria-hidden={!show}>
        <a
          href={window.PORTAL_URL || '/dashboard/product-studio'}
          style={{
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            width: '100%', padding: '15px 20px', borderRadius: 4,
            background: 'var(--cocoa)', color: 'var(--cream)',
            fontFamily: '"La Villa", sans-serif', fontSize: 15, fontWeight: 500,
            letterSpacing: '0.02em', textDecoration: 'none', lineHeight: 1,
          }}
        >
          Open the Studio&nbsp;&rsaquo;
        </a>
      </div>
    </>
  );
}

Object.assign(window, { PSStickyCTA });
