<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>연락처 - SmartSolTech</title>
    
    <!-- SEO Meta Tags -->
    <meta name="description" content="SmartSolTech에 연락하세요. 프로젝트 문의, 상담 요청, 파트너십 제안 등 언제든지 연락 주시면 빠르게 답변드리겠습니다.">
    <meta name="keywords" content="연락처, 문의, 상담, 프로젝트, SmartSolTech, 컨설팅">
    
    <!-- Open Graph -->
    <meta property="og:title" content="연락처 - SmartSolTech">
    <meta property="og:description" content="SmartSolTech에 연락하세요. 프로젝트 문의 및 상담 요청">
    <meta property="og:type" content="website">
    
    <!-- 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="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
    <link href="/css/main.css" rel="stylesheet">
</head>
<body>
    <%- include('partials/navigation') %>

    <!-- Contact Hero Section -->
    <section class="hero-section bg-gradient-to-br from-blue-600 via-purple-600 to-blue-800 pt-20">
        <div class="container mx-auto px-4 py-20 text-center text-white">
            <h1 class="text-5xl md:text-6xl font-bold mb-6" data-aos="fade-up">
                <span class="text-yellow-300">연락처</span>
            </h1>
            <p class="text-xl md:text-2xl mb-8 opacity-90" data-aos="fade-up" data-aos-delay="200">
                프로젝트 문의부터 기술 상담까지, 언제든 연락주세요
            </p>
        </div>
    </section>

    <!-- Contact Content -->
    <section class="section-padding">
        <div class="container mx-auto px-4">
            <div class="grid grid-cols-1 lg:grid-cols-2 gap-12">
                
                <!-- Contact Form -->
                <div class="bg-white rounded-2xl shadow-xl p-8" data-aos="fade-right">
                    <div class="mb-8">
                        <h2 class="text-3xl font-bold text-gray-900 mb-4">
                            프로젝트 문의하기
                        </h2>
                        <p class="text-gray-600">
                            아래 양식을 작성해 주시면 24시간 내에 답변드리겠습니다.
                        </p>
                    </div>

                    <form id="contact-form" class="space-y-6">
                        <!-- Name & Email Row -->
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                            <div>
                                <label for="name" class="block text-sm font-medium text-gray-700 mb-2">
                                    이름 *
                                </label>
                                <input type="text" 
                                       id="name" 
                                       name="name" 
                                       required
                                       class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors"
                                       placeholder="홍길동">
                            </div>
                            <div>
                                <label for="email" class="block text-sm font-medium text-gray-700 mb-2">
                                    이메일 *
                                </label>
                                <input type="email" 
                                       id="email" 
                                       name="email" 
                                       required
                                       class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors"
                                       placeholder="example@email.com">
                            </div>
                        </div>

                        <!-- Phone & Company -->
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                            <div>
                                <label for="phone" class="block text-sm font-medium text-gray-700 mb-2">
                                    전화번호
                                </label>
                                <input type="tel" 
                                       id="phone" 
                                       name="phone"
                                       class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors"
                                       placeholder="010-1234-5678">
                            </div>
                            <div>
                                <label for="company" class="block text-sm font-medium text-gray-700 mb-2">
                                    회사명
                                </label>
                                <input type="text" 
                                       id="company" 
                                       name="company"
                                       class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors"
                                       placeholder="회사명을 입력하세요">
                            </div>
                        </div>

                        <!-- Service Type -->
                        <div>
                            <label for="service" class="block text-sm font-medium text-gray-700 mb-2">
                                관심 있는 서비스 *
                            </label>
                            <select id="service" 
                                    name="service" 
                                    required
                                    class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors">
                                <option value="">서비스를 선택해 주세요</option>
                                <option value="web-development">웹 개발</option>
                                <option value="mobile-app">모바일 앱 개발</option>
                                <option value="ui-ux-design">UI/UX 디자인</option>
                                <option value="branding">브랜딩</option>
                                <option value="digital-marketing">디지털 마케팅</option>
                                <option value="consulting">기술 컨설팅</option>
                                <option value="other">기타</option>
                            </select>
                        </div>

                        <!-- Budget -->
                        <div>
                            <label for="budget" class="block text-sm font-medium text-gray-700 mb-2">
                                예산 범위
                            </label>
                            <select id="budget" 
                                    name="budget"
                                    class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors">
                                <option value="">예산을 선택해 주세요</option>
                                <option value="under-500">50만원 미만</option>
                                <option value="500-1000">50-100만원</option>
                                <option value="1000-3000">100-300만원</option>
                                <option value="3000-5000">300-500만원</option>
                                <option value="5000-10000">500-1000만원</option>
                                <option value="over-10000">1000만원 이상</option>
                                <option value="discuss">상담 후 결정</option>
                            </select>
                        </div>

                        <!-- Message -->
                        <div>
                            <label for="message" class="block text-sm font-medium text-gray-700 mb-2">
                                프로젝트 상세 내용 *
                            </label>
                            <textarea id="message" 
                                      name="message" 
                                      required
                                      rows="6"
                                      class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors resize-vertical"
                                      placeholder="프로젝트에 대한 자세한 내용, 요구사항, 일정 등을 알려주세요..."></textarea>
                        </div>

                        <!-- Privacy Agreement -->
                        <div class="flex items-start">
                            <input type="checkbox" 
                                   id="privacy" 
                                   name="privacy" 
                                   required
                                   class="mt-1 mr-3 h-4 w-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500">
                            <label for="privacy" class="text-sm text-gray-600">
                                개인정보 수집 및 이용에 동의합니다. 
                                <a href="/privacy" class="text-blue-600 hover:underline">개인정보처리방침 보기</a>
                            </label>
                        </div>

                        <!-- Submit Button -->
                        <button type="submit" 
                                class="w-full bg-gradient-to-r from-blue-600 to-purple-600 text-white py-4 px-6 rounded-lg font-semibold hover:from-blue-700 hover:to-purple-700 transition-all duration-300 transform hover:scale-105 focus:ring-4 focus:ring-blue-300">
                            <i class="fas fa-paper-plane mr-2"></i>
                            문의 보내기
                        </button>
                    </form>

                    <!-- Form Status Messages -->
                    <div id="form-success" class="hidden mt-6 p-4 bg-green-100 border border-green-400 text-green-700 rounded-lg">
                        <i class="fas fa-check-circle mr-2"></i>
                        문의가 성공적으로 접수되었습니다. 빠른 시일 내에 답변드리겠습니다.
                    </div>

                    <div id="form-error" class="hidden mt-6 p-4 bg-red-100 border border-red-400 text-red-700 rounded-lg">
                        <i class="fas fa-exclamation-circle mr-2"></i>
                        <span id="error-message">문의 전송 중 오류가 발생했습니다. 다시 시도해 주세요.</span>
                    </div>
                </div>

                <!-- Contact Information -->
                <div class="space-y-8" data-aos="fade-left">
                    
                    <!-- Contact Cards -->
                    <div class="bg-white rounded-2xl shadow-xl p-8">
                        <h3 class="text-2xl font-bold text-gray-900 mb-6">
                            연락처 정보
                        </h3>
                        
                        <div class="space-y-6">
                            <!-- Email -->
                            <div class="flex items-center">
                                <div class="w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center mr-4">
                                    <i class="fas fa-envelope text-blue-600 text-lg"></i>
                                </div>
                                <div>
                                    <h4 class="font-semibold text-gray-900">이메일</h4>
                                    <a href="mailto:info@smartsoltech.kr" class="text-blue-600 hover:underline">
                                        info@smartsoltech.kr
                                    </a>
                                </div>
                            </div>

                            <!-- Phone -->
                            <div class="flex items-center">
                                <div class="w-12 h-12 bg-green-100 rounded-full flex items-center justify-center mr-4">
                                    <i class="fas fa-phone text-green-600 text-lg"></i>
                                </div>
                                <div>
                                    <h4 class="font-semibold text-gray-900">전화번호</h4>
                                    <a href="tel:+82-10-1234-5678" class="text-green-600 hover:underline">
                                        +82-10-1234-5678
                                    </a>
                                </div>
                            </div>

                            <!-- Location -->
                            <div class="flex items-center">
                                <div class="w-12 h-12 bg-purple-100 rounded-full flex items-center justify-center mr-4">
                                    <i class="fas fa-map-marker-alt text-purple-600 text-lg"></i>
                                </div>
                                <div>
                                    <h4 class="font-semibold text-gray-900">주소</h4>
                                    <p class="text-gray-600">Seoul, South Korea</p>
                                </div>
                            </div>

                            <!-- Business Hours -->
                            <div class="flex items-center">
                                <div class="w-12 h-12 bg-orange-100 rounded-full flex items-center justify-center mr-4">
                                    <i class="fas fa-clock text-orange-600 text-lg"></i>
                                </div>
                                <div>
                                    <h4 class="font-semibold text-gray-900">운영시간</h4>
                                    <p class="text-gray-600">평일 09:00 - 18:00</p>
                                    <p class="text-gray-600 text-sm">주말 및 공휴일 휴무</p>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Social Media -->
                    <div class="bg-white rounded-2xl shadow-xl p-8">
                        <h3 class="text-2xl font-bold text-gray-900 mb-6">
                            소셜 미디어
                        </h3>
                        
                        <div class="grid grid-cols-2 gap-4">
                            <a href="#" class="flex items-center justify-center p-4 bg-blue-50 rounded-lg hover:bg-blue-100 transition-colors group">
                                <i class="fab fa-facebook text-blue-600 text-2xl group-hover:scale-110 transition-transform"></i>
                            </a>
                            <a href="#" class="flex items-center justify-center p-4 bg-blue-50 rounded-lg hover:bg-blue-100 transition-colors group">
                                <i class="fab fa-twitter text-blue-400 text-2xl group-hover:scale-110 transition-transform"></i>
                            </a>
                            <a href="#" class="flex items-center justify-center p-4 bg-blue-50 rounded-lg hover:bg-blue-100 transition-colors group">
                                <i class="fab fa-linkedin text-blue-700 text-2xl group-hover:scale-110 transition-transform"></i>
                            </a>
                            <a href="#" class="flex items-center justify-center p-4 bg-pink-50 rounded-lg hover:bg-pink-100 transition-colors group">
                                <i class="fab fa-instagram text-pink-600 text-2xl group-hover:scale-110 transition-transform"></i>
                            </a>
                        </div>
                    </div>

                    <!-- Quick Actions -->
                    <div class="bg-gradient-to-br from-blue-600 to-purple-600 rounded-2xl shadow-xl p-8 text-white">
                        <h3 class="text-2xl font-bold mb-6">빠른 시작</h3>
                        
                        <div class="space-y-4">
                            <a href="/calculator" class="block bg-white bg-opacity-20 backdrop-blur-sm rounded-lg p-4 hover:bg-opacity-30 transition-all">
                                <div class="flex items-center">
                                    <i class="fas fa-calculator text-2xl mr-4"></i>
                                    <div>
                                        <h4 class="font-semibold">비용 계산하기</h4>
                                        <p class="text-sm opacity-80">프로젝트 예상 비용을 즉시 확인</p>
                                    </div>
                                </div>
                            </a>
                            
                            <a href="/portfolio" class="block bg-white bg-opacity-20 backdrop-blur-sm rounded-lg p-4 hover:bg-opacity-30 transition-all">
                                <div class="flex items-center">
                                    <i class="fas fa-folder-open text-2xl mr-4"></i>
                                    <div>
                                        <h4 class="font-semibold">포트폴리오 보기</h4>
                                        <p class="text-sm opacity-80">우리의 작업 사례 확인</p>
                                    </div>
                                </div>
                            </a>
                            
                            <a href="/services" class="block bg-white bg-opacity-20 backdrop-blur-sm rounded-lg p-4 hover:bg-opacity-30 transition-all">
                                <div class="flex items-center">
                                    <i class="fas fa-cogs text-2xl mr-4"></i>
                                    <div>
                                        <h4 class="font-semibold">서비스 살펴보기</h4>
                                        <p class="text-sm opacity-80">제공하는 서비스 정보</p>
                                    </div>
                                </div>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- FAQ Section -->
    <section class="section-padding bg-gray-50">
        <div class="container mx-auto px-4">
            <div class="text-center mb-12" data-aos="fade-up">
                <h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-4">
                    자주 묻는 질문
                </h2>
                <p class="text-xl text-gray-600">
                    프로젝트와 관련된 궁금한 점들을 확인해보세요
                </p>
            </div>

            <div class="max-w-4xl mx-auto">
                <div class="space-y-4" data-aos="fade-up">
                    <!-- FAQ Item 1 -->
                    <div class="bg-white rounded-lg shadow-md overflow-hidden">
                        <button class="faq-button w-full text-left p-6 focus:outline-none hover:bg-gray-50 transition-colors" type="button">
                            <div class="flex justify-between items-center">
                                <h3 class="text-lg font-semibold text-gray-900">프로젝트는 얼마나 걸리나요?</h3>
                                <i class="fas fa-chevron-down text-gray-400 transform transition-transform"></i>
                            </div>
                        </button>
                        <div class="faq-content hidden px-6 pb-6">
                            <p class="text-gray-600">
                                프로젝트 규모와 복잡도에 따라 다르지만, 일반적으로 웹사이트는 2-8주, 모바일 앱은 4-16주, 
                                UI/UX 디자인은 1-6주 정도 소요됩니다. 정확한 일정은 상담을 통해 안내드립니다.
                            </p>
                        </div>
                    </div>

                    <!-- FAQ Item 2 -->
                    <div class="bg-white rounded-lg shadow-md overflow-hidden">
                        <button class="faq-button w-full text-left p-6 focus:outline-none hover:bg-gray-50 transition-colors" type="button">
                            <div class="flex justify-between items-center">
                                <h3 class="text-lg font-semibold text-gray-900">비용은 어떻게 책정되나요?</h3>
                                <i class="fas fa-chevron-down text-gray-400 transform transition-transform"></i>
                            </div>
                        </button>
                        <div class="faq-content hidden px-6 pb-6">
                            <p class="text-gray-600">
                                프로젝트의 범위, 기능, 디자인 복잡도, 개발 기간 등을 종합적으로 고려하여 책정합니다. 
                                온라인 계산기를 통해 예상 비용을 확인하시거나, 직접 상담을 통해 정확한 견적을 받아보세요.
                            </p>
                        </div>
                    </div>

                    <!-- FAQ Item 3 -->
                    <div class="bg-white rounded-lg shadow-md overflow-hidden">
                        <button class="faq-button w-full text-left p-6 focus:outline-none hover:bg-gray-50 transition-colors" type="button">
                            <div class="flex justify-between items-center">
                                <h3 class="text-lg font-semibold text-gray-900">유지보수는 어떻게 진행되나요?</h3>
                                <i class="fas fa-chevron-down text-gray-400 transform transition-transform"></i>
                            </div>
                        </button>
                        <div class="faq-content hidden px-6 pb-6">
                            <p class="text-gray-600">
                                프로젝트 완료 후 6개월간 무료 유지보수를 제공합니다. 이후에는 월 단위 또는 연 단위 
                                유지보수 계약을 통해 지속적인 관리와 업데이트를 지원합니다.
                            </p>
                        </div>
                    </div>

                    <!-- FAQ Item 4 -->
                    <div class="bg-white rounded-lg shadow-md overflow-hidden">
                        <button class="faq-button w-full text-left p-6 focus:outline-none hover:bg-gray-50 transition-colors" type="button">
                            <div class="flex justify-between items-center">
                                <h3 class="text-lg font-semibold text-gray-900">원격으로도 작업이 가능한가요?</h3>
                                <i class="fas fa-chevron-down text-gray-400 transform transition-transform"></i>
                            </div>
                        </button>
                        <div class="faq-content hidden px-6 pb-6">
                            <p class="text-gray-600">
                                네, 전 세계 어디서든 원격으로 프로젝트를 진행할 수 있습니다. 
                                온라인 미팅, 협업 도구, 프로젝트 관리 시스템을 통해 효율적으로 소통하며 작업합니다.
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

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

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

    <script>
        // Contact form handling
        document.addEventListener('DOMContentLoaded', function() {
            const contactForm = document.getElementById('contact-form');
            const successMessage = document.getElementById('form-success');
            const errorMessage = document.getElementById('form-error');
            const errorText = document.getElementById('error-message');

            contactForm.addEventListener('submit', async function(e) {
                e.preventDefault();
                
                const submitButton = contactForm.querySelector('button[type="submit"]');
                const originalText = submitButton.innerHTML;
                
                // Show loading state
                submitButton.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i> 전송 중...';
                submitButton.disabled = true;

                try {
                    const formData = new FormData(contactForm);
                    const response = await fetch('/contact', {
                        method: 'POST',
                        body: formData
                    });

                    const result = await response.json();

                    if (result.success) {
                        successMessage.classList.remove('hidden');
                        errorMessage.classList.add('hidden');
                        contactForm.reset();
                        
                        // Scroll to success message
                        successMessage.scrollIntoView({ behavior: 'smooth' });
                    } else {
                        throw new Error(result.message || '전송에 실패했습니다.');
                    }
                } catch (error) {
                    errorText.textContent = error.message;
                    errorMessage.classList.remove('hidden');
                    successMessage.classList.add('hidden');
                    
                    // Scroll to error message
                    errorMessage.scrollIntoView({ behavior: 'smooth' });
                } finally {
                    // Restore button state
                    submitButton.innerHTML = originalText;
                    submitButton.disabled = false;
                }
            });

            // FAQ functionality
            const faqButtons = document.querySelectorAll('.faq-button');
            
            faqButtons.forEach(button => {
                button.addEventListener('click', function() {
                    const content = this.nextElementSibling;
                    const icon = this.querySelector('i');
                    
                    // Close all other FAQs
                    faqButtons.forEach(otherButton => {
                        if (otherButton !== this) {
                            const otherContent = otherButton.nextElementSibling;
                            const otherIcon = otherButton.querySelector('i');
                            
                            otherContent.classList.add('hidden');
                            otherIcon.classList.remove('rotate-180');
                        }
                    });
                    
                    // Toggle current FAQ
                    if (content.classList.contains('hidden')) {
                        content.classList.remove('hidden');
                        icon.classList.add('rotate-180');
                    } else {
                        content.classList.add('hidden');
                        icon.classList.remove('rotate-180');
                    }
                });
            });
        });
    </script>
</body>
</html>