{
  "version": "2.6",
  "children": [
    {
      "type": "frame",
      "name": "Service Display Showcase",
      "width": 1440,
      "fill": "$bg-page",
      "layout": "vertical",
      "gap": 80,
      "padding": [80, 120],
      "children": [
        {
          "type": "frame",
          "id": "ServiceDisplaySection",
          "name": "Service Display Section",
          "width": "fill_container",
          "layout": "vertical",
          "gap": 32,
          "children": [
            {
              "type": "frame",
              "id": "SvcDispHeader",
              "name": "svcDispSectionHeader",
              "layout": "vertical",
              "gap": 16,
              "alignItems": "center",
              "children": [
                {
                  "type": "frame",
                  "id": "SvcDispBadge",
                  "name": "shBadge",
                  "fill": "#FF5C0018",
                  "cornerRadius": 100,
                  "padding": [6, 14],
                  "children": [
                    {"type": "text", "id": "SvcDispBadgeText", "name": "badgeText", "fill": "$orange-primary", "content": "SERVICE DISPLAYS", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "500", "letterSpacing": 2}
                  ]
                },
                {"type": "text", "id": "SvcDispTitle", "name": "shTitle", "fill": "$text-primary", "content": "Kitchen, Queue & Room Displays", "textAlign": "center", "fontFamily": "Roboto", "fontSize": 42, "fontWeight": "normal", "letterSpacing": -1},
                {"type": "text", "id": "SvcDispDesc", "name": "shDesc", "fill": "$text-tertiary", "textGrowth": "fixed-width", "width": 700, "content": "Display components for kitchen tickets, queue numbers, and room status screens.", "lineHeight": 1.6, "textAlign": "center", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "normal"}
              ]
            },
            {
              "type": "frame",
              "id": "KitchenDispExamples",
              "name": "kitchenDisplayExamples",
              "width": "fill_container",
              "fill": "$bg-surface",
              "cornerRadius": 16,
              "stroke": {"thickness": 1, "fill": "$border-subtle"},
              "layout": "vertical",
              "gap": 32,
              "padding": 40,
              "alignItems": "center",
              "children": [
                {
                  "type": "frame",
                  "id": "KitchenTicket",
                  "name": "Organism/Display/KitchenTicket",
                  "reusable": true,
                  "width": 280,
                  "fill": "$bg-elevated",
                  "cornerRadius": 16,
                  "stroke": {"thickness": 1, "fill": "$border-default"},
                  "layout": "vertical",
                  "children": [
                    {
                      "type": "frame",
                      "id": "KTHeader",
                      "name": "ticketHeader",
                      "width": "fill_container",
                      "fill": "$orange-primary",
                      "cornerRadius": [16, 16, 0, 0],
                      "padding": [12, 16],
                      "justifyContent": "space_between",
                      "alignItems": "center",
                      "children": [
                        {"type": "text", "id": "KTOrderNum", "name": "orderNumber", "fill": "#FFFFFF", "content": "#0042", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "700"},
                        {"type": "text", "id": "KTTableInfo", "name": "tableInfo", "fill": "#FFFFFFCC", "content": "Bàn 07", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"},
                        {"type": "text", "id": "KTElapsed", "name": "elapsedTime", "fill": "#FFFFFF", "content": "5:32", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "700"}
                      ]
                    },
                    {
                      "type": "frame",
                      "id": "KTItems",
                      "name": "ticketItems",
                      "width": "fill_container",
                      "layout": "vertical",
                      "padding": 12,
                      "gap": 8,
                      "children": [
                        {"type": "frame", "id": "KTItem1", "width": "fill_container", "justifyContent": "space_between", "children": [
                          {"type": "text", "id": "KTItem1Name", "fill": "$text-primary", "content": "2x Phở bò tái", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "500"},
                          {"type": "text", "id": "KTItem1Note", "fill": "$status-warning", "content": "Ít hành", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "normal"}
                        ]},
                        {"type": "frame", "id": "KTItem2", "width": "fill_container", "children": [
                          {"type": "text", "id": "KTItem2Name", "fill": "$text-primary", "content": "1x Bún chả", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "500"}
                        ]},
                        {"type": "frame", "id": "KTItem3", "width": "fill_container", "justifyContent": "space_between", "children": [
                          {"type": "text", "id": "KTItem3Name", "fill": "$text-secondary", "content": "1x Nước cam", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "normal"},
                          {"type": "text", "id": "KTItem3Station", "fill": "$text-tertiary", "content": "Bar", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "normal"}
                        ]}
                      ]
                    },
                    {
                      "type": "frame",
                      "id": "KTActions",
                      "name": "ticketActions",
                      "padding": 12,
                      "justifyContent": "center",
                      "children": [
                        {"type": "frame", "id": "KTDoneBtn", "width": 100, "height": 36, "fill": "$green-success", "cornerRadius": 8, "gap": 6, "justifyContent": "center", "alignItems": "center", "children": [
                          {"type": "icon_font", "id": "KTDoneIcon", "iconFontName": "check", "iconFontFamily": "lucide", "width": 16, "height": 16, "fill": "#FFFFFF"},
                          {"type": "text", "id": "KTDoneTxt", "fill": "#FFFFFF", "content": "Xong", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}
                        ]}
                      ]
                    }
                  ]
                },
                {
                  "type": "frame",
                  "id": "QueueDispRow",
                  "gap": 24,
                  "children": [
                    {
                      "type": "frame",
                      "id": "QueueNumber",
                      "name": "Organism/Display/QueueNumber",
                      "reusable": true,
                      "width": 200,
                      "height": 160,
                      "fill": "$bg-elevated",
                      "cornerRadius": 20,
                      "stroke": {"thickness": 1, "fill": "$border-default"},
                      "layout": "vertical",
                      "gap": 8,
                      "justifyContent": "center",
                      "alignItems": "center",
                      "children": [
                        {"type": "text", "id": "QNLabel", "fill": "$text-secondary", "content": "Số thứ tự", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "normal"},
                        {"type": "text", "id": "QNNumber", "name": "queueNumber", "fill": "$spa-primary", "content": "A-042", "fontFamily": "Roboto", "fontSize": 48, "fontWeight": "700"},
                        {"type": "text", "id": "QNService", "name": "serviceType", "fill": "$text-primary", "content": "Facial", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "normal"}
                      ]
                    },
                    {
                      "type": "frame",
                      "id": "QueueCalling",
                      "name": "Organism/Display/QueueCalling",
                      "reusable": true,
                      "width": 300,
                      "height": 120,
                      "fill": "$green-success",
                      "cornerRadius": 20,
                      "layout": "vertical",
                      "gap": 8,
                      "justifyContent": "center",
                      "alignItems": "center",
                      "children": [
                        {"type": "frame", "id": "QCLabelRow", "gap": 8, "alignItems": "center", "children": [
                          {"type": "icon_font", "id": "QCBellIcon", "iconFontName": "bell-ring", "iconFontFamily": "lucide", "width": 20, "height": 20, "fill": "#FFFFFF"},
                          {"type": "text", "id": "QCLabel", "fill": "#FFFFFF", "content": "MỜI KHÁCH", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "700"}
                        ]},
                        {"type": "text", "id": "QCNumber", "name": "callingNumber", "fill": "#FFFFFF", "content": "A-038", "fontFamily": "Roboto", "fontSize": 48, "fontWeight": "700"},
                        {"type": "text", "id": "QCStation", "name": "station", "fill": "#FFFFFFCC", "content": "Phòng 3 - Ngọc", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "normal"}
                      ]
                    }
                  ]
                },
                {
                  "type": "frame",
                  "id": "RoomDisplay",
                  "name": "Organism/Display/RoomStatus",
                  "reusable": true,
                  "width": 400,
                  "height": 300,
                  "fill": "$bg-surface",
                  "cornerRadius": 20,
                  "stroke": {"thickness": 1, "fill": "$border-subtle"},
                  "layout": "vertical",
                  "justifyContent": "space_between",
                  "padding": 24,
                  "alignItems": "center",
                  "children": [
                    {"type": "text", "id": "RDName", "name": "roomName", "fill": "$text-primary", "content": "PHÒNG VIP 01", "fontFamily": "Roboto", "fontSize": 24, "fontWeight": "700"},
                    {
                      "type": "frame",
                      "id": "RDTimerBox",
                      "layout": "vertical",
                      "gap": 8,
                      "alignItems": "center",
                      "children": [
                        {"type": "text", "id": "RDTimerLabel", "fill": "$text-secondary", "content": "THỜI GIAN", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "normal"},
                        {"type": "text", "id": "RDTimer", "name": "sessionTimer", "fill": "$karaoke-primary", "content": "02:15:42", "fontFamily": "Roboto", "fontSize": 64, "fontWeight": "700"}
                      ]
                    },
                    {
                      "type": "frame",
                      "id": "RDStats",
                      "gap": 24,
                      "children": [
                        {"type": "frame", "id": "RDTotalBox", "layout": "vertical", "alignItems": "center", "children": [
                          {"type": "text", "id": "RDTotalLabel", "fill": "$text-secondary", "content": "Tổng tiền", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "normal"},
                          {"type": "text", "id": "RDTotalVal", "name": "totalAmount", "fill": "$text-primary", "content": "1,850,000đ", "fontFamily": "Roboto", "fontSize": 24, "fontWeight": "600"}
                        ]},
                        {"type": "frame", "id": "RDPendingBox", "layout": "vertical", "alignItems": "center", "children": [
                          {"type": "text", "id": "RDPendingLabel", "fill": "$text-secondary", "content": "Order mới", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "normal"},
                          {"type": "text", "id": "RDPendingVal", "name": "pendingItems", "fill": "$status-warning", "content": "3 món", "fontFamily": "Roboto", "fontSize": 20, "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"},
    "green-success": {"type": "color", "value": "#22C55E"},
    "karaoke-primary": {"type": "color", "value": "#EC4899"},
    "orange-primary": {"type": "color", "value": "#FF5C00"},
    "spa-primary": {"type": "color", "value": "#14B8A6"},
    "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"}
  }
}
