---
export interface Props {
  title: string;
}

const { title } = Astro.props;
import CookieConsent from '../components/CookieConsent.astro';
---

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="description" content="Professional ticketing platform for events" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <meta name="generator" content={Astro.generator} />
    <title>{title}</title>
    
    <!-- Critical theme initialization - prevents FOUC -->
    <script>
      (function() {
        // Force dark mode for login page to prevent flickering
        const forcedTheme = 'dark';
        
        // Apply theme immediately to prevent flash
        document.documentElement.setAttribute('data-theme', forcedTheme);
        document.documentElement.classList.add(forcedTheme);
        document.documentElement.classList.remove('light');
        
        // Apply to body immediately as well
        document.body.classList.add(forcedTheme);
        document.body.classList.remove('light');
        
        // Store for later use
        window.__INITIAL_THEME__ = forcedTheme;
        window.__FORCE_DARK_MODE__ = true;
        
        // Override localStorage temporarily to prevent theme switching
        const originalSetItem = localStorage.setItem;
        localStorage.setItem = function(key, value) {
          if (key === 'theme' && value !== 'dark') {
            console.log('[THEME] Blocking theme change to:', value);
            return;
          }
          return originalSetItem.call(this, key, value);
        };
        
        console.log('[THEME] Forced dark mode initialized');
      })();
    </script>
    
    <!-- CSS is imported via the global style block below -->
  </head>
  <body class="min-h-screen">
    <!-- Skip Links for Accessibility -->
    <a href="#main-content" class="skip-link">Skip to main content</a>
    
    <slot />
    
    <CookieConsent />
    
    <!-- Initialize theme management and accessibility features -->
    <script>
      // Theme management - force dark mode only
      document.addEventListener('DOMContentLoaded', () => {
        // Force dark theme regardless of saved preferences
        const forcedTheme = 'dark';
        document.body.classList.remove('light', 'dark');
        document.body.classList.add(forcedTheme);
        
        // Block any theme change events on login page
        window.addEventListener('themeChanged', (e) => {
          // Prevent theme changes on login page
          e.preventDefault();
          e.stopPropagation();
          
          // Force back to dark
          document.documentElement.setAttribute('data-theme', 'dark');
          document.documentElement.classList.remove('light');
          document.documentElement.classList.add('dark');
          document.body.classList.remove('light');
          document.body.classList.add('dark');
        }, true);
      });
      
      // Initialize accessibility features
      import { initializeAccessibility, initializeHighContrastSupport, initializeReducedMotionSupport } from '../lib/accessibility';
      
      // Initialize all accessibility features
      initializeAccessibility();
      initializeHighContrastSupport();
      initializeReducedMotionSupport();
    </script>
  </body>
</html>

<style is:global>
  @import '../styles/global.css';
  @import '../styles/glassmorphism.css';
</style>