// OXIDE logo — real brand mark (grunge flame on rust red)
window.OxideLogo = function OxideLogo({ size = 40, mono = false, style }) {
  return (
    <img src="assets/logo.png?v=2" width={size} height={size} alt="OXIDE"
      style={{ display: 'block', objectFit: 'contain', ...style }} />
  );
};

window.OxideWordmark = function OxideWordmark({ color = '#fff', size = 22, tracking = 0.14 }) {
  // Two-line lockup: OXIDE on top, SURVIVAL ISLAND below.
  // The sub-line is sized so its width matches the OXIDE line — both
  // baselines/edges align inside an invisible rectangle.
  const subSize = Math.round(size * 0.42);
  const subTracking = 0.205; // tuned so "SURVIVAL ISLAND" matches OXIDE width
  const family = '"Roboto Condensed", "Archivo Black", "Anton", Impact, sans-serif';
  return (
    <span style={{
      display: 'inline-flex', flexDirection: 'column', alignItems: 'stretch',
      lineHeight: 1, color,
    }}>
      <span style={{
        fontFamily: family, fontWeight: 900, fontStretch: 'condensed',
        fontSize: size, letterSpacing: `${tracking}em`,
        textTransform: 'uppercase', lineHeight: 1,
      }}>OXIDE</span>
      <span style={{
        fontFamily: family, fontWeight: 700, fontStretch: 'condensed',
        fontSize: subSize, letterSpacing: `${subTracking}em`,
        textTransform: 'uppercase', lineHeight: 1,
        marginTop: Math.round(size * 0.18),
        opacity: 0.95,
        whiteSpace: 'nowrap',
      }}>SURVIVAL ISLAND</span>
    </span>
  );
};