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

const { title } = Astro.props;
import Footer from '../components/Footer.astro';
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>
  </head>
  <body class="min-h-screen flex flex-col">
    <!-- Skip Links for Accessibility -->
    <a href="#main-content" class="skip-link">Skip to main content</a>
    <a href="#navigation" class="skip-link">Skip to navigation</a>
    
    <div class="flex-1">
      <main id="main-content" tabindex="-1">
        <slot />
      </main>
    </div>
    <Footer />
    <CookieConsent />
    
    <!-- Initialize accessibility features -->
    <script>
      import { initializeAccessibility, initializeHighContrastSupport, initializeReducedMotionSupport } from '../lib/accessibility';
      
      // Initialize all accessibility features
      initializeAccessibility();
      initializeHighContrastSupport();
      initializeReducedMotionSupport();
    </script>
  </body>
</html>

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