// Buttons — capsule primary/secondary, ghost. Identical silhouette to main site.
const psBtnBase = {
  fontFamily: '"La Villa", sans-serif',
  fontWeight: 500,
  fontSize: 12,
  letterSpacing: '0.22em',
  textTransform: 'uppercase',
  border: 0,
  cursor: 'pointer',
  padding: '16px 32px',
  borderRadius: 999,
  transition: 'all 240ms cubic-bezier(.22,.61,.36,1)',
  display: 'inline-flex',
  alignItems: 'center',
  justifyContent: 'center',
  gap: 12,
  whiteSpace: 'nowrap',
  lineHeight: 1,
};

function PSPrimary({ children, onClick, href, target, style, arrow = true }) {
  const [h, setH] = React.useState(false);
  const Tag = href ? 'a' : 'button';
  const linkProps = href ? { href, target: target || undefined, rel: target === '_blank' ? 'noopener noreferrer' : undefined } : {};
  return (
    <Tag
      onClick={onClick}
      onMouseEnter={() => setH(true)}
      onMouseLeave={() => setH(false)}
      {...linkProps}
      style={{
        ...psBtnBase,
        background: h ? 'var(--cream)' : 'var(--cocoa)',
        color: h ? 'var(--cocoa)' : 'var(--cream)',
        boxShadow: h ? 'inset 0 0 0 1px var(--cocoa)' : 'none',
        textDecoration: 'none',
        ...style,
      }}
    >
      {children}
      {arrow && <span style={{ fontFamily: '"La Villa", sans-serif', fontSize: 14, letterSpacing: 0, transform: h ? 'translateX(4px)' : 'none', transition: 'transform 240ms cubic-bezier(.22,.61,.36,1)' }}>→</span>}
    </Tag>
  );
}

function PSSecondary({ children, onClick, href, target, style }) {
  const [h, setH] = React.useState(false);
  const Tag = href ? 'a' : 'button';
  const linkProps = href ? { href, target: target || undefined, rel: target === '_blank' ? 'noopener noreferrer' : undefined } : {};
  return (
    <Tag
      onClick={onClick}
      onMouseEnter={() => setH(true)}
      onMouseLeave={() => setH(false)}
      {...linkProps}
      style={{
        ...psBtnBase,
        background: h ? 'var(--cocoa)' : 'transparent',
        color: h ? 'var(--cream)' : 'var(--cocoa)',
        boxShadow: 'inset 0 0 0 1px var(--cocoa)',
        textDecoration: 'none',
        ...style,
      }}
    >
      {children}
    </Tag>
  );
}

function PSGhost({ children, onClick, style }) {
  return (
    <button
      onClick={onClick}
      style={{
        ...psBtnBase,
        background: 'transparent',
        color: 'var(--cocoa)',
        padding: '6px 0',
        borderRadius: 0,
        borderBottom: '1px solid var(--cocoa)',
        ...style,
      }}
    >
      {children}
    </button>
  );
}

Object.assign(window, { PSPrimary, PSSecondary, PSGhost });