import Navbar from '@/components/Navbar';
import Footer from '@/components/Footer';
import ProductCard from '@/components/ProductCard';
import { products } from '@/lib/products';
import styles from './ProductsPage.module.css';

export default function ProductsPage() {
  return (
    <main className={styles.wrapper}>
      <Navbar />
      
      <section className={styles.hero}>
        <div className={styles.heroGlow}></div>
        <div className={styles.container}>
          <div className={styles.heroContent}>
             <span className={styles.badge}>PRECISION ENGINEERED</span>
             <h1 className={styles.heroTitle}>SELECT YOUR <br/><span className={styles.red}>PLATFORM</span></h1>
             <p className={styles.heroDesc}>
               Mission-critical engine management for the most demanding Honda builds.
               Scroll to explore our complete technological ecosystem.
             </p>
          </div>
        </div>
      </section>

      <section className={styles.productsSection}>
        <div className={styles.container}>
          <div className={styles.grid}>
            {products.map((product, i) => (
              <ProductCard 
                key={product.id}
                id={product.id}
                name={product.name}
                subtitle={product.subtitle}
                description={product.description}
                image={product.image}
                price={product.price}
              />
            ))}
          </div>
        </div>
      </section>

      <Footer />
    </main>
  );
}
