// OMNIX · Primitivos UI compartidos (fondo blanco)
// Container, Eyebrow, Rule, Button, Badge, SectionMeta

const Container = ({ children, narrow = false, className = '', style = {} }) => (
  <div
    className={className}
    style={{
      maxWidth: narrow ? 880 : 1280,
      margin: '0 auto',
      padding: '0 32px',
      ...style,
    }}
  >
    {children}
  </div>
);

const Eyebrow = ({ children, color, style = {} }) => (
  <div
    style={{
      fontFamily: 'var(--font-mono)',
      fontSize: 11,
      letterSpacing: '0.18em',
      textTransform: 'uppercase',
      color: color || '#52557A',
      fontWeight: 500,
      ...style,
    }}
  >
    {children}
  </div>
);

const Rule = ({ dark = false, width = 48, style = {} }) => (
  <hr
    style={{
      border: 0,
      borderTop: `1.5px solid ${dark ? '#FFFFFF' : '#1E1F26'}`,
      width,
      margin: '18px 0',
      ...style,
    }}
  />
);

const Button = ({ variant = 'primary', children, icon, iconLeft, href, onClick, style = {}, dark = false, as }) => {
  const base = {
    fontFamily: 'var(--font-body)',
    fontWeight: 600,
    fontSize: 15,
    padding: '13px 22px',
    borderRadius: 4,
    border: '1.5px solid transparent',
    cursor: 'pointer',
    display: 'inline-flex',
    alignItems: 'center',
    gap: 8,
    letterSpacing: '-0.005em',
    transition: 'all 160ms cubic-bezier(0.2, 0.7, 0.2, 1)',
    textDecoration: 'none',
    lineHeight: 1,
    whiteSpace: 'nowrap',
  };
  const variants = {
    primary: {
      background: '#F4024C',
      color: '#FFFFFF',
      boxShadow: '0 8px 24px rgba(244,2,76,0.25)',
    },
    secondary: {
      background: dark ? '#FFFFFF' : '#1E1F26',
      color: dark ? '#1E1F26' : '#FFFFFF',
    },
    ghost: {
      background: 'transparent',
      color: dark ? '#FFFFFF' : '#1E1F26',
      borderColor: dark ? '#2E3140' : '#1E1F26',
    },
    outline: {
      background: 'transparent',
      color: '#1E1F26',
      borderColor: '#C7CFDA',
    }
  };
  const props = {
    style: { ...base, ...variants[variant], ...style },
    onClick,
    onMouseEnter: (e) => {
      if (variant === 'primary') e.currentTarget.style.background = '#B00238';
      if (variant === 'ghost' && !dark) e.currentTarget.style.background = '#1E1F26', e.currentTarget.style.color = '#FFF';
      if (variant === 'ghost' && dark) e.currentTarget.style.background = '#FFF', e.currentTarget.style.color = '#000';
      if (variant === 'outline') e.currentTarget.style.borderColor = '#1E1F26';
    },
    onMouseLeave: (e) => {
      Object.assign(e.currentTarget.style, { ...base, ...variants[variant], ...style });
    },
  };
  const content = (
    <>
      {iconLeft && <i data-lucide={iconLeft} width="16" height="16"></i>}
      {children}
      {icon && <i data-lucide={icon} width="16" height="16" style={{ marginLeft: 2 }}></i>}
    </>
  );
  if (href) return <a href={href} {...props}>{content}</a>;
  return <button {...props}>{content}</button>;
};

const Badge = ({ children, tone = 'ink', style = {} }) => {
  const tones = {
    ink:     { background: '#1E1F26', color: '#FFFFFF' },
    fuxia:   { background: '#FFE5EC', color: '#B00238' },
    blue:    { background: '#E6EEFB', color: '#003B8C' },
    outline: { background: 'transparent', color: '#52557A', border: '1px solid #C7CFDA' },
    'outline-dark': { background: 'transparent', color: '#96A3B5', border: '1px solid #2E3140' },
    success: { background: '#E3F2E9', color: '#0F5132' },
    warning: { background: '#FBF3D9', color: '#B8860B' },
    ghost:   { background: '#F2F5F9', color: '#52557A' },
  };
  return (
    <span
      style={{
        fontFamily: 'var(--font-mono)',
        fontSize: 10,
        fontWeight: 500,
        letterSpacing: '0.14em',
        textTransform: 'uppercase',
        padding: '5px 10px',
        borderRadius: 2,
        display: 'inline-flex',
        alignItems: 'center',
        gap: 6,
        ...tones[tone],
        ...style,
      }}
    >
      {children}
    </span>
  );
};

// Section number + label header helper
const SectionMeta = ({ n, label, color = '#F4024C', dark = false, style = {} }) => (
  <div style={{ display: 'flex', alignItems: 'baseline', gap: 14, marginBottom: 12, ...style }}>
    <span style={{
      fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.18em',
      color: color, fontWeight: 500,
    }}>{n}</span>
    <span style={{
      fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.18em',
      color: dark ? '#96A3B5' : '#52557A', fontWeight: 500, textTransform: 'uppercase',
    }}>{label}</span>
  </div>
);

// Editorial pill for "[VALIDAR]" metric footnotes
const ValidateMark = () => (
  <sup style={{
    fontFamily: 'var(--font-mono)', fontSize: '0.4em', color: '#B8860B',
    letterSpacing: '0.05em', marginLeft: 2, fontWeight: 500, top: '-0.9em',
    position: 'relative',
  }}>*</sup>
);

Object.assign(window, { Container, Eyebrow, Rule, Button, Badge, SectionMeta, ValidateMark });