---
import DmLayout from "@/layouts/DmLayout.astro";
import DmCard from "@/components/dm/DmCard.astro";
import DiceRoller from "@/components/dm/DiceRoller.astro";
import InitiativeTracker from "@/components/dm/InitiativeTracker.astro";
import Open5eReference from "@/components/dm/Open5eReference.astro";
import NotesPanel from "@/components/dm/NotesPanel.astro";
import { dmTranslations as T } from "@/i18n/dm-translations";
---

<DmLayout>
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
    <!-- Subtitle -->
    <p class="text-[var(--text-secondary)] text-base mb-4">
      {T.subtitle}
    </p>

    <!-- Anchor Navigation -->
    <nav aria-label="Инструменты" class="mb-8">
      <ul class="flex flex-wrap gap-2">
        {[
          { id: "dice", label: T.anchorDice },
          { id: "initiative", label: T.anchorInitiative },
          { id: "reference", label: T.anchorReference },
          { id: "notes", label: T.anchorNotes },
        ].map((item) => (
          <li>
        <a
          href={`#${item.id}`}
          class="inline-flex items-center px-3 py-1.5 rounded-full bg-[var(--bg-card)] border border-[var(--border-color)] text-[var(--text-secondary)] text-sm font-medium hover:bg-[var(--accent)]/10 hover:text-[var(--accent)] hover:border-[var(--accent)]/30 active:bg-[var(--accent)]/20 transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--accent)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--bg-primary)]"
        >
              {item.label}
            </a>
          </li>
        ))}
      </ul>
    </nav>

    <!-- Dashboard Grid -->
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
      <!-- Dice Roller -->
      <section id="dice" aria-labelledby="dice-heading">
        <div class="flex items-center gap-3 mb-3">
          <span class="w-1 h-6 bg-[var(--accent)] rounded-full" aria-hidden="true"></span>
          <h2 id="dice-heading" class="text-lg font-bold text-[var(--text-primary)]">
            {T.dice}
          </h2>
        </div>
        <DiceRoller />
      </section>

      <!-- Initiative Tracker -->
      <section id="initiative" aria-labelledby="initiative-heading">
        <div class="flex items-center gap-3 mb-3">
          <span class="w-1 h-6 bg-[var(--accent)] rounded-full" aria-hidden="true"></span>
          <h2 id="initiative-heading" class="text-lg font-bold text-[var(--text-primary)]">
            {T.initiative}
          </h2>
        </div>
        <InitiativeTracker />
      </section>

      <!-- Open5e Reference -->
      <section id="reference" aria-labelledby="reference-heading">
        <div class="flex items-center gap-3 mb-3">
          <span class="w-1 h-6 bg-[var(--accent)] rounded-full" aria-hidden="true"></span>
          <h2 id="reference-heading" class="text-lg font-bold text-[var(--text-primary)]">
            {T.reference}
          </h2>
        </div>
        <DmCard>
          <Open5eReference />
        </DmCard>
      </section>

      <!-- Notes Panel -->
      <section id="notes" aria-labelledby="notes-heading">
        <div class="flex items-center gap-3 mb-3">
          <span class="w-1 h-6 bg-[var(--accent)] rounded-full" aria-hidden="true"></span>
          <h2 id="notes-heading" class="text-lg font-bold text-[var(--text-primary)]">
            {T.notes}
          </h2>
        </div>
        <DmCard>
          <NotesPanel />
        </DmCard>
      </section>
    </div>
  </div>
</DmLayout>