'use client';

import { motion } from 'framer-motion';
import { ProductCard } from '@/components/ui/product-card';
import { GeometricDecoration } from '@/components/ui/brand-visuals';
import { PRODUCTS } from '@/lib/constants';
import { useReducedMotion } from '@/hooks/use-reduced-motion';

export function ProductMatrixSection() {
  const shouldReduceMotion = useReducedMotion();

  return (
    <section id="products" className="relative py-16 md:py-20 bg-[var(--color-bg-primary)] bg-texture-grid">
      <GeometricDecoration variant="lines" />
      <div className="container-wide relative z-10">
        <motion.div
          initial={shouldReduceMotion ? {} : { opacity: 0, y: 20 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true, margin: '-100px' }}
          transition={{ duration: 0.5, ease: [0.16, 1, 0.3, 1] }}
          className="flex flex-col md:flex-row md:items-end md:justify-between gap-4 mb-14"
        >
          <div>
            <h2 className="text-3xl sm:text-4xl font-semibold text-[var(--color-text-primary)] mb-3">
              产品矩阵
            </h2>
            <p className="text-base text-[var(--color-text-muted)] max-w-lg">
              6 款自研产品覆盖企业数字化全场景，目前全部<span className="text-[var(--color-brand)] font-medium">研发中</span>，欢迎提前了解规划
            </p>
          </div>
          <div className="flex items-center gap-2">
            <span className="inline-flex items-center gap-1.5 px-3 py-1 rounded-full bg-[var(--color-brand-bg)] text-[var(--color-brand)] text-xs font-medium border border-[var(--color-brand)]/10">
              <span className="w-1.5 h-1.5 rounded-full bg-[var(--color-brand)] animate-pulse" />
              研发中 · 即将上线
            </span>
            <span className="text-sm text-[var(--color-text-subtle)] font-mono tracking-wider hidden md:block">
              {PRODUCTS.length} PRODUCTS
            </span>
          </div>
        </motion.div>

        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 md:gap-8">
          {PRODUCTS.map((product, index) => (
            <ProductCard
              key={product.id}
              title={product.title}
              description={product.description}
              href={`/products/${product.id}`}
              index={index}
              status={product.status}
            />
          ))}
        </div>
      </div>
    </section>
  );
}