// Logo.jsx — La Isla Network logo (color + white variants)
function Logo({ variant = "color", width = 180 }) {
  const chevronTop = variant === "white" ? "#FFFFFF" : "#6399AF";
  const chevronBot = variant === "white" ? "#FFFFFF" : "#606637";
  const wordmark   = variant === "white" ? "#FFFFFF" : "#606637";
  const tagline    = variant === "white" ? "#FFFFFF" : "#6399AF";
  return (
    <svg viewBox="0 0 711.1 315.7" width={width} height={width * 315.7 / 711.1} xmlns="http://www.w3.org/2000/svg" aria-label="La Isla Network">
      <g fill={tagline}>
        <path d="M474.5,204.6c0.2,3.3,2.5,5.8,6.6,5.8c3.2,0,4.7-1,5.7-2.7h8.5c-1.7,4.8-5.7,8.9-14.3,8.9c-11,0-15-7.3-15-14.2c0-7.5,5.1-14.2,14.9-14.2c10.5,0,14.7,7.2,14.7,14.2c0,0.7,0,1.2-0.1,2H474.5z M487,199.4c-0.2-2-1.2-5-6.1-5c-4.4,0-6.1,2.4-6.3,5H487z"/>
        <path d="M551.1,189.1c-3.2,12.7-4.2,17.3-4.6,20.1h-0.1c-0.5-2.5-1.3-6.2-5.2-20.1h-8c-3.7,13.3-4.6,17-5.4,20.3h0c-0.5-3-1.3-6.9-4.5-20.3h-14.8v-7.9H500v7.9h-4.8v6.2h4.8v12.8c0,5.3,1.9,8.1,8.5,8.1c2,0,3.9-0.2,5.4-0.6v-5.8c-0.7,0.2-1.6,0.2-2.3,0.2c-2.6,0-3.1-1-3.1-3.3v-11.3h7.9l6.2,20.7h9.3c2.5-7.9,4.4-14.6,5.1-17.4h0c0.9,3.5,2.2,8,4.9,17.4h9.2l8.4-26.9H551.1z"/>
        <path d="M588.2,202.5c0,8.3-5.7,14.2-15.7,14.2c-10,0-15.1-6.7-15.1-14.2c0-7.3,5.3-14.2,15.5-14.2C583.3,188.4,588.2,195.9,588.2,202.5 M566,202.5c0,4.2,2.3,7.8,6.8,7.8c4.6,0,6.7-3.5,6.7-7.6c0-4.1-2-7.9-6.8-7.9C568.1,194.8,566,198.4,566,202.5"/>
        <path d="M619.1,200.7c2.7-2.8,8.1-8.1,11.5-11.6h10l-11.3,10.3l12.5,16.6h-10.2l-8.2-11.9l-4.2,3.6v8.2h-8.5v-38.9h8.5V200.7z"/>
        <path d="M453.6,188.4c-5.2,0-7.6,2.3-8.9,4.2v-3.4h-8.6V216h8.6v0h0v-13.4c0-4.8,1.8-7.6,5.8-7.6c3.8,0,5,2.7,5,5.8V216h8.6v-16.6C464.1,192.5,460.2,188.4,453.6,188.4"/>
        <path d="M598.7,194.5l0-5.4h-8.5l0.1,26.9h8.5v0h0v-10c0.1-7.5,4.3-9.9,10.3-9.8v-7.7C603.5,188.3,600.3,190.9,598.7,194.5"/>
      </g>
      <g fill={wordmark}>
        <rect x="310.5" y="69.3" width="22.1" height="103.6"/>
        <path d="M485.4,150.7c1.8,5,6.4,8.2,15.8,8.2s12-2.8,12-6.2c0-3.9-3-5.8-17.1-7.7c-26.7-3.8-30.3-13.5-30.3-22.1c0-10.7,8-22.6,32.3-22.6c24.6,0,33.3,11.6,34.2,21.6h-21.7c-1.1-3.2-3.5-7-13.4-7c-8.4,0-9.9,3.2-9.9,5.7c0,3,2.3,4.7,15.3,6.6c28.4,4.3,32.1,13.8,32.1,23.6c0,12.7-9.6,23.3-35.2,23.3c-19.1,0-34.1-8.1-36.3-23.4H485.4z"/>
        <rect x="540.6" y="69.3" width="22.1" height="103.6"/>
        <path d="M641.8,172.9h-21l0-8.6c-3.8,6-11.8,9.7-25,9.7c-19.1,0-26.8-11.6-26.8-22.9c0-18.3,16.1-23.4,36.7-23.4h14.6v-2.2c0-5.7-2.4-10.3-12.7-10.3c-9.5,0-11.6,3.5-12.6,7.6h-22.1c0.5-8.7,6.6-22.6,34.4-22.6c30.3,0,34.6,14.3,34.6,26L641.8,172.9z M620.2,141.8c-1.6-0.1-6.4-0.1-14.2-0.1c-11.2,0-15.7,3-15.7,8.5c0,4.6,3.7,8.3,11.8,8.3c12,0,18.1-5.5,18.1-15.6V141.8z"/>
        <path d="M410.5,172.9h-21l0-7.9c-3.8,5.2-11.8,9-25,9c-19.1,0-26.8-11.6-26.8-22.9c0-18.3,16.1-23.4,36.7-23.4h14.6v-2.2c0-5.7-2.4-10.3-12.7-10.3c-9.5,0-11.6,3.5-12.6,7.6h-22.1c0.5-8.7,6.6-22.6,34.4-22.6c30.3,0,34.6,14.3,34.6,26L410.5,172.9z M388.9,141.8c-1.6-0.1-6.4-0.1-14.2-0.1c-11.2,0-15.7,3-15.7,8.5c0,4.6,3.7,8.3,11.8,8.3c12,0,18.1-5.5,18.1-15.6V141.8z"/>
        <rect x="436.2" y="103.6" width="22.1" height="69.3"/>
        <path d="M459.4,80.2c0,6.8-5.5,12.2-12.2,12.2c-6.8,0-12.2-5.5-12.2-12.2c0-6.8,5.5-12.2,12.2-12.2C453.9,68,459.4,73.5,459.4,80.2"/>
      </g>
      <polygon fill={chevronTop} points="69.3,177.1 138,228.7 162,210.9 209.2,246.3 302.2,177.1"/>
      <polygon fill={chevronBot} points="69.3,172.9 138,121.3 162,139.1 209.2,103.6 302.2,172.9"/>
    </svg>
  );
}
Object.assign(window, { Logo });