"use client";
import React, { useState } from "react";
import Link from "next/link";
import { useKeenSlider } from "keen-slider/react";
import "keen-slider/keen-slider.min.css";

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

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

  // ✅ Autoplay plugin added here
  const autoplay = (slider) => {
    let timeout;
    const delay = 4000;

    function clearNextTimeout() {
      clearTimeout(timeout);
    }
    function nextTimeout() {
      clearTimeout(timeout);
      timeout = setTimeout(() => {
        slider.next();
      }, delay);
    }

    slider.on("created", nextTimeout);
    slider.on("dragStarted", clearNextTimeout);
    slider.on("animationEnded", nextTimeout);
    slider.on("updated", nextTimeout);
  };

  const [sliderRef] = useKeenSlider(
    {
      loop: true,
      slides: { perView: 1, spacing: 0 },
    },
    [autoplay] // ✅ autoplay fixed here
  );

  const slides = [
    {
      id: 0,
      bgImage: "/assets/images/banner/mobile-banner/4.webp",
      upperText: "Begin your ",
      title: "Recovery",
      description:
        "Discover holistic physiotherapy and rehab services designed to restore balance, ease pain, and support long-term recovery.",
      buttonText: "Book Your Appointment",
      buttonLink: "/contact",
    },
    {
      id: 1,
      bgImage: "/assets/images/banner/mobile-banner/1.webp",
      upperText: "Build Your Strength & ",
      title: "Endurance",
      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",
    },
    {
      id: 2,
      bgImage: "/assets/images/banner/mobile-banner/3.webp",
      upperText: "Regain your Flexibility & ",
      title: "Balance",
      description:
        "Comprehensive physiotherapy and rehab services designed to restore your strength, mobility and long-term wellness.",
      buttonText: "Explore Our Service",
      buttonLink: "/etobicoke-treatment-service",
    },
    {
      id: 3,
      bgImage: "/assets/images/banner/mobile-banner/2.webp",
      upperText: "Build your Core ",
      title: "Performance",
      description:
        "Experience soothing massage techniques that release tension, promote circulation, and support your overall wellness.",
      buttonText: "Schedule a Massage",
      buttonLink: "/contact",
    },
  ];

  if (!isMobile) return null;

  return (
    <section
      className="banner-style-two"
      style={{ minHeight: "100vh", position: "relative" }}
    >
      <div ref={sliderRef} className="keen-slider">
        {slides.map((slide) => (
          <div
            key={slide.id}
            alt={slide.title}
            className="keen-slider__slide"
            style={{
              minHeight: "100vh",
              position: "relative",
              backgroundImage: `url(${slide.bgImage})`,
              backgroundSize: "cover",
              backgroundPosition: "center",
            }}
          >
            <div
              className="auto-container"
              style={{
                position: "relative",
                zIndex: 1,
                minHeight: "100vh",
                display: "flex",
                justifyContent: "center",
                alignItems: "center",
                paddingTop: "200px",
                color: "#fff",
                textAlign: "center",
              }}
            >
              <div className="content-box custom-content-box">
                <span className="upper-text mb-2">{slide.upperText}</span>
                <h1
                  style={{
                    fontSize: "32px",
                    lineHeight: "42px",
                    color: "#bc0000",
                    fontWeight: "bold",
                  }}
                >
                  {slide.title}
                </h1>
                {/* {slide.subtitle && <p>{slide.subtitle}</p>} */}
                {/* <p>{slide.description}</p> */}
                <div className="btn-box mt-3">
                  <Link
                    href={slide.buttonLink}
                    className="theme-btn btn-one-new"
                   aria-label="Mobile Banner Button">
                    <span>{slide.buttonText}</span>
                  </Link>
                </div>
              </div>
            </div>
          </div>
        ))}
      </div>
    </section>
  );
}