<!-- Services page content starts here -->
    <link href="/css/fixes.css" rel="stylesheet">


    <!-- Services Hero Section - Компактный -->
    <section class="hero-section-compact bg-gradient-to-br from-blue-600 via-purple-600 to-blue-800">
        <div class="container mx-auto px-4 py-16 text-center text-white">
            <h1 class="text-4xl md:text-5xl font-bold mb-4" data-aos="fade-up">
                <%- __('services.hero.title') %> <span class="text-yellow-300"><%- __('services.hero.title_highlight') %></span>
            </h1>
            <p class="text-xl md:text-2xl mb-8 opacity-90" data-aos="fade-up" data-aos-delay="200">
                <%- __('services.hero.subtitle') %>
            </p>
        </div>
    </section>

    <!-- Services Grid -->
    <section class="section-padding">
        <div class="container mx-auto px-4">
            <div class="space-y-12">
                <% if (services && services.length > 0) { %>
                    <% services.forEach((service, index) => { %>
                        <div class="relative overflow-hidden rounded-3xl shadow-2xl hover:shadow-3xl transition-all duration-500 transform hover:-translate-y-1" 
                             data-aos="fade-up" 
                             data-aos-delay="<%= index * 150 %>">
                            
                            <!-- Background with Gradient -->
                            <div class="relative h-96 bg-gradient-to-r 
                                <% if (index % 4 === 0) { %>from-blue-600 to-purple-600<% } %>
                                <% if (index % 4 === 1) { %>from-green-500 to-teal-600<% } %>
                                <% if (index % 4 === 2) { %>from-purple-600 to-pink-600<% } %>
                                <% if (index % 4 === 3) { %>from-orange-500 to-red-600<% } %>
                                overflow-hidden">
                                
                                <!-- Service Image/Icon Area -->
                                <div class="absolute left-0 top-0 w-1/2 h-full flex items-center justify-center">
                                    <div class="relative z-10">
                                        <!-- Large service icon -->
                                        <div class="w-32 h-32 bg-white bg-opacity-20 rounded-full flex items-center justify-center mb-6 backdrop-blur-sm">
                                            <i class="<%= service.icon || getServiceIcon(service.category) %> text-white text-6xl"></i>
                                        </div>
                                        
                                        <!-- Decorative elements -->
                                        <div class="absolute -top-8 -left-8 w-24 h-24 bg-white bg-opacity-10 rounded-full animate-pulse"></div>
                                        <div class="absolute -bottom-4 -right-4 w-16 h-16 bg-white bg-opacity-10 rounded-full animate-pulse" style="animation-delay: 1s;"></div>
                                    </div>
                                    
                                    <!-- Gradient fade to center -->
                                    <div class="absolute right-0 top-0 w-1/2 h-full bg-gradient-to-r from-transparent to-current opacity-30"></div>
                                </div>

                                <!-- Service Content Area -->
                                <div class="absolute right-0 top-0 w-1/2 h-full flex items-center">
                                    <div class="p-8 text-right w-full">
                                        
                                        <!-- Service Category Badge -->
                                        <div class="inline-block mb-4">
                                            <span class="bg-white bg-opacity-20 text-white px-4 py-2 rounded-full text-sm font-medium backdrop-blur-sm">
                                                <%= service.category %>
                                            </span>
                                        </div>

                                        <!-- Service Title -->
                                        <h3 class="text-3xl font-bold text-white mb-4 leading-tight">
                                            <%= service.name %>
                                        </h3>
                                        
                                        <!-- Service Description -->
                                        <p class="text-white text-opacity-90 mb-6 leading-relaxed text-lg">
                                            <%= service.shortDescription || service.description %>
                                        </p>

                                        <!-- Pricing -->
                                        <% if (service.pricing) { %>
                                            <div class="mb-6">
                                                <div class="text-white text-opacity-75 text-sm mb-1"><%- __('services.cards.starting_price') %></div>
                                                <div class="text-3xl font-bold text-white">
                                                    <%= service.pricing.basePrice ? service.pricing.basePrice.toLocaleString() : __('services.cards.consultation') %>
                                                    <% if (service.pricing.basePrice) { %>
                                                        <span class="text-lg text-white text-opacity-75">원~</span>
                                                    <% } %>
                                                </div>
                                            </div>
                                        <% } %>

                                        <!-- Action Buttons -->
                                        <div class="flex flex-col gap-3 items-end">
                                            <a href="/contact?service=<%= service._id %>" 
                                               class="bg-white text-gray-900 px-6 py-3 rounded-xl font-semibold hover:bg-gray-100 transition-all duration-300 transform hover:scale-105 shadow-lg">
                                                <%- __('services.cards.contact') %>
                                            </a>
                                            <a href="/calculator?service=<%= service._id %>" 
                                               class="border-2 border-white text-white px-6 py-3 rounded-xl font-semibold hover:bg-white hover:text-gray-900 transition-all duration-300 transform hover:scale-105">
                                                <%- __('services.cards.calculate_cost') %>
                                            </a>
                                        </div>

                                        <!-- Featured Badge -->
                                        <% if (service.featured) { %>
                                            <div class="absolute top-4 right-4">
                                                <span class="bg-yellow-400 text-gray-900 px-3 py-1 rounded-full text-sm font-bold shadow-lg">
                                                    <i class="fas fa-star"></i> <%- __('services.cards.popular') %>
                                                </span>
                                            </div>
                                        <% } %>
                                    </div>
                                </div>
                            </div>
                        </div>
                    <% }) %>
                <% } else { %>
                    <div class="text-center py-12">
                        <i class="fas fa-cogs text-6xl text-gray-300 mb-4"></i>
                        <h3 class="text-2xl font-bold text-gray-500 mb-2"><%- __('services.cards.coming_soon') %></h3>
                        <p class="text-gray-400"><%- __('services.cards.coming_soon_desc') %></p>
                    </div>
                <% } %>
            </div>
        </div>
    </section>

    <script>
        // Function to get service icon based on category
        function getServiceIcon(category) {
            const iconMap = {
                'web-development': 'fas fa-globe',
                'mobile-development': 'fas fa-mobile-alt',
                'ui-ux-design': 'fas fa-paint-brush',
                'digital-marketing': 'fas fa-bullhorn',
                'consulting': 'fas fa-lightbulb',
                'default': 'fas fa-cog'
            };
            return iconMap[category] || iconMap['default'];
        }
    </script>

    <!-- Process Section -->
    <section class="section-padding bg-gray-50">
        <div class="container mx-auto px-4">
            <div class="text-center mb-16" data-aos="fade-up">
                <h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-4">
                    <%- __('services.process.title') %>
                </h2>
                <p class="text-lg text-white text-center mb-12 max-w-3xl mx-auto">
                    <%- __('services.process.subtitle') %>
                </p>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
                <!-- Step 1 -->
                <div class="text-center" data-aos="fade-up" data-aos-delay="100">
                    <div class="w-20 h-20 bg-blue-600 rounded-full flex items-center justify-center mx-auto mb-6">
                        <span class="text-white text-2xl font-bold">1</span>
                    </div>
                    <h3 class="text-xl font-bold text-gray-900 mb-4">상담 및 기획</h3>
                    <p class="text-white text-center">
                        고객의 요구사항을 정확히 파악하고 
                        최적의 솔루션을 기획합니다
                    </p>
                </div>

                <!-- Step 2 -->
                <div class="text-center" data-aos="fade-up" data-aos-delay="200">
                    <div class="w-20 h-20 bg-purple-600 rounded-full flex items-center justify-center mx-auto mb-6">
                        <span class="text-white text-2xl font-bold">2</span>
                    </div>
                    <h3 class="text-xl font-bold text-gray-900 mb-4">디자인 및 설계</h3>
                    <p class="text-white text-center">
                        사용자 중심의 직관적인 디자인과 
                        견고한 시스템 아키텍처를 설계합니다
                    </p>
                </div>

                <!-- Step 3 -->
                <div class="text-center" data-aos="fade-up" data-aos-delay="300">
                    <div class="w-20 h-20 bg-green-600 rounded-full flex items-center justify-center mx-auto mb-6">
                        <span class="text-white text-2xl font-bold">3</span>
                    </div>
                    <h3 class="text-xl font-bold text-gray-900 mb-4">개발 및 구현</h3>
                    <p class="text-white text-center">
                        최신 기술과 모범 사례를 활용하여 
                        효율적이고 확장 가능한 솔루션을 개발합니다
                    </p>
                </div>

                <!-- Step 4 -->
                <div class="text-center" data-aos="fade-up" data-aos-delay="400">
                    <div class="w-20 h-20 bg-orange-600 rounded-full flex items-center justify-center mx-auto mb-6">
                        <span class="text-white text-2xl font-bold">4</span>
                    </div>
                    <h3 class="text-xl font-bold text-gray-900 mb-4">테스트 및 배포</h3>
                    <p class="text-gray-600">
                        철저한 테스트를 통해 품질을 보장하고 
                        안정적인 배포를 진행합니다
                    </p>
                </div>
            </div>
        </div>
    </section>

    <!-- Why Choose Us Section -->
    <section class="section-padding">
        <div class="container mx-auto px-4">
            <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
                <!-- Content -->
                <div data-aos="fade-right">
                    <h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-6">
                        왜 SmartSolTech를 선택해야 할까요?
                    </h2>
                    
                    <div class="space-y-6">
                        <!-- Feature 1 -->
                        <div class="flex items-start">
                            <div class="w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center mr-4 flex-shrink-0">
                                <i class="fas fa-rocket text-blue-600 text-xl"></i>
                            </div>
                            <div>
                                <h3 class="text-xl font-semibold text-gray-900 mb-2">최신 기술 활용</h3>
                                <p class="text-gray-600">
                                    항상 최신 기술 트렌드를 파악하고, 검증된 기술 스택을 활용하여 
                                    미래 지향적인 솔루션을 제공합니다.
                                </p>
                            </div>
                        </div>

                        <!-- Feature 2 -->
                        <div class="flex items-start">
                            <div class="w-12 h-12 bg-green-100 rounded-full flex items-center justify-center mr-4 flex-shrink-0">
                                <i class="fas fa-users text-green-600 text-xl"></i>
                            </div>
                            <div>
                                <h3 class="text-xl font-semibold text-gray-900 mb-2">전문가 팀</h3>
                                <p class="text-gray-600">
                                    각 분야의 전문가들로 구성된 팀이 협력하여 
                                    최고 품질의 결과물을 보장합니다.
                                </p>
                            </div>
                        </div>

                        <!-- Feature 3 -->
                        <div class="flex items-start">
                            <div class="w-12 h-12 bg-purple-100 rounded-full flex items-center justify-center mr-4 flex-shrink-0">
                                <i class="fas fa-clock text-purple-600 text-xl"></i>
                            </div>
                            <div>
                                <h3 class="text-xl font-semibold text-gray-900 mb-2">빠른 대응</h3>
                                <p class="text-gray-600">
                                    신속한 커뮤니케이션과 효율적인 프로젝트 관리로 
                                    정해진 일정 내에 프로젝트를 완료합니다.
                                </p>
                            </div>
                        </div>

                        <!-- Feature 4 -->
                        <div class="flex items-start">
                            <div class="w-12 h-12 bg-orange-100 rounded-full flex items-center justify-center mr-4 flex-shrink-0">
                                <i class="fas fa-headset text-orange-600 text-xl"></i>
                            </div>
                            <div>
                                <h3 class="text-xl font-semibold text-gray-900 mb-2">지속적인 지원</h3>
                                <p class="text-gray-600">
                                    프로젝트 완료 후에도 지속적인 유지보수와 기술 지원을 
                                    통해 장기적인 파트너십을 유지합니다.
                                </p>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Image/Visual -->
                <div class="relative" data-aos="fade-left">
                    <div class="bg-gradient-to-br from-blue-100 to-purple-100 rounded-2xl p-8 h-96 flex items-center justify-center">
                        <div class="text-center">
                            <i class="fas fa-award text-6xl text-blue-600 mb-4"></i>
                            <h3 class="text-2xl font-bold text-gray-900 mb-2">품질 보장</h3>
                            <p class="text-gray-600">
                                고객 만족을 위한<br>
                                최고 품질의 서비스
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- CTA Section -->
    <section class="section-padding bg-gradient-to-r from-blue-600 to-purple-600 text-white">
        <div class="container mx-auto px-4 text-center">
            <h2 class="text-3xl md:text-4xl font-bold mb-6" data-aos="fade-up">
                프로젝트를 시작할 준비가 되셨나요?
            </h2>
            <p class="text-xl mb-8 opacity-90" data-aos="fade-up" data-aos-delay="200">
                무료 상담을 통해 최적의 솔루션을 제안해드리겠습니다
            </p>
            <div class="flex flex-col sm:flex-row gap-4 justify-center" data-aos="fade-up" data-aos-delay="400">
                <a href="/contact" class="bg-white text-blue-600 px-8 py-3 rounded-full hover:bg-gray-100 transition-colors font-semibold">
                    무료 상담 신청
                </a>
                <a href="/calculator" class="border-2 border-white text-white px-8 py-3 rounded-full hover:bg-white hover:text-blue-600 transition-colors font-semibold">
                    비용 계산하기
                </a>
                <a href="/portfolio" class="border-2 border-white text-white px-8 py-3 rounded-full hover:bg-white hover:text-blue-600 transition-colors font-semibold">
                    포트폴리오 보기
                </a>
            </div>
        </div>
    </section>

<!-- Services page content ends here -->

<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
<script src="/js/main.js"></script>