// Shared atoms used across the FootballStyle website kit.
// Load BEFORE Header / Footer / screens.

const Eyebrow = ({ children, color }) => (
  <div style={{
    fontFamily: 'var(--font-display)', fontSize: 13, fontWeight: 700,
    letterSpacing: '0.12em', textTransform: 'uppercase',
    color: color || 'var(--fg-2)',
  }}>{children}</div>
);

const Tag = ({ children, variant = 'pitch' }) => {
  const styles = {
    pitch:    { background: '#138236', color: '#fff' },
    flood:    { background: '#F5E000', color: '#0A0A09' },
    ink:      { background: '#0A0A09', color: '#fff' },
    outline:  { background: '#fff',    color: '#0A0A09', border: '1px solid #0A0A09' },
    danger:   { background: '#E8442D', color: '#fff' },
  }[variant];
  return (
    <span style={{
      fontFamily: 'var(--font-display)', fontSize: 11, fontWeight: 700,
      letterSpacing: '0.08em', textTransform: 'uppercase',
      padding: '4px 8px', borderRadius: 2, lineHeight: 1,
      display: 'inline-flex', alignItems: 'center', gap: 5,
      ...styles,
    }}>{children}</span>
  );
};

const Chip = ({ children, active, onClick }) => (
  <button onClick={onClick} style={{
    fontFamily: 'var(--font-sans)', fontSize: 13, fontWeight: 500,
    padding: '8px 16px', borderRadius: 999,
    border: active ? '1px solid #0A0A09' : '1px solid #DDDDD4',
    background: active ? '#0A0A09' : '#fff',
    color: active ? '#F5E000' : '#1A1A17',
    cursor: 'pointer', whiteSpace: 'nowrap',
    transition: 'all 140ms cubic-bezier(0.16,1,0.3,1)',
  }}>{children}</button>
);

const Button = ({ children, variant = 'primary', size = 'md', onClick, icon }) => {
  const variants = {
    primary: { background: '#138236', color: '#fff', border: '2px solid #0A0A09', shadow: true },
    accent:  { background: '#F5E000', color: '#0A0A09', border: '2px solid #0A0A09', shadow: true },
    ink:     { background: '#0A0A09', color: '#fff', border: '2px solid #0A0A09', shadow: false },
    ghost:   { background: 'transparent', color: '#0A0A09', border: '2px solid #0A0A09', shadow: false },
    paper:   { background: '#fff', color: '#0A0A09', border: '2px solid #0A0A09', shadow: true },
  }[variant];
  const sizes = {
    sm: { fontSize: 12, padding: '8px 14px' },
    md: { fontSize: 14, padding: '12px 22px' },
    lg: { fontSize: 16, padding: '16px 28px' },
  }[size];
  const [hover, setHover] = React.useState(false);
  const [press, setPress] = React.useState(false);
  const offset = press ? 0 : (hover ? 4 : 2);
  return (
    <button
      onClick={onClick}
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => { setHover(false); setPress(false); }}
      onMouseDown={() => setPress(true)}
      onMouseUp={() => setPress(false)}
      style={{
        fontFamily: 'var(--font-sans)', fontWeight: 700,
        background: variants.background, color: variants.color,
        border: variants.border, borderRadius: 2,
        cursor: 'pointer', letterSpacing: '0.02em',
        display: 'inline-flex', alignItems: 'center', gap: 8, lineHeight: 1,
        boxShadow: variants.shadow ? `${offset}px ${offset}px 0 #0A0A09` : 'none',
        transform: variants.shadow && hover && !press ? 'translateY(-2px)' : 'translateY(0)',
        transition: 'all 220ms cubic-bezier(0.16,1,0.3,1)',
        ...sizes,
      }}
    >
      {children}
      {icon && <i data-lucide={icon} style={{ width: 16, height: 16 }}></i>}
    </button>
  );
};

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

// Photo block — accepts a real imageUrl, falls back to gradient placeholder
const PhotoBlock = ({ aspect = '16/10', tone = 'pitch', label, imageUrl, alt = '' }) => {
  const tones = {
    pitch: 'linear-gradient(135deg,#0E6A2C 0%,#138236 50%,#2EA04F 100%)',
    night: 'linear-gradient(135deg,#0A0A09 0%,#1A1A17 50%,#3E3E37 100%)',
    sunset:'linear-gradient(135deg,#1A1A17 0%,#3E3E37 40%,#A89800 100%)',
    teal:  'linear-gradient(135deg,#0B5223 0%,#138236 50%,#5BBC74 100%)',
  };
  return (
    <div style={{
      aspectRatio: aspect, background: imageUrl ? '#0A0A09' : tones[tone],
      position: 'relative', overflow: 'hidden',
    }}>
      {imageUrl ? (
        <img src={imageUrl} alt={alt} style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', display: 'block' }} />
      ) : (
        <div style={{
          position: 'absolute', inset: 0,
          background: 'url(\'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="2" stitchTiles="stitch"/><feColorMatrix values="0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.5 0"/></filter><rect width="100%25" height="100%25" filter="url(%23n)" opacity="0.4"/></svg>\')',
          mixBlendMode: 'overlay', opacity: 0.6,
        }}></div>
      )}
      <div style={{
        position: 'absolute', inset: 0,
        background: 'linear-gradient(180deg, transparent 50%, rgba(10,10,9,0.5))',
        pointerEvents: 'none',
      }}></div>
      {label && (
        <div style={{
          position: 'absolute', left: 14, bottom: 14,
          fontFamily: 'var(--font-display)', fontWeight: 900, fontStyle: 'italic',
          color: '#fff', fontSize: 14, letterSpacing: '0.05em', textTransform: 'uppercase',
          textShadow: '0 1px 2px rgba(0,0,0,0.5)',
        }}>{label}</div>
      )}
    </div>
  );
};

// Responsive helper — true when viewport <= 768px
const useMediaQuery = (query) => {
  const [match, setMatch] = React.useState(() => typeof window !== 'undefined' && window.matchMedia(query).matches);
  React.useEffect(() => {
    const mq = window.matchMedia(query);
    const onChange = () => setMatch(mq.matches);
    mq.addEventListener('change', onChange);
    return () => mq.removeEventListener('change', onChange);
  }, [query]);
  return match;
};

const useIsMobile = () => useMediaQuery('(max-width: 768px)');
const useIsTablet = () => useMediaQuery('(max-width: 1024px)');

Object.assign(window, { Eyebrow, Tag, Chip, Button, Container, PhotoBlock, useMediaQuery, useIsMobile, useIsTablet });