import { FREE_SHIPPING_THRESHOLD, TOTAL_DAYS_DE } from "../lib/shipping";
import { formatPrice } from "../lib/products";

const items = [
  {
    icon: "/icon-trust-shipping.png",
    title: "Schneller Versand",
    desc: `In ${TOTAL_DAYS_DE.min}–${TOTAL_DAYS_DE.max} Werktagen bei dir.`,
  },
  {
    icon: "/icon-trust-free-shipping.png",
    title: "Versandkostenfrei",
    desc: `Ab ${formatPrice(FREE_SHIPPING_THRESHOLD)} Bestellwert innerhalb DE.`,
  },
  { icon: "/icon-trust-heart.png", title: "Mit Liebe verpackt", desc: "Für mehr Freude beim Auspacken." },
];

export function TrustRow() {
  return (
    <div className="w-full bg-bg-base flex flex-col md:flex-row gap-6 md:gap-12 items-center justify-center py-8 px-[var(--layout-padding-x)]">
      {items.map((item, i) => (
        <div key={item.title} className="flex items-center gap-6 md:gap-12">
          {i > 0 && <div className="hidden md:block h-10 w-px bg-border" />}
          <div className="flex gap-4 items-center">
            <img alt="" src={item.icon} className="size-8 shrink-0 object-contain" />
            <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.desc}</p>
            </div>
          </div>
        </div>
      ))}
    </div>
  );
}