/* =========================================================================
   Morning Mob — collection listing
   Text header + product grid. One tee for now, in two colourways.
   ========================================================================= */

function CollectionView({ products, onOpen, initialCat }) {
  const t = useMM();
  return (
    <div style={{ maxWidth: 'var(--content-max)', margin: '0 auto', padding: '0 28px 80px' }}>
      <div style={{ padding: '56px 0 32px' }}>
        <h1 style={{ fontFamily: 'var(--font-serif)', fontSize: Math.round(36 * t.displayScale), fontWeight: 400, color: 'var(--ink)', margin: 0 }}>Shop</h1>
        <p style={{ maxWidth: 560, marginTop: 12, color: 'var(--body)' }}>
          One tee, made to be lived in — the Mocha Mode Tee, in mocha and white. Soft cotton,
          an easy cut, and the Morning Club crest across the back.</p>
      </div>

      <div style={{ borderTop: '1px solid var(--hairline)', paddingTop: 40 }} />

      <div className="mm-grid" style={{ display: 'grid',
        gridTemplateColumns: products.length >= t.shopColumns ? `repeat(${t.shopColumns}, 1fr)` : `repeat(${products.length}, minmax(280px, 380px))`,
        gap: 24, justifyContent: products.length >= t.shopColumns ? 'stretch' : 'center' }}>
        {products.map((p) => <ProductCard key={p.id} product={p} onOpen={onOpen} showCat />)}
      </div>
      {products.length === 0 && <p style={{ color: 'var(--muted)', marginTop: 40 }}>Nothing here yet.</p>}
    </div>
  );
}
window.CollectionView = CollectionView;