<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{% if page.title %}{{ page.title }} - {{ site.title }}{% else %}{{ site.title }}{% endif %}</title>
    <meta name="description" content="{% if page.description %}{{ page.description }}{% else %}{{ site.description }}{% endif %}">
    
    <!-- Favicon -->
    <link rel="icon" type="image/x-icon" href="{{ '/assets/images/fastopp_logo.webp' | relative_url }}">
    
    <!-- Tailwind CSS CDN -->
    <script src="https://cdn.tailwindcss.com"></script>
    
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        'ai-blue': '#3B82F6',
                        'ai-purple': '#8B5CF6',
                        'ai-green': '#10B981'
                    }
                }
            }
        }
    </script>
    
    <!-- Custom CSS -->
    <link rel="stylesheet" href="{{ '/assets/css/main.css' | relative_url }}">
    
    <!-- SEO -->
    {% seo %}
    
    <!-- Feed -->
    <link rel="alternate" type="application/rss+xml" title="{{ site.title }}" href="{{ '/feed.xml' | relative_url }}">
</head>
<body class="bg-gray-50 min-h-screen">
    <div class="min-h-screen flex flex-col">
        <!-- Header -->
        <header class="bg-white shadow-sm border-b border-gray-200">
            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                <div class="flex justify-between items-center py-6">
                    <div class="flex items-center">
                        <a href="{{ '/' | relative_url }}" class="text-2xl font-bold text-gray-900 hover:text-ai-blue transition-colors">
                            {{ site.title }}
                        </a>
                    </div>
                    
                    <nav class="hidden md:flex space-x-8">
                        <a href="{{ '/' | relative_url }}" 
                           class="text-gray-700 hover:text-ai-blue transition-colors font-medium">
                            Home
                        </a>
                        <a href="{{ '/about/' | relative_url }}" 
                           class="text-gray-700 hover:text-ai-blue transition-colors font-medium">
                            About
                        </a>
                        <a href="{{ '/posts/' | relative_url }}" 
                           class="text-gray-700 hover:text-ai-blue transition-colors font-medium">
                            Posts
                        </a>
                        <a href="https://github.com/Oppkey/FastOpp" 
                           class="text-gray-700 hover:text-ai-blue transition-colors font-medium"
                           target="_blank" rel="noopener">
                            GitHub
                        </a>
                    </nav>
                    
                    <!-- Mobile menu button -->
                    <div class="md:hidden">
                        <button type="button" class="text-gray-700 hover:text-ai-blue focus:outline-none">
                            <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
                            </svg>
                        </button>
                    </div>
                </div>
            </div>
        </header>

        <!-- Main Content -->
        <main class="flex-grow">
            {{ content }}
        </main>

        <!-- Footer -->
        <footer class="bg-gray-900 text-white">
            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
                <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
                    <div>
                        <div class="mb-4">
                            <span class="text-xl font-bold">{{ site.title }}</span>
                        </div>
                        <p class="text-gray-300 mb-4">
                            {{ site.description }}
                        </p>
                        <div class="flex space-x-4">
                            <a href="https://github.com/Oppkey/FastOpp" 
                               class="text-gray-300 hover:text-white transition-colors"
                               target="_blank" rel="noopener">
                                <svg class="h-6 w-6" 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>
                        </div>
                    </div>
                    
                    <div>
                        <h3 class="text-lg font-semibold mb-4">Quick Links</h3>
                        <ul class="space-y-2">
                            <li><a href="{{ '/' | relative_url }}" class="text-gray-300 hover:text-white transition-colors">Home</a></li>
                            <li><a href="{{ '/about/' | relative_url }}" class="text-gray-300 hover:text-white transition-colors">About</a></li>
                            <li><a href="{{ '/posts/' | relative_url }}" class="text-gray-300 hover:text-white transition-colors">Blog Posts</a></li>
                            <li><a href="https://github.com/Oppkey/FastOpp" class="text-gray-300 hover:text-white transition-colors" target="_blank" rel="noopener">GitHub Repository</a></li>
                        </ul>
                    </div>
                    
                    <div>
                        <h3 class="text-lg font-semibold mb-4">Resources</h3>
                        <ul class="space-y-2">
                            <li><a href="https://github.com/Oppkey/FastOpp#-quick-start-for-students" class="text-gray-300 hover:text-white transition-colors" target="_blank" rel="noopener">Quick Start Guide</a></li>
                            <li><a href="https://github.com/Oppkey/FastOpp#-management-commands" class="text-gray-300 hover:text-white transition-colors" target="_blank" rel="noopener">Documentation</a></li>
                            <li><a href="https://github.com/Oppkey/FastOpp#-troubleshooting" class="text-gray-300 hover:text-white transition-colors" target="_blank" rel="noopener">Troubleshooting</a></li>
                        </ul>
                    </div>
                </div>
                
                <div class="border-t border-gray-800 mt-8 pt-8 text-center">
                    <p class="text-gray-400">
                        &copy; {{ 'now' | date: "%Y" }} {{ site.author }}. Built with FastOpp and Jekyll.
                    </p>
                </div>
            </div>
        </footer>
    </div>
</body>
</html>
