<template>
  <div class="page flex-col">
    <div class="group_1 flex-col">
      <div class="box_1 flex-row">
        <img class="image_1" referrerpolicy="no-referrer" src="public/images/logo.png" />

        <!-- Desktop Navigation -->
        <div class="desktop-nav">
          <span class="text_1">企业首页</span>
          <span class="text_2">产品&nbsp;&amp;服务</span>
          <span class="text_3">灵睿&nbsp;&amp;我们</span>
          <span class="text_4">客户&amp;评价</span>
          <span class="text_5">社会&amp;责任</span>
          <span class="text_6">联系我们</span>
        </div>

        <!-- Mobile Hamburger Button -->
        <div class="mobile-menu-btn" @click="toggleMobileMenu">
          <div class="hamburger" :class="{ 'is-active': isMobileMenuOpen }">
            <span></span>
            <span></span>
            <span></span>
          </div>
        </div>
      </div>

      <!-- Mobile Navigation -->
      <div class="mobile-nav" v-if="isMobileMenuOpen">
        <span class="mobile-nav-item">企业首页</span>
        <span class="mobile-nav-item">产品&nbsp;&amp;服务</span>
        <span class="mobile-nav-item">灵睿&nbsp;&amp;我们</span>
        <span class="mobile-nav-item">客户&amp;评价</span>
        <span class="mobile-nav-item">社会&amp;责任</span>
        <span class="mobile-nav-item">联系我们</span>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { useRoute } from 'vue-router'
import { useI18n } from 'vue-i18n'
import { useStore } from '~/store'

const store = useStore()
const route = useRoute()
const { locale } = useI18n()
const isMobileMenuOpen = ref(false)

const toggleMobileMenu = () => {
  isMobileMenuOpen.value = !isMobileMenuOpen.value
}

console.log(route)
</script>

<style lang="scss" scoped>
@import '@/assets/index.css';

.box_1 {
  justify-content: center;
  padding: 0 20px;
  align-items: center;
  position: relative;
}

.desktop-nav {
  display: flex;
  align-items: center;
  gap: 20px;

  @media (max-width: 768px) {
    display: none;
  }
}

.mobile-menu-btn {
  display: none;
  cursor: pointer;

  @media (max-width: 768px) {
    display: block;
  }
}

.hamburger {
  width: 30px;
  height: 24px;
  position: relative;

  span {
    display: block;
    position: absolute;
    height: 3px;
    width: 100%;
    background: #000;
    border-radius: 3px;
    transition: all 0.3s ease;

    &:nth-child(1) {
      top: 0;
    }

    &:nth-child(2) {
      top: 10px;
    }

    &:nth-child(3) {
      top: 20px;
    }
  }

  &.is-active {
    span {
      &:nth-child(1) {
        transform: rotate(45deg);
        top: 10px;
      }

      &:nth-child(2) {
        opacity: 0;
      }

      &:nth-child(3) {
        transform: rotate(-45deg);
        top: 10px;
      }
    }
  }
}

.mobile-nav {
  display: none;
  flex-direction: column;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: white;
  padding: 20px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  z-index: 100;

  @media (max-width: 768px) {
    display: flex;
  }

  .mobile-nav-item {
    padding: 15px 0;
    border-bottom: 1px solid #eee;
    cursor: pointer;

    &:last-child {
      border-bottom: none;
    }

    &:hover {
      color: #666;
    }
  }
}

.desktop-nav span:hover {
  cursor: pointer;
  color: #fff;
}
</style>
