apparel-designer/src/components/shop/ProductInfo.jsx

// <ProductInfo> — header block for the product detail page.
//
// Shows label, category, kind pill, description, and the "starting at"
// price. Lives in the right column of the two-column product page,
// above the buy panel.

function formatUSD(cents) {
  if (!cents) return '$0.00';
  return `$${(cents / 100).toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`;
}

function startingPriceCents(product) {
  const sizes = product.sizes || [];
  if (sizes.length === 0) return 0;
  return sizes.reduce(
    (min, s) => Math.min(min, s.basePriceCents || 0),
    Number.POSITIVE_INFINITY,
  );
}

export function ProductInfo({ product }) {
  const kind = product.kind || 'customizable';
  const kindLabel = kind === 'fixed' ? 'Ready-made' : 'Customizable';
  const fromPrice = startingPriceCents(product);
  return (
    <div className="shop-info">
      <div className="shop-info__head">
        <span className={`shop-kind-pill shop-kind-pill--${kind}`}>{kindLabel}</span>
        {product.category && (
          <span className="shop-info__category">{product.category}</span>
        )}
      </div>
      <h1 className="shop-info__label">{product.label}</h1>
      <p className="shop-info__price">
        <span className="shop-price-from">Starting at</span>{' '}
        <strong className="shop-price-large">{formatUSD(fromPrice)}</strong>
      </p>
      {product.description && (
        <p className="shop-info__description">{product.description}</p>
      )}
    </div>
  );
}