<!DOCTYPE html>
<html lang="<%= locale || 'ko' %>" class="<%= theme === 'dark' ? 'dark' : '' %>">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><%= title || __('errors.title') %></title>
    
    <!-- PWA -->
    <meta name="theme-color" content="#3B82F6">
    <link rel="manifest" href="/manifest.json">
    <link rel="apple-touch-icon" href="/images/icons/icon-192x192.png">
    
    <!-- Styles -->
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <link href="/css/main.css" rel="stylesheet">
    <link href="/css/fixes.css" rel="stylesheet">
    <link href="/css/dark-theme.css" rel="stylesheet">
</head>
<body class="font-sans dark:bg-gray-900 dark:text-gray-100">
    <%- include('partials/navigation', { settings: settings || {}, currentPage: 'error' }) %>

    <!-- Error Section -->
    <section class="min-h-screen flex items-center justify-center py-20">
        <div class="container mx-auto px-4 text-center">
            <div class="bg-white rounded-2xl shadow-xl p-12 max-w-2xl mx-auto">
                
                <!-- Error Icon -->
                <div class="w-24 h-24 bg-red-100 rounded-full flex items-center justify-center mx-auto mb-8">
                    <i class="fas fa-exclamation-triangle text-red-600 text-4xl"></i>
                </div>

                <!-- Error Title -->
                <h1 class="text-4xl md:text-5xl font-bold text-gray-900 mb-6">
                    <%= title || __('errors.default_title') %>
                </h1>

                <!-- Error Message -->
                <p class="text-xl text-gray-600 mb-8 leading-relaxed">
                    <%= message || __('errors.default_message') %>
                </p>

                <!-- Action Buttons -->
                <div class="flex flex-col sm:flex-row gap-4 justify-center">
                    <a href="/" 
                       class="bg-blue-600 text-white px-8 py-3 rounded-full hover:bg-blue-700 transition-colors font-semibold">
                        <i class="fas fa-home mr-2"></i>
                        <%= __('errors.back_home') %>
                    </a>
                    <button onclick="history.back()" 
                            class="border-2 border-blue-600 text-blue-600 px-8 py-3 rounded-full hover:bg-blue-600 hover:text-white transition-colors font-semibold">
                        <i class="fas fa-arrow-left mr-2"></i>
                        <%= __('errors.go_back') %>
                    </button>
                </div>

                <!-- Help Section -->
                <div class="mt-12 pt-8 border-t border-gray-200">
                    <h3 class="text-lg font-semibold text-gray-900 mb-4"><%= __('errors.need_help') %></h3>
                    <p class="text-gray-600 mb-6">
                        <%= __('errors.help_message') %>
                    </p>
                    <div class="flex flex-col sm:flex-row gap-4 justify-center">
                        <a href="/contact" 
                           class="text-blue-600 hover:text-blue-700 font-semibold">
                            <i class="fas fa-envelope mr-2"></i>
                            <%= __('errors.contact_support') %>
                        </a>
                        <% if (settings && settings.contact && settings.contact.email) { %>
                        <a href="mailto:<%= settings.contact.email %>" 
                           class="text-blue-600 hover:text-blue-700 font-semibold">
                            <i class="fas fa-at mr-2"></i>
                            <%= settings.contact.email %>
                        </a>
                        <% } else { %>
                        <a href="mailto:info@smartsoltech.kr" 
                           class="text-blue-600 hover:text-blue-700 font-semibold">
                            <i class="fas fa-at mr-2"></i>
                            info@smartsoltech.kr
                        </a>
                        <% } %>
                        <% if (settings && settings.contact && settings.contact.phone) { %>
                        <a href="tel:<%= settings.contact.phone %>" 
                           class="text-blue-600 hover:text-blue-700 font-semibold">
                            <i class="fas fa-phone mr-2"></i>
                            <%= settings.contact.phone %>
                        </a>
                        <% } else { %>
                        <a href="tel:+82-10-1234-5678" 
                           class="text-blue-600 hover:text-blue-700 font-semibold">
                            <i class="fas fa-phone mr-2"></i>
                            +82-10-1234-5678
                        </a>
                        <% } %>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Scripts -->
    <script src="/js/main.js"></script>
</body>
</html>