---
import type { Dictionary } from "../lib/i18n";

interface Props {
  t: Dictionary;
}

const { t } = Astro.props;
const icons = ["🛡️", "🔒", "⚡", "✅"];
---

<div class="mx-auto grid w-full max-w-[720px] grid-cols-2 gap-2 px-4 py-4 sm:grid-cols-4">
  {
    t.trust.map((item, i) => (
      <div class="rounded-xl border border-[var(--color-line)] bg-[rgba(26,102,255,0.1)] px-2 py-3 text-center text-[11px] font-semibold text-[var(--color-muted)]">
        <div class="mb-1 text-base">{icons[i]}</div>
        {item}
      </div>
    ))
  }
</div>