// Shared primitives for marketing kit
function ClayBtn({ variant = 'primary', children, size = 'md', swatch = '#fbbd41', onDark = false, ...rest }) {
  const [hover, setHover] = React.useState(false);
  const base = {
    fontFamily: 'var(--font-sans)',
    fontFeatureSettings: 'var(--otf-body)',
    fontSize: size === 'sm' ? 12.8 : size === 'lg' ? 18 : 16,
    fontWeight: 500,
    letterSpacing: '-0.16px',
    padding: size === 'sm' ? '6px 14px' : size === 'lg' ? '14px 28px' : '11px 22px',
    border: 'none',
    cursor: 'pointer',
    transition: 'transform .2s cubic-bezier(.2,.8,.2,1), box-shadow .2s, background .2s, color .2s',
    display: 'inline-flex',
    alignItems: 'center',
    gap: 8,
  };
  let style = { ...base };
  if (variant === 'primary') {
    style = { ...style, background: '#146ef5', color: '#fff', borderRadius: 12, boxShadow: 'var(--shadow-clay)' };
    if (hover) { style.transform = 'rotateZ(-6deg) translateY(-6px)'; style.boxShadow = 'rgb(0,0,0) -7px 7px'; style.background = swatch; style.color = '#000'; }
  } else if (variant === 'white') {
    style = { ...style, background: '#fff', color: '#000', borderRadius: 12, boxShadow: 'var(--shadow-clay)' };
    if (hover) { style.transform = 'rotateZ(-6deg) translateY(-6px)'; style.boxShadow = 'rgb(0,0,0) -7px 7px'; style.background = swatch; style.color = '#000'; }
  } else if (variant === 'ghost') {
    style = { ...style, background: 'transparent', color: onDark ? '#fff' : '#000', borderRadius: 4, border: `1px solid ${onDark ? 'rgba(255,255,255,.4)' : '#717989'}`, padding: size === 'sm' ? '5px 13px' : '10px 21px' };
    if (hover) { style.transform = 'rotateZ(-6deg) translateY(-6px)'; style.boxShadow = `${onDark ? '#fff' : 'rgb(0,0,0)'} -7px 7px`; style.background = swatch; style.color = '#000'; style.borderColor = 'transparent'; }
  } else if (variant === 'pill') {
    style = { ...style, background: '#fff', color: '#000', borderRadius: 999, boxShadow: 'var(--shadow-clay)', padding: '12px 26px' };
    if (hover) { style.transform = 'rotateZ(-6deg) translateY(-6px)'; style.boxShadow = 'rgb(0,0,0) -7px 7px'; style.background = swatch; style.color = '#000'; }
  }
  return <button style={style} onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)} {...rest}>{children}</button>;
}

function Label({ children, style = {} }) {
  return <div style={{ fontSize: 12, fontWeight: 600, letterSpacing: '1.08px', textTransform: 'uppercase', fontFeatureSettings: 'var(--otf-body)', ...style }}>{children}</div>;
}

function SoundWaveBubble({ size = 40, animated = true }) {
  return (
    <div style={{ width: size, height: size, background: '#146ef5', borderRadius: size * 0.28, position: 'relative', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: size * 0.07 }}>
      {[0.35, 0.65, 0.9, 0.55, 0.3].map((h, i) => (
        <div key={i} style={{
          width: size * 0.08,
          height: `${h * 60}%`,
          background: '#fff',
          borderRadius: size * 0.04,
          animation: animated ? `wave-${i} 1.2s ease-in-out infinite` : 'none',
          animationDelay: `${i * 0.08}s`,
        }}/>
      ))}
      <div style={{ position: 'absolute', bottom: -size * 0.18, left: size * 0.18, width: 0, height: 0, borderLeft: `${size * 0.15}px solid transparent`, borderRight: `${size * 0.15}px solid transparent`, borderTop: `${size * 0.22}px solid #146ef5` }}/>
    </div>
  );
}

Object.assign(window, { ClayBtn, Label, SoundWaveBubble });