<template>
  <div class="space-y-6">
    <header class="flex flex-wrap items-center justify-between gap-3">
      <div>
        <h1 class="text-2xl font-semibold">Reporting Calendar</h1>
        <p class="text-sm text-text-secondary">Monthly and weekly visibility with interactive report markers.</p>
      </div>
      <div class="flex gap-2">
        <button class="btn-ghost">Week</button>
        <button class="btn-primary">Month</button>
      </div>
    </header>

    <section class="grid gap-4 xl:grid-cols-[1.5fr_1fr]">
      <article class="card p-5">
        <div class="grid grid-cols-7 gap-2 text-xs text-text-secondary">
          <div v-for="d in days" :key="d" class="px-2 py-1">{{ d }}</div>
        </div>
        <div class="mt-2 grid grid-cols-7 gap-2">
          <div v-for="i in 35" :key="i" class="h-24 rounded-xl border border-surface-border bg-white p-2 transition hover:border-brand-300 hover:bg-brand-50/40">
            <p class="text-xs text-text-secondary">{{ i }}</p>
            <div class="mt-1 flex gap-1">
              <span class="h-2 w-2 rounded-full bg-brand-500"></span>
              <span class="h-2 w-2 rounded-full bg-cyan-400"></span>
            </div>
          </div>
        </div>
      </article>
      <article class="card p-5">
        <h2 class="font-semibold">Timeline Panel</h2>
        <div class="mt-4 space-y-3 text-sm">
          <div class="card-muted p-3">09:00 - IT Daily Sync</div>
          <div class="card-muted p-3">10:30 - HR Attendance Review</div>
          <div class="card-muted p-3">13:00 - Finance Progress Update</div>
          <div class="card-muted p-3">15:45 - Marketing Weekly Report</div>
        </div>
        <div class="mt-5 h-28 rounded-xl border border-surface-border bg-brand-50"></div>
      </article>
    </section>
  </div>
</template>

<script setup lang="ts">
const days = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
</script>
