let section05Swiper = new Swiper('#section05Swiper', {
    loop: false,
    effect: "fade",
    spaceBetween: 0,
    slidesPerView : 1,
    speed: 2500,
    autoplay : {
        delay : 4000,
        disableOnInteraction: false,
        pauseOnMouseEnter: false,
    },
    navigation: false,
    pagination: {
        el: '#section05Swiper .swiper-pagination',
        clickable: true,
    },
});


/* section01 */
var controller = new ScrollMagic.Controller();

/* new ScrollMagic.Scene({
    triggerElement: "#section01",
    triggerHook: "onLeave",
    duration: "500%"  // 100%가 아닌 전체 스크롤 길이를 조정해야 할 수 있습니다.
    //triggerHook: 0.5, // 화면의 중간에서 동작하도록 조정
    //offset: 50 // 시작점을 50px 아래로 조정
})
// .setPin("#pin01", {pushFollowers: false})
//.setTween() // 필요한 애니메이션 효과가 있다면 여기에 추가
.addIndicators() // 디버깅 목적으로 인디케이터 추가
.addTo(controller) */

/* section02 */
$("#section02 h3 span").each(function(index) {
    // Tween 생성
    var tween = gsap.from($(this), 0.5, {
        autoAlpha: 0, // 투명도를 0에서 시작
        y: 10, // 50px 아래에서 시작
        ease: Power1.easeInOut, // 부드럽게 등장
        delay: index * 0.1 // 인덱스에 따라 딜레이 적용
    });

    // Scene 생성
    new ScrollMagic.Scene({
        triggerElement: this, // 현재 span을 트리거로 설정
        triggerHook: 0.7, // 화면의 아래쪽(70%)에서 트리거
    })
    .setTween(tween) // 위에서 생성한 Tween 설정
    // .addIndicators({name: "section02 h3 서서히 위로"}) // 디버깅 목적으로 인디케이터 추가
    .addTo(controller); // 컨트롤러에 Scene 추가
});


/* section03 */
var tween = gsap.to("#section03 div.image img", {
    duration: 1, // 애니메이션 지속 시간
    y: 0, // translateY 값, '0'은 위치를 변경하지 않음을 의미
    ease: "none"
});

// 씬(Scene) 생성 및 설정
var scene = new ScrollMagic.Scene({
    triggerElement: "#section03", // 이 애니메이션이 시작되는 트리거 요소
    duration: "100%", // 스크롤 하는 범위(높이)를 얼마나 할 것인지
    triggerHook: 0, // 0은 트리거가 화면 상단에서 발생함을 의미
})
.setPin("#section03 div.image img") // 특정 요소를 고정
.setTween(tween) // 위에서 설정한 애니메이션 적용
.addTo(controller); // 컨트롤러에 씬 추가

/* section04 */
var scrollMaginSwiper = new Swiper('#swiperbox', {
    direction: 'horizontal',
    loop: false,
    speed: 1200,
    pagination: false,
    centerMode: true,
    slidesPerView : 3,
    initialSlide : 0,
    // freeMode: true,
    navigation: {
        prevEl: '#swiperbox .prev',
        nextEl: '#swiperbox .next',
    },
});

var scene = new ScrollMagic.Scene({
    triggerElement: "#swiperbox", // 트리거가 될 요소
    duration: '70%', // 스크롤 동작 길이 (예: 100%는 화면 높이와 같음)
    triggerHook: 0 // 화면 상단에서 트리거
})
.setPin("#swiperbox") // 스크롤 동안 #swiperbox 고정
.addTo(controller)
// .addIndicators({name: "아치슬라이드 인디케이터"})
.on("enter", function (e) {
    scrollMaginSwiper.slideTo(0); // 씬에 진입할 때 첫 번째 슬라이드로 이동
    // $('header').css({'opacity':'0',});
})
.on("leave", function (e) {
    // scrollMaginSwiper.slideTo(0); // 씬을 떠날 때 필요한 동작 (옵션)
    // $('header').css({'opacity':'1',});
})
.on("progress", function (e) {
    var slideCount = scrollMaginSwiper.slides.length;
    var slideIndex = Math.floor(e.progress * slideCount);
    scrollMaginSwiper.slideTo(slideIndex); // 스크롤에 따라 슬라이드 이동
});


var targets0 = [
    {selector: '#section04 .text .inner > span', style: {opacity: 1, bottom: '0'}, triggerHook: 0.9}, // 1번
    {selector: '#section04 .text .inner > h3', style: {opacity: 1, bottom: '0'}, triggerHook: 0.9}, // 2번
    {selector: '#section04 .text .inner > p', style: {opacity: 1, bottom: '0'}, triggerHook: 0.7}, // 3번
];
targets0.forEach(function(target, index) {
    new ScrollMagic.Scene({
        triggerElement: target.selector,
        triggerHook: target.triggerHook,
        // reverse: false
    })
    .setTween(target.selector, 0.5, target.style) // GSAP 애니메이션 사용
    //.addIndicators({name: "scene " + (index + 1)}) // 디버깅을 위한 인디케이터 추가 (개발 단계에서 사용)
    // .addIndicators({name: "section04 ani"}) // 디버깅 목적으로 인디케이터 추가
    .addTo(controller);
});


/* section05 */
// 애니메이션 대상 및 ScrollMagic 씬 생성
var targets1 = [
    {selector: '#section05 .image', style: {opacity: 1}, triggerHook: 0.4},
    {selector: '#section05 .swiper-pagination', style: {opacity: 1, marginTop: '0'}, triggerHook: 0.95},
    {selector: '#section05 div.text > div > div', style: {opacity: 1, bottom: '0px'}, triggerHook: 0.8}, // 3번
    {selector: '#section05 p > span:nth-of-type(1)', style: {opacity: 1, bottom: '0px'}, triggerHook: 0.8}, // 4번
    {selector: '#section05 p > span:nth-of-type(2)', style: {opacity: 1, bottom: '0px'}, triggerHook: 0.8}, // 5번
    {selector: '#section05 p > span:nth-of-type(3)', style: {opacity: 1, bottom: '0px'}, triggerHook: 0.9} // 6번
];

targets1.forEach(function(target, index) {
    new ScrollMagic.Scene({
        triggerElement: target.selector,
        triggerHook: target.triggerHook,
        // reverse: false
    })
    .setTween(target.selector, 0.5, target.style) // GSAP 애니메이션 사용
    // .addIndicators({name: "section05"}) // 디버깅 목적으로 인디케이터 추가
    .addTo(controller);
});

/* section06 */
/* // 애니메이션 대상 및 ScrollMagic 씬 생성
var targets2 = [
    {selector: '#section06 .text', style: {opacity: 1, marginTop: '0'}, triggerHook: 0.9}, // 1번
    {selector: '#section06 div.text > div > div', style: {opacity: 1, bottom: '0px'}, triggerHook: 0.8}, // 2번
    {selector: '#section06 p > span', style: {opacity: 1, bottom: '0px'}, triggerHook: 0.85}, // 3번
    {selector: '#section06 .image img', style: {opacity: 1, top: '145px'}, triggerHook: 0.5}, // 4번
];
targets2.forEach(function(target, index) {
    new ScrollMagic.Scene({
        triggerElement: target.selector,
        triggerHook: target.triggerHook,
        // reverse: false
    })
    .setTween(target.selector, 0.5, target.style) // GSAP 애니메이션 사용
    // .addIndicators({name: "section06"}) // 디버깅 목적으로 인디케이터 추가
    .addTo(controller);
}); */

/* section07 */
/* var scene = new ScrollMagic.Scene({
    triggerElement: "#section06", // 트리거 지점 설정
    duration: "100%", // section06의 높이 만큼 스크롤 길이 설정
    triggerHook: 0.07, // 화면 상단에서 트리거
    offset: 100,
})
.setTween("#section07", {
    y: () => -window.innerHeight, // section07을 화면 높이만큼 위로 이동
    ease: "none"
})
.setPin("#section06") // section06을 고정시킴
// .addIndicators({name: "section07-1"}) // 디버깅 목적으로 인디케이터 추가
.addTo(controller);

// section06의 높이를 가져와서 section07 .inner의 높이로 설정
var section06Height = document.querySelector('#section06').offsetHeight;
document.querySelector('#section07 .inner').style.height = section06Height + 'px';

var targets3 = [
    {selector: '#section07 .logo', style: {opacity: 1, bottom: '0'}, triggerHook: 0.9}, // 1번
    {selector: '#section07 .btn', style: {opacity: 1, bottom: '0'}, triggerHook: 0.9}, // 1번
];
targets3.forEach(function(target, index) {
    new ScrollMagic.Scene({
        triggerElement: target.selector,
        triggerHook: target.triggerHook,
        // reverse: false
    })
    .setTween(target.selector, 0.5, target.style) // GSAP 애니메이션 사용
    // .addIndicators({name: "section07 ani"}) // 디버깅 목적으로 인디케이터 추가
    .addTo(controller);
}); */


/* section08Box */
// section08-1을 고정하는 씬(scene) 생성
new ScrollMagic.Scene({
    triggerElement: "#section08Box", // 이 요소에 도달했을 때 트리거
    duration: "100%", // 화면 높이의 200% 동안 유지
    triggerHook: 0,
    offset: -130,
})
.setPin("#section08-1") // section08-1을 고정
.addTo(controller);

// GSAP 애니메이션을 사용하여 section08-2를 위로 슬라이드
var tween = gsap.fromTo("#section08-2", 
                        {y: "100%"},
                        {y: "0%", ease: Linear.easeNone});

// section08-1 고정 씬에 애니메이션 적용
new ScrollMagic.Scene({
    triggerElement: "#section08Box",
    duration: "100%", // 화면 높이의 200% 동안 애니메이션 실행
})
.setTween(tween) // 위에서 정의한 tween 애니메이션 적용
.addTo(controller);

var targets4 = [
    {selector: '#section08-1 .text', style: {opacity: 1, marginTop: '0'}, triggerHook: 0.9}, // 1번
    {selector: '#section08-1 div.text > div > div', style: {opacity: 1, bottom: '0px'}, triggerHook: 0.8}, // 2번
    {selector: '#section08-1 p > span', style: {opacity: 1, bottom: '0px'}, triggerHook: 0.85}, // 3번
    {selector: '#section08-1 .image img', style: {opacity: 1, top: '145px'}, triggerHook: 0.5}, // 4번
];
targets4.forEach(function(target, index) {
    new ScrollMagic.Scene({
        triggerElement: target.selector,
        triggerHook: target.triggerHook,
        // reverse: false
    })
    .setTween(target.selector, 0.5, target.style) // GSAP 애니메이션 사용
    // .addIndicators({name: "section08-1"}) // 디버깅 목적으로 인디케이터 추가
    .addTo(controller);
});
// section08-2
var targets5 = [
    {selector: '#section08-2 .logo', style: {opacity: 1, bottom: '0'}, triggerHook: 0.9}, // 1번
    {selector: '#section08-2 .btn', style: {opacity: 1, bottom: '0'}, triggerHook: 0.9}, // 1번
];
targets5.forEach(function(target, index) {
    new ScrollMagic.Scene({
        triggerElement: target.selector,
        triggerHook: target.triggerHook,
        // reverse: false
    })
    .setTween(target.selector, 0.5, target.style) // GSAP 애니메이션 사용
    // .addIndicators({name: "section08-2 ani"}) // 디버깅 목적으로 인디케이터 추가
    .addTo(controller);
});


/* 상단 이미지 슬라이더 */
const companyTopSwiper = new Swiper('#companyTopSlide', {
    effect: 'fade',
    loop: true,
    spaceBetween: 0,
    slidesPerView : 1,
    speed: 1400,
    autoplay : {
        delay : 5000,
        /* disableOnInteraction: false, 
        pauseOnMouseEnter: true,  */
    },
    navigation: false,
    pagination: {
        el: '#companyTopSlide .swiper-pagination',
        clickable: true,
    },
    //allowTouchMove: false,//드래그 금지
    //touchRatio: 0,//드래그 금지
    //observer: true,//탭에 사용 시
    //observeParents: true,//탭에 사용 시
    on: {
        slideChange: function () {
            $('.swiper-slide').removeClass('first');
        },
        init: function () {
            $('.swiper-slide').eq(0).addClass('first');
        }
    },
});