'use client';

import { InkReveal } from '@/lib/animations';
import { ScrollReveal, slideInLeftVariants } from '@/components/ui/scroll-animations';
import type { Product } from '@/lib/constants/products';

interface ProductOverviewSectionProps {
  product: Product;
}

export function ProductOverviewSection({ product }: ProductOverviewSectionProps) {
  return (
    <section id="overview" className="relative py-16 md:py-20 bg-white overflow-hidden">
      <div className="container-wide">
        <div className="max-w-3xl">
          {/* 标题 - 左对齐，slideInLeft 入场 */}
          <ScrollReveal variants={slideInLeftVariants} delay={0}>
            <h2 className="text-3xl md:text-4xl font-bold text-[#1C1C1C] mb-4">
              产品概述
            </h2>
          </ScrollReveal>

          {/* 朱砂红装饰线 - InkReveal 入场 */}
          <InkReveal delay={0.2}>
            <div className="w-16 h-1 bg-[#C41E3A] rounded-full mb-8" />
          </InkReveal>

          {/* 概述文字 - InkReveal 包裹整段，替代 TextReveal */}
          <InkReveal delay={0.3}>
            <p className="text-lg md:text-xl text-[#5C5C5C] leading-relaxed">
              {product.overview}
            </p>
          </InkReveal>
        </div>
      </div>
    </section>
  );
}