// Shop page
const { useState: useStateShop } = React;

function ShopPage({ setPage, openProduct, cols, filter = 'All', setFilter, wishlist = [], toggleWishlist }) {
  const all = window.BAMBOO_PRODUCTS;
  const filtered = filter === 'All' ? all : all.filter(p => p.cat === filter);

  return (
    <React.Fragment>
      <div className="shop-header">
        <div className="container">
          <div className="shop-header-top">
            <div className="mono" style={{color:'var(--moss)'}}>— The Collection</div>
            <div className="shop-count">{filtered.length} pieces</div>
          </div>
          <h1>Shop <em className="italic" style={{color:'var(--moss)'}}>everything</em></h1>
          <p className="shop-subtitle">Carefully-made pieces across our {window.BAMBOO_CATEGORIES.length - 1} categories, finished by master artisans in Maharashtra.</p>
          <div className="shop-filters">
            {window.BAMBOO_CATEGORIES.map(c => {
              const catSlug = window.slugify(c);
              const filterPath = c === 'All' ? '/shop/' : `/collections/${catSlug}/`;
              return (
                <a
                  key={c}
                  href={filterPath}
                  className={'shop-filter ' + (filter === c ? 'active' : '')}
                  onClick={(e) => {
                    e.preventDefault();
                    setFilter(c);
                  }}
                  style={{ textDecoration: 'none' }}
                >
                  {c}
                </a>
              );
            })}
          </div>
          <div className="products-grid" style={{'--cols': cols || 4}}>
            {filtered.map(p => (
              <a
                key={p.id}
                href={`/products/${window.slugify(p.name)}/`}
                className="product-card"
                onClick={(e) => { e.preventDefault(); openProduct(p.id); }}
                style={{ textDecoration: 'none', color: 'inherit', display: 'block' }}
              >
                <SmoothBackground
                  className="product-card-img"
                  data-label={p.name}
                  src={p.image}
                  style={{ backgroundSize: 'cover', backgroundPosition: 'center', position: 'relative' }}
                  role="img"
                  aria-label={`Handmade ${p.name} - Bamboos Culture`}
                >
                  <button
                    className={'wishlist-btn-card ' + (wishlist.includes(p.id) ? 'active' : '')}
                    onClick={(e) => {
                      e.stopPropagation();
                      e.preventDefault();
                      toggleWishlist(p.id);
                    }}
                    aria-label="Wishlist"
                  >
                    <svg viewBox="0 0 24 24">
                      <path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/>
                    </svg>
                  </button>
                </SmoothBackground>
                <div className="product-card-cat">{p.cat}</div>
                <div className="product-card-name">{window.renderProductName ? window.renderProductName(p.name) : p.name}</div>
                <div className="product-card-price">₹{p.price}</div>
              </a>
            ))}
          </div>
        </div>
      </div>
      <Footer setPage={setPage} />
    </React.Fragment>
  );
}

Object.assign(window, { ShopPage });