<!-- Footer -->
<footer class="bg-gray-900 text-white py-12 mt-16">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="grid md:grid-cols-3 gap-8">
            <div>
                <img src="{{ url_for('static', path='/images/oppkey_logo.jpg') }}" 
                     alt="Oppkey Logo" 
                     class="h-8 w-auto mb-4">
                <p class="text-gray-400">
                    This site is an open source community starter kit for FastAPI with modern admin tools and interactive demos. It is intended for your use and testing! Try deploying your own FastAPI site!
                </p>
            </div>
            
            <div class="pl-12 pr-8">
                <h4 class="text-lg font-semibold mb-4">Quick Links</h4>
                <ul class="space-y-2 text-gray-400">
                    <li><a href="/design-demo" class="hover:text-white transition-colors">Design Demo</a></li>
                    <li><a href="/database-demo" class="hover:text-white transition-colors">Database Demo</a></li>
                    <li><a href="/webinar-demo" class="hover:text-white transition-colors">Webinar Demo</a></li>
                    <li><a href="/ai-demo" class="hover:text-white transition-colors">AI Demo</a></li>
                </ul>
            </div>
            
            <div>
                <h4 class="text-lg font-semibold mb-4">Technologies</h4>
                <div class="flex flex-wrap gap-2">
                    <span class="bg-blue-600 px-3 py-1 rounded-full text-sm">Tailwind CSS</span>
                    <span class="bg-green-600 px-3 py-1 rounded-full text-sm">HTMX</span>
                    <span class="bg-purple-600 px-3 py-1 rounded-full text-sm">Alpine.js</span>
                    <span class="bg-orange-500 px-3 py-1 rounded-full text-sm">Chart.js</span>
                    <span class="bg-red-600 px-3 py-1 rounded-full text-sm">DaisyUI</span>
                    <span class="inline-flex items-center rounded-full bg-amber-600 px-3 py-1 text-sm font-medium text-white ring-1 ring-inset ring-amber-700/40">OpenRouter</span>
                </div>
            </div>
        </div>
        
                    <div class="border-t border-gray-800 mt-8 pt-8 text-center text-gray-400">
                <p>&copy; 2025 Oppkey, Inc. Licensed under the <a href="/license" class="text-blue-400 hover:text-blue-300 underline">MIT License</a>. Free to use, modify, and distribute. <a href="https://github.com/Oppkey/fastopp" class="text-blue-400 hover:text-blue-300 inline-flex items-center"><svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24"><path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/></svg></a></p>
            </div>
    </div>
</footer>