[V0_FILE]typescriptreact:file="app/about/page.tsx" isMerged="true" import { Button } from "@/components/ui/button" import Link from "next/link" export default function AboutPage() { return (

About OpticMystic

OpticMystic is at the forefront of live visual performance in Las Vegas. With a unique blend of technology and artistry, I create immersive digital experiences that transform venues and captivate audiences.

My journey in visual art began with a passion for digital creativity and a desire to push the boundaries of what's possible in live performance. Over the years, I've honed my skills in real-time visual mixing, motion graphics, and interactive design.

What sets my performances apart is the commitment to originality. Every visual element is crafted from scratch, ensuring that each show is a unique and unforgettable experience. This dedication to custom content allows me to perfectly sync visuals with music, creating a seamless and immersive atmosphere.

From intimate club settings to large-scale events, I've had the privilege of working with a diverse range of venues and artists across Las Vegas. My residency at Golden Nugget's Troy Liquor Bar is where you can regularly catch my performances, but I'm always excited to take on new challenges and collaborations.

) } [V0_FILE]typescriptreact:file="app/layout.tsx" isMerged="true" import type React from "react" import type { Metadata } from "next" import { Inter } from "next/font/google" import "./globals.css" import { cn } from "@/lib/utils" const inter = Inter({ subsets: ["latin"] }) export const metadata: Metadata = { title: "OpticMystic | Visual Performance Artist in Las Vegas", description: "Las Vegas-based visual performance artist creating mind-bending live visual experiences. Resident VJ at Troy Liquor Bar, available for bookings and special events.", keywords: [ "VJ", "Visual Performance", "Live Visuals", "Las Vegas VJ", "Visual Artist", "Live Events", "Troy Liquor Bar", "OpticMystic", "Digital Art", "Visual Effects", "Live Mixing", "Video Jockey", "Event Visuals", "Club Visuals", "Visual Entertainment", ], openGraph: { title: "OpticMystic | Visual Performance Artist", description: "Creating mind-bending visual experiences for live events in Las Vegas", images: ["/og-image.jpg"], type: "website", locale: "en_US", }, twitter: { card: "summary_large_image", title: "OpticMystic | Visual Performance Artist", description: "Creating mind-bending visual experiences for live events in Las Vegas", images: ["/og-image.jpg"], }, } export default function RootLayout({ children }: { children: React.ReactNode }) { return ( {children} ) } [V0_FILE]css:file="app/globals.css" isFixed="true" isQuickEdit="true" isMerged="true" @tailwind base; @tailwind components; @tailwind utilities; body { font-family: Arial, Helvetica, sans-serif; } @layer utilities { .text-balance { text-wrap: balance; } } @layer base { :root { --background: 0 0% 0%; --foreground: 0 0% 100%; --card: 0 0% 100%; --card-foreground: 0 0% 3.9%; --popover: 0 0% 100%; --popover-foreground: 0 0% 3.9%; --primary: 0 0% 9%; --primary-foreground: 0 0% 98%; --secondary: 0 0% 96.1%; --secondary-foreground: 0 0% 9%; --muted: 0 0% 96.1%; --muted-foreground: 0 0% 45.1%; --accent: 0 0% 96.1%; --accent-foreground: 0 0% 9%; --destructive: 0 84.2% 60.2%; --destructive-foreground: 0 0% 98%; --border: 0 0% 89.8%; --input: 0 0% 89.8%; --ring: 0 0% 3.9%; --chart-1: 12 76% 61%; --chart-2: 173 58% 39%; --chart-3: 197 37% 24%; --chart-4: 43 74% 66%; --chart-5: 27 87% 67%; --radius: 0.5rem; --sidebar-background: 0 0% 98%; --sidebar-foreground: 240 5.3% 26.1%; --sidebar-primary: 240 5.9% 10%; --sidebar-primary-foreground: 0 0% 98%; --sidebar-accent: 240 4.8% 95.9%; --sidebar-accent-foreground: 240 5.9% 10%; --sidebar-border: 220 13% 91%; --sidebar-ring: 217.2 91.2% 59.8%; } .dark { --background: 0 0% 3.9%; --foreground: 0 0% 98%; --card: 0 0% 3.9%; --card-foreground: 0 0% 98%; --popover: 0 0% 3.9%; --popover-foreground: 0 0% 98%; --primary: 0 0% 98%; --primary-foreground: 0 0% 9%; --secondary: 0 0% 14.9%; --secondary-foreground: 0 0% 98%; --muted: 0 0% 14.9%; --muted-foreground: 0 0% 63.9%; --accent: 0 0% 14.9%; --accent-foreground: 0 0% 98%; --destructive: 0 62.8% 30.6%; --destructive-foreground: 0 0% 98%; --border: 0 0% 14.9%; --input: 0 0% 14.9%; --ring: 0 0% 83.1%; --chart-1: 220 70% 50%; --chart-2: 160 60% 45%; --chart-3: 30 80% 55%; --chart-4: 280 65% 60%; --chart-5: 340 75% 55%; --sidebar-background: 240 5.9% 10%; --sidebar-foreground: 240 4.8% 95.9%; --sidebar-primary: 224.3 76.3% 48%; --sidebar-primary-foreground: 0 0% 100%; --sidebar-accent: 240 3.7% 15.9%; --sidebar-accent-foreground: 240 4.8% 95.9%; --sidebar-border: 240 3.7% 15.9%; --sidebar-ring: 217.2 91.2% 59.8%; } } @layer base { * { @apply border-border; } body { background-color: black; color: white; @apply bg-background text-foreground; } } /* Smooth scrolling */ html { scroll-behavior: smooth; } /* Custom scrollbar */ ::-webkit-scrollbar { width: 6px; } ::-webkit-scrollbar-track { background: #000; } ::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.2); border-radius: 3px; } ::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.3); } /* Animations */ @keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } .animate-float { animation: float 6s ease-in-out infinite; } /* Add a subtle animation for the calendar icon */ @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.7; } } .pulse-subtle { animation: pulse 2s ease-in-out infinite; } /* Glass effect */ .glass { background: rgba(255, 255, 255, 0.05); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.1); } /* Add these styles for better image handling */ .image-container { position: relative; width: 100%; height: 100%; } .image-container img { object-fit: contain; width: 100%; height: 100%; } [V0_FILE]typescriptreact:file="app/booking/cancel/page.tsx" isMerged="true" "use client" import { useEffect, useState } from "react" import { useSearchParams, useRouter } from "next/navigation" import Link from "next/link" import { XCircle } from "lucide-react" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card" import { LoadingSkeleton } from "@/components/loading-skeleton" export default function PaymentCancelPage() { const searchParams = useSearchParams() const router = useRouter() const [loading, setLoading] = useState(true) const [bookingId, setBookingId] = useState("") useEffect(() => { const sessionId = searchParams.get("session_id") if (!sessionId) { // No session ID found, redirect to home page router.push("/") return } // Get the booking ID from the session async function getBookingInfo() { try { const response = await fetch(`/api/payment/verify?session_id=${sessionId}`) if (!response.ok) { throw new Error("Failed to get booking information") } const data = await response.json() // Store the booking ID setBookingId(data.bookingId) } catch (error) { console.error("Error getting booking info:", error) } finally { setLoading(false) } } getBookingInfo() }, [searchParams, router]) if (loading) { return } return (

Payment Cancelled Your payment has been cancelled.

Don't worry, your booking request is still saved in our system. You can complete your payment later.

{bookingId && (

You can view your booking details and complete the payment when you're ready.

)} {bookingId && ( )}

) } [V0_FILE]typescriptreact:file="app/booking/cancel/loading.tsx" isFixed="true" isMerged="true" export default function Loading() { return null } [V0_FILE]typescriptreact:file="app/booking/success/page.tsx" isMerged="true" "use client" import { useEffect, useState } from "react" import { useSearchParams, useRouter } from "next/navigation" import Link from "next/link" import { CheckCircle } from "lucide-react" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card" import { LoadingSkeleton } from "@/components/loading-skeleton" export default function PaymentSuccessPage() { const searchParams = useSearchParams() const router = useRouter() const [loading, setLoading] = useState(true) const [bookingId, setBookingId] = useState("") useEffect(() => { const sessionId = searchParams.get("session_id") if (!sessionId) { // No session ID found, redirect to home page router.push("/") return } // Verify the payment session async function verifyPayment() { try { const response = await fetch(`/api/payment/verify?session_id=${sessionId}`) if (!response.ok) { throw new Error("Payment verification failed") } const data = await response.json() // Store the booking ID for redirection setBookingId(data.bookingId) } catch (error) { console.error("Error verifying payment:", error) } finally { setLoading(false) } } verifyPayment() }, [searchParams, router]) // Auto-redirect to the booking confirmation page after a short delay useEffect(() => { if (bookingId) { const timer = setTimeout(() => { router.push(`/booking/confirmation/${bookingId}`) }, 5000) return () => clearTimeout(timer) } }, [bookingId, router]) if (loading) { return } return (

Payment Successful! Your payment has been processed successfully.

Your booking is now confirmed. We will send you a confirmation email with all the details.

You will be redirected to your booking confirmation page automatically in a few seconds.

) } [V0_FILE]typescriptreact:file="app/booking/success/loading.tsx" isFixed="true" isMerged="true" export default function Loading() { return null } [V0_FILE]typescriptreact:file="components/vimeo-embed.tsx" isMerged="true" "use client" import { useRef } from "react" interface VimeoEmbedProps { videoId: string autoplay?: boolean muted?: boolean loop?: boolean controls?: boolean background?: boolean quality?: "240p" | "360p" | "540p" | "720p" | "1080p" | "2k" | "4k" className?: string } export function VimeoEmbed({ videoId, autoplay = false, muted = false, loop = false, controls = true, background = false, quality = "1080p", className = "", }: VimeoEmbedProps) { const iframeRef = useRef(null) // Build the URL with parameters const buildVimeoUrl = () => { const baseUrl = `https://player.vimeo.com/video/${videoId}` const params = new URLSearchParams() if (autoplay) params.append("autoplay", "1") if (muted) params.append("muted", "1") if (loop) params.append("loop", "1") if (!controls) params.append("controls", "0") if (background) params.append("background", "1") params.append("quality", quality) params.append("dnt", "1") // Do Not Track params.append("app_id", "58479") return `${baseUrl}?${params.toString()}` } return (

) } [V0_FILE]typescriptreact:file="components/social-icons.tsx" isMerged="true" import { Instagram, Youtube, Facebook, Twitter } from "lucide-react" import { Button } from "@/components/ui/button" interface SocialIconsProps { className?: string iconSize?: number } export function SocialIcons({ className = "", iconSize = 20 }: SocialIconsProps) { const socialLinks = [ { name: "Instagram", url: "https://instagram.com/opticmystic", icon: Instagram, }, { name: "YouTube", url: "https://youtube.com/@OpticMystic-VJ", icon: Youtube, }, { name: "Facebook", url: "https://facebook.com/opticmystic", icon: Facebook, }, { name: "Twitter", url: "https://twitter.com/opticmystic", icon: Twitter, }, ] return (

{socialLinks.map((social) => ( ))}

) } [V0_FILE]typescriptreact:file="components/enhanced-booking-form.tsx" isMerged="true" "use client" import { useState } from "react" import { useForm } from "react-hook-form" import { zodResolver } from "@hookform/resolvers/zod" import { z } from "zod" import { format } from "date-fns" import { CalendarIcon } from "lucide-react" import { Button } from "@/components/ui/button" import { Calendar } from "@/components/ui/calendar" import { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form" import { Input } from "@/components/ui/input" import { Textarea } from "@/components/ui/textarea" import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { cn } from "@/lib/utils" import { Checkbox } from "@/components/ui/checkbox" import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group" import { toast } from "@/components/ui/use-toast" const formSchema = z.object({ name: z.string().min(2, { message: "Name must be at least 2 characters.", }), email: z.string().email({ message: "Please enter a valid email address.", }), phone: z.string().optional(), eventType: z.string({ required_error: "Please select an event type.", }), date: z.date({ required_error: "Please select a date.", }), startTime: z.string({ required_error: "Please select a start time.", }), duration: z.string({ required_error: "Please select a duration.", }), venueDetails: z.string().optional(), packageId: z.string({ required_error: "Please select a package.", }), notes: z.string().optional(), termsAccepted: z.boolean().refine((val) => val === true, { message: "You must accept the terms and conditions.", }), }) type FormValues = z.infer // Mock data for packages const packages = [ { id: "basic", name: "Basic Package", description: "Standard visual performance for small venues", price: 500, duration: 3, }, { id: "premium", name: "Premium Package", description: "Enhanced visuals with custom content for medium venues", price: 800, duration: 4, }, { id: "deluxe", name: "Deluxe Package", description: "Full production with custom content and effects for large venues", price: 1200, duration: 5, }, { id: "custom", name: "Custom Package", description: "Tailored to your specific needs and venue", price: 1500, duration: 6, }, ] export function EnhancedBookingForm() { const [step, setStep] = useState(1) const [isSubmitting, setIsSubmitting] = useState(false) const [selectedPackage, setSelectedPackage] = useState(null) const form = useForm({ resolver: zodResolver(formSchema), defaultValues: { name: "", email: "", phone: "", eventType: "", venueDetails: "", notes: "", termsAccepted: false, }, }) const onSubmit = async (data: FormValues) => { setIsSubmitting(true) try { // In a real implementation, this would send data to your API console.log("Form data:", data) // Simulate API call await new Promise((resolve) => setTimeout(resolve, 1500)) // Redirect to payment or confirmation window.location.href = `/booking/confirmation/mock-booking-id` } catch (error) { console.error("Error submitting form:", error) toast({ title: "Error", description: "There was a problem submitting your booking. Please try again.", variant: "destructive", }) } finally { setIsSubmitting(false) } } const handlePackageSelect = (packageId: string) => { const pkg = packages.find((p) => p.id === packageId) setSelectedPackage(pkg) form.setValue("packageId", packageId) form.setValue("duration", pkg?.duration.toString() || "") } return (

{step === 1 && (

Event Details

( Event Type )} /> ( Event Date date < new Date()} initialFocus /> )} />

( Start Time )} /> ( Duration (hours) )} />

( Venue Details

</FormControl>
                    <FormMessage />
                  </FormItem>
                )}
              />

<Button type="button" onClick={() => setStep(2)} className="w-full">
                Next: Choose Package
              </Button>
            </div>
          )}

{step === 2 && (
            <div className="space-y-4">
              <h3 className="text-lg font-medium">Select Package</h3>

<FormField
                control={form.control}
                name="packageId"
                render={({ field }) => (
                  <FormItem>
                    <FormControl>
                      <RadioGroup
                        onValueChange={(value) => handlePackageSelect(value)}
                        defaultValue={field.value}
                        className="space-y-3"
                      >
                        {packages.map((pkg) => (
                          <div
                            key={pkg.id}
                            className={cn(
                              "flex items-center space-x-2 rounded-md border p-4 cursor-pointer transition-all",
                              field.value === pkg.id ? "border-primary bg-primary/5" : "border-input",
                            )}
                            onClick={() => handlePackageSelect(pkg.id)}
                          >
                            <RadioGroupItem value={pkg.id} id={pkg.id} />
                            <div className="flex-1">
                              <div className="flex justify-between">
                                <label
                                  htmlFor={pkg.id}
                                  className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 cursor-pointer"
                                >
                                  {pkg.name}
                                </label>
                                <span className="text-sm font-bold">${pkg.price}</span>
                              </div>
                              <p className="text-sm text-muted-foreground mt-1">{pkg.description}</p>
                              <p className="text-xs text-muted-foreground mt-1">Duration: Up to {pkg.duration} hours</p>
                            </div>
                          </div>
                        ))}
                      </RadioGroup>
                    </FormControl>
                    <FormMessage />
                  </FormItem>
                )}
              />

<div className="flex justify-between">
                <Button type="button" variant="outline" onClick={() => setStep(1)}>
                  Back
                </Button>
                <Button type="button" onClick={() => setStep(3)}>
                  Next: Your Details
                </Button>
              </div>
            </div>
          )}

{step === 3 && (
            <div className="space-y-4">
              <h3 className="text-lg font-medium">Your Details</h3>

<FormField
                control={form.control}
                name="email"
                render={({ field }) => (
                  <FormItem>
                    <FormLabel>Email</FormLabel>
                    <FormControl>
                      <Input placeholder="Your email address" {...field} />
                    </FormControl>
                    <FormMessage />
                  </FormItem>
                )}
              />

<FormField
                control={form.control}
                name="phone"
                render={({ field }) => (
                  <FormItem>
                    <FormLabel>Phone (optional)</FormLabel>
                    <FormControl>
                      <Input placeholder="Your phone number" {...field} />
                    </FormControl>
                    <FormMessage />
                  </FormItem>
                )}
              />

<FormField
                control={form.control}
                name="notes"
                render={({ field }) => (
                  <FormItem>
                    <FormLabel>Additional Notes (optional)</FormLabel>
                    <FormControl>
                      <Textarea placeholder="Any special requests or information" className="resize-none" {...field} />
                    </FormControl>
                    <FormMessage />
                  </FormItem>
                )}
              />

<FormField
                control={form.control}
                name="termsAccepted"
                render={({ field }) => (
                  <FormItem className="flex flex-row items-start space-x-3 space-y-0 rounded-md border p-4">
                    <FormControl>
                      <Checkbox checked={field.value} onCheckedChange={field.onChange} />
                    </FormControl>
                    <div className="space-y-1 leading-none">
                      <FormLabel>I accept the terms and conditions</FormLabel>
                      <FormDescription>
                        By checking this box, you agree to our{" "}
                        <a href="/terms" className="text-primary underline" target="_blank" rel="noreferrer">
                          terms and conditions
                        </a>
                        .
                      </FormDescription>
                    </div>
                    <FormMessage />
                  </FormItem>
                )}
              />

<div className="flex justify-between">
                <Button type="button" variant="outline" onClick={() => setStep(2)}>
                  Back
                </Button>
                <Button type="submit" disabled={isSubmitting}>
                  {isSubmitting ? "Submitting..." : "Submit Booking"}
                </Button>
              </div>
            </div>
          )}
        </form>
      </Form>
    </div>
  )
}

[V0_FILE]typescriptreact:file="components/event-detail-modal.tsx" isMerged="true"
"use client"

import { useState } from "react"
import Image from "next/image"
import Link from "next/link"
import { format } from "date-fns"
import { Calendar, Clock, MapPin, Share2, X } from "lucide-react"
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogClose } from "@/components/ui/dialog"
import { Button } from "@/components/ui/button"
import { SocialLinks } from "@/components/social-links"

interface Event {
  id: string
  title: string
  date: Date
  startTime: string
  endTime: string
  venue: string
  address: string
  description: string
  image: string
  performers: string[]
  isPast?: boolean
}

interface EventDetailModalProps {
  event: Event
  open: boolean
  onOpenChange: (open: boolean) => void
}

export function EventDetailModal({ event, open, onOpenChange }: EventDetailModalProps) {
  const [imageLoaded, setImageLoaded] = useState(false)

const handleShare = async () => {
    if (navigator.share) {
      try {
        await navigator.share({
          title: event.title,
          text: `Check out ${event.title} at ${event.venue}`,
          url: window.location.href,
        })
      } catch (error) {
        console.error("Error sharing:", error)
      }
    } else {
      // Fallback for browsers that don't support the Web Share API
      navigator.clipboard.writeText(window.location.href)
      alert("Link copied to clipboard!")
    }
  }

return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="sm:max-w-[600px] bg-black border border-white/10 p-0 overflow-hidden max-h-[90vh] flex flex-col">
        <DialogHeader className="p-4 flex flex-row items-start justify-between sticky top-0 bg-black/80 backdrop-blur-md z-10">
          <DialogTitle className="text-xl">{event.title}</DialogTitle>
          <DialogClose asChild>
            <Button variant="ghost" size="icon" className="h-8 w-8">
              <X className="h-4 w-4" />
              <span className="sr-only">Close</span>
            </Button>
          </DialogClose>
        </DialogHeader>

<div className="overflow-y-auto flex-1">
          {/* Event Image */}
          <div className="relative aspect-[4/3] w-full">
            {!imageLoaded && (
              <div className="absolute inset-0 bg-black/50 flex items-center justify-center">Loading...</div>
            )}
            <Image
              src={event.image || "/placeholder.svg"}
              alt={event.title}
              fill
              className="object-cover"
              onLoad={() => setImageLoaded(true)}
            />
          </div>

{/* Event Details */}
          <div className="p-4 space-y-4">
            <div className="flex flex-col sm:flex-row gap-4">
              <div className="flex-1 space-y-3">
                <div className="flex items-center gap-2">
                  <Calendar className="h-4 w-4 text-white/70" />
                  <span>{format(new Date(event.date), "EEEE, MMMM d, yyyy")}</span>
                </div>

<div className="flex items-center gap-2">
                  <Clock className="h-4 w-4 text-white/70" />
                  <span>
                    {event.startTime} - {event.endTime}
                  </span>
                </div>

<div className="flex items-start gap-2">
                  <MapPin className="h-4 w-4 text-white/70 mt-0.5" />
                  <div>
                    <div>{event.venue}</div>
                    <div className="text-sm text-white/70">{event.address}</div>
                  </div>
                </div>
              </div>

<div className="flex flex-col gap-2">
                <Button asChild className="bg-red-600 hover:bg-red-700">
                  <Link href={`/booking?event=${event.id}`}>Book VIP Table</Link>
                </Button>

<Button variant="outline" onClick={handleShare}>
                  <Share2 className="h-4 w-4 mr-2" />
                  Share Event
                </Button>
              </div>
            </div>

<div className="pt-4 border-t border-white/10">
              <h3 className="text-lg font-medium mb-2">About This Event</h3>
              <p className="text-white/80 whitespace-pre-line">{event.description}</p>
            </div>

{event.performers.length > 0 && (
              <div className="pt-4 border-t border-white/10">
                <h3 className="text-lg font-medium mb-2">Featured Artists</h3>
                <div className="flex flex-wrap gap-2">
                  {event.performers.map((performer, index) => (
                    <span key={index} className="px-2 py-1 bg-white/10 rounded-full text-sm">
                      {performer}
                    </span>
                  ))}
                </div>
              </div>
            )}

<div className="pt-4 border-t border-white/10">
              <h3 className="text-lg font-medium mb-2">Connect & Share</h3>
              <SocialLinks />
            </div>
          </div>
        </div>
      </DialogContent>
    </Dialog>
  )
}

[V0_FILE]typescriptreact:file="app/calendar/loading.tsx" isFixed="true" isMerged="true"
export default function Loading() {
  return null
}

[V0_FILE]typescriptreact:file="components/loading-skeleton.tsx" isMerged="true"
import { Skeleton } from "@/components/ui/skeleton"

export function LoadingSkeleton() {
  return (
    <div className="min-h-screen bg-black text-white">
      <div className="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
        {/* Back Button */}
        <div className="mb-6">
          <Skeleton className="h-10 w-32" />
        </div>

{/* Event Header */}
        <div className="relative rounded-xl overflow-hidden mb-8">
          <Skeleton className="aspect-[21/9] w-full" />
        </div>

{/* Event Content */}
        <div className="grid md:grid-cols-3 gap-8">
          <div className="md:col-span-2 space-y-8">
            {/* Description */}
            <div className="bg-white/5 border border-white/10 rounded-xl p-6">
              <Skeleton className="h-8 w-48 mb-4" />
              <Skeleton className="h-4 w-full mb-2" />
              <Skeleton className="h-4 w-full mb-2" />
              <Skeleton className="h-4 w-full mb-2" />
              <Skeleton className="h-4 w-3/4" />
            </div>

{/* Performers */}
            <div className="bg-white/5 border border-white/10 rounded-xl p-6">
              <Skeleton className="h-8 w-48 mb-4" />
              <div className="grid grid-cols-2 sm:grid-cols-3 gap-2">
                {[...Array(9)].map((_, i) => (
                  <Skeleton key={i} className="h-12 w-full" />
                ))}
              </div>
            </div>

{/* Location */}
            <div className="bg-white/5 border border-white/10 rounded-xl p-6">
              <Skeleton className="h-8 w-48 mb-4" />
              <Skeleton className="h-4 w-48 mb-2" />
              <Skeleton className="h-4 w-64 mb-4" />
              <Skeleton className="aspect-[16/9] w-full" />
            </div>
          </div>

<div className="space-y-6">
            {/* Action Buttons */}
            <div className="bg-white/5 border border-white/10 rounded-xl p-6">
              <Skeleton className="h-10 w-full mb-3" />
              <Skeleton className="h-10 w-full" />
            </div>

{/* Event Details */}
            <div className="bg-white/5 border border-white/10 rounded-xl p-6">
              <Skeleton className="h-6 w-32 mb-4" />
              <div className="space-y-4">
                {[...Array(4)].map((_, i) => (
                  <div key={i}>
                    <Skeleton className="h-4 w-24 mb-1" />
                    <Skeleton className="h-4 w-48 mb-1" />
                    <Skeleton className="h-4 w-32" />
                  </div>
                ))}
              </div>
            </div>

{/* Connect */}
            <div className="bg-white/5 border border-white/10 rounded-xl p-6">
              <Skeleton className="h-6 w-40 mb-4" />
              <div className="flex justify-center gap-4">
                {[...Array(4)].map((_, i) => (
                  <Skeleton key={i} className="h-10 w-10 rounded-full" />
                ))}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}

[V0_FILE]typescriptreact:file="components/payment-processor.tsx" isQuickEdit="true" isMerged="true"
"use client"

import { useState } from "react"
import { Button } from "@/components/ui/button"

interface PaymentProcessorProps {
  bookingId: string
  eventType: string
  packages: { name: string; price: number }[]
  date: string
}

export function PaymentProcessor({ bookingId, eventType, packages, date }: PaymentProcessorProps) {
  const [loading, setLoading] = useState(false)

const totalPrice = packages.reduce((sum, pkg) => sum + pkg.price, 0)

const createCheckoutSession = async () => {
    setLoading(true)
    try {
      const response = await fetch("/api/payment/create", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify({
          bookingId: bookingId,
          eventType: eventType,
          totalPrice: totalPrice,
          date: date,
        }),
      })

if (!response.ok) {
        throw new Error("Failed to create checkout session")
      }

const data = await response.json()

// Redirect to Stripe Checkout
      window.location.href = data.url
    } catch (error) {
      console.error("Error creating checkout session:", error)
    } finally {
      setLoading(false)
    }
  }

return (
    <div>
      <Button onClick={createCheckoutSession} disabled={loading}>
        {loading ? "Loading..." : "Complete Payment"}
      </Button>
    </div>
  )
}

[V0_FILE]typescriptreact:file="app/events/loading.tsx" isMerged="true"
import { LoadingSkeleton } from "@/components/loading-skeleton"

export default function Loading() {
  return <LoadingSkeleton />
}

[V0_FILE]typescriptreact:file="app/events/[slug]/loading.tsx" isMerged="true"
import { LoadingSkeleton } from "@/components/loading-skeleton"

export default function Loading() {
  return <LoadingSkeleton />
}

[V0_FILE]typescriptreact:file="lib/event-data.ts" isMerged="true"
export const events = [
  // Easter Weekend 2025 (Upcoming)
  {
    id: "easter-weekend-2025",
    slug: "bunnyland-easter-weekend-2025",
    title: "Bunnyland - Easter Weekend",
    dateRange: "April 17-20, 2025",
    dates: [new Date("2025-04-17"), new Date("2025-04-18"), new Date("2025-04-19"), new Date("2025-04-20")],
    startTime: "10:00 PM",
    endTime: "4:00 AM",
    venue: "Troy Liquor Bar & RUSH Lounge",
    address: "Golden Nugget, 129 Fremont Street, Las Vegas",
    description:
      "Hop into Easter Weekend at Golden Nugget's Troy Liquor Bar and RUSH Lounge. Experience the vibrant colors and playful visuals by OpticMystic alongside amazing music from our featured DJs.\n\nFull decor, costume encouraged, no cover, and tables available!",
    image:
      "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/486140743_10162706597156940_4105533839633710548_n.jpg-05AQ3SDHWoo96t4N2QvJmdaB7VG0f4.jpeg",
    performers: [
      "Andrew B",
      "Baywood",
      "CHNDLR",
      "Flow",
      "High Octane",
      "KEYMO",
      "Mahfous Roman",
      "Mars",
      "Snowen18",
      "Spectra",
      "Tim Clark",
      "Vintage 72",
    ],
    isPast: false,
    isSpecialEvent: true,
    features: ["Full Decor", "Costume Encouraged", "No Cover", "Tables Available"],
  },

// St. Patrick's Day Weekend 2025 (Past)
  {
    id: "st-patricks-2025",
    slug: "pot-of-gold-st-patricks-day-2025",
    title: "Pot of Gold - St. Patrick's Day Weekend",
    dateRange: "March 13-17, 2025",
    dates: [
      new Date("2025-03-13"),
      new Date("2025-03-14"),
      new Date("2025-03-15"),
      new Date("2025-03-16"),
      new Date("2025-03-17"),
    ],
    startTime: "10:00 PM",
    endTime: "4:00 AM",
    venue: "Troy Liquor Bar & RUSH Lounge",
    address: "Golden Nugget, 129 Fremont Street, Las Vegas",
    description:
      "Join us for a magical St. Patrick's Day Weekend celebration at Golden Nugget's Troy Liquor Bar and RUSH Lounge. Experience immersive visuals by OpticMystic and music by top DJs.\n\nFull decor, costume encouraged, no cover, and tables available!",
    image:
      "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/482253189_10232278331953537_7407373698053839555_n%20%281%29.jpg-2euKABdytFAQMBGHgS5FyPf5nwrahE.jpeg",
    performers: [
      "Andrew B",
      "Baywood",
      "Cut & Boost",
      "Flow",
      "High Rocktane",
      "Hot Pursuit",
      "Mahfous Roman",
      "Mars",
      "Snowen18",
      "Spectra",
      "Tim Clark",
      "Vintage 72",
    ],
    isPast: true,
    isSpecialEvent: true,
    features: ["Full Decor", "Costume Encouraged", "No Cover", "Tables Available"],
  },

// Love Weekend (Past)
  {
    id: "love-weekend-2025",
    slug: "love-weekend-2025",
    title: "Love Weekend",
    dateRange: "February 13+14+15, 2025",
    dates: [new Date("2025-02-13"), new Date("2025-02-14"), new Date("2025-02-15")],
    startTime: "10:00 PM",
    endTime: "4:00 AM",
    venue: "Troy Liquor Bar & RUSH Lounge",
    address: "Golden Nugget, 129 Fremont Street, Las Vegas",
    description:
      "THREE DAYS // TWO VENUES // ONE EVENT\n\nCelebrate Valentine's Day Weekend with immersive visuals and incredible music at Troy Liquor Bar and RUSH Lounge. OpticMystic will transform the venue into a romantic wonderland with stunning visual effects synchronized to the music.",
    image:
      "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/476674260_10231967298217888_3890418504559319877_n.jpg-ByuZcd0C37gYTFbMinoOdRG5Yr4bY4.jpeg",
    performers: [],
    area1DJs: [
      { name: "Andrew B", instagram: "instagram.com/djandrewb" },
      { name: "Tim Clark", website: "timclarklive.com" },
      { name: "DJ Flow", instagram: "instagram.com/djflow_vegas" },
      { name: "Snow N' Lo", instagram: "instagram.com/snowden4130" },
      { name: "Baywood", instagram: "instagram.com/baywoodmusic" },
    ],
    area2Acts: [
      { name: "High Rocktane", instagram: "instagram.com/highoctanelive" },
      { name: "Rock 702", website: "tommydrock702.com" },
      { name: "Iconik", instagram: "instagram.com/iconiklv" },
    ],
    specialGuest: true,
    isPast: true,
    isSpecialEvent: true,
    features: ["Costumes Encouraged (But Not Needed)", "No Cover", "VIP Packages Available"],
  },
]

// Function to get calendar-friendly event objects
export function getCalendarEvents() {
  const calendarEvents = events.flatMap((event) =>
    event.dates.map((date) => ({
      id: `${event.id}-${date.toISOString().split("T")[0]}`,
      title: event.title,
      date,
      venue: event.venue,
      image: event.image,
      isPast: event.isPast,
      isSpecialEvent: event.isSpecialEvent,
      eventSlug: event.slug,
    })),
  )

return calendarEvents
}

// Function to get unique events (one per event series)
export function getUniqueEvents() {
  return events.map((event) => ({
    ...event,
    date: event.dates[0], // Use the first date for sorting
  }))
}

// Function to get a specific event by slug
export function getEventBySlug(slug: string) {
  return events.find((event) => event.slug === slug)
}

[V0_FILE]typescriptreact:file="package.json" isMerged="true"
{
  "dependencies": {
    "framer-motion": "^10.16.4"
  }
}

[V0_FILE]typescriptreact:file="hooks/use-media-query.ts" isMerged="true"
"use client"

import { useState, useEffect } from "react"

export function useMediaQuery(query: string): boolean {
  const [matches, setMatches] = useState(false)

useEffect(() => {
    const media = window.matchMedia(query)

// Update the state initially
    setMatches(media.matches)

// Define a callback function to handle changes
    const listener = (e: MediaQueryListEvent) => {
      setMatches(e.matches)
    }

// Add the callback as a listener for changes to the media query
    media.addEventListener("change", listener)

// Clean up
    return () => {
      media.removeEventListener("change", listener)
    }
  }, [query])

return matches
}

[V0_FILE]typescriptreact:file="components/ui/scroll-area.tsx" isMerged="true"
"use client"

import * as React from "react"
import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area"

import { cn } from "@/lib/utils"

const ScrollArea = React.forwardRef<
  React.ElementRef<typeof ScrollAreaPrimitive.Root>,
  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>
>(({ className, children, ...props }, ref) => (
  <ScrollAreaPrimitive.Root ref={ref} className={cn("relative overflow-hidden", className)} {...props}>
    <ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit]">{children}</ScrollAreaPrimitive.Viewport>
    <ScrollBar />
    <ScrollAreaPrimitive.Corner />
  </ScrollAreaPrimitive.Root>
))
ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName

const ScrollBar = React.forwardRef<
  React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,
  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>
>(({ className, orientation = "vertical", ...props }, ref) => (
  <ScrollAreaPrimitive.ScrollAreaScrollbar
    ref={ref}
    orientation={orientation}
    className={cn(
      "flex touch-none select-none transition-colors",
      orientation === "vertical" && "h-full w-2.5 border-l border-l-transparent p-[1px]",
      orientation === "horizontal" && "h-2.5 border-t border-t-transparent p-[1px]",
      className,
    )}
    {...props}
  >
    <ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-white/20" />
  </ScrollAreaPrimitive.ScrollAreaScrollbar>
))
ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName

export { ScrollArea, ScrollBar }

[V0_FILE]plaintext:file="public/noise.png" url="https://v0.blob.com/Yd9Yx.png" isMerged="true"

[V0_FILE]typescriptreact:file="components/logo.tsx" isMerged="true"
import Image from "next/image"
import { cn } from "@/lib/utils"

interface LogoProps {
  className?: string
  size?: number
}

export function Logo({ className, size = 32 }: LogoProps) {
  return (
    <div className={cn("relative", className)} style={{ width: size, height: size }}>
      <Image
        src="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/OpticMystic-q8IBLE4dJpfdf41OiwHb31SMD8VICD.svg"
        alt="OpticMystic Logo"
        width={size}
        height={size}
        className="w-full h-full"
        priority
      />
    </div>
  )
}

[V0_FILE]typescriptreact:file="app/booking/confirmation/[id]/page.tsx" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { useParams } from "next/navigation"
import Link from "next/link"
import { format } from "date-fns"
import { ArrowLeft, CalendarCheck, Clock, MapPin, Tag, CheckCircle } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { PaymentProcessor } from "@/components/payment-processor"
import { LoadingSkeleton } from "@/components/loading-skeleton"

interface Package {
  id: string
  name: string
  description: string
  price: number
  duration: number
}

interface Booking {
  id: string
  createdAt: string
  date: string
  startTime: string
  endTime: string
  clientName: string
  clientEmail: string
  clientPhone: string | null
  eventType: string
  venueDetails: string | null
  notes: string | null
  status: string
  paymentStatus: string
  packages: {
    package: Package
  }[]
}

export default function BookingConfirmationPage() {
  const { id } = useParams()
  const [booking, setBooking] = useState<Booking | null>(null)
  const [loading, setLoading] = useState(true)
  const [error, setError] = useState<string | null>(null)

useEffect(() => {
    const fetchBooking = async () => {
      try {
        setLoading(true)
        const response = await fetch(`/api/bookings/${id}`)

if (!response.ok) {
          throw new Error("Failed to fetch booking details")
        }

const data = await response.json()
        setBooking(data)
      } catch (error) {
        console.error("Error fetching booking:", error)
        setError("We couldn't load your booking details. Please try again later.")
      } finally {
        setLoading(false)
      }
    }

if (id) {
      fetchBooking()
    }
  }, [id])

if (loading) {
    return <LoadingSkeleton />
  }

if (error || !booking) {
    return (
      <div className="container max-w-4xl mx-auto py-12 px-4">
        <Card className="border-red-200 bg-red-50 text-red-900">
          <CardHeader>
            <CardTitle>Error Loading Booking</CardTitle>
            <CardDescription className="text-red-700">
              We encountered an issue loading your booking details.
            </CardDescription>
          </CardHeader>
          <CardContent>
            <p>{error || "Booking not found"}</p>
          </CardContent>
          <CardFooter>
            <Button asChild>
              <Link href="/">
                <ArrowLeft className="w-4 h-4 mr-2" />
                Return to Homepage
              </Link>
            </Button>
          </CardFooter>
        </Card>
      </div>
    )
  }

const isPaid = booking.paymentStatus === "paid" || booking.paymentStatus === "deposit_paid"
  const isConfirmed = booking.status === "confirmed"
  const isPending = booking.status === "pending"

// Extract packages
  const packages = booking.packages.map((p) => p.package)

return (
    <div className="container max-w-4xl mx-auto py-12 px-4">
      {/* Confirmation Header */}
      <Card className={isPaid ? "border-green-200 bg-green-50" : "border-amber-200 bg-amber-50"}>
        <CardHeader>
          <CardTitle className="flex items-center gap-2">
            <CheckCircle className={isPaid ? "text-green-600" : "text-amber-600"} />
            {isPaid ? "Booking Confirmed!" : "Booking Received - Payment Pending"}
          </CardTitle>
          <CardDescription className={isPaid ? "text-green-700" : "text-amber-700"}>
            {isPaid
              ? "Your booking has been confirmed. We're looking forward to your event!"
              : "Your booking has been received. Please complete payment to confirm your booking."}
          </CardDescription>
        </CardHeader>
        <CardContent>
          <p className="text-sm">
            <span className="font-semibold">Booking Reference:</span> {booking.id}
          </p>
        </CardContent>
      </Card>

{/* Booking Details */}
      <div className="grid md:grid-cols-2 gap-6 mt-8">
        <Card>
          <CardHeader>
            <CardTitle>Event Details</CardTitle>
          </CardHeader>
          <CardContent className="space-y-4">
            <div className="flex gap-2 items-center">
              <Tag className="h-4 w-4 text-muted-foreground" />
              <div>
                <p className="font-medium">{booking.eventType}</p>
              </div>
            </div>

<div className="flex gap-2 items-center">
              <CalendarCheck className="h-4 w-4 text-muted-foreground" />
              <div>
                <p className="font-medium">{format(new Date(booking.date), "MMMM d, yyyy")}</p>
              </div>
            </div>

<div className="flex gap-2 items-center">
              <Clock className="h-4 w-4 text-muted-foreground" />
              <div>
                <p className="font-medium">
                  {format(new Date(booking.startTime), "h:mm a")} - {format(new Date(booking.endTime), "h:mm a")}
                </p>
              </div>
            </div>

{booking.venueDetails && (
              <div className="flex gap-2 items-start">
                <MapPin className="h-4 w-4 text-muted-foreground mt-1" />
                <div>
                  <p className="font-medium">{booking.venueDetails}</p>
                </div>
              </div>
            )}

{booking.notes && (
              <div className="pt-4 border-t">
                <h4 className="text-sm font-medium mb-2">Additional Notes</h4>
                <p className="text-sm">{booking.notes}</p>
              </div>
            )}
          </CardContent>
        </Card>

<div className="space-y-6">
          {/* Packages & Payment */}
          <Card>
            <CardHeader>
              <CardTitle>Packages & Payment</CardTitle>
              <CardDescription>
                {isPaid ? "Your payment has been processed successfully." : "Complete your booking with payment."}
              </CardDescription>
            </CardHeader>
            <CardContent>
              <div className="space-y-4">
                <h4 className="font-medium">Selected Packages</h4>
                <div className="space-y-2">
                  {packages.map((pkg) => (
                    <div key={pkg.id} className="flex justify-between">
                      <span>{pkg.name}</span>
                      <span>${pkg.price}</span>
                    </div>
                  ))}
                  <div className="flex justify-between pt-2 border-t">
                    <span className="font-semibold">Total</span>
                    <span className="font-semibold">${packages.reduce((sum, pkg) => sum + pkg.price, 0)}</span>
                  </div>
                </div>

<div className="pt-2">
                  <p className="text-sm font-medium">
                    Status:{" "}
                    <span
                      className={
                        booking.paymentStatus === "paid"
                          ? "text-green-600"
                          : booking.paymentStatus === "deposit_paid"
                            ? "text-blue-600"
                            : "text-amber-600"
                      }
                    >
                      {booking.paymentStatus === "paid"
                        ? "Paid in Full"
                        : booking.paymentStatus === "deposit_paid"
                          ? "Deposit Paid"
                          : "Payment Pending"}
                    </span>
                  </p>

{booking.paymentStatus === "deposit_paid" && (
                    <p className="text-sm mt-1">The remaining balance will be due on the day of the event.</p>
                  )}
                </div>
              </div>
            </CardContent>
          </Card>

{/* Payment Processor */}
          {!isPaid && (
            <PaymentProcessor
              bookingId={booking.id}
              eventType={booking.eventType}
              packages={packages}
              date={format(new Date(booking.date), "MMMM d, yyyy")}
            />
          )}
        </div>
      </div>

{/* Actions */}
      <div className="mt-8 flex justify-between">
        <Button variant="outline" asChild>
          <Link href="/">
            <ArrowLeft className="w-4 h-4 mr-2" />
            Return to Homepage
          </Link>
        </Button>

{isPaid && (
          <Button asChild>
            <Link href="/calendar">View Your Event on Calendar</Link>
          </Button>
        )}
      </div>
    </div>
  )
}

[V0_FILE]typescriptreact:file="components/site-footer.tsx" isMerged="true"
import Link from "next/link"
import { Logo } from "@/components/logo"
import { SocialLinks } from "@/components/social-links"

export function SiteFooter() {
  return (
    <footer className="border-t border-white/10 bg-black/50 backdrop-blur-md mt-16">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
        <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
          {/* Logo and Info */}
          <div className="flex flex-col items-center md:items-start">
            <Link href="/" className="flex items-center gap-2 mb-4">
              <Logo className="h-12 w-12" size={48} />
              <span className="font-bold text-2xl">OpticMystic</span>
            </Link>
            <p className="text-white/70 text-center md:text-left">
              Live visual performance artist creating immersive experiences in Las Vegas
            </p>
          </div>

{/* Quick Links */}
          <div className="flex flex-col items-center md:items-start">
            <h3 className="text-lg font-bold mb-4">Quick Links</h3>
            <nav className="flex flex-col gap-2">
              <Link href="/" className="text-white/70 hover:text-white transition-colors">
                Home
              </Link>
              <Link href="/events" className="text-white/70 hover:text-white transition-colors">
                Events
              </Link>
              <Link href="/gallery" className="text-white/70 hover:text-white transition-colors">
                Gallery
              </Link>
              <Link href="/about" className="text-white/70 hover:text-white transition-colors">
                About
              </Link>
              <Link href="/#contact" className="text-white/70 hover:text-white transition-colors">
                Contact
              </Link>
            </nav>
          </div>

{/* Connect */}
          <div className="flex flex-col items-center md:items-start">
            <h3 className="text-lg font-bold mb-4">Connect</h3>
            <SocialLinks className="justify-center md:justify-start" />
            <p className="mt-4 text-white/70 text-center md:text-left">
              Troy Liquor Bar at Golden Nugget
              <br />
              Las Vegas, NV
            </p>
          </div>
        </div>

<div className="mt-8 pt-8 border-t border-white/10 text-center text-white/50 text-sm">
          © {new Date().getFullYear()} OpticMystic. All rights reserved.
        </div>
      </div>
    </footer>
  )
}

[V0_FILE]typescriptreact:file="components/mobile-menu.tsx" isMerged="true"
"use client"

import { useState } from "react"
import Link from "next/link"
import { Menu, X } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Dialog, DialogContent, DialogTrigger } from "@/components/ui/dialog"
import { Sheet, SheetContent, SheetTrigger } from "@/components/ui/sheet"
import { EnhancedBookingForm } from "@/components/enhanced-booking-form"
import { Logo } from "@/components/logo"

export function MobileMenu() {
  const [open, setOpen] = useState(false)

return (
    <div className="md:hidden">
      <Sheet open={open} onOpenChange={setOpen}>
        <SheetTrigger asChild>
          <Button variant="ghost" size="icon" className="text-white">
            <Menu className="h-6 w-6" />
            <span className="sr-only">Toggle menu</span>
          </Button>
        </SheetTrigger>
        <SheetContent side="right" className="bg-black text-white border-white/10 p-0">
          <div className="flex flex-col h-full">
            <div className="flex items-center justify-between p-4 border-b border-white/10">
              <div className="flex items-center gap-2">
                <Logo className="h-10 w-10" size={40} />
                <span className="font-bold text-xl">OpticMystic</span>
              </div>
              <Button variant="ghost" size="icon" onClick={() => setOpen(false)}>
                <X className="h-6 w-6" />
                <span className="sr-only">Close menu</span>
              </Button>
            </div>
            <nav className="flex-1 overflow-auto py-6 px-4">
              <div className="flex flex-col space-y-6">
                <Link
                  href="/#projects"
                  className="text-lg font-medium hover:text-white/70 transition-colors"
                  onClick={() => setOpen(false)}
                >
                  Latest Work
                </Link>
                <Link
                  href="/#about"
                  className="text-lg font-medium hover:text-white/70 transition-colors"
                  onClick={() => setOpen(false)}
                >
                  About
                </Link>
                <Link
                  href="/gallery"
                  className="text-lg font-medium hover:text-white/70 transition-colors"
                  onClick={() => setOpen(false)}
                >
                  Gallery
                </Link>
                <Link
                  href="/events"
                  className="text-lg font-medium hover:text-white/70 transition-colors"
                  onClick={() => setOpen(false)}
                >
                  Events
                </Link>
                <Link
                  href="/#contact"
                  className="text-lg font-medium hover:text-white/70 transition-colors"
                  onClick={() => setOpen(false)}
                >
                  Contact
                </Link>
              </div>
            </nav>
            <div className="p-4 border-t border-white/10">
              <Dialog>
                <DialogTrigger asChild>
                  <Button className="w-full bg-green-500 hover:bg-green-600 text-black font-bold">Book Now</Button>
                </DialogTrigger>
                <DialogContent className="sm:max-w-[525px] bg-black border border-white/10">
                  <h2 className="text-2xl font-bold mb-4">Book OpticMystic</h2>
                  <EnhancedBookingForm />
                </DialogContent>
              </Dialog>
            </div>
          </div>
        </SheetContent>
      </Sheet>
    </div>
  )
}

[V0_FILE]typescriptreact:file="app/favicon.ico" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/OpticMystic-q8IBLE4dJpfdf41OiwHb31SMD8VICD.svg" isMerged="true"

[V0_FILE]typescript:file="lib/db-service.ts" isMerged="true"
import { getEventBySlug, getUniqueEvents, getCalendarEvents } from "./event-data"

// This file will serve as an abstraction layer between our data and components
// In the future, this can be replaced with actual database calls

export type Event = {
  id: string
  slug: string
  title: string
  dateRange: string
  dates: Date[]
  startTime: string
  endTime: string
  venue: string
  address: string
  description: string
  image: string
  performers?: string[]
  isPast: boolean
  isSpecialEvent: boolean
  features?: string[]
  area1DJs?: { name: string; instagram?: string; website?: string }[]
  area2Acts?: { name: string; instagram?: string; website?: string }[]
  specialGuest?: boolean
}

export type CalendarEvent = {
  id: string
  title: string
  date: Date
  venue: string
  image: string
  isPast?: boolean
  isSpecialEvent?: boolean
  eventSlug?: string
}

// Get all events
export async function getAllEvents(): Promise<Event[]> {
  return getUniqueEvents()
}

// Get upcoming events
export async function getUpcomingEvents(): Promise<Event[]> {
  const allEvents = await getAllEvents()
  return allEvents.filter((event) => !event.isPast)
}

// Get past events
export async function getPastEvents(): Promise<Event[]> {
  const allEvents = await getAllEvents()
  return allEvents.filter((event) => event.isPast)
}

// Get event by slug
export async function getEvent(slug: string): Promise<Event | null> {
  return getEventBySlug(slug) || null
}

// Get calendar events
export async function getAllCalendarEvents(): Promise<CalendarEvent[]> {
  return getCalendarEvents()
}

// Get related events (excluding the current event)
export async function getRelatedEvents(currentSlug: string, limit = 3): Promise<Event[]> {
  const allEvents = await getAllEvents()
  return allEvents.filter((event) => event.slug !== currentSlug).slice(0, limit)
}

[V0_FILE]typescriptreact:file="components/youtube-gallery.tsx" isQuickEdit="true" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Skeleton } from "@/components/ui/skeleton"
import { ExternalLink } from "lucide-react"
import Link from "next/link"

interface YouTubeVideo {
  id: string
  title: string
  thumbnail: string
  publishedAt: string
}

export function YouTubeGallery() {
  const [videos, setVideos] = useState<YouTubeVideo[]>([])
  const [loading, setLoading] = useState(true)
  const [activeVideo, setActiveVideo] = useState<string | null>(null)
  const [category, setCategory] = useState("all")

useEffect(() => {
    // Using actual videos from OpticMystic's YouTube channel
    const actualVideos: YouTubeVideo[] = [
      {
        id: "WPoyesM7d20",
        title: "Live From Golden Nugget Las Vegas at Troy!",
        thumbnail: "https://i.ytimg.com/vi/WPoyesM7d20/maxresdefault.jpg",
        publishedAt: "2024-01-15",
      },
      {
        id: "aCUhgst4oQY",
        title: "OpticMystic Live at Golden Nugget Las Vegas",
        thumbnail: "https://i.ytimg.com/vi/aCUhgst4oQY/maxresdefault.jpg",
        publishedAt: "2023-12-20",
      },
      {
        id: "IHAuNQa22kM",
        title: "Visual Performance at Troy Liquor Bar",
        thumbnail: "https://i.ytimg.com/vi/IHAuNQa22kM/maxresdefault.jpg",
        publishedAt: "2023-11-15",
      },
      {
        id: "e6r-dCkny7A",
        title: "OpticMystic VJ Set - Weekend Highlights",
        thumbnail: "https://i.ytimg.com/vi/e6r-dCkny7A/maxresdefault.jpg",
        publishedAt: "2023-10-10",
      },
    ]

setVideos(actualVideos)
    setActiveVideo(actualVideos[0]?.id || null)
    setLoading(false)
  }, [])

if (loading) {
    return (
      <div className="p-4">
        <Skeleton className="w-full h-[400px] mb-4" />
        <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
          {[...Array(4)].map((_, i) => (
            <Skeleton key={i} className="w-full h-24" />
          ))}
        </div>
      </div>
    )
  }

return (
    <div className="p-4">
      <Tabs defaultValue="all" onValueChange={setCategory}>
        <TabsList className="mb-4">
          <TabsTrigger value="all">All Videos</TabsTrigger>
          <TabsTrigger value="performances">Performances</TabsTrigger>
          <TabsTrigger value="tutorials">Tutorials</TabsTrigger>
        </TabsList>

<TabsContent value="all" className="space-y-4">
          {activeVideo && (
            <div className="aspect-video w-full mb-4 relative group">
              <iframe
                src={`https://www.youtube.com/embed/${activeVideo}?autoplay=0&rel=0&modestbranding=1`}
                title="YouTube video player"
                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                allowFullScreen
                className="w-full h-full rounded-lg"
              ></iframe>
              <Link
                href={`https://www.youtube.com/watch?v=${activeVideo}`}
                target="_blank"
                rel="noopener noreferrer"
                className="absolute top-2 right-2 bg-black/70 p-2 rounded-full opacity-0 group-hover:opacity-100 transition-opacity"
              >
                <ExternalLink className="h-4 w-4" />
                <span className="sr-only">Open in YouTube</span>
              </Link>
            </div>
          )}

<div className="grid grid-cols-2 md:grid-cols-4 gap-4">
            {videos.map((video) => (
              <div
                key={video.id}
                className={`cursor-pointer relative overflow-hidden rounded-lg transition-all duration-300 ${
                  activeVideo === video.id ? "ring-2 ring-red-500" : ""
                }`}
                onClick={() => setActiveVideo(video.id)}
              >
                <div className="aspect-video">
                  <img
                    src={video.thumbnail || "/placeholder.svg"}
                    alt={video.title}
                    className="w-full h-full object-cover"
                  />
                </div>
                <div className="absolute inset-0 bg-gradient-to-t from-black/80 to-transparent flex items-end p-2">
                  <p className="text-xs text-white line-clamp-2">{video.title}</p>
                </div>
              </div>
            ))}
          </div>
        </TabsContent>

<TabsContent value="performances">
          <div className="p-8 text-center">
            <p>Performance videos will be displayed here.</p>
          </div>
        </TabsContent>

<TabsContent value="tutorials">
          <div className="p-8 text-center">
            <p>Tutorial videos will be displayed here.</p>
          </div>
        </TabsContent>
      </Tabs>
    </div>
  )
}

[V0_FILE]plaintext:file="public/images/opticmystic-residency.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/483489683_18492520840014533_4264755503233982323_n.jpg-FW0HynPZCbNufdANcZKVOLLVrtIRUN.jpeg" isMerged="true"

[V0_FILE]typescriptreact:file="components/social-links.tsx" isQuickEdit="true" isMerged="true"
import { Instagram, Youtube, Facebook, Twitch } from "lucide-react"

interface SocialLinksProps {
  className?: string
}

export function SocialLinks({ className = "" }: SocialLinksProps) {
  const socialLinks = [
    {
      name: "Instagram",
      url: "https://instagram.com/opticmysticVJ",
      icon: Instagram,
      color: "hover:bg-gradient-to-r hover:from-purple-500 hover:to-pink-500",
    },
    {
      name: "YouTube",
      url: "https://youtube.com/@OpticMystic-VJ",
      icon: Youtube,
      color: "hover:bg-red-600",
    },
    {
      name: "Facebook",
      url: "https://facebook.com/opticmysticVJ",
      icon: Facebook,
      color: "hover:bg-blue-600",
    },
    {
      name: "Twitch",
      url: "https://twitch.tv/opticmysticvj",
      icon: Twitch,
      color: "hover:bg-purple-600",
    },
  ]

return (
    <div className={`flex items-center justify-center gap-4 ${className}`}>
      {socialLinks.map((social) => (
        <a
          key={social.name}
          href={social.url}
          target="_blank"
          rel="noopener noreferrer"
          className={`p-2 rounded-full border border-white/20 bg-white/5 backdrop-blur-sm transition-all duration-300 ${social.color}`}
          aria-label={social.name}
        >
          <social.icon className="h-5 w-5" />
        </a>
      ))}
    </div>
  )
}

[V0_FILE]typescriptreact:file="app/events/[slug]/event-detail.tsx" isQuickEdit="true" isMerged="true"
// Delete this file as it's no longer needed
// We've moved the functionality directly into page.tsx

[V0_FILE]typescriptreact:file="app/events/events-page.tsx" isQuickEdit="true" isMerged="true"
// Delete this file as it's no longer needed
// We've moved the functionality directly into page.tsx

[V0_FILE]typescriptreact:file="app/events/layout.tsx" isMerged="true"
import type React from "react"
export default function EventsLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return <div className="events-layout">{children}</div>
}

[V0_FILE]typescriptreact:file="components/client-share-button.tsx" isMerged="true"
// This file is completely removed

[V0_FILE]typescriptreact:file="components/interactive-events-calendar.tsx" isMerged="true"
// This file is completely removed

[V0_FILE]typescriptreact:file="components/ui/badge.tsx" isQuickEdit="true" isMerged="true"
import type React from "react"
interface BadgeProps extends React.HTMLAttributes<HTMLDivElement> {}

export function Badge({ className, ...props }: BadgeProps) {
  return (
    <div
      className={`inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 dark:bg-slate-800 dark:text-slate-100 ${className}`}
      {...props}
    />
  )
}

[V0_FILE]typescriptreact:file="app/events/minimal.tsx" isMerged="true"
export default function MinimalEventsPage() {
  return (
    <div className="min-h-screen bg-black text-white p-8">
      <h1 className="text-3xl font-bold mb-4">Minimal Events Page</h1>
      <p className="mb-4">This is a minimal version of the events page to help diagnose rendering issues.</p>

<div className="p-4 bg-white/10 rounded-lg">
        <h2 className="text-xl font-bold mb-2">Static Content Only</h2>
        <p>This page contains only static content with no client components, hooks, or context providers.</p>
      </div>

<div className="mt-4">
        <a href="/diagnostic" className="text-blue-400 hover:underline">
          Go to Diagnostic Page
        </a>
      </div>
    </div>
  )
}

[V0_FILE]typescriptreact:file="app/test-image.tsx" isMerged="true"
import Image from "next/image"

export default function TestImagePage() {
  return (
    <div className="p-8">
      <h1 className="text-2xl font-bold mb-4">Test Image Component</h1>

<p>This page tests if the Next.js Image component is causing rendering issues.</p>
    </div>
  )
}

[V0_FILE]typescriptreact:file="app/test-context.tsx" isMerged="true"
"use client"

import { createContext, useContext, useState } from "react"

// Create a test context
const TestContext = createContext(null)

function ContextProvider({ children }) {
  const [value, setValue] = useState("test value")

return <TestContext.Provider value={{ value, setValue }}>{children}</TestContext.Provider>
}

function ContextConsumer() {
  const context = useContext(TestContext)

return (
    <div className="p-4 bg-gray-100 rounded">
      <p>Context value: {context?.value}</p>
      <button
        onClick={() => context?.setValue("updated value")}
        className="mt-2 px-4 py-2 bg-blue-500 text-white rounded"
      >
        Update Context
      </button>
    </div>
  )
}

export default function TestContextPage() {
  return (
    <div className="p-8">
      <h1 className="text-2xl font-bold mb-4">Test Context Provider</h1>

<p className="mt-4">This page tests if context providers are causing rendering issues.</p>
    </div>
  )
}

[V0_FILE]typescriptreact:file="app/test-boundary.tsx" isMerged="true"
import ClientComponent from "./test-boundary-client"

// This is a server component
export default function TestBoundaryPage() {
  return (
    <div className="p-8">
      <h1 className="text-2xl font-bold mb-4">Test Client/Server Boundary</h1>

<div className="p-4 bg-gray-100 rounded mb-4">
        <p>This is a server component</p>
      </div>

<ClientComponent />
    </div>
  )
}

[V0_FILE]typescriptreact:file="app/test-boundary-client.tsx" isMerged="true"
"use client"

import { useState } from "react"

export default function ClientComponent() {
  const [count, setCount] = useState(0)

return (
    <div className="p-4 bg-blue-100 rounded">
      <p>This is a client component</p>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)} className="mt-2 px-4 py-2 bg-blue-500 text-white rounded">
        Increment
      </button>
    </div>
  )
}

[V0_FILE]typescriptreact:file="app/diagnostic.tsx" isMerged="true"
export default function DiagnosticPage() {
  return (
    <div style={{ padding: "20px", fontFamily: "monospace", maxWidth: "800px", margin: "0 auto" }}>
      <h1 style={{ fontSize: "24px", marginBottom: "20px" }}>React Rendering Diagnostic</h1>

<div style={{ marginBottom: "20px", padding: "10px", border: "1px solid #ccc" }}>
        <p>This is a minimal page with no client components, hooks, or context providers.</p>
        <p>Open your browser console and check for errors.</p>
      </div>

<div style={{ marginBottom: "20px" }}>
        <h2 style={{ fontSize: "18px", marginBottom: "10px" }}>Test Links</h2>
        <ul style={{ listStyleType: "none", padding: 0 }}>
          <li style={{ marginBottom: "10px" }}>
            <a href="/diagnostic/test1" style={{ color: "blue", textDecoration: "underline" }}>
              Test 1: Minimal HTML
            </a>
          </li>
          <li style={{ marginBottom: "10px" }}>
            <a href="/diagnostic/test2" style={{ color: "blue", textDecoration: "underline" }}>
              Test 2: With Image Tag
            </a>
          </li>
          <li style={{ marginBottom: "10px" }}>
            <a href="/diagnostic/test3" style={{ color: "blue", textDecoration: "underline" }}>
              Test 3: With Next/Image
            </a>
          </li>
          <li style={{ marginBottom: "10px" }}>
            <a href="/diagnostic/test4" style={{ color: "blue", textDecoration: "underline" }}>
              Test 4: With Client Component
            </a>
          </li>
        </ul>
      </div>

<div style={{ marginBottom: "20px" }}>
        <h2 style={{ fontSize: "18px", marginBottom: "10px" }}>Environment Info</h2>
        <pre style={{ background: "#f5f5f5", padding: "10px", overflow: "auto" }}>
          {`
Next.js Environment:
- Mode: ${process.env.NODE_ENV || "unknown"}
- App Directory: true
          `}
        </pre>
      </div>

<div>
        <p style={{ fontSize: "14px", color: "#666" }}>
          After identifying the issue, return to the{" "}
          <a href="/" style={{ color: "blue" }}>
            homepage
          </a>
          .
        </p>
      </div>
    </div>
  )
}

[V0_FILE]typescriptreact:file="app/diagnostic/debug/page.tsx" isFixed="true" isQuickEdit="true" isMerged="true"
import ErrorLogger from "../error-logger"

export default function DebugPage() {
  return (
    <div style={{ padding: "20px", fontFamily: "monospace", maxWidth: "800px", margin: "0 auto" }}>
      <ErrorLogger />

<h1 style={{ fontSize: "24px", marginBottom: "20px" }}>Debug Page</h1>

<div style={{ marginBottom: "20px", padding: "10px", border: "1px solid #ccc" }}>
        <p>This page includes an error logger that will provide detailed information about React rendering errors.</p>
        <p>Open your browser console and check for detailed error logs.</p>
      </div>

<div style={{ marginBottom: "20px" }}>
        <h2 style={{ fontSize: "18px", marginBottom: "10px" }}>Instructions</h2>
        <ol style={{ paddingLeft: "20px" }}>
          <li style={{ marginBottom: "5px" }}>Open your browser's developer tools (F12 or right-click > Inspect)</li>
          <li style={{ marginBottom: "5px" }}>Go to the Console tab</li>
          <li style={{ marginBottom: "5px" }}>Navigate to the page that's causing errors</li>
          <li style={{ marginBottom: "5px" }}>Look for "DETAILED ERROR INFO" logs in the console</li>
        </ol>
      </div>

<div style={{ marginBottom: "20px" }}>
        <h2 style={{ fontSize: "18px", marginBottom: "10px" }}>Test Navigation</h2>
        <ul style={{ listStyleType: "none", padding: 0 }}>
          <li style={{ marginBottom: "10px" }}>
            <a href="/events" style={{ color: "blue", textDecoration: "underline" }}>
              Go to Events Page (with error logger)
            </a>
          </li>
          <li style={{ marginBottom: "10px" }}>
            <a href="/calendar" style={{ color: "blue", textDecoration: "underline" }}>
              Go to Calendar Page (with error logger)
            </a>
          </li>
        </ul>
      </div>

<a href="/diagnostic" style={{ color: "blue", textDecoration: "underline" }}>
        Back to Diagnostic
      </a>
    </div>
  )
}

[V0_FILE]typescriptreact:file="app/diagnostic/events-test/page.tsx" isMerged="true"
import ErrorLogger from "../error-logger"
import { getUniqueEvents } from "@/lib/event-data"

export default function EventsTestPage() {
  const allEvents = getUniqueEvents()
  const upcomingEvents = allEvents.filter((event) => !event.isPast).slice(0, 2)

return (
    <div
      style={{
        padding: "20px",
        fontFamily: "monospace",
        maxWidth: "800px",
        margin: "0 auto",
        background: "black",
        color: "white",
      }}
    >
      <ErrorLogger />

<h1 style={{ fontSize: "24px", marginBottom: "20px" }}>Events Test Page</h1>

<div style={{ marginBottom: "20px", padding: "10px", border: "1px solid #333" }}>
        <p>This is a simplified version of the events page with error logging.</p>
      </div>

<div style={{ marginBottom: "20px" }}>
        <h2 style={{ fontSize: "18px", marginBottom: "10px" }}>Upcoming Events</h2>

<div style={{ display: "grid", gridTemplateColumns: "1fr", gap: "15px" }}>
          {upcomingEvents.map((event) => (
            <div key={event.id} style={{ padding: "15px", border: "1px solid #333", borderRadius: "5px" }}>
              <h3 style={{ fontSize: "16px", marginBottom: "5px" }}>{event.title}</h3>
              <p style={{ fontSize: "14px", color: "#aaa" }}>
                {event.venue} • {event.dateRange}
              </p>

<a href="/diagnostic" style={{ color: "#3b82f6", textDecoration: "underline" }}>
        Back to Diagnostic
      </a>
    </div>
  )
}

[V0_FILE]typescriptreact:file="app/diagnostic/page.tsx" isMerged="true"
export default function DiagnosticPage() {
  return (
    <div style={{ padding: "20px", fontFamily: "monospace", maxWidth: "800px", margin: "0 auto" }}>
      <h1 style={{ fontSize: "24px", marginBottom: "20px" }}>React Rendering Diagnostic</h1>

[V0_FILE]typescriptreact:file="app/diagnostic/test1/page.tsx" isMerged="true"
export default function Test1Page() {
  return (
    <div style={{ padding: "20px", fontFamily: "monospace", maxWidth: "800px", margin: "0 auto" }}>
      <h1 style={{ fontSize: "24px", marginBottom: "20px" }}>Test 1: Minimal HTML</h1>

<div style={{ marginBottom: "20px", padding: "10px", border: "1px solid #ccc" }}>
        <p>This page contains only static HTML with no components or hooks.</p>
      </div>

<a href="/diagnostic" style={{ color: "blue", textDecoration: "underline" }}>
        Back to Diagnostic
      </a>
    </div>
  )
}

[V0_FILE]typescriptreact:file="app/diagnostic/test2/page.tsx" isMerged="true"
export default function Test2Page() {
  return (
    <div style={{ padding: "20px", fontFamily: "monospace", maxWidth: "800px", margin: "0 auto" }}>
      <h1 style={{ fontSize: "24px", marginBottom: "20px" }}>Test 2: With Image Tag</h1>

<div style={{ marginBottom: "20px", padding: "10px", border: "1px solid #ccc" }}>
        <p>This page contains a standard HTML img tag.</p>

<a href="/diagnostic" style={{ color: "blue", textDecoration: "underline" }}>
        Back to Diagnostic
      </a>
    </div>
  )
}

[V0_FILE]typescriptreact:file="app/diagnostic/test3/page.tsx" isMerged="true"
import Image from "next/image"

export default function Test3Page() {
  return (
    <div style={{ padding: "20px", fontFamily: "monospace", maxWidth: "800px", margin: "0 auto" }}>
      <h1 style={{ fontSize: "24px", marginBottom: "20px" }}>Test 3: With Next/Image</h1>

<div style={{ marginBottom: "20px", padding: "10px", border: "1px solid #ccc" }}>
        <p>This page contains a Next.js Image component.</p>

<a href="/diagnostic" style={{ color: "blue", textDecoration: "underline" }}>
        Back to Diagnostic
      </a>
    </div>
  )
}

[V0_FILE]typescriptreact:file="app/diagnostic/test4/page.tsx" isMerged="true"
import ClientComponent from "./client-component"

export default function Test4Page() {
  return (
    <div style={{ padding: "20px", fontFamily: "monospace", maxWidth: "800px", margin: "0 auto" }}>
      <h1 style={{ fontSize: "24px", marginBottom: "20px" }}>Test 4: With Client Component</h1>

<div style={{ marginBottom: "20px", padding: "10px", border: "1px solid #ccc" }}>
        <p>This page contains a client component with a React hook.</p>

<a href="/diagnostic" style={{ color: "blue", textDecoration: "underline" }}>
        Back to Diagnostic
      </a>
    </div>
  )
}

[V0_FILE]typescriptreact:file="app/diagnostic/test4/client-component.tsx" isMerged="true"
"use client"

import { useState } from "react"

export default function ClientComponent() {
  const [count, setCount] = useState(0)

return (
    <div style={{ padding: "15px", border: "1px dashed #999", borderRadius: "5px" }}>
      <p>This is a client component with state: {count}</p>
      <button
        onClick={() => setCount(count + 1)}
        style={{
          marginTop: "10px",
          padding: "5px 10px",
          background: "#0070f3",
          color: "white",
          border: "none",
          borderRadius: "5px",
          cursor: "pointer",
        }}
      >
        Increment
      </button>
    </div>
  )
}

[V0_FILE]typescriptreact:file="app/diagnostic/error-logger.tsx" isMerged="true"
"use client"

import { useEffect } from "react"

export default function ErrorLogger() {
  useEffect(() => {
    console.log("Error Logger Initialized")

// Add a global error handler
    const errorHandler = (event) => {
      console.log("GLOBAL ERROR:", {
        message: event.message,
        filename: event.filename,
        lineno: event.lineno,
        colno: event.colno,
        error: event.error,
        stack: event.error?.stack,
      })
    }

window.addEventListener("error", errorHandler)

// Override console.error to get more details
    const originalConsoleError = console.error
    console.error = function (...args) {
      // Log the original error
      originalConsoleError.apply(this, args)

// Add additional debugging for specific errors
      if (args[0] && typeof args[0] === "string") {
        if (args[0].includes("Hydration failed")) {
          console.log("HYDRATION ERROR DETECTED:", {
            details: args,
            stack: new Error().stack,
          })
        }
      }
    }

return () => {
      console.error = originalConsoleError
      window.removeEventListener("error", errorHandler)
    }
  }, [])

return null
}

[V0_FILE]typescriptreact:file="app/diagnostic/with-logger/page.tsx" isMerged="true"
import ErrorLogger from "../error-logger"

export default function WithLoggerPage() {
  return (
    <div style={{ padding: "20px", fontFamily: "monospace", maxWidth: "800px", margin: "0 auto" }}>
      <ErrorLogger />

<h1 style={{ fontSize: "24px", marginBottom: "20px" }}>Page With Error Logger</h1>

<div style={{ marginBottom: "20px", padding: "10px", border: "1px solid #ccc" }}>
        <p>This page includes the error logger component.</p>
        <p>Open your browser console and navigate to problematic pages to see detailed error logs.</p>
      </div>

<div style={{ marginBottom: "20px" }}>
        <h2 style={{ fontSize: "18px", marginBottom: "10px" }}>Test Navigation</h2>
        <ul style={{ listStyleType: "none", padding: 0 }}>
          <li style={{ marginBottom: "10px" }}>
            <a href="/events" style={{ color: "blue", textDecoration: "underline" }}>
              Go to Events Page
            </a>
          </li>
          <li style={{ marginBottom: "10px" }}>
            <a href="/calendar" style={{ color: "blue", textDecoration: "underline" }}>
              Go to Calendar Page
            </a>
          </li>
        </ul>
      </div>

<a href="/diagnostic" style={{ color: "blue", textDecoration: "underline" }}>
        Back to Diagnostic
      </a>
    </div>
  )
}

[V0_FILE]typescriptreact:file="app/diagnostic/minimal-events/page.tsx" isMerged="true"
export default function MinimalEventsPage() {
  return (
    <div
      style={{
        padding: "20px",
        fontFamily: "monospace",
        maxWidth: "800px",
        margin: "0 auto",
        background: "black",
        color: "white",
      }}
    >
      <h1 style={{ fontSize: "24px", marginBottom: "20px" }}>Minimal Events Page</h1>

<div style={{ marginBottom: "20px", padding: "10px", border: "1px solid #333" }}>
        <p>This is a minimal version of the events page with no client components, hooks, or context providers.</p>
      </div>

<div style={{ marginBottom: "20px" }}>
        <h2 style={{ fontSize: "18px", marginBottom: "10px" }}>Upcoming Events</h2>

<div style={{ padding: "15px", border: "1px solid #333", borderRadius: "5px", marginBottom: "15px" }}>
          <h3 style={{ fontSize: "16px", marginBottom: "5px" }}>Bunnyland - Easter Weekend</h3>
          <p style={{ fontSize: "14px", color: "#aaa" }}>Troy Liquor Bar • April 17-20, 2025</p>
        </div>

<div style={{ padding: "15px", border: "1px solid #333", borderRadius: "5px" }}>
          <h3 style={{ fontSize: "16px", marginBottom: "5px" }}>Pot of Gold - St. Patrick's Day Weekend</h3>
          <p style={{ fontSize: "14px", color: "#aaa" }}>Troy Liquor Bar & RUSH Lounge • March 13-17, 2025</p>
        </div>
      </div>

<a href="/diagnostic" style={{ color: "#3b82f6", textDecoration: "underline" }}>
        Back to Diagnostic
      </a>
    </div>
  )
}

[V0_FILE]typescriptreact:file="app/calendar/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"
import Image from "next/image"
import { getCalendarEvents } from "@/lib/event-data"

// Event data based on the flyers and regular residency
const mockEvents = [
  // Special events from flyers
  {
    id: "valentines-2025",
    title: "Love Weekend",
    date: new Date("2025-02-14"),
    startTime: "10:00 PM",
    endTime: "4:00 AM",
    venue: "Troy Liquor Bar",
    address: "Golden Nugget, 129 Fremont Street, Las Vegas",
    description:
      "Celebrate Valentine's Day Weekend with immersive visuals and incredible music at Troy Liquor Bar. OpticMystic will transform the venue into a romantic wonderland with stunning visual effects synchronized to the music.",
    image: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Love%20line-Xt3nLSnxpOdWFEVnLXAlezuxQfGL91.jpeg",
    performers: ["DJ Romance", "Heart Beats", "Love Notes"],
    isPast: false,
    isSpecialEvent: true,
    dateRange: "February 13-15, 2025",
  },
  {
    id: "st-patricks-2025",
    title: "Pot of Gold - St. Patrick's Day Weekend",
    date: new Date("2025-03-13"),
    startTime: "10:00 PM",
    endTime: "4:00 AM",
    venue: "Troy Liquor Bar & RUSH Lounge",
    address: "Golden Nugget, 129 Fremont Street, Las Vegas",
    description:
      "Join us for a magical St. Patrick's Day Weekend celebration at Golden Nugget's Troy Liquor Bar and RUSH Lounge. Experience immersive visuals by OpticMystic and music by top DJs.\n\nFull decor, costume encouraged, no cover, and tables available!",
    image:
      "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/482253189_10232278331953537_7407373698053839555_n%20%281%29.jpg-3oxXfmOfkg8TPsOo5BSgNo1hzb5H6a.jpeg",
    performers: [
      "Andrew B",
      "Baywood",
      "Cut & Boost",
      "Flow",
      "High Octane",
      "Hot Pursuit",
      "Mahfous Roman",
      "Mars",
      "Snowen18",
      "Spectra",
      "Tim Clark",
      "Vintage 72",
    ],
    isPast: false,
    isSpecialEvent: true,
    dateRange: "March 13-17, 2025",
  },
  {
    id: "easter-weekend-2025",
    title: "Bunnyland - Easter Weekend",
    date: new Date("2025-04-17"),
    startTime: "10:00 PM",
    endTime: "4:00 AM",
    venue: "Troy Liquor Bar & RUSH Lounge",
    address: "Golden Nugget, 129 Fremont Street, Las Vegas",
    description:
      "Hop into Easter Weekend at Golden Nugget's Troy Liquor Bar and RUSH Lounge. Experience the vibrant colors and playful visuals by OpticMystic alongside amazing music from our featured DJs.\n\nFull decor, costume encouraged, no cover, and tables available!",
    image:
      "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/486140743_10162706597156940_4105533839633710548_n.jpg-7X2mqocOarUqtrilK9f9gUHKMB94Rk.jpeg",
    performers: [
      "Andrew B",
      "Andrew B",
      "Baywood",
      "CHNDLR",
      "Flow",
      "High Octane",
      "KEYMO",
      "Mahfous Roman",
      "Mars",
      "Snowen18",
      "Spectra",
      "Tim Clark",
      "Vintage 72",
    ],
    isPast: false,
    isSpecialEvent: true,
    dateRange: "April 17-20, 2025",
  },

// Additional dates for the special events
  // Valentine's Weekend additional dates
  {
    id: "valentines-2025-day2",
    title: "Love Weekend",
    date: new Date("2025-02-15"),
    startTime: "10:00 PM",
    endTime: "4:00 AM",
    venue: "Troy Liquor Bar",
    address: "Golden Nugget, 129 Fremont Street, Las Vegas",
    description:
      "Celebrate Valentine's Day Weekend with immersive visuals and incredible music at Troy Liquor Bar. OpticMystic will transform the venue into a romantic wonderland with stunning visual effects synchronized to the music.",
    image: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Love%20line-Xt3nLSnxpOdWFEVnLXAlezuxQfGL91.jpeg",
    performers: ["DJ Romance", "Heart Beats", "Love Notes"],
    isPast: false,
    isSpecialEvent: true,
    dateRange: "February 13-15, 2025",
  },
  {
    id: "valentines-2025-day3",
    title: "Love Weekend",
    date: new Date("2025-02-13"),
    startTime: "10:00 PM",
    endTime: "4:00 AM",
    venue: "Troy Liquor Bar",
    address: "Golden Nugget, 129 Fremont Street, Las Vegas",
    description:
      "Celebrate Valentine's Day Weekend with immersive visuals and incredible music at Troy Liquor Bar. OpticMystic will transform the venue into a romantic wonderland with stunning visual effects synchronized to the music.",
    image: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Love%20line-Xt3nLSnxpOdWFEVnLXAlezuxQfGL91.jpeg",
    performers: ["DJ Romance", "Heart Beats", "Love Notes"],
    isPast: false,
    isSpecialEvent: true,
    dateRange: "February 13-15, 2025",
  },

// St. Patrick's Day Weekend additional dates
  {
    id: "st-patricks-2025-day2",
    title: "Pot of Gold - St. Patrick's Day Weekend",
    date: new Date("2025-03-14"),
    startTime: "10:00 PM",
    endTime: "4:00 AM",
    venue: "Troy Liquor Bar & RUSH Lounge",
    address: "Golden Nugget, 129 Fremont Street, Las Vegas",
    description:
      "Join us for a magical St. Patrick's Day Weekend celebration at Golden Nugget's Troy Liquor Bar and RUSH Lounge. Experience immersive visuals by OpticMystic and music by top DJs.\n\nFull decor, costume encouraged, no cover, and tables available!",
    image:
      "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/482253189_10232278331953537_7407373698053839555_n%20%281%29.jpg-3oxXfmOfkg8TPsOo5BSgNo1hzb5H6a.jpeg",
    performers: [
      "Andrew B",
      "Baywood",
      "Cut & Boost",
      "Flow",
      "High Octane",
      "Hot Pursuit",
      "Mahfous Roman",
      "Mars",
      "Snowen18",
      "Spectra",
      "Tim Clark",
      "Vintage 72",
    ],
    isPast: false,
    isSpecialEvent: true,
    dateRange: "March 13-17, 2025",
  },
  {
    id: "st-patricks-2025-day3",
    title: "Pot of Gold - St. Patrick's Day Weekend",
    date: new Date("2025-03-15"),
    startTime: "10:00 PM",
    endTime: "4:00 AM",
    venue: "Troy Liquor Bar & RUSH Lounge",
    address: "Golden Nugget, 129 Fremont Street, Las Vegas",
    description:
      "Join us for a magical St. Patrick's Day Weekend celebration at Golden Nugget's Troy Liquor Bar and RUSH Lounge. Experience immersive visuals by OpticMystic and music by top DJs.\n\nFull decor, costume encouraged, no cover, and tables available!",
    image:
      "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/482253189_10232278331953537_7407373698053839555_n%20%281%29.jpg-3oxXfmOfkg8TPsOo5BSgNo1hzb5H6a.jpeg",
    performers: [
      "Andrew B",
      "Baywood",
      "Cut & Boost",
      "Flow",
      "High Octane",
      "Hot Pursuit",
      "Mahfous Roman",
      "Mars",
      "Snowen18",
      "Spectra",
      "Tim Clark",
      "Vintage 72",
    ],
    isPast: false,
    isSpecialEvent: true,
    dateRange: "March 13-17, 2025",
  },
  {
    id: "st-patricks-2025-day4",
    title: "Pot of Gold - St. Patrick's Day Weekend",
    date: new Date("2025-03-16"),
    startTime: "10:00 PM",
    endTime: "4:00 AM",
    venue: "Troy Liquor Bar & RUSH Lounge",
    address: "Golden Nugget, 129 Fremont Street, Las Vegas",
    description:
      "Join us for a magical St. Patrick's Day Weekend celebration at Golden Nugget's Troy Liquor Bar and RUSH Lounge. Experience immersive visuals by OpticMystic and music by top DJs.\n\nFull decor, costume encouraged, no cover, and tables available!",
    image:
      "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/482253189_10232278331953537_7407373698053839555_n%20%281%29.jpg-3oxXfmOfkg8TPsOo5BSgNo1hzb5H6a.jpeg",
    performers: [
      "Andrew B",
      "Baywood",
      "Cut & Boost",
      "Flow",
      "High Octane",
      "Hot Pursuit",
      "Mahfous Roman",
      "Mars",
      "Snowen18",
      "Spectra",
      "Tim Clark",
      "Vintage 72",
    ],
    isPast: false,
    isSpecialEvent: true,
    dateRange: "March 13-17, 2025",
  },
  {
    id: "st-patricks-2025-day5",
    title: "Pot of Gold - St. Patrick's Day Weekend",
    date: new Date("2025-03-17"),
    startTime: "10:00 PM",
    endTime: "4:00 AM",
    venue: "Troy Liquor Bar & RUSH Lounge",
    address: "Golden Nugget, 129 Fremont Street, Las Vegas",
    description:
      "Join us for a magical St. Patrick's Day Weekend celebration at Golden Nugget's Troy Liquor Bar and RUSH Lounge. Experience immersive visuals by OpticMystic and music by top DJs.\n\nFull decor, costume encouraged, no cover, and tables available!",
    image:
      "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/482253189_10232278331953537_7407373698053839555_n%20%281%29.jpg-3oxXfmOfkg8TPsOo5BSgNo1hzb5H6a.jpeg",
    performers: [
      "Andrew B",
      "Baywood",
      "Cut & Boost",
      "Flow",
      "High Octane",
      "Hot Pursuit",
      "Mahfous Roman",
      "Mars",
      "Snowen18",
      "Spectra",
      "Tim Clark",
      "Vintage 72",
    ],
    isPast: false,
    isSpecialEvent: true,
    dateRange: "March 13-17, 2025",
  },

// Easter Weekend additional dates
  {
    id: "easter-weekend-2025-day2",
    title: "Bunnyland - Easter Weekend",
    date: new Date("2025-04-18"),
    startTime: "10:00 PM",
    endTime: "4:00 AM",
    venue: "Troy Liquor Bar & RUSH Lounge",
    address: "Golden Nugget, 129 Fremont Street, Las Vegas",
    description: "Hop into Easter Weekend at Golden Nugget's Troy Liquor Bar and RUSH  Las Vegas",
    description:
      "Hop into Easter Weekend at Golden Nugget's Troy Liquor Bar and RUSH Lounge. Experience the vibrant colors and playful visuals by OpticMystic alongside amazing music from our featured DJs.\n\nFull decor, costume encouraged, no cover, and tables available!",
    image:
      "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/486140743_10162706597156940_4105533839633710548_n.jpg-7X2mqocOarUqtrilK9f9gUHKMB94Rk.jpeg",
    performers: [
      "Andrew B",
      "Baywood",
      "CHNDLR",
      "Flow",
      "High Octane",
      "KEYMO",
      "Mahfous Roman",
      "Mars",
      "Snowen18",
      "Spectra",
      "Tim Clark",
      "Vintage 72",
    ],
    isPast: false,
    isSpecialEvent: true,
    dateRange: "April 17-20, 2025",
  },
  {
    id: "easter-weekend-2025-day3",
    title: "Bunnyland - Easter Weekend",
    date: new Date("2025-04-19"),
    startTime: "10:00 PM",
    endTime: "4:00 AM",
    venue: "Troy Liquor Bar & RUSH Lounge",
    address: "Golden Nugget, 129 Fremont Street, Las Vegas",
    description:
      "Hop into Easter Weekend at Golden Nugget's Troy Liquor Bar and RUSH Lounge. Experience the vibrant colors and playful visuals by OpticMystic alongside amazing music from our featured DJs.\n\nFull decor, costume encouraged, no cover, and tables available!",
    image:
      "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/486140743_10162706597156940_4105533839633710548_n.jpg-7X2mqocOarUqtrilK9f9gUHKMB94Rk.jpeg",
    performers: [
      "Andrew B",
      "Baywood",
      "CHNDLR",
      "Flow",
      "High Octane",
      "KEYMO",
      "Mahfous Roman",
      "Mars",
      "Snowen18",
      "Spectra",
      "Tim Clark",
      "Vintage 72",
    ],
    isPast: false,
    isSpecialEvent: true,
    dateRange: "April 17-20, 2025",
  },
  {
    id: "easter-weekend-2025-day4",
    title: "Bunnyland - Easter Weekend",
    date: new Date("2025-04-20"),
    startTime: "10:00 PM",
    endTime: "4:00 AM",
    venue: "Troy Liquor Bar & RUSH Lounge",
    address: "Golden Nugget, 129 Fremont Street, Las Vegas",
    description:
      "Hop into Easter Weekend at Golden Nugget's Troy Liquor Bar and RUSH Lounge. Experience the vibrant colors and playful visuals by OpticMystic alongside amazing music from our featured DJs.\n\nFull decor, costume encouraged, no cover, and tables available!",
    image:
      "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/486140743_10162706597156940_4105533839633710548_n.jpg-7X2mqocOarUqtrilK9f9gUHKMB94Rk.jpeg",
    performers: [
      "Andrew B",
      "Baywood",
      "CHNDLR",
      "Flow",
      "High Octane",
      "KEYMO",
      "Mahfous Roman",
      "Mars",
      "Snowen18",
      "Spectra",
      "Tim Clark",
      "Vintage 72",
    ],
    isPast: false,
    isSpecialEvent: true,
    dateRange: "April 17-20, 2025",
  },

// Past events
  {
    id: "halloween-2024",
    title: "Nightmare on Fremont Street",
    date: new Date("2024-10-31"),
    startTime: "10:00 PM",
    endTime: "4:00 AM",
    venue: "Troy Liquor Bar",
    address: "Golden Nugget, 129 Fremont Street, Las Vegas",
    description:
      "Experience the spookiest night of the year with haunting visuals and bone-chilling beats. OpticMystic transforms Troy Liquor Bar into a visual nightmare you won't want to wake up from.",
    image: "/placeholder.svg?height=800&width=600",
    performers: ["Ghostly Beats", "Haunted House", "Spooky Tunes"],
    isPast: true,
    isSpecialEvent: true,
  },
  {
    id: "labor-day-2024",
    title: "Labor Day Weekend Bash",
    date: new Date("2024-09-02"),
    startTime: "10:00 PM",
    endTime: "4:00 AM",
    venue: "RUSH Lounge",
    address: "Golden Nugget, 129 Fremont Street, Las Vegas",
    description:
      "End summer with a bang at our Labor Day Weekend celebration. OpticMystic brings summer-themed visuals and high-energy effects to complement the hottest tracks.",
    image: "/placeholder.svg?height=800&width=600",
    performers: ["Summer Vibes", "Beach House", "Sunset DJs"],
    isPast: true,
    isSpecialEvent: true,
  },
]

export default function CalendarPage() {
  const events = getCalendarEvents()
  const upcomingEvents = events.filter((event) => !event.isPast)

return (
    <div className="min-h-screen bg-black text-white">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
        {/* Header */}
        <header className="mb-8">
          <h1 className="text-3xl font-bold">Events Calendar</h1>
          <p className="text-white/70 mt-1">Find upcoming performances and special events</p>
        </header>

<div className="grid md:grid-cols-3 gap-6">
          {/* Main Content */}
          <div className="md:col-span-2">
            <div className="bg-black/50 border border-white/10 rounded-xl p-4">
              <h2 className="text-xl font-bold mb-4">Upcoming Events</h2>

<div className="space-y-3">
                {upcomingEvents.length > 0 ? (
                  upcomingEvents.map((event) => (
                    <div
                      key={event.id}
                      className="flex items-center gap-3 p-2 rounded-md hover:bg-white/10 transition-colors"
                    >
                      <div className="w-14 h-14 rounded-md bg-black/50 flex items-center justify-center text-center flex-shrink-0 border border-white/10 overflow-hidden">
                        {event.image ? (
                          <Image
                            src={event.image || "/placeholder.svg"}
                            alt={event.title}
                            width={56}
                            height={56}
                            className="object-cover w-full h-full"
                          />
                        ) : (
                          <div className="leading-tight">
                            <div className="text-[10px] uppercase text-green-400">
                              {new Date(event.date).toLocaleDateString("en-US", { month: "short" })}
                            </div>
                            <div className="text-base font-bold">{new Date(event.date).getDate()}</div>
                          </div>
                        )}
                      </div>
                      <div className="flex-1 min-w-0">
                        <div className="text-sm font-medium">{event.title}</div>
                        <div className="text-xs text-white/60">
                          {new Date(event.date).toLocaleDateString("en-US", {
                            weekday: "short",
                            month: "short",
                            day: "numeric",
                          })}{" "}
                          • {event.venue}
                        </div>
                      </div>
                    </div>
                  ))
                ) : (
                  <div className="text-center py-6 text-white/50">
                    <p>No events this month</p>
                    <p className="text-sm mt-1">Check out our regular residency every Thursday, Friday, and Saturday</p>
                  </div>
                )}
              </div>
            </div>
          </div>

{/* Sidebar */}
          <div className="space-y-6">
            {/* Regular Residency */}
            <div className="bg-white/5 border border-white/10 rounded-xl p-4">
              <h3 className="text-lg font-bold mb-3">Regular Residency</h3>
              <div className="grid grid-cols-3 gap-2 text-center">
                <div className="bg-white/5 rounded-md p-2">
                  <div className="font-medium text-sm">Thursday</div>
                  <div className="text-xs text-white/60">9PM-2AM</div>
                </div>
                <div className="bg-white/5 rounded-md p-2">
                  <div className="font-medium text-sm">Friday</div>
                  <div className="text-xs text-white/60">9PM-2AM</div>
                </div>
                <div className="bg-white/5 rounded-md p-2">
                  <div className="font-medium text-sm">Saturday</div>
                  <div className="text-xs text-white/60">9PM-2AM</div>
                </div>
              </div>
              <div className="mt-3 text-xs text-center text-white/60">Troy Liquor Bar at Golden Nugget Las Vegas</div>
            </div>

{/* Venues */}
            <div className="bg-white/5 border border-white/10 rounded-xl p-4">
              <h3 className="text-lg font-bold mb-3">Venues</h3>
              <div className="space-y-2">
                <a href="/calendar" className="block w-full bg-white/10 px-3 py-2 rounded-md">
                  All Venues
                </a>
                <a
                  href="/calendar?venue=Troy%20Liquor%20Bar"
                  className="block w-full px-3 py-2 rounded-md hover:bg-white/10"
                >
                  Troy Liquor Bar
                </a>
                <a href="/calendar?venue=RUSH%20Lounge" className="block w-full px-3 py-2 rounded-md hover:bg-white/10">
                  RUSH Lounge
                </a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}

[V0_FILE]typescriptreact:file="components/events-calendar.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import { useState } from "react"
import Link from "next/link"
import Image from "next/image"
import { ChevronLeft, ChevronRight, CalendarIcon, Music } from "lucide-react"
import {
  format,
  addMonths,
  subMonths,
  isSameDay,
  isAfter,
  startOfMonth,
  endOfMonth,
  isSameMonth,
  getDay,
} from "date-fns"
import { cn } from "@/lib/utils"
import { Button } from "@/components/ui/button"

interface Event {
  id: string
  title: string
  date: Date
  venue: string
  image: string
  isPast?: boolean
  isSpecialEvent?: boolean
  eventSlug?: string
}

interface EventsCalendarProps {
  events: Event[]
  className?: string
  onEventClick?: (event: Event) => void
  compact?: boolean
}

export function EventsCalendar({ events, className, onEventClick, compact = false }: EventsCalendarProps) {
  const [currentMonth, setCurrentMonth] = useState(new Date())

const nextMonth = () => setCurrentMonth(addMonths(currentMonth, 1))
  const prevMonth = () => setCurrentMonth(subMonths(currentMonth, 1))

const monthStart = startOfMonth(currentMonth)
  const monthEnd = endOfMonth(currentMonth)

// Get events for the current month
  const currentMonthEvents = events.filter((event) => isSameMonth(new Date(event.date), currentMonth))

// Get today's date
  const today = new Date()

// Function to check if a day has events
  const getEventsForDay = (day: Date) => {
    return events.filter((event) => isSameDay(new Date(event.date), day))
  }

// Function to check if a day is a regular residency day (Thursday, Friday, Saturday)
  const isResidencyDay = (day: Date) => {
    const dayOfWeek = getDay(day)
    // 4 = Thursday, 5 = Friday, 6 = Saturday
    return (
      [4, 5, 6].includes(dayOfWeek) &&
      !events.some((event) => isSameDay(new Date(event.date), day) && event.isSpecialEvent) &&
      (isAfter(day, today) || isSameDay(day, today))
    )
  }

// Handle event click
  const handleEventClick = (event: Event) => {
    if (onEventClick) {
      onEventClick(event)
    }
  }

// Group events by date
  const eventsByDate = currentMonthEvents.reduce(
    (acc, event) => {
      const dateStr = format(new Date(event.date), "yyyy-MM-dd")
      if (!acc[dateStr]) {
        acc[dateStr] = []
      }
      acc[dateStr].push(event)
      return acc
    },
    {} as Record<string, Event[]>,
  )

// Get unique events (by eventSlug) for the month
  const uniqueEvents = Object.values(eventsByDate)
    .flatMap((events) => {
      // Group by eventSlug
      const eventsBySlug: Record<string, Event[]> = {}
      events.forEach((event) => {
        const slug = event.eventSlug || event.id
        if (!eventsBySlug[slug]) {
          eventsBySlug[slug] = []
        }
        eventsBySlug[slug].push(event)
      })

// Return first event from each group
      return Object.values(eventsBySlug).map((events) => events[0])
    })
    .filter((event) => !event.isPast || compact)
    .sort((a, b) => new Date(a.date).getTime() - new Date(b.date).getTime())

return (
    <div className={cn("bg-black/50 backdrop-blur-md border border-white/10 rounded-xl p-4", className)}>
      {/* Calendar Header */}
      <div className="flex items-center justify-between mb-6">
        <h3 className="text-xl font-bold flex items-center gap-2">
          <CalendarIcon className="h-5 w-5 text-red-500" />
          {format(currentMonth, "MMMM yyyy")}
        </h3>
        <div className="flex gap-1">
          <Button
            variant="ghost"
            size="icon"
            onClick={prevMonth}
            className="h-8 w-8 text-white/70 hover:text-white hover:bg-white/10"
          >
            <ChevronLeft className="h-4 w-4" />
            <span className="sr-only">Previous month</span>
          </Button>
          <Button
            variant="ghost"
            size="icon"
            onClick={nextMonth}
            className="h-8 w-8 text-white/70 hover:text-white hover:bg-white/10"
          >
            <ChevronRight className="h-4 w-4" />
            <span className="sr-only">Next month</span>
          </Button>
        </div>
      </div>

{/* Upcoming Events List */}
      <div className="space-y-3">
        {uniqueEvents.length > 0 ? (
          uniqueEvents.map((event) => (
            <div key={event.id} className="flex items-center gap-3 p-2 rounded-md hover:bg-white/10 transition-colors">
              <div className="w-14 h-14 rounded-md bg-black/50 flex items-center justify-center text-center flex-shrink-0 border border-white/10 overflow-hidden">
                {event.image ? (
                  <Image
                    src={event.image || "/placeholder.svg"}
                    alt={event.title}
                    width={56}
                    height={56}
                    className="object-cover w-full h-full"
                  />
                ) : (
                  <div className="leading-tight">
                    <div className="text-[10px] uppercase text-red-400">{format(new Date(event.date), "MMM")}</div>
                    <div className="text-base font-bold">{format(new Date(event.date), "d")}</div>
                  </div>
                )}
              </div>
              <div className="flex-1 min-w-0">
                <div className="text-sm font-medium">{event.title}</div>
                <div className="text-xs text-white/60">
                  {format(new Date(event.date), "EEE, MMM d")} • {event.venue}
                </div>
              </div>
            </div>
          ))
        ) : (
          <div className="text-center py-6 text-white/50">
            <p>No events this month</p>
            <p className="text-sm mt-1">Check out our regular residency every Thursday, Friday, and Saturday</p>
          </div>
        )}
      </div>

{/* Regular Residency Info */}
      {!compact && (
        <div className="mt-6 pt-4 border-t border-white/10">
          <h4 className="text-sm font-medium mb-3 flex items-center gap-2">
            <Music className="h-4 w-4" />
            Regular Residency
          </h4>
          <div className="grid grid-cols-3 gap-2 text-center">
            <div className="bg-white/5 rounded-md p-2">
              <div className="font-medium text-sm">Thursday</div>
              <div className="text-xs text-white/60">9PM-2AM</div>
            </div>
            <div className="bg-white/5 rounded-md p-2">
              <div className="font-medium text-sm">Friday</div>
              <div className="text-xs text-white/60">9PM-2AM</div>
            </div>
            <div className="bg-white/5 rounded-md p-2">
              <div className="font-medium text-sm">Saturday</div>
              <div className="text-xs text-white/60">9PM-2AM</div>
            </div>
          </div>
          <div className="mt-3 text-xs text-center text-white/60">Troy Liquor Bar at Golden Nugget Las Vegas</div>
        </div>
      )}

{/* View All Link */}
      {compact && (
        <div className="mt-4 text-center">
          <Button asChild variant="outline" size="sm">
            <Link href="/events">View All Events</Link>
          </Button>
        </div>
      )}
    </div>
  )
}

[V0_FILE]typescriptreact:file="components/calendar-widget.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import { useState } from "react"
import Link from "next/link"
import { ChevronLeft, ChevronRight, CalendarIcon, Music } from "lucide-react"
import {
  format,
  addMonths,
  subMonths,
  isSameDay,
  isBefore,
  isAfter,
  startOfMonth,
  endOfMonth,
  eachDayOfInterval,
  isSameMonth,
  getDay,
  startOfWeek,
  endOfWeek,
} from "date-fns"
import { cn } from "@/lib/utils"
import { Button } from "@/components/ui/button"
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip"

interface Event {
  id: string
  title: string
  date: Date
  venue: string
  image: string
  isPast?: boolean
  isSpecialEvent?: boolean
}

interface CalendarWidgetProps {
  events: Event[]
  className?: string
  onEventClick?: (event: Event) => void
  compact?: boolean
}

export function CalendarWidget({ events, className, onEventClick, compact = false }: CalendarWidgetProps) {
  const [currentMonth, setCurrentMonth] = useState(new Date())

const nextMonth = () => setCurrentMonth(addMonths(currentMonth, 1))
  const prevMonth = () => setCurrentMonth(subMonths(currentMonth, 1))

const monthStart = startOfMonth(currentMonth)
  const monthEnd = endOfMonth(currentMonth)
  const startDate = startOfWeek(monthStart)
  const endDate = endOfWeek(monthEnd)

const days = eachDayOfInterval({ start: startDate, end: endDate })

// Get events for the current month
  const currentMonthEvents = events.filter((event) => isSameMonth(new Date(event.date), currentMonth))

// Get today's date
  const today = new Date()

// Function to check if a day has events
  const getEventsForDay = (day: Date) => {
    return events.filter((event) => isSameDay(new Date(event.date), day))
  }

// Function to check if a day is a regular residency day (Thursday, Friday, Saturday)
  const isResidencyDay = (day: Date) => {
    const dayOfWeek = getDay(day)
    // 4 = Thursday, 5 = Friday, 6 = Saturday
    return (
      ([4, 5, 6].includes(dayOfWeek) &&
        !events.some((event) => isSameDay(new Date(event.date), day) && event.isSpecialEvent) &&
        isAfter(day, today)) ||
      isSameDay(day, today)
    )
  }

// Handle event click
  const handleEventClick = (event: Event) => {
    // Just show the event info in the current view
    if (onEventClick) {
      onEventClick(event)
    }
  }

{/* Calendar Grid */}
      <div className="grid grid-cols-7 gap-1 text-center mb-3">
        {["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"].map((day) => (
          <div key={day} className="text-xs font-medium text-white/70 py-1">
            {day}
          </div>
        ))}
      </div>

<div className="grid grid-cols-7 gap-1.5">
        {days.map((day, i) => {
          const dayEvents = getEventsForDay(day)
          const isToday = isSameDay(day, today)
          const isPast = isBefore(day, today) && !isToday
          const isCurrentMonth = isSameMonth(day, currentMonth)
          const hasSpecialEvent = dayEvents.some((event) => event.isSpecialEvent)
          const isRegularResidency = isResidencyDay(day)

return (
            <TooltipProvider key={i}>
              <Tooltip delayDuration={300}>
                <TooltipTrigger asChild>
                  <div
                    className={cn(
                      "aspect-square flex flex-col items-center justify-center rounded-md text-sm relative transition-all duration-200",
                      !isCurrentMonth && "opacity-30",
                      isToday && "bg-red-500/20 font-bold ring-1 ring-red-500",
                      isPast && "text-white/40",
                      hasSpecialEvent && !isPast && "cursor-pointer hover:bg-red-500/20 font-medium",
                      isRegularResidency && !isPast && "cursor-pointer hover:bg-white/10 font-medium",
                      (hasSpecialEvent || isRegularResidency) && !isPast && "bg-white/5",
                      dayEvents.length === 0 && !isRegularResidency && "cursor-default",
                    )}
                    onClick={() => {
                      if ((dayEvents.length > 0 || isRegularResidency) && !isPast && !compact) {
                        if (dayEvents.length > 0) {
                          handleEventClick(dayEvents[0])
                        } else if (isRegularResidency) {
                          // Create a virtual event for residency days
                          const residencyEvent = {
                            id: `residency-${format(day, "yyyy-MM-dd")}`,
                            title: "Regular Residency",
                            date: day,
                            venue: "Troy Liquor Bar",
                            image: "/placeholder.svg?height=800&width=600",
                            isPast: false,
                            isSpecialEvent: false,
                          }
                          handleEventClick(residencyEvent)
                        }
                      }
                    }}
                  >
                    <span
                      className={cn("z-10", (dayEvents.length > 0 || isRegularResidency) && !isPast && "font-medium")}
                    >
                      {format(day, "d")}
                    </span>

{/* Event indicators */}
                    {hasSpecialEvent && (
                      <div className="absolute bottom-1 flex gap-0.5 justify-center">
                        <div
                          className={cn(
                            "h-1.5 w-1.5 rounded-full",
                            isPast ? "bg-white/30" : "bg-red-500 animate-pulse",
                          )}
                        />
                      </div>
                    )}

{/* Regular residency indicator */}
                    {isRegularResidency && !hasSpecialEvent && (
                      <div className="absolute bottom-1 flex gap-0.5 justify-center">
                        <div className="h-1 w-1 rounded-full bg-white/50" />
                      </div>
                    )}

{/* Special event highlight */}
                    {hasSpecialEvent && !isPast && (
                      <div className="absolute inset-0 rounded-md ring-1 ring-red-500/50 pointer-events-none" />
                    )}
                  </div>
                </TooltipTrigger>
                {(dayEvents.length > 0 || isRegularResidency) && (
                  <TooltipContent side="bottom" className="bg-black/90 border-white/10 p-2">
                    <div className="text-xs font-medium">
                      {dayEvents.length > 0 ? (
                        dayEvents.map((event, idx) => (
                          <div key={idx} className="whitespace-nowrap flex items-center gap-1">
                            {event.isSpecialEvent && <span className="h-1.5 w-1.5 rounded-full bg-red-500" />}
                            {event.title} @ {event.venue}
                          </div>
                        ))
                      ) : isRegularResidency ? (
                        <div className="whitespace-nowrap flex items-center gap-1">
                          <Music className="h-3 w-3" />
                          Regular Residency @ Troy Liquor Bar (9PM-2AM)
                        </div>
                      ) : null}
                    </div>
                  </TooltipContent>
                )}
              </Tooltip>
            </TooltipProvider>
          )
        })}
      </div>

{/* Legend */}
      <div className="mt-4 flex items-center justify-center gap-4 text-xs text-white/70">
        <div className="flex items-center gap-1">
          <div className="h-2 w-2 rounded-full bg-red-500"></div>
          <span>Special Event</span>
        </div>
        <div className="flex items-center gap-1">
          <div className="h-2 w-2 rounded-full bg-white/50"></div>
          <span>Regular Residency</span>
        </div>
      </div>

{/* Upcoming Events List (only show in non-compact mode) */}
      {!compact && currentMonthEvents.length > 0 && (
        <div className="mt-6 pt-4 border-t border-white/10">
          <h4 className="text-sm font-medium mb-3">Upcoming Events</h4>
          <div className="space-y-2">
            {currentMonthEvents
              .filter((event) => !isBefore(new Date(event.date), today) || isSameDay(new Date(event.date), today))
              .slice(0, 3)
              .map((event) => (
                <div
                  key={event.id}
                  className="flex items-center gap-3 p-2 rounded-md hover:bg-white/10 transition-colors"
                >
                  <div className="w-12 h-12 rounded-md bg-black/50 flex items-center justify-center text-center flex-shrink-0 border border-white/10">
                    <div className="leading-tight">
                      <div className="text-[10px] uppercase text-red-400">{format(new Date(event.date), "MMM")}</div>
                      <div className="text-base font-bold">{format(new Date(event.date), "d")}</div>
                    </div>
                  </div>
                  <div className="flex-1 min-w-0">
                    <div className="text-sm font-medium truncate">{event.title}</div>
                    <div className="text-xs text-white/60 truncate">{event.venue}</div>
                  </div>
                </div>
              ))}
          </div>

{currentMonthEvents.filter(
            (event) => !isBefore(new Date(event.date), today) || isSameDay(new Date(event.date), today),
          ).length > 3 && (
            <Button variant="link" asChild className="text-xs mt-2 h-auto p-0">
              <Link href="/calendar">View all events</Link>
            </Button>
          )}
        </div>
      )}
    </div>
  )
}

[V0_FILE]typescriptreact:file="components/reservation-modal.tsx" isMerged="true"
"use client"

import type React from "react"

import { useState } from "react"
import { X, Phone, Mail, ExternalLink } from "lucide-react"
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog"
import { Button } from "@/components/ui/button"

export function ReservationModal({ trigger }: { trigger: React.ReactNode }) {
  const [open, setOpen] = useState(false)

return (
    <Dialog open={open} onOpenChange={setOpen}>
      <DialogTrigger asChild>{trigger}</DialogTrigger>
      <DialogContent className="sm:max-w-md bg-black border border-white/10">
        <DialogHeader>
          <DialogTitle className="text-xl">VIP Table Reservations</DialogTitle>
          <Button variant="ghost" size="icon" className="absolute right-4 top-4" onClick={() => setOpen(false)}>
            <X className="h-4 w-4" />
            <span className="sr-only">Close</span>
          </Button>
        </DialogHeader>

<div className="flex items-center gap-3">
            <Mail className="h-5 w-5 text-green-500" />
            <a href="mailto:Nightlife@goldennugget.com" className="text-white hover:underline">
              Nightlife@goldennugget.com
            </a>
          </div>

<div className="pt-4 border-t border-white/10">
            <a
              href="https://www.goldennugget.com/las-vegas/nightlife/Troy/"
              target="_blank"
              rel="noopener noreferrer"
              className="flex items-center gap-2 text-green-500 hover:text-green-400"
            >
              <ExternalLink className="h-4 w-4" />
              More Info
            </a>
          </div>
        </div>
      </DialogContent>
    </Dialog>
  )
}

[V0_FILE]typescriptreact:file="app/events/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
import { getUniqueEvents } from "@/lib/event-data"
import { ReservationModal } from "@/components/reservation-modal"
import Link from "next/link"

export default function EventsPage() {
  const allEvents = getUniqueEvents()
  const upcomingEvents = allEvents.filter((event) => !event.isPast)
  const pastEvents = allEvents.filter((event) => event.isPast)

return (
    <div className="min-h-screen bg-black text-white">
      {/* Navigation */}
      <header className="w-full z-40 bg-black/80 border-b border-white/10">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="flex justify-between items-center py-4">
            <Link href="/" className="flex items-center gap-2">
              <span className="font-bold text-xl">OpticMystic</span>
            </Link>
            <nav className="hidden md:flex items-center gap-8">
              <div className="flex items-center gap-6">
                <a href="/#projects" className="text-white/70 hover:text-white">
                  Latest Work
                </a>
                <a href="/#about" className="text-white/70 hover:text-white">
                  About
                </a>
                <Link href="/events" className="text-white hover:text-white">
                  Events
                </Link>
                <a href="/#contact" className="text-white/70 hover:text-white">
                  Contact
                </a>
              </div>
              <a
                href="mailto:booking@opticmystic.com?subject=Booking Inquiry"
                className="bg-green-500 hover:bg-green-600 text-black font-bold px-4 py-2 rounded-md"
              >
                Book Now
              </a>
            </nav>
            <div className="md:hidden">
              <a href="#menu" className="text-white">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  width="24"
                  height="24"
                  viewBox="0 0 24 24"
                  fill="none"
                  stroke="currentColor"
                  strokeWidth="2"
                  strokeLinecap="round"
                  strokeLinejoin="round"
                >
                  <line x1="4" x2="20" y1="12" y2="12" />
                  <line x1="4" x2="20" y1="6" y2="6" />
                  <line x1="4" x2="20" y1="18" y2="18" />
                </svg>
              </a>
            </div>
          </div>
        </div>
      </header>

<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
        {/* Header */}
        <header className="mb-8">
          <h1 className="text-4xl font-bold">Events</h1>
          <p className="text-white/70 mt-1">Special events and performances by OpticMystic</p>
        </header>

{/* Navigation */}
        <nav className="mb-8">
          <div className="space-y-2">
            <a href="#upcoming" className="inline-block px-4 py-2 rounded-md bg-white/10 text-white mr-2">
              Upcoming Events
            </a>
            <a href="#past" className="inline-block px-4 py-2 rounded-md text-white/70 hover:text-white">
              Past Events
            </a>
          </div>
        </nav>

{/* Upcoming Events Section */}
        <section id="upcoming" className="mb-16">
          <h2 className="text-2xl font-bold mb-6">Upcoming Events</h2>

{upcomingEvents.length === 0 ? (
            <div className="text-center py-12 bg-white/5 rounded-xl border border-white/10">
              <p className="text-white/70">No upcoming special events at the moment</p>
              <p className="text-sm mt-2 text-white/50">Check back soon for new announcements</p>
              <div className="mt-6">
                <h3 className="text-lg font-medium mb-3">Regular Residency</h3>
                <p className="text-white/70 mb-4">
                  Catch OpticMystic every Thursday, Friday, and Saturday at Troy Liquor Bar
                </p>
                <a
                  href="/booking"
                  className="inline-block bg-green-500 hover:bg-green-600 text-black font-bold px-4 py-2 rounded-md"
                >
                  Book VIP Table
                </a>
              </div>
            </div>
          ) : (
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
              {upcomingEvents.map((event) => (
                <article key={event.id} className="bg-white/5 border border-white/10 rounded-xl overflow-hidden h-full">
                  <div className="block">
                    <div className="relative aspect-[3/2]">
                      <img
                        src={event.image || "/placeholder.svg"}
                        alt={event.title}
                        className="absolute inset-0 w-full h-full object-cover"
                      />
                      <div className="absolute inset-0 bg-gradient-to-t from-black to-transparent opacity-70"></div>
                      <div className="absolute bottom-0 left-0 right-0 p-4">
                        <div className="mb-1">
                          <span className="inline-block px-2 py-1 rounded-full text-xs font-semibold bg-green-500 text-black">
                            {event.dateRange}
                          </span>
                        </div>
                        <h3 className="text-lg font-bold line-clamp-2">{event.title}</h3>
                        <p className="text-sm text-white/70">{event.venue}</p>
                      </div>
                    </div>
                    <div className="p-4">
                      <div className="text-sm text-white/70">
                        {event.startTime} - {event.endTime}
                      </div>
                      <div className="mt-3 flex justify-between items-center">
                        <div className="text-sm text-white/70">
                          {event.performers?.length || 0} {event.performers?.length === 1 ? "Performer" : "Performers"}
                        </div>
                        <span className="text-white/50">→</span>
                      </div>
                    </div>
                  </div>
                </article>
              ))}
            </div>
          )}
        </section>

{/* Regular Residency Section */}
        <section className="mb-16">
          <h2 className="text-2xl font-bold mb-6">Regular Residency</h2>
          <div className="bg-white/5 border border-white/10 rounded-xl p-6">
            <div className="flex flex-col md:flex-row gap-6 items-center">
              <div className="md:w-1/3">
                <img
                  src="/images/opticmystic-residency.png"
                  alt="OpticMystic performing at Troy Liquor Bar DJ booth with vibrant visuals"
                  className="rounded-lg object-cover aspect-square w-full"
                />
              </div>
              <div className="md:w-2/3">
                <h3 className="text-xl font-bold mb-2">Troy Liquor Bar Residency</h3>
                <p className="text-white/80 mb-4">
                  Catch OpticMystic's regular performances at Troy Liquor Bar every Thursday, Friday, and Saturday
                  night. Experience cutting-edge visuals synchronized to the music in an immersive nightlife
                  environment.
                </p>
                <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
                  <div className="bg-white/10 rounded-lg p-3 text-center">
                    <h4 className="font-medium">Thursday</h4>
                    <p className="text-white/70">9:00 PM - 2:00 AM</p>
                  </div>
                  <div className="bg-white/10 rounded-lg p-3 text-center">
                    <h4 className="font-medium">Friday</h4>
                    <p className="text-white/70">9:00 PM - 2:00 AM</p>
                  </div>
                  <div className="bg-white/10 rounded-lg p-3 text-center">
                    <h4 className="font-medium">Saturday</h4>
                    <p className="text-white/70">9:00 PM - 2:00 AM</p>
                  </div>
                </div>
                <div className="flex justify-center md:justify-start">
                  <ReservationModal
                    trigger={
                      <button className="inline-block bg-green-500 hover:bg-green-600 text-black font-bold px-4 py-2 rounded-md">
                        Book VIP Table
                      </button>
                    }
                  />
                </div>
              </div>
            </div>
          </div>
        </section>

{/* Past Events Section */}
        <section id="past">
          <h2 className="text-2xl font-bold mb-6">Past Events</h2>

{pastEvents.length === 0 ? (
            <div className="text-center py-12 bg-white/5 rounded-xl border border-white/10">
              <p className="text-white/70">No past events found</p>
            </div>
          ) : (
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
              {pastEvents.map((event) => (
                <article
                  key={event.id}
                  className="bg-white/5 border border-white/10 rounded-xl overflow-hidden h-full opacity-80"
                >
                  <div className="block">
                    <div className="relative aspect-[3/2]">
                      <img
                        src={event.image || "/placeholder.svg"}
                        alt={event.title}
                        className="absolute inset-0 w-full h-full object-cover opacity-80"
                      />
                      <div className="absolute inset-0 bg-gradient-to-t from-black to-transparent opacity-70"></div>
                      <div className="absolute bottom-0 left-0 right-0 p-4">
                        <div className="mb-1">
                          <span className="inline-block px-2 py-1 rounded-full text-xs font-semibold border border-white/20">
                            {event.dateRange}
                          </span>
                        </div>
                        <h3 className="text-lg font-bold line-clamp-2">{event.title}</h3>
                        <p className="text-sm text-white/70">{event.venue}</p>
                      </div>
                    </div>
                    <div className="p-4">
                      <div className="text-sm text-white/70">
                        {event.startTime} - {event.endTime}
                      </div>
                      <div className="mt-3 flex justify-between items-center">
                        <div className="text-sm text-white/70">Past Event</div>
                        <span className="text-white/50">→</span>
                      </div>
                    </div>
                  </div>
                </article>
              ))}
            </div>
          )}
        </section>

{/* Footer */}
        <footer className="border-t border-white/10 mt-16 pt-8 text-center text-white/50 text-sm">
          © {new Date().getFullYear()} OpticMystic. All rights reserved.
        </footer>
      </div>
    </div>
  )
}

[V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isQuickEdit="true"
import Link from "next/link"
import Image from "next/image"
import { getCalendarEvents } from "@/lib/event-data"
import { Logo } from "@/components/logo"
import { ReservationModal } from "@/components/reservation-modal"

export default function Home() {
  const calendarEvents = getCalendarEvents()
  const upcomingEvents = calendarEvents.filter((event) => !event.isPast).slice(0, 3)

return (
    <div className="min-h-screen bg-black text-white">
      {/* Navigation */}
      <header className="fixed top-0 w-full z-40 bg-black/80">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="flex justify-between items-center py-4">
            <Link href="/" className="flex items-center gap-2">
              <Logo size={32} />
              <span className="font-bold text-xl">OpticMystic.live</span>
            </Link>
            <nav className="hidden md:flex items-center gap-8">
              <div className="flex items-center gap-6">
                <a href="#projects" className="text-white/70 hover:text-white">
                  Latest Work
                </a>
                <a href="#about" className="text-white/70 hover:text-white">
                  About
                </a>
                <Link href="/events" className="text-white/70 hover:text-white">
                  Events
                </Link>
                <a href="#contact" className="text-white/70 hover:text-white">
                  Contact
                </a>
              </div>
              <a
                href="mailto:will@opticmystic.live?subject=Booking Inquiry"
                className="bg-green-500 hover:bg-green-600 text-black font-bold px-4 py-2 rounded-md"
              >
                Book Now
              </a>
            </nav>
            <div className="md:hidden">
              <a href="#menu" className="text-white">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  width="24"
                  height="24"
                  viewBox="0 0 24 24"
                  fill="none"
                  stroke="currentColor"
                  strokeWidth="2"
                  strokeLinecap="round"
                  strokeLinejoin="round"
                >
                  <line x1="4" x2="20" y1="12" y2="12" />
                  <line x1="4" x2="20" y1="6" y2="6" />
                  <line x1="4" x2="20" y1="18" y2="18" />
                </svg>
              </a>
            </div>
          </div>
        </div>
      </header>

{/* Hero Section */}
      <section className="relative min-h-screen flex items-center justify-center pt-16">
        <div className="absolute inset-0 z-0">
          <div className="absolute inset-0 bg-gradient-to-b from-black/50 via-black/30 to-black/50"></div>
          <iframe
            src="https://www.youtube.com/embed/WPoyesM7d20?autoplay=1&mute=1&controls=0&loop=1&playlist=WPoyesM7d20&playsinline=1&modestbranding=1&rel=0&showinfo=0"
            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
            className="w-full h-full object-cover opacity-50"
            style={{ border: "none" }}
            title="OpticMystic Background"
          ></iframe>
        </div>

<div className="relative z-10 w-full px-4 sm:px-6 lg:px-8 text-center">
          <div className="bg-white/5 py-12 px-4 sm:px-8 border-y border-white/10">
            <h1 className="text-4xl md:text-6xl lg:text-7xl font-bold mb-6">OpticMystic</h1>
            <p className="text-xl md:text-2xl text-white/70 mb-4">Live Visual Performance Art</p>
            <p className="text-lg md:text-xl text-white/60 mb-8 max-w-2xl mx-auto">
              Transforming spaces with cutting edge live mixed original visuals
            </p>
            <div className="flex flex-col sm:flex-row justify-center gap-4 mb-8">
              <a
                href="#projects"
                className="text-lg px-8 py-6 bg-white/10 hover:bg-white/20 border border-white/10 rounded-md"
              >
                View Latest Work
              </a>
            </div>
            <div className="bg-white/5 p-6 rounded-2xl border border-white/10 max-w-md mx-auto">
              <h3 className="text-xl font-bold mb-4 text-center">Connect With Me</h3>
              <div className="flex items-center justify-center gap-4">
                <a
                  href="https://instagram.com/opticmysticVJ"
                  target="_blank"
                  rel="noopener noreferrer"
                  className="p-2 rounded-full border border-white/20 bg-white/5"
                >
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    width="20"
                    height="20"
                    viewBox="0 0 24 24"
                    fill="none"
                    stroke="currentColor"
                    strokeWidth="2"
                    strokeLinecap="round"
                    strokeLinejoin="round"
                  >
                    <rect width="20" height="20" x="2" y="2" rx="5" ry="5" />
                    <path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z" />
                    <line x1="17.5" x2="17.51" y1="6.5" y2="6.5" />
                  </svg>
                </a>
                <a
                  href="https://youtube.com/@OpticMystic-VJ"
                  target="_blank"
                  rel="noopener noreferrer"
                  className="p-2 rounded-full border border-white/20 bg-white/5"
                >
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    width="20"
                    height="20"
                    viewBox="0 0 24 24"
                    fill="none"
                    stroke="currentColor"
                    strokeWidth="2"
                    strokeLinecap="round"
                    strokeLinejoin="round"
                  >
                    <path d="M2.5 17a24.12 24.12 0 0 1 0-10a2 2 0 0 1 1.4-1.4 49.56 49.56 0 0 1 16.2 0A2 2 0 0 1 21.5 7a24.12 24.12 0 0 1 0 10a2 2 0 0 1-1.4 1.4 49.55 49.55 0 0 1-16.2 0A2 2 0 0 1 2.5 17" />
                    <path d="m10 15 5-3-5-3z" />
                  </svg>
                </a>
                <a
                  href="https://facebook.com/opticmysticVJ"
                  target="_blank"
                  rel="noopener noreferrer"
                  className="p-2 rounded-full border border-white/20 bg-white/5"
                >
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    width="20"
                    height="20"
                    viewBox="0 0 24 24"
                    fill="none"
                    stroke="currentColor"
                    strokeWidth="2"
                    strokeLinecap="round"
                    strokeLinejoin="round"
                  >
                    <path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z" />
                  </svg>
                </a>
                <a
                  href="https://twitch.tv/opticmysticvj"
                  target="_blank"
                  rel="noopener noreferrer"
                  className="p-2 rounded-full border border-white/20 bg-white/5"
                >
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    width="20"
                    height="20"
                    viewBox="0 0 24 24"
                    fill="none"
                    stroke="currentColor"
                    strokeWidth="2"
                    strokeLinecap="round"
                    strokeLinejoin="round"
                  >
                    <path d="M21 2H3v16h5v4l4-4h5l4-4V2zm-10 9V7m5 4V7" />
                  </svg>
                </a>
              </div>
            </div>
          </div>
        </div>
      </section>

{/* Featured Event Section */}
      <section id="projects" className="relative py-12">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="flex items-center justify-between mb-6">
            <div>
              <h2 className="text-3xl font-bold mb-2">Featured Event</h2>
              <p className="text-white/70">Check out our upcoming special events</p>
            </div>
            <ReservationModal trigger={<button className="text-white/70 hover:text-white">Book VIP →</button>} />
          </div>

<div className="p-6 md:p-8 relative">
                <span className="inline-block px-2.5 py-0.5 bg-green-500 text-black font-medium mb-4 rounded-full">
                  April 17-20, 2025
                </span>

<h3 className="text-3xl font-bold mb-4">Bunnyland - Easter Weekend</h3>

<p className="text-white/80 mb-6">
                  Resident VJ at Troy Liquor Bar, performing every Thursday, Friday, and Saturday night. Join us for a
                  special Easter Weekend celebration featuring immersive visuals and incredible music.
                </p>

<div className="flex flex-col sm:flex-row gap-4 mb-6">
                  <div className="flex items-start gap-2">
                    <div>
                      <div className="font-medium">April 17-20, 2025</div>
                      <div className="text-white/60">10:00 PM - 4:00 AM</div>
                    </div>
                  </div>
                </div>

<div className="flex flex-wrap gap-3">
                  <Link
                    href="/events"
                    className="bg-green-500 hover:bg-green-600 text-black font-bold px-4 py-2 rounded-md"
                  >
                    View All Events
                  </Link>

<Link href="/events" className="border-white/20 hover:bg-white/10 border px-4 py-2 rounded-md">
                    All Events →
                  </Link>
                </div>
              </div>
            </div>
          </div>

<div className="mt-8 bg-white/5 border border-white/10 rounded-xl p-4">
            <div className="flex items-center justify-between mb-4">
              <h3 className="text-xl font-bold">Upcoming Events</h3>
              <Link href="/events" className="text-sm">
                View All
              </Link>
            </div>

<div className="space-y-3">
              {upcomingEvents.map((event) => (
                <div key={event.id} className="flex items-center gap-3 p-2 rounded-md hover:bg-white/10">
                  <div className="w-14 h-14 rounded-md bg-black/50 flex items-center justify-center text-center flex-shrink-0 border border-white/10 overflow-hidden">
                    {event.image ? (
                      <Image
                        src={event.image || "/placeholder.svg"}
                        alt={event.title}
                        width={56}
                        height={56}
                        className="object-cover w-full h-full"
                      />
                    ) : (
                      <div className="leading-tight">
                        <div className="text-[10px] uppercase text-green-400">
                          {new Date(event.date).toLocaleDateString("en-US", { month: "short" })}
                        </div>
                        <div className="text-base font-bold">{new Date(event.date).getDate()}</div>
                      </div>
                    )}
                  </div>
                  <div className="flex-1 min-w-0">
                    <div className="text-sm font-medium">{event.title}</div>
                    <div className="text-xs text-white/60">
                      {new Date(event.date).toLocaleDateString("en-US", {
                        weekday: "short",
                        month: "short",
                        day: "numeric",
                      })}{" "}
                      • {event.venue}
                    </div>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

{/* About Section */}
      <section id="about" className="relative py-12">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="grid md:grid-cols-2 gap-12 items-center">
            <div className="relative aspect-video rounded-2xl overflow-hidden border border-white/10 bg-black/30">
              <iframe
                src="https://player.vimeo.com/video/798448852?autoplay=1&loop=1&background=1&muted=1"
                className="absolute top-0 left-0 w-full h-full"
                frameBorder="0"
                allow="autoplay; fullscreen; picture-in-picture"
                allowFullScreen
                title="OpticMystic Demo Reel"
              ></iframe>
            </div>
            <div className="bg-black/30 p-8 rounded-2xl border border-white/10">
              <h2 className="text-3xl font-bold mb-6">About OpticMystic</h2>
              <div className="space-y-4">
                <p className="text-lg text-white/80">
                  I'm OpticMystic, a live visual artist based in Las Vegas, where I blend cutting-edge technology with
                  creative flair to transform venues into mesmerizing, immersive experiences. Nearly everything I
                  project is original content, mixed in real time, so every show feels fresh and unpredictable.
                </p>
                <p className="text-lg text-white/80">
                  My journey began with a love for digital art and a drive to expand the limits of live performance.
                  Over the years, I've fine-tuned my skills in real-time visuals, motion graphics, and interactive
                  design, always aiming to captivate and surprise.
                </p>
                <p className="text-lg text-white/80">
                  I've brought my work to intimate clubs and large-scale events across Las Vegas, collaborating with a
                  diverse range of venues and artists. You can regularly catch me at my residency at the Golden Nugget's
                  Troy Liquor Bar—but I'm always looking forward to the next creative challenge and collaboration.
                </p>
              </div>
              <div className="flex gap-4 mt-8">
                <Link
                  href="/about"
                  className="bg-green-500 hover:bg-green-600 text-black font-bold px-4 py-2 rounded-md"
                >
                  Learn More
                </Link>
              </div>
            </div>
          </div>
        </div>
      </section>

{/* Contact Section */}
      <section id="contact" className="relative py-24">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
          <div className="bg-white/5 p-8 rounded-2xl border border-white/10">
            <h2 className="text-3xl md:text-4xl font-bold mb-4">Transform Your Event</h2>
            <p className="text-xl text-white/70 mb-8 max-w-2xl mx-auto">
              Elevate your next event with immersive visuals that move and evolve with the music
            </p>
            <div className="flex flex-col sm:flex-row justify-center gap-4">
              <a
                href="mailto:will@opticmystic.live?subject=Booking Inquiry"
                className="bg-green-500 hover:bg-green-600 text-black font-bold text-lg px-8 py-6 rounded-md"
              >
                Book OpticMystic →
              </a>
              <Link
                href="/events"
                className="bg-white/10 border border-white/20 hover:bg-white/20 text-white text-lg px-8 py-6 rounded-md"
              >
                View Events
              </Link>
            </div>
          </div>
        </div>
      </section>

{/* Footer */}
      <footer className="border-t border-white/10 bg-black/50 mt-16">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
            {/* Logo and Info */}
            <div className="flex flex-col items-center md:items-start">
              <Link href="/" className="flex items-center gap-2 mb-4">
                <span className="font-bold text-2xl">OpticMystic</span>
              </Link>
              <p className="text-white/70 text-center md:text-left">
                Live visual performance artist creating immersive experiences in Las Vegas
              </p>
            </div>

{/* Quick Links */}
            <div className="flex flex-col items-center md:items-start">
              <h3 className="text-lg font-bold mb-4">Quick Links</h3>
              <nav className="flex flex-col gap-2">
                <Link href="/" className="text-white/70 hover:text-white">
                  Home
                </Link>
                <Link href="/events" className="text-white/70 hover:text-white">
                  Events
                </Link>
                <Link href="/about" className="text-white/70 hover:text-white">
                  About
                </Link>
                <a href="/#contact" className="text-white/70 hover:text-white">
                  Contact
                </a>
              </nav>
            </div>

{/* Connect */}
            <div className="flex flex-col items-center md:items-start">
              <h3 className="text-lg font-bold mb-4">Connect</h3>
              <div className="flex justify-center md:justify-start gap-4">
                <a
                  href="https://instagram.com/opticmysticVJ"
                  target="_blank"
                  rel="noopener noreferrer"
                  className="p-2 rounded-full border border-white/20 bg-white/5"
                >
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    width="20"
                    height="20"
                    viewBox="0 0 24 24"
                    fill="none"
                    stroke="currentColor"
                    strokeWidth="2"
                    strokeLinecap="round"
                    strokeLinejoin="round"
                  >
                    <rect width="20" height="20" x="2" y="2" rx="5" ry="5" />
                    <path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z" />
                    <line x1="17.5" x2="17.51" y1="6.5" y2="6.5" />
                  </svg>
                </a>
                <a
                  href="https://youtube.com/@OpticMystic-VJ"
                  target="_blank"
                  rel="noopener noreferrer"
                  className="p-2 rounded-full border border-white/20 bg-white/5"
                >
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    width="20"
                    height="20"
                    viewBox="0 0 24 24"
                    fill="none"
                    stroke="currentColor"
                    strokeWidth="2"
                    strokeLinecap="round"
                    strokeLinejoin="round"
                  >
                    <path d="M2.5 17a24.12 24.12 0 0 1 0-10a2 2 0 0 1 1.4-1.4 49.56 49.56 0 0 1 16.2 0A2 2 0 0 1 21.5 7a24.12 24.12 0 0 1 0 10a2 2 0 0 1-1.4 1.4 49.55 49.55 0 0 1-16.2 0A2 2 0 0 1 2.5 17" />
                    <path d="m10 15 5-3-5-3z" />
                  </svg>
                </a>
                <a
                  href="https://facebook.com/opticmysticVJ"
                  target="_blank"
                  rel="noopener noreferrer"
                  className="p-2 rounded-full border border-white/20 bg-white/5"
                >
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    width="20"
                    height="20"
                    viewBox="0 0 24 24"
                    fill="none"
                    stroke="currentColor"
                    strokeWidth="2"
                    strokeLinecap="round"
                    strokeLinejoin="round"
                  >
                    <path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z" />
                  </svg>
                </a>
                <a
                  href="https://twitch.tv/opticmysticvj"
                  target="_blank"
                  rel="noopener noreferrer"
                  className="p-2 rounded-full border border-white/20 bg-white/5"
                >
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    width="20"
                    height="20"
                    viewBox="0 0 24 24"
                    fill="none"
                    stroke="currentColor"
                    strokeWidth="2"
                    strokeLinecap="round"
                    strokeLinejoin="round"
                  >
                    <path d="M21 2H3v16h5v4l4-4h5l4-4V2zm-10 9V7m5 4V7" />
                  </svg>
                </a>
              </div>
            </div>
          </div>

<div className="mt-8 pt-8 border-t border-white/10 text-center text-white/50 text-sm">
            © {new Date().getFullYear()} OpticMystic. All rights reserved.
          </div>
        </div>
      </footer>
    </div>
  )
}
</article></body></html>

About

Tags

Share

About

Tags

Share

More Templates Like This

About

Tags

Share

About

Tags

Share

More Templates Like This