
//* =========================== 메인 슬라이드 */
// ① 슬라이드별 텍스트 데이터
const slideData = [
    {
        mainTit: 'FINANCE TECHNOLOGY SERVICE',
        subTitLine: '금융과 기술이 하나로 결합된',
        subTitBold: '핀테크 솔루션 전문 기업',
        btn1: { href: '/company/intro',    text: '회사소개' },
        btn2: { href: '/business/intro', text: '사업소개' },
    },
    {
        mainTit: 'PAYMENT GATEWAY SOLUTION',
        subTitLine: '안정적인 전자결제 인프라를 구축하는',
        subTitBold: 'PG 전문 컨설팅 기업',
        btn1: { href: './etc',  text: 'PG업 등록' },
        btn2: { href: '/business/pg', text: 'PG시스템' },
    },
    {
        mainTit: 'FINANCIAL LICENSE CONSULTING',
        subTitLine: '인허가 취득부터 사후 관리까지',
        subTitBold: '금융 라이선스 전문 기업',
        btn1: { href: '/business/progress', text: '사업진행현황' },
        btn2: { href: '/bbs/partnership', text: '제휴 문의' },
    },
];

setTimeout(function () {
    $('.txt_box').addClass('animate-in');
}, 100);

// ② 텍스트 업데이트 함수 (fade out → 내용 교체 → fade in)
function updateSlideText(index) {
    const d = slideData[index];
    const $box = $('#mainVisual .txt_box');

    // ① transition 없이 즉시 초기 상태로 snap
    $box.addClass('no-transition').removeClass('animate-in');

    $box.find('.main-tit').text(d.mainTit);
    $box.find('.sub-tit-line').text(d.subTitLine);
    $box.find('.sub-tit-bold').text(d.subTitBold);

    const $btns = $box.find('.visual-btn');
    $btns.eq(0).attr('href', d.btn1.href).find('.btn-txt').text(d.btn1.text);
    $btns.eq(1).attr('href', d.btn2.href).find('.btn-txt').text(d.btn2.text);

    // ② 두 프레임 후 transition 복원 + animate-in (브라우저가 초기 상태를 확실히 렌더링한 뒤 실행)
    requestAnimationFrame(function () {
        requestAnimationFrame(function () {
            $box.removeClass('no-transition').addClass('animate-in');
        });
    });
}
// ③ Swiper 초기화
const mySwiper = new Swiper('.MainSwiper', {
    loop: true,
    effect: 'fade',
    fadeEffect: { crossFade: true },
    speed: 800,
    autoplay: {
        delay: 4000,
        disableOnInteraction: false,
    },
    navigation: {
        nextEl: '#mainVisual .swiper-controller .btn--next',
        prevEl: '#mainVisual .swiper-controller .btn--prev',
    },
    pagination: {
        el: '#mainVisual .swiper-controller .swiper-pagination',
        clickable: true,
    },
    keyboard: { enabled: true, onlyInViewport: true },
    a11y: {
        enabled: true,
        prevSlideMessage: '이전 슬라이드로 이동',
        nextSlideMessage: '다음 슬라이드로 이동',
        firstSlideMessage: '첫 번째 슬라이드입니다',
        lastSlideMessage: '마지막 슬라이드입니다',
    },
    on: {
        init: function () {
            const realCount = this.slides.length - this.loopedSlides * 2;
            $('#mainVisual .cur-slide').text(this.realIndex + 1);
            $('#mainVisual .total-slide').text(realCount);
        },
        slideChangeTransitionStart: function () {
            // 배경 전환 시작과 동시에 텍스트도 업데이트
            updateSlideText(this.realIndex);
        },
        slideChangeTransitionEnd: function () {
            // 카운터만 여기서 처리
            const realCount = this.slides.length - this.loopedSlides * 2;
            $('#mainVisual .cur-slide').text(this.realIndex + 1);
            $('#mainVisual .total-slide').text(realCount);
        },
    },    
});

//* =========================== inc01 탭 */
// 첫번째 탭 활성화 (초기값)
const initFirstTab = () => {
    const $firstCont = $("#inc01 .tab-cont li:first-child");
    const $firstMenu = $("#inc01 .tab-menu li:first-child");

    $firstCont.addClass('active');
    $firstMenu.addClass('active').attr("aria-selected", "true");
};

// 반응형 초기화
const resetLayout = () => {
    $("#inc01 .tab-cont li, #inc01 .tab-menu li").removeClass('active');
    $("#inc01 .tab-menu li").attr("aria-selected", "false");
    gsap.set("#inc01 .full-w", { clearProps: "all" });
};

ScrollTrigger.matchMedia({
    "all": function() {
        ScrollTrigger.refresh();
    },

    // 1025px 이상
    "(min-width: 1025px)": function() {
        gsap.set("#inc01 .full-w", { justifyContent: "center" });
    
        ScrollTrigger.create({
            trigger: "#inc01",
            start: "0% 30%",
            onEnter: () => {
                gsap.to("#inc01 .full-w", { justifyContent: "flex-start" });
                initFirstTab();
            }
        });
        return () => resetLayout();
    },

    // 1024px 이하
    "(max-width: 1024px)": function() {
        gsap.set("#inc01 .full-w", { justifyContent: "flex-start" });
    
        ScrollTrigger.create({
            trigger: "#inc01",
            start: "0% 100%",
            onEnter: () => {
                initFirstTab();
            }
        });
        return () => resetLayout();
    }
});

// 탭메뉴 (메뉴 + 콘텐츠 매칭)
const tabMenuEls = document.querySelectorAll("#inc01 .tab-menu li");
const tabContEls = document.querySelectorAll("#inc01 .tab-cont li");
const tabContWrap = document.querySelector("#inc01 .tab-cont");
const container = document.querySelector("#inc01 .full-w");

function activeTab(data) {
    // 기준 너비 및 gap
    const inactiveItem = document.querySelector("#inc01 .tab-cont li:not(.active)") || tabContEls[0];
    const baseWidth = inactiveItem.offsetWidth / 2; 
    const gap = parseInt(window.getComputedStyle(tabContWrap).gap) || 0;

    const isDesktop = window.innerWidth >= 1025;

    // 초기화
    const targetMenu = document.querySelector(`[data-target="${data}"]`);
    const targetCont = document.querySelector(`[data-id="${data}"]`);
    if (!targetMenu || !targetCont) return;

    tabMenuEls.forEach(menu => {
        menu.classList.remove('active');
        menu.setAttribute('aria-selected', 'fasle');
    });

    tabContEls.forEach(item => item.classList.remove('active'));

    // 클릭 시 active 활성화
    targetMenu.classList.add('active');
    targetMenu.setAttribute('aria-selected', 'true');
    targetCont.classList.add('active');


    // 인덱스 기반 이동 계산
    if(isDesktop){
        const idx = Array.from(tabContEls).indexOf(targetCont); 
        if (idx !== -1) {
            const moveDistance = (baseWidth + gap) * idx;
            container.style.transition = "transform 0.8s ease";
            container.style.transform = `translateX(-${moveDistance}px)`;
        }
    }else{
        const idx = Array.from(tabContEls).indexOf(targetCont); 
        const moveDistance = (inactiveItem.offsetWidth + gap) * idx;
        container.style.transition = "transform 0.8s ease";
        container.style.transform = `translateX(-${moveDistance}px)`;
    }
}

// 이벤트 리스너
const handleTabClick = (e, attr) => {
    const isDesktop = window.innerWidth >= 1025;
    if(attr === 'data-id' && !isDesktop) return;

    const data = e.currentTarget.getAttribute(attr);
    activeTab(data);
};

tabMenuEls.forEach(menu => {
    menu.addEventListener('click', (e) => handleTabClick(e, 'data-target'));
});

tabContEls.forEach(item => {
    item.addEventListener('click', (e) => handleTabClick(e, 'data-id'));
});

// 현재 활성화된 탭 위치를 재계산
function updateLayout() {
    const activeCont = document.querySelector("#inc01 .tab-cont li.active");
    if (!activeCont) return;
    const currentId = activeCont.getAttribute('data-id');
    activeTab(currentId);
}

// Resize 
let resizeTimer;
window.addEventListener('resize', () => {
    clearTimeout(resizeTimer);
    resizeTimer = setTimeout(() => {
        updateLayout();
    });
});


//* =========================== inc02 글자 */

gsap.to("#inc02 h2 span",{backgroundSize:"100% 100%",
    scrollTrigger:{
        trigger:"#inc02",
        start:"0% 0%",
        end:"100% 100%",
        scrub:0.6,
    }
});

//* =========================== inc03 슬라이드 */

const inc03_swiper = new Swiper("#inc03 .swiper-container",{
	slidesPerView:1.2,
	spaceBetween:14,
	centeredSlides:true,
	loop:true,
	speed:800,
	autoplay: {delay: 3000, disableOnInteraction: false},
	navigation:{
		prevEl:"#inc03 .swiper-navigation .btn--prev",
		nextEl:"#inc03 .swiper-navigation .btn--next",
	},
	breakpoints:{
		1025:{
			slidesPerView:"auto",
			spaceBetween:20,
			centeredSlides:false
		},
		769:{
			slidesPerView:2.3,
			spaceBetween:14,
			centeredSlides:false
		},
		601:{
			slidesPerView:2,
			spaceBetween:14,
			centeredSlides:false
		}
	},
	keyboard: {
		enabled: true,
		onlyInViewport: true,
	},
	a11y: {
		enabled: true,
		prevSlideMessage: '이전 슬라이드로 이동',
		nextSlideMessage: '다음 슬라이드로 이동',
		firstSlideMessage: '첫 번째 슬라이드입니다',
		lastSlideMessage: '마지막 슬라이드입니다',
	},
});