<script setup>
import { ref, onMounted, onUnmounted } from "vue";
import { useRouter } from "vue-router";
import { LISTENING_AUDIO_URL } from "@/config/index.js";

const router = useRouter();

// 所有功能数据
const allFeatures = ref([
  {
    id: 1,
    title: "听力考试音频生成",
    desc: "输入听力文本或上传Word，一键调用 AI 合成标准英语考试音频",
    class: "card-1",
    icon: "audio",
    url: LISTENING_AUDIO_URL,
  },
  {
    id: 2,
    title: "口语对话练习",
    desc: "五大场景 AI 外教实时对话，每条回复自动语音朗读",
    class: "card-2",
    icon: "mic",
    route: "/speaking",
  },
  {
    id: 3,
    title: "作文原图批改",
    desc: "上传手写英语作文图片，AI 自动标注语法、拼写及表达问题",
    class: "card-3",
    icon: "edit",
    route: "/essay-correction",
  },
  {
    id: 4,
    title: "英语试题AI分析",
    desc: "五维度全面拆解每道英语题目，流式输出详细解析",
    class: "card-4",
    icon: "analytics",
    route: "/exam-analysis",
  },
  {
    id: 5,
    title: "单词听写",
    desc: "自适应发音报词，智能追踪拼写薄弱点",
    class: "card-5",
    icon: "spell",
    route: "/spell-practice",
  },
  {
    id: 6,
    title: "英语发音",
    desc: "36 种音色自由选择，一键合成标准发音",
    class: "card-6",
    icon: "speaker",
    route: "/pronunciation",
  },
  {
    id: 7,
    title: "AI引导解题",
    desc: "对话式引导思考，卡片式展示解题步骤",
    class: "card-7",
    icon: "puzzle",
    route: "/problem-solving",
  },
  {
    id: 8,
    title: "AI试题生成",
    desc: "自定义难度、数量和知识点，快速创建题库",
    class: "card-8",
    icon: "document",
    route: "/question-generator",
  },
  {
    id: 9,
    title: "题目变式生成",
    desc: "AI 深度分析生成同类变式题，快速扩展题库",
    class: "card-9",
    icon: "variant",
    route: "/question-variant",
  },
  {
    id: 10,
    title: "音频转文字",
    desc: "支持中英日多语种，适用于会议记录、采访整理",
    class: "card-10",
    icon: "file-audio",
    route: "/audio-to-text",
  },
  {
    id: 11,
    title: "听读评测",
    desc: "AI智能评测发音准确度，提供错误标注和改进建议",
    class: "card-12",
    icon: "mic",
    route: "/speaking-evaluation",
  },
]);

// 统计数据
const stats = ref([
  { value: "11+", label: "AI 学习工具" },
  { value: "100万+", label: "服务学习者" },
  { value: "36", label: "发音音色" },
  { value: "24/7", label: "AI 在线" },
]);

// 垂直翻页当前页码
const currentPage = ref(0);
const totalPages = 2;

// 横向滚动当前页码
const currentHorizontalPage = ref(0);
const totalHorizontalPages = 2; // 每页6个卡片，11个功能需要2页

// 滚动到指定垂直页面
const scrollToPage = (pageIndex) => {
  if (pageIndex < 0 || pageIndex >= totalPages) return;
  const container = document.querySelector(".snap-container");
  if (container) {
    container.scrollTo({
      top: pageIndex * window.innerHeight,
      behavior: "smooth",
    });
  }
};

// 滚动到功能区域（第二页）
const scrollToFeatures = () => {
  scrollToPage(1);
};

// 横向滚动到指定页
const scrollToHorizontalPage = (pageIndex) => {
  if (pageIndex < 0 || pageIndex >= totalHorizontalPages) return;
  const container = document.querySelector(".horizontal-scroll-container");
  if (container) {
    const pageWidth = container.clientWidth;
    container.scrollTo({
      left: pageIndex * pageWidth,
      behavior: "smooth",
    });
    currentHorizontalPage.value = pageIndex;
  }
};

// 处理功能卡片点击
const handleCardClick = (feature) => {
  if (feature.url) {
    window.open(feature.url, "_blank");
  } else if (feature.route) {
    router.push(feature.route);
  }
};

// 鼠标跟随光效
const handleMouseMove = (e) => {
  const cards = document.querySelectorAll(".feature-card");
  for (const card of cards) {
    const rect = card.getBoundingClientRect();
    const x = e.clientX - rect.left;
    const y = e.clientY - rect.top;
    card.style.setProperty("--mouse-x", `${x}px`);
    card.style.setProperty("--mouse-y", `${y}px`);
  }
};

// 监听垂直滚动更新当前页码
const handleScroll = () => {
  const container = document.querySelector(".snap-container");
  if (container) {
    const scrollTop = container.scrollTop;
    const pageHeight = window.innerHeight;
    currentPage.value = Math.round(scrollTop / pageHeight);
  }
};

// 监听横向滚动更新当前页码
const handleHorizontalScroll = () => {
  const container = document.querySelector(".horizontal-scroll-container");
  if (container) {
    const scrollLeft = container.scrollLeft;
    const pageWidth = container.clientWidth;
    currentHorizontalPage.value = Math.round(scrollLeft / pageWidth);
  }
};

// 键盘导航
const handleKeyDown = (e) => {
  if (currentPage.value === 1) {
    // 在第二页时，左右键控制横向滚动
    if (e.key === "ArrowRight") {
      e.preventDefault();
      scrollToHorizontalPage(currentHorizontalPage.value + 1);
      return;
    } else if (e.key === "ArrowLeft") {
      e.preventDefault();
      scrollToHorizontalPage(currentHorizontalPage.value - 1);
      return;
    }
  }

  if (e.key === "ArrowDown" || e.key === "PageDown") {
    e.preventDefault();
    scrollToPage(currentPage.value + 1);
  } else if (e.key === "ArrowUp" || e.key === "PageUp") {
    e.preventDefault();
    scrollToPage(currentPage.value - 1);
  }
};

// 垂直滚轮翻页控制
let wheelTimeout = null;
const handleWheel = (e) => {
  // 如果在第二页且横向滚动容器存在，检查是否在容器内
  if (currentPage.value === 1) {
    const horizontalContainer = document.querySelector(".horizontal-scroll-container");
    if (horizontalContainer) {
      // 让横向滚动容器自己处理滚轮事件
      return;
    }
  }

  e.preventDefault();
  if (wheelTimeout) return;

  wheelTimeout = setTimeout(() => {
    wheelTimeout = null;
  }, 800);

  if (e.deltaY > 0) {
    scrollToPage(currentPage.value + 1);
  } else if (e.deltaY < 0) {
    scrollToPage(currentPage.value - 1);
  }
};

// 横向滚轮处理
const handleHorizontalWheel = (e) => {
  e.preventDefault();
  if (e.deltaY > 0 || e.deltaX > 0) {
    scrollToHorizontalPage(currentHorizontalPage.value + 1);
  } else if (e.deltaY < 0 || e.deltaX < 0) {
    scrollToHorizontalPage(currentHorizontalPage.value - 1);
  }
};

// 触摸滑动支持
let touchStartX = 0;
let touchStartY = 0;
let touchStartTime = 0;
let isTouching = false;

const handleTouchStart = (e) => {
  touchStartX = e.touches[0].clientX;
  touchStartY = e.touches[0].clientY;
  touchStartTime = Date.now();
  isTouching = true;
};

const handleTouchMove = (e) => {
  if (!isTouching) return;
  // 阻止默认行为防止页面滚动冲突
  const touchX = e.touches[0].clientX;
  const touchY = e.touches[0].clientY;
  const deltaX = Math.abs(touchX - touchStartX);
  const deltaY = Math.abs(touchY - touchStartY);

  // 在功能区域（第2页）优先处理水平滑动
  if (currentPage.value === 1 && deltaX > deltaY && deltaX > 10) {
    e.preventDefault();
  }
};

const handleTouchEnd = (e) => {
  if (!isTouching) return;
  isTouching = false;

  const touchEndX = e.changedTouches[0].clientX;
  const touchEndY = e.changedTouches[0].clientY;
  const touchEndTime = Date.now();

  const deltaX = touchStartX - touchEndX;
  const deltaY = touchStartY - touchEndY;
  const deltaTime = touchEndTime - touchStartTime;

  // 快速滑动检测（250ms内）
  const isQuickSwipe = deltaTime < 250;
  const threshold = isQuickSwipe ? 25 : 60;

  // 判断是水平滑动还是垂直滑动
  if (Math.abs(deltaX) > Math.abs(deltaY)) {
    // 水平滑动 - 控制横向滚动
    if (Math.abs(deltaX) > threshold) {
      if (deltaX > 0) {
        scrollToHorizontalPage(currentHorizontalPage.value + 1);
      } else {
        scrollToHorizontalPage(currentHorizontalPage.value - 1);
      }
    }
  } else {
    // 垂直滑动 - 控制页面翻页（仅在非横向滚动区域）
    if (Math.abs(deltaY) > threshold && currentPage.value !== 1) {
      if (deltaY > 0) {
        scrollToPage(currentPage.value + 1);
      } else {
        scrollToPage(currentPage.value - 1);
      }
    }
  }
};

// 横向滚动容器触摸处理
const handleHorizontalTouchStart = (e) => {
  touchStartX = e.touches[0].clientX;
  touchStartTime = Date.now();
};

const handleHorizontalTouchEnd = (e) => {
  const touchEndX = e.changedTouches[0].clientX;
  const deltaTime = Date.now() - touchStartTime;
  const deltaX = touchStartX - touchEndX;

  const isQuickSwipe = deltaTime < 300;
  const threshold = isQuickSwipe ? 30 : 60;

  if (Math.abs(deltaX) > threshold) {
    if (deltaX > 0) {
      scrollToHorizontalPage(currentHorizontalPage.value + 1);
    } else {
      scrollToHorizontalPage(currentHorizontalPage.value - 1);
    }
  }
};

onMounted(() => {
  const container = document.querySelector(".snap-container");
  if (container) {
    container.addEventListener("scroll", handleScroll);
    container.addEventListener("wheel", handleWheel, { passive: false });
  container.addEventListener("touchstart", handleTouchStart, { passive: true });
    container.addEventListener("touchmove", handleTouchMove, { passive: false });
    container.addEventListener("touchend", handleTouchEnd, { passive: true });
  }
  window.addEventListener("keydown", handleKeyDown);

  const page2 = document.querySelector(".page-2");
  if (page2) {
    page2.addEventListener("mousemove", handleMouseMove);
  }

  const horizontalContainer = document.querySelector(".horizontal-scroll-container");
  if (horizontalContainer) {
    horizontalContainer.addEventListener("scroll", handleHorizontalScroll);
    horizontalContainer.addEventListener("touchstart", handleHorizontalTouchStart, { passive: true });
    horizontalContainer.addEventListener("touchend", handleHorizontalTouchEnd, { passive: true });
  }
});

onUnmounted(() => {
  const container = document.querySelector(".snap-container");
  if (container) {
    container.removeEventListener("scroll", handleScroll);
    container.removeEventListener("wheel", handleWheel);
    container.removeEventListener("touchstart", handleTouchStart);
    container.removeEventListener("touchmove", handleTouchMove);
    container.removeEventListener("touchend", handleTouchEnd);
  }
  window.removeEventListener("keydown", handleKeyDown);

  const page2 = document.querySelector(".page-2");
  if (page2) {
    page2.removeEventListener("mousemove", handleMouseMove);
  }

  const horizontalContainer = document.querySelector(".horizontal-scroll-container");
  if (horizontalContainer) {
    horizontalContainer.removeEventListener("scroll", handleHorizontalScroll);
    horizontalContainer.removeEventListener("touchstart", handleHorizontalTouchStart);
    horizontalContainer.removeEventListener("touchend", handleHorizontalTouchEnd);
  }
});
</script>

<template>
  <div class="landing-wrapper">
    <!-- 背景 -->
    <div class="landing-bg">
      <div class="bg-gradient"></div>
      <div class="bg-grid"></div>
    </div>

    <!-- 导航栏 -->
    <nav class="landing-nav">
      <div class="nav-brand">
        <div class="brand-icon">
          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" d="M9.813 15.904L9 18.75l-.813-2.846a4.5 4.5 0 00-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 003.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 003.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 00-3.09 3.09zM18.259 8.715L18 9.75l-.259-1.035a3.375 3.375 0 00-2.455-2.456L14.25 6l1.036-.259a3.375 3.375 0 002.455-2.456L18 2.25l.259 1.035a3.375 3.375 0 002.456 2.456L21.75 6l-1.035.259a3.375 3.375 0 00-2.456 2.456zM16.894 20.567L16.5 21.75l-.394-1.183a2.25 2.25 0 00-1.423-1.423L13.5 18.75l1.183-.394a2.25 2.25 0 001.423-1.423l.394-1.183.394 1.183a2.25 2.25 0 001.423 1.423l1.183.394-1.183.394a2.25 2.25 0 00-1.423 1.423z" />
          </svg>
        </div>
        <span class="brand-text">AI English</span>
      </div>
    </nav>

    <!-- 翻页指示器 -->
    <div class="page-indicator">
      <div
        v-for="page in totalPages"
        :key="page"
        class="indicator-dot"
        :class="{ active: currentPage === page - 1 }"
        @click="scrollToPage(page - 1)"
      ></div>
    </div>

    <!-- 翻页滚动容器 -->
    <div class="snap-container">
      <!-- 第一页：Hero Section -->
      <section class="snap-page page-1">
        <div class="page-content">
          <div class="hero-badge">
            <span class="badge-dot"></span>
            全新 AI 驱动的英语学习平台
          </div>
          <h1 class="hero-title">
            让 AI 成为你的
            <span class="gradient-text">专属英语教练</span>
          </h1>
          <p class="hero-subtitle">
            11+ 智能学习工具，覆盖听说读写全场景。从口语对话到作文批改，<br>
            从试题分析到智能评测，全方位提升你的英语能力。
          </p>
          <div class="hero-cta">
            <button class="cta-button primary" @click="scrollToFeatures">
              开始探索
              <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
              </svg>
            </button>
          </div>

          <!-- 统计数据 -->
          <div class="hero-stats">
            <div v-for="stat in stats" :key="stat.label" class="stat-item">
              <div class="stat-value">{{ stat.value }}</div>
              <div class="stat-label">{{ stat.label }}</div>
            </div>
          </div>
        </div>

        <!-- 向下滚动提示 -->
        <div class="scroll-hint" @click="scrollToFeatures">
          <span>向下滚动</span>
          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
          </svg>
        </div>
      </section>

      <!-- 第二页：功能区域 -->
      <section class="snap-page page-2">
        <div class="page-content">
          <div class="section-header">
            <h2 class="section-title">全部功能</h2>
            <p class="section-subtitle">11+ AI 驱动的英语学习工具</p>
          </div>

          <!-- 横向滚动容器 -->
          <div class="horizontal-scroll-wrapper">
            <div
              class="horizontal-scroll-container"
              @wheel="handleHorizontalWheel"
            >
              <div class="horizontal-page">
                <div class="features-grid">
                  <div
                    v-for="feature in allFeatures.slice(0, 6)"
                    :key="feature.id"
                    @click="handleCardClick(feature)"
                    class="feature-card"
                    :class="feature.class"
                  >
                    <div class="card-content">
                      <div class="icon-wrapper">
                        <svg v-if="feature.icon === 'audio'" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                          <path stroke-linecap="round" stroke-linejoin="round" d="M12 21a9.004 9.004 0 0 0 8.716-6.747M12 21a9.004 9.004 0 0 1-8.716-6.747M12 21c2.485 0 4.5-4.03 4.5-9S14.485 3 12 3m0 18c-2.485 0-4.5-4.03-4.5-9S9.515 3 12 3m0 0a8.997 8.997 0 0 1 7.843 4.582M12 3a8.997 8.997 0 0 0-7.843 4.582m15.686 0A11.953 11.953 0 0 1 12 10.5c-2.998 0-5.74-1.1-7.843-2.918m15.686 0A8.959 8.959 0 0 1 21 12c0 .778-.099 1.533-.284 2.253m0 0A17.919 17.919 0 0 1 12 16.5c-3.162 0-6.133-.815-8.716-2.247m0 0A9.015 9.015 0 0 1 3 12c0-1.605.42-3.113 1.157-4.418" />
                        </svg>
                        <svg v-else-if="feature.icon === 'mic'" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                          <path stroke-linecap="round" stroke-linejoin="round" d="M12 18.75a6 6 0 0 0 6-6v-1.5m-6 7.5a6 6 0 0 1-6-6v-1.5m6 7.5v3.75m-3.75 0h7.5M12 15.75a3 3 0 0 1-3-3V4.5a3 3 0 1 1 6 0v8.25a3 3 0 0 1-3 3Z" />
                        </svg>
                        <svg v-else-if="feature.icon === 'edit'" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                          <path stroke-linecap="round" stroke-linejoin="round" d="m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L6.832 19.82a4.5 4.5 0 0 1-1.897 1.13l-2.685.8.8-2.685a4.5 4.5 0 0 1 1.13-1.897L16.863 4.487Zm0 0L19.5 7.125" />
                        </svg>
                        <svg v-else-if="feature.icon === 'analytics'" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                          <path stroke-linecap="round" stroke-linejoin="round" d="M3 13.125C3 12.504 3.504 12 4.125 12h2.25c.621 0 1.125.504 1.125 1.125v6.75C7.5 20.496 6.996 21 6.375 21h-2.25A1.125 1.125 0 0 1 3 19.875v-6.75ZM9.75 8.625c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125v11.25c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 0 1-1.125-1.125V8.625ZM16.5 4.125c0-.621.504-1.125 1.125-1.125h2.25C20.496 3 21 3.504 21 4.125v15.75c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 0 1-1.125-1.125V4.125Z" />
                        </svg>
                        <svg v-else-if="feature.icon === 'spell'" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                          <path stroke-linecap="round" stroke-linejoin="round" d="M12 6.042A8.967 8.967 0 0 0 6 3.75c-1.052 0-2.062.18-3 .512v14.25A8.987 8.987 0 0 1 6 18c2.305 0 4.408.867 6 2.292m0-14.25a8.966 8.966 0 0 1 6-2.292c1.052 0 2.062.18 3 .512v14.25A8.987 8.987 0 0 0 18 18a8.967 8.967 0 0 0-6 2.292m0-14.25v14.25" />
                        </svg>
                        <svg v-else-if="feature.icon === 'speaker'" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                          <path stroke-linecap="round" stroke-linejoin="round" d="M19.114 5.636a9 9 0 0 1 0 12.728M16.463 8.288a5.25 5.25 0 0 1 0 7.424M6.75 8.25l4.72-4.72a.75.75 0 0 1 1.28.53v15.88a.75.75 0 0 1-1.28.53l-4.72-4.72H4.51c-.88 0-1.704-.507-1.938-1.354A9.009 9.009 0 0 1 2.25 12c0-.83.112-1.633.322-2.396C2.806 8.756 3.63 8.25 4.51 8.25H6.75Z" />
                        </svg>
                      </div>
                      <h3 class="card-title">{{ feature.title }}</h3>
                      <p class="card-desc">{{ feature.desc }}</p>
                    </div>
                  </div>
                </div>
              </div>
              <div class="horizontal-page">
                <div class="features-grid">
                  <div
                    v-for="feature in allFeatures.slice(6, 11)"
                    :key="feature.id"
                    @click="handleCardClick(feature)"
                    class="feature-card"
                    :class="feature.class"
                  >
                    <div class="card-content">
                      <div class="icon-wrapper">
                        <svg v-if="feature.icon === 'puzzle'" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                          <path stroke-linecap="round" stroke-linejoin="round" d="M12 6v6h4.5m4.5 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
                        </svg>
                        <svg v-else-if="feature.icon === 'document'" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                          <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 0 0-3.375-3.375h-1.5A1.125 1.125 0 0 1 13.5 7.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H8.25m0 12.75h7.5m-7.5 3H12M10.5 2.25H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 0 0-9-9Z" />
                        </svg>
                        <svg v-else-if="feature.icon === 'variant'" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                          <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 17.25v3.375c0 .621-.504 1.125-1.125 1.125h-9.75a1.125 1.125 0 0 1-1.125-1.125V7.875c0-.621.504-1.125 1.125-1.125H6.75a9.06 9.06 0 0 1 1.5.124m7.5 10.376h3.375c.621 0 1.125-.504 1.125-1.125V11.25c0-4.46-3.243-8.161-7.5-8.876v9.004c0 .621-.504 1.125-1.125 1.125h-3.75c-.621 0-1.125.504-1.125 1.125v3.876c0 .621.504 1.125 1.125 1.125h3.75c.621 0 1.125-.504 1.125-1.125Z" />
                        </svg>
                        <svg v-else-if="feature.icon === 'file-audio'" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                          <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m0 12.75h7.5m-7.5 3H12M10.5 2.25H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z" />
                          <path stroke-linecap="round" stroke-linejoin="round" d="M11.25 12.75l2.25-1.5v4.5l-2.25-1.5v-1.5z" />
                        </svg>
                        <svg v-else-if="feature.icon === 'mic'" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                          <path stroke-linecap="round" stroke-linejoin="round" d="M12 18.75a6 6 0 0 0 6-6v-1.5m-6 7.5a6 6 0 0 1-6-6v-1.5m6 7.5v3.75m-3.75 0h7.5M12 15.75a3 3 0 0 1-3-3V4.5a3 3 0 1 1 6 0v8.25a3 3 0 0 1-3 3Z" />
                        </svg>
                      </div>
                      <h3 class="card-title">{{ feature.title }}</h3>
                      <p class="card-desc">{{ feature.desc }}</p>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <!-- 横向滚动指示器 -->
            <div class="horizontal-indicator">
              <div
                v-for="page in totalHorizontalPages"
                :key="page"
                class="h-indicator-dot"
                :class="{ active: currentHorizontalPage === page - 1 }"
                @click="scrollToHorizontalPage(page - 1)"
              ></div>
            </div>

            <!-- 横向滚动箭头 -->
            <button
              v-if="currentHorizontalPage > 0"
              class="scroll-arrow scroll-arrow-left"
              @click="scrollToHorizontalPage(currentHorizontalPage - 1)"
            >
              <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 19.5L8.25 12l7.5-7.5" />
              </svg>
            </button>
            <button
              v-if="currentHorizontalPage < totalHorizontalPages - 1"
              class="scroll-arrow scroll-arrow-right"
              @click="scrollToHorizontalPage(currentHorizontalPage + 1)"
            >
              <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" />
              </svg>
            </button>
          </div>
        </div>

        <!-- Footer -->
        <footer class="landing-footer">
          <p>AI 英语学习辅助平台 · 让学习更智能</p>
        </footer>
      </section>
    </div>
  </div>
</template>

<style scoped>
/* ========== 基础布局 ========== */
.landing-wrapper {
  height: 100vh;
  width: 100vw;
  position: fixed;
  top: 0;
  left: 0;
  color: #f8fafc;
  overflow: hidden;
}

/* ========== 翻页滚动容器 ========== */
.snap-container {
  height: 100vh;
  width: 100vw;
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
  scroll-behavior: smooth;
  position: relative;
  z-index: 1;
}

.snap-container::-webkit-scrollbar {
  display: none;
}

.snap-page {
  height: 100vh;
  width: 100vw;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}

.page-content {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
  box-sizing: border-box;
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* ========== 翻页指示器 ========== */
.page-indicator {
  position: fixed;
  right: 2rem;
  top: 50%;
  transform: translateY(-50%);
  z-index: 100;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.indicator-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  cursor: pointer;
  transition: all 0.3s ease;
  border: 2px solid transparent;
}

.indicator-dot:hover {
  background: rgba(255, 255, 255, 0.4);
}

.indicator-dot.active {
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  border-color: rgba(255, 255, 255, 0.3);
  transform: scale(1.2);
}

/* ========== 向下滚动提示 ========== */
.scroll-hint {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  color: #64748b;
  font-size: 0.875rem;
  cursor: pointer;
  animation: bounce 2s infinite;
  z-index: 10;
}

.scroll-hint svg {
  width: 24px;
  height: 24px;
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateX(-50%) translateY(0);
  }
  40% {
    transform: translateX(-50%) translateY(-10px);
  }
  60% {
    transform: translateX(-50%) translateY(-5px);
  }
}

/* ========== 背景 ========== */
.landing-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 0;
  overflow: hidden;
  background: #0f172a;
}

.bg-gradient {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background:
    radial-gradient(ellipse 80% 50% at 50% -20%, rgba(99, 102, 241, 0.15), transparent),
    radial-gradient(ellipse 60% 40% at 80% 50%, rgba(139, 92, 246, 0.1), transparent),
    radial-gradient(ellipse 50% 30% at 20% 80%, rgba(236, 72, 153, 0.08), transparent);
}

.bg-grid {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: linear-gradient(to bottom, transparent 0%, black 20%, black 80%, transparent 100%);
}

/* ========== 导航栏 ========== */
.landing-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  padding: 1rem 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(15, 23, 42, 0.8);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.nav-brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.brand-icon {
  width: 36px;
  height: 36px;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
}

.brand-icon svg {
  width: 22px;
  height: 22px;
}

.brand-text {
  font-size: 1.25rem;
  font-weight: 700;
  background: linear-gradient(135deg, #fff 0%, #a5b4fc 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ========== Hero Section ========== */
.page-1 .page-content {
  justify-content: center;
  align-items: center;
  text-align: center;
  padding-top: 5rem;
  padding-bottom: 6rem;
}

/* Hero 区域移动端优化 */
@media (max-width: 640px) {
  .page-1 .page-content {
    padding-top: 4rem;
    padding-bottom: 4rem;
    justify-content: flex-start;
  }

  .hero-badge {
    font-size: 0.75rem;
    padding: 0.375rem 0.75rem;
    margin-bottom: 1.5rem;
  }

  .hero-title {
    font-size: clamp(1.75rem, 8vw, 2.5rem);
    line-height: 1.2;
    margin-bottom: 1rem;
  }

  .hero-subtitle {
    font-size: 0.875rem;
    line-height: 1.6;
    margin-bottom: 1.5rem;
    padding: 0 0.5rem;
  }

  .hero-subtitle br {
    display: none;
  }

  .hero-cta {
    margin-bottom: 2rem;
  }

  .cta-button {
    padding: 0.875rem 1.5rem;
    font-size: 0.9375rem;
  }

  .hero-stats {
    gap: 1rem;
    padding: 1rem 1.25rem;
    border-radius: 16px;
  }

  .stat-value {
    font-size: 1.25rem;
  }

  .stat-label {
    font-size: 0.75rem;
  }
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  background: rgba(99, 102, 241, 0.1);
  border: 1px solid rgba(99, 102, 241, 0.2);
  border-radius: 9999px;
  font-size: 0.875rem;
  color: #a5b4fc;
  margin-bottom: 2rem;
}

.badge-dot {
  width: 8px;
  height: 8px;
  background: #10b981;
  border-radius: 50%;
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

.hero-title {
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
  margin: 0 0 1.5rem;
  color: #fff;
}

.gradient-text {
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #ec4899 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.hero-subtitle {
  font-size: 1.125rem;
  color: #94a3b8;
  line-height: 1.8;
  max-width: 600px;
  margin: 0 0 2.5rem;
}

.hero-cta {
  display: flex;
  gap: 1rem;
  margin-bottom: 4rem;
}

.cta-button {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem 2rem;
  font-size: 1rem;
  font-weight: 600;
  border-radius: 12px;
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
}

.cta-button.primary {
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  color: white;
  box-shadow: 0 10px 30px -10px rgba(99, 102, 241, 0.5);
}

.cta-button.primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 15px 40px -10px rgba(99, 102, 241, 0.6);
}

.cta-button svg {
  width: 20px;
  height: 20px;
  transition: transform 0.3s ease;
}

.cta-button:hover svg {
  transform: translateY(2px);
}

/* ========== Hero Stats ========== */
.hero-stats {
  display: flex;
  gap: 3rem;
  padding: 2rem 3rem;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 20px;
  backdrop-filter: blur(10px);
}

.stat-item {
  text-align: center;
}

.stat-value {
  font-size: 2rem;
  font-weight: 800;
  background: linear-gradient(135deg, #fff 0%, #a5b4fc 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.stat-label {
  font-size: 0.875rem;
  color: #64748b;
  margin-top: 0.25rem;
}

/* ========== Section Header ========== */
.section-header {
  text-align: center;
  margin-bottom: 3rem;
}

@media (max-width: 640px) {
  .section-header {
    margin-bottom: 1.5rem;
  }

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

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

.section-title {
  font-size: 2rem;
  font-weight: 700;
  color: #fff;
  margin: 0 0 0.75rem;
}

.section-subtitle {
  font-size: 1rem;
  color: #64748b;
  margin: 0;
}

/* ========== Features Section ========== */
.page-2 .page-content {
  padding-top: 5rem;
  padding-bottom: 0;
  justify-content: flex-start;
  overflow: hidden;
}

@media (max-width: 640px) {
  .page-2 .page-content {
    padding-top: 4rem;
  }
}

/* ========== 横向滚动区域 ========== */
.horizontal-scroll-wrapper {
  flex: 1;
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.horizontal-scroll-container {
  flex: 1;
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.horizontal-scroll-container::-webkit-scrollbar {
  display: none;
}

.horizontal-page {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem 0;
  box-sizing: border-box;
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, auto);
  gap: 1.5rem;
  width: 100%;
  max-width: 1000px;
  padding: 2rem;
  box-sizing: border-box;
}

/* ========== 横向滚动指示器 ========== */
.horizontal-indicator {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  padding: 1rem 0;
}

.h-indicator-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  cursor: pointer;
  transition: all 0.3s ease;
}

.h-indicator-dot:hover {
  background: rgba(255, 255, 255, 0.4);
}

.h-indicator-dot.active {
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  transform: scale(1.2);
}

/* ========== 横向滚动箭头 ========== */
.scroll-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
  z-index: 10;
}

.scroll-arrow:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: translateY(-50%) scale(1.1);
}

.scroll-arrow svg {
  width: 24px;
  height: 24px;
}

.scroll-arrow-left {
  left: 1rem;
}

.scroll-arrow-right {
  right: 1rem;
}

.all-features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
}

/* 横向滚动中的卡片样式 */
.features-grid .feature-card {
  min-height: 200px;
  display: flex;
  flex-direction: column;
  padding: 2rem;
}

@media (max-width: 640px) {
  .features-grid .feature-card {
    min-height: auto;
    padding: 1.25rem;
  }

  .features-grid .feature-card .icon-wrapper {
    width: 44px;
    height: 44px;
    border-radius: 12px;
  }

  .features-grid .feature-card .icon-wrapper svg {
    width: 22px;
    height: 22px;
  }

  .features-grid .feature-card .card-title {
    font-size: 0.9375rem;
    margin: 0.5rem 0 0.25rem;
  }

  .features-grid .feature-card .card-desc {
    font-size: 0.75rem;
    line-height: 1.5;
  }
}

/* ========== Feature Cards ========== */
.feature-card {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 20px;
  padding: 1.5rem;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
  cursor: pointer;
  backdrop-filter: blur(10px);
}

.feature-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(
    600px circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
    rgba(255, 255, 255, 0.06),
    transparent 40%
  );
  opacity: 0;
  transition: opacity 0.4s;
  pointer-events: none;
}

.feature-card:hover::before {
  opacity: 1;
}

.feature-card:hover {
  transform: translateY(-4px);
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.1);
}

.feature-card {
  padding: 1.5rem;
}

.feature-card:hover {
  transform: translateY(-4px);
}

.card-content {
  position: relative;
  z-index: 1;
}



.icon-wrapper {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  transition: transform 0.3s ease;
}

.icon-wrapper.small {
  width: 44px;
  height: 44px;
  border-radius: 12px;
}

.icon-wrapper svg {
  width: 28px;
  height: 28px;
}

.icon-wrapper.small svg {
  width: 22px;
  height: 22px;
}

.feature-card:hover .icon-wrapper {
  transform: scale(1.05);
}

/* Card Colors */
.card-1 .icon-wrapper {
  background: linear-gradient(135deg, #6366f1, #4f46e5);
  box-shadow: 0 8px 20px -6px rgba(99, 102, 241, 0.5);
}

.card-2 .icon-wrapper {
  background: linear-gradient(135deg, #8b5cf6, #7c3aed);
  box-shadow: 0 8px 20px -6px rgba(139, 92, 246, 0.5);
}

.card-3 .icon-wrapper {
  background: linear-gradient(135deg, #ec4899, #db2777);
  box-shadow: 0 8px 20px -6px rgba(236, 72, 153, 0.5);
}

.card-4 .icon-wrapper {
  background: linear-gradient(135deg, #14b8a6, #0d9488);
  box-shadow: 0 8px 20px -6px rgba(20, 184, 166, 0.5);
}

.card-5 .icon-wrapper {
  background: linear-gradient(135deg, #f59e0b, #d97706);
  box-shadow: 0 8px 20px -6px rgba(245, 158, 11, 0.5);
}

.card-6 .icon-wrapper {
  background: linear-gradient(135deg, #ef4444, #dc2626);
  box-shadow: 0 8px 20px -6px rgba(239, 68, 68, 0.5);
}

.card-7 .icon-wrapper {
  background: linear-gradient(135deg, #8b5cf6, #7c3aed);
  box-shadow: 0 8px 20px -6px rgba(139, 92, 246, 0.5);
}

.card-8 .icon-wrapper {
  background: linear-gradient(135deg, #10b981, #059669);
  box-shadow: 0 8px 20px -6px rgba(16, 185, 129, 0.5);
}

.card-9 .icon-wrapper {
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  box-shadow: 0 8px 20px -6px rgba(99, 102, 241, 0.5);
}

.card-10 .icon-wrapper {
  background: linear-gradient(135deg, #06b6d4, #0891b2);
  box-shadow: 0 8px 20px -6px rgba(6, 182, 212, 0.5);
}

.card-12 .icon-wrapper {
  background: linear-gradient(135deg, #ec4899, #f472b6);
  box-shadow: 0 8px 20px -6px rgba(236, 72, 153, 0.5);
}

.card-title {
  font-size: 1.125rem;
  font-weight: 600;
  margin: 0.75rem 0 0.375rem;
  color: #f8fafc;
}

.card-desc {
  font-size: 0.875rem;
  color: #94a3b8;
  line-height: 1.6;
  margin: 0;
}



/* ========== Footer ========== */
.landing-footer {
  padding: 3rem 0;
  text-align: center;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

@media (max-width: 640px) {
  .landing-footer {
    padding: 1.5rem 0;
  }

  .landing-footer p {
    font-size: 0.75rem;
  }
}

.landing-footer p {
  color: #64748b;
  font-size: 0.875rem;
  margin: 0;
}

/* ========== Responsive ========== */
@media (max-width: 968px) {
  .all-features-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .hero-stats {
    gap: 2rem;
    padding: 1.5rem 2rem;
  }

  .page-indicator {
    right: 1rem;
  }

  /* 平板端横向滚动优化 */
  .horizontal-scroll-wrapper {
    padding: 0 0.5rem;
  }

  .features-grid {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(3, auto);
    gap: 1rem;
    padding: 1rem;
  }
}

@media (max-width: 640px) {
  .page-content {
    padding: 0 1rem;
  }

  .landing-nav {
    padding: 0.75rem 1rem;
  }

  .nav-brand {
    gap: 0.5rem;
  }

  .brand-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
  }

  .brand-icon svg {
    width: 18px;
    height: 18px;
  }

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

  .page-1 .page-content {
    padding-top: 3.5rem;
    padding-bottom: 4rem;
  }

  .hero-stats {
    flex-wrap: wrap;
    gap: 1rem;
    padding: 1rem 1.25rem;
  }

  .stat-item {
    flex: 1 1 45%;
  }

  .page-2 .page-content {
    padding-top: 3.5rem;
  }

  .features-grid {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(3, auto);
    gap: 0.625rem;
    padding: 0.5rem;
  }

  .features-grid .feature-card {
    min-height: auto;
    padding: 0.875rem;
  }

  .features-grid .feature-card .icon-wrapper {
    width: 36px;
    height: 36px;
    border-radius: 10px;
  }

  .features-grid .feature-card .icon-wrapper svg {
    width: 18px;
    height: 18px;
  }

  .features-grid .feature-card .card-title {
    font-size: 0.8125rem;
    margin: 0.375rem 0 0.125rem;
  }

  .features-grid .feature-card .card-desc {
    font-size: 0.6875rem;
    line-height: 1.4;
  }

  .all-features-grid {
    grid-template-columns: 1fr;
  }

  .scroll-arrow {
    width: 36px;
    height: 36px;
  }

  .scroll-arrow svg {
    width: 18px;
    height: 18px;
  }

  .scroll-arrow-left {
    left: 0.25rem;
  }

  .scroll-arrow-right {
    right: 0.25rem;
  }

  .page-indicator {
    right: 0.5rem;
    gap: 0.5rem;
  }

  .indicator-dot {
    width: 6px;
    height: 6px;
  }

  .horizontal-indicator {
    padding: 0.75rem 0;
  }

  .h-indicator-dot {
    width: 6px;
    height: 6px;
  }

  .scroll-hint {
    bottom: 1rem;
    font-size: 0.75rem;
  }

  .scroll-hint svg {
    width: 20px;
    height: 20px;
  }
}
</style>