/* Stylized monochrome logo placeholders for 25 miners.
   Every logo draws to the SAME baseline so the grid reads clean. */

const L = ({ id, children }) => (
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 220 56"
    fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round"
    data-logo={id} aria-label={id}>
    {children}
  </svg>
);

const tx = (txt, x=8, y=38, size=28, weight=700, letter='-0.04em', family='Inter, sans-serif') => (
  <text x={x} y={y} fontFamily={family} fontWeight={weight} fontSize={size}
    letterSpacing={letter} fill="currentColor" stroke="none">{txt}</text>
);

const CompanyLogo = ({ id }) => {
  switch (id) {
    case 'bhp': return <L id={id}>
      {/* bold stencil */}
      {tx('BHP', 24, 42, 36, 800, '0.04em')}
    </L>;
    case 'anglo': return <L id={id}>
      {tx('ANGLO', 18, 26, 13, 700, '0.2em')}
      {tx('AMERICAN', 18, 44, 13, 700, '0.2em')}
    </L>;
    case 'barrick': return <L id={id}>
      <rect x="10" y="20" width="28" height="18" fill="currentColor" stroke="none"/>
      <path d="M14 28h20M14 34h20" stroke="#FAFAF7" strokeWidth="1.5"/>
      {tx('BARRICK', 46, 33, 16, 700, '0.08em', 'Georgia, serif')}
    </L>;
    case 'newmont': return <L id={id}>
      <path d="M12 40 L 12 16 L 18 40 L 18 16" strokeWidth="1.6"/>
      {tx('Newmont', 26, 36, 22, 500, '-0.02em', 'Georgia, serif')}
    </L>;
    case 'teck': return <L id={id}>
      {tx('teck', 18, 42, 38, 700, '-0.05em', 'Inter, sans-serif')}
    </L>;
    case 'rio': return <L id={id}>
      <circle cx="24" cy="28" r="14" strokeWidth="1.6"/>
      <circle cx="24" cy="28" r="6" fill="currentColor" stroke="none"/>
      {tx('RioTinto', 46, 34, 18, 500, '0.01em')}
    </L>;
    case 'vale': return <L id={id}>
      <path d="M14 20 L 26 38 L 38 20" strokeWidth="2"/>
      {tx('Vale', 52, 38, 28, 700, '-0.02em')}
    </L>;
    case 'sibanye': return <L id={id}>
      <circle cx="24" cy="28" r="11" strokeWidth="1.4"/>
      <path d="M17 28 L 24 21 L 31 28 L 24 35 Z" strokeWidth="1.2"/>
      {tx('Sibanye', 42, 24, 13, 700, '0.02em')}
      {tx('Stillwater', 42, 40, 13, 400, '0.02em')}
    </L>;
    case 'anglogold': return <L id={id}>
      <path d="M14 40 L 24 14 L 34 40 Z" strokeWidth="1.4"/>
      <circle cx="24" cy="30" r="3.5" fill="currentColor" stroke="none"/>
      {tx('AngloGold', 42, 26, 13, 700, '0.04em')}
      {tx('ASHANTI', 42, 42, 12, 700, '0.12em')}
    </L>;
    case 'freeport': return <L id={id}>
      <path d="M12 40 L 12 16 L 22 16 M 12 28 L 20 28" strokeWidth="2"/>
      {tx('Freeport-McMoRan', 28, 34, 13, 600, '0.02em')}
    </L>;
    case 'alcoa': return <L id={id}>
      <path d="M10 38 L 20 18 L 30 38 Z" strokeWidth="1.6"/>
      <path d="M16 38 L 20 30 L 24 38 Z" fill="currentColor" stroke="none"/>
      {tx('Alcoa', 38, 36, 22, 700, '-0.02em')}
    </L>;
    case 'mmg': return <L id={id}>
      {tx('MMG', 10, 40, 32, 800, '-0.02em')}
    </L>;
    case 'glencore': return <L id={id}>
      {tx('glencore', 10, 34, 26, 500, '-0.01em')}
    </L>;
    case 'fortescue': return <L id={id}>
      <path d="M12 18 L 28 18 L 26 24 L 14 24 L 14 30 L 24 30 L 22 36 L 14 36" strokeWidth="2"/>
      {tx('Fortescue', 42, 34, 17, 600, '-0.01em')}
    </L>;
    case 'kumba': return <L id={id}>
      <path d="M10 38 L 18 18 L 26 38 Z M 26 38 L 34 18 L 42 38 Z" strokeWidth="1.3"/>
      {tx('Kumba', 50, 36, 20, 600, '-0.01em')}
    </L>;
    case 'antofa': return <L id={id}>
      {tx('ANTOFAGASTA', 14, 32, 15, 700, '0.12em')}
      <line x1="14" y1="40" x2="210" y2="40" strokeWidth="1"/>
      {tx('PLC', 170, 32, 15, 400, '0.12em')}
    </L>;
    case 'firstq': return <L id={id}>
      <circle cx="22" cy="28" r="12" strokeWidth="1.4"/>
      {tx('FQ', 15, 34, 16, 700, '0')}
      {tx('First Quantum', 42, 34, 15, 500, '-0.01em')}
    </L>;
    case 'goldf': return <L id={id}>
      <path d="M14 40 L 14 16 L 20 40 L 20 16 L 26 40 L 26 16" strokeWidth="1.6"/>
      {tx('Gold Fields', 34, 36, 19, 500, '-0.01em', 'Georgia, serif')}
    </L>;
    case 'southern': return <L id={id}>
      {tx('SOUTHERN', 10, 24, 12, 700, '0.18em')}
      {tx('COPPER', 10, 42, 18, 700, '0.12em')}
    </L>;
    case 'lundin': return <L id={id}>
      <circle cx="20" cy="28" r="9" strokeWidth="1.4"/>
      <path d="M20 19 v18 M11 28 h18" strokeWidth="0.8"/>
      {tx('LUNDIN', 36, 36, 20, 700, '0.08em')}
    </L>;
    case 'polyus': return <L id={id}>
      <circle cx="22" cy="28" r="10" strokeWidth="1.3"/>
      <path d="M16 28 Q 22 20, 28 28 Q 22 36, 16 28" strokeWidth="1"/>
      {tx('POLYUS', 40, 36, 18, 700, '0.18em')}
    </L>;
    case 'zijin': return <L id={id}>
      {tx('Zijin', 10, 38, 28, 600, '-0.01em')}
    </L>;
    case 'boliden': return <L id={id}>
      <path d="M14 16 L 26 16 L 26 40 L 14 40 Z M 14 28 L 26 28" strokeWidth="1.6"/>
      {tx('boliden', 34, 36, 22, 500, '-0.03em')}
    </L>;
    case 'harmony': return <L id={id}>
      <path d="M14 40 L 14 24 Q 22 16, 30 24 L 30 40" strokeWidth="1.6"/>
      <path d="M14 32 L 30 32" strokeWidth="1.6"/>
      {tx('Harmony', 38, 36, 20, 500, '-0.01em', 'Georgia, serif')}
    </L>;
    case 'norilsk': return <L id={id}>
      <path d="M12 40 L 12 16 L 28 40 L 28 16" strokeWidth="1.8"/>
      {tx('Nornickel', 36, 36, 18, 600, '-0.01em')}
    </L>;
    case 'orano': return <L id={id}>
      <circle cx="18" cy="28" r="10" strokeWidth="1.6"/>
      <path d="M18 20 v16 M10 28 h16" strokeWidth="1"/>
      {tx('orano', 34, 38, 26, 600, '-0.02em')}
    </L>;
    case 'south32': return <L id={id}>
      <path d="M12 16 L 28 16 L 20 28 L 28 40 L 12 40" strokeWidth="1.6"/>
      {tx('South32', 36, 36, 20, 600, '-0.02em')}
    </L>;
    default: return <L id={id}>{tx((id || '').toUpperCase(), 10, 36, 18, 700, '0.04em')}</L>;
  }
};

window.CompanyLogo = CompanyLogo;