import { Swiper, SwiperSlide } from 'swiper/react'
import { Navigation, Pagination, Autoplay, EffectFade } from 'swiper/modules'
import { Link } from '@tanstack/react-router'
import { sliderData } from '../../data/siteData'

import 'swiper/css'
import 'swiper/css/navigation'
import 'swiper/css/pagination'
import 'swiper/css/effect-fade'

// 背景图片映射
const bgImages: Record<string, string> = {
  'bg-slider-1': '/src/assets/images/1.jpg',
  'bg-slider-2': '/src/assets/images/2.jpg',
  'bg-slider-3': '/src/assets/images/4.jpg',
  'bg-slider-4': '/src/assets/images/5.jpg',
}

export default function HeroSlider() {
  return (
    <section className="relative" id="home">
      <Swiper
        modules={[Navigation, Pagination, Autoplay, EffectFade]}
        navigation
        pagination={{ clickable: true }}
        autoplay={{ delay: 5000, disableOnInteraction: false }}
        effect="fade"
        loop
        className="hero-swiper"
      >
        {sliderData.map((slide) => (
          <SwiperSlide key={slide.id}>
            <div
              className="relative h-screen min-h-[600px] flex items-center justify-center bg-cover bg-center"
              style={{
                backgroundImage: `linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(${bgImages[slide.bgClass] || '/src/assets/images/1.jpg'})`,
              }}
            >
              <div className="container mx-auto px-4 text-center">
                <div className="max-w-3xl mx-auto">
                  <h1
                    className="text-3xl md:text-4xl lg:text-5xl font-bold mb-8 font-sans leading-tight"
                    style={{ color: '#ffffff' }}
                  >
                    {slide.title}
                  </h1>
                  <Link
                    to={slide.buttonLink}
                    className="inline-block px-8 py-4 bg-secondary hover:bg-secondary/80 text-white font-semibold rounded transition-colors"
                  >
                    {slide.buttonText}
                  </Link>

                  {/* Scroll Indicator - 原始 HTML 滚动鼠标动画 */}
                  <div className="mt-16">
                    <a href="#about" className="inline-block">
                      <div className="icon-scroll">
                        <div className="wheel" />
                      </div>
                    </a>
                  </div>
                </div>
              </div>
            </div>
          </SwiperSlide>
        ))}
      </Swiper>
    </section>
  )
}
