/* ProductsIndex — /products page listing every product card. */
function ProductsIndex() {
  const products = window.PRODUCTS || [];
  return (
    <>
      <section className="pp-hero pp-tone-paper">
        <div className="wrap">
          <a href="/" className="pp-back"><span aria-hidden="true">←</span> Home</a>
          <div className="pp-index-head">
            <div className="pp-eyebrow"><span className="pp-eyebrow-dot" /> Everything we build</div>
            <h1 className="pp-index-title">
              The whole stack — <span className="serif">on one page</span>.
            </h1>
            <p className="pp-index-sub">
              Ten products we ship for local businesses in India. Each one is live with a real customer.
              Pick the one you need today; we'll tell you which to skip.
            </p>
            <div className="pp-cta-row">
              <a href="/#contact" className="btn primary">Book a free consultation <Ic.arrow size={14} /></a>
              <a href="/#services" className="btn ghost">See the short version</a>
            </div>
          </div>
        </div>
      </section>

      <section className="pp-block">
        <div className="wrap">
          <div className="pp-grid">
            {products.map(p => (
              <a key={p.slug} href={`/products/${p.slug}`} className={`pp-card pp-card-${p.color || 'paper'}`}>
                <div className="pp-card-icon">
                  {Ic[p.icon] ? Ic[p.icon]({ size: 26 }) : Ic.sparkle({ size: 26 })}
                </div>
                <div className="pp-card-eyebrow">{p.eyebrow}</div>
                <div className="pp-card-name">{p.name}</div>
                <div className="pp-card-sub">{p.sub}</div>
                <div className="pp-card-foot">
                  <span>Learn more</span>
                  <Ic.arrow size={14} />
                </div>
              </a>
            ))}
          </div>
        </div>
      </section>

      <ProductCTA />
    </>
  );
}

window.ProductsIndex = ProductsIndex;