// shop.jsx — the product configurator (gallery + buy panel)
const { useState: useStateShop, useEffect: useEffectShop } = React;

function Shop({ cw, colorways, onSelectColor, qty, setQty, onAdd, onBuy, justAdded }) {
  const gallery = galleryFor(cw);
  const [active, setActive] = useStateShop(0);

  // reset to front image whenever the colorway changes
  useEffectShop(() => { setActive(0); }, [cw.id]);

  const main = gallery[Math.min(active, gallery.length - 1)];

  return (
    <section className="shop" id="shop">
      <div className="shop-inner">
        {/* ---- Gallery ---- */}
        <div className="gallery">
          <div className="gallery-main">
            <span className="gallery-tag">{PRODUCT.size.split('·')[0].trim()}</span>
            <img key={main.src} src={main.src} alt={`${cw.name} ${PRODUCT.name}`} />
          </div>
          <div className="gallery-thumbs">
            {gallery.map((g, i) => (
              <button
                key={g.src}
                className={`thumb ${i === active ? 'is-active' : ''}`}
                onClick={() => setActive(i)}
                aria-label={`View ${g.key}`}
              >
                <img src={g.src} alt="" />
              </button>
            ))}
          </div>
        </div>

        {/* ---- Buy panel ---- */}
        <div className="buy">
          <div className="buy-head">
            <p className="eyebrow">Sax Playing Dog</p>
            <h2 className="buy-title">{PRODUCT.name}</h2>
            <p className="buy-tagline">{PRODUCT.tagline}</p>
          </div>

          <div className="buy-price-row">
            <span className="buy-price">${PRODUCT.price.toFixed(2)}</span>
            <span className="buy-size">{PRODUCT.size}</span>
          </div>

          <div className="swatch-block">
            <div className="swatch-label">
              <span>Color</span>
              <span className="swatch-current">{cw.name}</span>
            </div>
            <div className="swatches">
              {colorways.map((c) => (
                <button
                  key={c.id}
                  className={`swatch ${c.id === cw.id ? 'is-active' : ''}`}
                  style={{ '--sw': c.swatch }}
                  onClick={() => onSelectColor(c.id)}
                  aria-label={c.name}
                  title={c.name}
                >
                  <span className="swatch-dot" />
                </button>
              ))}
            </div>
            <p className="swatch-thread">{cw.thread}, on the front.</p>
          </div>

          <div className="qty-row">
            <span className="qty-label">Qty</span>
            <div className="qty-stepper">
              <button onClick={() => setQty(Math.max(1, qty - 1))} aria-label="Decrease">–</button>
              <span>{qty}</span>
              <button onClick={() => setQty(Math.min(10, qty + 1))} aria-label="Increase">+</button>
            </div>
          </div>

          <div className="buy-actions">
            <button className={`btn btn-solid btn-lg ${justAdded ? 'is-added' : ''}`} onClick={onBuy}>
              Join Waitlist
            </button>
            <button className="btn btn-outline btn-lg" onClick={onAdd}>
              {justAdded ? 'Added ✓' : 'Add to cart'}
            </button>
          </div>

          <ul className="buy-details">
            {PRODUCT.details.map((d, i) => <li key={i}>{d}</li>)}
          </ul>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Shop });