<template>
  <div class="home-wrapper">
    <Header :isSchoolMode="isSchoolMode" @toggle-mode="isSchoolMode = !isSchoolMode" />

    <div class="container-fluid px-4 pb-5 content-area" style="max-width: 1400px;"> 
      <template v-if="isSchoolMode">
        
        <div class="col-12 d-flex flex-wrap justify-content-end gap-2 action-buttons mb-3">
  
          <div class="dropdown">
            <button class="btn btn-sm bg-gradient text-white dropdown-toggle shadow-sm" style="background-color: #fd7e14; border-color: #fd7e14;" type="button" @click="toggleDropdown('aiData')">
              <i class="fas fa-brain"></i> AI와 데이터
            </button>
            <ul class="dropdown-menu dropdown-menu-end shadow mt-2" :class="{ show: isAiDataOpen }">
              <li><a class="dropdown-item py-2" href="https://www.youtube.com/watch?v=MFLRRjcMR7I" target="_blank"><i class="fab fa-youtube text-danger me-2"></i> [소프트웨어야 놀자] 인공지능 활용</a></li>
              <li><a class="dropdown-item py-2" href="https://www.youtube.com/watch?v=f4eGeb_urv8" target="_blank"><i class="fab fa-youtube text-danger me-2"></i> 학습 데이터의 중요성</a></li>
              <li><a class="dropdown-item py-2" href="https://www.youtube.com/watch?v=LHOfOFduv-k" target="_blank"><i class="fab fa-youtube text-danger me-2"></i> AI와 똑똑하게 친구 되기</a></li>
              <li><a class="dropdown-item py-2" href="https://www.youtube.com/watch?v=R09H1kdqA-I" target="_blank"><i class="fab fa-youtube text-danger me-2"></i> 초등학생 챗GPT 활용법</a></li>
              <li><hr class="dropdown-divider"></li>
              <li><a class="dropdown-item py-2" href="https://www.youtube.com/watch?v=vc6heXAXqEs" target="_blank"><i class="fab fa-youtube text-danger me-2"></i> [EBS] 세상을 바꾸는 데이터 과학</a></li>
              <li><hr class="dropdown-divider"></li>
              <li><a class="dropdown-item py-2" href="https://www.youtube.com/shorts/dgjFc5zpLig" target="_blank"><i class="fab fa-youtube text-danger me-2"></i> 테슬라 탑승후기</a></li>
              <li><a class="dropdown-item py-2" href="https://www.youtube.com/watch?v=WYVvFpegkWA" target="_blank"><i class="fab fa-youtube text-danger me-2"></i> 웨이모 탑승후기</a></li>
              <li><a class="dropdown-item py-2" href="https://www.youtube.com/watch?v=2xvbQmdaRUY" target="_blank"><i class="fab fa-youtube text-danger me-2"></i> 구글 웨이모 vs 테슬라 AI 대결: 자율주행 완벽 비교 분석</a></li>
            </ul>
          </div>

          <div class="dropdown">
            <button class="btn btn-sm btn-success bg-gradient text-white dropdown-toggle shadow-sm" type="button" @click="toggleDropdown('microbit')">
              <i class="fas fa-microchip"></i> 마이크로비트
            </button>
            <ul class="dropdown-menu dropdown-menu-end shadow mt-2" :class="{ show: isMicrobitOpen }">
              <li><a class="dropdown-item py-2" href="https://www.youtube.com/watch?v=FtxukF-Z3jQ" target="_blank"><i class="fab fa-youtube text-danger me-2"></i> 초심자 설명</a></li>
              <li><a class="dropdown-item py-2" href="https://youtu.be/JWHd5hQLf3U" target="_blank"><i class="fab fa-youtube text-danger me-2"></i> 링비트카 LED 결합</a></li>
              <li><a class="dropdown-item py-2" href="https://youtube.com/shorts/6m_MeOsmWzc" target="_blank"><i class="fab fa-youtube text-danger me-2"></i> 초음파센서 교체</a></li>
            </ul>
          </div>

          <div class="dropdown">
            <button class="btn btn-sm btn-dark bg-gradient text-white dropdown-toggle shadow-sm" type="button" @click="toggleDropdown('intro')">
              <i class="fas fa-video"></i> 4차 산업 소개
            </button>
            <ul class="dropdown-menu dropdown-menu-end shadow mt-2" :class="{ show: isIntroVideoOpen }">
              <li><a class="dropdown-item py-2" href="https://www.youtube.com/watch?v=-5P2OL9a1A8" target="_blank">3분 요약 (1차시)</a></li>
              <li><a class="dropdown-item py-2" href="https://www.youtube.com/watch?v=aXXTQHBcsOo" target="_blank">로봇 바리스타 등 (1차시)</a></li>
              <li><a class="dropdown-item py-2" href="https://www.youtube.com/watch?v=179vkKhxmy0" target="_blank">로봇 호텔 (1,2차시)</a></li>
            </ul>
          </div>

          <div class="dropdown">
            <button class="btn btn-sm btn-dark bg-gradient text-white dropdown-toggle shadow-sm" type="button" @click="toggleDropdown('jinro')">
              <i class="fas fa-film"></i> 진로 관련 영상
            </button>
            <ul class="dropdown-menu dropdown-menu-end shadow mt-2" :class="{ show: isJinroVideoOpen }">
              <li><a class="dropdown-item py-2" href="https://www.youtube.com/watch?v=uWFqqmPIUHA" target="_blank">직업 총정리 (3차시)</a></li>
              <li><a class="dropdown-item py-2" href="https://www.youtube.com/watch?v=isekVOQ10HE" target="_blank">직업 세계 (3차시)</a></li>
              <li><a class="dropdown-item py-2" href="https://www.youtube.com/watch?v=v5MMRs0XnxI" target="_blank">유망 직업 TOP 5</a></li>
              <li><a class="dropdown-item py-2" href="https://www.youtube.com/watch?v=iHjTPcx-9Tc" target="_blank">로봇의 의미 (고학년)</a></li>
              <li><a class="dropdown-item py-2" href="https://www.youtube.com/watch?v=pORcKZ9ggS8" target="_blank">수어번역과 음성센서</a></li>
              <li><a class="dropdown-item py-2" href="https://www.youtube.com/watch?v=arFIJTCrukg" target="_blank">은평성모병원 폴봇</a></li>
              <li><hr class="dropdown-divider"></li>
              <li><a class="dropdown-item py-2" href="https://www.youtube.com/watch?v=6f_joanlON4" target="_blank">자율주행차 원리</a></li>
              <li><a class="dropdown-item py-2" href="https://www.youtube.com/watch?v=vjwsyILYGMA" target="_blank">테슬라 옵티머스 공개</a></li>
              <li><a class="dropdown-item py-2" href="https://www.youtube.com/watch?v=lfbict0xXxc" target="_blank">AI의 섬뜩한 답변</a></li>
            </ul>
          </div>

        </div>

        <div class="row mb-4">
          <div class="col-md-6 mb-3">
            <div class="card h-100 shadow-sm border-0 rounded-4">
              <div class="card-header bg-success bg-gradient text-white fw-bold rounded-top-4">
                <i class="fas fa-poll"></i> 설문조사
              </div>
              <div class="card-body d-flex flex-column justify-content-center align-items-center gap-3">
                <a class="btn btn-outline-success btn-lg w-75 rounded-pill" 
                  href="https://naver.me/5Qsp7zw7" 
                  target="_blank">
                  설문조사 참여하기
                </a>
                
                <a class="btn btn-outline-secondary btn-lg w-75 rounded-pill disabled" 
                  href="#" 
                  tabindex="-1" 
                  aria-disabled="true">
                  설문조사 QR코드 보기
                </a>
              </div>
            </div>
          </div>
          <div class="col-md-6 mb-3">
            <div class="card h-100 shadow-sm border-0 bg-light rounded-4">
              <div class="card-header bg-secondary text-white fw-bold rounded-top-4"><i class="fas fa-clipboard-list"></i> 활동사항 (예정)</div>
              <div class="card-body d-flex justify-content-center align-items-center text-muted">
                <p class="mb-0">추후 학교 활동 관련 내용이 업데이트 될 예정입니다.</p>
              </div>
            </div>
          </div>
        </div>

        <div class="row">
          <div class="col-12">
            <div class="card shadow-sm border-0 rounded-4">
              <div class="card-header bg-primary bg-gradient text-white fw-bold rounded-top-4"><i class="fas fa-compass"></i> 진로체험 교안</div>
              <div class="card-body">
                <div class="d-flex flex-wrap gap-4 p-2 justify-content-start">
                  <div class="text-center item-container" v-for="item in schoolItems" :key="item.name">
                    <router-link class="text_decoration_remove d-block" v-if="item.used" v-bind:to="`${item.href}`">
                      <div class="fixed-logo-box mx-auto mb-3">
                        <img class="logo_img" :src="require(`@/assets/images/logos/${item.image}`)" />
                      </div>
                      <div class="fw-bold text-dark item-title">{{item.name}}</div> 
                    </router-link>
                    <div v-else class="opacity-50 d-block cursor-not-allowed">
                      <div class="fixed-logo-box mx-auto mb-3">
                        <img class="logo_img" :src="require(`@/assets/images/logos/${item.image}`)" />
                      </div>
                      <div class="fw-bold text-secondary item-title">{{item.name}} <br><small class="text-muted fw-normal">(준비중)</small></div> 
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

      </template>

      <template v-else>
        <div class="row g-4 pt-4">
          
          <div class="col-md-4">
            <div class="card h-100 shadow-sm border-0 rounded-4">
              <div class="card-header bg-success bg-gradient text-white fw-bold rounded-top-4"><i class="fas fa-code"></i> 순수코딩</div>
              <div class="card-body d-flex flex-wrap gap-4 p-4">
                <div class="text-center item-container" v-for="item in libItems1" :key="item.name">
                  <router-link class="text_decoration_remove d-block" v-bind:to="`${item.href}`">
                    <div class="fixed-logo-box mx-auto mb-3"><img class="logo_img" :src="require(`@/assets/images/logos/${item.image}`)" /></div>
                    <div class="item-title text-dark fw-bold">{{item.name}}</div> 
                  </router-link>
                </div>
              </div>
            </div>
          </div>

          <div class="col-md-4">
            <div class="card h-100 shadow-sm border-0 rounded-4">
              <div class="card-header bg-success bg-gradient text-white fw-bold rounded-top-4"><i class="fas fa-robot"></i> 로봇코딩</div>
              <div class="card-body d-flex flex-wrap gap-4 p-4">
                <div class="text-center item-container" v-for="item in libItems2" :key="item.name">
                  <router-link class="text_decoration_remove d-block" v-bind:to="`${item.href}`">
                    <div class="fixed-logo-box mx-auto mb-3"><img class="logo_img" :src="require(`@/assets/images/logos/${item.image}`)" /></div>
                    <div class="item-title text-dark fw-bold">{{item.name}}</div> 
                  </router-link>
                </div>
              </div>
            </div>
          </div>

          <div class="col-md-4">
            <div class="card h-100 shadow-sm border-0 rounded-4">
              <div class="card-header bg-primary bg-gradient text-white fw-bold rounded-top-4"><i class="fas fa-bolt"></i> 바이브 코딩</div>
              <div class="card-body d-flex flex-wrap gap-4 p-4">
                <div class="text-center item-container" v-for="item in libItemsVibe" :key="item.name">
                  <router-link class="text_decoration_remove d-block" v-bind:to="`${item.href}`">
                    <div class="fixed-logo-box mx-auto mb-3"><img class="logo_img" :src="require(`@/assets/images/logos/${item.image}`)" /></div>
                    <div class="item-title text-dark fw-bold">{{item.name}}</div> 
                  </router-link>
                </div>
              </div>
            </div>
          </div>

          <div class="col-md-4">
            <div class="card h-100 shadow-sm border-0 rounded-4">
              <div class="card-header bg-info bg-gradient text-white fw-bold rounded-top-4"><i class="fas fa-cubes"></i> STEAM</div>
              <div class="card-body d-flex flex-wrap gap-4 p-4">
                <div class="text-center item-container" v-for="item in libItems3" :key="item.name">
                  <router-link class="text_decoration_remove d-block" v-bind:to="`${item.href}`">
                    <div class="fixed-logo-box mx-auto mb-3"><img class="logo_img" :src="require(`@/assets/images/logos/${item.image}`)" /></div>
                    <div class="item-title text-dark fw-bold">{{item.name}}</div> 
                  </router-link>
                </div>
              </div>
            </div>
          </div>

          <div class="col-md-4">
            <div class="card h-100 shadow-sm border-0 rounded-4">
              <div class="card-header bg-warning bg-gradient text-dark fw-bold rounded-top-4"><i class="fas fa-laptop-code"></i> 텍스트코딩</div>
              <div class="card-body d-flex flex-wrap gap-4 p-4">
                <div class="text-center item-container" v-for="item in libItems4" :key="item.name">
                  <router-link class="text_decoration_remove d-block" v-bind:to="`${item.href}`">
                    <div class="fixed-logo-box mx-auto mb-3"><img class="logo_img" :src="require(`@/assets/images/logos/${item.image}`)" /></div>
                    <div class="item-title text-dark fw-bold">{{item.name}}</div> 
                  </router-link>
                </div>
              </div>
            </div>
          </div>

          <div class="col-md-4">
            <div class="card h-100 shadow-sm border-0 rounded-4">
              <div class="card-header bg-dark bg-gradient text-white fw-bold rounded-top-4"><i class="fas fa-language"></i> 외국어 (일/중)</div>
              <div class="card-body d-flex flex-wrap gap-4 p-4">
                <div class="text-center item-container" v-for="item in libItems5" :key="item.name">
                  <router-link class="text_decoration_remove d-block" v-bind:to="`${item.href}`">
                    <div class="fixed-logo-box mx-auto mb-3"><img class="logo_img" :src="require(`@/assets/images/logos/${item.image}`)" /></div>
                    <div class="item-title text-dark fw-bold">{{item.name}}</div> 
                  </router-link>
                </div>
                <div class="text-center item-container" v-for="item in libItems6" :key="item.name">
                  <router-link class="text_decoration_remove d-block" v-bind:to="`${item.href}`">
                    <div class="fixed-logo-box mx-auto mb-3"><img class="logo_img" :src="require(`@/assets/images/logos/${item.image}`)" /></div>
                    <div class="item-title text-dark fw-bold">{{item.name}}</div> 
                  </router-link>
                </div>
              </div>
            </div>
          </div>

        </div>
      </template>

    </div>

    <Footer />
  </div>
</template>

<script>
import Header from "@/components/Header.vue";
import Footer from "@/components/Footer.vue";

export default {
  name: "Home",
  components: { Header, Footer },
  data() {
    return {
      isSchoolMode: true, 
      
      isMicrobitOpen: false,
      isIntroVideoOpen: false,
      isJinroVideoOpen: false,
      isAiDataOpen: false,

      schoolItems: [],
      libItems1: [],
      libItems2: [],
      libItemsVibe: [],
      libItems3: [],
      libItems4: [],
      libItems5: [],
      libItems6: []
    };
  },
  watch: {
    isSchoolMode(newVal) {
      sessionStorage.setItem('appMode', newVal ? 'school' : 'library');
    }
  },
  methods: {
    // 클릭한 메뉴만 열고(또는 닫고), 나머지는 무조건 다 닫아버리는 만능 함수
    toggleDropdown(menu) {
      this.isAiDataOpen = (menu === 'aiData') ? !this.isAiDataOpen : false;
      this.isMicrobitOpen = (menu === 'microbit') ? !this.isMicrobitOpen : false;
      this.isIntroVideoOpen = (menu === 'intro') ? !this.isIntroVideoOpen : false;
      this.isJinroVideoOpen = (menu === 'jinro') ? !this.isJinroVideoOpen : false;
    },

    closeDropdowns(type) {
      setTimeout(() => {
        if (type === 'microbit') this.isMicrobitOpen = false;
        if (type === 'intro') this.isIntroVideoOpen = false;
        if (type === 'jinro') this.isJinroVideoOpen = false;
      }, 200);
    }
  },
  mounted() {
    const savedMode = sessionStorage.getItem('appMode');
    if (savedMode) {
      this.isSchoolMode = savedMode === 'school';
    }

    var lectureLinkURL = '/';

    // [1] School
    this.schoolItems.push({ name: '뉴턴스쿨(2019)', href: lectureLinkURL + 'newton', image: 'jinro.png', used: false });
    this.schoolItems.push({ name: '진로체험(2023)', href: lectureLinkURL + 'jinro_2023', image: 'jinro.png', used: true });
    this.schoolItems.push({ name: '진로체험(2025)', href: lectureLinkURL + 'jinro', image: 'jinro.png', used: true });
    this.schoolItems.push({ name: '빅데이터 진로체험', href: lectureLinkURL + 'bigdata_jinro', image: 'jinro.png', used: true });
    this.schoolItems.push({ name: '바이브 식단(초등)', href: lectureLinkURL + 'vibe_e', image: 'food.jpg', used: true  });
    this.schoolItems.push({ name: '바이브 게임(초등)', href: lectureLinkURL + 'vibe_g', image: 'game.png', used: true  });
    this.schoolItems.push({ name: '바이브 스타트업(중)', href: lectureLinkURL + 'vibe_m', image: 'startup.jpg', used: true  });
    this.schoolItems.push({ name: '바이브 스타트업(고)', href: lectureLinkURL + 'vibe_h', image: 'startup.jpg', used: true  });

    this.schoolItems.push({ name: '아키텍처(초등)', href: lectureLinkURL + 'achi_e', image: 'achitecture.png', used: true  });
    

    // [2] Library
    this.libItems1.push({ name: '엔트리왕초보', href: lectureLinkURL + 'entry_k', image: 'entry.png' });
    this.libItems1.push({ name: '엔트리기초', href: lectureLinkURL + 'entry_b', image: 'entry.png' });
    this.libItems1.push({ name: '엔트리게임', href: lectureLinkURL + 'entry_g', image: 'entry.png' });
    this.libItems1.push({ name: '앱인벤터', href: lectureLinkURL + 'inventor', image: 'appinventor.png' });
    this.libItems1.push({ name: '강아지키우기', href: lectureLinkURL + 'entry_dog', image: 'entry.png' });
    this.libItems1.push({ name: '엔트리고급', href: lectureLinkURL + 'entry_h', image: 'entry.png' });

    this.libItems2.push({ name: '햄스터봇', href: lectureLinkURL + 'hBot', image: 'hamsterbot.jpg' });
    this.libItems2.push({ name: '어썸봇', href: lectureLinkURL + 'aBot', image: 'asombot.jpg' });
    this.libItems2.push({ name: '할로코드', href: lectureLinkURL + 'hCode', image: 'halocode.jpg' });

    this.libItemsVibe.push({ name: '스타트업(중등)', href: lectureLinkURL + 'vibe_m', image: 'startup.jpg' });
    this.libItemsVibe.push({ name: '스타트업(고등)', href: lectureLinkURL + 'vibe_h', image: 'startup.jpg' });
    this.libItemsVibe.push({ name: '식단(초등)', href: lectureLinkURL + 'vibe_e', image: 'food.jpg'  });
    this.libItemsVibe.push({ name: '게임(초등)', href: lectureLinkURL + 'vibe_g', image: 'game.png'  });

    this.libItems3.push({ name: '팅커캐드 룸', href: lectureLinkURL + 'tinker_r', image: 'tinkercad.png' });
    this.libItems3.push({ name: '팅커캐드 사물', href: lectureLinkURL + 'tinker_o', image: 'tinkercad.png' });
    this.libItems3.push({ name: '팅커캐드 심랩', href: lectureLinkURL + 'tinker_s', image: 'tinkercad.png' });

    this.libItems4.push({ name: 'HTML', href: lectureLinkURL + 'html_b', image: 'html.png' });
    this.libItems4.push({ name: 'JavaScript', href: lectureLinkURL + 'script_b', image: 'js.png' });
    
    this.libItems5.push({ name: '여행(초급)', href: lectureLinkURL + 'jp_b', image: 'japaness.png' });
    this.libItems5.push({ name: '여행(중급)', href: lectureLinkURL + 'jp_m', image: 'japaness.png' });
    this.libItems5.push({ name: '일상(초급)', href: lectureLinkURL + 'jp_daily_b', image: 'japaness.png' });

    this.libItems6.push({ name: '천자문 초급', href: lectureLinkURL + 'hj_b', image: 'hanja.jpg' });
    this.libItems6.push({ name: '천자문 중급', href: lectureLinkURL + 'hj_m', image: 'hanja.jpg' });
  }
};
</script>

<style>
/* CSS 개선 부분 */
.text_decoration_remove {
  text-decoration: none;
}

/* 개별 아이템을 감싸는 컨테이너 */
.item-container {
  width: 100px;
  transition: all 0.2s ease;
}

/* 아름답게 정돈된 아이콘 박스 디자인 */
.fixed-logo-box {
  width: 90px;
  height: 90px;
  background-color: #ffffff; /* 깔끔한 흰색 배경 */
  border: 1px solid #e9ecef; /* 부드러운 테두리 */
  border-radius: 20px; /* 트렌디한 둥근 모서리 */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05); /* 은은한 그림자 */
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  padding: 12px;
}

/* 마우스 오버 시 플로팅(떠오르는) 효과와 그림자 강화 */
.text_decoration_remove:hover .fixed-logo-box {
  transform: translateY(-8px);
  box-shadow: 0 12px 20px rgba(0, 0, 0, 0.1);
  border-color: #0d6efd; /* 마우스 올렸을 때 포인트 컬러 (파란색 계열) */
}

/* 아이콘 텍스트 색상 및 호버 시 색상 변경 */
.text_decoration_remove:hover .item-title {
  color: #0d6efd !important;
}

.logo_img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* 아이템 제목 스타일링 */
.item-title {
  font-size: 14px;
  line-height: 1.3;
  word-break: keep-all;
  letter-spacing: -0.3px;
  color: #495057;
  transition: color 0.3s ease;
}

.cursor-not-allowed {
  cursor: not-allowed;
}

/* 드롭다운 메뉴 스타일 */
.dropdown-menu {
  min-width: 250px;
  border-radius: 12px;
  border: none;
  padding: 8px 0;
}
.dropdown-item {
  transition: background-color 0.2s;
}
.dropdown-item:hover {
  background-color: #f8f9fa;
  color: #0d6efd;
  font-weight: bold;
}
.dropdown-divider {
  margin: 0.5rem 0;
}

/* 레이아웃 제어: Footer 하단 고정을 위한 래퍼 속성 */
.home-wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background-color: #f8f9fc; /* 전체 배경을 살짝 시원한 톤으로 */
}
.content-area {
  flex-grow: 1;
}

/* 모바일 환경 대응 */
@media (max-width: 576px) {
  .action-buttons .dropdown {
    width: 100%;
  }
  .action-buttons .btn {
    width: 100%;
    margin-bottom: 5px;
  }
  .card-body {
    justify-content: center !important; /* 모바일에서는 가운데 정렬 */
  }
}
</style>