// ProductDetail.jsx, Product detail page (PDP) anchored on tiered volume pricing. const ProductDetailPage = ({ onNavigate, onRFQ, productId = "p01" }) => { const vp = useViewport(); const product = PRODUCTS.find(p => p.id === productId) || PRODUCTS[0]; const supplier = SUPPLIERS.find(s => s.id === product.supplier); const priceModel = derivePricing(product); const tiers = priceModel.tiers; const [qty, setQty] = useState(2000); const [tab, setTab] = useState("specs"); const activeTier = pickTier(tiers, qty); const subtotal = qty * activeTier.unit; const savingsVsTier1 = qty * (tiers[0].unit - activeTier.unit); const otherProducts = PRODUCTS .filter(p => p.supplier === product.supplier && p.id !== product.id) .slice(0, 4); const heroCols = vp.isWide ? "560px 1fr" : (vp.isDesktop ? "440px 1fr" : "1fr"); const calcCols = vp.isDesktop ? "1.6fr 1fr" : "1fr"; const tabContentCols = vp.isDesktop ? "1fr 320px" : "1fr"; return (
{/* ============================================================ HERO */}
{ e.preventDefault(); onNavigate("home"); }} style={{ color: "var(--color-fg-muted)", border: 0 }}>Home / { e.preventDefault(); onNavigate("products"); }} style={{ color: "var(--color-fg-muted)", border: 0 }}>Products / { e.preventDefault(); onNavigate("products"); }} style={{ color: "var(--color-fg-muted)", border: 0 }}>{categoryLabel(product.category)} / {product.name}
HS {priceModel.hs} SKU {product.id.toUpperCase()}-{priceModel.pack.replace(/\W+/g,"")}

{product.name}

{supplier.initials}
{supplier.verified && Verified} {supplier.audited && Audited}
{/* Key spec strip — 4 cells on wide, 2x2 on mobile */}
{[ { label: "MOQ", value: priceModel.moq }, { label: "Lead time", value: supplier.leadTime }, { label: "FOB port", value: supplier.country === "vn" ? "Hai Phong" : "Yokohama" }, { label: "Pack", value: priceModel.pack }, ].map((k, i) => { const isMobile2x2 = vp.isMobile; const borderLeft = isMobile2x2 ? (i % 2 ? "1px solid var(--color-divider)" : 0) : (i ? "1px solid var(--color-divider)" : 0); const borderTop = isMobile2x2 && i >= 2 ? "1px solid var(--color-divider)" : 0; return (
{k.label}
{k.value}
); })}
Certifications on file
{product.certs.map(c => ( {c} ))} FDA reg.

{priceModel.description}

{/* ============================================================ PRICE BREAKDOWN */}
Volume pricing

Order more, pay less per {priceModel.unit}.

Indicative FOB {supplier.country === "vn" ? "Hai Phong" : "Yokohama"} pricing for the standard pack. Tier prices are confirmed in your RFQ, incoterm, payment terms and certifications adjust the final quote.

Verified price. JVFood reviews this supplier's price list quarterly and flags movement greater than ±5%.
Last reviewed 2026-04-12.
{/* Tier ladder */} {/* Calculator + landed estimate */}
{/* ============================================================ TAB STRIP */}
{[ { id: "specs", label: "Product specs" }, { id: "packing", label: "Packing & lots" }, { id: "logistics", label: "Logistics" }, { id: "compliance", label: "Compliance" }, { id: "supplier", label: "Supplier" }, ].map(t => ( ))}
{tab === "specs" && } {tab === "packing" && } {tab === "logistics" && } {tab === "compliance" && } {tab === "supplier" && }
{/* ============================================================ MORE FROM SUPPLIER */}
More from this supplier

Other products from {supplier.name}

{ e.preventDefault(); onNavigate("profile", supplier.id); }} style={{ fontSize: 13, color: "var(--jv-navy-800)", border: 0, borderBottom: "1px solid var(--color-border)", paddingBottom: 2 }}>View full catalog →
{(otherProducts.length ? otherProducts : PRODUCTS.slice(1, 5)).map(p => ( ))}
); }; // ============================================================================= function derivePricing(p) { const m = p.price.match(/(\w{3})\s+([\d\s,.]+)\s*\/\s*(\w+)/); const currency = m ? m[1] : "USD"; const baseStr = m ? m[2].replace(/[\s,]/g, "") : "0"; const base = parseFloat(baseStr); const unit = m ? (m[3] === "u" ? "unit" : m[3]) : "kg"; const moqStr = p.moq; const moqQty = parseMoq(moqStr); const k = moqQty; const tierDefs = [ { id: "t1", lo: k, hi: k * 2, mult: 1.05, label: "Starter" }, { id: "t2", lo: k * 2, hi: k * 10, mult: 1.00, label: "Standard" }, { id: "t3", lo: k * 10, hi: k * 40, mult: 0.92, label: "Volume" }, { id: "t4", lo: k * 40, hi: Infinity, mult: 0.84, label: "Container" }, ]; const tiers = tierDefs.map(t => ({ ...t, unit: round(base * t.mult, currency), savings: Math.round((1 - t.mult) * 100), })); return { currency, unit, base, tiers, hs: hsForCategory(p.category), pack: packForProduct(p), nameJa: jaName(p), description: descFor(p), harvest: harvestFor(p), moq: p.moq, moqQty, }; } function parseMoq(s) { if (!s) return 500; const m = s.match(/([\d.]+)\s*(t|kg|u)/i); if (!m) return 500; const n = parseFloat(m[1]); return m[2].toLowerCase() === "t" ? n * 1000 : n; } function round(v, cur) { if (cur === "JPY") return Math.round(v / 10) * 10; return Math.round(v * 100) / 100; } function pickTier(tiers, qty) { for (let i = tiers.length - 1; i >= 0; i--) { if (qty >= tiers[i].lo) return tiers[i]; } return tiers[0]; } function formatMoney(v, cur) { if (cur === "JPY") return `JPY ${Math.round(v).toLocaleString("en-US")}`; return `USD ${v.toFixed(2)}`; } function formatTierUnit(v, cur) { if (cur === "JPY") return Math.round(v).toLocaleString("en-US"); return v.toFixed(2); } function formatRange(lo, hi, unit) { const fmt = (n) => { if (n === Infinity) return "+"; if (unit === "kg" && n >= 1000) return `${(n / 1000).toLocaleString("en-US", { maximumFractionDigits: 1 })} t`; return `${n.toLocaleString("en-US")} ${unit === "unit" ? "u" : unit}`; }; if (hi === Infinity) return `${fmt(lo)}+`; return `${fmt(lo)} – ${fmt(hi)}`; } function formatQty(n, unit) { if (unit === "kg" && n >= 1000) return `${(n / 1000).toLocaleString("en-US", { maximumFractionDigits: n % 1000 === 0 ? 0 : 1 })} t`; return `${Math.round(n).toLocaleString("en-US")} ${unit === "unit" ? "u" : unit}`; } // ============================================================================= // TIER LADDER — 4 cols desktop, 2x2 grid on mobile // ============================================================================= const TierLadder = ({ tiers, priceModel, activeTierId, onPickQty, vp }) => { const cols = vp.isMobile ? "1fr 1fr" : "repeat(4, 1fr)"; return (
{tiers.map((t, i) => { const active = t.id === activeTierId; const discount = t.mult < 1 ? Math.round((1 - t.mult) * 100) : null; const premium = t.mult > 1 ? Math.round((t.mult - 1) * 100) : null; const isMobile2x2 = vp.isMobile; const borderLeft = isMobile2x2 ? (i % 2 ? "1px solid var(--color-divider)" : 0) : (i ? "1px solid var(--color-divider)" : 0); const borderTop = isMobile2x2 && i >= 2 ? "1px solid var(--color-divider)" : 0; return ( ); })}
Prices indicative · FOB {priceModel.currency === "USD" ? "Hai Phong" : "Yokohama"} Excludes freight, insurance, duties {!vp.isMobile && LC at sight / TT 30% advance accepted} Quoted in {priceModel.currency}
); }; // ============================================================================= const LotCalculator = ({ tiers, priceModel, qty, setQty, activeTier, subtotal, savings, onRFQ, supplier, vp }) => { const max = priceModel.moqQty * 80; return (
Lot calculator · request a quote Indicative · pre-RFQ
setQty(Math.max(priceModel.moqQty, parseInt(e.target.value) || priceModel.moqQty))} style={{ flex: 1, minWidth: 0, padding: "0 14px", border: "1px solid var(--color-border)", fontFamily: "var(--font-mono)", fontSize: 18, fontWeight: 600, color: "var(--jv-navy-800)", textAlign: "center", outline: "none", borderRadius: 0 }}/>
Subtotal
{formatMoney(subtotal, priceModel.currency)}
@ {formatMoney(activeTier.unit, priceModel.currency)} / {priceModel.unit}
{tiers.map((t, i) => { const left = i === 0 ? 0 : Math.min(100, (Math.log(t.lo) - Math.log(priceModel.moqQty)) / (Math.log(max) - Math.log(priceModel.moqQty)) * 100); if (i === 0) return null; return (
{formatQty(t.lo, priceModel.unit)}
); })} setQty(Math.round(Math.exp(parseFloat(e.target.value))))} style={{ position: "absolute", left: -2, right: -2, top: 16, width: "calc(100% + 4px)", height: 18, opacity: 0, cursor: "pointer", margin: 0 }}/>
Quick fill: {[priceModel.moqQty, priceModel.moqQty * 5, priceModel.moqQty * 20, priceModel.moqQty * 50].map((q, i) => ( ))}
{savings > 0 && (
Saving {formatMoney(savings, priceModel.currency)} vs Tier 1
)}
Sent to {supplier ? supplier.name : "supplier"}
Reply within 1 business day · No buyer fees
); }; // ============================================================================= const PaymentOptions = ({ priceModel, subtotal }) => { const rows = [ { label: "FOB subtotal", v: subtotal, muted: false }, { label: "Ocean freight (est.)", v: subtotal * 0.06, muted: true }, { label: "Insurance (0.3%)", v: subtotal * 0.003, muted: true }, { label: "Inspection (SGS)", v: priceModel.currency === "JPY" ? 80000 : 540, muted: true, flat: true }, ]; const cif = rows.reduce((s, r) => s + r.v, 0); return (
Landed estimate CIF Yokohama · indicative
{rows.map((r, i) => (
{r.label} {formatMoney(r.v, priceModel.currency)}
))}
CIF total (est.) {formatMoney(cif, priceModel.currency)}
Freight uses the 12-week average for VN → JP refrigerated TEU. JVFood verifies and replaces with live carrier quotes on RFQ.
); }; // ============================================================================= // GALLERY // ============================================================================= const Gallery = ({ product }) => { const [idx, setIdx] = useState(0); const altImgs = [ product.img, "https://images.unsplash.com/photo-1565680018434-b513d5e5fd47?auto=format&fit=crop&w=600&q=70", "https://images.unsplash.com/photo-1535990379313-5764f6e0a506?auto=format&fit=crop&w=600&q=70", "https://images.unsplash.com/photo-1606851094291-6efae152bb87?auto=format&fit=crop&w=600&q=70", "https://images.unsplash.com/photo-1599458252573-56ae36120de1?auto=format&fit=crop&w=600&q=70", ]; return (
{product.name} { e.currentTarget.style.opacity = 0; }}/>
Origin {product.origin.toUpperCase()}
{idx + 1} / {altImgs.length}
{altImgs.map((src, i) => ( ))}
); }; // ============================================================================= // TAB CONTENT // ============================================================================= const SpecsTab = ({ priceModel, vp }) => (
Product specifications

Datasheet

); const PackingTab = ({ priceModel, tiers, vp }) => (
Packing & lot composition

How it ships

{[ { eyebrow: "Inner", v: "1.0 kg", cap: "Vacuum-sealed retail block", icon: "package" }, { eyebrow: "Carton", v: "10 kg", cap: "Wax-coated master carton × 10", icon: "package" }, { eyebrow: "Pallet", v: "1 000 kg", cap: "100 cartons · EUR1 pallet", icon: "package" }, ].map(c => (
{c.eyebrow}
{c.v}
{c.cap}
))}

Container loading at each tier

{[ { tier: "Tier 1 · Starter", q: "500 kg", c: "50", p: "0.5", ct: "LCL groupage", fill: "5%" }, { tier: "Tier 2 · Standard", q: "2 t", c: "200", p: "2", ct: "LCL groupage", fill: "20%" }, { tier: "Tier 3 · Volume", q: "10 t", c: "1 000", p: "10", ct: "20' RF", fill: "100%" }, { tier: "Tier 4 · Container", q: "20 t", c: "2 000", p: "20", ct: "40' RF HC", fill: "100%" }, ].map((r, i) => ( ))}
Tier Quantity Cartons Pallets Container Fill
{r.tier} {r.q} {r.c} {r.p} {r.ct} {r.fill}
); const LogisticsTab = ({ supplier, priceModel, vp }) => (
Logistics

Shipping & terms

); const ComplianceTab = ({ certs, vp }) => (
Compliance & documents

Audit-ready paperwork

{certs.map((c, i) => (
{c}
Issued 2024-08 · Valid through 2027-08 · Auditor: SGS Vietnam
))} {["Lab test report, heavy metals & antibiotics (2026-03)", "Phytosanitary template (JP-MAFF compliant)", "Allergen statement"].map((d, i) => (
{d}
))}
); const SupplierMini = ({ supplier, onNavigate, vp }) => (
Supplier

About {supplier.name}

{supplier.blurb}

{[ { l: "Established", v: supplier.established }, { l: "Employees", v: supplier.employees }, { l: "Revenue", v: supplier.revenueBand }, ].map(c => (
{c.l} {c.v}
))}
); // ============================================================================= const SpecGrid = ({ rows, vp }) => (
{rows.map((r, i) => (
{r.label}
{r.value}
))}
); const FactCardP = ({ label, children }) => (
{label} {children}
); const MiniProductCard = ({ product: p, onNavigate }) => { const [hover, setHover] = useState(false); return (
setHover(true)} onMouseLeave={() => setHover(false)} onClick={() => onNavigate && onNavigate("product-detail", p.id)} style={{ background: "#fff", border: `1px solid ${hover ? "var(--color-border-strong)" : "var(--color-border)"}`, borderRadius: 6, overflow: "hidden", cursor: "pointer", boxShadow: hover ? "var(--shadow-1)" : "none", transition: "border-color 120ms var(--ease-standard), box-shadow 120ms var(--ease-standard)", }}>
{ e.currentTarget.style.opacity = 0; }}/>
{p.name}
MOQ {p.moq} {p.price}
); }; function categoryLabel(id) { const c = PRODUCT_CATEGORIES.find(x => x.id === id); return c ? c.label : "Products"; } function hsForCategory(c) { return ({ seafood: "0306.17.10", frozen: "1605.21.00", ingredients: "2103.90.40", processed: "1902.20.00", dried: "0813.40.00", fruits: "0810.90.00", beverages: "2009.89.00", "tea-coffee": "0902.30.00", petfood: "2309.10.00", snacks: "1905.31.00", })[c] || "0000.00.00"; } function packForProduct(p) { if (p.category === "seafood") return "10 kg carton"; if (p.category === "frozen") return "10 kg carton"; if (p.category === "dried") return "10 kg sack"; if (p.category === "ingredients") return "Carton × 12"; return "Master carton"; } function jaName(p) { return ({ p01: "ブラックタイガーエビ HLSO 16/20", p02: "パンガシウス フィレ IQF", p03: "北海道産帆立 刺身グレード", p04: "冷凍さば ラウンド", p05: "鮪ロイン サク", })[p.id] || p.name; } function descFor(p) { return p.category === "seafood" ? "Pond-farmed Penaeus monodon, headless and shell-on, individually quick-frozen on a tunnel freezer within 4 hours of harvest. Sized 16–20 count per lb for retail tempura and gyoza filling applications. ASC chain-of-custody from farm to processor; no SO₂ or phosphate treatment." : "Manufactured at a BRCGS-audited facility under HACCP. Specification sheet, allergen statement, and recent third-party lab report available on request, JVFood pre-screens each document for buyers."; } function harvestFor(p) { if (p.origin === "vn") return "FAO 71 (Western Central Pacific)"; return "Hokkaido / Sea of Okhotsk"; } Object.assign(window, { ProductDetailPage });