/* AceroLab logo oficial — símbolo rombo + wordmark "acerolab".
   variant: 'dark' (default — fondos claros) | 'light' (fondos oscuros como el nav) */

const AcerolabLogo = ({ size = 36, showWordmark = true, variant = 'dark' }) => {
  const symbolColor = variant === 'light' ? '#F4F2EE' : '#0E0E0E';
  const wordColor   = variant === 'light' ? '#F4F2EE' : '#0E0E0E';
  const accent      = '#FF6A1F';

  return (
    <div style={{ display: 'inline-flex', alignItems: 'center', gap: Math.round(size * 0.28) }}>
      {/* Símbolo — viewBox 0 0 64 64 igual que los SVGs oficiales */}
      <svg
        width={size}
        height={size}
        viewBox="0 0 64 64"
        fill="none"
        aria-hidden="true"
        style={{ flexShrink: 0 }}
      >
        <path
          d="M32 6 L58 32 L32 58 L6 32 Z"
          stroke={symbolColor}
          strokeWidth="2.4"
          strokeLinejoin="miter"
        />
        <path
          d="M14 32 L50 32"
          stroke={accent}
          strokeWidth="2.6"
        />
        <circle cx="32" cy="32" r="3.2" fill={accent} />
      </svg>

      {/* Wordmark */}
      {showWordmark && (
        <span
          style={{
            fontFamily: "'Space Grotesk', 'Inter', system-ui, sans-serif",
            fontSize: Math.round(size * 0.58),
            lineHeight: 1,
            letterSpacing: '-0.03em',
          }}
        >
          <span style={{ fontWeight: 400, color: wordColor }}>acero</span>
          <span style={{ fontWeight: 700, color: accent }}>lab</span>
        </span>
      )}
    </div>
  );
};

window.AcerolabLogo = AcerolabLogo;