/* eslint-disable */
// Crisp HTML+CSS rendering of the CBM wordmark.
// Replaces the rasterised PNG so it stays sharp at any size and on any background.
//
//   <Logo size={48} />              // navy lockup, default
//   <Logo size={48} variant="light" />   // for use on white surfaces
//   <Logo size={48} url={false} />  // hide the www.cbm.cw bottom strip

const Logo = ({ size = 40, variant = 'dark', url = true, className = '' }) => {
  // `size` is the height of the BUSINESS wordmark itself (the most visible part);
  // total component height ends up a bit larger because of the eyebrow + url rows.
  const isDark = variant === 'dark';
  // Ensure secondary type never drops below legibility threshold.
  const small = Math.max(size * 0.24, 10);
  const tiny  = Math.max(size * 0.18, 9);

  const wrapStyle = {
    display: 'inline-flex',
    flexDirection: 'column',
    background: isDark ? '#08345E' : 'transparent',
    color: isDark ? '#FFFFFF' : '#08345E',
    padding: `${size * 0.16}px ${size * 0.22}px ${size * 0.16}px`,
    lineHeight: 1,
    fontFamily: 'Playfair Display, Georgia, serif',
    boxSizing: 'border-box',
    gap: size * 0.08,
  };

  const curacao = {
    color: '#FFC20E',
    fontFamily: 'Montserrat, sans-serif',
    fontWeight: 700,
    fontSize: small,
    letterSpacing: '0.14em',
    textTransform: 'uppercase',
    lineHeight: 1,
  };

  const businessWrap = {
    display: 'flex',
    alignItems: 'baseline',
    gap: size * 0.08,
    lineHeight: 0.9,
  };
  const business = {
    fontFamily: 'Playfair Display, Georgia, serif',
    fontWeight: 800,
    fontSize: size * 0.95,
    letterSpacing: '-0.005em',
    color: isDark ? '#FFFFFF' : '#08345E',
    lineHeight: 0.9,
  };
  const magazine = {
    color: '#FFC20E',
    fontFamily: 'Montserrat, sans-serif',
    fontWeight: 700,
    fontSize: small,
    letterSpacing: '0.14em',
    textTransform: 'uppercase',
    lineHeight: 1,
  };

  const urlStyle = {
    color: isDark ? '#FFFFFF' : '#08345E',
    fontFamily: 'Montserrat, sans-serif',
    fontWeight: 600,
    fontSize: tiny,
    letterSpacing: '0.22em',
    textTransform: 'uppercase',
    lineHeight: 1,
  };

  return (
    <div style={wrapStyle} className={className} aria-label="Curaçao Business Magazine">
      <div style={curacao}>Curaçao</div>
      <div style={businessWrap}>
        <span style={business}>BUSINESS</span>
        <span style={magazine}>Magazine</span>
      </div>
      {url && <div style={urlStyle}>www.cbm.cw</div>}
    </div>
  );
};

// Compact monogram "B" lockup — for tight spaces (favicons, avatars).
const LogoMonogram = ({ size = 48 }) => (
  <div style={{
    width: size, height: size, background: '#08345E', borderRadius: size * 0.18,
    display: 'flex', alignItems: 'center', justifyContent: 'center',
    fontFamily: 'Playfair Display, Georgia, serif', fontWeight: 800,
    color: '#FFFFFF', fontSize: size * 0.6, lineHeight: 1,
  }} aria-label="CBM">B</div>
);

Object.assign(window, { Logo, LogoMonogram });