/* eslint-disable */
const PRODUCTS = [
  { id: 1, name: "Amelia Cameo Necklace", meta: "18k Gold · Waterproof", price: 58, img: "assets/hero-main.jpg", badge: "New" },
  { id: 2, name: "Cuban Curb Chain — 5mm", meta: "Stainless Silver", price: 48, was: 72, img: "assets/hero-mens.jpg", badge: null, lowStock: 3 },
  { id: 3, name: "Snake Chain Choker", meta: "14k Gold-plated", price: 38, was: 64, img: "assets/hero-necklaces.jpg", badge: "−40%" },
  { id: 4, name: "Layered Set — Gold", meta: "3-piece bundle", price: 89, was: 144, img: "assets/banner-bundles.jpg", badge: "Bestseller" },
];

function ProductCard({ p, onAdd, onClick }) {
  return (
    <article className="pcard" onClick={onClick}>
      <div className="pcard-img" style={{backgroundImage:`url(${p.img})`}}>
        {p.badge && <span className={"pcard-badge " + (p.badge.startsWith('−') ? 'sale' : p.badge === 'Bestseller' ? 'best' : '')}>{p.badge}</span>}
        <button className="pcard-quick" onClick={(e) => { e.stopPropagation(); onAdd && onAdd(p); }}>QUICK ADD</button>
      </div>
      <div className="pcard-meta">
        <div className="pcard-name">{p.name}</div>
        <div className="pcard-sub">{p.meta}</div>
        <div className="pcard-price">
          {p.was && <span className="strike">${p.was}</span>}
          <span className={p.was ? "now" : ""}>${p.price}</span>
        </div>
        {p.lowStock && <div className="pcard-low">Only {p.lowStock} left</div>}
      </div>
    </article>
  );
}
window.ProductCard = ProductCard;
window.PRODUCTS = PRODUCTS;

function ProductGrid({ onAdd, onSelect }) {
  const [items, setItems] = React.useState(null); // null = loading, [] = hide
  React.useEffect(() => {
    let cancelled = false;
    const load = async () => {
      if (!window.Shopify?.isConfigured?.()) {
        if (!cancelled) setItems(PRODUCTS);
        return;
      }
      try {
        const coll = await window.Shopify.getCollection("shop-all", { first: 4, sortKey: "BEST_SELLING" });
        if (!cancelled) setItems(coll?.products || []);
      } catch {
        // Fetch failed against a configured store — hide the rail rather
        // than leak the mock catalog (wrong prices/names) onto a real site.
        if (!cancelled) setItems([]);
      }
    };
    load();
    return () => { cancelled = true; };
  }, []);

  const openProduct = (p) => {
    if (p.handle) { window.location.href = "product.html?handle=" + p.handle; return; }
    onSelect(p);
  };

  if (items && items.length === 0) return null;
  return (
    <section className="pgrid-wrap">
      <div className="pgrid-head">
        <div className="eyebrow">BESTSELLERS</div>
        <h2>Everyone's <em>wearing</em> these.</h2>
        <a className="btn-link" href="collection.html?handle=shop-all">View all →</a>
      </div>
      <div className="pgrid">
        {(items || []).map(p => (
          <ProductCard key={p.id || p.handle} p={p} onAdd={onAdd} onClick={() => openProduct(p)} />
        ))}
      </div>
    </section>
  );
}
window.ProductGrid = ProductGrid;