import Image from "next/image"; import { getTrustBadges } from "../lib/payload"; // Content now lives in Payload (TrustBadges collection) instead of being // hardcoded here, so copy (e.g. the shipping timeframe/threshold numbers) // can be updated without a code deploy. If the fetch fails or nothing is // seeded yet, the row just doesn't render rather than showing stale // hardcoded fallback text that could drift from the real numbers. export async function TrustRow() { const items = await getTrustBadges(); if (items.length === 0) return null; return ( // flex-wrap + justify-center instead of a hard sm:/lg: structural // breakpoint — CSS flexbox centers each *wrapped line* independently, // so badges naturally flow as many-per-row as actually fit at the // current width (1 per row on a narrow phone, 2 with the 3rd // centered below it once there's room, all 3 in one row at Desktop // widths) with no breakpoint math and no overflow risk, since an // item that doesn't fit just wraps instead of forcing a scrollbar // (this used to be a hard lg: exception for exactly that overflow // reason — see git history — no longer needed with wrap). Divider // bars between badges stay lg:-only for simplicity, since which // badges share a line isn't fixed/known ahead of time below lg:.
{items.map((item, i) => (
{i > 0 &&
}

{item.title}

{item.description}

))}
); }