{
  "version": "2.6",
  "children": [
    {
      "type": "frame",
      "name": "Appointment Calendar Showcase",
      "width": 1440,
      "fill": "$bg-page",
      "layout": "vertical",
      "gap": 80,
      "padding": [80, 120],
      "children": [
        {
          "type": "frame",
          "id": "AppointmentSection",
          "name": "Appointment Section",
          "width": "fill_container",
          "layout": "vertical",
          "gap": 32,
          "children": [
            {
              "type": "frame",
              "id": "ApptHeader",
              "name": "apptSectionHeader",
              "layout": "vertical",
              "gap": 16,
              "alignItems": "center",
              "children": [
                {
                  "type": "frame",
                  "id": "ApptBadge",
                  "name": "shBadge",
                  "fill": "#14B8A618",
                  "cornerRadius": 100,
                  "padding": [6, 14],
                  "children": [
                    {"type": "text", "id": "ApptBadgeText", "name": "badgeText", "fill": "$spa-primary", "content": "💆 APPOINTMENT", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "500", "letterSpacing": 2}
                  ]
                },
                {"type": "text", "id": "ApptTitle", "name": "shTitle", "fill": "$text-primary", "content": "Spa Booking Calendar", "textAlign": "center", "fontFamily": "Roboto", "fontSize": 42, "fontWeight": "normal", "letterSpacing": -1},
                {"type": "text", "id": "ApptDesc", "name": "shDesc", "fill": "$text-tertiary", "textGrowth": "fixed-width", "width": 600, "content": "Appointment slots with booking states, therapist assignment, and time tracking.", "lineHeight": 1.6, "textAlign": "center", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "normal"}
              ]
            },
            {
              "type": "frame",
              "id": "ApptExamples",
              "name": "apptExamples",
              "width": "fill_container",
              "fill": "$bg-surface",
              "cornerRadius": 16,
              "stroke": {"thickness": 1, "fill": "$border-subtle"},
              "padding": 40,
              "gap": 24,
              "justifyContent": "center",
              "children": [
                {
                  "type": "frame",
                  "id": "SlotAvailable",
                  "name": "Organism/Appointment/Available",
                  "reusable": true,
                  "width": 140,
                  "height": 80,
                  "fill": "$bg-elevated",
                  "cornerRadius": 12,
                  "stroke": {"thickness": 1, "fill": "$border-default", "dashPattern": [4,4]},
                  "layout": "vertical",
                  "gap": 4,
                  "justifyContent": "center",
                  "alignItems": "center",
                  "children": [
                    {"type": "text", "id": "SlotAvailTime", "name": "slotTime", "fill": "$text-primary", "content": "09:00", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "500"},
                    {"type": "text", "id": "SlotAvailLabel", "fill": "$green-success", "content": "Có slot", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "normal"}
                  ]
                },
                {
                  "type": "frame",
                  "id": "SlotBooked",
                  "name": "Organism/Appointment/Booked",
                  "reusable": true,
                  "width": 140,
                  "height": 80,
                  "fill": "$spa-primary",
                  "cornerRadius": 12,
                  "layout": "vertical",
                  "padding": 12,
                  "gap": 4,
                  "alignItems": "flex_start",
                  "children": [
                    {"type": "text", "id": "SlotBookTime", "name": "timeRange", "fill": "$text-muted", "content": "10:00 - 11:30", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "normal"},
                    {"type": "text", "id": "SlotBookCust", "name": "customerName", "fill": "$text-primary", "content": "Chị Lan", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"},
                    {"type": "text", "id": "SlotBookSvc", "name": "serviceName", "fill": "$text-muted", "content": "Facial 90 phút", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "normal"}
                  ]
                },
                {
                  "type": "frame",
                  "id": "SlotInProgress",
                  "name": "Organism/Appointment/InProgress",
                  "reusable": true,
                  "width": 140,
                  "height": 80,
                  "fill": "$spa-dark",
                  "cornerRadius": 12,
                  "stroke": {"thickness": 2, "fill": "$green-success"},
                  "layout": "vertical",
                  "padding": 12,
                  "gap": 4,
                  "alignItems": "flex_start",
                  "children": [
                    {
                      "type": "frame",
                      "id": "SlotProgTop",
                      "width": "fill_container",
                      "justifyContent": "space_between",
                      "children": [
                        {"type": "text", "id": "SlotProgStatus", "fill": "$green-success", "content": "ĐANG LÀM", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "700"},
                        {"type": "text", "id": "SlotProgRemain", "fill": "$text-muted", "content": "45p còn", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "normal"}
                      ]
                    },
                    {"type": "text", "id": "SlotProgCust", "name": "customerName", "fill": "$text-primary", "content": "Chị Hương", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"},
                    {"type": "text", "id": "SlotProgStaff", "name": "therapist", "fill": "$text-muted", "content": "NV: Ngọc", "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"},
    "green-success": {"type": "color", "value": "#22C55E"},
    "spa-dark": {"type": "color", "value": "#0D9488"},
    "spa-primary": {"type": "color", "value": "#14B8A6"},
    "text-muted": {"type": "color", "value": "#FFFFFFCC"},
    "text-primary": {"type": "color", "value": "#FFFFFF"},
    "text-secondary": {"type": "color", "value": "#ADADB0"},
    "text-tertiary": {"type": "color", "value": "#8B8B90"}
  }
}
