<!DOCTYPE html>
<html lang="<%= locale %>" class="<%= theme === 'dark' ? 'dark' : '' %>">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><%- __('calculator.meta.title') %> - SmartSolTech</title>
    
    <!-- SEO Meta Tags -->
    <meta name="description" content="<%- __('calculator.meta.description') %>">
    
    <!-- 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') %>

    <!-- Calculator Header -->
    <section class="relative bg-gradient-to-r from-blue-600 to-purple-600 dark:from-blue-800 dark:to-purple-800 py-20 mt-16 hero-section">
        <div class="absolute inset-0 bg-black opacity-20"></div>
        <div class="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
            <h1 class="text-4xl md:text-5xl font-bold text-white mb-4">
                <%- __('calculator.title') %>
            </h1>
            <p class="text-xl text-blue-100 max-w-3xl mx-auto">
                <%- __('calculator.subtitle') %>
            </p>
        </div>
    </section>

    <!-- Calculator Form -->
    <section class="py-16 bg-gray-50 dark:bg-gray-800">
        <div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="bg-white dark:bg-gray-900 rounded-3xl shadow-2xl overflow-hidden">
                <div class="p-8 md:p-12">
                    <form id="calculator-form">
                        <!-- Step 1: Service Selection -->
                        <div class="calculator-step active" id="step-1">
                            <div class="text-center mb-8">
                                <h2 class="text-3xl font-bold text-gray-900 dark:text-white mb-4">
                                    <%- __('calculator.step1.title') %>
                                </h2>
                                <p class="text-gray-600 dark:text-gray-300">
                                    <%- __('calculator.step1.subtitle') %>
                                </p>
                            </div>
                            
                            <div class="grid grid-cols-1 md:grid-cols-2 gap-6" id="services-grid">
                                <!-- Web Development -->
                                <div class="service-option p-6 border-2 border-gray-200 dark:border-gray-600 rounded-xl cursor-pointer hover:border-blue-500 dark:hover:border-blue-400 transition-all bg-gray-50 dark:bg-gray-800" data-service="web" data-base-price="500000">
                                    <div class="flex items-center mb-4">
                                        <div class="w-12 h-12 bg-blue-100 dark:bg-blue-900 rounded-lg flex items-center justify-center mr-4">
                                            <i class="fas fa-code text-blue-600 dark:text-blue-400 text-xl"></i>
                                        </div>
                                        <div>
                                            <h3 class="text-lg font-semibold text-gray-900 dark:text-white">
                                                <%- __('services.web.title') %>
                                            </h3>
                                            <div class="text-blue-600 dark:text-blue-400 font-bold"><%- __('services.web.price') %></div>
                                        </div>
                                    </div>
                                    <p class="text-gray-600 dark:text-gray-300 text-sm">
                                        <%- __('services.web.description') %>
                                    </p>
                                </div>

                                <!-- Mobile App -->
                                <div class="service-option p-6 border-2 border-gray-200 dark:border-gray-600 rounded-xl cursor-pointer hover:border-blue-500 dark:hover:border-blue-400 transition-all bg-gray-50 dark:bg-gray-800" data-service="mobile" data-base-price="800000">
                                    <div class="flex items-center mb-4">
                                        <div class="w-12 h-12 bg-green-100 dark:bg-green-900 rounded-lg flex items-center justify-center mr-4">
                                            <i class="fas fa-mobile-alt text-green-600 dark:text-green-400 text-xl"></i>
                                        </div>
                                        <div>
                                            <h3 class="text-lg font-semibold text-gray-900 dark:text-white">
                                                <%- __('services.mobile.title') %>
                                            </h3>
                                            <div class="text-green-600 dark:text-green-400 font-bold"><%- __('services.mobile.price') %></div>
                                        </div>
                                    </div>
                                    <p class="text-gray-600 dark:text-gray-300 text-sm">
                                        <%- __('services.mobile.description') %>
                                    </p>
                                </div>

                                <!-- UI/UX Design -->
                                <div class="service-option p-6 border-2 border-gray-200 dark:border-gray-600 rounded-xl cursor-pointer hover:border-blue-500 dark:hover:border-blue-400 transition-all bg-gray-50 dark:bg-gray-800" data-service="design" data-base-price="300000">
                                    <div class="flex items-center mb-4">
                                        <div class="w-12 h-12 bg-purple-100 dark:bg-purple-900 rounded-lg flex items-center justify-center mr-4">
                                            <i class="fas fa-palette text-purple-600 dark:text-purple-400 text-xl"></i>
                                        </div>
                                        <div>
                                            <h3 class="text-lg font-semibold text-gray-900 dark:text-white">
                                                <%- __('services.design.title') %>
                                            </h3>
                                            <div class="text-purple-600 dark:text-purple-400 font-bold"><%- __('services.design.price') %></div>
                                        </div>
                                    </div>
                                    <p class="text-gray-600 dark:text-gray-300 text-sm">
                                        <%- __('services.design.description') %>
                                    </p>
                                </div>

                                <!-- Digital Marketing -->
                                <div class="service-option p-6 border-2 border-gray-200 dark:border-gray-600 rounded-xl cursor-pointer hover:border-blue-500 dark:hover:border-blue-400 transition-all bg-gray-50 dark:bg-gray-800" data-service="marketing" data-base-price="200000">
                                    <div class="flex items-center mb-4">
                                        <div class="w-12 h-12 bg-yellow-100 dark:bg-yellow-900 rounded-lg flex items-center justify-center mr-4">
                                            <i class="fas fa-chart-line text-yellow-600 dark:text-yellow-400 text-xl"></i>
                                        </div>
                                        <div>
                                            <h3 class="text-lg font-semibold text-gray-900 dark:text-white">
                                                <%- __('services.marketing.title') %>
                                            </h3>
                                            <div class="text-yellow-600 dark:text-yellow-400 font-bold"><%- __('services.marketing.price') %></div>
                                        </div>
                                    </div>
                                    <p class="text-gray-600 dark:text-gray-300 text-sm">
                                        <%- __('services.marketing.description') %>
                                    </p>
                                </div>
                            </div>
                            
                            <div class="text-center mt-8">
                                <button type="button" class="next-step bg-blue-600 dark:bg-blue-500 text-white px-8 py-3 rounded-lg font-semibold hover:bg-blue-700 dark:hover:bg-blue-400 transition-colors disabled:bg-gray-300 disabled:cursor-not-allowed" disabled>
                                    <%- __('calculator.next_step') %>
                                </button>
                            </div>
                        </div>
                        
                        <!-- Step 2: Project Details -->
                        <div class="calculator-step" id="step-2" style="display: none;">
                            <div class="text-center mb-8">
                                <h2 class="text-3xl font-bold text-gray-900 dark:text-white mb-4">
                                    <%- __('calculator.step2.title') %>
                                </h2>
                                <p class="text-gray-600 dark:text-gray-300">
                                    <%- __('calculator.step2.subtitle') %>
                                </p>
                            </div>
                            
                            <div class="space-y-8">
                                <!-- Project Complexity -->
                                <div>
                                    <label class="block text-lg font-semibold text-gray-900 dark:text-white mb-4">
                                        <%- __('calculator.complexity.title') %>
                                    </label>
                                    <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                                        <div class="complexity-option p-4 border-2 border-gray-200 dark:border-gray-600 rounded-lg cursor-pointer hover:border-blue-500 dark:hover:border-blue-400 transition-colors bg-gray-50 dark:bg-gray-800" data-value="simple" data-multiplier="1">
                                            <div class="text-center">
                                                <div class="text-2xl mb-2">🟢</div>
                                                <h4 class="font-semibold text-gray-900 dark:text-white"><%- __('calculator.complexity.simple') %></h4>
                                                <p class="text-sm text-gray-600 dark:text-gray-300 mt-2"><%- __('calculator.complexity.simple_desc') %></p>
                                            </div>
                                        </div>
                                        <div class="complexity-option p-4 border-2 border-gray-200 dark:border-gray-600 rounded-lg cursor-pointer hover:border-blue-500 dark:hover:border-blue-400 transition-colors bg-gray-50 dark:bg-gray-800" data-value="medium" data-multiplier="1.5">
                                            <div class="text-center">
                                                <div class="text-2xl mb-2">🟡</div>
                                                <h4 class="font-semibold text-gray-900 dark:text-white"><%- __('calculator.complexity.medium') %></h4>
                                                <p class="text-sm text-gray-600 dark:text-gray-300 mt-2"><%- __('calculator.complexity.medium_desc') %></p>
                                            </div>
                                        </div>
                                        <div class="complexity-option p-4 border-2 border-gray-200 dark:border-gray-600 rounded-lg cursor-pointer hover:border-blue-500 dark:hover:border-blue-400 transition-colors bg-gray-50 dark:bg-gray-800" data-value="complex" data-multiplier="2.5">
                                            <div class="text-center">
                                                <div class="text-2xl mb-2">🔴</div>
                                                <h4 class="font-semibold text-gray-900 dark:text-white"><%- __('calculator.complexity.complex') %></h4>
                                                <p class="text-sm text-gray-600 dark:text-gray-300 mt-2"><%- __('calculator.complexity.complex_desc') %></p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                
                                <!-- Timeline -->
                                <div>
                                    <label class="block text-lg font-semibold text-gray-900 dark:text-white mb-4">
                                        <%- __('calculator.timeline.title') %>
                                    </label>
                                    <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                                        <div class="timeline-option p-4 border-2 border-gray-200 dark:border-gray-600 rounded-lg cursor-pointer hover:border-blue-500 dark:hover:border-blue-400 transition-colors bg-gray-50 dark:bg-gray-800" data-value="standard" data-multiplier="1">
                                            <div class="text-center">
                                                <div class="text-2xl mb-2">📅</div>
                                                <h4 class="font-semibold text-gray-900 dark:text-white"><%- __('calculator.timeline.standard') %></h4>
                                                <p class="text-sm text-gray-600 dark:text-gray-300 mt-2"><%- __('calculator.timeline.standard_desc') %></p>
                                            </div>
                                        </div>
                                        <div class="timeline-option p-4 border-2 border-gray-200 dark:border-gray-600 rounded-lg cursor-pointer hover:border-blue-500 dark:hover:border-blue-400 transition-colors bg-gray-50 dark:bg-gray-800" data-value="rush" data-multiplier="1.5">
                                            <div class="text-center">
                                                <div class="text-2xl mb-2">⚡</div>
                                                <h4 class="font-semibold text-gray-900 dark:text-white"><%- __('calculator.timeline.rush') %></h4>
                                                <p class="text-sm text-gray-600 dark:text-gray-300 mt-2"><%- __('calculator.timeline.rush_desc') %></p>
                                            </div>
                                        </div>
                                        <div class="timeline-option p-4 border-2 border-gray-200 dark:border-gray-600 rounded-lg cursor-pointer hover:border-blue-500 dark:hover:border-blue-400 transition-colors bg-gray-50 dark:bg-gray-800" data-value="extended" data-multiplier="0.8">
                                            <div class="text-center">
                                                <div class="text-2xl mb-2">🗓️</div>
                                                <h4 class="font-semibold text-gray-900 dark:text-white"><%- __('calculator.timeline.extended') %></h4>
                                                <p class="text-sm text-gray-600 dark:text-gray-300 mt-2"><%- __('calculator.timeline.extended_desc') %></p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="flex justify-between mt-8">
                                <button type="button" class="prev-step bg-gray-600 text-white px-8 py-3 rounded-lg font-semibold hover:bg-gray-700 transition-colors">
                                    <%- __('calculator.prev_step') %>
                                </button>
                                <button type="button" class="next-step bg-blue-600 dark:bg-blue-500 text-white px-8 py-3 rounded-lg font-semibold hover:bg-blue-700 dark:hover:bg-blue-400 transition-colors disabled:bg-gray-300 disabled:cursor-not-allowed" disabled>
                                    <%- __('calculator.calculate') %>
                                </button>
                            </div>
                        </div>
                        
                        <!-- Step 3: Results -->
                        <div class="calculator-step" id="step-3" style="display: none;">
                            <div class="text-center mb-8">
                                <h2 class="text-3xl font-bold text-gray-900 dark:text-white mb-4">
                                    <%- __('calculator.result.title') %>
                                </h2>
                                <p class="text-gray-600 dark:text-gray-300">
                                    <%- __('calculator.result.subtitle') %>
                                </p>
                            </div>
                            
                            <div class="max-w-2xl mx-auto">
                                <!-- Price Display -->
                                <div class="bg-gradient-to-r from-blue-600 to-purple-600 rounded-2xl p-8 text-white text-center mb-8">
                                    <h3 class="text-2xl font-bold mb-4"><%- __('calculator.result.estimated_price') %></h3>
                                    <div class="text-5xl font-bold" id="final-price">₩0</div>
                                    <p class="mt-4 text-blue-100"><%- __('calculator.result.price_note') %></p>
                                </div>
                                
                                <!-- Project Summary -->
                                <div class="bg-white dark:bg-gray-800 rounded-xl p-6 shadow-lg mb-8">
                                    <h4 class="text-xl font-bold text-gray-900 dark:text-white mb-4"><%- __('calculator.result.summary') %></h4>
                                    <div id="project-summary" class="space-y-2 text-gray-600 dark:text-gray-300">
                                        <!-- Summary will be populated by JavaScript -->
                                    </div>
                                </div>
                                
                                <!-- Action Buttons -->
                                <div class="text-center space-y-4">
                                    <div class="flex flex-col sm:flex-row gap-4 justify-center">
                                        <a href="/contact" class="inline-flex items-center px-8 py-3 bg-blue-600 dark:bg-blue-500 text-white font-semibold rounded-lg hover:bg-blue-700 dark:hover:bg-blue-400 transition-colors">
                                            <i class="fas fa-paper-plane mr-2"></i>
                                            <%- __('calculator.result.get_quote') %>
                                        </a>
                                        <button type="button" class="restart-calculator inline-flex items-center px-8 py-3 border-2 border-blue-600 dark:border-blue-400 text-blue-600 dark:text-blue-400 font-semibold rounded-lg hover:bg-blue-600 hover:text-white dark:hover:bg-blue-400 dark:hover:text-gray-900 transition-colors">
                                            <i class="fas fa-redo mr-2"></i>
                                            <%- __('calculator.result.recalculate') %>
                                        </button>
                                    </div>
                                    <p class="text-sm text-gray-500 dark:text-gray-400">
                                        <%- __('calculator.result.contact_note') %>
                                    </p>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </section>

    <%- include('partials/footer') %>

    <!-- Scripts -->
    <script>
        // Theme initialization
        document.addEventListener('DOMContentLoaded', function() {
            const theme = localStorage.getItem('theme') || 'light';
            document.documentElement.className = theme === 'dark' ? 'dark' : '';
        });

        // Calculator Logic
        let selectedServices = [];
        let selectedComplexity = null;
        let selectedTimeline = null;

        // Service selection
        document.querySelectorAll('.service-option').forEach(option => {
            option.addEventListener('click', function() {
                this.classList.toggle('selected');
                const service = this.dataset.service;
                const price = parseInt(this.dataset.basePrice);
                
                if (this.classList.contains('selected')) {
                    this.style.borderColor = '#3B82F6';
                    this.style.backgroundColor = '#EBF8FF';
                    selectedServices.push({ service, price });
                } else {
                    this.style.borderColor = '';
                    this.style.backgroundColor = '';
                    selectedServices = selectedServices.filter(s => s.service !== service);
                }
                
                updateStepButton();
            });
        });

        // Complexity selection
        document.querySelectorAll('.complexity-option').forEach(option => {
            option.addEventListener('click', function() {
                document.querySelectorAll('.complexity-option').forEach(opt => {
                    opt.style.borderColor = '';
                    opt.style.backgroundColor = '';
                });
                
                this.style.borderColor = '#3B82F6';
                this.style.backgroundColor = '#EBF8FF';
                selectedComplexity = {
                    value: this.dataset.value,
                    multiplier: parseFloat(this.dataset.multiplier)
                };
                
                updateStepButton();
            });
        });

        // Timeline selection
        document.querySelectorAll('.timeline-option').forEach(option => {
            option.addEventListener('click', function() {
                document.querySelectorAll('.timeline-option').forEach(opt => {
                    opt.style.borderColor = '';
                    opt.style.backgroundColor = '';
                });
                
                this.style.borderColor = '#3B82F6';
                this.style.backgroundColor = '#EBF8FF';
                selectedTimeline = {
                    value: this.dataset.value,
                    multiplier: parseFloat(this.dataset.multiplier)
                };
                
                updateStepButton();
            });
        });

        // Step navigation
        document.querySelectorAll('.next-step').forEach(btn => {
            btn.addEventListener('click', function() {
                const currentStep = document.querySelector('.calculator-step.active');
                const nextStep = currentStep.nextElementSibling;
                
                if (nextStep && nextStep.classList.contains('calculator-step')) {
                    currentStep.classList.remove('active');
                    currentStep.style.display = 'none';
                    nextStep.classList.add('active');
                    nextStep.style.display = 'block';
                    
                    if (nextStep.id === 'step-3') {
                        calculateFinalPrice();
                    }
                }
            });
        });

        document.querySelectorAll('.prev-step').forEach(btn => {
            btn.addEventListener('click', function() {
                const currentStep = document.querySelector('.calculator-step.active');
                const prevStep = currentStep.previousElementSibling;
                
                if (prevStep && prevStep.classList.contains('calculator-step')) {
                    currentStep.classList.remove('active');
                    currentStep.style.display = 'none';
                    prevStep.classList.add('active');
                    prevStep.style.display = 'block';
                }
            });
        });

        // Restart calculator
        document.querySelector('.restart-calculator').addEventListener('click', function() {
            // Reset selections
            selectedServices = [];
            selectedComplexity = null;
            selectedTimeline = null;
            
            // Reset UI
            document.querySelectorAll('.service-option, .complexity-option, .timeline-option').forEach(opt => {
                opt.classList.remove('selected');
                opt.style.borderColor = '';
                opt.style.backgroundColor = '';
            });
            
            // Go back to step 1
            document.querySelectorAll('.calculator-step').forEach(step => {
                step.classList.remove('active');
                step.style.display = 'none';
            });
            
            document.getElementById('step-1').classList.add('active');
            document.getElementById('step-1').style.display = 'block';
            
            updateStepButton();
        });

        function updateStepButton() {
            const step1Button = document.querySelector('#step-1 .next-step');
            const step2Button = document.querySelector('#step-2 .next-step');
            
            if (step1Button) {
                step1Button.disabled = selectedServices.length === 0;
            }
            
            if (step2Button) {
                step2Button.disabled = !selectedComplexity || !selectedTimeline;
            }
        }

        function calculateFinalPrice() {
            let total = 0;
            
            // Calculate base price from services
            selectedServices.forEach(service => {
                total += service.price;
            });
            
            // Apply complexity multiplier
            if (selectedComplexity) {
                total *= selectedComplexity.multiplier;
            }
            
            // Apply timeline multiplier
            if (selectedTimeline) {
                total *= selectedTimeline.multiplier;
            }
            
            // Update price display
            document.getElementById('final-price').textContent = '₩' + total.toLocaleString();
            
            // Generate summary
            generateSummary(total);
        }

        function generateSummary(total) {
            const summary = document.getElementById('project-summary');
            let summaryHTML = '';
            
            // Services
            summaryHTML += '<div><strong><%- __("calculator.result.selected_services") %>:</strong></div>';
            selectedServices.forEach(service => {
                summaryHTML += `<div class="ml-4">• ${getServiceName(service.service)} (₩${service.price.toLocaleString()})</div>`;
            });
            
            // Complexity
            if (selectedComplexity) {
                summaryHTML += `<div class="mt-2"><strong><%- __("calculator.result.complexity") %>:</strong> ${getComplexityName(selectedComplexity.value)}</div>`;
            }
            
            // Timeline
            if (selectedTimeline) {
                summaryHTML += `<div><strong><%- __("calculator.result.timeline") %>:</strong> ${getTimelineName(selectedTimeline.value)}</div>`;
            }
            
            summary.innerHTML = summaryHTML;
        }

        function getServiceName(service) {
            const names = {
                web: '<%- __("services.web.title") %>',
                mobile: '<%- __("services.mobile.title") %>',
                design: '<%- __("services.design.title") %>',
                marketing: '<%- __("services.marketing.title") %>'
            };
            return names[service] || service;
        }

        function getComplexityName(complexity) {
            const names = {
                simple: '<%- __("calculator.complexity.simple") %>',
                medium: '<%- __("calculator.complexity.medium") %>',
                complex: '<%- __("calculator.complexity.complex") %>'
            };
            return names[complexity] || complexity;
        }

        function getTimelineName(timeline) {
            const names = {
                standard: '<%- __("calculator.timeline.standard") %>',
                rush: '<%- __("calculator.timeline.rush") %>',
                extended: '<%- __("calculator.timeline.extended") %>'
            };
            return names[timeline] || timeline;
        }
    </script>
</body>
</html>