// Atoms — buttons, chips, dividers, slabs

// Track viewport — useful for layout decisions that CSS alone can't handle
const useIsMobile = (bp = 760) => {
  const [m, setM] = React.useState(
    typeof window !== 'undefined' ? window.innerWidth <= bp : false
  );
  React.useEffect(() => {
    const onResize = () => setM(window.innerWidth <= bp);
    window.addEventListener('resize', onResize);
    return () => window.removeEventListener('resize', onResize);
  }, [bp]);
  return m;
};

const Btn = ({ children, variant = 'primary', size = 'md', onClick, as = 'button', icon, ...rest }) => {
  const styles = {
    primary: { bg: 'var(--red)', fg: '#fff', border: 'var(--red)' },
    dark:    { bg: 'var(--ink)', fg: '#fff', border: 'var(--ink)' },
    ghost:   { bg: 'transparent', fg: 'var(--ink)', border: 'var(--ink)' },
    invert:  { bg: 'var(--paper)', fg: 'var(--ink)', border: 'var(--paper)' },
    outlineLight: { bg: 'transparent', fg: '#fff', border: 'rgba(255,255,255,0.5)' },
  }[variant];
  const pad = size === 'lg' ? '16px 28px' : size === 'sm' ? '8px 14px' : '12px 22px';
  const fs = size === 'lg' ? 14 : size === 'sm' ? 11 : 12;
  const Tag = as;
  return (
    <Tag onClick={onClick}
      style={{
        background: styles.bg, color: styles.fg, border: `1.5px solid ${styles.border}`,
        padding: pad, fontSize: fs, fontWeight: 700, letterSpacing: '0.12em',
        textTransform: 'uppercase', display: 'inline-flex', alignItems: 'center', gap: 10,
        borderRadius: 0, transition: 'all 160ms ease', cursor: 'pointer', textDecoration: 'none',
      }}
      onMouseEnter={(e) => { e.currentTarget.style.transform = 'translateY(-1px)'; }}
      onMouseLeave={(e) => { e.currentTarget.style.transform = 'translateY(0)'; }}
      {...rest}
    >
      {children}
      {icon !== false && <span style={{ display: 'inline-block', transform: 'translateY(0.5px)' }}>→</span>}
    </Tag>
  );
};

const Chip = ({ children, tone = 'red' }) => {
  const tones = {
    red:   { bg: 'var(--red)', fg: '#fff' },
    dark:  { bg: 'var(--ink)', fg: '#fff' },
    pitch: { bg: 'var(--pitch)', fg: '#fff' },
    paper: { bg: 'var(--paper-2)', fg: 'var(--ink)' },
    out:   { bg: 'transparent', fg: 'var(--ink)', border: '1px solid var(--ink)' },
  }[tone];
  return (
    <span className="mono" style={{
      background: tones.bg, color: tones.fg, border: tones.border || 'none',
      padding: '4px 8px', fontSize: 10, fontWeight: 700, letterSpacing: '0.14em',
      textTransform: 'uppercase',
    }}>{children}</span>
  );
};

const SectionHead = ({ kicker, title, right, dark = false }) => (
  <div data-section-head style={{
    display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between',
    borderBottom: dark ? '1px solid rgba(255,255,255,0.15)' : '1px solid var(--ink)',
    paddingBottom: 14, marginBottom: 32, gap: 24, flexWrap: 'wrap',
  }}>
    <div>
      {kicker && <div className="mono" style={{
        fontSize: 11, fontWeight: 700, letterSpacing: '0.2em', textTransform: 'uppercase',
        color: dark ? 'var(--red)' : 'var(--red)', marginBottom: 8,
      }}>{kicker}</div>}
      <h2 className="display" style={{
        fontSize: 'clamp(32px, 6vw, 72px)', margin: 0, color: dark ? '#fff' : 'var(--ink)',
        textTransform: 'uppercase',
      }}>{title}</h2>
    </div>
    {right && <div>{right}</div>}
  </div>
);

const Slab = ({ k, v, sub, dark = false }) => (
  <div style={{
    background: dark ? 'rgba(255,255,255,0.05)' : 'var(--paper-2)',
    border: dark ? '1px solid rgba(255,255,255,0.1)' : '1px solid var(--line-soft)',
    padding: '20px 22px',
  }}>
    <div className="mono" style={{ fontSize: 10, fontWeight: 700, letterSpacing: '0.2em', textTransform: 'uppercase', color: dark ? 'rgba(255,255,255,0.6)' : 'var(--muted)' }}>{k}</div>
    <div className="display" style={{ fontSize: 48, color: dark ? '#fff' : 'var(--ink)', marginTop: 4 }}>{v}</div>
    {sub && <div className="mono" style={{ fontSize: 11, color: dark ? 'rgba(255,255,255,0.6)' : 'var(--muted)', marginTop: 4 }}>{sub}</div>}
  </div>
);

// A small static-pattern badge plate for opponents we don't have logos for
const TextBadge = ({ initials, color = 'var(--ink)', invert = false }) => (
  <div style={{
    width: 44, height: 44, background: invert ? color : 'transparent',
    border: `2px solid ${color}`, color: invert ? '#fff' : color,
    display: 'flex', alignItems: 'center', justifyContent: 'center',
    fontFamily: 'Bebas Neue', fontSize: 18, letterSpacing: '0.04em',
    flexShrink: 0,
  }}>{initials}</div>
);

// Diagonal stripe divider — a recurring matchday-programme motif
const StripeRule = ({ height = 8 }) => (
  <div style={{
    height, width: '100%',
    backgroundImage: 'repeating-linear-gradient(135deg, var(--red) 0 12px, var(--ink) 12px 24px)',
  }} />
);

Object.assign(window, { Btn, Chip, SectionHead, Slab, TextBadge, StripeRule, useIsMobile });