Trust Badges

---
/**
 * TrustBadges — Row of store guarantees (shipping, returns, secure payment, support).
 *
 * @param {Array<{icon: string, title: string, text?: string}>} items - Badges. Icons: truck|return|lock|chat|gift|leaf.
 * @param {string} variant - Style (cards|inline|divided). Default 'cards'.
 * @param {string} size - Density (sm|md|lg). Default 'md'.
 * @param {string} className - Extra class.
 *
 * Accessibility: plain list; icons are decorative.
 */
interface Item { icon: 'truck' | 'return' | 'lock' | 'chat' | 'gift' | 'leaf'; title: string; text?: string }
interface Props {
  items?: Item[];
  variant?: 'cards' | 'inline' | 'divided';
  size?: 'sm' | 'md' | 'lg';
  className?: string;
}

const {
  items = [
    { icon: 'truck', title: 'Free shipping', text: 'On orders over $75' },
    { icon: 'return', title: '30-day returns', text: 'No questions asked' },
    { icon: 'lock', title: 'Secure checkout', text: 'SSL & 3-D Secure' },
    { icon: 'chat', title: 'Real humans', text: 'Support 7 days a week' },
  ],
  variant = 'cards',
  size = 'md',
  className = '',
} = Astro.props;

const icons: Record<Item['icon'], string> = {
  truck: '<path d="M3 6h11v10H3zM14 10h4l3 3v3h-7"/><circle cx="7" cy="18" r="2"/><circle cx="17" cy="18" r="2"/>',
  return: '<path d="M4 10h11a5 5 0 0 1 0 10H9"/><path d="m8 6-4 4 4 4"/>',
  lock: '<rect x="4" y="11" width="16" height="10" rx="2"/><path d="M8 11V7a4 4 0 0 1 8 0v4"/>',
  chat: '<path d="M21 12a8 8 0 0 1-11.6 7.1L4 20l1.1-4.6A8 8 0 1 1 21 12z"/>',
  gift: '<rect x="3" y="8" width="18" height="5" rx="1"/><path d="M5 13v8h14v-8M12 8v13M12 8S10 3 7.5 4 9 8 12 8zm0 0s2-5 4.5-4S15 8 12 8z"/>',
  leaf: '<path d="M5 19c0-9 6-14 15-14 0 9-5 15-14 15"/><path d="M5 19c3-4 6-6 10-8"/>',
};
---

<div class="trust-badges-cq">
<ul class:list={['trust-badges', `trust-badges--${variant}`, `trust-badges--${size}`, className]}>
  {items.map((item) => (
    <li class="trust-badge">
      <span class="trust-badge__icon" aria-hidden="true">
        <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><Fragment set:html={icons[item.icon]} /></svg>
      </span>
      <span class="trust-badge__text">
        <strong>{item.title}</strong>
        {item.text && <span>{item.text}</span>}
      </span>
    </li>
  ))}
</ul>
</div>

<style>
  .trust-badges-cq { container-type: inline-size; }
  .trust-badges {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--sp-4, 1rem);
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .trust-badge { display: flex; align-items: center; gap: var(--sp-3, 0.75rem); }
  .trust-badges--cards .trust-badge {
    padding: var(--sp-4, 1rem) var(--sp-5, 1.25rem);
    border-radius: var(--r-md, 12px);
    border: 1px solid var(--c-border, rgb(var(--ink-rgb, 255 255 255) / 0.05));
    background: var(--c-surface, rgb(var(--ink-rgb, 255 255 255) / 0.02));
  }
  .trust-badges--divided { gap: 0; border-block: 1px solid var(--c-border, rgb(var(--ink-rgb, 255 255 255) / 0.05)); }
  .trust-badges--divided .trust-badge { padding: var(--sp-5, 1.25rem); }
  .trust-badges--divided .trust-badge + .trust-badge { border-left: 1px solid var(--c-border, rgb(var(--ink-rgb, 255 255 255) / 0.05)); }
  .trust-badges--sm .trust-badge { padding-block: var(--sp-3, 0.75rem); }
  .trust-badges--lg .trust-badge { padding-block: var(--sp-6, 1.5rem); }

  .trust-badge__icon {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: var(--r-sm, 8px);
    background: rgba(212, 160, 23, 0.1);
    color: var(--c-primary-light, #d4a017);
  }
  .trust-badges--inline .trust-badge__icon { width: 32px; height: 32px; background: transparent; }
  .trust-badge__text { display: grid; gap: 1px; }
  .trust-badge__text strong { font-size: 0.92rem; color: var(--c-text-1, #fff); }
  .trust-badge__text span { font-size: 0.8rem; color: var(--c-text-2, #a3a3a3); }

  @container (max-width: 640px) {
    .trust-badges { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2, 0.5rem); }
    .trust-badges--divided .trust-badge + .trust-badge { border-left: 0; }
    .trust-badge { flex-direction: column; align-items: flex-start; }
  }
</style>