"use client";

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

export function DetailScrollShowcase({ name }: { name: string }) {
  return (
    <section className="space-y-4">
      <ScrollReveal>
        <h3 className="text-lg font-semibold">{name} · 深度特性分段</h3>
      </ScrollReveal>
      <ScrollReveal delay={0.06}>
        <motion.div
          whileInView={{ backgroundPositionX: ["0%", "100%"] }}
          viewport={{ once: true }}
          transition={{ duration: 1.6, ease: "linear" }}
          className="card-glass bg-[linear-gradient(120deg,rgba(34,211,238,.08),rgba(139,92,246,.12),rgba(34,211,238,.08))] bg-[length:220%_100%]"
        >
          <p className="text-sm text-slate-300">
            分段滚动将“下载信息 -&gt; 历史版本 -&gt; 更新日志 -&gt; 解锁引导”串成连续阅读路径，提升理解与转化效率。
          </p>
        </motion.div>
      </ScrollReveal>
    </section>
  );
}