hanye-website/pages/about.vue

<template>
  <div>
    <div class="w-full h-[55px] sm:h-[72px]"></div>
    <ErrorBoundary :error="error">
      <div v-if="isLoading" class="flex justify-center py-12">
        <!-- 加载中 -->
        <div
          class="animate-spin h-8 w-8 border-4 border-cyan-400 rounded-full border-t-transparent"
        ></div>
      </div>

      <div v-else class="scroll-smooth">
        <!-- 右侧锚点导航 -->
        <div
          class="fixed right-8 top-1/2 transform -translate-y-1/2 z-50 hidden lg:block"
        >
          <nav class="flex flex-col space-y-4">
            <button
              v-for="section in sections"
              :key="section.id"
              @click="scrollToSection(section.id)"
              class="group relative flex items-center"
              :class="{
                'opacity-100': currentSection === section.id,
                'opacity-50 hover:opacity-100': currentSection !== section.id,
              }"
            >
              <span
                class="w-2 h-2 rounded-full bg-[#35F1FF] transition-all duration-300"
                :class="{ 'scale-150': currentSection === section.id }"
              ></span>
              <span
                class="ml-3 text-sm text-white transition-all duration-300 transform translate-x-0 opacity-0 group-hover:translate-x-0 group-hover:opacity-100"
                :class="{
                  'translate-x-0 opacity-100': currentSection === section.id,
                }"
                >{{ section.name }}</span
              >
            </button>
          </nav>
        </div>

        <!-- 顶部横幅 -->
        <div v-if="false" class="w-full select-none">
          <div
            class="max-w-screen-2xl mx-auto h-[70vh] relative overflow-hidden"
          >
            <div
              class="w-full h-full relative z-30 flex flex-col text-center justify-center items-center transform transition-transform duration-1000"
              :style="{ transform: `translateY(${scrollY * 0.5}px)` }"
            >
              <h1
                class="text-white text-5xl font-bold mb-6 tracking-wider animate-title-in"
              >
                会社情報
              </h1>
              <div
                class="w-24 h-px bg-[#35F1FF]/60 mx-auto mb-8 animate-line-expand"
              ></div>
              <p
                class="text-zinc-300/80 text-lg max-w-2xl mx-auto leading-relaxed animate-fade-in-delay"
              >
                技術の力で、より良い未来を創造する
              </p>
            </div>
            <div
              class="absolute inset-0 bg-gradient-to-b from-black/60 via-black/40 to-black/60 z-20"
            ></div>
            <video
              autoplay
              muted
              loop
              poster="/assets/videos/about.webp"
              class="w-full h-full object-cover absolute z-10 left-0 right-0 top-0 bottom-0"
              src="/assets/videos/about.mp4"
            ></video>
          </div>
        </div>

        <!-- 会社概要 -->
        <div
          id="company-profile"
          class="section-block w-full bg-gradient-to-b from-zinc-900 via-zinc-800/80 to-zinc-900 py-40"
          ref="companyProfileRef"
        >
          <div class="max-w-screen-2xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="text-center mb-32 animate-fade-in">
              <h2
                class="section-title text-[#35F1FF] text-sm font-bold mb-4 tracking-[0.2em] animate-slide-in-left"
              >
                {{ t('about.full.nav.companyProfile') }}
              </h2>
              <h1
                class="text-zinc-300 text-3xl font-bold mb-6 tracking-wider animate-slide-in-right"
              >
                Company Profile
              </h1>
              <div
                class="w-16 h-px bg-[#35F1FF]/60 mx-auto animate-line-expand"
              ></div>
            </div>

            <div class="max-w-4xl mx-auto">
              <!-- 公司简介 -->
              <div class="mb-32 text-center">
                <h3 class="text-white text-2xl font-bold mb-8 tracking-wide">
                  Hanye（ハンイエ）
                </h3>
                <p
                  class="text-zinc-300/80 text-base leading-relaxed max-w-2xl mx-auto"
                >
                  2003年に中国・瀋陽で設立された、ストレージ技術分野に特化した総合型企業です。製品の開発から販売、アフターサービスまでを一貫して手がける、中国でも数少ないグローバル展開型ブランドの一つです。
                </p>
              </div>

              <!-- 核心内容 -->
              <div class="grid grid-cols-1 md:grid-cols-2 gap-32">
                <!-- 左侧：产品与服务 -->
                <div class="space-y-24">
                  <div class="relative">
                    <div
                      class="absolute -left-6 top-0 w-px h-full bg-[#35F1FF]/60"
                    ></div>
                    <div class="pl-8">
                      <h4
                        class="text-[#35F1FF] text-lg font-bold mb-6 tracking-wide"
                      >
                        製品とサービス
                      </h4>
                      <p class="text-zinc-300/80 text-sm leading-relaxed">
                        メモリーカード、SSD（ソリッドステートドライブ）、メモリーモジュール、関連アクセサリーなど幅広い製品を取り扱っています。これらの製品は、コンシューマーエレクトロニクス、パーソナルコンピュータ、ゲーム機器、監視システムなど幅広い分野で活用されています。
                      </p>
                    </div>
                  </div>
                  <div class="relative">
                    <div
                      class="absolute -left-6 top-0 w-px h-full bg-[#35F1FF]/60"
                    ></div>
                    <div class="pl-8">
                      <h4
                        class="text-[#35F1FF] text-lg font-bold mb-6 tracking-wide"
                      >
                        技術主導
                      </h4>
                      <p class="text-zinc-300/80 text-sm leading-relaxed">
                        継続的に研究開発へ投資し、卓越した技術力と厳格な品質管理体制を強みに、製品の性能と安定性の向上に取り組んでいます。
                      </p>
                    </div>
                  </div>
                </div>

                <!-- 右侧：品质与服务 -->
                <div class="space-y-24">
                  <div class="relative">
                    <div
                      class="absolute -left-6 top-0 w-px h-full bg-[#35F1FF]/60"
                    ></div>
                    <div class="pl-8">
                      <h4
                        class="text-[#35F1FF] text-lg font-bold mb-6 tracking-wide"
                      >
                        品質第一
                      </h4>
                      <p class="text-zinc-300/80 text-sm leading-relaxed">
                        高品質でありながら優れたコストパフォーマンスを実現した製品を追求し、多様化する消費者のストレージニーズに的確に応えています。
                      </p>
                    </div>
                  </div>
                  <div class="relative">
                    <div
                      class="absolute -left-6 top-0 w-px h-full bg-[#35F1FF]/60"
                    ></div>
                    <div class="pl-8">
                      <h4
                        class="text-[#35F1FF] text-lg font-bold mb-6 tracking-wide"
                      >
                        グローバル展開
                      </h4>
                      <p class="text-zinc-300/80 text-sm leading-relaxed">
                        中国を拠点に、世界中のパートナーと協力しながら、グローバルな視点で製品開発とサービス提供を行っています。
                      </p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 事業内容 -->
        <div
          id="business-content"
          class="section-block w-full bg-gradient-to-b from-indigo-900/60 via-indigo-800/40 to-indigo-900/60 py-48 relative overflow-hidden"
          ref="businessContentRef"
        >
          <div class="bg-decoration">
            <div
              class="bg-decoration-circle top-0 left-0 w-96 h-96 bg-indigo-500 transform -translate-x-1/2 -translate-y-1/2 animate-float"
            ></div>
            <div
              class="bg-decoration-circle bottom-0 right-0 w-96 h-96 bg-indigo-500 transform translate-x-1/2 translate-y-1/2 animate-float-delay"
            ></div>
            <div
              class="bg-decoration-circle top-1/2 left-1/2 w-64 h-64 bg-indigo-500 transform -translate-x-1/2 -translate-y-1/2 animate-pulse-slow"
            ></div>
          </div>

          <div class="max-w-screen-2xl mx-auto px-4 sm:px-6 lg:px-8 relative">
            <div class="text-center mb-40">
              <h2
                class="text-indigo-400 text-sm font-bold mb-4 tracking-[0.2em]"
              >
                事業内容
              </h2>
              <h1 class="text-zinc-300 text-3xl font-bold mb-6 tracking-wider">
                Our Business
              </h1>
              <div class="w-16 h-px bg-indigo-400/60 mx-auto mb-8"></div>
              <p
                class="text-zinc-300/80 text-base max-w-2xl mx-auto leading-relaxed"
              >
                技術の力で、より良い未来を創造する。<br
                  class="hidden sm:block"
                />
                私たちは、革新的なストレージソリューションを通じて、社会に貢献します。
              </p>
            </div>

            <div class="space-y-48">
              <!-- ストレージ製品の研究開発 -->
              <div class="relative group">
                <div
                  class="absolute -left-8 top-0 w-px h-full bg-[#35F1FF]/60 transition-all duration-300 group-hover:h-[calc(100%+2rem)] group-hover:-top-4"
                ></div>
                <div class="pl-12">
                  <div class="flex items-center space-x-6 mb-12">
                    <div
                      class="text-[#35F1FF] text-3xl font-bold tracking-tight"
                    >
                      01
                    </div>
                    <h3 class="text-white text-2xl font-bold tracking-wide">
                      ストレージ製品の研究開発
                    </h3>
                  </div>
                  <p
                    class="text-zinc-300/80 text-sm leading-relaxed mb-16 max-w-2xl"
                  >
                    SSD（ソリッドステートドライブ）、メモリーカード、メモリーモジュールなどのストレージ製品において、独自の設計・開発を行っています。
                  </p>
                  <div class="grid grid-cols-2 md:grid-cols-4 gap-12">
                    <div class="group/item">
                      <div
                        class="text-[#35F1FF] text-xl font-bold mb-4 group-hover/item:scale-105 transition-all duration-300"
                      >
                        SSD
                      </div>
                      <div class="text-zinc-300/80 text-sm relative">
                        ソリッドステートドライブ
                        <div
                          class="absolute -bottom-2 left-0 w-0 h-px bg-[#35F1FF]/60 transition-all duration-300 group-hover/item:w-full"
                        ></div>
                      </div>
                    </div>
                    <div class="group/item">
                      <div
                        class="text-[#35F1FF] text-xl font-bold mb-4 group-hover/item:scale-105 transition-all duration-300"
                      >
                        メモリーカード
                      </div>
                      <div class="text-zinc-300/80 text-sm relative">
                        各種規格対応
                        <div
                          class="absolute -bottom-2 left-0 w-0 h-px bg-[#35F1FF]/60 transition-all duration-300 group-hover/item:w-full"
                        ></div>
                      </div>
                    </div>
                    <div class="group/item">
                      <div
                        class="text-[#35F1FF] text-xl font-bold mb-4 group-hover/item:scale-105 transition-all duration-300"
                      >
                        メモリーモジュール
                      </div>
                      <div class="text-zinc-300/80 text-sm relative">
                        高性能・高信頼性
                        <div
                          class="absolute -bottom-2 left-0 w-0 h-px bg-[#35F1FF]/60 transition-all duration-300 group-hover/item:w-full"
                        ></div>
                      </div>
                    </div>
                    <div class="group/item">
                      <div
                        class="text-[#35F1FF] text-xl font-bold mb-4 group-hover/item:scale-105 transition-all duration-300"
                      >
                        アクセサリー
                      </div>
                      <div class="text-zinc-300/80 text-sm relative">
                        関連製品開発
                        <div
                          class="absolute -bottom-2 left-0 w-0 h-px bg-[#35F1FF]/60 transition-all duration-300 group-hover/item:w-full"
                        ></div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>

              <!-- ストレージソリューションの提供 -->
              <div class="relative group">
                <div
                  class="absolute -left-8 top-0 w-px h-full bg-[#35F1FF]/60 transition-all duration-300 group-hover:h-[calc(100%+2rem)] group-hover:-top-4"
                ></div>
                <div class="pl-12">
                  <div class="flex items-center space-x-6 mb-12">
                    <div
                      class="text-[#35F1FF] text-3xl font-bold tracking-tight"
                    >
                      02
                    </div>
                    <h3 class="text-white text-2xl font-bold tracking-wide">
                      ストレージソリューションの提供
                    </h3>
                  </div>
                  <p
                    class="text-zinc-300/80 text-sm leading-relaxed mb-16 max-w-2xl"
                  >
                    個人ユーザーから法人・各種業界まで、多様なニーズに応じた高性能かつカスタマイズ可能なストレージソリューションを提供しています。
                  </p>
                  <div class="grid grid-cols-1 md:grid-cols-2 gap-16">
                    <div class="group/item">
                      <h4
                        class="text-[#35F1FF] text-lg font-bold mb-8 relative inline-block tracking-wide"
                      >
                        コンシューマー向け
                        <div
                          class="absolute -bottom-2 left-0 w-0 h-px bg-[#35F1FF]/60 transition-all duration-300 group-hover/item:w-full"
                        ></div>
                      </h4>
                      <div class="space-y-8">
                        <div class="flex items-center space-x-4 group/list">
                          <div
                            class="w-1.5 h-1.5 bg-[#35F1FF]/60 rounded-full transition-transform duration-300 group-hover/list:scale-125"
                          ></div>
                          <span class="text-zinc-300/80 text-sm"
                            >個人ユーザー向け製品</span
                          >
                        </div>
                        <div class="flex items-center space-x-4 group/list">
                          <div
                            class="w-1.5 h-1.5 bg-[#35F1FF]/60 rounded-full transition-transform duration-300 group-hover/list:scale-125"
                          ></div>
                          <span class="text-zinc-300/80 text-sm"
                            >ゲーミング向けソリューション</span
                          >
                        </div>
                        <div class="flex items-center space-x-4 group/list">
                          <div
                            class="w-1.5 h-1.5 bg-[#35F1FF]/60 rounded-full transition-transform duration-300 group-hover/list:scale-125"
                          ></div>
                          <span class="text-zinc-300/80 text-sm"
                            >モバイル向けストレージ</span
                          >
                        </div>
                      </div>
                    </div>
                    <div class="group/item">
                      <h4
                        class="text-[#35F1FF] text-lg font-bold mb-8 relative inline-block tracking-wide"
                      >
                        産業用
                        <div
                          class="absolute -bottom-2 left-0 w-0 h-px bg-[#35F1FF]/60 transition-all duration-300 group-hover/item:w-full"
                        ></div>
                      </h4>
                      <div class="space-y-8">
                        <div class="flex items-center space-x-4 group/list">
                          <div
                            class="w-1.5 h-1.5 bg-[#35F1FF]/60 rounded-full transition-transform duration-300 group-hover/list:scale-125"
                          ></div>
                          <span class="text-zinc-300/80 text-sm"
                            >企業向けストレージ</span
                          >
                        </div>
                        <div class="flex items-center space-x-4 group/list">
                          <div
                            class="w-1.5 h-1.5 bg-[#35F1FF]/60 rounded-full transition-transform duration-300 group-hover/list:scale-125"
                          ></div>
                          <span class="text-zinc-300/80 text-sm"
                            >カスタマイズ可能なソリューション</span
                          >
                        </div>
                        <div class="flex items-center space-x-4 group/list">
                          <div
                            class="w-1.5 h-1.5 bg-[#35F1FF]/60 rounded-full transition-transform duration-300 group-hover/list:scale-125"
                          ></div>
                          <span class="text-zinc-300/80 text-sm"
                            >業界特化型ソリューション</span
                          >
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>

              <!-- 技術サポートと品質管理 -->
              <div class="relative group">
                <div
                  class="absolute -left-8 top-0 w-px h-full bg-[#35F1FF]/60 transition-all duration-300 group-hover:h-[calc(100%+2rem)] group-hover:-top-4"
                ></div>
                <div class="pl-12">
                  <div class="flex items-center space-x-6 mb-12">
                    <div
                      class="text-[#35F1FF] text-3xl font-bold tracking-tight"
                    >
                      03
                    </div>
                    <h3 class="text-white text-2xl font-bold tracking-wide">
                      技術サポートと品質管理
                    </h3>
                  </div>
                  <p
                    class="text-zinc-300/80 text-sm leading-relaxed mb-16 max-w-2xl"
                  >
                    専門的な技術サポートやコンサルティング、充実したアフターサービスを通じて、長期的な信頼関係の構築を目指しています。
                  </p>
                  <div class="grid grid-cols-1 md:grid-cols-2 gap-16">
                    <div class="group/item">
                      <div
                        class="text-[#35F1FF] text-xl font-bold mb-8 relative inline-block tracking-wide"
                      >
                        技術サポート
                        <div
                          class="absolute -bottom-2 left-0 w-0 h-px bg-[#35F1FF]/60 transition-all duration-300 group-hover/item:w-full"
                        ></div>
                      </div>
                      <div class="space-y-8">
                        <div class="flex items-center space-x-4 group/list">
                          <div
                            class="w-1.5 h-1.5 bg-[#35F1FF]/60 rounded-full transition-transform duration-300 group-hover/list:scale-125"
                          ></div>
                          <span class="text-zinc-300/80 text-sm"
                            >専門的な技術相談</span
                          >
                        </div>
                        <div class="flex items-center space-x-4 group/list">
                          <div
                            class="w-1.5 h-1.5 bg-[#35F1FF]/60 rounded-full transition-transform duration-300 group-hover/list:scale-125"
                          ></div>
                          <span class="text-zinc-300/80 text-sm"
                            >最適なソリューション提案</span
                          >
                        </div>
                        <div class="flex items-center space-x-4 group/list">
                          <div
                            class="w-1.5 h-1.5 bg-[#35F1FF]/60 rounded-full transition-transform duration-300 group-hover/list:scale-125"
                          ></div>
                          <span class="text-zinc-300/80 text-sm"
                            >技術トレーニング</span
                          >
                        </div>
                      </div>
                    </div>
                    <div class="group/item">
                      <div
                        class="text-[#35F1FF] text-xl font-bold mb-8 relative inline-block tracking-wide"
                      >
                        品質管理
                        <div
                          class="absolute -bottom-2 left-0 w-0 h-px bg-[#35F1FF]/60 transition-all duration-300 group-hover/item:w-full"
                        ></div>
                      </div>
                      <div class="space-y-8">
                        <div class="flex items-center space-x-4 group/list">
                          <div
                            class="w-1.5 h-1.5 bg-[#35F1FF]/60 rounded-full transition-transform duration-300 group-hover/list:scale-125"
                          ></div>
                          <span class="text-zinc-300/80 text-sm"
                            >厳格な品質チェック</span
                          >
                        </div>
                        <div class="flex items-center space-x-4 group/list">
                          <div
                            class="w-1.5 h-1.5 bg-[#35F1FF]/60 rounded-full transition-transform duration-300 group-hover/list:scale-125"
                          ></div>
                          <span class="text-zinc-300/80 text-sm"
                            >アフターサービス</span
                          >
                        </div>
                        <div class="flex items-center space-x-4 group/list">
                          <div
                            class="w-1.5 h-1.5 bg-[#35F1FF]/60 rounded-full transition-transform duration-300 group-hover/list:scale-125"
                          ></div>
                          <span class="text-zinc-300/80 text-sm"
                            >品質保証体制</span
                          >
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>

              <!-- 革新的な研究開発と品質管理 -->
              <div class="relative group">
                <div
                  class="absolute -left-8 top-0 w-px h-full bg-[#35F1FF]/60 transition-all duration-300 group-hover:h-[calc(100%+2rem)] group-hover:-top-4"
                ></div>
                <div class="pl-12">
                  <div class="flex items-center space-x-6 mb-12">
                    <div
                      class="text-[#35F1FF] text-3xl font-bold tracking-tight"
                    >
                      04
                    </div>
                    <h3 class="text-white text-2xl font-bold tracking-wide">
                      革新的な研究開発と品質管理
                    </h3>
                  </div>
                  <p class="text-zinc-300/80 text-sm leading-relaxed max-w-2xl">
                    継続的な研究開発への投資を通じて技術革新を推進し、同時に厳格な品質管理体制を整備することで、製品の安定性と信頼性を確保しています。
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 経営理念 -->
        <div
          id="philosophy"
          class="section-block w-full bg-gradient-to-b from-emerald-900/60 via-emerald-800/40 to-emerald-900/60 py-40"
          ref="philosophyRef"
        >
          <div class="max-w-screen-2xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="text-center mb-32 animate-fade-in">
              <h2
                class="section-title text-emerald-400 text-sm font-bold mb-4 tracking-[0.2em] animate-slide-in-left"
              >
                経営理念
              </h2>
              <h1
                class="text-zinc-300 text-3xl font-bold mb-6 tracking-wider animate-slide-in-right"
              >
                Our Philosophy
              </h1>
              <div
                class="w-16 h-px bg-emerald-400/60 mx-auto animate-line-expand"
              ></div>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-3 gap-24">
              <div class="relative">
                <div
                  class="absolute -left-4 top-0 w-px h-full bg-[#35F1FF]/60"
                ></div>
                <div class="pl-8">
                  <h3 class="text-white text-xl font-bold mb-6 tracking-wide">
                    誠実
                  </h3>
                  <p class="text-zinc-300/80 text-sm leading-relaxed">
                    お客様との信頼関係を最重視し、誠実な対応を心がけています。透明性のある経営と公正な取引を徹底しています。
                  </p>
                </div>
              </div>
              <div class="relative">
                <div
                  class="absolute -left-4 top-0 w-px h-full bg-[#35F1FF]/60"
                ></div>
                <div class="pl-8">
                  <h3 class="text-white text-xl font-bold mb-6 tracking-wide">
                    革新
                  </h3>
                  <p class="text-zinc-300/80 text-sm leading-relaxed">
                    常に最新技術の研究開発に取り組み、革新的な製品の提供を目指しています。技術の進歩に柔軟に対応し、新しい価値を創造します。
                  </p>
                </div>
              </div>
              <div class="relative">
                <div
                  class="absolute -left-4 top-0 w-px h-full bg-[#35F1FF]/60"
                ></div>
                <div class="pl-8">
                  <h3 class="text-white text-xl font-bold mb-6 tracking-wide">
                    共栄
                  </h3>
                  <p class="text-zinc-300/80 text-sm leading-relaxed">
                    お客様とともに成長し、持続的なパートナーシップを築くことを目指しています。相互理解と協力により、共に発展していきます。
                  </p>
                </div>
              </div>
            </div>

            <div class="mt-32 text-center">
              <p
                class="text-zinc-300/80 text-sm leading-relaxed max-w-3xl mx-auto"
              >
                Hanyeは、「誠実・革新・共栄」を経営理念として掲げ、絶え間ない技術革新と徹底した品質管理により、信頼性の高いストレージ製品とソリューションをお客様に提供しています。
              </p>
              <p
                class="text-zinc-300/80 text-sm leading-relaxed max-w-3xl mx-auto mt-8"
              >
                私たちは常に顧客志向を貫き、ユーザーの多様なニーズに応えながら、製品性能とサービス価値の継続的な向上に取り組んでいます。お客様とともに成長し、持続的なパートナーシップを築くことを目指しています。
              </p>
            </div>
          </div>
        </div>

        <!-- 会社情報 -->
        <div
          id="company-info"
          class="section-block w-full bg-gradient-to-b from-rose-900/60 via-rose-800/40 to-rose-900/60 py-48"
          ref="companyInfoRef"
        >
          <div class="max-w-screen-2xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="text-center mb-24 animate-fade-in">
              <h2
                class="section-title text-rose-400 text-sm font-bold mb-4 tracking-[0.2em] animate-slide-in-left"
              >
                会社情報
              </h2>
              <h1
                class="text-zinc-300 text-3xl font-bold mb-6 tracking-wider animate-slide-in-right"
              >
                Company Information
              </h1>
              <div
                class="w-16 h-px bg-rose-400/60 mx-auto animate-line-expand"
              ></div>
            </div>

            <div class="max-w-3xl mx-auto">
              <div class="grid grid-cols-1 md:grid-cols-2 gap-16">
                <div class="space-y-10">
                  <div class="flex items-start">
                    <span
                      class="text-[#35F1FF] w-32 flex-shrink-0 tracking-wide text-sm"
                      >会社名</span
                    >
                    <div class="text-zinc-300">
                      <div>Hanye</div>
                      <div class="text-xs text-zinc-400">
                        Hanye Technology Co., Ltd.
                      </div>
                    </div>
                  </div>
                  <div class="flex items-start">
                    <span
                      class="text-[#35F1FF] w-32 flex-shrink-0 tracking-wide text-sm"
                      >設立</span
                    >
                    <span class="text-zinc-300">2003年</span>
                  </div>
                  <div class="flex items-start">
                    <span
                      class="text-[#35F1FF] w-32 flex-shrink-0 tracking-wide text-sm"
                      >代表取締役</span
                    >
                    <span class="text-zinc-300">ZHENG XIAO DONG</span>
                  </div>
                  <div class="flex items-start">
                    <span
                      class="text-[#35F1FF] w-32 flex-shrink-0 tracking-wide text-sm"
                      >従業員数</span
                    >
                    <span class="text-zinc-300">30人</span>
                  </div>
                </div>
                <div class="space-y-10">
                  <div class="flex items-start">
                    <span
                      class="text-[#35F1FF] w-32 flex-shrink-0 tracking-wide text-sm"
                      >所在地</span
                    >
                    <div class="text-zinc-300">
                      <div>中国・瀋陽</div>
                      <div class="text-xs text-zinc-400">
                        803, NO.6, AiTe, 90-6# SanHao Street,<br />
                        Heping District, ShenYang, China
                      </div>
                    </div>
                  </div>
                  <div class="flex items-start">
                    <span
                      class="text-[#35F1FF] w-32 flex-shrink-0 tracking-wide text-sm"
                      >事業内容</span
                    >
                    <span class="text-zinc-300"
                      >ストレージ製品の開発・製造・販売</span
                    >
                  </div>
                  <div class="flex items-start">
                    <span
                      class="text-[#35F1FF] w-32 flex-shrink-0 tracking-wide text-sm"
                      >電話番号</span
                    >
                    <span class="text-zinc-300">{{ companyInfoData.tel }}</span>
                  </div>
                  <div class="flex items-start">
                    <span
                      class="text-[#35F1FF] w-32 flex-shrink-0 tracking-wide text-sm"
                      >メール</span
                    >
                    <span class="text-zinc-300">{{
                      companyInfoData.email
                    }}</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 产品咨询 -->
        <div id="contact" ref="contactRef" class="max-w-full h-[240px] md:h-[480px] bg-black/80 md:block">
          <div class="h-full relative">
            <div
              class="absolute top-0 left-0 w-full h-full flex flex-col gap-4 md:gap-6 items-center justify-center z-10 px-4"
            >
              <h1
                class="text-center text-white font-normal text-lg sm:text-xl md:text-3xl"
              >
                {{ t("products.consultation") }}
              </h1>
              <nuxt-link
                :to="`${homepagePath}/contact`"
                class="w-28 h-9 md:w-40 md:h-11 bg-zinc-300/10 rounded-lg outline outline-1 flex items-center justify-center gap-2 outline-white/20 backdrop-blur-[10px] cursor-pointer hover:bg-zinc-300/20 transition-colors duration-200"
              >
                <span class="text-sm md:text-base font-normal">{{
                  t("products.consultation_button")
                }}</span>
                <i class="icon-arrow-right text-xs md:text-sm font-normal"></i>
              </nuxt-link>
            </div>
            <img
              v-if="isMobile"
              :src="videoWebp"
              alt="video"
              class="w-full h-full object-cover opacity-20"
            />
            <video
              v-else
              :src="videoSrc"
              autoplay
              muted
              loop
              :poster="videoWebp"
              class="w-full h-full object-cover opacity-20"
            ></video>
          </div>
        </div>
      </div>
    </ErrorBoundary>
  </div>
</template>

<script setup lang="ts">
/**
 * 公司简介页面
 * 展示公司基本信息、理念等
 */
 import { useBreakpoints, breakpointsTailwind } from "@vueuse/core";
import { useErrorHandler } from "~/composables/useErrorHandler";
import { useI18n } from "vue-i18n";
const { t, locale } = useI18n();
// 是否移动端
const breakpoints = useBreakpoints(breakpointsTailwind);
const isMobile = breakpoints.smaller("md");

import video from "@/assets/videos/video.mp4";
import videoWebp from "@/assets/videos/video.webp";
const videoSrc = ref(video);
// 公司信息接口定义
interface CompanyInfo {
  email: string;
  tel: string;
  fax: string;
}

const homepagePath = computed(() => {
  return locale.value === "zh" ? "" : `/${locale.value}`;
});

const { error, isLoading, wrapAsync } = useErrorHandler();
const companyInfoData = ref<CompanyInfo>({
  email: "hanye@hanye.cn",
  tel: "+86-024-83990696",
  fax: "+86-024-83990696",
});

// 滚动相关
const scrollY = ref(0);
const isVisible = ref(false);
const companyProfileRef = ref<HTMLElement | null>(null);
const businessContentRef = ref<HTMLElement | null>(null);
const philosophyRef = ref<HTMLElement | null>(null);
const companyInfoRef = ref<HTMLElement | null>(null);
const contactRef = ref<HTMLElement | null>(null);

// 定义区块信息
const sections = [
  { id: "company-profile", name: t('about.full.nav.companyProfile') },
  { id: "business-content", name: t('about.full.nav.businessContent') },
  { id: "philosophy", name: t('about.full.nav.philosophy')},
  { id: "company-info", name: t('about.full.nav.companyInfo')},
  { id: "contact", name: t('about.full.nav.contact') },
];

// 当前激活的区块
const currentSection = ref("");

// 滚动到指定区块
const scrollToSection = (id: string) => {
  const element = document.getElementById(id);
  if (element) {
    element.scrollIntoView({ behavior: "smooth" });
  }
};

// 监听滚动
onMounted(() => {
  window.addEventListener("scroll", handleScroll);
  handleScroll(); // 初始化检查
});

onUnmounted(() => {
  window.removeEventListener("scroll", handleScroll);
});

// 处理滚动
const handleScroll = () => {
  scrollY.value = window.scrollY;

  // 检查元素是否在视口中
  const checkVisibility = (el: HTMLElement | null) => {
    if (!el) return false;
    const rect = el.getBoundingClientRect();
    const windowHeight = window.innerHeight;
    return rect.top <= windowHeight * 0.8;
  };

  // 更新可见性状态
  if (companyProfileRef.value) {
    companyProfileRef.value.classList.toggle(
      "animate-in",
      checkVisibility(companyProfileRef.value)
    );
    if (checkVisibility(companyProfileRef.value)) {
      currentSection.value = "company-profile";
    }
  }
  if (businessContentRef.value) {
    businessContentRef.value.classList.toggle(
      "animate-in",
      checkVisibility(businessContentRef.value)
    );
    if (checkVisibility(businessContentRef.value)) {
      currentSection.value = "business-content";
    }
  }
  if (philosophyRef.value) {
    philosophyRef.value.classList.toggle(
      "animate-in",
      checkVisibility(philosophyRef.value)
    );
    if (checkVisibility(philosophyRef.value)) {
      currentSection.value = "philosophy";
    }
  }
  if (companyInfoRef.value) {
    companyInfoRef.value.classList.toggle(
      "animate-in",
      checkVisibility(companyInfoRef.value)
    );
    if (checkVisibility(companyInfoRef.value)) {
      currentSection.value = "company-info";
    }
  }
  if (contactRef.value) {
    contactRef.value.classList.toggle(
      "animate-in",
      checkVisibility(contactRef.value)
    );
    if (checkVisibility(contactRef.value)) {
      currentSection.value = "contact";
    }
  }
};

// SEO优化
useHead({
  title: `${t("about.title")} - Hanye`,
  meta: [
    {
      name: "description",
      content: t("about.description"),
    },
    {
      name: "keywords",
      content: t("about.keywords"),
    },
  ],
});
</script>

<style scoped>
/* 基础动画类 */
.section-block {
  opacity: 0;
  transform: translateY(30px);
  transition: all 1s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
}

.animate-in {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

/* 优化动画效果 */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fade-in {
  opacity: 0;
  animation: fadeInUp 1s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.animate-fade-in-delay {
  opacity: 0;
  animation: fadeInUp 1s cubic-bezier(0.4, 0, 0.2, 1) 0.3s forwards;
}

@keyframes lineExpand {
  from {
    width: 0;
    opacity: 0;
  }
  to {
    width: 4rem;
    opacity: 1;
  }
}

.animate-line-expand {
  width: 0;
  opacity: 0;
  animation: lineExpand 1.2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.animate-slide-in-left {
  opacity: 0;
  animation: slideInLeft 1s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.animate-slide-in-right {
  opacity: 0;
  animation: slideInRight 1s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* 模块特定的样式 */
.section-block {
  position: relative;
  transition: all 0.5s ease;
}

.section-block::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    45deg,
    transparent,
    rgba(255, 255, 255, 0.03),
    transparent
  );
  opacity: 0;
  transition: opacity 0.5s ease;
  pointer-events: none;
}

.section-block:hover::before {
  opacity: 1;
}

/* 为每个模块添加特定的样式 */
#company-profile {
  background: linear-gradient(to bottom, rgba(53, 241, 255, 0.1), transparent);
  border-top: 1px solid rgba(53, 241, 255, 0.2);
  border-bottom: 1px solid rgba(53, 241, 255, 0.2);
}

#business-content {
  background: linear-gradient(to bottom, rgba(99, 102, 241, 0.1), transparent);
  border-top: 1px solid rgba(99, 102, 241, 0.1);
  border-bottom: 1px solid rgba(99, 102, 241, 0.1);
}

#philosophy {
  background: linear-gradient(to bottom, rgba(52, 211, 153, 0.1), transparent);
  border-top: 1px solid rgba(52, 211, 153, 0.1);
  border-bottom: 1px solid rgba(52, 211, 153, 0.1);
}

#company-info {
  background: linear-gradient(to bottom, rgba(251, 113, 133, 0.1), transparent);
  border-top: 1px solid rgba(251, 113, 133, 0.1);
  border-bottom: 1px solid rgba(251, 113, 133, 0.1);
}

#contact {
  background: linear-gradient(to bottom, rgba(251, 191, 36, 0.1), transparent);
  border-top: 1px solid rgba(251, 191, 36, 0.1);
  border-bottom: 1px solid rgba(251, 191, 36, 0.1);
}

/* 优化滚动条样式 */
::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.1);
}

::-webkit-scrollbar-thumb {
  background: rgba(53, 241, 255, 0.3);
  border-radius: 3px;
  transition: background 0.3s ease;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(53, 241, 255, 0.5);
}

/* 优化背景装饰 */
.bg-decoration {
  position: absolute;
  inset: 0;
  opacity: 0.05;
  pointer-events: none;
}

.bg-decoration-circle {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  transition: all 0.5s ease;
}

/* 添加模块分隔线 */
.section-block::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(
    to right,
    transparent,
    rgba(255, 255, 255, 0.1),
    transparent
  );
  opacity: 0.5;
}

/* 优化标题颜色 */
#company-profile h2 {
  color: #35f1ff;
}
#business-content h2 {
  color: #818cf8;
}
#philosophy h2 {
  color: #34d399;
}
#company-info h2 {
  color: #fb7185;
}
#contact h2 {
  color: #fbbf24;
}

/* 优化装饰线颜色 */
#company-profile .animate-line-expand {
  background: rgba(53, 241, 255, 0.6);
}
#business-content .animate-line-expand {
  background: rgba(99, 102, 241, 0.6);
}
#philosophy .animate-line-expand {
  background: rgba(52, 211, 153, 0.6);
}
#company-info .animate-line-expand {
  background: rgba(251, 113, 133, 0.6);
}
#contact .animate-line-expand {
  background: rgba(251, 191, 36, 0.6);
}

/* 锚点导航样式 */
.anchor-nav {
  position: fixed;
  right: 2rem;
  top: 50%;
  transform: translateY(-50%);
  z-index: 50;
}

.anchor-nav button {
  position: relative;
  display: flex;
  align-items: center;
  padding: 0.5rem;
  transition: all 0.3s ease;
}

.anchor-nav button::before {
  content: "";
  position: absolute;
  left: -0.5rem;
  width: 0;
  height: 1px;
  background-color: #35f1ff;
  transition: width 0.3s ease;
}

.anchor-nav button:hover::before {
  width: 0.5rem;
}

.anchor-nav button.active {
  opacity: 1;
}

.anchor-nav button.active::before {
  width: 0.5rem;
}

/* 响应式优化 */
@media (max-width: 640px) {
  .section-block {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }

  .section-title {
    font-size: 0.875rem;
  }

  .text-3xl {
    font-size: 1.5rem;
  }

  .text-2xl {
    font-size: 1.25rem;
  }

  .text-xl {
    font-size: 1.125rem;
  }

  .text-lg {
    font-size: 1rem;
  }

  .text-base {
    font-size: 0.875rem;
  }

  .text-sm {
    font-size: 0.75rem;
  }

  .gap-24 {
    gap: 2rem;
  }

  .gap-16 {
    gap: 1.5rem;
  }

  .gap-12 {
    gap: 1rem;
  }

  .mb-32 {
    margin-bottom: 2rem;
  }

  .mb-24 {
    margin-bottom: 1.5rem;
  }

  .mb-16 {
    margin-bottom: 1rem;
  }

  .mb-12 {
    margin-bottom: 0.75rem;
  }

  .mb-8 {
    margin-bottom: 0.5rem;
  }

  .mb-6 {
    margin-bottom: 0.375rem;
  }

  .mb-4 {
    margin-bottom: 0.25rem;
  }

  .space-y-24 {
    gap: 2rem;
  }

  .space-y-16 {
    gap: 1.5rem;
  }

  .space-y-12 {
    gap: 1rem;
  }

  .space-y-8 {
    gap: 0.75rem;
  }

  .space-y-6 {
    gap: 0.5rem;
  }

  .space-y-4 {
    gap: 0.375rem;
  }

  .pl-12 {
    padding-left: 1rem;
  }

  .pl-8 {
    padding-left: 0.75rem;
  }

  .px-4 {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .py-40 {
    padding-top: 2rem;
    padding-bottom: 2rem;
  }

  .py-48 {
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
  }
}

/* 优化移动端导航 */
@media (max-width: 1024px) {
  .anchor-nav {
    display: none;
  }
}

/* 优化移动端间距 */
@media (max-width: 768px) {
  .max-w-2xl {
    max-width: 100%;
  }

  .max-w-3xl {
    max-width: 100%;
  }

  .max-w-4xl {
    max-width: 100%;
  }

  .grid-cols-2 {
    grid-template-columns: 1fr;
  }

  .grid-cols-3 {
    grid-template-columns: 1fr;
  }

  .grid-cols-4 {
    grid-template-columns: 1fr 1fr;
  }
}

/* 优化移动端动画 */
@media (max-width: 640px) {
  .animate-slide-in-left,
  .animate-slide-in-right {
    animation-duration: 0.8s;
  }

  .animate-fade-in,
  .animate-fade-in-delay {
    animation-duration: 0.8s;
  }

  .animate-line-expand {
    animation-duration: 1s;
  }
}
</style>