// Premium CTA — animated gold gradient with sheen sweep, arrow slide, subline
function PremiumCTA({ href, label, sublabel, compact = false }) {
  const [hover, setHover] = React.useState(false);
  return (
    <a href={href}
       onMouseEnter={()=>setHover(true)}
       onMouseLeave={()=>setHover(false)}
       style={{
         position: 'relative',
         display: 'inline-flex', flexDirection: 'column', alignItems: 'flex-start',
         padding: compact ? '10px 16px 10px 18px' : '12px 26px 12px 28px',
         borderRadius: 12,
         background: 'linear-gradient(135deg,#F4D76E 0%,#D4AF37 50%,#B8960C 100%)',
         color: '#0A0A0A',
         overflow: 'hidden',
         boxShadow: hover
           ? '0 14px 40px rgba(212,175,55,.5), 0 0 0 1px rgba(255,255,255,.2) inset, 0 2px 0 rgba(255,255,255,.3) inset'
           : '0 8px 24px rgba(212,175,55,.3), 0 0 0 1px rgba(255,255,255,.15) inset, 0 2px 0 rgba(255,255,255,.25) inset',
         transform: hover ? 'translateY(-2px)' : 'translateY(0)',
         transition: 'all .4s cubic-bezier(.16,1,.3,1)'
       }}>
      {/* Sheen */}
      <span style={{
        position: 'absolute', top: 0, left: '-50%', width: '60%', height: '100%',
        background: 'linear-gradient(110deg, transparent 30%, rgba(255,255,255,.55) 50%, transparent 70%)',
        transform: hover ? 'translateX(250%)' : 'translateX(0)',
        transition: 'transform 1s cubic-bezier(.16,1,.3,1)',
        pointerEvents: 'none'
      }}/>
      <span style={{ display: 'inline-flex', alignItems: 'center', gap: compact ? 8 : 10, fontFamily: 'var(--font-display)', fontSize: compact ? 14 : 16, fontWeight: 700, letterSpacing: '.005em', lineHeight: 1.1, whiteSpace: 'nowrap' }}>
        {label}
        <svg width={compact ? 15 : 18} height={compact ? 15 : 18} viewBox="0 0 24 24" fill="none" stroke="#0A0A0A" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round" style={{
          transform: hover ? 'translateX(4px)' : 'translateX(0)', transition: 'transform .35s cubic-bezier(.16,1,.3,1)',
          flexShrink: 0
        }}><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></svg>
      </span>
      <span style={{ fontFamily: 'var(--font-mono)', fontSize: compact ? 8.5 : 9.5, fontWeight: 600, letterSpacing: '.08em', color: 'rgba(10,10,10,.65)', marginTop: 3, textTransform: 'uppercase', whiteSpace: 'nowrap' }}>{sublabel}</span>
    </a>
  );
}
window.PremiumCTA = PremiumCTA;