import Link from "next/link";
import { products } from "./lib/products";
export default function Home() {
  return (
    <>
      <section className="hero">
        <p className="eyebrow">Nueva coleccion - 2026</p>
        <h1>Tecnologia que se <span>siente</span>.</h1>
        <p className="sub">Diseno minimalista, materiales premium y una experiencia que enamora.</p>
        <Link href="/#productos" className="btn btn-primary">Ver productos</Link>
      </section>
      <section id="productos" className="grid-section">
        <div className="section-head"><h2>Destacados</h2><span className="muted">{products.length} productos</span></div>
        <div className="grid">
          {products.map((p) => (
            <Link key={p.id} href={`/product/${p.id}`} className="card">
              <div className="thumb">
                <img src={p.img} alt={p.name} loading="lazy" />
              </div>
              <div className="card-body">
                <span className="chip">{p.category}</span>
                <h3>{p.name}</h3>
                <p className="price">${p.price}</p>
              </div>
            </Link>
          ))}
        </div>
      </section>
    </>
  );
}