// BlinkFree primitives — Button, Tag, Card, Input, Container

const Button = ({ variant = 'primary', icon, children, onClick, type = 'button' }) => {
  const base = {
    height: 38,
    padding: '0 18px',
    fontSize: 16.25,
    fontWeight: 600,
    fontFamily: 'inherit',
    textTransform: 'uppercase',
    letterSpacing: '0.04em',
    borderRadius: 4,
    border: 'none',
    cursor: 'pointer',
    display: 'inline-flex',
    alignItems: 'center',
    gap: 8,
    transition: 'background 80ms cubic-bezier(0.2,0,0,1), color 80ms, border-color 80ms, transform 60ms cubic-bezier(0.2,0,0,1)',
    whiteSpace: 'nowrap',
  };
  const variants = {
    primary: { background: '#9146FF', color: '#fff' },
    secondary: { background: '#2F2F35', color: '#EFEFF1' },
    ghost: { background: 'transparent', color: '#EFEFF1', border: '1px solid #2F2F35' },
  };
  const [hover, setHover] = React.useState(false);
  const [press, setPress] = React.useState(false);
  const hoverStyles = {
    primary: { background: '#A970FF' },
    secondary: { background: '#3A3A42' },
    ghost: { borderColor: '#9146FF', color: '#9146FF' },
  };
  return (
    <button
      type={type}
      onClick={onClick}
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => { setHover(false); setPress(false); }}
      onMouseDown={() => setPress(true)}
      onMouseUp={() => setPress(false)}
      style={{
        ...base,
        ...variants[variant],
        ...(hover ? hoverStyles[variant] : {}),
        transform: press ? 'scale(0.98)' : 'scale(1)',
      }}
    >
      {icon}
      {children}
    </button>
  );
};

const Eyebrow = ({ children, color = '#9146FF' }) => (
  <div style={{
    fontSize: 15,
    fontWeight: 700,
    textTransform: 'uppercase',
    letterSpacing: '0.12em',
    color,
    marginBottom: 16,
  }}>{children}</div>
);

const Tag = ({ children, variant = 'default' }) => {
  const styles = {
    default: { background: '#2F2F35', color: '#EFEFF1' },
    purple: { background: 'rgba(145,70,255,0.15)', color: '#BF94FF' },
    live: { background: '#EB0400', color: '#fff' },
  };
  return (
    <span style={{
      ...styles[variant],
      borderRadius: variant === 'live' ? 2 : 4,
      padding: '4px 8px',
      fontSize: 13.75,
      fontWeight: 700,
      letterSpacing: '0.04em',
      textTransform: 'uppercase',
      display: 'inline-flex',
      alignItems: 'center',
      gap: 5,
    }}>{children}</span>
  );
};

const LiveDot = () => (
  <>
    <style>{`@keyframes bf-pulse{0%,100%{opacity:1}50%{opacity:.4}}`}</style>
    <span style={{
      width: 6, height: 6, borderRadius: 9999, background: '#fff',
      animation: 'bf-pulse 1.4s ease-in-out infinite',
      display: 'inline-block',
    }} />
  </>
);

const Card = ({ children, hover, style, ...rest }) => {
  const [h, setH] = React.useState(false);
  return (
    <div
      onMouseEnter={() => setH(true)}
      onMouseLeave={() => setH(false)}
      style={{
        background: '#18181B',
        borderRadius: 6,
        boxShadow: (h && hover) ? '0 0 0 2px #9146FF' : '0 0 0 1px #1F1F23',
        transition: 'box-shadow 80ms cubic-bezier(0.2,0,0,1)',
        overflow: 'hidden',
        ...style,
      }}
      {...rest}
    >{children}</div>
  );
};

const Input = ({ value, onChange, placeholder, type = 'text', as = 'input', rows }) => {
  const [focus, setFocus] = React.useState(false);
  const Tag = as;
  return (
    <Tag
      type={type}
      value={value}
      onChange={onChange}
      placeholder={placeholder}
      rows={rows}
      onFocus={() => setFocus(true)}
      onBlur={() => setFocus(false)}
      style={{
        background: '#0E0E10',
        border: focus ? '2px solid #9146FF' : '1px solid #2F2F35',
        borderRadius: 4,
        padding: focus ? '11px 13px' : '12px 14px',
        fontSize: 16.25,
        color: '#EFEFF1',
        fontFamily: 'inherit',
        outline: 'none',
        width: '100%',
        boxSizing: 'border-box',
        resize: as === 'textarea' ? 'vertical' : undefined,
        minHeight: as === 'textarea' ? 96 : undefined,
      }}
    />
  );
};

const Container = ({ children, style }) => (
  <div style={{
    maxWidth: 1180,
    margin: '0 auto',
    padding: '0 32px',
    ...style,
  }}>{children}</div>
);

const Section = ({ children, eyebrow, eyebrowColor, style }) => (
  <section style={{ padding: '100px 0', ...style }}>
    <Container>
      {eyebrow && <Eyebrow color={eyebrowColor}>{eyebrow}</Eyebrow>}
      {children}
    </Container>
  </section>
);

Object.assign(window, { Button, Tag, LiveDot, Card, Input, Container, Section, Eyebrow });