<script setup>
import DashboardLayout from '../layouts/DashboardLayout.vue'

const headings = [
  { tag: 'h1', label: 'h1. Heading',    size: 'text-5xl', weight: 'font-light' },
  { tag: 'h2', label: 'h2. Heading',    size: 'text-4xl', weight: 'font-light' },
  { tag: 'h3', label: 'h3. Heading',    size: 'text-3xl', weight: 'font-normal' },
  { tag: 'h4', label: 'h4. Heading',    size: 'text-2xl', weight: 'font-normal' },
  { tag: 'h5', label: 'h5. Heading',    size: 'text-xl',  weight: 'font-medium' },
  { tag: 'h6', label: 'h6. Heading',    size: 'text-base',weight: 'font-medium' },
]

const weights = [
  { label: 'Light 300',  class: 'font-light',   value: 300 },
  { label: 'Regular 400',class: 'font-normal',  value: 400 },
  { label: 'Medium 500', class: 'font-medium',  value: 500 },
  { label: 'Bold 700',   class: 'font-bold',    value: 700 },
  { label: 'Black 900',  class: 'font-black',   value: 900 },
]

const colors = [
  { label: 'Primary',   class: 'text-primary' },
  { label: 'Secondary', class: 'text-secondary' },
  { label: 'Success',   class: 'text-success' },
  { label: 'Warning',   class: 'text-warning' },
  { label: 'Danger',    class: 'text-danger' },
  { label: 'Info',      class: 'text-info' },
  { label: 'Dark',      class: 'text-dark' },
]
</script>

<template>
  <DashboardLayout>
    <div class="grid gap-6 lg:grid-cols-2">

      <!-- Headings -->
      <div class="rounded-2xl bg-white p-6 shadow-soft-md">
        <h6 class="mb-1 text-sm font-bold text-dark">Headings</h6>
        <p class="mb-6 text-xs text-secondary">Roboto Variable — font-light through font-medium</p>
        <div class="space-y-3">
          <component
            :is="h.tag"
            v-for="h in headings"
            :key="h.tag"
            :class="[h.size, h.weight, 'text-dark leading-tight']"
          >
            {{ h.label }}
          </component>
        </div>
      </div>

      <!-- Font weights -->
      <div class="rounded-2xl bg-white p-6 shadow-soft-md">
        <h6 class="mb-1 text-sm font-bold text-dark">Font Weights</h6>
        <p class="mb-6 text-xs text-secondary">Roboto Variable covers 100–900 in a single file</p>
        <div class="space-y-4">
          <div v-for="w in weights" :key="w.value">
            <p class="mb-0.5 text-xs text-secondary">{{ w.label }}</p>
            <p class="text-xl text-dark" :class="w.class">
              The quick brown fox jumps over the lazy dog
            </p>
          </div>
        </div>
      </div>

      <!-- Body & UI text -->
      <div class="rounded-2xl bg-white p-6 shadow-soft-md">
        <h6 class="mb-1 text-sm font-bold text-dark">Body & UI Text</h6>
        <p class="mb-6 text-xs text-secondary">Scale used across components</p>
        <div class="space-y-4">
          <div>
            <p class="mb-1 text-xs text-secondary">text-base (1rem) — body</p>
            <p class="text-base text-dark">Design systems give teams a shared language for building consistent, scalable products.</p>
          </div>
          <div>
            <p class="mb-1 text-xs text-secondary">text-sm (0.875rem) — UI labels</p>
            <p class="text-sm text-dark">Design systems give teams a shared language for building consistent, scalable products.</p>
          </div>
          <div>
            <p class="mb-1 text-xs text-secondary">text-xs (0.75rem) — captions, meta</p>
            <p class="text-xs text-secondary">Design systems give teams a shared language for building consistent, scalable products.</p>
          </div>
          <div>
            <p class="mb-1 text-xs text-secondary">Inline elements</p>
            <p class="text-sm text-dark">
              Regular text with <strong>bold emphasis</strong>, <em>italic style</em>,
              and <code class="rounded bg-gray-100 px-1.5 py-0.5 font-mono text-xs text-primary">inline code</code> fragments.
            </p>
          </div>
        </div>
      </div>

      <!-- Text colors -->
      <div class="rounded-2xl bg-white p-6 shadow-soft-md">
        <h6 class="mb-1 text-sm font-bold text-dark">Semantic Text Colors</h6>
        <p class="mb-6 text-xs text-secondary">All map to @theme --color-* tokens</p>
        <div class="space-y-3">
          <div v-for="c in colors" :key="c.label" class="flex items-center gap-4">
            <span class="w-20 shrink-0 text-xs text-secondary">{{ c.label }}</span>
            <p class="text-sm font-medium" :class="c.class">
              The quick brown fox jumps over the lazy dog
            </p>
          </div>
        </div>
      </div>

    </div>
  </DashboardLayout>
</template>
