<template>
  <div class="dashboard">
    <h2>Dashboard</h2>
    <p>Willkommen im myCRM Dashboard!</p>
    
    <div class="dashboard-grid">
      <Card>
        <template #title>Kontakte</template>
        <template #content>
          <p>Gesamt: <strong>0</strong></p>
        </template>
      </Card>
      
      <Card>
        <template #title>Unternehmen</template>
        <template #content>
          <p>Gesamt: <strong>0</strong></p>
        </template>
      </Card>
      
      <Card>
        <template #title>Offene Deals</template>
        <template #content>
          <p>Gesamt: <strong>0</strong></p>
        </template>
      </Card>
      
      <Card>
        <template #title>Umsatz (MTD)</template>
        <template #content>
          <p><strong>0 €</strong></p>
        </template>
      </Card>
    </div>
  </div>
</template>

<script setup>
import Card from 'primevue/card';
</script>

<style scoped lang="scss">
.dashboard {
  h2 {
    margin-bottom: 1rem;
    font-size: 1.5rem;
    
    @media (min-width: 768px) {
      font-size: 2rem;
    }
  }
  
  p {
    font-size: 0.95rem;
    
    @media (min-width: 768px) {
      font-size: 1rem;
    }
  }
}

.dashboard-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin-top: 1.5rem;
  
  @media (min-width: 640px) {
    grid-template-columns: repeat(2, 1fr);
  }
  
  @media (min-width: 1024px) {
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
    margin-top: 2rem;
  }
}
</style>
