@tribe-nest/forge 1.13.0

package/src/ui/styled/ProductDetail.tsx

@@ -0,0 +1,616 @@
+import { useEffect, useMemo, useRef, useState } from "react";
+import { Play, Pause, Music, Star } from "lucide-react";
+import { ProductCategory } from "../../types/models";
+import type { IPublicProduct, IPublicProductTrack, IPublicProductVariant } from "../../types/models";
+import { useGetProduct } from "../../data/queries/useProducts";
+import { useCart } from "../../contexts/CartContext";
+import { useAudioPlayer } from "../../contexts/AudioPlayerContext";
+import { useThemeTokens } from "../theme/ForgeThemeProvider";
+import { readableTextOn } from "../theme/contrast";
+import { useAmountFormatter } from "../format/useFormatCurrency";
+import { PriceDisplay } from "../format/PriceDisplay";
+import { usePricesIncludeTax } from "../../data/queries/useWebsite";
+import { Button } from "./Button";
+import { Loading } from "./Loading";
+import { ReviewsSection } from "./ReviewsSection";
+
+export interface ProductDetailProps {
+  /** Product slug (resolves the product). */
+  slug?: string;
+  /** Format a numeric amount for display. */
+  formatAmount?: (amount: number) => string;
+  /** Where "Buy now" sends the buyer after adding to cart. Default `/i/checkout`. */
+  checkoutPath?: string;
+  /** Extra class(es) appended to the root element. */
+  className?: string;
+  /** Inline style merged LAST into the root element (callers can override). */
+  style?: React.CSSProperties;
+  /** Server-fetched product used as initial data (SSR), avoids client loading spinner. */
+  initialProduct?: IPublicProduct;
+}
+
+const a = (hex: string, al: number) => hex + Math.round(al * 255).toString(16).padStart(2, "0");
+
+/**
+ * Drop-in product page. **Music** products (category `Music`) get an album/single
+ * preview with per-track playback; everything else — including Digital products
+ * (whose downloadable file is stored as a track) — gets the standard product
+ * layout. Renders the description as sanitized-by-source HTML with responsive
+ * media (no horizontal overflow from embedded video/images).
+ */
+export function ProductDetail({ slug, formatAmount, checkoutPath = "/i/checkout", className, style, initialProduct }: ProductDetailProps) {
+  const t = useThemeTokens();
+  const { data: product, isLoading } = useGetProduct(slug, { initialData: initialProduct });
+  const fmt = useAmountFormatter(formatAmount);
+
+  if (isLoading) return <Loading fullPage />;
+  if (!product) return <p style={{ color: t.text }}>Product not found.</p>;
+
+  // Classify on the product's category, NOT "has tracks" — a Digital product
+  // stores its download as a track too, so track-presence would misrender it as
+  // music (audio player over a PDF, etc.).
+  const isMusic = product.category === ProductCategory.Music;
+  return isMusic ? (
+    <MusicDetail product={product} fmt={fmt} checkoutPath={checkoutPath} className={className} style={style} />
+  ) : (
+    <StandardDetail product={product} fmt={fmt} checkoutPath={checkoutPath} className={className} style={style} />
+  );
+}
+
+// ── Rich description (responsive media) ───────────────────────────────────────
+const RICH_CSS =
+  ".forge-rich{overflow-wrap:break-word;line-height:1.6}" +
+  ".forge-rich img,.forge-rich video{max-width:100%;height:auto;border-radius:8px}" +
+  ".forge-rich iframe{max-width:100%;width:100%;aspect-ratio:16/9;border:0;border-radius:8px}" +
+  ".forge-rich table{max-width:100%;display:block;overflow-x:auto}";
+
+function RichText({ html }: { html: string }) {
+  return (
+    <>
+      <style>{RICH_CSS}</style>
+      <div className="forge-rich" style={{ overflowWrap: "break-word" }} dangerouslySetInnerHTML={{ __html: html }} />
+    </>
+  );
+}
+
+// ── Shared buy actions ────────────────────────────────────────────────────────
+function useBuy(product: IPublicProduct, cover: string | undefined, checkoutPath: string) {
+  const { addToCart } = useCart();
+  const add = (variant: IPublicProductVariant, opts?: { canIncreaseQuantity?: boolean; quantity?: number; coverImage?: string }) => {
+    addToCart({
+      productId: product.id,
+      productVariantId: variant.id,
+      title: product.title,
+      price: variant.price,
+      coverImage: opts?.coverImage ?? cover,
+      isGift: false,
+      quantity: opts?.quantity ?? 1,
+      canIncreaseQuantity: opts?.canIncreaseQuantity ?? true,
+      payWhatYouWant: !!variant.payWhatYouWant,
+      color: variant.color,
+      size: variant.size,
+      deliveryType: variant.deliveryType,
+    });
+  };
+  const buyNow = (variant: IPublicProductVariant, opts?: { canIncreaseQuantity?: boolean }) => {
+    add(variant, opts);
+    if (typeof window !== "undefined") window.location.href = checkoutPath;
+  };
+  return { add, buyNow };
+}
+
+// ── Standard product ──────────────────────────────────────────────────────────
+function StandardDetail({
+  product,
+  fmt,
+  checkoutPath,
+  className,
+  style,
+}: {
+  product: IPublicProduct;
+  fmt: (n: number) => string;
+  checkoutPath: string;
+  className?: string;
+  style?: React.CSSProperties;
+}) {
+  const t = useThemeTokens();
+  // Inclusive stores caption the price as tax-inclusive (display only).
+  const pricesIncludeTax = usePricesIncludeTax();
+  const cover = product.media?.find((m) => m.type === "image")?.url ?? product.media?.[0]?.url;
+  const { add } = useBuy(product, cover, checkoutPath);
+  const { isCartOpen } = useCart();
+
+  const [selectedColor, setSelectedColor] = useState<string | null>(null);
+  const [selectedSize, setSelectedSize] = useState<string | null>(null);
+  const [quantity, setQuantity] = useState(1);
+  const [imageIndex, setImageIndex] = useState(0);
+
+  // Colors that exist across variants (each flagged if it has any in-stock size).
+  const availableColors = useMemo(() => {
+    const colors = Array.from(new Set(product.variants.map((v) => v.color)));
+    return colors
+      .map((color) => ({
+        name: color,
+        hasAvailableSize: product.variants.some((v) => v.color === color && v.availabilityStatus === "active"),
+      }))
+      .filter((c) => c.name);
+  }, [product.variants]);
+
+  // Sizes for the chosen color.
+  const availableSizes = useMemo(() => {
+    if (!selectedColor) return [];
+    return product.variants
+      .filter((v) => v.color === selectedColor)
+      .map((v) => ({ name: v.size, isAvailable: v.availabilityStatus === "active" }))
+      .filter((s) => s.name);
+  }, [selectedColor, product.variants]);
+
+  // Products without color/size options (digital, service, simple physical) just
+  // use the default variant; otherwise the buyer must pick color + size.
+  const hasOptions = availableColors.length > 0;
+  const selectedVariant = useMemo(() => {
+    if (!hasOptions) return product.variants?.find((v) => v.isDefault) ?? product.variants?.[0];
+    if (!selectedColor || !selectedSize) return undefined;
+    return product.variants.find((v) => v.color === selectedColor && v.size === selectedSize);
+  }, [hasOptions, selectedColor, selectedSize, product.variants]);
+
+  // Prefer the selected variant's own images; fall back to the product's.
+  const images = useMemo(() => {
+    const vImgs = selectedVariant?.media?.filter((m) => m.type === "image") ?? [];
+    return vImgs.length > 0 ? vImgs : product.media?.filter((m) => m.type === "image") ?? [];
+  }, [selectedVariant, product.media]);
+
+  // Auto-select the first available color, then its first available size.
+  useEffect(() => {
+    if (!selectedColor && availableColors.length > 0) {
+      const first = availableColors.find((c) => c.hasAvailableSize) ?? availableColors[0];
+      setSelectedColor(first.name);
+    }
+  }, [availableColors, selectedColor]);
+  useEffect(() => {
+    if (selectedColor && !selectedSize && availableSizes.length > 0) {
+      const first = availableSizes.find((s) => s.isAvailable) ?? availableSizes[0];
+      setSelectedSize(first.name);
+    }
+  }, [selectedColor, selectedSize, availableSizes]);
+  useEffect(() => setImageIndex(0), [selectedVariant]);
+
+  // Mobile: once the inline Add-to-cart scrolls out of view, surface a sticky
+  // bottom bar so the primary action stays reachable. Hidden while the cart
+  // drawer is open so it doesn't overlap the drawer's checkout button.
+  const addRef = useRef<HTMLDivElement>(null);
+  const [showSticky, setShowSticky] = useState(false);
+  useEffect(() => {
+    const el = addRef.current;
+    if (!el || typeof IntersectionObserver === "undefined") return;
+    const obs = new IntersectionObserver(([entry]) => setShowSticky(!entry.isIntersecting), { threshold: 0 });
+    obs.observe(el);
+    return () => obs.disconnect();
+  }, []);
+
+  const outOfStock = !!selectedVariant && selectedVariant.availabilityStatus !== "active";
+  const canAdd = !!selectedVariant && !outOfStock;
+  const label = !selectedVariant ? "Select options" : outOfStock ? "Out of stock" : "Add to cart";
+  const addToCart = () => {
+    if (!canAdd || !selectedVariant) return;
+    add(selectedVariant, { quantity, coverImage: images[imageIndex]?.url ?? images[0]?.url });
+  };
+  const price = selectedVariant?.price ?? product.variants?.[0]?.price ?? 0;
+
+  const AddButton = ({ innerRef }: { innerRef?: React.Ref<HTMLDivElement> }) => (
+    <div ref={innerRef}>
+      <Button fullWidth disabled={!canAdd} onClick={addToCart}>
+        {label}
+      </Button>
+    </div>
+  );
+
+  return (
+    <>
+      <div
+        className={`grid grid-cols-1 md:grid-cols-2 gap-8${className ? ` ${className}` : ""}`}
+        style={{ color: t.text, fontFamily: t.fontFamily, ...style }}
+      >
+        {/* Gallery */}
+        <div>
+          {images[imageIndex]?.url ? (
+            <img
+              src={images[imageIndex].url}
+              alt={product.title}
+              style={{ width: "100%", aspectRatio: "1", objectFit: "cover", objectPosition: "top", borderRadius: t.cornerRadius }}
+            />
+          ) : (
+            cover && <img src={cover} alt={product.title} style={{ width: "100%", borderRadius: t.cornerRadius, objectFit: "cover", objectPosition: "top" }} />
+          )}
+          {images.length > 1 && (
+            <div style={{ display: "flex", gap: 8, overflowX: "auto", marginTop: 10 }}>
+              {images.map((img, i) => (
+                <button
+                  key={img.id ?? i}
+                  type="button"
+                  onClick={() => setImageIndex(i)}
+                  style={{
+                    flexShrink: 0,
+                    width: 64,
+                    height: 64,
+                    borderRadius: Math.max(6, t.cornerRadius - 2),
+                    overflow: "hidden",
+                    padding: 0,
+                    cursor: "pointer",
+                    background: "transparent",
+                    border: `2px solid ${i === imageIndex ? t.primary : "transparent"}`,
+                  }}
+                >
+                  <img src={img.url} alt="" style={{ width: "100%", height: "100%", objectFit: "cover", objectPosition: "top" }} />
+                </button>
+              ))}
+            </div>
+          )}
+        </div>
+
+        {/* Info */}
+        <div style={{ minWidth: 0 }}>
+          <h1 style={{ fontSize: 28, fontWeight: 800, fontFamily: t.headingFontFamily }}>{product.title}</h1>
+          {product.artist && <p style={{ opacity: 0.7, marginTop: 4 }}>{product.artist}</p>}
+          <p style={{ color: t.primary, fontWeight: 700, fontSize: 20, marginTop: 8 }}>
+            <PriceDisplay amount={price} pricesIncludeTax={pricesIncludeTax} formatAmount={fmt} mutedColor={t.text} captionStyle={{ opacity: 0.65 }} />
+            {selectedVariant?.payWhatYouWant && <span style={{ fontSize: 13, opacity: 0.7 }}> (Pay what you want)</span>}
+          </p>
+
+          {/* Color */}
+          {availableColors.length > 0 && (
+            <div style={{ marginTop: 18 }}>
+              <p style={{ fontSize: 15, marginBottom: 8 }}>Color</p>
+              <div style={{ display: "flex", flexWrap: "wrap", gap: 10, alignItems: "center", minHeight: 40 }}>
+                {availableColors.map((c) => {
+                  const isHex = /^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/.test(c.name);
+                  const on = selectedColor === c.name;
+                  return (
+                    <button
+                      key={c.name}
+                      type="button"
+                      title={c.name}
+                      disabled={!c.hasAvailableSize}
+                      onClick={() => {
+                        setSelectedColor(c.name);
+                        setSelectedSize(null);
+                      }}
+                      style={{
+                        position: "relative",
+                        width: on ? 34 : 30,
+                        height: on ? 34 : 30,
+                        borderRadius: "50%",
+                        cursor: c.hasAvailableSize ? "pointer" : "not-allowed",
+                        opacity: c.hasAvailableSize ? 1 : 0.5,
+                        background: isHex ? c.name : c.name.toLowerCase(),
+                        border: `2px solid ${on ? t.primary : a(t.text, 0.25)}`,
+                        boxShadow: on ? "0 2px 8px -2px rgba(0,0,0,0.3)" : "none",
+                        transition: "all .15s",
+                      }}
+                    />
+                  );
+                })}
+              </div>
+            </div>
+          )}
+
+          {/* Size */}
+          {selectedColor && availableSizes.length > 0 && (
+            <div style={{ marginTop: 18 }}>
+              <p style={{ fontSize: 15, marginBottom: 8 }}>Size</p>
+              <div style={{ display: "flex", flexWrap: "wrap", gap: 10 }}>
+                {availableSizes.map((s) => {
+                  const on = selectedSize === s.name;
+                  return (
+                    <button
+                      key={s.name}
+                      type="button"
+                      disabled={!s.isAvailable}
+                      onClick={() => setSelectedSize(s.name)}
+                      style={{
+                        padding: "8px 16px",
+                        borderRadius: t.cornerRadius,
+                        cursor: s.isAvailable ? "pointer" : "not-allowed",
+                        fontWeight: 600,
+                        color: s.isAvailable ? t.text : a(t.text, 0.4),
+                        background: on ? a(t.primary, 0.1) : s.isAvailable ? "transparent" : a(t.text, 0.06),
+                        border: `2px solid ${on ? t.primary : a(t.text, 0.2)}`,
+                      }}
+                    >
+                      {s.name}
+                    </button>
+                  );
+                })}
+              </div>
+            </div>
+          )}
+
+          {/* Quantity */}
+          {selectedVariant && (
+            <div style={{ marginTop: 18 }}>
+              <p style={{ fontSize: 15, marginBottom: 8 }}>Quantity</p>
+              <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
+                <QtyButton onClick={() => setQuantity((q) => Math.max(1, q - 1))} border={a(t.text, 0.25)} color={t.text}>
+                  −
+                </QtyButton>
+                <span style={{ fontSize: 17, fontWeight: 600, width: 40, textAlign: "center" }}>{quantity}</span>
+                <QtyButton onClick={() => setQuantity((q) => q + 1)} border={a(t.text, 0.25)} color={t.text}>
+                  +
+                </QtyButton>
+              </div>
+            </div>
+          )}
+
+          {/* Add to cart — ABOVE the description. */}
+          <div style={{ marginTop: 20 }}>
+            <AddButton innerRef={addRef} />
+          </div>
+
+          <div style={{ margin: "16px 0", opacity: 0.9 }}>
+            <RichText html={product.description || ""} />
+          </div>
+
+          {/* Product details */}
+          {selectedVariant && (
+            <div style={{ marginTop: 20, paddingTop: 16, borderTop: `1px solid ${a(t.text, 0.15)}` }}>
+              <p style={{ fontWeight: 700, fontSize: 13, opacity: 0.7, marginBottom: 6 }}>Product details</p>
+              <p style={{ fontSize: 14, opacity: 0.75 }}>Category: {product.category}</p>
+              <p style={{ fontSize: 14, opacity: 0.75 }}>SKU: {selectedVariant.upcCode || "N/A"}</p>
+            </div>
+          )}
+
+          {product.credits && (
+            <div style={{ marginTop: 20 }}>
+              <p style={{ fontWeight: 700, fontSize: 13, opacity: 0.7 }}>Credits</p>
+              <p style={{ whiteSpace: "pre-line", fontSize: 14, opacity: 0.7 }}>{product.credits}</p>
+            </div>
+          )}
+        </div>
+      </div>
+
+      {/* Verified-purchase reviews */}
+      <ReviewsSection entityType="product" entityId={product.id} initialAggregate={product.reviewAggregate} />
+
+      {/* Mobile sticky Add-to-cart (only when the inline one is scrolled past). */}
+      {showSticky && !isCartOpen && (
+        <div
+          className="md:hidden"
+          style={{
+            position: "fixed",
+            bottom: 0,
+            left: 0,
+            right: 0,
+            zIndex: 50,
+            padding: 12,
+            background: t.surface,
+            borderTop: `1px solid ${t.border}`,
+            boxShadow: "0 -8px 24px -16px rgba(0,0,0,0.4)",
+          }}
+        >
+          <AddButton />
+        </div>
+      )}
+    </>
+  );
+}
+
+function QtyButton({ onClick, border, color, children }: { onClick: () => void; border: string; color: string; children: React.ReactNode }) {
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      style={{
+        width: 40,
+        height: 40,
+        borderRadius: 8,
+        border: `1px solid ${border}`,
+        background: "transparent",
+        color,
+        fontSize: 18,
+        cursor: "pointer",
+        display: "inline-flex",
+        alignItems: "center",
+        justifyContent: "center",
+      }}
+    >
+      {children}
+    </button>
+  );
+}
+
+// ── Music product (album / single preview) ────────────────────────────────────
+function MusicDetail({
+  product,
+  fmt,
+  checkoutPath,
+  className,
+  style,
+}: {
+  product: IPublicProduct;
+  fmt: (n: number) => string;
+  checkoutPath: string;
+  className?: string;
+  style?: React.CSSProperties;
+}) {
+  const t = useThemeTokens();
+  // Inclusive stores caption the price as tax-inclusive (display only).
+  const pricesIncludeTax = usePricesIncludeTax();
+  const { pause, loadAndPlay, currentTrack, play, isPlaying } = useAudioPlayer();
+
+  const defaultVariant = product.variants.find((v) => v.isDefault) || product.variants[0];
+  const tracks = defaultVariant?.tracks ?? [];
+  const isSingle = tracks.length === 1;
+  const firstTrack = tracks[0];
+  const cover =
+    product.media.find((m) => m.type === "image")?.url ?? defaultVariant?.media.find((m) => m.type === "image")?.url;
+  const belongsToProduct = currentTrack?.productId === product.id;
+  const { add, buyNow } = useBuy(product, cover, checkoutPath);
+
+  const handlePlayPause = (track: IPublicProductTrack) => {
+    if (isPlaying && currentTrack?.id === track.id) return pause();
+    if (currentTrack?.id === track.id) return play();
+    const audioUrl = track.media.find((m) => m.type === "audio")?.url;
+    if (!audioUrl) return;
+    const toTrack = (t: IPublicProductTrack) => ({
+      id: t.id,
+      title: t.title,
+      url: t.media.find((m) => m.type === "audio")?.url ?? t.media[0]?.url ?? "",
+      coverImage: cover,
+      artist: t.artist || product.artist || "Unknown Artist",
+      productId: product.id,
+    });
+    loadAndPlay(toTrack(track), isSingle ? [] : tracks.map(toTrack));
+  };
+
+  if (!defaultVariant || !firstTrack) return <p style={{ color: t.text }}>No preview available.</p>;
+
+  const border = `1px solid ${a(t.primary, 0.2)}`;
+  const onPrimary = readableTextOn(t.primary);
+
+  return (
+    <div
+      className={className}
+      style={{ maxWidth: 900, margin: "0 auto", color: t.text, fontFamily: t.fontFamily, ...style }}
+    >
+      <div style={{ border, borderRadius: t.cornerRadius }}>
+        {/* Header */}
+        <div style={{ padding: 24, borderBottom: border }}>
+          <div className="flex flex-col md:flex-row" style={{ gap: 24 }}>
+            {/* Cover + play overlay */}
+            <div style={{ position: "relative", flexShrink: 0 }}>
+              <div className="w-full md:w-64 md:h-64" style={{ aspectRatio: "1 / 1", borderRadius: t.cornerRadius, overflow: "hidden", background: t.primary }}>
+                {cover ? (
+                  <img src={cover} alt={product.title} style={{ width: "100%", height: "100%", objectFit: "cover", objectPosition: "top" }} />
+                ) : (
+                  <div style={{ width: "100%", height: "100%", display: "grid", placeItems: "center" }}>
+                    <Music size={64} color={onPrimary} />
+                  </div>
+                )}
+              </div>
+              <button
+                aria-label={isPlaying && belongsToProduct ? "Pause" : "Play"}
+                onClick={() => {
+                  if (!currentTrack || !belongsToProduct || currentTrack.id === firstTrack.id) return handlePlayPause(firstTrack);
+                  return isPlaying ? pause() : play();
+                }}
+                style={{
+                  position: "absolute",
+                  left: 14,
+                  bottom: 14,
+                  background: t.primary,
+                  color: onPrimary,
+                  border: "none",
+                  borderRadius: "9999px",
+                  width: 52,
+                  height: 52,
+                  display: "grid",
+                  placeItems: "center",
+                  cursor: "pointer",
+                  boxShadow: "0 4px 14px rgba(0,0,0,0.25)",
+                }}
+              >
+                {isPlaying && belongsToProduct ? <Pause size={26} /> : <Play size={26} />}
+              </button>
+            </div>
+
+            {/* Info */}
+            <div style={{ flex: 1, minWidth: 0, display: "flex", flexDirection: "column", gap: 10 }}>
+              <div>
+                <h1 style={{ fontSize: 28, fontWeight: 800, fontFamily: t.headingFontFamily }}>{product.title}</h1>
+                <p style={{ fontSize: 14, fontWeight: 600, marginTop: 4, opacity: 0.85 }}>{product.artist}</p>
+              </div>
+              <span
+                style={{
+                  alignSelf: "flex-start",
+                  fontSize: 12,
+                  fontWeight: 600,
+                  padding: "3px 10px",
+                  borderRadius: 999,
+                  color: t.text,
+                  border: `1px solid ${a(t.text, 0.3)}`,
+                  background: a(t.text, 0.08),
+                }}
+              >
+                {isSingle ? "Single" : `Album · ${tracks.length} tracks`}
+              </span>
+              <div style={{ fontSize: 20, fontWeight: 700, color: t.primary }}>
+                <PriceDisplay amount={defaultVariant.price} pricesIncludeTax={pricesIncludeTax} formatAmount={fmt} mutedColor={t.text} captionStyle={{ opacity: 0.65 }} />
+              </div>
+              <div style={{ display: "flex", gap: 10, flexWrap: "wrap", marginTop: 4 }}>
+                <Button onClick={() => buyNow(defaultVariant, { canIncreaseQuantity: false })}>Buy now</Button>
+                <Button variant="outline" onClick={() => add(defaultVariant, { canIncreaseQuantity: false })}>
+                  Add to cart
+                </Button>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        {/* Description */}
+        {product.description && (
+          <div style={{ padding: 24, opacity: 0.85, fontSize: 14 }}>
+            <RichText html={product.description} />
+          </div>
+        )}
+
+        {/* Tracks (album only) */}
+        {!isSingle && (
+          <div style={{ padding: 24, display: "flex", flexDirection: "column", gap: 8 }}>
+            {tracks.map((track) => {
+              const audioUrl = track.media.find((m) => m.type === "audio")?.url;
+              const active = currentTrack?.id === track.id;
+              return (
+                <div key={track.id} style={{ border, borderRadius: t.cornerRadius, padding: 14, display: "flex", alignItems: "center", gap: 14 }}>
+                  <button
+                    onClick={() => handlePlayPause(track)}
+                    disabled={!audioUrl}
+                    aria-label={active && isPlaying ? "Pause" : "Play"}
+                    style={{
+                      width: 44,
+                      height: 44,
+                      flexShrink: 0,
+                      borderRadius: "9999px",
+                      border: "none",
+                      background: t.primary,
+                      color: onPrimary,
+                      cursor: audioUrl ? "pointer" : "not-allowed",
+                      display: "grid",
+                      placeItems: "center",
+                    }}
+                  >
+                    {active && isPlaying ? <Pause size={18} /> : <Play size={18} />}
+                  </button>
+                  <div style={{ flex: 1, minWidth: 0 }}>
+                    <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
+                      <span style={{ fontWeight: 600, fontSize: 14, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>
+                        {track.title || product.title}
+                      </span>
+                      {track.hasExplicitContent && (
+                        <span style={{ fontSize: 10, padding: "0 4px", borderRadius: 3, border: `1px solid ${a(t.primary, 0.3)}`, background: a(t.primary, 0.1) }}>
+                          E
+                        </span>
+                      )}
+                      {track.isFeatured && <Star size={14} color={t.primary} />}
+                    </div>
+                    <div style={{ fontSize: 12, opacity: 0.7 }}>{track.artist || product.artist}</div>
+                  </div>
+                </div>
+              );
+            })}
+          </div>
+        )}
+
+        {/* Credits */}
+        {product.credits && (
+          <div style={{ padding: 24, borderTop: border }}>
+            <p style={{ fontWeight: 700, fontSize: 13, opacity: 0.7 }}>Credits</p>
+            <p style={{ whiteSpace: "pre-line", fontSize: 14, opacity: 0.7 }}>{product.credits}</p>
+          </div>
+        )}
+      </div>
+
+      {/* Verified-purchase reviews */}
+      <ReviewsSection entityType="product" entityId={product.id} initialAggregate={product.reviewAggregate} />
+    </div>
+  );
+}