{
  "config": {
    "layout": {
      "id": "kyc-report-container",
      "styles": "width: 100%; font-family: system-ui, sans-serif; background-color: #f8fafc; border-radius: 0.5rem; border: 1px solid #e2e8f0;",
      "components": [
        {
          "id": "kyc-header",
          "type": "div",
          "styles": "background-color: #1e293b; color: white; padding: 1rem;",
          "components": [
            {
              "id": "kyc-title",
              "type": "h2",
              "value": "Video KYC Verification Report",
              "styles": "margin: 0; font-size: 1.25rem; font-weight: 600;"
            }
          ]
        },
        {
          "id": "customer-info-section",
          "type": "div",
          "styles": "padding: 1rem; background-color: #f8fafc; border-bottom: 1px solid #e2e8f0;",
          "components": [
            {
              "id": "section-title",
              "type": "h3",
              "value": "Customer Information",
              "styles": "margin: 0 0 0.75rem 0; font-size: 1rem; color: #334155; font-weight: 600;"
            },
            {
              "id": "customer-details",
              "type": "div",
              "styles": "display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem;",
              "components": [
                {
                  "id": "detail-name",
                  "type": "div",
                  "styles": "",
                  "components": [
                    {
                      "id": "name-label",
                      "type": "div",
                      "value": "Full Name",
                      "styles": "font-size: 0.75rem; color: #64748b; margin-bottom: 0.25rem;"
                    },
                    {
                      "id": "name-value",
                      "type": "div",
                      "source": {
                        "key": "OBJECT",
                        "props": {
                          "object": {
                            "key": "DATA",
                            "path": "$.personalDetails.name"
                          }
                        }
                      },
                      "styles": "font-weight: 500; color: #334155;"
                    }
                  ]
                },
                {
                  "id": "detail-phone",
                  "type": "div",
                  "styles": "",
                  "components": [
                    {
                      "id": "phone-label",
                      "type": "div",
                      "value": "Phone Number",
                      "styles": "font-size: 0.75rem; color: #64748b; margin-bottom: 0.25rem;"
                    },
                    {
                      "id": "phone-value",
                      "type": "div",
                      "source": {
                        "key": "OBJECT",
                        "props": {
                          "object": {
                            "key": "DATA",
                            "path": "$.personalDetails.phoneNumber"
                          }
                        }
                      },
                      "styles": "font-weight: 500; color: #334155;"
                    }
                  ]
                }
              ]
            }
          ]
        },
        {
          "id": "verification-summary",
          "type": "div",
          "styles": "padding: 1rem;",
          "components": [
            {
              "id": "summary-title",
              "type": "h3",
              "value": "Verification Summary",
              "styles": "margin: 0 0 0.75rem 0; font-size: 1rem; color: #334155; font-weight: 600;"
            },
            {
              "id": "summary-status",
              "type": "div",
              "styles": "display: flex; align-items: center; gap: 0.5rem; margin-bottom: 1rem;",
              "components": [
                {
                  "id": "status-label",
                  "type": "div",
                  "value": "Overall Status:",
                  "styles": "font-weight: 500;"
                },
                {
                  "id": "status-value",
                  "type": "div",
                  "styles": "padding: 0.25rem 0.5rem; background-color: #15803d; color: white; border-radius: 0.25rem; font-size: 0.875rem;",
                  "source": {
                    "key": "OBJECT",
                    "props": {
                      "object": {
                        "key": "DATA",
                        "path": "$.verificationSummary.overallStatus"
                      }
                    }
                  }
                }
              ]
            },
            {
              "id": "verification-checks",
              "type": "div",
              "styles": "border: 1px solid #e2e8f0; border-radius: 0.25rem;",
              "components": [
                {
                  "id": "check-aadhaar",
                  "type": "div",
                  "styles": "padding: 0.75rem; border-bottom: 1px solid #e2e8f0; display: flex; justify-content: space-between;",
                  "components": [
                    {
                      "id": "aadhaar-label",
                      "type": "div",
                      "value": "Aadhaar Verification",
                      "styles": ""
                    },
                    {
                      "id": "aadhaar-status",
                      "type": "div",
                      "styles": "color: #15803d;",
                      "source": {
                        "key": "OBJECT",
                        "props": {
                          "object": {
                            "key": "DATA",
                            "path": "$.verificationStatus.aadhaarVerified"
                          }
                        }
                      }
                    }
                  ]
                },
                {
                  "id": "check-pan",
                  "type": "div",
                  "styles": "padding: 0.75rem; display: flex; justify-content: space-between;",
                  "components": [
                    {
                      "id": "pan-label",
                      "type": "div",
                      "value": "PAN Verification",
                      "styles": ""
                    },
                    {
                      "id": "pan-status",
                      "type": "div",
                      "styles": "color: #15803d;",
                      "source": {
                        "key": "OBJECT",
                        "props": {
                          "object": {
                            "key": "DATA",
                            "path": "$.verificationStatus.panVerified"
                          }
                        }
                      }
                    }
                  ]
                }
              ]
            }
          ]
        }
      ]
    }
  }
}