'use client';

import { motion } from 'framer-motion';
import Link from 'next/link';
import ProductCard from './ProductCard';
import { products } from '@/lib/products';
import styles from './HomeProducts.module.css';

export default function HomeProducts() {
  const displayProducts = [
    products.find(p => p.id === 'kpro'),
    products.find(p => p.id === 'canflash'),
    products.find(p => p.id === 's300'),
  ].filter(Boolean);

  return (
    <section className={styles.section}>
      <div className={styles.container}>
        <div className={styles.header}>
           <div className={styles.left}>
              <span className={styles.label}>DISCOVER OUR LINEUP</span>
              <h2 className={styles.title}>PRECISION PRODUCTS</h2>
           </div>
           <Link href="/products" className={styles.allBtn}>VIEW ALL PRODUCTS</Link>
        </div>
        
        <div className={styles.grid}>
           {displayProducts.map((product, i) => (
             <motion.div 
               key={i}
               initial={{ y: 50, opacity: 0 }}
               whileInView={{ y: 0, opacity: 1 }}
               viewport={{ once: true }}
               transition={{ delay: i * 0.15 }}
             >
               <ProductCard 
                id={product!.id}
                name={product!.name}
                subtitle={product!.subtitle}
                description={product!.description}
                image={product!.image}
                price={product!.price}
               />
             </motion.div>
           ))}
        </div>
      </div>
    </section>
  );
}
