---
export interface Props {
  title: string;
  showBackLink?: boolean;
  backLinkUrl?: string;
  backLinkText?: string;
  showLogo?: boolean;
}

const { title, showBackLink = false, backLinkUrl = "/dashboard", backLinkText = "← Back", showLogo = false } = Astro.props;

import Layout from './Layout.astro';
import Navigation from '../components/Navigation.astro';
---

<Layout title={title}>
  <style>
    .bg-grid-pattern {
      background-image: 
        linear-gradient(rgba(255, 255, 255, 0.1) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.1) 1px, transparent 1px);
      background-size: 20px 20px;
    }
    
    @keyframes fadeInUp {
      0% {
        opacity: 0;
        transform: translateY(20px);
      }
      100% {
        opacity: 1;
        transform: translateY(0);
      }
    }
    
    @keyframes float {
      0%, 100% {
        transform: translateY(0px);
      }
      50% {
        transform: translateY(-20px);
      }
    }
    
    .animate-fadeInUp {
      animation: fadeInUp 0.6s ease-out forwards;
    }
    
    .animate-float {
      animation: float 6s ease-in-out infinite;
    }
  </style>
  
  <div class="min-h-screen bg-gradient-to-br from-indigo-900 via-purple-900 to-slate-900">
    <!-- Animated background elements -->
    <div class="fixed inset-0 overflow-hidden pointer-events-none">
      <div class="absolute -top-40 -right-40 w-80 h-80 bg-gradient-to-br from-purple-600/20 to-pink-600/20 rounded-full blur-3xl animate-pulse"></div>
      <div class="absolute -bottom-40 -left-40 w-80 h-80 bg-gradient-to-br from-blue-600/20 to-cyan-600/20 rounded-full blur-3xl animate-pulse"></div>
      <div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-96 h-96 bg-gradient-to-br from-indigo-600/10 to-purple-600/10 rounded-full blur-3xl animate-pulse"></div>
    </div>
    
    <!-- Grid pattern overlay -->
    <div class="absolute inset-0 bg-grid-pattern opacity-5"></div>
    
    {showLogo && (
      <div class="absolute top-8 left-8 z-10">
        <img src="/images/logo.png" alt="Black Canyon Tickets" class="h-12 w-auto opacity-20" />
      </div>
    )}
    
    <Navigation 
      title={title}
      showBackLink={showBackLink}
      backLinkUrl={backLinkUrl}
      backLinkText={backLinkText}
    />
    
    <main class="relative">
      <slot />
    </main>
  </div>
</Layout>