{
  "surface_id": "restaurant-reservation-card-surface",
  "surface_version": 1,
  "payload": {
    "objects": [
      {
        "beginRendering": {
          "surfaceId": "restaurant-reservation-card-surface",
          "root": "root-card"
        }
      },
      {
        "surfaceUpdate": {
          "surfaceId": "restaurant-reservation-card-surface",
          "components": [
            {
              "id": "root-card",
              "component": {
                "Card": {
                  "child": "reservation-column"
                }
              }
            },
            {
              "id": "reservation-column",
              "component": {
                "Column": {
                  "alignment": "stretch",
                  "children": {
                    "explicitList": [
                      "restaurant-title",
                      "restaurant-location",
                      "restaurant-tags",
                      "party-size-label",
                      "party-size-dropdown",
                      "time-label",
                      "reservation-time-row",
                      "confirm-button"
                    ]
                  }
                }
              }
            },
            {
              "id": "restaurant-title",
              "component": {
                "Label": {
                  "text": {
                    "literalString": "Juniper & Stone Dining Room"
                  },
                  "variant": "title"
                }
              }
            },
            {
              "id": "restaurant-location",
              "component": {
                "Label": {
                  "text": {
                    "literalString": "48 Mercer Street, New York"
                  },
                  "variant": "subheadline",
                  "color": "secondary"
                }
              }
            },
            {
              "id": "restaurant-tags",
              "component": {
                "TagText": {
                  "segments": {
                    "literalArray": [
                      {
                        "text": "Modern European"
                      },
                      {
                        "text": "Chef's counter",
                        "style": "secondary"
                      },
                      {
                        "text": "Window seating",
                        "style": "highlight"
                      }
                    ]
                  }
                }
              }
            },
            {
              "id": "party-size-label",
              "component": {
                "Label": {
                  "text": {
                    "literalString": "Party size"
                  },
                  "variant": "bodySansSemibold"
                }
              }
            },
            {
              "id": "party-size-dropdown",
              "component": {
                "DropdownSelection": {
                  "selection": {
                    "path": "/partySize",
                    "literalArray": []
                  },
                  "placeholder": {
                    "literalString": "Select party size"
                  },
                  "items": [
                    "1",
                    "2",
                    "3",
                    "4",
                    "5",
                    "6"
                  ]
                }
              }
            },
            {
              "id": "time-label",
              "component": {
                "Label": {
                  "text": {
                    "literalString": "Time"
                  },
                  "variant": "bodySansSemibold"
                }
              }
            },
            {
              "id": "reservation-time-row",
              "component": {
                "Row": {
                  "alignment": "center",
                  "children": {
                    "explicitList": [
                      "reservation-date-input",
                      "reservation-time-input"
                    ]
                  }
                }
              }
            },
            {
              "id": "reservation-date-input",
              "weight": 1,
              "component": {
                "DateTimeInput": {
                  "value": {
                    "path": "/reservationDate"
                  },
                  "enableDate": true,
                  "enableTime": false
                }
              }
            },
            {
              "id": "reservation-time-input",
              "weight": 1,
              "component": {
                "DateTimeInput": {
                  "value": {
                    "path": "/reservationTime"
                  },
                  "enableDate": false,
                  "enableTime": true
                }
              }
            },
            {
              "id": "confirm-button",
              "component": {
                "Button": {
                  "child": "confirm-button-label",
                  "style": "primary",
                  "action": {
                    "name": "confirmRestaurantReservation",
                    "context": [
                      {
                        "key": "restaurantName",
                        "value": {
                          "literalString": "Juniper & Stone Dining Room"
                        }
                      },
                      {
                        "key": "partySize",
                        "value": {
                          "path": "/partySize"
                        }
                      },
                      {
                        "key": "reservationDate",
                        "value": {
                          "path": "/reservationDate"
                        }
                      },
                      {
                        "key": "reservationTime",
                        "value": {
                          "path": "/reservationTime"
                        }
                      }
                    ]
                  }
                }
              }
            },
            {
              "id": "confirm-button-label",
              "component": {
                "Label": {
                  "text": {
                    "literalString": "Confirm reservation"
                  },
                  "variant": "bodySansSemibold"
                }
              }
            }
          ]
        }
      },
      {
        "dataModelUpdate": {
          "surfaceId": "restaurant-reservation-card-surface",
          "path": "/",
          "contents": [
            {
              "key": "partySize",
              "valueString": "4"
            },
            {
              "key": "reservationDate",
              "valueString": "2026-04-18"
            },
            {
              "key": "reservationTime",
              "valueString": "19:30:00"
            }
          ]
        }
      }
    ]
  }
}