<!doctype html>
<html lang="ko">
  <head>
    <?php include(__DIR__ . "/_include/_head.php") ?>
    <link rel="stylesheet" type="text/css" href="/css/intro.css" />
  </head>
  <body>
    <div class="wrap intro">
      <!-- =============================================
           인트로 페이지 구조
           - Section 1: 사용자 인사 (타이핑 애니메이션)
           - Section 2: 업데이트 소개 + 기능 카드 4종
           - Section 3: CTA (시작 버튼)
           ============================================= -->
      <div class="container">
        <!-- 메인 애니메이션 섹션 (Section 1, 2 공통) -->
        <section class="text-ani">
          <!-- 텍스트 영역: 인사 ↔ 업데이트 소개 전환 -->
          <div class="text-area">
            <!-- [1] Section 1: 사용자 맞춤 인사 (타이핑 효과) -->
            <div id="section1Text" class="greeting" data-section="1">
              <p>
                <span class="name" id="typedName"></span
                ><span class="cursor" id="cursor">|</span>
                <br class="m-br" />안녕하세요!
              </p>
              <p class="welcome" id="welcome"></p>
            </div>

            <!-- [2] Section 2: 업데이트 소개 텍스트 (애니메이션 순차 노출) -->
            <div id="section2Text" class="update-text hidden" data-section="2">
              <div class="update-line">
                <span id="line1">이번 업데이트에서</span>
              </div>
              <div class="update-line">
                <span id="line2"
                  >더 <em>편리하고 즐겁게 학습</em><br class="m-br"> 하실 수 있도록</span
                >
              </div>
              <div class="update-line bold">
                <span id="line3">배움터가 이렇게 달라졌어요</span>
              </div>
            </div>
          </div>

          <!-- 콘텐츠 영역: 기능 카드 4종 (Section 2에서만 노출) -->
          <div class="content-area">
            <div class="card-list" id="cardsContainer">
              <div class="card" id="card1" data-card="1">
                <div class="card-num">01</div>
                <div class="card-title">
                  <em>내 학습</em>을 <em>차곡차곡</em><br />
                  <em>모아</em>보세요
                </div>
                <div class="card-desc">
                  <em>"콘텐츠를 저장"</em>해두고<br />
                  언제든 다시<br />
                  참고할 수 있어요.
                </div>
              </div>
              <div class="card" id="card2" data-card="2">
                <div class="card-num">02</div>
                <div class="card-title">
                  <em>중요한 공지사항</em>도<br />
                  놓치지 않아요
                </div>
                <div class="card-desc">
                  상단 <em>"알림기능"</em>을 통해<br />
                  새 소식을 빠르게<br />
                  확인할 수 있어요
                </div>
              </div>
              <div class="card" id="card3" data-card="3">
                <div class="card-num">03</div>
                <div class="card-title">
                  좋은 학습 <em>콘텐츠를</em><br />
                  <em>공유</em>할 수 있어요
                </div>
                <div class="card-desc">
                  팀원들과 함께<br />
                  학습할 수 있도록<br />
                  <em>"콘텐츠를 제안"</em>해보세요
                </div>
              </div>
              <div class="card" id="card4" data-card="4">
                <div class="card-num">04</div>
                <div class="card-title">
                  나의 학습 현황을<br />
                  <em>확인</em>할 수 있어요
                </div>
                <div class="card-desc">
                  마이페이지에서<br />
                  학습현황을<br />
                  <em>"한 눈에 확인"</em>해보세요
                </div>
              </div>
            </div>
          </div>
        </section>

        <!-- [3] Section 3: CTA 영역 (시작 버튼 + 마스크 효과) -->
        <div id="section3Text" class="cta-text hidden" data-section="3">
          <!-- 메인 배경 텍스트 영역 -->
          <div id="mainContainer">
            <div class="text-section" id="ctaBg">
              <p id="ctaLine1">지금부터 <em>나만의 학습으로</em></p>
              <p id="ctaLine2">성장해 볼까요?</p>
            </div>
          </div>
          <!-- 마스크 오버레이 (클릭 시 확대되며 하단 텍스트 노출) -->
          <div class="mask" id="maskContainer">
            <div class="text-section">
              <p class="mask-text" id="maskLine1">
                계속 <em>성장해 나가는 배움터</em>를
              </p>
              <p class="mask-text" id="maskLine2">지켜봐 주세요!</p>
            </div>
          </div>
          <!-- CTA 버튼 -->
          <button
            class="cta-btn"
            id="ctaBtn"
            onclick="location.href = './index_guide.html';"
          >
            약속
            <i class="ico-arrow"></i>
          </button>
        </div>

        <!-- 스크롤 안내 (Section 1, 2에서만 표시) -->
        <div class="scroll-indicator" id="scrollIndicator">
          <span>Scroll</span>
          <span class="bar"></span>
        </div>
      </div>
    </div>

    <!-- =============================================
         인트로 설정 및 상태 (animation.js 등에서 사용)
         ※ fullName, welcomeText 등 여기서 수정
         ============================================= -->
    <script>
      /** 인트로 페이지 설정 값 */
      const INTRO_CONFIG = {
        fullName: "홍길동 선임연구원님", // 사용자 이름 (타이핑으로 표시)
        welcomeText:
          "<em>새로워진</em> <em>배움터</em>에 오신 것을 <em>환영합니다</em>",
        typingSpeed: 100, // 이름 타이핑 속도 (ms)
        welcomeCharSpeed: 60, // 환영 문구 문자별 출력 속도 (ms)
      };

      /** 인트로 페이지 상태 (섹션, 애니메이션 등) */
      const INTRO_STATE = {
        currentSection: 0, // 0:인사, 1:업데이트, 2:CTA
        typedIndex: 0,
        isScrolling: false,
        isAnimating: false,
        section2AnimDone: false,
        autoScrollTimer: null,
        lastInteractionTime: Date.now(),
      };

      /** 사용자 이름 변경 시 호출 */
      function setUserName(name) {
        INTRO_CONFIG.fullName = name;
      }

      /** 설정 객체 병합 (일괄 수정 시) */
      function updateConfig(config) {
        Object.assign(INTRO_CONFIG, config);
      }
    </script>

    <!-- 인트로 스크립트 (로드 순서: animation → section → events → init) -->
    <script src="/js/intro/animation.js" defer></script>
    <script src="/js/intro/section.js" defer></script>
    <script src="/js/intro/events.js" defer></script>
    <script src="/js/intro/init.js" defer></script>
  </body>
</html>
