{
  "version": "2.6",
  "children": [
    {
      "type": "frame",
      "name": "Table Map Showcase",
      "width": 1440,
      "fill": "$bg-page",
      "layout": "vertical",
      "gap": 80,
      "padding": [80, 120],
      "children": [
        {
          "type": "frame",
          "id": "TableMapSection",
          "name": "Table Map Section",
          "width": "fill_container",
          "layout": "vertical",
          "gap": 32,
          "children": [
            {
              "type": "frame",
              "id": "TableMapHeader",
              "name": "tableMapSectionHeader",
              "layout": "vertical",
              "gap": 16,
              "alignItems": "center",
              "children": [
                {
                  "type": "frame",
                  "id": "TblMapBadge",
                  "name": "shBadge",
                  "fill": "#FF5C0018",
                  "cornerRadius": 100,
                  "padding": [6, 14],
                  "children": [
                    {"type": "icon_font", "id": "TblMapBadgeIcon", "iconFontName": "utensils", "iconFontFamily": "lucide", "width": 12, "height": 12, "fill": "$orange-primary"},
                    {"type": "text", "id": "TblMapBadgeText", "name": "badgeText", "fill": "$orange-primary", "content": "TABLE MAP", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "500", "letterSpacing": 2}
                  ]
                },
                {"type": "text", "id": "TblMapTitle", "name": "shTitle", "fill": "$text-primary", "content": "Restaurant Table Status", "textAlign": "center", "fontFamily": "Roboto", "fontSize": 42, "fontWeight": "normal", "letterSpacing": -1},
                {"type": "text", "id": "TblMapDesc", "name": "shDesc", "fill": "$text-tertiary", "textGrowth": "fixed-width", "width": 600, "content": "Table status cards for restaurant POS with Available, Occupied, and Reserved states.", "lineHeight": 1.6, "textAlign": "center", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "normal"}
              ]
            },
            {
              "type": "frame",
              "id": "TableMapExamples",
              "name": "tableMapExamples",
              "width": "fill_container",
              "fill": "$bg-surface",
              "cornerRadius": 16,
              "stroke": {"thickness": 1, "fill": "$border-subtle"},
              "padding": 40,
              "gap": 24,
              "justifyContent": "center",
              "children": [
                {
                  "type": "frame",
                  "id": "TableAvailable",
                  "name": "Organism/Table/Available",
                  "reusable": true,
                  "width": 100,
                  "height": 100,
                  "fill": "#22C55E18",
                  "cornerRadius": 12,
                  "stroke": {"thickness": 2, "fill": "$green-success"},
                  "layout": "vertical",
                  "gap": 4,
                  "justifyContent": "center",
                  "alignItems": "center",
                  "children": [
                    {"type": "text", "id": "TblAvailNum", "name": "tableNumber", "fill": "$green-success", "content": "T01", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "600"},
                    {"type": "text", "id": "TblAvailSeats", "name": "seatCount", "fill": "$text-secondary", "content": "4 ghế", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "normal"}
                  ]
                },
                {
                  "type": "frame",
                  "id": "TableOccupied",
                  "name": "Organism/Table/Occupied",
                  "reusable": true,
                  "width": 100,
                  "height": 100,
                  "fill": "$orange-primary",
                  "cornerRadius": 12,
                  "layout": "vertical",
                  "gap": 4,
                  "justifyContent": "center",
                  "alignItems": "center",
                  "children": [
                    {"type": "text", "id": "TblOccNum", "name": "tableNumber", "fill": "$text-primary", "content": "T02", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "600"},
                    {"type": "text", "id": "TblOccAmount", "name": "orderAmount", "fill": "$text-muted", "content": "450K", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"},
                    {"type": "text", "id": "TblOccTime", "name": "elapsedTime", "fill": "#FFFFFF99", "content": "45 phút", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "normal"}
                  ]
                },
                {
                  "type": "frame",
                  "id": "TableReserved",
                  "name": "Organism/Table/Reserved",
                  "reusable": true,
                  "width": 100,
                  "height": 100,
                  "fill": "#F59E0B18",
                  "cornerRadius": 12,
                  "stroke": {"thickness": 2, "fill": "$status-warning"},
                  "layout": "vertical",
                  "gap": 4,
                  "justifyContent": "center",
                  "alignItems": "center",
                  "children": [
                    {"type": "text", "id": "TblResNum", "name": "tableNumber", "fill": "$status-warning", "content": "T03", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "600"},
                    {"type": "text", "id": "TblResTime", "name": "reserveTime", "fill": "$text-secondary", "content": "19:00", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"},
                    {"type": "text", "id": "TblResName", "name": "guestName", "fill": "$text-tertiary", "content": "Anh Minh", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "normal"}
                  ]
                }
              ]
            },
            {
              "type": "frame",
              "id": "TableMapContainer",
              "name": "Organism/TableMap/Container",
              "reusable": true,
              "width": 600,
              "height": 400,
              "fill": "$bg-surface",
              "cornerRadius": 16,
              "stroke": {"thickness": 1, "fill": "$border-subtle"},
              "layout": "vertical",
              "padding": 20,
              "gap": 16,
              "children": [
                {
                  "type": "frame",
                  "id": "TblMapContHeader",
                  "name": "header",
                  "width": "fill_container",
                  "justifyContent": "space_between",
                  "alignItems": "center",
                  "children": [
                    {"type": "text", "id": "TblMapContTitle", "fill": "$text-primary", "content": "Sơ đồ bàn", "fontFamily": "Roboto", "fontSize": 20, "fontWeight": "600"},
                    {
                      "type": "frame",
                      "id": "TblMapLegend",
                      "name": "legend",
                      "gap": 16,
                      "children": [
                        {"type": "frame", "id": "LegAvail", "gap": 6, "alignItems": "center", "children": [
                          {"type": "rectangle", "id": "LegAvailDot", "width": 12, "height": 12, "fill": "$green-success", "cornerRadius": 2},
                          {"type": "text", "id": "LegAvailTxt", "fill": "$text-secondary", "content": "Trống", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "normal"}
                        ]},
                        {"type": "frame", "id": "LegOcc", "gap": 6, "alignItems": "center", "children": [
                          {"type": "rectangle", "id": "LegOccDot", "width": 12, "height": 12, "fill": "$orange-primary", "cornerRadius": 2},
                          {"type": "text", "id": "LegOccTxt", "fill": "$text-secondary", "content": "Đang phục vụ", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "normal"}
                        ]},
                        {"type": "frame", "id": "LegRes", "gap": 6, "alignItems": "center", "children": [
                          {"type": "rectangle", "id": "LegResDot", "width": 12, "height": 12, "fill": "$status-warning", "cornerRadius": 2},
                          {"type": "text", "id": "LegResTxt", "fill": "$text-secondary", "content": "Đã đặt", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "normal"}
                        ]}
                      ]
                    }
                  ]
                }
              ]
            }
          ]
        }
      ]
    }
  ],
  "variables": {
    "bg-elevated": {"type": "color", "value": "#1A1A1D"},
    "bg-interactive": {"type": "color", "value": "#2A2A2E"},
    "bg-page": {"type": "color", "value": "#0A0A0B"},
    "bg-surface": {"type": "color", "value": "#111113"},
    "border-default": {"type": "color", "value": "#2A2A2E"},
    "border-subtle": {"type": "color", "value": "#1F1F23"},
    "orange-primary": {"type": "color", "value": "#FF5C00"},
    "status-warning": {"type": "color", "value": "#F59E0B"},
    "text-muted": {"type": "color", "value": "#FFFFFFCC"},
    "text-primary": {"type": "color", "value": "#FFFFFF"},
    "text-secondary": {"type": "color", "value": "#ADADB0"},
    "text-tertiary": {"type": "color", "value": "#8B8B90"},
    "green-success": {"type": "color", "value": "#22C55E"}
  }
}
