// Nexsol brand tokens — per Brand Style Guide.
// Pulled directly from the brand-guide colour palette (p21) and typography spec (p24-25).

const BRAND = {
  ink:    '#0B0D10',
  slate:  '#3A4350',
  orange: '#FF8A1F',
  sky:    '#B7E3F6',
  cream:  '#F5F1E8',
  white:  '#FFFFFF',
  gradient: 'linear-gradient(135deg,#FF8A1F 0%,#F5F1E8 50%,#B7E3F6 100%)',
};

function NexsolMark({ size = 32, color = '#0B0D10', style }) {
  return (
    <svg width={size} height={size * (465.89 / 661.97)} viewBox="0 0 661.97 465.89"
      style={{ display: 'block', ...style }}>
      <polygon fill={color} points="440.8 452.57 155.3 167.07 221.17 13.32 506.67 298.82 440.8 452.57"/>
      <polygon fill={color} points="0 465.89 0 62.14 155.3 0 155.3 403.76 0 465.89"/>
      <polygon fill={color} points="506.67 465.89 506.67 62.14 661.97 0 661.97 403.76 506.67 465.89"/>
    </svg>
  );
}

function NexsolLogo({ height = 24, color = '#0B0D10', style }) {
  return (
    <span style={{ display: 'inline-flex', alignItems: 'center', gap: height * 0.4, ...style }}>
      <NexsolMark size={height * (661.97 / 465.89) * 0.55} color={color}/>
      <span style={{
        fontFamily: '"Instrument Sans", system-ui, sans-serif',
        fontWeight: 700, fontSize: height * 1.05, letterSpacing: '-0.03em',
        color, lineHeight: 1,
      }}>NexSol</span>
    </span>
  );
}

function SiteLogo({ url='', alt='NexSol', height=24, color='#0B0D10', style }) {
  if (url) {
    return <img src={url} alt={alt} style={{ display:'block', height, width:'auto', maxWidth:180, objectFit:'contain', ...style }}/>;
  }
  return <NexsolLogo height={height} color={color} style={style}/>;
}

window.BRAND = BRAND;
window.NexsolMark = NexsolMark;
window.NexsolLogo = NexsolLogo;
window.SiteLogo = SiteLogo;