/* Primitives.jsx — Button, Badge, Price, IconButton */

const chBtnBase = {
  fontFamily:'Oswald, sans-serif', fontWeight:700, textTransform:'uppercase',
  letterSpacing:'.04em', borderRadius:6, border:'none', cursor:'pointer',
  lineHeight:1, display:'inline-flex', alignItems:'center', justifyContent:'center',
  gap:8, transition:'transform .12s cubic-bezier(.2,.7,.3,1), background .12s, box-shadow .12s',
};
const chBtnSize = {
  lg: { fontSize:17, padding:'15px 28px' },
  md: { fontSize:15, padding:'12px 22px' },
  sm: { fontSize:12.5, padding:'8px 14px' },
};
const chBtnVariant = {
  primary:   { background:'var(--chowdahead-red)', color:'#fff' },
  secondary: { background:'var(--dark-royal)', color:'#fff' },
  dark:      { background:'var(--vintage-navy)', color:'#fff' },
  outline:   { background:'transparent', color:'var(--ink)', boxShadow:'inset 0 0 0 2px var(--ink)' },
  sticker:   { background:'var(--grizzly-gold)', color:'var(--vintage-navy)', boxShadow:'2px 2px 0 var(--vintage-navy), inset 0 0 0 2px var(--vintage-navy)' },
};

function Button({ variant='primary', size='md', children, onClick, full, style={}, disabled }) {
  const [pressed, setPressed] = React.useState(false);
  const [hover, setHover] = React.useState(false);
  const v = chBtnVariant[variant];
  let bg = v.background;
  if (hover && !disabled && bg && bg.indexOf('var') === 0) {
    // darken via overlay using filter
  }
  return (
    <button
      onClick={disabled ? undefined : onClick}
      onMouseDown={()=>setPressed(true)} onMouseUp={()=>setPressed(false)}
      onMouseEnter={()=>setHover(true)} onMouseLeave={()=>{setHover(false);setPressed(false);}}
      style={{
        ...chBtnBase, ...chBtnSize[size], ...v,
        width: full ? '100%' : 'auto',
        opacity: disabled ? .4 : 1,
        cursor: disabled ? 'not-allowed' : 'pointer',
        filter: hover && !disabled ? 'brightness(.92)' : 'none',
        transform: pressed && !disabled ? 'translateY(1px)' : 'none',
        ...style,
      }}
    >{children}</button>
  );
}

const chBadgeColors = {
  sale:  { background:'var(--bright-red)', color:'#fff' },
  promo: { background:'var(--grizzly-gold)', color:'var(--vintage-navy)' },
  new:   { background:'var(--dark-royal)', color:'#fff' },
  best:  { background:'var(--vintage-navy)', color:'var(--grizzly-gold)' },
};
function Badge({ kind='sale', children, style={} }) {
  return (
    <span style={{
      fontFamily:'Oswald, sans-serif', fontWeight:700, textTransform:'uppercase',
      letterSpacing:'.05em', fontSize:11.5, padding:'4px 9px', borderRadius:3, lineHeight:1,
      ...chBadgeColors[kind], ...style,
    }}>{children}</span>
  );
}

function Price({ price, was, size=18, color='var(--chowdahead-red)' }) {
  return (
    <span style={{ display:'inline-flex', alignItems:'baseline', gap:8 }}>
      <span style={{ fontFamily:'Oswald, sans-serif', fontWeight:700, fontSize:size, color, fontVariantNumeric:'tabular-nums' }}>${price}</span>
      {was && <span style={{ fontFamily:'Montserrat, sans-serif', fontSize:size*0.72, color:'var(--ink-3)', textDecoration:'line-through' }}>${was}</span>}
    </span>
  );
}

function IconButton({ name, label, onClick, badge, color='var(--ink)' }) {
  const [hover, setHover] = React.useState(false);
  return (
    <button aria-label={label} onClick={onClick}
      onMouseEnter={()=>setHover(true)} onMouseLeave={()=>setHover(false)}
      style={{ position:'relative', background:'none', border:'none', cursor:'pointer', padding:6, color, opacity:hover?.65:1, transition:'opacity .12s' }}>
      <Icon name={name} size={23} />
      {badge > 0 && (
        <span style={{ position:'absolute', top:-1, right:-1, minWidth:18, height:18, padding:'0 4px',
          background:'var(--chowdahead-red)', color:'#fff', borderRadius:999, fontFamily:'Oswald, sans-serif',
          fontWeight:700, fontSize:11, display:'flex', alignItems:'center', justifyContent:'center', boxSizing:'border-box' }}>{badge}</span>
      )}
    </button>
  );
}

Object.assign(window, { Button, Badge, Price, IconButton });