{
  "version": "2.6",
  "children": [
    {
      "type": "frame",
      "name": "Room Grid Showcase",
      "width": 1440,
      "fill": "$bg-page",
      "layout": "vertical",
      "gap": 80,
      "padding": [80, 120],
      "children": [
        {
          "type": "frame",
          "id": "RoomGridSection",
          "name": "Room Grid Section",
          "width": "fill_container",
          "layout": "vertical",
          "gap": 32,
          "children": [
            {
              "type": "frame",
              "id": "RoomGridHeader",
              "name": "roomGridSectionHeader",
              "layout": "vertical",
              "gap": 16,
              "alignItems": "center",
              "children": [
                {
                  "type": "frame",
                  "id": "RmGridBadge",
                  "name": "shBadge",
                  "fill": "#EC489918",
                  "cornerRadius": 100,
                  "padding": [6, 14],
                  "children": [
                    {"type": "icon_font", "id": "RmGridBadgeIcon", "iconFontName": "mic", "iconFontFamily": "lucide", "width": 12, "height": 12, "fill": "$karaoke-primary"},
                    {"type": "text", "id": "RmGridBadgeText", "name": "badgeText", "fill": "$karaoke-primary", "content": "ROOM GRID", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "500", "letterSpacing": 2}
                  ]
                },
                {"type": "text", "id": "RmGridTitle", "name": "shTitle", "fill": "$text-primary", "content": "Karaoke Room Status", "textAlign": "center", "fontFamily": "Roboto", "fontSize": 42, "fontWeight": "normal", "letterSpacing": -1},
                {"type": "text", "id": "RmGridDesc", "name": "shDesc", "fill": "$text-tertiary", "textGrowth": "fixed-width", "width": 600, "content": "Room cards with session timer, billing info, and quick actions for Karaoke POS.", "lineHeight": 1.6, "textAlign": "center", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "normal"}
              ]
            },
            {
              "type": "frame",
              "id": "RoomGridExamples",
              "name": "roomGridExamples",
              "width": "fill_container",
              "fill": "$bg-surface",
              "cornerRadius": 16,
              "stroke": {"thickness": 1, "fill": "$border-subtle"},
              "padding": 40,
              "gap": 24,
              "justifyContent": "center",
              "children": [
                {
                  "type": "frame",
                  "id": "RoomAvailable",
                  "name": "Organism/Room/Available",
                  "reusable": true,
                  "width": 160,
                  "height": 120,
                  "fill": "$bg-elevated",
                  "cornerRadius": 16,
                  "stroke": {"thickness": 2, "fill": "$border-default"},
                  "layout": "vertical",
                  "gap": 8,
                  "justifyContent": "center",
                  "alignItems": "center",
                  "children": [
                    {"type": "icon_font", "id": "RmAvailIcon", "iconFontName": "mic", "iconFontFamily": "lucide", "width": 24, "height": 24, "fill": "$text-secondary"},
                    {"type": "text", "id": "RmAvailName", "name": "roomName", "fill": "$text-primary", "content": "Phòng VIP 01", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "600"},
                    {"type": "text", "id": "RmAvailCap", "name": "capacity", "fill": "$text-secondary", "content": "8-12 người", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "normal"}
                  ]
                },
                {
                  "type": "frame",
                  "id": "RoomOccupied",
                  "name": "Organism/Room/Occupied",
                  "reusable": true,
                  "width": 160,
                  "height": 120,
                  "fill": "$karaoke-primary",
                  "cornerRadius": 16,
                  "layout": "vertical",
                  "justifyContent": "space_between",
                  "padding": 12,
                  "children": [
                    {
                      "type": "frame",
                      "id": "RmOccTop",
                      "width": "fill_container",
                      "justifyContent": "space_between",
                      "children": [
                        {"type": "text", "id": "RmOccName", "name": "roomName", "fill": "$text-primary", "content": "VIP 02", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"},
                        {"type": "text", "id": "RmOccTimer", "name": "sessionTimer", "fill": "$text-primary", "content": "01:45:22", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "700"}
                      ]
                    },
                    {
                      "type": "frame",
                      "id": "RmOccMid",
                      "layout": "vertical",
                      "gap": 4,
                      "alignItems": "center",
                      "children": [
                        {"type": "text", "id": "RmOccAmount", "name": "totalAmount", "fill": "$text-primary", "content": "1,250,000đ", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "700"},
                        {"type": "text", "id": "RmOccRate", "name": "hourlyRate", "fill": "$text-muted", "content": "Giờ: 150K/h", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "normal"}
                      ]
                    },
                    {
                      "type": "frame",
                      "id": "RmOccActions",
                      "gap": 8,
                      "justifyContent": "center",
                      "children": [
                        {"type": "frame", "id": "RmOccAddBtn", "width": 60, "height": 28, "fill": "#FFFFFF33", "cornerRadius": 6, "justifyContent": "center", "alignItems": "center", "children": [
                          {"type": "text", "id": "RmOccAddTxt", "fill": "$text-primary", "content": "+ Thêm", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}
                        ]},
                        {"type": "frame", "id": "RmOccEndBtn", "width": 60, "height": 28, "fill": "#FFFFFF33", "cornerRadius": 6, "justifyContent": "center", "alignItems": "center", "children": [
                          {"type": "text", "id": "RmOccEndTxt", "fill": "$text-primary", "content": "Kết thúc", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}
                        ]}
                      ]
                    }
                  ]
                }
              ]
            }
          ]
        }
      ]
    }
  ],
  "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"},
    "karaoke-primary": {"type": "color", "value": "#EC4899"},
    "text-muted": {"type": "color", "value": "#FFFFFFCC"},
    "text-primary": {"type": "color", "value": "#FFFFFF"},
    "text-secondary": {"type": "color", "value": "#ADADB0"},
    "text-tertiary": {"type": "color", "value": "#8B8B90"}
  }
}
