<template>
  <div class="village-container">
    <h3>My Village</h3>
    <div class="village-grid">
      <div v-for="n in 64" :key="n" class="grid-cell">
        <!-- Placeholder for village objects -->
      </div>
    </div>
    <div class="village-actions">
      <button>Build Mode</button>
    </div>
  </div>
</template>

<script setup lang="ts">
// No logic for now, just visual placeholders
</script>

<style scoped>
.village-container {
  text-align: center;
}

h3 {
  margin-bottom: 20px;
}

.village-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows: repeat(8, 1fr);
  width: 100%;
  max-width: 500px; /* Or other size that fits your design */
  margin: 0 auto;
  border: 1px solid #ccc;
  aspect-ratio: 1 / 1;
}

.grid-cell {
  border: 1px dotted #e0e0e0;
  background-color: #a3be8c; /* Grassy color */
}

.grid-cell:nth-child(5) { background-color: #bf616a; } /* Fake house */
.grid-cell:nth-child(10) { background-color: #ebcb8b; } /* Fake field */
.grid-cell:nth-child(11) { background-color: #ebcb8b; } /* Fake field */

.village-actions {
  margin-top: 20px;
}

button {
  padding: 10px 20px;
  background-color: #5e81ac;
  color: white;
  border: none;
  border-radius: 5px;
}
</style>
