import Head from 'next/head'; import SiteLayout from '../../components/SiteLayout'; import { buildMediaUrl, fetchProduct, fetchProducts } from '../../lib/api'; import ProductCard from '../../components/ProductCard'; import { useCart } from '../../context/CartContext'; export default function ProductPage({ product, suggestions }) { const { addItem } = useCart(); const imageUrl = buildMediaUrl(product.hero_image) || product.imageUrl; const price = Number(product.price || 0).toFixed(2); return ( {product.name} · Full Moon Bakehouse

{product.name}

{product.name}

${price}

{product.short_description ? (

{product.short_description}

) : null} {product.description ? (

{product.description}

) : null}

Inventory: {product.inventory_quantity ?? '—'} available Max {product.max_per_order ?? '—'} per order {product.allergens ? Allergens: {product.allergens} : null} {product.ingredients ? Ingredients: {product.ingredients} : null}

{Number.isFinite(product.max_per_order) ? ( Max {product.max_per_order} per order ) : null}

{suggestions.length ? (

More from this week's bake

Round out your order with another loaf, bagel pack, or sweet.

{suggestions.map((item) => ( ))}

) : null}

); } export async function getServerSideProps({ params }) { const { slug } = params; try { const product = await fetchProduct(slug); const products = await fetchProducts(); const suggestions = products .filter((item) => item.slug !== slug) .slice(0, 4) .map((item) => ({ ...item, imageUrl: buildMediaUrl(item.hero_image), isSample: false })); return { props: { product: { ...product, imageUrl: buildMediaUrl(product.hero_image), isSample: false }, suggestions, }, }; } catch (error) { console.warn('Product detail fallback', error); return { notFound: true }; } }