<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{% block title %}Software of You{% endblock %}</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://unpkg.com/lucide@latest/dist/umd/lucide.min.js"></script>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    fontFamily: { sans: ['Inter', 'system-ui', 'sans-serif'] }
                }
            }
        }
    </script>
    <style>
        .nav-item {
            display: flex; align-items: center; gap: 0.375rem;
            padding: 0.375rem 0.75rem; border-radius: 0.5rem;
            font-size: 0.8125rem; color: #71717a; white-space: nowrap;
            transition: all 0.15s; text-decoration: none;
        }
        .nav-item:hover { background: #f4f4f5; color: #18181b; }
        .nav-item.active { background: #f4f4f5; color: #18181b; font-weight: 600; }
        .nav-badge {
            font-size: 0.6875rem; background: #e4e4e7; color: #52525b;
            padding: 0.0625rem 0.375rem; border-radius: 9999px; font-weight: 500;
        }
        .nav-item.active .nav-badge, .nav-dropdown-item.active .nav-badge {
            background: #3b82f6; color: white;
        }
        .nav-group { position: relative; }
        .nav-group-label {
            display: flex; align-items: center; gap: 0.25rem;
            padding: 0.375rem 0.75rem; border-radius: 0.5rem;
            font-size: 0.8125rem; color: #71717a; cursor: pointer;
            white-space: nowrap; transition: all 0.15s; user-select: none;
        }
        .nav-group-label:hover, .nav-group.active > .nav-group-label {
            background: #f4f4f5; color: #18181b;
        }
        .nav-group.active > .nav-group-label { font-weight: 600; }
        .nav-chevron { transition: transform 0.15s; opacity: 0.5; }
        .nav-group:hover .nav-chevron, .nav-group.open .nav-chevron { opacity: 1; }
        .nav-group.open .nav-chevron { transform: rotate(180deg); }
        .nav-dropdown {
            display: none; position: absolute; top: 100%; left: 0;
            margin-top: 0.25rem; min-width: 10rem; background: white;
            border: 1px solid #e4e4e7; border-radius: 0.75rem;
            box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1);
            padding: 0.375rem; z-index: 50;
        }
        .nav-group:hover > .nav-dropdown { display: block; }
        .nav-group.open > .nav-dropdown { display: block; }
        .nav-dropdown-item {
            display: flex; align-items: center; gap: 0.375rem;
            padding: 0.375rem 0.625rem; border-radius: 0.375rem;
            font-size: 0.8125rem; color: #71717a; white-space: nowrap;
            transition: all 0.15s; text-decoration: none;
        }
        .nav-dropdown-item:hover { background: #f4f4f5; color: #18181b; }
        .nav-dropdown-item.active { background: #eff6ff; color: #1d4ed8; font-weight: 600; }
    </style>
    {% block head_extra %}{% endblock %}
</head>
<body class="bg-zinc-50 text-zinc-900 font-sans antialiased">
    {% include "nav.html" %}

    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
        {% block content %}{% endblock %}
    </div>

    <footer class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 mt-8 pb-8">
        <div class="pt-4 border-t border-zinc-100 text-center">
            <p class="text-xs text-zinc-400">Generated by Software of You · {{ generated_at }}</p>
        </div>
    </footer>

    <script>lucide.createIcons();</script>
</body>
</html>
