---
interface Props {
  variant?: 'default' | 'compact';
  class?: string;
}

const { variant = 'default', class: className = '' } = Astro.props;

const usps = [
  {
    anchor: 'maatfilter',
    title: 'Slim maatfilter',
    subtitle: 'Per merk & model',
    icon: 'ruler',
  },
  {
    anchor: 'pricewatch',
    title: 'Pricewatch + historie',
    subtitle: 'Alerts op jouw doelprijs',
    icon: 'bell',
  },
  {
    anchor: 'shops',
    title: '45+ NL shops',
    subtitle: 'In één oogopslag',
    icon: 'compare',
  },
  {
    anchor: 'onafhankelijk',
    title: 'Gratis & eerlijk',
    subtitle: 'Wij verkopen niets zelf',
    icon: 'shield',
  },
];

const padding = variant === 'compact' ? 'p-3 sm:p-4' : 'p-4 sm:p-5';
const gap = variant === 'compact' ? 'gap-2 sm:gap-3' : 'gap-3 sm:gap-4';
---

<section class:list={["mx-auto max-w-7xl px-4 sm:px-6", className]}>
  <div class:list={[
    "rounded-2xl border border-border/50 bg-bg-card",
    padding,
  ]}>
    <div class:list={[
      "grid grid-cols-2 sm:grid-cols-4",
      gap,
    ]}>
      {usps.map(usp => (
        <a
          href={`/waarom-sneakerpicks#${usp.anchor}`}
          class="group flex items-center gap-3 rounded-xl p-2 transition-colors hover:bg-bg-elevated"
        >
          <span class="flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-accent/10 text-accent transition-colors group-hover:bg-accent/20">
            {usp.icon === 'ruler' && (
              <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" aria-hidden="true">
                <path stroke-linecap="round" stroke-linejoin="round" d="M3 8l4-4 14 14-4 4L3 8z" />
                <path stroke-linecap="round" stroke-linejoin="round" d="M7 8l2 2M10 5l2 2M13 8l2 2M16 11l2 2M10 11l2 2" />
              </svg>
            )}
            {usp.icon === 'bell' && (
              <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" aria-hidden="true">
                <path stroke-linecap="round" stroke-linejoin="round" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" />
              </svg>
            )}
            {usp.icon === 'compare' && (
              <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" aria-hidden="true">
                <path stroke-linecap="round" stroke-linejoin="round" d="M8 7h12m0 0l-4-4m4 4l-4 4m0 6H4m0 0l4 4m-4-4l4-4" />
              </svg>
            )}
            {usp.icon === 'shield' && (
              <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" aria-hidden="true">
                <path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
              </svg>
            )}
          </span>
          <span class="min-w-0 leading-tight">
            <span class="block truncate text-sm font-bold text-text group-hover:text-accent">
              {usp.title}
            </span>
            <span class="block truncate text-xs text-text-muted">
              {usp.subtitle}
            </span>
          </span>
        </a>
      ))}
    </div>

    <div class="mt-3 border-t border-border/30 pt-3 text-center sm:mt-4 sm:pt-4">
      <a
        href="/waarom-sneakerpicks"
        class="inline-flex items-center gap-1 text-xs font-bold uppercase tracking-widest text-accent transition-colors hover:text-accent-dim"
      >
        Waarom SneakerPicks?
        <svg class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5" aria-hidden="true">
          <path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7" />
        </svg>
      </a>
    </div>
  </div>
</section>