{
  "surface_id": "onboadring-recipe-cook-modal",
  "surface_version": 1,
  "payload": {
    "objects": [
      {
        "beginRendering": {
          "surfaceId": "onboadring-recipe-cook-modal",
          "root": "root_card"
        }
      },
      {
        "surfaceUpdate": {
          "surfaceId": "onboadring-recipe-cook-modal",
          "components": [
            {
              "id": "root_card",
              "component": {
                "Card": {
                  "child": "main_column"
                }
              }
            },
            {
              "id": "main_column",
              "component": {
                "Column": {
                  "alignment": "stretch",
                  "children": {
                    "explicitList": [
                      "hero_label_row",
                      "dish_title_row",
                      "dish_emoji_row",
                      "dish_meta_row",
                      "quote_card",
                      "recipe_filter_tags",
                      "steps_title_row",
                      "steps_divider",
                      "steps_list",
                      "bottom_divider",
                      "actions_row"
                    ]
                  }
                }
              }
            },
            {
              "id": "hero_label_row",
              "component": {
                "Row": {
                  "alignment": "center",
                  "distribution": "center",
                  "children": {
                    "explicitList": [
                      "hero_label"
                    ]
                  }
                }
              }
            },
            {
              "id": "hero_label",
              "component": {
                "Label": {
                  "text": {
                    "literalString": "✦ RECIPE UNLOCKED!"
                  },
                  "variant": "captionSemibold",
                  "color": "secondary"
                }
              }
            },
            {
              "id": "dish_title_row",
              "component": {
                "Row": {
                  "alignment": "center",
                  "distribution": "center",
                  "children": {
                    "explicitList": [
                      "dish_title"
                    ]
                  }
                }
              }
            },
            {
              "id": "dish_title",
              "component": {
                "Label": {
                  "text": {
                    "literalString": "Tomato Herb Baked Fish"
                  },
                  "variant": "title"
                }
              }
            },
            {
              "id": "dish_emoji_row",
              "component": {
                "Row": {
                  "alignment": "center",
                  "distribution": "center",
                  "children": {
                    "explicitList": [
                      "dish_emoji"
                    ]
                  }
                }
              }
            },
            {
              "id": "dish_emoji",
              "component": {
                "Label": {
                  "text": {
                    "literalString": "🐟"
                  },
                  "variant": "bodySans"
                }
              }
            },
            {
              "id": "dish_meta_row",
              "component": {
                "Row": {
                  "alignment": "center",
                  "distribution": "center",
                  "children": {
                    "explicitList": [
                      "dish_meta"
                    ]
                  }
                }
              }
            },
            {
              "id": "dish_meta",
              "component": {
                "Label": {
                  "text": {
                    "literalString": "Est. 350 cal · Quick & Easy"
                  },
                  "variant": "subheadlineSemibold",
                  "color": "secondary"
                }
              }
            },
            {
              "id": "quote_card",
              "component": {
                "Card": {
                  "child": "quote_text"
                }
              }
            },
            {
              "id": "quote_text",
              "component": {
                "Label": {
                  "text": {
                    "literalString": "💬 \"Perfect for low-carb diets. Baking keeps it lean, tomatoes add Vitamin C, and brown rice keeps you full all afternoon.\""
                  },
                  "variant": "bodySans"
                }
              }
            },
            {
              "id": "recipe_filter_tags",
              "component": {
                "FilterTags": {
                  "tags": {
                    "literalArray": [
                      "Mediterranean",
                      "350 cal",
                      "30 min"
                    ]
                  }
                }
              }
            },
            {
              "id": "steps_title_row",
              "component": {
                "Row": {
                  "alignment": "center",
                  "children": {
                    "explicitList": [
                      "steps_title_icon",
                      "steps_title"
                    ]
                  }
                }
              }
            },
            {
              "id": "steps_title_icon",
              "component": {
                "Label": {
                  "text": {
                    "literalString": "🍳"
                  },
                  "variant": "bodySansSemibold"
                }
              }
            },
            {
              "id": "steps_title",
              "component": {
                "Label": {
                  "text": {
                    "literalString": "Cooking Steps"
                  },
                  "variant": "bodySansSemibold",
                  "color": "secondary"
                }
              }
            },
            {
              "id": "steps_divider",
              "component": {
                "Divider": {}
              }
            },
            {
              "id": "steps_list",
              "component": {
                "OrderedDisplayList": {
                  "items": [
                    {
                      "child": "step_1"
                    },
                    {
                      "child": "step_2"
                    },
                    {
                      "child": "step_3"
                    },
                    {
                      "child": "step_4"
                    }
                  ]
                }
              }
            },
            {
              "id": "step_1",
              "component": {
                "Label": {
                  "text": {
                    "literalString": "🛒 Prep: 200g fish fillet, 1 tomato, fresh basil"
                  },
                  "variant": "bodySans"
                }
              }
            },
            {
              "id": "step_2",
              "component": {
                "Label": {
                  "text": {
                    "literalString": "🧂 Marinate fish with salt, pepper and olive oil (10m)"
                  },
                  "variant": "bodySans"
                }
              }
            },
            {
              "id": "step_3",
              "component": {
                "Label": {
                  "text": {
                    "literalString": "🔥 Bake fish and diced tomatoes at 200°C (15m)"
                  },
                  "variant": "bodySans"
                }
              }
            },
            {
              "id": "step_4",
              "component": {
                "Label": {
                  "text": {
                    "literalString": "🍽️ Top with basil and serve over brown rice"
                  },
                  "variant": "bodySans"
                }
              }
            },
            {
              "id": "bottom_divider",
              "component": {
                "Divider": {}
              }
            },
            {
              "id": "actions_row",
              "component": {
                "Row": {
                  "alignment": "center",
                  "children": {
                    "explicitList": [
                      "retry_button",
                      "cook_modal_entry"
                    ]
                  }
                }
              }
            },
            {
              "id": "retry_button",
              "component": {
                "Button": {
                  "child": "retry_button_row",
                  "style": "secondary",
                  "action": {
                    "name": "retry_recipe"
                  }
                }
              }
            },
            {
              "id": "retry_button_row",
              "component": {
                "Row": {
                  "alignment": "center",
                  "children": {
                    "explicitList": [
                      "retry_icon",
                      "retry_label"
                    ]
                  }
                }
              }
            },
            {
              "id": "retry_icon",
              "component": {
                "Icon": {
                  "name": {
                    "literalString": "refresh"
                  }
                }
              }
            },
            {
              "id": "retry_label",
              "component": {
                "Label": {
                  "text": {
                    "literalString": "Retry"
                  },
                  "variant": "bodySansSemibold"
                }
              }
            },
            {
              "id": "cook_modal_entry",
              "weight": 1,
              "component": {
                "FullScreenModal": {
                  "entryPointChild": "cook_button",
                  "contentChild": "modal_column"
                }
              }
            },
            {
              "id": "cook_button",
              "component": {
                "Button": {
                  "child": "cook_button_row",
                  "style": "primary",
                  "action": {
                    "name": "showFullModal",
                    "context": [
                      {
                        "key": "modalId",
                        "value": {
                          "literalString": "cook_modal_entry"
                        }
                      }
                    ]
                  }
                }
              }
            },
            {
              "id": "cook_button_row",
              "component": {
                "Row": {
                  "alignment": "center",
                  "children": {
                    "explicitList": [
                      "cook_icon",
                      "cook_label"
                    ]
                  }
                }
              }
            },
            {
              "id": "cook_icon",
              "component": {
                "Label": {
                  "text": {
                    "literalString": "🔥"
                  },
                  "variant": "bodySansSemibold"
                }
              }
            },
            {
              "id": "cook_label",
              "component": {
                "Label": {
                  "text": {
                    "literalString": "Cook"
                  },
                  "variant": "bodySansSemibold"
                }
              }
            },
            {
              "id": "modal_column",
              "component": {
                "Column": {
                  "alignment": "stretch",
                  "children": {
                    "explicitList": [
                      "modal_title_row",
                      "modal_title_divider",
                      "modal_step_card_1",
                      "modal_step_card_2",
                      "modal_step_card_3",
                      "modal_step_card_4"
                    ]
                  }
                }
              }
            },
            {
              "id": "modal_title_row",
              "component": {
                "Row": {
                  "alignment": "center",
                  "distribution": "center",
                  "children": {
                    "explicitList": [
                      "modal_title"
                    ]
                  }
                }
              }
            },
            {
              "id": "modal_title",
              "component": {
                "Label": {
                  "text": {
                    "literalString": "Cooking magic steps"
                  },
                  "variant": "title"
                }
              }
            },
            {
              "id": "modal_title_divider",
              "component": {
                "Divider": {}
              }
            },
            {
              "id": "modal_step_card_1",
              "component": {
                "Card": {
                  "child": "modal_step_col_1"
                }
              }
            },
            {
              "id": "modal_step_col_1",
              "component": {
                "Column": {
                  "alignment": "stretch",
                  "children": {
                    "explicitList": [
                      "modal_step_header_1",
                      "modal_step_body_1"
                    ]
                  }
                }
              }
            },
            {
              "id": "modal_step_header_1",
              "component": {
                "Row": {
                  "alignment": "center",
                  "children": {
                    "explicitList": [
                      "modal_step_title_1"
                    ]
                  }
                }
              }
            },
            {
              "id": "modal_step_title_1",
              "component": {
                "Label": {
                  "text": {
                    "literalString": "STEP 1"
                  },
                  "variant": "bodySansSemibold"
                }
              }
            },
            {
              "id": "modal_step_body_1",
              "component": {
                "Label": {
                  "text": {
                    "literalString": "🛒 Prep: 200g fish fillet, 1 tomato, fresh basil"
                  },
                  "variant": "bodySans"
                }
              }
            },
            {
              "id": "modal_step_card_2",
              "component": {
                "Card": {
                  "child": "modal_step_col_2"
                }
              }
            },
            {
              "id": "modal_step_col_2",
              "component": {
                "Column": {
                  "alignment": "stretch",
                  "children": {
                    "explicitList": [
                      "modal_step_header_2",
                      "modal_step_body_2"
                    ]
                  }
                }
              }
            },
            {
              "id": "modal_step_header_2",
              "component": {
                "Row": {
                  "alignment": "center",
                  "children": {
                    "explicitList": [
                      "modal_step_title_2"
                    ]
                  }
                }
              }
            },
            {
              "id": "modal_step_title_2",
              "component": {
                "Label": {
                  "text": {
                    "literalString": "STEP 2"
                  },
                  "variant": "bodySansSemibold"
                }
              }
            },
            {
              "id": "modal_step_body_2",
              "component": {
                "Label": {
                  "text": {
                    "literalString": "🧂 Marinate fish with salt, pepper and olive oil (10m)"
                  },
                  "variant": "bodySans"
                }
              }
            },
            {
              "id": "modal_step_card_3",
              "component": {
                "Card": {
                  "child": "modal_step_col_3"
                }
              }
            },
            {
              "id": "modal_step_col_3",
              "component": {
                "Column": {
                  "alignment": "stretch",
                  "children": {
                    "explicitList": [
                      "modal_step_header_3",
                      "modal_step_body_3"
                    ]
                  }
                }
              }
            },
            {
              "id": "modal_step_header_3",
              "component": {
                "Row": {
                  "alignment": "center",
                  "children": {
                    "explicitList": [
                      "modal_step_title_3"
                    ]
                  }
                }
              }
            },
            {
              "id": "modal_step_title_3",
              "component": {
                "Label": {
                  "text": {
                    "literalString": "STEP 3"
                  },
                  "variant": "bodySansSemibold"
                }
              }
            },
            {
              "id": "modal_step_body_3",
              "component": {
                "Label": {
                  "text": {
                    "literalString": "🔥 Bake fish and diced tomatoes at 200°C (15m)"
                  },
                  "variant": "bodySans"
                }
              }
            },
            {
              "id": "modal_step_card_4",
              "component": {
                "Card": {
                  "child": "modal_step_col_4"
                }
              }
            },
            {
              "id": "modal_step_col_4",
              "component": {
                "Column": {
                  "alignment": "stretch",
                  "children": {
                    "explicitList": [
                      "modal_step_header_4",
                      "modal_step_body_4"
                    ]
                  }
                }
              }
            },
            {
              "id": "modal_step_header_4",
              "component": {
                "Row": {
                  "alignment": "center",
                  "children": {
                    "explicitList": [
                      "modal_step_title_4"
                    ]
                  }
                }
              }
            },
            {
              "id": "modal_step_title_4",
              "component": {
                "Label": {
                  "text": {
                    "literalString": "STEP 4"
                  },
                  "variant": "bodySansSemibold"
                }
              }
            },
            {
              "id": "modal_step_body_4",
              "component": {
                "Label": {
                  "text": {
                    "literalString": "🍽️ Top with basil and serve over brown rice"
                  },
                  "variant": "bodySans"
                }
              }
            }
          ]
        }
      },
      {
        "dataModelUpdate": {
          "surfaceId": "onboadring-recipe-cook-modal",
          "path": "/",
          "contents": []
        }
      }
    ]
  }
}