"use client";

import { motion } from "framer-motion";
import { ScrollReveal } from "@/components/scroll-reveal";

const story = [
  {
    title: "发现优质资源",
    desc: "搜索、分类与推荐协同，让用户 3 秒定位所需软件。",
    badge: "Discover",
  },
  {
    title: "透明化下载细节",
    desc: "版本、大小、更新日期、修改日志与安全标识完整可视化。",
    badge: "Trust",
  },
  {
    title: "自然引导转化",
    desc: "公众号解锁、社群、VIP 与付费能力以产品化方式融入。",
    badge: "Convert",
  },
];

export function HomeScrollStory() {
  return (
    <section className="space-y-4 py-2">
      <ScrollReveal>
        <h2 className="text-xl font-semibold">滚动叙事体验</h2>
      </ScrollReveal>
      <div className="grid gap-4 md:grid-cols-3">
        {story.map((item, idx) => (
          <ScrollReveal key={item.title} delay={idx * 0.08}>
            <motion.article
              whileHover={{ y: -8, scale: 1.01 }}
              className="card-glass relative overflow-hidden"
            >
              <div className="absolute -right-5 -top-5 h-24 w-24 rounded-full bg-cyan-300/20 blur-2xl" />
              <p className="text-xs uppercase tracking-wider text-cyan-300">{item.badge}</p>
              <h3 className="mt-2 text-lg font-semibold">{item.title}</h3>
              <p className="mt-2 text-sm text-slate-300">{item.desc}</p>
            </motion.article>
          </ScrollReveal>
        ))}
      </div>
    </section>
  );
}