<script setup lang="ts">
import { RouterLink } from 'vue-router';

// 首页：三大功能入口（看股 / 选股 / 回测）
const features = [
  {
    to: '/stocks',
    icon: 'M4 6h16M4 12h16M4 18h10',
    accent: 'bg-amber-50 text-amber-600',
    title: '看股',
    desc: '浏览全市场 5,400+ 只股票的信息与历史 K 线数据。',
  },
  {
    to: '/screener',
    icon: 'M12 3l1.9 5.1L19 10l-5.1 1.9L12 17l-1.9-5.1L5 10l5.1-1.9L12 3z',
    accent: 'bg-blue-50 text-blue-600',
    title: '选股',
    desc: '用自然语言描述选股条件，快速完成全市场筛选。',
  },
  {
    to: '/backtest',
    icon: 'M3 17l6-6 4 4 8-8M21 7v6h-6',
    accent: 'bg-emerald-50 text-emerald-600',
    title: '回测',
    desc: '选择标的与策略参数，查看历史表现和关键绩效指标。',
  },
];
</script>

<template>
  <div class="w-full max-w-5xl">
    <div class="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
      <RouterLink
        v-for="f in features"
        :key="f.to"
        :to="f.to"
        class="group flex flex-1 flex-col rounded-lg border border-slate-200 bg-white p-6 transition-all hover:-translate-y-1 hover:border-slate-300 hover:shadow-lg focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2 sm:p-7"
      >
        <div class="flex items-center gap-4">
          <span :class="['flex h-14 w-14 shrink-0 items-center justify-center rounded-lg', f.accent]">
            <svg class="h-6 w-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
              <path :d="f.icon" />
            </svg>
          </span>
          <div class="text-2xl font-semibold">{{ f.title }}</div>
        </div>
        <p class="mt-4 max-w-sm text-sm leading-6 text-slate-500">{{ f.desc }}</p>
        <div class="mt-auto flex items-center justify-end gap-1.5 pt-5 text-sm font-medium text-blue-600">
          进入
          <svg class="h-4 w-4 transition-transform group-hover:translate-x-0.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M13 6l6 6-6 6" /></svg>
        </div>
      </RouterLink>
    </div>
  </div>
</template>
