<template>
  <div class="min-h-screen bg-gray-900 text-gray-200 font-sans">
    <app-header @toggle-help="showHelpModal" />
    <div class="max-w-7xl mx-auto p-6 grid grid-cols-1 lg:grid-cols-4 gap-6">
      <sidebar class="lg:col-span-1" />
      <main-content class="lg:col-span-3" />
    </div>
    <preview-modal ref="previewModalRef" />
    <notification />
    <help-button @show-help="showHelpModal" />
  </div>
</template>

<script setup lang="ts">
  import { ref } from 'vue';
  import AppHeader from './components/AppHeader.vue';
  import Sidebar from './components/Sidebar.vue';
  import MainContent from './components/MainContent.vue';
  import PreviewModal from './components/PreviewModal.vue';
  import Notification from './components/Notification.vue';
  import HelpButton from './components/HelpButton.vue';

  const previewModalRef = ref<InstanceType<typeof PreviewModal> | null>(null);

  const showHelpModal = () => {
    alert('Keyboard Shortcuts:\n\n' + 'Shift + Drag: Fine-tune sprite position\n' + 'Space: Play/Pause animation\n' + 'Esc: Close preview modal\n' + 'Arrow Keys: Navigate frames when paused');
  };
</script>
