"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"

// Autoplay plugin
function AutoplaySlider(slider) {
    let timeout
    let mouseOver = false
    function clearNextTimeout() {
        clearTimeout(timeout)
    }
    function nextTimeout() {
        clearTimeout(timeout)
        if (mouseOver) return
        timeout = setTimeout(() => {
            slider.next()
        }, 4000)
    }
    slider.on("created", () => {
        slider.container.addEventListener("mouseover", () => {
            mouseOver = true
            clearNextTimeout()
        })
        slider.container.addEventListener("mouseout", () => {
            mouseOver = false
            nextTimeout()
        })
        nextTimeout()
    })
    slider.on("dragStarted", clearNextTimeout)
    slider.on("animationEnded", nextTimeout)
    slider.on("updated", nextTimeout)
}

export default function Banner() {
    const [sliderLoaded, setSliderLoaded] = useState(false)

    const [sliderRef] = useKeenSlider(
        {
            loop: true,
            renderMode: "performance",
            slides: { perView: 1, spacing: 0 },
            duration: 1000, // increase for smoother transition
            easing: (t) => t < 0.5 ? 4 * t * t * t : 1 - Math.pow(-2 * t + 2, 3) / 2, // smooth cubic easing
            created() {
                setSliderLoaded(true)
            },
        },
        [AutoplaySlider]
    )


    const slides = [
        {
            id: 0,
            bg: "/assets/images/banner/desktopBanner/banner-4.webp",
            alt: "Physiotherapy at Rapharehab Clinic.",
            upper: "Begin your",
            title: "Recovery",
            desc: "• Rehab • Strength Training • Personalized Care",
            btn: { text: "Visit Our Location", link: "/contact" },
            align: "start",
        },
        {
            id: 1,
            bg: "/assets/images/banner/desktopBanner/banner-1.webp",
            alt: "Pain relief and rehab therapy.",
            upper: "Build Your Strength &",
            title: "Endurance",
            desc: "• Physiotherapy • Sports Therapy • Injury Prevention",
            btn: { text: "Book Your Appointment", link: "tel:+647-722-3434" },
            align: "center",
        },
        {
            id: 2,
            bg: "/assets/images/banner/desktopBanner/banner-3.webp",
            alt: "Rapharehab physiotherapy session.",
            upper: "Regain Your Strength",
            title: "Heal",
            desc: "• Pain Relief • Mobility • Wellness",
            btn: { text: "Schedule a Massage", link: "/contact" },
            align: "start",
        },
        {
            id: 3,
            bg: "/assets/images/banner/desktopBanner/banner-2.webp",
            alt: "Rehab and recovery care.",
            upper: "Build your Core",
            title: "Performance",
            desc: "• Pain Relief • Active Care • Long-Term Result",
            btn: { text: "Explore Our Service", link: "/etobicoke-treatment-service" },
            align: "space-evenly",
        },
    ]

    return (
        <section className="banner-style-two p_relative">
            <div
                ref={sliderRef}
                className="keen-slider"
                style={{ opacity: sliderLoaded ? 1 : 0, transition: "opacity 0.5s ease" }}
            >
                {slides.map((s) => (
                    <div
                        key={s.id}
                        className="keen-slider__slide"
                        alt={s.alt}
                        style={{
                            minHeight: "600px",
                            width: "100%",
                            backgroundImage: `url(${s.bg})`,
                            backgroundSize: "cover",
                            backgroundPosition: "center",
                            display: "flex",
                            alignItems: "end",
                            justifyContent:
                                s.align === "start"
                                    ? "flex-start"
                                    : s.align === "end"
                                        ? "flex-end"
                                        : s.align === "center"
                                            ? "center"
                                            : s.align === "space-between"
                                                ? "space-between"
                                                : s.align === "space-evenly"
                                                    ? "space-evenly"
                                                    : "center",
                            padding: "0 150px 40px",
                        }}
                    >
                        <div
                            className="content-box custom-content-box"
                            style={{
                                color: "#bc0000",
                                textAlign:
                                    s.align === "space-between" || s.align === "space-evenly"
                                        ? "center"
                                        : s.align,
                                padding: "450px 0px 220px 0px",
                            }}
                        >
                            <span className="upper-text mb-2" style={{ fontSize: "22px" }}>{s.upper}</span>
                            {/* ✅ Use <h1> for first slide only */}
                            {s.id === 0 ? (
                                <h1
                                    style={{
                                        color: "#bc0000",
                                        fontWeight: "bold",
                                        fontSize: "64px",
                                    }}
                                >
                                    {s.title}
                                </h1>
                            ) : (
                                <h3
                                    style={{
                                        color: "#bc0000",
                                        fontWeight: "bold",
                                        fontSize: "64px",
                                    }}
                                >
                                    {s.title}
                                </h3>
                            )}
                            <p style={{ color: "#fff" }}>{s.desc}</p>
                            <div className="btn-box mt-3">
                                <Link href={s.btn.link} className="theme-btn btn-one" aria-label="Banner Button">
                                    <span>{s.btn.text}</span>
                                </Link>
                            </div>
                        </div>
                    </div>
                ))}
            </div>
        </section>
    )
}