{
  "project": {
    "name": "Demo Interactive Story",
    "startVideoId": "v1",
    "settings": {
      "showControls": true,
      "autoHide": true,
      "allowSeeking": true,
      "showProgress": true,
      "controlColor": "#000000",
      "accentColor": "#4a9eff",
      "playIcon": "",
      "pauseIcon": "",
      "endBehavior": "pause"
    }
  },
  "videos": [
    {
      "id": "v1",
      "name": "Introduction",
      "src": "videos/intro.mp4",
      "duration": 30,
      "nodeX": 100,
      "nodeY": 200
    },
    {
      "id": "v2",
      "name": "Path A — The Forest",
      "src": "videos/forest.mp4",
      "duration": 45,
      "nodeX": 400,
      "nodeY": 100
    },
    {
      "id": "v3",
      "name": "Path B — The City",
      "src": "videos/city.mp4",
      "duration": 40,
      "nodeX": 400,
      "nodeY": 300
    },
    {
      "id": "v4",
      "name": "Ending — Happy",
      "src": "videos/happy_end.mp4",
      "duration": 20,
      "nodeX": 700,
      "nodeY": 100
    },
    {
      "id": "v5",
      "name": "Ending — Mystery",
      "src": "videos/mystery_end.mp4",
      "duration": 25,
      "nodeX": 700,
      "nodeY": 300
    }
  ],
  "connections": [
    {
      "id": "c1",
      "fromVideoId": "v1",
      "toVideoId": "v2",
      "label": "Explore the Forest",
      "color": "#3ddc84"
    },
    {
      "id": "c2",
      "fromVideoId": "v1",
      "toVideoId": "v3",
      "label": "Visit the City",
      "color": "#4a9eff"
    },
    {
      "id": "c3",
      "fromVideoId": "v2",
      "toVideoId": "v4",
      "label": "Follow the light",
      "color": "#ffd75a"
    },
    {
      "id": "c4",
      "fromVideoId": "v3",
      "toVideoId": "v5",
      "label": "Enter the alley",
      "color": "#b47aff"
    },
    {
      "id": "c5",
      "fromVideoId": "v2",
      "toVideoId": "v5",
      "label": "Go deeper",
      "color": "#ff5a5a"
    },
    {
      "id": "c6",
      "fromVideoId": "v3",
      "toVideoId": "v4",
      "label": "Take the train",
      "color": "#3ddc84"
    }
  ],
  "interactions": [
    {
      "id": "i1",
      "videoId": "v1",
      "type": "hotspot",
      "label": "ℹ️ About",
      "startTime": 5,
      "endTime": 15,
      "x": 85,
      "y": 15,
      "w": 8,
      "h": 14,
      "action": {
        "type": "showOverlay",
        "targetVideoId": null,
        "value": "Welcome to the interactive story! Watch closely and make your choices at the end of each scene.",
        "pauseVideo": true
      },
      "style": {
        "backgroundColor": "rgba(255,138,80,0.85)",
        "textColor": "#ffffff",
        "icon": "bi-info-circle",
        "image": ""
      }
    },
    {
      "id": "i2",
      "videoId": "v2",
      "type": "button",
      "label": "Pick up the key",
      "startTime": 10,
      "endTime": 20,
      "x": 30,
      "y": 70,
      "w": 18,
      "h": 8,
      "action": {
        "type": "showOverlay",
        "targetVideoId": null,
        "value": "You found a mysterious golden key! It might come in handy later...",
        "pauseVideo": true
      },
      "style": {
        "backgroundColor": "rgba(255,215,90,0.9)",
        "textColor": "#000000",
        "icon": "bi-key-fill",
        "image": ""
      }
    },
    {
      "id": "i3",
      "videoId": "v3",
      "type": "hotspot",
      "label": "",
      "startTime": 5,
      "endTime": 35,
      "x": 65,
      "y": 40,
      "w": 6,
      "h": 10,
      "action": {
        "type": "showOverlay",
        "targetVideoId": null,
        "value": "A hidden message on the wall: 'Not all who wander are lost.'",
        "pauseVideo": false
      },
      "style": {
        "backgroundColor": "rgba(180,122,255,0.7)",
        "textColor": "#ffffff",
        "icon": "bi-search",
        "image": ""
      }
    },
    {
      "id": "i4",
      "videoId": "v1",
      "type": "button",
      "label": "Skip Intro",
      "startTime": 0,
      "endTime": 10,
      "x": 90,
      "y": 90,
      "w": 12,
      "h": 6,
      "action": {
        "type": "pause",
        "targetVideoId": null,
        "value": "",
        "pauseVideo": false
      },
      "style": {
        "backgroundColor": "rgba(255,255,255,0.2)",
        "textColor": "#ffffff",
        "icon": "bi-skip-forward",
        "image": ""
      }
    }
  ]
}