import React, { useEffect, useState } from "react";

export default function BannerSlider() {
  const images = [
    "/assets/banner_1.png",
    "/assets/banner_2.png",
    "/assets/banner_3.png",
  ];

  const [current, setCurrent] = useState(0);

  useEffect(() => {
    if (!images.length) return;

    const interval = setInterval(() => {
      setCurrent((prev) => (prev + 1) % images.length);
    }, 3000);

    return () => clearInterval(interval);
  }, [images.length]);

  return (
    <>
      <div className="banner-wrap">
        <div className="banner-slider">
          {images.map((img, index) => (
            <div
              key={index}
              className={`slide ${current === index ? "active" : ""}`}
            >
              <div className="slide-inner">
                <img src={img} alt={`banner-${index + 1}`} />
                <span className="sweep-light" />
              </div>
            </div>
          ))}

          <div className="dots">
            {images.map((_, index) => (
              <button
                key={index}
                className={`dot ${current === index ? "active" : ""}`}
                onClick={() => setCurrent(index)}
                aria-label={`Go to slide ${index + 1}`}
              />
            ))}
          </div>
        </div>
      </div>

      <style jsx>{`
        .banner-wrap {
          width: 100%;
          display: flex;
          justify-content: center;
          padding: 0 12px;
          box-sizing: border-box;
        }

        .banner-slider {
          position: relative;
          width: 100%;
          max-width: 820px;
          height: 240px;
          overflow: hidden;
          border-radius: 18px;
        }

        .slide {
          position: absolute;
          inset: 0;
          opacity: 0;
          transform: scale(1.06) translateX(30px);
          transition:
            opacity 0.8s ease,
            transform 0.8s ease;
          pointer-events: none;
          padding: 0 10px;
          box-sizing: border-box;
        }

        .slide.active {
          opacity: 1;
          transform: scale(1) translateX(0);
          pointer-events: auto;
          z-index: 2;
        }

        .slide-inner {
          position: relative;
          width: 100%;
          height: 100%;
          overflow: hidden;
          border-radius: 16px;
          box-shadow: 0 10px 24px rgba(0, 0, 0, 0.22);
        }

        .slide img {
          width: 100%;
          height: 100%;
          object-fit: cover;
          display: block;
        }

        .sweep-light {
          position: absolute;
          inset: -70%;
          pointer-events: none;
          z-index: 1;
          background: linear-gradient(
            110deg,
            rgba(255, 255, 255, 0) 22%,
            rgba(255, 255, 255, 0.1) 38%,
            rgba(255, 255, 255, 0.2) 45%,
            rgba(255, 255, 255, 0.38) 50%,
            rgba(255, 255, 255, 0.2) 55%,
            rgba(255, 255, 255, 0.1) 62%,
            rgba(255, 255, 255, 0) 76%
          );
          mix-blend-mode: screen;
          opacity: 1;
          transform: translateX(-95%) rotate(12deg);
          animation: sweepMove 2.8s linear infinite;
          will-change: transform;
        }

        .dots {
          position: absolute;
          left: 50%;
          bottom: 12px;
          transform: translateX(-50%);
          display: flex;
          align-items: center;
          gap: 8px;
          z-index: 5;
        }

        .dot {
          width: 10px;
          height: 10px;
          border: none;
          border-radius: 999px;
          background: rgba(255, 255, 255, 0.55);
          cursor: pointer;
          transition:
            transform 0.25s ease,
            background 0.25s ease,
            opacity 0.25s ease;
          padding: 0;
        }

        .dot.active {
          background: #ffffff;
          transform: scale(1.18);
          opacity: 1;
        }

        @keyframes sweepMove {
          0% {
            transform: translateX(-95%) rotate(12deg);
          }
          100% {
            transform: translateX(95%) rotate(12deg);
          }
        }

        @media (max-width: 768px) {
          .banner-wrap {
            padding: 0 0px;
          }

          .banner-slider {
            height: 180px;
            border-radius: 14px;
          }

          .slide {
            padding: 0 8px;
          }

          .slide-inner {
            border-radius: 14px;
          }

          .dot {
            width: 9px;
            height: 9px;
          }

          .sweep-light {
            animation: sweepMove 3.2s linear infinite;
          }
        }
      `}</style>
    </>
  );
}