<template>
  <footer class="app-footer">
    <div class="footer-container">
      <div class="footer-top">
        <div class="footer-logo">
          <img src="../assets/logo.png" alt="Logo" />
          <span>云帆教育</span>
        </div>
        
        <div class="footer-links">
          <div class="link-group">
            <h3>关于我们</h3>
            <ul>
              <li><a href="#">公司简介</a></li>
              <li><a href="#">联系方式</a></li>
              <li><a href="#">招贤纳士</a></li>
            </ul>
          </div>
          
          <div class="link-group">
            <h3>帮助中心</h3>
            <ul>
              <li><a href="#">常见问题</a></li>
              <li><a href="#">学习指南</a></li>
              <li><a href="#">意见反馈</a></li>
            </ul>
          </div>
          
          <div class="link-group">
            <h3>服务支持</h3>
            <ul>
              <li><a href="#">课程服务</a></li>
              <li><a href="#">技术支持</a></li>
              <li><a href="#">内容合作</a></li>
            </ul>
          </div>
          
          <div class="link-group">
            <h3>关注我们</h3>
            <div class="social-links">
              <a href="#"><el-icon><ChatDotRound /></el-icon></a>
              <a href="#"><el-icon><Share /></el-icon></a>
              <a href="#"><el-icon><Connection /></el-icon></a>
            </div>
          </div>
        </div>
      </div>
      
      <div class="footer-bottom">
        <p>© 2023 云帆教育 版权所有 | 隐私政策 | 使用条款</p>
      </div>
    </div>
  </footer>
</template>

<script setup>
import { ChatDotRound, Share, Connection } from '@element-plus/icons-vue'
</script>

<style lang="scss" scoped>
.app-footer {
  background-color: #2c3e50;
  color: #fff;
  padding: 40px 0 20px;
  
  .footer-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    
    .footer-top {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      margin-bottom: 30px;
      
      .footer-logo {
        display: flex;
        align-items: center;
        margin-bottom: 20px;
        
        img {
          height: 40px;
          margin-right: 10px;
        }
        
        span {
          font-size: 20px;
          font-weight: bold;
        }
      }
      
      .footer-links {
        display: flex;
        flex-wrap: wrap;
        gap: 40px;
        
        .link-group {
          min-width: 120px;
          
          h3 {
            font-size: 16px;
            margin-bottom: 15px;
            position: relative;
            
            &::after {
              content: '';
              position: absolute;
              bottom: -5px;
              left: 0;
              width: 30px;
              height: 2px;
              background-color: #409EFF;
            }
          }
          
          ul {
            list-style: none;
            padding: 0;
            margin: 0;
            
            li {
              margin-bottom: 8px;
              
              a {
                color: #a8b6c5;
                text-decoration: none;
                transition: color 0.3s;
                
                &:hover {
                  color: #409EFF;
                }
              }
            }
          }
          
          .social-links {
            display: flex;
            gap: 15px;
            
            a {
              display: flex;
              align-items: center;
              justify-content: center;
              width: 36px;
              height: 36px;
              border-radius: 50%;
              background-color: rgba(255, 255, 255, 0.1);
              color: #fff;
              transition: background-color 0.3s;
              
              &:hover {
                background-color: #409EFF;
              }
            }
          }
        }
      }
    }
    
    .footer-bottom {
      border-top: 1px solid rgba(255, 255, 255, 0.1);
      padding-top: 20px;
      text-align: center;
      
      p {
        color: #a8b6c5;
        font-size: 14px;
      }
    }
  }
}

@media (max-width: 768px) {
  .app-footer {
    .footer-container {
      .footer-top {
        flex-direction: column;
        
        .footer-links {
          flex-direction: column;
          gap: 20px;
        }
      }
    }
  }
}
</style> 