// Plan Details Data
const planDetails = {
    basic: {
        name: '베이직',
        price: '3,300,000',
        description: '1개 언어와 1개 사이트 제작',
        sections: [
            {
                title: '기본 구성',
                items: ['1개 언어 지원', '1개 웹서버 제공', '반응형 웹 제작', '기본 디자인 제공']
            },
            {
                title: '인증 및 보안',
                items: ['이메일 서버 제공', '이메일 인증 프로그래밍', '회원가입 자동화']
            },
            {
                title: '리워드 기능',
                items: ['회원 정책에 따른 등급 자동 산정', '실시간 리워드 계산', '일/주/월별 자동 지급', '기본 리워드 정책 설정']
            },
            {
                title: '지원 및 유지보수',
                items: ['기본 기술 지원', '월 1회 업데이트', '버그 수정']
            }
        ]
    },
    standard: {
        name: '스탠다드',
        price: '4,900,000',
        description: '내부 지갑 및 입출금 관리',
        sections: [
            {
                title: '기본 구성',
                items: ['1개 언어 지원', '1개 사이트 제작', '1개 웹서버 제공', '베이직 모든 기능 포함']
            },
            {
                title: '지갑 시스템',
                items: ['입금 전용 지갑', '출금 가능 지갑', '적립 지갑', '포인트 지갑', '자산 지갑']
            },
            {
                title: '입출금 관리',
                items: ['입출금 수동 승인 프로그래밍', '출금 정책에 따른 출금 처리', '입출금 히스토리 검색 기능', '거래 내역 상세 조회']
            },
            {
                title: '고급 리워드 기능',
                items: ['추천 및 후원 계보도 생성', '추천인 보상 자동 계산', '다단계 리워드 정책 설정', '조건부 리워드 지급']
            },
            {
                title: '지원 및 유지보수',
                items: ['우선 기술 지원', '월 2회 업데이트', '성능 최적화', '보안 패치']
            }
        ]
    },
    deluxe: {
        name: '디럭스',
        price: '9,900,000',
        description: '2개 언어와 맞춤 디자인',
        sections: [
            {
                title: '기본 구성',
                items: ['2개 언어 지원', '2개 사이트 제작', '1개 웹서버 제공', '스탠다드 모든 기능 포함', '글로벌 CDN 제공']
            },
            {
                title: '디자인 및 개발',
                items: ['디자인 맞춤 제작', 'UI/UX 커스터마이징', '브랜드 아이덴티티 반영', '고급 반응형 웹']
            },
            {
                title: 'API 및 연동',
                items: ['연동 API 모듈 프로그래밍', '문자 인증 API 연동', '쇼핑 사이트 연동', '게임 사이트 연동', '제3자 서비스 통합']
            },
            {
                title: '고급 기능',
                items: ['다국어 관리 시스템', '지역별 설정 관리', '고급 분석 대시보드', '맞춤형 리포트 생성']
            },
            {
                title: '지원 및 유지보수',
                items: ['24/5 기술 지원', '주 1회 업데이트', '전담 기술 담당자', '성능 모니터링', '정기 컨설팅']
            }
        ]
    },
    premium: {
        name: '프리미엄',
        price: '25,000,000',
        description: '무제한 확장 및 앱 개발',
        sections: [
            {
                title: '기본 구성',
                items: ['무제한 언어 지원', '2개 사이트 제작', '최대 5개 웹서버 제공', '디럭스 모든 기능 포함', '글로벌 CDN 제공']
            },
            {
                title: '자동화 시스템',
                items: ['자동 입출금 프로그래밍', '지갑 서버 자동 관리', '실시간 자동 이체', '스마트 컨트랙트 연동', '블록체인 통합']
            },
            {
                title: '앱 개발',
                items: ['iOS 앱 개발 지원', 'Android 앱 개발 지원', '앱 배포 지원', '푸시 알림 시스템', '오프라인 기능']
            },
            {
                title: '고급 기능',
                items: ['AI 기반 리워드 추천', '머신러닝 사용자 분석', '고급 보안 기능', '다중 통화 지원', '실시간 환율 적용']
            },
            {
                title: '프리미엄 지원',
                items: ['24/7 기술 지원', '일일 업데이트', '전담 개발팀 배정', '월간 전략 컨설팅', '우선 기능 개발', 'SLA 보장']
            }
        ]
    }
};

// Mobile Menu Toggle
$(document).ready(function() {
    const $mobileMenuBtn = $('#mobileMenuBtn');
    const $mobileNav = $('#mobileNav');

    $mobileMenuBtn.on('click', function() {
        $mobileNav.toggleClass('active');
        $mobileMenuBtn.find('span').toggleClass('active');
    });

    // Close mobile menu when clicking on a link
    $mobileNav.find('a').on('click', function() {
        $mobileNav.removeClass('active');
        $mobileMenuBtn.find('span').removeClass('active');
    });

    // Plan Modal
    const $modal = $('#planModal');
    const $modalBody = $('#modalBody');
    const $modalClose = $('.modal-close');

    // Open modal
    $('.plan-btn[data-plan]').on('click', function(e) {
        e.preventDefault();
        const planKey = $(this).data('plan');
        const plan = planDetails[planKey];

        if (plan) {
            let modalContent = `
                <h2 style="font-size: 1.75rem; font-weight: 700; margin-bottom: 0.5rem;">${plan.name}</h2>
                <p style="color: #64748b; margin-bottom: 1rem;">${plan.description}</p>
                <div style="margin-bottom: 1.5rem; padding-bottom: 1.5rem; border-bottom: 1px solid #e2e8f0;">
                    <span style="font-size: 2rem; font-weight: 700; color: #1e40af;">${plan.price}</span>
                    <span style="color: #64748b; margin-left: 0.5rem;">원 (VAT 포함)</span>
                </div>
            `;

            plan.sections.forEach((section, index) => {
                modalContent += `
                    <div class="modal-section" style="animation-delay: ${index * 0.1}s;">
                        <h3>${section.title}</h3>
                        <ul>
                            ${section.items.map(item => `<li>${item}</li>`).join('')}
                        </ul>
                    </div>
                `;
            });

            modalContent += `
                <div style="margin-top: 2rem; display: flex; gap: 0.75rem; flex-direction: column;">
                    <a href="http://pf.kakao.com/_Tluxgn/chat" target="_blank" class="btn btn-primary" style="width: 100%;">
                        ${plan.name} 플랜 신청하기
                    </a>
                    <button class="btn btn-outline" style="width: 100%;" onclick="$('#planModal').removeClass('active');">
                        닫기
                    </button>
                </div>
            `;

            $modalBody.html(modalContent);
            $modal.addClass('active');
        }
    });

    // Close modal
    $modalClose.on('click', function() {
        $modal.removeClass('active');
    });

    // Close modal when clicking outside
    $(window).on('click', function(event) {
        if (event.target === $modal[0]) {
            $modal.removeClass('active');
        }
    });

    // Smooth scroll for anchor links
    $('a[href^="#"]').on('click', function(e) {
        e.preventDefault();
        const target = $(this.getAttribute('href'));
        if (target.length) {
            $('html, body').stop().animate({
                scrollTop: target.offset().top - 80
            }, 1000);
        }
    });

    // Fade in animation on scroll
    const observerOptions = {
        threshold: 0.1,
        rootMargin: '0px 0px -100px 0px'
    };

    const observer = new IntersectionObserver(function(entries) {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                $(entry.target).addClass('fade-in-up');
                observer.unobserve(entry.target);
            }
        });
    }, observerOptions);

    // Observe elements
    $('.feature-card, .benefit-card, .tech-card, .pricing-card').each(function() {
        observer.observe(this);
    });

    // Add scroll event for header
    let lastScrollTop = 0;
    $(window).on('scroll', function() {
        const scrollTop = $(this).scrollTop();
        const $header = $('.header');

        if (scrollTop > 100) {
            $header.css('box-shadow', '0 2px 8px rgba(0, 0, 0, 0.1)');
        } else {
            $header.css('box-shadow', 'none');
        }

        lastScrollTop = scrollTop;
    });

    // Keyboard navigation for modal
    $(document).on('keydown', function(e) {
        if (e.key === 'Escape' && $modal.hasClass('active')) {
            $modal.removeClass('active');
        }
    });

    // Add active state to nav links based on scroll position
    $(window).on('scroll', function() {
        const scrollPosition = $(window).scrollTop();

        $('a[href^="#"]').each(function() {
            const target = $(this.getAttribute('href'));
            if (target.length) {
                const targetOffset = target.offset().top;
                if (scrollPosition >= targetOffset - 100) {
                    $('.nav-link').removeClass('active');
                    $(this).addClass('active');
                }
            }
        });
    });

    // Performance optimization: Debounce scroll events
    let scrollTimeout;
    $(window).on('scroll', function() {
        clearTimeout(scrollTimeout);
        scrollTimeout = setTimeout(function() {
            // Scroll event logic here
        }, 250);
    });
});

// Add CSS for active nav link
const style = document.createElement('style');
style.textContent = `
    .nav-link.active {
        color: #1e40af;
        font-weight: 600;
    }
`;
document.head.appendChild(style);