<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pet Adoption Event Finder</title>
    
    <!-- PWA support -->
    <link rel="manifest" href="manifest.json">
    <meta name="theme-color" content="#5D5CDE">
    <link rel="apple-touch-icon" href="icons/apple-touch-icon.png">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
    <meta name="apple-mobile-web-app-title" content="Pet Events">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <script>
        tailwind.config = {
            darkMode: 'class',
            theme: {
                extend: {
                    colors: {
                        primary: '#5D5CDE',
                        secondary: '#F97316',
                        light: '#F9FAFB',
                        dark: '#1F2937'
                    }
                }
            }
        }
    </script>
    <style>
        /* Style for date input in dark mode */
        .dark input[type="date"] {
            color-scheme: dark;
        }
        
        /* Style for select dropdowns */
        select {
            background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
            background-position: right 0.5rem center;
            background-repeat: no-repeat;
            background-size: 1.5em 1.5em;
            padding-right: 2.5rem;
        }
        
        .dark select {
            background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23d1d5db' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
        }
        
        /* Highlight today's events */
        .today-event {
            border-left: 4px solid #5D5CDE;
        }
        
        /* Page transitions */
        .page-transition {
            transition: opacity 0.3s ease-in-out;
        }
        
        /* Custom scrollbar */
        ::-webkit-scrollbar {
            width: 8px;
        }
        
        ::-webkit-scrollbar-track {
            background: #f1f1f1;
        }
        
        .dark ::-webkit-scrollbar-track {
            background: #374151;
        }
        
        ::-webkit-scrollbar-thumb {
            background: #5D5CDE;
            border-radius: 4px;
        }
        
        ::-webkit-scrollbar-thumb:hover {
            background: #4a49b0;
        }
        
        /* Hero section animation */
        @keyframes float {
            0% { transform: translateY(0px); }
            50% { transform: translateY(-20px); }
            100% { transform: translateY(0px); }
        }
        
        .float-animation {
            animation: float 6s ease-in-out infinite;
        }
        
        /* Custom checkbox for favorite events */
        .heart-checkbox {
            display: none;
        }
        
        .heart-icon {
            color: #d1d5db;
            cursor: pointer;
            transition: transform 0.2s ease;
        }
        
        .heart-checkbox:checked + .heart-icon {
            color: #ef4444;
            transform: scale(1.2);
        }
        
        /* Toast notification */
        .toast {
            position: fixed;
            bottom: 20px;
            right: 20px;
            padding: 16px 20px;
            border-radius: 8px;
            background-color: #5D5CDE;
            color: white;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            z-index: 1000;
            transform: translateY(100px);
            opacity: 0;
            transition: all 0.3s ease;
        }
        
        .toast.show {
            transform: translateY(0);
            opacity: 1;
        }
    </style>
</head>
<body class="bg-light dark:bg-gray-900 text-gray-800 dark:text-white min-h-screen transition-colors duration-300 flex flex-col">
    <noscript>
      <div class="p-5 text-center bg-red-500 text-white">
        This application requires JavaScript to run. Please enable JavaScript in your browser settings.
      </div>
    </noscript>
    
    <!-- Header/Navigation -->
    <header class="bg-white dark:bg-gray-800 shadow-md sticky top-0 z-50">
        <div class="container mx-auto px-4 py-3 max-w-7xl flex flex-wrap items-center justify-between">
            <a href="#home" class="nav-link flex items-center space-x-2 text-primary font-bold text-xl" data-page="home">
                <i class="fas fa-paw"></i>
                <span>PetAdoptionFinder</span>
            </a>
            
            <div class="flex items-center space-x-2 lg:hidden">
                <button id="theme-toggle-mobile" class="p-2 rounded-full hover:bg-gray-200 dark:hover:bg-gray-700">
                    <i class="fas fa-moon dark:hidden"></i>
                    <i class="fas fa-sun hidden dark:block"></i>
                </button>
                <button id="mobile-menu-button" class="p-2 rounded-md hover:bg-gray-200 dark:hover:bg-gray-700">
                    <i class="fas fa-bars"></i>
                </button>
            </div>
            
            <nav id="desktop-menu" class="hidden w-full lg:flex lg:w-auto lg:items-center mt-4 lg:mt-0">
                <ul class="flex flex-col lg:flex-row lg:space-x-6 space-y-2 lg:space-y-0">
                    <li><a href="#home" class="nav-link block py-2 hover:text-primary dark:hover:text-primary transition-colors" data-page="home">Home</a></li>
                    <li><a href="#events" class="nav-link block py-2 hover:text-primary dark:hover:text-primary transition-colors" data-page="events">Find Events</a></li>
                    <li><a href="#favorites" class="nav-link block py-2 hover:text-primary dark:hover:text-primary transition-colors" data-page="favorites">My Favorites</a></li>
                    <li><a href="#about" class="nav-link block py-2 hover:text-primary dark:hover:text-primary transition-colors" data-page="about">About</a></li>
                    <li><a href="#contact" class="nav-link block py-2 hover:text-primary dark:hover:text-primary transition-colors" data-page="contact">Contact</a></li>
                    <li class="lg:hidden"><button id="theme-toggle-menu" class="py-2 w-full text-left hover:text-primary dark:hover:text-primary transition-colors">Toggle Dark Mode</button></li>
                </ul>
            </nav>
            
            <button id="theme-toggle-desktop" class="hidden lg:block p-2 rounded-full hover:bg-gray-200 dark:hover:bg-gray-700">
                <i class="fas fa-moon dark:hidden"></i>
                <i class="fas fa-sun hidden dark:block"></i>
            </button>
        </div>
        
        <!-- Mobile Menu (hidden by default) -->
        <nav id="mobile-menu" class="hidden bg-white dark:bg-gray-800 shadow-inner">
            <ul class="container mx-auto px-4 py-3 space-y-2">
                <li><a href="#home" class="nav-link block py-2 hover:text-primary dark:hover:text-primary transition-colors" data-page="home">Home</a></li>
                <li><a href="#events" class="nav-link block py-2 hover:text-primary dark:hover:text-primary transition-colors" data-page="events">Find Events</a></li>
                <li><a href="#favorites" class="nav-link block py-2 hover:text-primary dark:hover:text-primary transition-colors" data-page="favorites">My Favorites</a></li>
                <li><a href="#about" class="nav-link block py-2 hover:text-primary dark:hover:text-primary transition-colors" data-page="about">About</a></li>
                <li><a href="#contact" class="nav-link block py-2 hover:text-primary dark:hover:text-primary transition-colors" data-page="contact">Contact</a></li>
            </ul>
        </nav>
    </header>
    
    <!-- Main Content Area -->
    <main class="flex-grow">
        <!-- Home Page -->
        <section id="home" class="page page-transition">
            <div class="bg-gradient-to-b from-primary/10 to-white dark:from-primary/20 dark:to-gray-900 py-16 md:py-24">
                <div class="container mx-auto px-4 max-w-7xl">
                    <div class="flex flex-col md:flex-row items-center">
                        <div class="md:w-1/2 mb-10 md:mb-0">
                            <h1 class="text-4xl md:text-5xl font-bold text-gray-900 dark:text-white mb-4">Find Perfect Pet Adoption Events Near You</h1>
                            <p class="text-lg text-gray-700 dark:text-gray-300 mb-8">Connect with local shelters and rescues to find your new furry family member at adoption events in your area.</p>
                            <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4">
                                <a href="#events" class="nav-link bg-primary hover:bg-primary/90 text-white font-medium py-3 px-6 rounded-lg transition duration-300 text-center" data-page="events">Find Events</a>
                                <a href="#about" class="nav-link bg-white dark:bg-gray-800 hover:bg-gray-100 dark:hover:bg-gray-700 text-gray-800 dark:text-white font-medium py-3 px-6 rounded-lg border border-gray-300 dark:border-gray-700 transition duration-300 text-center" data-page="about">Learn More</a>
                            </div>
                        </div>
                        <div class="md:w-1/2 flex justify-center">
                            <div class="relative w-full max-w-md">
                                <!-- Main hero image -->
                                <img 
                                    src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='500' height='400' viewBox='0 0 500 400'%3E%3Cstyle%3E.st0%7Bfill:%235D5CDE;%7D .st1%7Bfill:%23FFA726;%7D .st2%7Bfill:%23FFFFFF;%7D .st3%7Bfill:%23F5F5F5;%7D .st4%7Bfill:%23FFC107;%7D .st5%7Bfill:%23455A64;%7D .st6%7Bfill:%23FFF3E0;%7D .dog%7Banimation:float 6s infinite ease-in-out;transform-origin:center;%7D %40keyframes float%7B0%25,100%25%7Btransform:translateY(0)%7D50%25%7Btransform:translateY(-15px)%7D%7D%3C/style%3E%3Crect class='st3' width='500' height='400' rx='20'/%3E%3Cg class='dog' transform='translate(150, 100)'%3E%3Cellipse class='st1' cx='98' cy='180' rx='85' ry='12'/%3E%3Cellipse class='st4' cx='115' cy='140' rx='40' ry='60'/%3E%3Cpath class='st6' d='M135,100c0,0-10-15-35-15S40,105,40,105s-5,45,15,65s40,10,60,10s35-20,35-40S135,100,135,100z'/%3E%3Ccircle class='st5' cx='75' cy='90' r='5'/%3E%3Ccircle class='st5' cx='115' cy='90' r='5'/%3E%3Cpath class='st5' d='M95,100c0,0,10,5,10,15c0,0-15,10-25,0C80,115,85,100,95,100z'/%3E%3Cellipse class='st6' cx='45' cy='130' rx='10' ry='20'/%3E%3Cellipse class='st6' cx='145' cy='130' rx='10' ry='20'/%3E%3C/g%3E%3Ccircle class='st0' cx='420' cy='80' r='30'/%3E%3Ccircle class='st0' cx='80' cy='320' r='20' opacity='0.7'/%3E%3Ccircle class='st0' cx='450' cy='280' r='15' opacity='0.5'/%3E%3C/svg%3E" 
                                    alt="Cartoon dog illustration" 
                                    class="w-full float-animation"
                                >
                                
                                <!-- Stats cards floating around the image -->
                                <div class="absolute top-0 -left-5 bg-white dark:bg-gray-800 p-3 rounded-lg shadow-md animate-pulse">
                                    <p class="text-primary font-bold">15+ Events</p>
                                    <p class="text-sm text-gray-600 dark:text-gray-400">This month</p>
                                </div>
                                <div class="absolute bottom-10 -right-5 bg-white dark:bg-gray-800 p-3 rounded-lg shadow-md animate-pulse" style="animation-delay: 1s">
                                    <p class="text-primary font-bold">7 Countries</p>
                                    <p class="text-sm text-gray-600 dark:text-gray-400">Worldwide</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- Feature Highlights -->
            <div class="py-16 bg-white dark:bg-gray-800">
                <div class="container mx-auto px-4 max-w-7xl">
                    <h2 class="text-3xl font-bold text-center mb-12">How It Works</h2>
                    <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
                        <div class="text-center p-6 rounded-lg">
                            <div class="bg-primary/10 dark:bg-primary/20 w-16 h-16 mx-auto rounded-full flex items-center justify-center mb-4">
                                <i class="fas fa-search text-2xl text-primary"></i>
                            </div>
                            <h3 class="text-xl font-semibold mb-2">Find Events</h3>
                            <p class="text-gray-600 dark:text-gray-400">Search for pet adoption events by location, date, and the type of pet you're interested in.</p>
                        </div>
                        <div class="text-center p-6 rounded-lg">
                            <div class="bg-primary/10 dark:bg-primary/20 w-16 h-16 mx-auto rounded-full flex items-center justify-center mb-4">
                                <i class="fas fa-heart text-2xl text-primary"></i>
                            </div>
                            <h3 class="text-xl font-semibold mb-2">Save Favorites</h3>
                            <p class="text-gray-600 dark:text-gray-400">Keep track of events you're interested in by saving them to your favorites list.</p>
                        </div>
                        <div class="text-center p-6 rounded-lg">
                            <div class="bg-primary/10 dark:bg-primary/20 w-16 h-16 mx-auto rounded-full flex items-center justify-center mb-4">
                                <i class="fas fa-paw text-2xl text-primary"></i>
                            </div>
                            <h3 class="text-xl font-semibold mb-2">Adopt a Pet</h3>
                            <p class="text-gray-600 dark:text-gray-400">Attend events to meet pets in person and find your perfect companion.</p>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- Recent Events Preview -->
            <div class="py-16 bg-gray-50 dark:bg-gray-900">
                <div class="container mx-auto px-4 max-w-7xl">
                    <div class="flex justify-between items-center mb-8">
                        <h2 class="text-3xl font-bold">Upcoming Events</h2>
                        <a href="#events" class="nav-link text-primary hover:underline font-medium flex items-center" data-page="events">
                            View All
                            <i class="fas fa-arrow-right ml-2"></i>
                        </a>
                    </div>
                    <div id="recent-events" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                        <!-- Will be populated by JavaScript -->
                        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 animate-pulse">
                            <div class="h-6 bg-gray-200 dark:bg-gray-700 rounded w-3/4 mb-4"></div>
                            <div class="h-4 bg-gray-200 dark:bg-gray-700 rounded w-1/2 mb-3"></div>
                            <div class="h-4 bg-gray-200 dark:bg-gray-700 rounded w-full mb-3"></div>
                            <div class="h-4 bg-gray-200 dark:bg-gray-700 rounded w-full mb-3"></div>
                            <div class="h-10 bg-gray-200 dark:bg-gray-700 rounded w-full mt-4"></div>
                        </div>
                        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 animate-pulse">
                            <div class="h-6 bg-gray-200 dark:bg-gray-700 rounded w-3/4 mb-4"></div>
                            <div class="h-4 bg-gray-200 dark:bg-gray-700 rounded w-1/2 mb-3"></div>
                            <div class="h-4 bg-gray-200 dark:bg-gray-700 rounded w-full mb-3"></div>
                            <div class="h-4 bg-gray-200 dark:bg-gray-700 rounded w-full mb-3"></div>
                            <div class="h-10 bg-gray-200 dark:bg-gray-700 rounded w-full mt-4"></div>
                        </div>
                        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 animate-pulse">
                            <div class="h-6 bg-gray-200 dark:bg-gray-700 rounded w-3/4 mb-4"></div>
                            <div class="h-4 bg-gray-200 dark:bg-gray-700 rounded w-1/2 mb-3"></div>
                            <div class="h-4 bg-gray-200 dark:bg-gray-700 rounded w-full mb-3"></div>
                            <div class="h-4 bg-gray-200 dark:bg-gray-700 rounded w-full mb-3"></div>
                            <div class="h-10 bg-gray-200 dark:bg-gray-700 rounded w-full mt-4"></div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- Testimonials -->
            <div class="py-16 bg-white dark:bg-gray-800">
                <div class="container mx-auto px-4 max-w-5xl">
                    <h2 class="text-3xl font-bold text-center mb-12">Success Stories</h2>
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
                        <div class="bg-gray-50 dark:bg-gray-700 p-6 rounded-lg shadow-sm">
                            <div class="flex items-center mb-4">
                                <div class="w-12 h-12 bg-primary/20 rounded-full flex items-center justify-center mr-4">
                                    <span class="text-primary font-bold text-xl">S</span>
                                </div>
                                <div>
                                    <h3 class="font-semibold">Sarah Johnson</h3>
                                    <p class="text-sm text-gray-600 dark:text-gray-400">New York, USA</p>
                                </div>
                            </div>
                            <p class="text-gray-700 dark:text-gray-300">"I found my perfect companion, Max, at the Pawsome Adoption Day event. The Pet Adoption Event Finder made it so easy to discover events near me!"</p>
                        </div>
                        <div class="bg-gray-50 dark:bg-gray-700 p-6 rounded-lg shadow-sm">
                            <div class="flex items-center mb-4">
                                <div class="w-12 h-12 bg-primary/20 rounded-full flex items-center justify-center mr-4">
                                    <span class="text-primary font-bold text-xl">D</span>
                                </div>
                                <div>
                                    <h3 class="font-semibold">David Miller</h3>
                                    <p class="text-sm text-gray-600 dark:text-gray-400">Toronto, Canada</p>
                                </div>
                            </div>
                            <p class="text-gray-700 dark:text-gray-300">"We were looking for a specific breed, and thanks to the pet type filter, we found an event featuring exactly what we wanted. Our new kitten Whiskers has been a joy!"</p>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- Call to Action -->
            <div class="py-16 bg-primary">
                <div class="container mx-auto px-4 max-w-7xl text-center">
                    <h2 class="text-3xl font-bold text-white mb-6">Ready to Find Your New Best Friend?</h2>
                    <p class="text-white/80 text-lg mb-8 max-w-2xl mx-auto">Browse upcoming pet adoption events and take the first step toward bringing home your perfect companion.</p>
                    <a href="#events" class="nav-link inline-block bg-white text-primary font-medium py-3 px-8 rounded-lg transition duration-300 hover:bg-gray-100" data-page="events">Find Events Now</a>
                </div>
            </div>
        </section>
        
        <!-- Events Page -->
        <section id="events" class="page page-transition hidden">
            <div class="container mx-auto px-4 py-8 max-w-7xl">
                <h1 class="text-3xl font-bold text-center mb-8">Find Pet Adoption Events</h1>
                
                <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 mb-8">
                    <form id="searchForm" class="space-y-4">
                        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
                            <div>
                                <label for="country" class="block text-sm font-medium mb-1 dark:text-gray-200">Country</label>
                                <input type="text" id="country" placeholder="Enter country" 
                                       class="w-full px-4 py-2 rounded-lg border border-gray-300 dark:border-gray-700 focus:outline-none focus:ring-2 focus:ring-primary dark:bg-gray-700 dark:text-white text-base">
                            </div>
                            <div>
                                <label for="city" class="block text-sm font-medium mb-1 dark:text-gray-200">City</label>
                                <input type="text" id="city" placeholder="Enter city" 
                                       class="w-full px-4 py-2 rounded-lg border border-gray-300 dark:border-gray-700 focus:outline-none focus:ring-2 focus:ring-primary dark:bg-gray-700 dark:text-white text-base">
                            </div>
                            <div>
                                <label for="petType" class="block text-sm font-medium mb-1 dark:text-gray-200">Pet Type</label>
                                <select id="petType" 
                                        class="w-full px-4 py-2 rounded-lg border border-gray-300 dark:border-gray-700 focus:outline-none focus:ring-2 focus:ring-primary dark:bg-gray-700 dark:text-white text-base appearance-none bg-no-repeat bg-right">
                                    <option value="">All Pet Types</option>
                                    <option value="Dogs">Dogs</option>
                                    <option value="Cats">Cats</option>
                                    <option value="Puppies">Puppies</option>
                                    <option value="Kittens">Kittens</option>
                                    <option value="Rabbits">Rabbits</option>
                                    <option value="Small Animals">Small Animals</option>
                                    <option value="Birds">Birds</option>
                                </select>
                            </div>
                            <div>
                                <label for="dateRange" class="block text-sm font-medium mb-1 dark:text-gray-200">Date Range</label>
                                <select id="dateRange" 
                                        class="w-full px-4 py-2 rounded-lg border border-gray-300 dark:border-gray-700 focus:outline-none focus:ring-2 focus:ring-primary dark:bg-gray-700 dark:text-white text-base appearance-none bg-no-repeat bg-right">
                                    <option value="next3months">Next 3 Months</option>
                                    <option value="thisMonth">This Month</option>
                                    <option value="nextMonth">Next Month</option>
                                    <option value="specificDate">Specific Date</option>
                                </select>
                            </div>
                        </div>
                        <div id="specificDateContainer" class="hidden mt-4">
                            <label for="eventDate" class="block text-sm font-medium mb-1 dark:text-gray-200">Select Date</label>
                            <input type="date" id="eventDate" 
                                    class="w-full px-4 py-2 rounded-lg border border-gray-300 dark:border-gray-700 focus:outline-none focus:ring-2 focus:ring-primary dark:bg-gray-700 dark:text-white text-base calendar-input">
                        </div>
                        <div class="flex justify-center md:justify-end mt-4">
                            <button type="button" id="clearFilters" class="px-4 py-2 mr-2 text-sm text-gray-600 dark:text-gray-300 bg-gray-200 dark:bg-gray-700 rounded-lg hover:bg-gray-300 dark:hover:bg-gray-600 transition-all">
                                Clear Filters
                            </button>
                            <button type="submit" class="px-6 py-2 bg-primary text-white font-medium rounded-lg hover:bg-opacity-90 transition-all focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary">
                                Search
                            </button>
                        </div>
                    </form>
                </div>
                
                <div id="loader" class="hidden flex justify-center items-center my-8">
                    <div class="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-primary"></div>
                </div>
                
                <div id="noResults" class="hidden bg-gray-100 dark:bg-gray-800 p-8 rounded-lg text-center">
                    <p class="text-lg">No adoption events found. Please try a different search.</p>
                </div>
                
                <div id="results" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                    <!-- Results will be populated here -->
                </div>
            </div>
        </section>
        
        <!-- Favorites Page -->
        <section id="favorites" class="page page-transition hidden">
            <div class="container mx-auto px-4 py-8 max-w-7xl">
                <h1 class="text-3xl font-bold text-center mb-8">My Favorite Events</h1>
                
                <div id="no-favorites" class="hidden bg-white dark:bg-gray-800 p-10 rounded-lg shadow-md text-center">
                    <img 
                        src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150' viewBox='0 0 150 150'%3E%3Cstyle%3E.st0%7Bfill:%235D5CDE;%7D .st1%7Bfill:%23FFA726;%7D .st2%7Bfill:%23F5F5F5;%7D%3C/style%3E%3Ccircle class='st2' cx='75' cy='75' r='70'/%3E%3Cpath class='st0' d='M75,35c-16.5,0-30,13.5-30,30c0,16.5,30,50,30,50s30-33.5,30-50C105,48.5,91.5,35,75,35z M75,79c-7.7,0-14-6.3-14-14s6.3-14,14-14s14,6.3,14,14S82.7,79,75,79z'/%3E%3C/svg%3E" 
                        alt="No favorites icon" 
                        class="w-32 h-32 mx-auto mb-6 opacity-75"
                    >
                    <h3 class="text-xl font-bold mb-2">No favorite events yet</h3>
                    <p class="text-gray-600 dark:text-gray-400 mb-6">Click the heart icon on any event to add it to your favorites</p>
                    <a href="#events" class="nav-link bg-primary hover:bg-primary/90 text-white font-medium py-3 px-6 rounded-lg transition duration-300 inline-block" data-page="events">Browse Events</a>
                </div>
                
                <div id="favorites-container" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                    <!-- Favorites will be populated here -->
                </div>
            </div>
        </section>
        
        <!-- About Page -->
        <section id="about" class="page page-transition hidden">
            <div class="container mx-auto px-4 py-12 max-w-5xl">
                <h1 class="text-3xl font-bold text-center mb-8">About Pet Adoption Event Finder</h1>
                
                <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-8 mb-10">
                    <div class="flex flex-col md:flex-row gap-8 items-center mb-12">
                        <div class="md:w-1/3">
                            <img 
                                src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300' viewBox='0 0 300 300'%3E%3Cstyle%3E.st0%7Bfill:%235D5CDE;%7D .st1%7Bfill:%23F5F5F5;%7D .st2%7Bfill:%23FFA726;%7D .st3%7Bfill:%23FFFFFF;%7D%3C/style%3E%3Ccircle class='st1' cx='150' cy='150' r='150'/%3E%3Cpath class='st0' d='M131,60c-7.7,0-14,6.3-14,14s6.3,14,14,14s14-6.3,14-14S138.7,60,131,60z M169,60c-7.7,0-14,6.3-14,14s6.3,14,14,14s14-6.3,14-14S176.7,60,169,60z M107,100c-7.7,0-14,6.3-14,14s6.3,14,14,14s14-6.3,14-14S114.7,100,107,100z M193,100c-7.7,0-14,6.3-14,14s6.3,14,14,14s14-6.3,14-14S200.7,100,193,100z M150,120c-21,0-59,9.3-59,30v20h118v-20C209,129.3,171,120,150,120z'/%3E%3Ccircle class='st2' cx='150' cy='210' r='40'/%3E%3Cpath class='st3' d='M158,197.5l12.5,12.5l-12.5,12.5 M142,197.5l-12.5,12.5l12.5,12.5 M145.5,235l9-47'/%3E%3C/svg%3E" 
                                alt="Pet Adoption Mission" 
                                class="w-full rounded-lg"
                            >
                        </div>
                        <div class="md:w-2/3">
                            <h2 class="text-2xl font-bold mb-4">Our Mission</h2>
                            <p class="text-gray-700 dark:text-gray-300 mb-4">Pet Adoption Event Finder is dedicated to connecting potential pet adopters with local adoption events. We believe every pet deserves a loving home, and every person deserves to find their perfect companion.</p>
                            <p class="text-gray-700 dark:text-gray-300">By providing an easy way to discover adoption events by location, date, and pet type, we're helping to increase pet adoption rates and reduce the number of animals in shelters.</p>
                        </div>
                    </div>
                    
                    <div class="mb-12">
                        <h2 class="text-2xl font-bold mb-4">Why Adopt?</h2>
                        <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mt-6">
                            <div class="bg-gray-50 dark:bg-gray-700 p-5 rounded-lg">
                                <div class="text-primary text-3xl mb-3">
                                    <i class="fas fa-heart"></i>
                                </div>
                                <h3 class="font-semibold mb-2">Save a Life</h3>
                                <p class="text-gray-600 dark:text-gray-400">By adopting, you're giving a deserving animal a second chance at a happy life.</p>
                            </div>
                            <div class="bg-gray-50 dark:bg-gray-700 p-5 rounded-lg">
                                <div class="text-primary text-3xl mb-3">
                                    <i class="fas fa-money-bill-wave"></i>
                                </div>
                                <h3 class="font-semibold mb-2">Cost Effective</h3>
                                <p class="text-gray-600 dark:text-gray-400">Adoption fees are typically much lower than buying from breeders or pet stores.</p>
                            </div>
                            <div class="bg-gray-50 dark:bg-gray-700 p-5 rounded-lg">
                                <div class="text-primary text-3xl mb-3">
                                    <i class="fas fa-check-circle"></i>
                                </div>
                                <h3 class="font-semibold mb-2">Health Checked</h3>
                                <p class="text-gray-600 dark:text-gray-400">Shelter pets are typically vaccinated, spayed/neutered, and health-checked.</p>
                            </div>
                        </div>
                    </div>
                    
                    <div>
                        <h2 class="text-2xl font-bold mb-6">How You Can Help</h2>
                        <ul class="space-y-4">
                            <li class="flex items-start">
                                <i class="fas fa-paw text-primary mt-1 mr-3"></i>
                                <span>Adopt a pet from your local shelter or rescue group</span>
                            </li>
                            <li class="flex items-start">
                                <i class="fas fa-paw text-primary mt-1 mr-3"></i>
                                <span>Share our website with friends and family looking for pets</span>
                            </li>
                            <li class="flex items-start">
                                <i class="fas fa-paw text-primary mt-1 mr-3"></i>
                                <span>Volunteer at adoption events in your area</span>
                            </li>
                            <li class="flex items-start">
                                <i class="fas fa-paw text-primary mt-1 mr-3"></i>
                                <span>Foster pets temporarily to help them prepare for adoption</span>
                            </li>
                            <li class="flex items-start">
                                <i class="fas fa-paw text-primary mt-1 mr-3"></i>
                                <span>Donate to local animal shelters and rescue organizations</span>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </section>
        
        <!-- Contact Page -->
        <section id="contact" class="page page-transition hidden">
            <div class="container mx-auto px-4 py-12 max-w-5xl">
                <h1 class="text-3xl font-bold text-center mb-8">Contact Us</h1>
                
                <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
                    <div class="grid grid-cols-1 md:grid-cols-2">
                        <div class="p-8">
                            <h2 class="text-2xl font-bold mb-6">Get In Touch</h2>
                            <p class="text-gray-700 dark:text-gray-300 mb-6">Have questions about pet adoption events? Want to list your organization's events on our platform? We'd love to hear from you!</p>
                            
                            <form id="contactForm" class="space-y-4">
                                <div>
                                    <label for="name" class="block text-sm font-medium mb-1 dark:text-gray-200">Name</label>
                                    <input type="text" id="name" name="name" placeholder="Your name" required
                                           class="w-full px-4 py-2 rounded-lg border border-gray-300 dark:border-gray-700 focus:outline-none focus:ring-2 focus:ring-primary dark:bg-gray-700 dark:text-white text-base">
                                </div>
                                <div>
                                    <label for="email" class="block text-sm font-medium mb-1 dark:text-gray-200">Email</label>
                                    <input type="email" id="email" name="email" placeholder="Your email" required
                                           class="w-full px-4 py-2 rounded-lg border border-gray-300 dark:border-gray-700 focus:outline-none focus:ring-2 focus:ring-primary dark:bg-gray-700 dark:text-white text-base">
                                </div>
                                <div>
                                    <label for="subject" class="block text-sm font-medium mb-1 dark:text-gray-200">Subject</label>
                                    <select id="subject" name="subject" required
                                            class="w-full px-4 py-2 rounded-lg border border-gray-300 dark:border-gray-700 focus:outline-none focus:ring-2 focus:ring-primary dark:bg-gray-700 dark:text-white text-base appearance-none bg-no-repeat bg-right">
                                        <option value="">Select a subject</option>
                                        <option value="event-inquiry">Event Inquiry</option>
                                        <option value="list-event">List My Organization's Events</option>
                                        <option value="partnership">Partnership Opportunities</option>
                                        <option value="feedback">Website Feedback</option>
                                        <option value="other">Other</option>
                                    </select>
                                </div>
                                <div>
                                    <label for="message" class="block text-sm font-medium mb-1 dark:text-gray-200">Message</label>
                                    <textarea id="message" name="message" rows="4" placeholder="Your message" required
                                              class="w-full px-4 py-2 rounded-lg border border-gray-300 dark:border-gray-700 focus:outline-none focus:ring-2 focus:ring-primary dark:bg-gray-700 dark:text-white text-base"></textarea>
                                </div>
                                <button type="submit" class="w-full bg-primary hover:bg-primary/90 text-white font-medium py-3 px-6 rounded-lg transition duration-300">
                                    Send Message
                                </button>
                            </form>
                        </div>
                        <div class="bg-gray-50 dark:bg-gray-700 p-8 flex flex-col items-center justify-center">
                            <img 
                                src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 200 200'%3E%3Cstyle%3E.st0%7Bfill:%235D5CDE;%7D .dog%7Bfill:%23FFA726;%7D .cat%7Bfill:%23FFFFFF;%7D%3C/style%3E%3Ccircle class='st0' cx='100' cy='100' r='90' opacity='0.1'/%3E%3Cpath class='dog' d='M120,70c-16.6,0-30,13.4-30,30s13.4,30,30,30s30-13.4,30-30S136.6,70,120,70z M140,110h-40c0-11,9-20,20-20S140,99,140,110z M120,90c5.5,0,10-4.5,10-10s-4.5-10-10-10s-10,4.5-10,10S114.5,90,120,90z'/%3E%3Cpath class='cat' d='M80,70c-16.6,0-30,13.4-30,30s13.4,30,30,30s30-13.4,30-30S96.6,70,80,70z M100,110H60c0-11,9-20,20-20S100,99,100,110z M80,90c5.5,0,10-4.5,10-10s-4.5-10-10-10s-10,4.5-10,10S74.5,90,80,90z'/%3E%3Cpath class='st0' d='M100,155c0,0-40-30-40-30s10,10,20,10c0,0-15-25-15-25s15,15,25,15c0,0-10-30-10-30s10,20,20,20c0,0,0-40,0-40s0,40,0,40c10,0,20-20,20-20s0,30-10,30c10,0,25-15,25-15s-15,25-15,25c10,0,20-10,20-10S100,155,100,155z'/%3E%3C/svg%3E" 
                                alt="Contact illustration" 
                                class="w-48 h-48 mb-6"
                            >
                            <div class="text-center space-y-4">
                                <div>
                                    <h3 class="font-semibold text-primary mb-1">Email Us</h3>
                                    <p class="text-gray-600 dark:text-gray-400">contact@petadoptionfinder.com</p>
                                </div>
                                <div>
                                    <h3 class="font-semibold text-primary mb-1">Follow Us</h3>
                                    <div class="flex justify-center space-x-4 mt-2">
                                        <a href="#" class="text-gray-600 dark:text-gray-400 hover:text-primary dark:hover:text-primary transition-colors">
                                            <i class="fab fa-facebook-f text-xl"></i>
                                        </a>
                                        <a href="#" class="text-gray-600 dark:text-gray-400 hover:text-primary dark:hover:text-primary transition-colors">
                                            <i class="fab fa-twitter text-xl"></i>
                                        </a>
                                        <a href="#" class="text-gray-600 dark:text-gray-400 hover:text-primary dark:hover:text-primary transition-colors">
                                            <i class="fab fa-instagram text-xl"></i>
                                        </a>
                                        <a href="#" class="text-gray-600 dark:text-gray-400 hover:text-primary dark:hover:text-primary transition-colors">
                                            <i class="fab fa-linkedin-in text-xl"></i>
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div id="contactSuccess" class="hidden mt-8 bg-green-100 dark:bg-green-800/30 p-6 rounded-lg text-center">
                    <div class="text-green-600 dark:text-green-400 text-3xl mb-4">
                        <i class="fas fa-check-circle"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-2">Message Sent Successfully!</h3>
                    <p class="text-gray-700 dark:text-gray-300">Thank you for reaching out. We'll get back to you as soon as possible.</p>
                </div>
            </div>
        </section>
    </main>
    
    <!-- Footer -->
    <footer class="bg-gray-800 dark:bg-gray-900 text-white py-12">
        <div class="container mx-auto px-4 max-w-7xl">
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 mb-10">
                <div>
                    <h3 class="text-xl font-bold mb-4 flex items-center">
                        <i class="fas fa-paw mr-2 text-primary"></i>
                        PetAdoptionFinder
                    </h3>
                    <p class="text-gray-400 mb-4">Connecting pets with loving homes through local adoption events.</p>
                    <div class="flex space-x-4">
                        <a href="#" class="text-gray-400 hover:text-primary transition-colors">
                            <i class="fab fa-facebook-f"></i>
                        </a>
                        <a href="#" class="text-gray-400 hover:text-primary transition-colors">
                            <i class="fab fa-twitter"></i>
                        </a>
                        <a href="#" class="text-gray-400 hover:text-primary transition-colors">
                            <i class="fab fa-instagram"></i>
                        </a>
                        <a href="#" class="text-gray-400 hover:text-primary transition-colors">
                            <i class="fab fa-linkedin-in"></i>
                        </a>
                    </div>
                </div>
                <div>
                    <h3 class="text-xl font-bold mb-4">Quick Links</h3>
                    <ul class="space-y-2">
                        <li><a href="#home" class="nav-link text-gray-400 hover:text-primary transition-colors" data-page="home">Home</a></li>
                        <li><a href="#events" class="nav-link text-gray-400 hover:text-primary transition-colors" data-page="events">Find Events</a></li>
                        <li><a href="#favorites" class="nav-link text-gray-400 hover:text-primary transition-colors" data-page="favorites">My Favorites</a></li>
                        <li><a href="#about" class="nav-link text-gray-400 hover:text-primary transition-colors" data-page="about">About Us</a></li>
                        <li><a href="#contact" class="nav-link text-gray-400 hover:text-primary transition-colors" data-page="contact">Contact</a></li>
                    </ul>
                </div>
                <div>
                    <h3 class="text-xl font-bold mb-4">Pet Resources</h3>
                    <ul class="space-y-2">
                        <li><a href="#" class="text-gray-400 hover:text-primary transition-colors">New Pet Checklist</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-primary transition-colors">Adoption Tips</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-primary transition-colors">Pet Care Guides</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-primary transition-colors">Training Resources</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-primary transition-colors">Pet-Friendly Housing</a></li>
                    </ul>
                </div>
                <div>
                    <h3 class="text-xl font-bold mb-4">Contact Information</h3>
                    <ul class="space-y-2">
                        <li class="flex items-start">
                            <i class="fas fa-envelope text-primary mt-1 mr-3"></i>
                            <span class="text-gray-400">contact@petadoptionfinder.com</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fas fa-map-marker-alt text-primary mt-1 mr-3"></i>
                            <span class="text-gray-400">123 Adoption Street, Pet City, PC 12345</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fas fa-phone-alt text-primary mt-1 mr-3"></i>
                            <span class="text-gray-400">(123) 456-7890</span>
                        </li>
                    </ul>
                </div>
            </div>
            
            <div class="pt-8 border-t border-gray-700 text-center text-gray-400">
                <p class="mb-2">&copy; 2023 Pet Adoption Event Finder. All rights reserved.</p>
                <div class="flex justify-center space-x-4 text-sm">
                    <a href="#" class="hover:text-primary transition-colors">Privacy Policy</a>
                    <a href="#" class="hover:text-primary transition-colors">Terms of Service</a>
                    <a href="#" class="hover:text-primary transition-colors">Cookie Policy</a>
                </div>
            </div>
        </div>
    </footer>
    
    <!-- Toast Notification -->
    <div id="toast" class="toast">
        <span id="toast-message">Notification message</span>
    </div>
    
    <!-- PWA Install Prompt -->
    <div id="pwa-install-prompt" class="fixed bottom-0 left-0 right-0 bg-white dark:bg-gray-800 p-4 shadow-lg transform translate-y-full transition-transform duration-300 z-50">
        <div class="container mx-auto max-w-7xl flex items-center justify-between">
            <div class="flex items-center">
                <i class="fas fa-download text-2xl text-primary mr-4"></i>
                <div>
                    <h3 class="font-bold">Install Pet Adoption Finder</h3>
                    <p class="text-sm text-gray-600 dark:text-gray-400">Add to your home screen for a better experience</p>
                </div>
            </div>
            <div class="flex space-x-3">
                <button id="pwa-cancel" class="px-4 py-2 text-gray-600 dark:text-gray-400">
                    Not Now
                </button>
                <button id="pwa-install" class="px-4 py-2 bg-primary text-white rounded-lg">
                    Install
                </button>
            </div>
        </div>
    </div>
    
    <script>
        // Check for dark mode preference
        function applyDarkMode() {
            if (localStorage.getItem('darkMode') === 'true' || 
                (localStorage.getItem('darkMode') === null && 
                 window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
                document.documentElement.classList.add('dark');
            } else {
                document.documentElement.classList.remove('dark');
            }
        }
        
        applyDarkMode();
        
        window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', event => {
            if (localStorage.getItem('darkMode') === null) {
                if (event.matches) {
                    document.documentElement.classList.add('dark');
                } else {
                    document.documentElement.classList.remove('dark');
                }
            }
        });
        
        // Toggle dark mode
        function toggleDarkMode() {
            if (document.documentElement.classList.contains('dark')) {
                document.documentElement.classList.remove('dark');
                localStorage.setItem('darkMode', 'false');
            } else {
                document.documentElement.classList.add('dark');
                localStorage.setItem('darkMode', 'true');
            }
        }
        
        document.getElementById('theme-toggle-mobile').addEventListener('click', toggleDarkMode);
        document.getElementById('theme-toggle-desktop').addEventListener('click', toggleDarkMode);
        document.getElementById('theme-toggle-menu').addEventListener('click', toggleDarkMode);
        
        // Mobile menu toggle
        const mobileMenuButton = document.getElementById('mobile-menu-button');
        const mobileMenu = document.getElementById('mobile-menu');
        const desktopMenu = document.getElementById('desktop-menu');
        
        mobileMenuButton.addEventListener('click', () => {
            mobileMenu.classList.toggle('hidden');
            
            // Toggle between bars and X icon
            if (mobileMenu.classList.contains('hidden')) {
                mobileMenuButton.innerHTML = '<i class="fas fa-bars"></i>';
            } else {
                mobileMenuButton.innerHTML = '<i class="fas fa-times"></i>';
            }
        });
        
        // Handle responsive menu
        function handleResize() {
            if (window.innerWidth >= 1024) { // lg breakpoint
                desktopMenu.classList.remove('hidden');
                mobileMenu.classList.add('hidden');
                mobileMenuButton.innerHTML = '<i class="fas fa-bars"></i>';
            } else {
                desktopMenu.classList.add('hidden');
            }
        }
        
        window.addEventListener('resize', handleResize);
        handleResize(); // Call on initial load
        
        // Page navigation
        const pages = document.querySelectorAll('.page');
        const navLinks = document.querySelectorAll('.nav-link');
        
        function navigateToPage(pageId) {
            // Hide all pages
            pages.forEach(page => {
                page.classList.add('hidden');
            });
            
            // Scroll to top
            window.scrollTo(0, 0);
            
            // Show the selected page
            const targetPage = document.getElementById(pageId);
            if (targetPage) {
                targetPage.classList.remove('hidden');
                
                // Highlight active nav link
                navLinks.forEach(link => {
                    if (link.getAttribute('data-page') === pageId) {
                        link.classList.add('text-primary');
                    } else {
                        link.classList.remove('text-primary');
                    }
                });
                
                // Close mobile menu
                mobileMenu.classList.add('hidden');
                mobileMenuButton.innerHTML = '<i class="fas fa-bars"></i>';
                
                // Update URL hash
                window.location.hash = pageId;
            }
        }
        
        navLinks.forEach(link => {
            link.addEventListener('click', (e) => {
                e.preventDefault();
                const pageId = link.getAttribute('data-page');
                navigateToPage(pageId);
            });
        });
        
        // Toast notification function
        function showToast(message, duration = 3000) {
            const toast = document.getElementById('toast');
            const toastMessage = document.getElementById('toast-message');
            
            toastMessage.textContent = message;
            toast.classList.add('show');
            
            setTimeout(() => {
                toast.classList.remove('show');
            }, duration);
        }
        
        // Get today's date
        const getCurrentDate = () => {
            const now = new Date();
            const year = now.getFullYear();
            const month = String(now.getMonth() + 1).padStart(2, '0');
            const day = String(now.getDate()).padStart(2, '0');
            return `${year}-${month}-${day}`;
        };
        
        // Generate future dates for sample events
        const getFutureDate = (daysToAdd) => {
            const futureDate = new Date();
            futureDate.setDate(futureDate.getDate() + daysToAdd);
            const year = futureDate.getFullYear();
            const month = String(futureDate.getMonth() + 1).padStart(2, '0');
            const day = String(futureDate.getDate()).padStart(2, '0');
            return `${year}-${month}-${day}`;
        };
        
        // Mock database of pet adoption events with dates relative to today
        const adoptionEvents = [
            {
                id: 1,
                name: "Pawsome Adoption Day",
                organization: "Happy Paws Rescue",
                date: getFutureDate(3),
                time: "10:00 AM - 4:00 PM",
                country: "United States",
                city: "New York",
                address: "123 Central Park, NY 10001",
                description: "Join us for a day of meeting adorable dogs and cats looking for their forever homes!",
                petTypes: ["Dogs", "Cats"]
            },
            {
                id: 2,
                name: "Furry Friends Festival",
                organization: "Animal Haven",
                date: getFutureDate(7),
                time: "11:00 AM - 3:00 PM",
                country: "United States",
                city: "Los Angeles",
                address: "456 Sunset Blvd, LA 90001",
                description: "A fun-filled day with adoptable pets, food trucks, and activities for the whole family.",
                petTypes: ["Dogs", "Cats", "Rabbits"]
            },
            {
                id: 3,
                name: "Adopt-a-Pet Weekend",
                organization: "Forever Homes",
                date: getFutureDate(14),
                time: "9:00 AM - 5:00 PM",
                country: "Canada",
                city: "Toronto",
                address: "789 Queen St, Toronto, ON M5V 2A3",
                description: "Two days of adoption opportunities with reduced adoption fees!",
                petTypes: ["Dogs", "Cats", "Small Animals"]
            },
            {
                id: 4,
                name: "Second Chance Pet Expo",
                organization: "Second Chance Rescue",
                date: getFutureDate(21),
                time: "10:00 AM - 6:00 PM",
                country: "United Kingdom",
                city: "London",
                address: "10 Regent St, London SW1Y 4LR",
                description: "Meet hundreds of adoptable pets from multiple shelters and rescues across the UK.",
                petTypes: ["Dogs", "Cats", "Birds"]
            },
            {
                id: 5,
                name: "Whiskers & Wags Adoption Fair",
                organization: "City Animal Shelter",
                date: getCurrentDate(), // Today
                time: "12:00 PM - 5:00 PM",
                country: "Australia",
                city: "Sydney",
                address: "321 Harbour St, Sydney NSW 2000",
                description: "All adoption fees waived for this special event! Pets come vaccinated and microchipped.",
                petTypes: ["Dogs", "Cats"]
            },
            {
                id: 6,
                name: "Rescue Me Pet Adoption",
                organization: "Rescue Me Foundation",
                date: getFutureDate(35),
                time: "10:00 AM - 3:00 PM",
                country: "Canada",
                city: "Vancouver",
                address: "123 Stanley Park Dr, Vancouver, BC V6G 3E2",
                description: "Find your new best friend and support local animal rescues.",
                petTypes: ["Dogs", "Cats", "Guinea Pigs"]
            },
            {
                id: 7,
                name: "Barks & Recreation",
                organization: "Paws & Claws Society",
                date: getFutureDate(32),
                time: "11:00 AM - 4:00 PM",
                country: "United States",
                city: "Chicago",
                address: "789 Michigan Ave, Chicago, IL 60601",
                description: "Outdoor adoption event with games, pet vendors, and food. Rain or shine!",
                petTypes: ["Dogs", "Puppies"]
            },
            {
                id: 8,
                name: "Meow Meetup",
                organization: "Feline Friends Network",
                date: getFutureDate(45),
                time: "10:00 AM - 2:00 PM",
                country: "Germany",
                city: "Berlin",
                address: "Unter den Linden 10, 10117 Berlin",
                description: "Cat-only adoption event featuring felines of all ages looking for loving homes.",
                petTypes: ["Cats", "Kittens"]
            },
            {
                id: 9,
                name: "Adopt & Shop Petravaganza",
                organization: "Pet Paradise",
                date: getFutureDate(60),
                time: "9:00 AM - 7:00 PM",
                country: "France",
                city: "Paris",
                address: "15 Champs-Élysées, 75008 Paris",
                description: "A full day of adoption opportunities with special discounts on pet supplies for adopters.",
                petTypes: ["Dogs", "Cats", "Small Animals"]
            },
            {
                id: 10,
                name: "Rescue Rangers Adoption Day",
                organization: "Rescue Rangers",
                date: getFutureDate(75),
                time: "10:00 AM - 4:00 PM",
                country: "Japan",
                city: "Tokyo",
                address: "1-1-2 Shinjuku, Tokyo 160-0022",
                description: "Meet adoptable pets from local shelters and learn about responsible pet ownership.",
                petTypes: ["Dogs", "Cats"]
            },
            {
                id: 11,
                name: "Paws in the Park",
                organization: "City Pet Project",
                date: getFutureDate(10),
                time: "11:00 AM - 5:00 PM",
                country: "United States",
                city: "New York",
                address: "Bryant Park, New York, NY 10018",
                description: "Outdoor adoption event featuring pets from multiple shelters across the city.",
                petTypes: ["Dogs", "Cats"]
            },
            {
                id: 12,
                name: "Happy Tails Adoption Fair",
                organization: "Happy Tails Rescue",
                date: getFutureDate(28),
                time: "10:00 AM - 3:00 PM",
                country: "Australia",
                city: "Melbourne",
                address: "123 Elizabeth St, Melbourne VIC 3000",
                description: "Find your perfect companion among dozens of adoptable pets.",
                petTypes: ["Dogs", "Cats", "Rabbits"]
            },
            {
                id: 13,
                name: "Birdwatchers Adoption Day",
                organization: "Exotic Bird Rescue",
                date: getFutureDate(42),
                time: "9:00 AM - 4:00 PM",
                country: "Brazil",
                city: "Rio de Janeiro",
                address: "123 Copacabana Beach, Rio",
                description: "Special bird adoption event with exotic and domestic bird species looking for loving homes.",
                petTypes: ["Birds"]
            },
            {
                id: 14,
                name: "Pocket Pets Fair",
                organization: "Small Wonders Rescue",
                date: getFutureDate(15),
                time: "10:00 AM - 2:00 PM",
                country: "Germany",
                city: "Munich",
                address: "45 Marienplatz, Munich",
                description: "Adoption event focused on small animals like hamsters, guinea pigs, and rabbits.",
                petTypes: ["Small Animals", "Rabbits"]
            },
            {
                id: 15,
                name: "Desert Companions Adoption",
                organization: "Southwest Animal Shelter",
                date: getFutureDate(5),
                time: "8:00 AM - 1:00 PM",
                country: "United States",
                city: "Phoenix",
                address: "789 Desert Ave, Phoenix, AZ",
                description: "Early morning adoption event to beat the heat. Find your perfect companion!",
                petTypes: ["Dogs", "Cats", "Small Animals"]
            }
        ];
        
        // DOM elements for Events page
        const searchForm = document.getElementById('searchForm');
        const countryInput = document.getElementById('country');
        const cityInput = document.getElementById('city');
        const petTypeSelect = document.getElementById('petType');
        const dateRangeSelect = document.getElementById('dateRange');
        const specificDateContainer = document.getElementById('specificDateContainer');
        const dateInput = document.getElementById('eventDate');
        const clearFiltersBtn = document.getElementById('clearFilters');
        const resultsContainer = document.getElementById('results');
        const loaderElement = document.getElementById('loader');
        const noResultsElement = document.getElementById('noResults');
        const recentEventsContainer = document.getElementById('recent-events');
        
        // Show/hide specific date input based on date range selection
        dateRangeSelect.addEventListener('change', function() {
            if (this.value === 'specificDate') {
                specificDateContainer.classList.remove('hidden');
            } else {
                specificDateContainer.classList.add('hidden');
            }
        });
        
        // Handle search form submission
        searchForm.addEventListener('submit', function(event) {
            event.preventDefault();
            searchEvents();
        });
        
        function searchEvents() {
            const country = countryInput.value.trim();
            const city = cityInput.value.trim();
            const petType = petTypeSelect.value;
            const dateRange = dateRangeSelect.value;
            const selectedDate = dateInput.value; // Format: YYYY-MM-DD
            
            // Show loading indicator
            resultsContainer.innerHTML = '';
            loaderElement.classList.remove('hidden');
            noResultsElement.classList.add('hidden');
            
            // Calculate date range boundaries
            const today = new Date();
            let startDate = new Date(today);
            let endDate = new Date(today);
            
            switch(dateRange) {
                case 'next3months':
                    endDate.setMonth(today.getMonth() + 3);
                    break;
                case 'thisMonth':
                    startDate.setDate(1); // First day of current month
                    endDate = new Date(today.getFullYear(), today.getMonth() + 1, 0); // Last day of current month
                    break;
                case 'nextMonth':
                    startDate = new Date(today.getFullYear(), today.getMonth() + 1, 1); // First day of next month
                    endDate = new Date(today.getFullYear(), today.getMonth() + 2, 0); // Last day of next month
                    break;
                case 'specificDate':
                    if (selectedDate) {
                        startDate = new Date(selectedDate);
                        endDate = new Date(selectedDate);
                    }
                    break;
            }
            
            // Simulate API call delay
            setTimeout(() => {
                // Filter events based on search criteria
                let filteredEvents = [...adoptionEvents];
                
                if (country) {
                    filteredEvents = filteredEvents.filter(event => 
                        event.country.toLowerCase().includes(country.toLowerCase())
                    );
                }
                
                if (city) {
                    filteredEvents = filteredEvents.filter(event => 
                        event.city.toLowerCase().includes(city.toLowerCase())
                    );
                }
                
                if (petType) {
                    filteredEvents = filteredEvents.filter(event => 
                        event.petTypes.includes(petType)
                    );
                }
                
                // Filter by date range
                if (dateRange === 'specificDate' && selectedDate) {
                    filteredEvents = filteredEvents.filter(event => 
                        event.date === selectedDate
                    );
                } else {
                    filteredEvents = filteredEvents.filter(event => {
                        const eventDate = new Date(event.date);
                        return eventDate >= startDate && eventDate <= endDate;
                    });
                }
                
                // Hide loading indicator
                loaderElement.classList.add('hidden');
                
                if (filteredEvents.length === 0) {
                    noResultsElement.classList.remove('hidden');
                    return;
                }
                
                // Display results
                displayEvents(filteredEvents, resultsContainer);
            }, 600); // Simulate network delay
        }
        
        // Check if an event is happening today
        function isToday(dateStr) {
            const today = new Date();
            const eventDate = new Date(dateStr);
            return today.getDate() === eventDate.getDate() && 
                   today.getMonth() === eventDate.getMonth() && 
                   today.getFullYear() === eventDate.getFullYear();
        }
        
        // Favorites functionality
        let favorites = JSON.parse(localStorage.getItem('eventFavorites')) || [];
        
        function toggleFavorite(eventId) {
            const index = favorites.indexOf(eventId);
            
            if (index === -1) {
                // Add to favorites
                favorites.push(eventId);
                showToast('Event added to favorites');
            } else {
                // Remove from favorites
                favorites.splice(index, 1);
                showToast('Event removed from favorites');
            }
            
            // Save to localStorage
            localStorage.setItem('eventFavorites', JSON.stringify(favorites));
            
            // Update favorites page if it's active
            if (!document.getElementById('favorites').classList.contains('hidden')) {
                displayFavorites();
            }
        }
        
        // Display events in a container
        function displayEvents(events, container, showFavoritesToggle = true) {
            container.innerHTML = '';
            
            // Sort events by date (nearest first)
            events.sort((a, b) => new Date(a.date) - new Date(b.date));
            
            events.forEach(event => {
                const eventDate = new Date(event.date);
                const formattedDate = eventDate.toLocaleDateString('en-US', { 
                    weekday: 'long', 
                    year: 'numeric', 
                    month: 'long', 
                    day: 'numeric' 
                });
                
                const eventCard = document.createElement('div');
                let cardClasses = 'bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden transition-transform hover:scale-105';
                
                // Check if this event is happening today and add highlighting if it is
                if (isToday(event.date)) {
                    cardClasses += ' today-event';
                }
                
                eventCard.className = cardClasses;
                
                // Check if this event is in favorites
                const isFavorite = favorites.includes(event.id);
                
                eventCard.innerHTML = `
                    <div class="p-6">
                        <div class="flex justify-between items-start mb-2">
                            <h2 class="text-xl font-bold text-primary">${event.name}</h2>
                            ${showFavoritesToggle ? `
                            <div class="favorite-toggle">
                                <input type="checkbox" id="fav-${event.id}" class="heart-checkbox" ${isFavorite ? 'checked' : ''}>
                                <label for="fav-${event.id}" class="heart-icon">
                                    <i class="fas fa-heart text-xl ${isFavorite ? 'text-red-500' : ''}"></i>
                                </label>
                            </div>
                            ` : ''}
                        </div>
                        <p class="text-gray-700 dark:text-gray-300 font-medium mb-2">${event.organization}</p>
                        <div class="mb-4">
                            <div class="flex items-center mb-1">
                                <svg class="w-5 h-5 text-primary mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
                                </svg>
                                <span class="dark:text-gray-300">${formattedDate}${isToday(event.date) ? ' <span class="text-primary font-bold ml-2">(Today!)</span>' : ''}</span>
                            </div>
                            <div class="flex items-center mb-1">
                                <svg class="w-5 h-5 text-primary mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                                </svg>
                                <span class="dark:text-gray-300">${event.time}</span>
                            </div>
                            <div class="flex items-center">
                                <svg class="w-5 h-5 text-primary mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"></path>
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path>
                                </svg>
                                <span class="dark:text-gray-300">${event.city}, ${event.country}</span>
                            </div>
                        </div>
                        <p class="text-gray-600 dark:text-gray-400 mb-4">${event.description}</p>
                        <div class="flex flex-wrap gap-2 mt-2">
                            ${event.petTypes.map(type => 
                                `<span class="bg-primary bg-opacity-20 text-primary px-3 py-1 rounded-full text-sm">${type}</span>`
                            ).join('')}
                        </div>
                    </div>
                `;
                
                container.appendChild(eventCard);
                
                // Add event listener to favorite toggle
                if (showFavoritesToggle) {
                    const favoriteToggle = eventCard.querySelector(`#fav-${event.id}`);
                    favoriteToggle.addEventListener('change', () => {
                        toggleFavorite(event.id);
                        const heartIcon = eventCard.querySelector('.heart-icon i');
                        if (favoriteToggle.checked) {
                            heartIcon.classList.add('text-red-500');
                        } else {
                            heartIcon.classList.remove('text-red-500');
                        }
                    });
                }
            });
        }
        
        // Display favorite events
        function displayFavorites() {
            const favoritesContainer = document.getElementById('favorites-container');
            const noFavoritesMessage = document.getElementById('no-favorites');
            
            if (favorites.length === 0) {
                favoritesContainer.innerHTML = '';
                noFavoritesMessage.classList.remove('hidden');
                return;
            }
            
            noFavoritesMessage.classList.add('hidden');
            
            // Filter events that are in favorites
            const favoriteEvents = adoptionEvents.filter(event => favorites.includes(event.id));
            
            // Display the favorite events
            displayEvents(favoriteEvents, favoritesContainer, false);
        }
        
        // Clear all filters
        clearFiltersBtn.addEventListener('click', function() {
            countryInput.value = '';
            cityInput.value = '';
            petTypeSelect.value = '';
            dateRangeSelect.value = 'next3months';
            dateInput.value = '';
            specificDateContainer.classList.add('hidden');
            
            // Display events for next 3 months
            filterEventsForNext3Months();
            noResultsElement.classList.add('hidden');
        });
        
        // Filter events for the next 3 months
        function filterEventsForNext3Months() {
            const today = new Date();
            const threeMonthsLater = new Date(today);
            threeMonthsLater.setMonth(today.getMonth() + 3);
            
            const filteredEvents = adoptionEvents.filter(event => {
                const eventDate = new Date(event.date);
                return eventDate >= today && eventDate <= threeMonthsLater;
            });
            
            displayEvents(filteredEvents, resultsContainer);
        }
        
        // Display recent events on home page
        function displayRecentEvents() {
            const today = new Date();
            const oneMonthLater = new Date(today);
            oneMonthLater.setMonth(today.getMonth() + 1);
            
            // Get next 3 upcoming events
            const upcomingEvents = adoptionEvents
                .filter(event => {
                    const eventDate = new Date(event.date);
                    return eventDate >= today && eventDate <= oneMonthLater;
                })
                .sort((a, b) => new Date(a.date) - new Date(b.date))
                .slice(0, 3);
                
            displayEvents(upcomingEvents, recentEventsContainer);
        }
        
        // Handle contact form submission
        const contactForm = document.getElementById('contactForm');
        const contactSuccess = document.getElementById('contactSuccess');
        
        if (contactForm) {
            contactForm.addEventListener('submit', function(event) {
                event.preventDefault();
                
                // In a real app, you would send the form data to your server
                // Here we'll just simulate success after a delay
                
                // Get form data
                const name = document.getElementById('name').value;
                const email = document.getElementById('email').value;
                const subject = document.getElementById('subject').value;
                const message = document.getElementById('message').value;
                
                // Simple validation
                if (!name || !email || !subject || !message) {
                    showToast('Please fill in all fields');
                    return;
                }
                
                // Show loading state
                const submitButton = contactForm.querySelector('button[type="submit"]');
                submitButton.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i> Sending...';
                submitButton.disabled = true;
                
                // Simulate API call delay
                setTimeout(() => {
                    // Reset form
                    contactForm.reset();
                    
                    // Show success message
                    contactSuccess.classList.remove('hidden');
                    
                    // Reset button
                    submitButton.innerHTML = 'Send Message';
                    submitButton.disabled = false;
                    
                    // Scroll to success message
                    contactSuccess.scrollIntoView({ behavior: 'smooth', block: 'center' });
                    
                    // Hide success message after 5 seconds
                    setTimeout(() => {
                        contactSuccess.classList.add('hidden');
                    }, 5000);
                }, 1500);
            });
        }
        
        // Set min date for date picker to today
        const today = new Date().toISOString().split('T')[0];
        dateInput.setAttribute('min', today);
        
        // PWA install prompt
        let deferredPrompt;
        const pwaInstallPrompt = document.getElementById('pwa-install-prompt');
        const pwaInstallButton = document.getElementById('pwa-install');
        const pwaCancelButton = document.getElementById('pwa-cancel');
        
        window.addEventListener('beforeinstallprompt', (e) => {
            // Prevent Chrome 67 and earlier from automatically showing the prompt
            e.preventDefault();
            // Stash the event so it can be triggered later
            deferredPrompt = e;
            // Show the install prompt banner
            setTimeout(() => {
                pwaInstallPrompt.style.transform = 'translateY(0)';
            }, 5000); // Show after 5 seconds
        });
        
        pwaInstallButton.addEventListener('click', () => {
            // Hide the app provided install promotion
            pwaInstallPrompt.style.transform = 'translateY(full)';
            // Show the browser install prompt
            if (deferredPrompt) {
                deferredPrompt.prompt();
                // Wait for the user to respond to the prompt
                deferredPrompt.userChoice.then((choiceResult) => {
                    if (choiceResult.outcome === 'accepted') {
                        showToast('App installation started');
                    }
                    deferredPrompt = null;
                });
            }
        });
        
        pwaCancelButton.addEventListener('click', () => {
            pwaInstallPrompt.style.transform = 'translateY(full)';
            localStorage.setItem('pwaPromptDismissed', 'true');
        });
        
        // Check for URL hash on page load
        window.addEventListener('load', () => {
            // Navigation based on hash
            let pageId = window.location.hash.substring(1);
            if (!pageId || !document.getElementById(pageId)) {
                pageId = 'home';
            }
            navigateToPage(pageId);
            
            // Initialize the events page with next 3 months of events
            filterEventsForNext3Months();
            
            // Display recent events on home page
            displayRecentEvents();
            
            // Initialize favorites display
            displayFavorites();
            
            // Set default tab for mobile
            if (window.innerWidth < 768) {
                mobileMenu.classList.add('hidden');
            }
        });
        
        // Register service worker for PWA support
        if ('serviceWorker' in navigator) {
            window.addEventListener('load', () => {
                navigator.serviceWorker.register('/sw.js')
                    .then(registration => {
                        console.log('Service Worker registered with scope:', registration.scope);
                    })
                    .catch(error => {
                        console.error('Service Worker registration failed:', error);
                    });
            });
        }
    </script>
</body>
</html>