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 (
    <div className="w-full bg-bg-base py-8 px-[var(--layout-padding-x)]">
      {/* Below lg (1024px): a CSS Grid with `grid-template-rows: subgrid` —
          not a fixed min-height guess — so every badge's "icon+title" box
          shares the SAME row track height (auto-sized to whichever
          badge's title actually needs 2 lines), and every description
          starts exactly at that row's bottom edge regardless of how many
          lines its own title happens to wrap to. Icon beside text (the
          lg: layout below) is what made a full row of 3 badges too wide
          below ~1024px in the first place (see git history: originally
          lg:-gated for exactly this, then briefly tried flex-wrap, which
          put an odd 3rd item alone on its own wrapped line and read as
          disorganized) — icon above text instead shrinks each badge down
          to just its text column's width, letting a real row of 3 fit
          without wrapping at all. Two structurally different layouts
          (icon-above-title here vs. icon-beside-a-title/description-
          stack at lg:) don't share one flexible markup shape cleanly, so
          this renders as two separate blocks (lg:hidden / hidden lg:flex)
          rather than fighting one shape across both breakpoints. */}
      <div
        className="lg:hidden grid justify-center gap-x-6 gap-y-1"
        style={{ gridTemplateColumns: `repeat(${items.length}, auto)`, gridTemplateRows: "repeat(2, auto)" }}
      >
        {items.map((item) => (
          <div key={item.id} className="grid row-span-2 justify-items-center" style={{ gridTemplateRows: "subgrid" }}>
            <div className="flex flex-col items-center gap-2">
              <div className="relative size-8 shrink-0">
                <Image alt="" src={item.icon} fill sizes="32px" className="object-contain" />
              </div>
              <p className="font-semibold text-body text-text-primary text-center">{item.title}</p>
            </div>
            <p className="text-body-sm text-text-muted text-center">{item.description}</p>
          </div>
        ))}
      </div>

      {/* lg+: original icon-beside-text row with dividers, unchanged. */}
      <div className="hidden lg:flex justify-center gap-12 items-center">
        {items.map((item, i) => (
          <div key={item.id} className="flex items-center gap-12">
            {i > 0 && <div className="h-10 w-px bg-border" />}
            <div className="flex items-center gap-4">
              <div className="relative size-8 shrink-0">
                <Image alt="" src={item.icon} fill sizes="32px" className="object-contain" />
              </div>
              <div className="flex flex-col gap-0.5 items-start">
                <p className="font-semibold text-body text-text-primary whitespace-nowrap">{item.title}</p>
                <p className="text-body-sm text-text-muted whitespace-nowrap">{item.description}</p>
              </div>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}