rapharehap/components/sections/home2/MobileBanner.js

'use client'
import React, { useState, useEffect } 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: 10000,
        disableOnInteraction: false,
    },
    loop: true,
    navigation: {
        nextEl: '.h1n',
        prevEl: '.h1p',
    },
    pagination: {
        el: '.swiper-pagination',
        clickable: true,
    },
};

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 }, exit: { x: '-100vw', opacity: 0 } },
};

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

export default function MobileBanner() {
    const [activeIndex, setActiveIndex] = useState(0);
    const [isMobile, setIsMobile] = useState(false);

    useEffect(() => {
        const handleResize = () => setIsMobile(window.innerWidth <= 768);
        handleResize();
        window.addEventListener('resize', handleResize);
        return () => window.removeEventListener('resize', handleResize);
    }, []);

    const slides = [
        //  {
        //     id: 0,
        //     variant: 'topToBottom',
        //     bgImage: '/assets/images/banner/mobile-banner/mbl-view-banner-1.png',
        //     upperText: 'Begin Your Health Journey',
        //     title: 'Better',
        //     titleSpan: 'health',
        //     titleEnd: 'Forever',
        //     subtitle: 'Expert Physiotherapy in Mississauga for You.',
        //     description: 'Our expert physiotherapists help you restore movement, reduce pain, and live healthier with personalized care in Mississauga.',
        //     buttonText: 'Book Your Appointment',
        //     buttonLink: 'tel:+647-722-3434',
        //     contentStyle: 'mobile-style'
        // },
        {
            id: 0,
            variant: 'topToBottom',
            bgImage: '/assets/images/banner/mobile-banner/1.webp',
            hideContent: true
        },
        {
            id: 1,
            variant: 'bottomToTop',
            bgImage: '/assets/images/banner/mobile-banner/2.webp',
            upperText: 'Care That Heals Gently',
            title: 'Relaxing',
            titleSpan: 'Massage',
            titleEnd: 'Therapy',
            // subtitle: 'Expert Hand Massage Techniques for Relief',
            description: 'Experience soothing massage techniques that release tension, promote circulation, and support your overall wellness.',
            buttonText: 'Schedule a Massage',
            buttonLink: '/contact',
            // contentStyle: 'with-background'
        },
        {
            id: 2,
            variant: 'leftToRight',
            bgImage: '/assets/images/banner/mobile-banner/3.webp',
            upperText: 'Wellness Near You Always',
            title: 'Trusted',
            titleSpan: 'Physio',
            titleEnd: 'Experts',
            // subtitle: 'Physiotherapy Etobicoke & Rehab Care.',
            description: 'Comprehensive physiotherapy and rehab services designed to restore your strength, mobility, and long-term wellness.',
            buttonText: 'Explore Our Service',
            buttonLink: '/etobicoke-treatment-service',
            // contentStyle: 'with-background'
        },
        {
            id: 3,
            variant: 'rightToLeft',
            bgImage: '/assets/images/banner/mobile-banner/4.webp',
            upperText: 'Healing With Caring Hands',
            title: 'Holistic',
            titleSpan: 'Wellness',
            titleEnd: 'Care',
            // subtitle: 'Waterfront Physio and Rehab Services.',
            description: 'Discover holistic physiotherapy and rehab services designed to restore balance, ease pain, and support long-term recovery.',
            buttonText: 'Visit Our Location',
            buttonLink: '/contact',
            // contentStyle: 'with-background'
        }
    ];

    if (!isMobile) return null;

    return (
        <section
            className="banner-style-two p_relative"
            style={{ minHeight: '100vh', position: 'relative' }}
        >
            <Swiper
                {...swiperOptions}
                className="banner-carousel"
                onSwiper={(swiper) => setActiveIndex(swiper.realIndex || 0)}
                onSlideChange={(swiper) => setActiveIndex(swiper.realIndex || 0)}
            >
                {slides.map((slide, index) => (
                    <SwiperSlide key={slide.id}>
                        <AnimatePresence mode="wait">
                            {activeIndex === index && (
                                <motion.div
                                    key={`slide-${index}`}
                                    className="slide-item"
                                    style={{ minHeight: '100vh', position: 'relative' }}
                                    variants={variants[slide.variant]}
                                    initial="initial"
                                    animate="animate"
                                    exit="exit"
                                    transition={transition}
                                >
                                    {/* full-height background */}
                                    <div
                                        className="bg-layer"
                                        style={{
                                            position: 'absolute',
                                            top: 0,
                                            left: 0,
                                            width: '100%',
                                            height: '100%',
                                            backgroundImage: `url(${slide.bgImage})`,
                                            backgroundSize: 'cover',
                                            backgroundPosition: 'center'
                                        }}
                                    />

                                    {/* centered content */}
                                    <div
                                        className="auto-container"
                                        style={{
                                            position: 'relative',
                                            zIndex: 1,
                                            minHeight: '100vh',
                                            display: 'flex',
                                            justifyContent: 'center',
                                            alignItems: 'end',
                                            paddingBottom: "20px"
                                        }}
                                    >
                                        {!slide.hideContent && (
                                            <div
                                                className={`content-box custom-content-box ${slide.contentStyle || ''}`}
                                            >
                                                <span className="upper-text">{slide.upperText}</span>
                                                <h2>
                                                    {slide.title} {slide.titleSpan} {slide.titleEnd}
                                                </h2>
                                                <p>{slide.subtitle}</p>
                                                <p>{slide.description}</p>
                                                <div className="btn-box mt-3">
                                                    <Link href={slide.buttonLink} className="theme-btn btn-one-new">
                                                        <span>{slide.buttonText}</span>
                                                    </Link>
                                                </div>
                                            </div>
                                        )}
                                    </div>
                                </motion.div>
                            )}
                        </AnimatePresence>
                    </SwiperSlide>
                ))}
            </Swiper>
        </section>
    );
};