<!doctype html>
<html lang="ko">
  <head>
    <?php include(__DIR__ . "/_include/_head.php") ?>
    <link rel="stylesheet" type="text/css" href="/css/main.css" />
  </head>
  <body>
    <div class="wrap onboarding">
      <?php include(__DIR__ . "/_include/_header.php") ?>
      <!-- container -->
      <div class="container">
        <div class="puzzle-wrap">
          <div class="page-title">
            <h3>
              <em>온보딩 필수 콘텐츠</em> 시청을 완료하셨습니다.
            </h3>
            <p class="fw-b">
              필요할 땐 <em>언제든</em> 다시 볼 수 있어요.
            </p>
          </div>
          <div class="puzzle-area">
            <div class="puzzle-board" id="puzzleBoard">
              <!-- SVG가 여기에 동적으로 삽입됩니다 -->

              <p class="img-box family">
                <img src="/img/onboarding/img_obj_01.png" />
              </p>
              <p class="tit-box family">가족사 소개</p>

              <p class="img-box hanmac">
                <img src="/img/onboarding/img_obj_02.png" />
              </p>
              <p class="tit-box hanmac">한맥가족의 DX</p>

              <p class="img-box value">
                <img src="/img/onboarding/img_obj_03.png" />
              </p>
              <p class="tit-box value">가치공유</p>

              <p class="img-box company">
                <img src="/img/onboarding/img_obj_04.png" />
              </p>
              <p class="tit-box company">회사생활</p>
            </div>
          </div>
        </div>
      </div>
      <!-- // container -->
    </div>

    <script>
      // 전역 변수로 콘텐츠 데이터 설정 (PuzzleManager가 자동으로 읽음)
      // 1. CONFIG 설정 (puzzle-onboarding.js 로드 전에!)
      window.puzzleConfig = {
        COMPLETION_MODE: "FINISH", // "COMPLETED" 또는 "FINISH"
      };
      // 2. 콘텐츠 데이터 설정
      window.puzzleChapterData = [
        {
          id: 1,
          name: "한맥가족 소개 및 경영이념",
          pieceId: 9,
          type: "youtube",
          group: 1,
          completed: true,
          lessons: [
            {
              label: "한맥가족의 역사",
              url: "KWKJbTgtkrk",
              completed: true,
            },
          ],
        },
        {
          id: 2,
          name: "삼안 회사 소개",
          pieceId: 10,
          type: "youtube",
          group: 1,
          completed: true,
          lessons: [
            {
              label: "삼안 회사 개요",
              url: "HugaMHZRBC8",
              completed: true,
            },
          ],
        },
        {
          id: 3,
          name: "왜 다윈인인가",
          pieceId: 1,
          type: "youtube",
          group: 3,
          completed: true,
          lessons: [
            {
              label: "왜 다윈인가? - 1강 소통_#001",
              url: "OXTYn3JkkCQ", 
              completed: true,
            },
            {
              label: "왜 다윈인가? - 1강 소통_#002",
              url: "oVoZLxi62Zg", 
              completed: true,
            },
            {
              label: "왜 다윈인가? - 1강 소통_#003",
              url: "OXTYn3JkkCQ", 
              completed: true,
            },
            {
              label: "왜 다윈인가? - 1강 소통_#004",
              url: "oVoZLxi62Zg", 
              completed: true,
            },

            {
              label: "왜 다윈인가? - 2강 통섭_#001",
              url: "OXTYn3JkkCQ", 
              completed: true,
            },
            {
              label: "왜 다윈인가? - 2강 통섭_#002",
              url: "oVoZLxi62Zg", 
              completed: true,
            },
            {
              label: "왜 다윈인가? - 2강 통섭_#003",
              url: "OXTYn3JkkCQ", 
              completed: true,
            },
            {
              label: "왜 다윈인가? - 2강 통섭_#004",
              url: "oVoZLxi62Zg", 
              completed: true,
            },
          ],
        },
        {
          id: 4,
          name: "새로운 시대를 준비하는 우리",
          pieceId: 2,
          type: "file",
          group: 2,
          completed: true,
          lessons: [
            {
              label: "디지털 전환의 시대",
              url: "./files/education.pdf",
              completed: true,
            },
          ],
        },
        {
          id: 5,
          name: "기술개발센터 소개",
          pieceId: 3,
          type: "youtube",
          group: 2,
          completed: true,
          lessons: [
            {
              label: "기술개발센터 역할",
              url: "T3pkeUl5fT4",
              completed: true,
            },
          ],
        },
        {
          id: 6,
          name: "건설산업의 디지털 전환",
          pieceId: 4,
          type: "youtube",
          group: 2,
          completed: true,
          lessons: [
            {
              label: "건설 DX 개요",
              url: "T3pkeUl5fT4",
              completed: true,
            },
          ],
        },
        {
          id: 7,
          name: "상용 소프트웨어 소개",
          pieceId: 5,
          type: "youtube",
          group: 2,
          completed: true,
          lessons: [
            {
              label: "주요 S/W 플랫폼",
              url: "T3pkeUl5fT4",
              completed: true,
            },
          ],
        },
        {
          id: 8,
          name: "축적의 시간",
          pieceId: 6,
          type: "youtube",
          group: 3,
          completed: true,
          lessons: [
            {
              label: "축적의 시간 - 착각의 시간",
              url: "8MugD6Cwhl8",
              completed: true,
            },
            {
              label: "축적의 시간 - 축적에서 길을 찾다",
              url: "8MugD6Cwhl8",
              completed: true,
            },
            {
              label: "축적의 시간 2 - 천재는 잊어라",
              url: "8MugD6Cwhl8",
              completed: true,
            },
            {
              label: "축적의 시간2 - 유령이 된 리더들",
              url: "8MugD6Cwhl8",
              completed: true,
            },
            
          ],
        },
        {
          id: 9,
          name: "회사생활 안내 (경력)",
          pieceId: 7,
          type: "youtube",
          group: 4,
          completed: true,
          lessons: [
            {
              label: "경력사원 온보딩",
              url: "Py7nutVN53s",
              completed: true,
            },
          ],
        },
        {
          id: 10,
          name: "회사생활 안내 (신규)",
          pieceId: 8,
          type: "youtube",
          group: 4,
          completed: true,
          lessons: [
            {
              label: "신규입사자 가이드",
              url: "Py7nutVN53s",
              completed: true,
            },
          ],
        },
      ];
    </script>

    <script src="/js/puzzle-onboarding.js"></script>
  </body>
</html>
