/* Shared primitives — buttons, eyebrow, wordmark */

function Wordmark({ size = 'md' }) {
  const sizes = { sm: 20, md: 24, lg: 32 };
  const fs = sizes[size];
  return (
    <span style={{
      fontFamily: 'Saira, "Arial Narrow", Impact, sans-serif',
      fontWeight: 900,
      fontStyle: 'italic',
      fontSize: fs,
      letterSpacing: '-0.02em',
      display: 'inline-flex',
      alignItems: 'center',
      lineHeight: 1,
    }}>
      <span style={{ color: 'var(--fg-1)' }}>BITS</span>
      <span style={{ color: 'var(--green-500)' }}>Z</span>
      <span className="dot-pulse" style={{
        display: 'inline-block',
        width: 8, height: 8,
        marginLeft: 10,
        borderRadius: '50%',
        background: 'var(--green-500)',
      }} />
    </span>
  );
}

function Eyebrow({ children, pill = false }) {
  const base = {
    fontFamily: 'var(--font-mono)',
    fontSize: 10,
    fontWeight: 500,
    textTransform: 'uppercase',
    letterSpacing: '0.25em',
    color: 'var(--green-400)',
    display: 'inline-block',
  };
  if (!pill) return <span style={base}>{children}</span>;
  return (
    <span style={{
      ...base,
      padding: '6px 16px',
      border: '1px solid rgba(34,197,94,0.35)',
      background: 'rgba(34,197,94,0.10)',
      borderRadius: 999,
    }}>{children}</span>
  );
}

function Button({ children, variant = 'primary', href = '#', size = 'md', style = {}, ...rest }) {
  const [hover, setHover] = React.useState(false);
  const sizes = {
    md: { padding: '20px 40px', fontSize: 17, borderRadius: 16 },
    sm: { padding: '14px 24px', fontSize: 14, borderRadius: 12 },
  };
  const variants = {
    primary: {
      background: hover ? 'var(--green-400)' : 'var(--green-500)',
      color: 'var(--night-950)',
      border: 'none',
      transform: hover ? 'translateY(-2px)' : 'translateY(0)',
      boxShadow: hover ? '0 20px 48px -8px rgba(34,197,94,0.35)' : 'none',
    },
    secondary: {
      background: hover ? 'rgba(26,38,32,0.5)' : 'transparent',
      color: 'var(--fg-1)',
      border: '1px solid var(--night-700)',
    },
  };
  return (
    <a href={href} {...rest}
       onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
       style={{
         ...sizes[size],
         ...variants[variant],
         fontWeight: 700,
         textDecoration: 'none',
         display: 'inline-block',
         textAlign: 'center',
         transition: 'all 300ms ease-out',
         cursor: 'pointer',
         fontFamily: 'var(--font-sans)',
         ...style,
       }}>
      {children}
    </a>
  );
}

Object.assign(window, { Wordmark, Eyebrow, Button });