'use client'
import React, { useState } from 'react';
import Link from "next/link";
import { Autoplay, Navigation, Pagination } from "swiper/modules";
import { Swiper, SwiperSlide } from "swiper/react";
import { motion, AnimatePresence } from "framer-motion";

import "swiper/css";
import "swiper/css/navigation";
import "swiper/css/pagination";

const swiperOptions = {
    modules: [Autoplay, Pagination, Navigation],
    slidesPerView: 1,
    spaceBetween: 0,
    autoplay: {
        delay: 2000,
        disableOnInteraction: false,
        pauseOnMouseEnter: true, // stops on hover for smooth UX
    },
    speed: 1500, // increase speed for smoother sliding
    loop: true,
    navigation: {
        nextEl: '.h1n',
        prevEl: '.h1p',
    },
    pagination: {
        el: '.swiper-pagination',
        clickable: true,
    },
    effect: "slide", // ensures smooth slide effect
};

const variants = {
    topToBottom: {
        initial: { y: '-100vh', opacity: 0 },
        animate: { y: 0, opacity: 1 },
        exit: { y: '100vh', opacity: 0 }
    },
    bottomToTop: {
        initial: { y: '100vh', opacity: 0 },
        animate: { y: 0, opacity: 1 },
        exit: { y: '-100vh', opacity: 0 }
    },
    leftToRight: {
        initial: { x: '-100vw', opacity: 0 },
        animate: { x: 0, opacity: 1 },
        exit: { x: '100vw', opacity: 0 }
    },
    rightToLeft: {
        initial: { x: '100vw', opacity: 0 },
    animate: {
      x: 0,
      opacity: 1,
      transition: {
        duration: 0.8,      // adjust speed
        ease: "easeInOut"   // try "easeOut", "easeIn", or custom [0.4, 0, 0.2, 1]
      }
    },
    exit: {
      x: "-100vw",
      opacity: 0,
      transition: {
        duration: 0.6,
        ease: "easeInOut"
      }
    }
    },
};
const revealVariants = {
  hidden: {
    scaleX: 0,
    opacity: 0,
    originX: 0, // same as transform-origin: 0% 50%
  },
  visible: {
    scaleX: 1,
    opacity: 1,
    originX: 0,
    transition: {
      duration: 0.8,
      ease: "easeInOut"
    }
  },
  exit: {
    scaleX: 0,
    opacity: 0,
    originX: 0,
    transition: {
      duration: 0.6,
      ease: "easeInOut"
    }
  }
};

const transition = {
    type: "tween",
    ease: [0.4, 0.0, 0.2, 1],
    duration: 1.2
};

export default function Banner() {
    const [activeIndex, setActiveIndex] = useState(0);
    const [isAnimating, setIsAnimating] = useState(false);

    const handleSlideChange = (swiper) => {
        setIsAnimating(true);
        setActiveIndex(swiper.realIndex || 0);
        setTimeout(() => setIsAnimating(false), 1200);
    };

    return (
        <section className="banner-style-two p_relative">
          <Swiper {...swiperOptions}
    className="banner-carousel owl-theme owl-carousel owl-nav-none owl-dots-none"
    onSwiper={(swiper) => setActiveIndex(swiper.realIndex || 0)}
    onSlideChange={handleSlideChange}
>

    {/* ✅ 4th slide moved to 1st position */}
    <SwiperSlide>
        <AnimatePresence mode="wait">
            {activeIndex === 0 && (
                <motion.div key="slide-3"
                    className="slide-item banner-slide"
                    //variants={variants.rightToLeft}
                    variants={revealVariants}
                    initial="initial" animate="animate" exit="exit" transition={transition}>
                    <div className="bg-layer"
                        style={{ backgroundImage: 'url(/assets/images/banner/desktopBanner/banner-4.png)' }}>
                    </div>
                    <div className="auto-container" style={{ height: "600px", display: "flex", alignItems: "end",justifyContent: "start", textAlign: "start"  }}>
                        <div className="content-box custom-content-box">
                            <span className="upper-text mb-2">Begin your</span>
                            <h2 style={{ color: "#bc0000" }}>Recovery</h2>
                            <p className='text-white'>• Rehab • Strength Training • Personalized Care </p>
                            <div className="btn-box mt-3">
                                <Link href="/contact" className="theme-btn btn-one">
                                    <span>Visit Our Location</span>
                                </Link>
                            </div>
                        </div>
                    </div>
                </motion.div>
            )}
        </AnimatePresence>
    </SwiperSlide>

    {/* ✅ 1st slide moved to 2nd position */}
    <SwiperSlide>
        <AnimatePresence mode="wait">
            {activeIndex === 1 && (
                <motion.div key="slide-0"
                    className="slide-item banner-slide"
                    //variants={variants.rightToLeft}
                    variants={revealVariants}
                    initial="initial" animate="animate" exit="exit" transition={transition}>
                    <div className="bg-layer bg-slide-0"
                        style={{ backgroundImage: 'url(/assets/images/banner/desktopBanner/banner-1.png)' }}>
                    </div>
                    <div className="auto-container" style={{ height: "600px", display: "flex", alignItems: "end", justifyContent: "end", textAlign: "center" }}>
                        <div className="content-box custom-content-box">
                            <span className="upper-text mb-2 ">Build Your Strength & </span>
                            <h2 style={{ color: "#bc0000" }}>Endurance</h2>
                            <p className=' text-white'>• Physiotherapy • Sports Therapy • Injury Prevention</p>
                            <div className="btn-box mt-3">
                                <Link href="tel:+647-722-3434" className="theme-btn btn-one">
                                    <span>Book Your Appointment</span>
                                </Link>
                            </div>
                        </div>
                    </div>
                </motion.div>
            )}
        </AnimatePresence>
    </SwiperSlide>

    {/* ✅ existing 3rd slide remains as 3rd */}
    <SwiperSlide>
        <AnimatePresence mode="wait">
            {activeIndex === 2 && (
                <motion.div key="slide-2"
                    className="slide-item banner-slide"
                    //variants={variants.rightToLeft}
                    variants={revealVariants}
                    initial="initial" animate="animate" exit="exit" transition={transition}>
                    <div className="bg-layer"
                        style={{ backgroundImage: 'url(/assets/images/banner/desktopBanner/banner-3.png)' }}>
                    </div>
                    <div className="auto-container" style={{ height: "600px", display: "flex", alignItems: "end", justifyContent: "start", textAlign: "start" }}>
                        <div className="content-box custom-content-box">
                            <span className="upper-text mb-2">Regain your</span>
                            <h2 style={{ color: "#bc0000" }}>Flexiblity and Balance</h2>
                            <p className='text-white'>• Pain Relief  • Strength Training • Active Care </p>
                            <div className="btn-box mt-3">
                                <Link href="/etobicoke-treatment-service" className="theme-btn btn-one">
                                    <span>Explore Our Service</span>
                                </Link>
                            </div>
                        </div>
                    </div>
                </motion.div>
            )}
        </AnimatePresence>
    </SwiperSlide>

    {/* ✅ 2nd slide moved to 4th position */}
    <SwiperSlide>
        <AnimatePresence mode="wait">
            {activeIndex === 3 && (
                <motion.div key="slide-1"
                    className="slide-item banner-slide"
                    //variants={variants.rightToLeft}
                    variants={revealVariants}
                    initial="initial" animate="animate" exit="exit" transition={transition}>
                    <div className="bg-layer"
                        style={{ backgroundImage: 'url(/assets/images/banner/desktopBanner/banner-2.png)' }}>
                    </div>
                    <div className="auto-container" style={{ height: "600px", display: "flex", alignItems: "end", justifyContent: "center", textAlign: "center" }}>
                        <div className="content-box custom-content-box">
                            <span className="upper-text mb-3">Build your Core </span>
                            <h2 style={{ color: "#bc0000" }}>Performance</h2>
                            <p className=' text-white'>• Pain Relief • Active Care • Long-Term Result</p>
                            <div className="btn-box mt-3">
                                <Link href="/contact" className="theme-btn btn-one">
                                    <span>Schedule a Massage</span>
                                </Link>
                            </div>
                        </div>
                    </div>
                </motion.div>
            )}
        </AnimatePresence>
    </SwiperSlide>

</Swiper>

        </section>
    );
}