<template>
  <section style="border-top:1px solid var(--line,rgba(255,255,255,.12));border-bottom:1px solid var(--line,rgba(255,255,255,.12));background:var(--bg2,#1f0f33);">
    <div style="max-width:1100px;margin:0 auto;padding:34px 24px;display:grid;grid-template-columns:repeat(4,1fr);gap:24px;text-align:center;" data-stats>
      <div>
        <div style="font-family:'Fredoka',sans-serif;font-weight:700;font-size:38px;line-height:1;background:linear-gradient(135deg,var(--accent,#ff5fa2),var(--accent2,#a06bff));-webkit-background-clip:text;background-clip:text;color:transparent;">{{ statOneValue }}</div>
        <div style="font-size:14px;color:var(--muted,#c9b8da);margin-top:6px;">{{ statOneLabel }}</div>
      </div>
      <div>
        <div style="font-family:'Fredoka',sans-serif;font-weight:700;font-size:38px;line-height:1;background:linear-gradient(135deg,var(--accent,#ff5fa2),var(--accent2,#a06bff));-webkit-background-clip:text;background-clip:text;color:transparent;">{{ statTwoValue }}</div>
        <div style="font-size:14px;color:var(--muted,#c9b8da);margin-top:6px;">Kategorien</div>
      </div>
      <div>
        <div style="font-family:'Fredoka',sans-serif;font-weight:700;font-size:38px;line-height:1;background:linear-gradient(135deg,var(--accent,#ff5fa2),var(--accent2,#a06bff));-webkit-background-clip:text;background-clip:text;color:transparent;">{{ statThreeValue }}</div>
        <div style="font-size:14px;color:var(--muted,#c9b8da);margin-top:6px;">{{ statThreeLabel }}</div>
      </div>
      <div>
        <div style="font-family:'Fredoka',sans-serif;font-weight:700;font-size:38px;line-height:1;background:linear-gradient(135deg,var(--accent,#ff5fa2),var(--accent2,#a06bff));-webkit-background-clip:text;background-clip:text;color:transparent;">∞</div>
        <div style="font-size:14px;color:var(--muted,#c9b8da);margin-top:6px;">Chaos &amp; Glitzer</div>
      </div>
    </div>
  </section>
</template>

<script setup lang="ts">
defineProps<{
  statOneValue: string
  statOneLabel: string
  statTwoValue: string
  statThreeValue: string
  statThreeLabel: string
}>()
</script>
