// Logo de Alba Fabregat.
// variant="dark" (header + drawer móvil, fondo blanco): logo_alba.png — AF azul oscuro.
// variant="light" (footer, fondo azul oscuro #003082): logo_footer.png — AF blanco
// con fondo del mismo azul corporativo, se funde con el footer.
function AlbaLogo({ variant = "dark", compact = false, size = 44 }) {
  const blue = variant === "light" ? "#ffffff" : "#003082";
  const orange = "#FF8500";
  const sub = variant === "light" ? "rgba(255,255,255,.78)" : "#5c6880";

  const svgMark = (
    <svg width={size} height={size} viewBox="0 0 64 64" aria-hidden="true" style={{ flex: "none" }}>
      {/* A orgánica */}
      <path d="M10 50 C 14 34, 20 20, 26 14 C 30 10, 34 12, 36 20 L 42 48"
            stroke={orange} strokeWidth="4.2" fill="none" strokeLinecap="round" strokeLinejoin="round"/>
      <path d="M16 38 C 22 36, 30 36, 38 38" stroke={orange} strokeWidth="4.2" fill="none" strokeLinecap="round"/>
      {/* F entrelazada */}
      <path d="M42 14 C 50 12, 56 14, 58 18" stroke={orange} strokeWidth="4.2" fill="none" strokeLinecap="round"/>
      <path d="M44 14 C 42 26, 44 40, 48 50" stroke={orange} strokeWidth="4.2" fill="none" strokeLinecap="round"/>
      <path d="M44 30 C 48 28, 52 28, 54 30" stroke={orange} strokeWidth="4.2" fill="none" strokeLinecap="round"/>
      {/* Semiluna flotante */}
      <path d="M50 6 C 52 5, 55 5, 56 7 C 54.5 6.5, 52 6.5, 50.5 7.5 Z"
            fill={orange}/>
    </svg>
  );

  const imgSrc = variant === "light" ? "../logo_footer.png" : "../logo_alba.png";
  const imgMark = (
    <img src={imgSrc} alt=""
         width={size} height={size}
         style={{ display: "block", flex: "none", width: size, height: size, objectFit: "contain" }}/>
  );

  const mark = imgMark;

  if (compact) return mark;

  return (
    <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
      <div style={{ display: "flex", flexDirection: "column", gap: 4, lineHeight: 1.1 }}>
        <div style={{
          fontFamily: "Fraunces, 'Source Serif 4', Georgia, serif",
          fontWeight: 700,
          fontSize: 24,
          color: blue,
          letterSpacing: "-0.01em",
          whiteSpace: "nowrap",
          lineHeight: 1,
        }}>
          Alba <span style={{ fontStyle: "italic", fontWeight: 500 }}>Fabregat</span>
        </div>
        <div style={{
          fontSize: 10.5,
          letterSpacing: "0.12em",
          textTransform: "uppercase",
          color: sub,
          fontWeight: 600,
          lineHeight: 1.1,
        }}>
          {window.t ? window.t("logoSub") : "Mediadora · Agente MGS"}
        </div>
      </div>
      {mark}
    </div>
  );
}

window.AlbaLogo = AlbaLogo;