<template>
  <footer class="modern-footer">
    <div class="container">
      <div class="footer-content text-center">
        
        <div class="footer-brand mb-4">
          <i class="fas fa-graduation-cap fs-2 text-primary mb-2"></i>
          <h3 class="fw-bold text-dark">Future Class Lab.</h3>
          <p class="text-muted small">미래 교육을 향한 작은 발걸음, 아이들을 위한 창의적인 배움터</p>
        </div>

        <hr class="divider mx-auto my-4">

        <div class="creator-info">
          <span class="heart-icon"><i class="fas fa-heart"></i></span>
          <p class="mb-0 mt-2 text-secondary">
            Designed & Developed with love by <br>
            <strong class="text-dark fs-5">Heo Seok & Lee hana</strong>
          </p>
        </div>

        <div class="copyright mt-4 text-muted small">
          &copy; {{ new Date().getFullYear() }} Future Class Lab. All rights reserved.
        </div>

      </div>
    </div>
  </footer>
</template>

<script>
export default {
  name: "Footer",
};
</script>

<style scoped>
.modern-footer {
  background: linear-gradient(180deg, #f8f9fa 0%, #ffffff 100%);
  border-top: 1px solid #eaeaea;
  padding: 3rem 0 2rem;
  margin-top: auto;
}

.footer-brand h3 {
  letter-spacing: -0.5px;
}

.divider {
  width: 60px;
  border-top: 3px solid #0d6efd;
  opacity: 1;
  border-radius: 3px;
}

.creator-info {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.heart-icon {
  color: #ff4757;
  font-size: 1.5rem;
  animation: heartbeat 2s infinite;
}

.creator-info strong {
  font-family: 'Montserrat', sans-serif; /* 영문이 예쁜 기본 폰트 권장 */
  letter-spacing: 0.5px;
  background: linear-gradient(120deg, #1abc9c, #2980b9);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

@keyframes heartbeat {
  0% { transform: scale(1); }
  14% { transform: scale(1.3); }
  28% { transform: scale(1); }
  42% { transform: scale(1.3); }
  70% { transform: scale(1); }
}
</style>