// Almeida & Matos wordmark — recreated from brand manual specs
// Brand colors: navy #354271, gold #D2AE6D
// Font: Microsoft New Tai Lue (humanist sans). Substitute: Manrope.

const Logo = ({ size = 120, gold = '#D2AE6D', light = '#F4EFE6', monochrome = false }) => {
  const goldColor = monochrome ? light : gold;
  return (
    <svg
      viewBox="0 0 400 220"
      width={size}
      height={size * 220 / 400}
      xmlns="http://www.w3.org/2000/svg"
      style={{ display: 'block' }}
    >
      {/* Top eyebrow: SOCIEDADE DE ADVOGADOS */}
      <text
        x="200"
        y="38"
        textAnchor="middle"
        fontFamily="'Manrope', sans-serif"
        fontSize="13"
        fontWeight="500"
        letterSpacing="6"
        fill={light}
      >
        SOCIEDADE DE ADVOGADOS
      </text>

      {/* Hairline divider */}
      <line x1="80" y1="55" x2="320" y2="55" stroke={goldColor} strokeWidth="0.6" opacity="0.7" />

      {/* "almeida" line */}
      <text
        x="200"
        y="125"
        textAnchor="middle"
        fontFamily="'Manrope', sans-serif"
        fontSize="62"
        fontWeight="300"
        letterSpacing="-1"
        fill={light}
      >
        almeida
      </text>

      {/* "&matos" line — gold */}
      <text
        x="200"
        y="190"
        textAnchor="middle"
        fontFamily="'Manrope', sans-serif"
        fontSize="62"
        fontWeight="300"
        letterSpacing="-1"
        fill={goldColor}
      >
        &amp;<tspan fontWeight="500">matos</tspan>
      </text>
    </svg>
  );
};

// Compact version (just wordmark, no eyebrow) for avatar-style use
const LogoMark = ({ size = 80, gold = '#D2AE6D', light = '#F4EFE6' }) => {
  return (
    <svg viewBox="0 0 200 200" width={size} height={size} xmlns="http://www.w3.org/2000/svg">
      <text
        x="100"
        y="92"
        textAnchor="middle"
        fontFamily="'Manrope', sans-serif"
        fontSize="48"
        fontWeight="300"
        letterSpacing="-1"
        fill={light}
      >
        almeida
      </text>
      <text
        x="100"
        y="146"
        textAnchor="middle"
        fontFamily="'Manrope', sans-serif"
        fontSize="48"
        fontWeight="300"
        letterSpacing="-1"
        fill={gold}
      >
        &amp;<tspan fontWeight="500">matos</tspan>
      </text>
    </svg>
  );
};

// Monogram (A&M) for tight avatar circle
const Monogram = ({ size = 120, gold = '#D2AE6D', light = '#F4EFE6' }) => {
  return (
    <svg viewBox="0 0 120 120" width={size} height={size} xmlns="http://www.w3.org/2000/svg">
      <text
        x="60"
        y="78"
        textAnchor="middle"
        fontFamily="'Manrope', sans-serif"
        fontSize="68"
        fontWeight="200"
        letterSpacing="-3"
        fill={light}
      >
        A<tspan fill={gold} fontWeight="400">&amp;</tspan>M
      </text>
    </svg>
  );
};

Object.assign(window, { Logo, LogoMark, Monogram });