<nav class="bg-white shadow-lg fixed w-full z-50 top-0">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="flex justify-between h-16">
            <div class="flex items-center">
                <!-- Logo -->
                <a href="/" class="flex-shrink-0 flex items-center">
                    <img class="h-8 w-auto" src="<%= settings && settings.logo ? settings.logo : '/images/logo.png' %>" alt="SmartSolTech">
                    <span class="ml-2 text-xl font-bold text-gray-900">SmartSolTech</span>
                </a>
            </div>
            
            <!-- Desktop Navigation -->
            <div class="hidden md:flex items-center space-x-8">
                <a href="/" class="<%= currentPage === 'home' ? 'text-blue-600 border-b-2 border-blue-600' : 'text-gray-700 hover:text-blue-600' %> px-3 py-2 text-sm font-medium transition-colors">
                    홈
                </a>
                <a href="/about" class="<%= currentPage === 'about' ? 'text-blue-600 border-b-2 border-blue-600' : 'text-gray-700 hover:text-blue-600' %> px-3 py-2 text-sm font-medium transition-colors">
                    회사소개
                </a>
                <a href="/services" class="<%= currentPage === 'services' ? 'text-blue-600 border-b-2 border-blue-600' : 'text-gray-700 hover:text-blue-600' %> px-3 py-2 text-sm font-medium transition-colors">
                    서비스
                </a>
                <a href="/portfolio" class="<%= currentPage === 'portfolio' ? 'text-blue-600 border-b-2 border-blue-600' : 'text-gray-700 hover:text-blue-600' %> px-3 py-2 text-sm font-medium transition-colors">
                    포트폴리오
                </a>
                <a href="/calculator" class="<%= currentPage === 'calculator' ? 'text-blue-600 border-b-2 border-blue-600' : 'text-gray-700 hover:text-blue-600' %> px-3 py-2 text-sm font-medium transition-colors">
                    견적 계산기
                </a>
                <a href="/contact" class="<%= currentPage === 'contact' ? 'text-blue-600 border-b-2 border-blue-600' : 'text-gray-700 hover:text-blue-600' %> px-3 py-2 text-sm font-medium transition-colors">
                    연락처
                </a>
                
                <!-- CTA Button -->
                <a href="/contact" class="bg-blue-600 text-white px-4 py-2 rounded-lg text-sm font-medium hover:bg-blue-700 transition-colors">
                    프로젝트 시작하기
                </a>
            </div>
            
            <!-- Mobile menu button -->
            <div class="md:hidden flex items-center">
                <button type="button" class="mobile-menu-button text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-blue-500 p-2 rounded-md">
                    <span class="sr-only">메뉴 열기</span>
                    <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" 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>
    
    <!-- Mobile Navigation Menu -->
    <div class="mobile-menu hidden md:hidden">
        <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3 bg-white border-t">
            <a href="/" class="<%= currentPage === 'home' ? 'bg-blue-50 text-blue-600' : 'text-gray-700 hover:bg-gray-50' %> block px-3 py-2 rounded-md text-base font-medium">
                홈
            </a>
            <a href="/about" class="<%= currentPage === 'about' ? 'bg-blue-50 text-blue-600' : 'text-gray-700 hover:bg-gray-50' %> block px-3 py-2 rounded-md text-base font-medium">
                회사소개
            </a>
            <a href="/services" class="<%= currentPage === 'services' ? 'bg-blue-50 text-blue-600' : 'text-gray-700 hover:bg-gray-50' %> block px-3 py-2 rounded-md text-base font-medium">
                서비스
            </a>
            <a href="/portfolio" class="<%= currentPage === 'portfolio' ? 'bg-blue-50 text-blue-600' : 'text-gray-700 hover:bg-gray-50' %> block px-3 py-2 rounded-md text-base font-medium">
                포트폴리오
            </a>
            <a href="/calculator" class="<%= currentPage === 'calculator' ? 'bg-blue-50 text-blue-600' : 'text-gray-700 hover:bg-gray-50' %> block px-3 py-2 rounded-md text-base font-medium">
                견적 계산기
            </a>
            <a href="/contact" class="<%= currentPage === 'contact' ? 'bg-blue-50 text-blue-600' : 'text-gray-700 hover:bg-gray-50' %> block px-3 py-2 rounded-md text-base font-medium">
                연락처
            </a>
            <a href="/contact" class="bg-blue-600 text-white block px-3 py-2 rounded-md text-base font-medium">
                프로젝트 시작하기
            </a>
        </div>
    </div>
</nav>

<!-- Spacer for fixed navigation -->
<div class="h-16"></div>