/* =========================================================================
   Morning Mob — product card + grid
   3:4 portrait photo flush to grid, Garamond name, quiet price.
   Hover swaps to the second image slot ("alt").
   ========================================================================= */

function ProductCard({ product, onOpen, showCat }) {
  const [hover, setHover] = useState(false);
  return (
    <article style={{ cursor: 'pointer' }} onClick={() => onOpen(product)}
             onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}>
      <div style={{ position: 'relative' }}>
        {/* both slots stacked; hover cross-fades to the alt */}
        <Photo id={'card-' + product.id} src={product.card && product.card.front} label={product.name} />
        <div style={{ position: 'absolute', inset: 0, opacity: hover ? 1 : 0,
          transition: 'opacity 300ms var(--ease-out)', pointerEvents: hover ? 'auto' : 'none' }}>
          <Photo id={'card-' + product.id + '-alt'} src={product.card && product.card.alt} label="Back view" />
        </div>
        {product.ooak && (
          <span style={{ position: 'absolute', top: 10, left: 10, zIndex: 2, background: 'var(--parchment)',
            color: 'var(--tobacco)', fontFamily: 'var(--font-sans)', fontSize: 11, fontWeight: 400,
            letterSpacing: '2px', textTransform: 'uppercase', padding: '4px 8px' }}>One of a kind</span>
        )}
      </div>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', gap: 12, paddingTop: 12 }}>
        <div>
          <h3 style={{ fontFamily: 'var(--font-serif)', fontSize: 16, fontWeight: 400, color: 'var(--ink)', margin: 0, lineHeight: 1.4 }}>{product.name}</h3>
          {showCat && <div style={{ fontFamily: 'var(--font-sans)', fontSize: 11, fontWeight: 300, letterSpacing: '0.5px', color: 'var(--muted)', marginTop: 3 }}>{product.kind}</div>}
        </div>
        <span style={{ fontFamily: 'var(--font-sans)', fontSize: 13, fontWeight: 300, letterSpacing: '0.5px', color: 'var(--body)', whiteSpace: 'nowrap' }}>{money(product.price)}</span>
      </div>
    </article>
  );
}

function ProductGrid({ title, products, onOpen, columns = 3, showCat }) {
  return (
    <section style={{ maxWidth: 'var(--content-max)', margin: '0 auto', padding: '0 28px' }}>
      {title && (
        <div style={{ textAlign: 'center', padding: '64px 0 32px' }}>
          <Eyebrow color="var(--body-strong)">{title}</Eyebrow>
        </div>
      )}
      <div className="mm-grid" style={{ display: 'grid', gridTemplateColumns: `repeat(${columns}, 1fr)`, gap: 24 }}>
        {products.map((p) => <ProductCard key={p.id} product={p} onOpen={onOpen} showCat={showCat} />)}
      </div>
    </section>
  );
}

Object.assign(window, { ProductCard, ProductGrid });