---
import BaseLayout from '../layouts/BaseLayout.astro';
import Header from '../components/Header.astro';
import Footer from '../components/Footer.astro';

const painPoints = [
  {
    icon: 'library_books',
    title: '资料很多，但不知道先学什么',
    description: '信息过载导致无从下手，缺乏系统性的指引。',
    bgColor: 'bg-red-100',
    textColor: 'text-red-600',
  },
  {
    icon: 'edit_note',
    title: '笔记写了，却很少真正复习',
    description: '收藏即学习的错觉，遗忘曲线无人对抗。',
    bgColor: 'bg-slate-100',
    textColor: 'text-slate-600',
  },
  {
    icon: 'record_voice_over',
    title: '看懂了内容，却说不出来',
    description: '缺乏输出环节，知识停留在浅层认知。',
    bgColor: 'bg-blue-100',
    textColor: 'text-blue-600',
  },
  {
    icon: 'feedback',
    title: '没有及时反馈，不知道自己哪里薄弱',
    description: '盲目学习，无法进行针对性的强化训练。',
    bgColor: 'bg-purple-100',
    textColor: 'text-purple-600',
  },
];
---

<BaseLayout
  title="知习 AI - 产品介绍"
  description="AI 驱动的系统化学习助手，把知识库、主动回忆、AI 分析和复习计划结合起来，帮你从'看过'变成'真正学会'。"
>
  <Header />
  
  <main>
    <!-- Hero Section -->
    <section class="min-h-screen flex flex-col items-center justify-start relative px-6 md:px-12 pt-32 pb-24 max-w-7xl mx-auto text-center overflow-visible">
      <div class="ethereal-glow bg-blue-400/20 w-[600px] h-[600px] top-[-100px] left-1/2 -translate-x-1/2 animate-breathe absolute"></div>

      <h1 class="font-bold text-6xl md:text-8xl text-navy mb-6 max-w-5xl relative z-10 tracking-tight animate-fade-in-up" style="font-family: var(--font-manrope); letter-spacing: -0.04em;">
        更懂你，<span class="text-tech-blue">更会学</span>
      </h1>

      <p class="text-lg md:text-xl text-slate-600 max-w-2xl mb-12 relative z-10 animate-fade-in-up" style="animation-delay: 0.2s;">
        AI 驱动的系统化学习助手，把知识库、主动回忆、AI 分析和复习计划结合起来，帮你从"看过"变成"真正学会"。
      </p>

      <div class="flex flex-col sm:flex-row gap-6 mb-24 relative z-10 animate-fade-in-up" style="animation-delay: 0.3s;">
        <a href="/waitlist" class="text-white font-medium px-10 py-5 rounded-full shadow-2xl shadow-blue-500/30 hover:shadow-blue-500/50 transition-all hover:-translate-y-1 text-sm btn-primary-gradient">
          加入等待名单
        </a>
        <a href="/philosophy" class="bg-white/80 backdrop-blur-sm text-navy font-medium px-10 py-5 rounded-full hover:bg-white transition-all border border-slate-200 shadow-lg hover:shadow-xl hover:-translate-y-1 text-sm">
          了解产品理念
        </a>
      </div>

        <div class="relative max-w-5xl mx-auto">
          <div class="absolute inset-0 bg-tech-blue/10 blur-[100px] rounded-full"></div>
          <div class="relative glass-card-premium rounded-[2rem] p-4 mx-auto overflow-hidden border border-white/60 shadow-2xl">
            <img 
              alt="知习 AI 产品界面展示" 
              src="https://images.unsplash.com/photo-1516321318423-f06f85e504b3?w=1200&h=800&fit=crop"
              class="w-full h-auto rounded-xl shadow-sm object-cover max-h-[600px]"
            />
            
            <!-- 弹幕滚动效果 -->
            <div class="absolute inset-0 overflow-hidden pointer-events-none">
              <!-- 从右向左 -->
              <div class="absolute glass-card-premium rounded-xl shadow-xl animate-danmaku-rtl flex items-center gap-3" style="top: 12%; left: 0; padding: 12px 16px; animation-delay: 0s;">
                <div class="w-9 h-9 rounded-full bg-blue-100 text-tech-blue flex items-center justify-center shrink-0">
                  <span class="material-symbols-outlined text-sm">calendar_today</span>
                </div>
                <div class="text-left whitespace-nowrap">
                  <div class="text-sm font-semibold text-navy">今日学习任务</div>
                  <div class="text-xs text-slate-500">3 个待复习</div>
                </div>
              </div>

              <div class="absolute glass-card-premium rounded-xl shadow-xl animate-danmaku-rtl flex items-center gap-3" style="top: 35%; left: 0; padding: 12px 16px; animation-delay: 5s;">
                <div class="w-9 h-9 rounded-full bg-purple-100 text-purple-600 flex items-center justify-center shrink-0">
                  <span class="material-symbols-outlined text-sm">analytics</span>
                </div>
                <div class="text-left whitespace-nowrap">
                  <div class="text-sm font-semibold text-navy">AI 分析反馈</div>
                  <div class="text-xs text-slate-500">掌握度提升 15%</div>
                </div>
              </div>

              <div class="absolute glass-card-premium rounded-lg shadow-xl animate-danmaku-rtl flex items-center gap-2" style="top: 58%; left: 0; padding: 10px 14px; animation-delay: 10s;">
                <div class="w-7 h-7 rounded-full bg-green-100 text-green-600 flex items-center justify-center shrink-0">
                  <span class="material-symbols-outlined text-xs">check_circle</span>
                </div>
                <div class="text-left whitespace-nowrap">
                  <div class="text-xs font-semibold text-navy">记忆曲线已优化</div>
                </div>
              </div>

              <!-- 从左向右 -->
              <div class="absolute glass-card-premium rounded-xl shadow-xl animate-danmaku-ltr flex items-center gap-3" style="top: 22%; left: 0; padding: 12px 16px; animation-delay: 2s;">
                <div class="w-9 h-9 rounded-full bg-pink-100 text-pink-600 flex items-center justify-center shrink-0">
                  <span class="material-symbols-outlined text-sm">trending_up</span>
                </div>
                <div class="text-left whitespace-nowrap">
                  <div class="text-sm font-semibold text-navy">进度提升</div>
                  <div class="text-xs text-slate-500">+23%</div>
                </div>
              </div>

              <div class="absolute glass-card-premium rounded-lg shadow-xl animate-danmaku-ltr flex items-center gap-2" style="top: 48%; left: 0; padding: 10px 14px; animation-delay: 7s;">
                <div class="w-7 h-7 rounded-full bg-amber-100 text-amber-600 flex items-center justify-center shrink-0">
                  <span class="material-symbols-outlined text-xs">school</span>
                </div>
                <div class="text-left whitespace-nowrap">
                  <div class="text-xs font-semibold text-navy">学习专注 2小时</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- Pain Points Section -->
    <section class="pt-32 pb-24 px-6 md:px-12 bg-gradient-to-br from-slate-50 to-blue-50 animate-reveal-up">
      <div class="max-w-5xl mx-auto">
        <div class="text-center mb-16">
          <h2 class="text-4xl md:text-5xl font-bold text-navy mb-4" style="font-family: var(--font-manrope); letter-spacing: -0.01em;">
            很多学习，其实只是<span class="text-tech-blue">"看过"</span>
          </h2>
          <p class="text-base text-slate-600">传统学习方式面临的挑战</p>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
          {painPoints.map((point) => (
            <div class="glass-card-premium rounded-2xl p-8 hover:-translate-y-1 transition-transform duration-300">
              <div class={`w-12 h-12 rounded-xl ${point.bgColor} ${point.textColor} flex items-center justify-center mb-6`}>
                <span class="material-symbols-outlined">{point.icon}</span>
              </div>
              <h3 class="text-xl font-semibold text-navy mb-3" style="font-family: var(--font-manrope);">{point.title}</h3>
              <p class="text-base text-slate-600">{point.description}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  </main>

  <Footer />
</BaseLayout>
