import { Swiper, SwiperSlide } from "swiper/react";
import {
  Navigation,
  Pagination,
  A11y,
  EffectFade,
  Autoplay,
} from "swiper/modules";

import "swiper/css";
import "swiper/css/effect-fade";
import "swiper/css/navigation";
import "swiper/css/pagination";
import "swiper/css/scrollbar";

import { Phone } from "lucide-react";
import Image from "next/image";
import { companyInfo } from "@/lib/mock/company";

const SliderSection = () => {
  const handleCallNow = () => {
    window.location.href = "tel:817-601-1781";
  };

  return (
    <div className="w-full h-[400px] md:h-[500px] lg:h-[500px] relative">
      <Swiper
        modules={[Navigation, Pagination, A11y, EffectFade, Autoplay]}
        effect="fade"
        slidesPerView={1}
        spaceBetween={0}
        navigation
        pagination={{ clickable: true }}
        scrollbar={{ draggable: true }}
        autoplay={{
          delay: 3500,
          disableOnInteraction: false,
        }}
        loop={true}
        className="h-full"
      >
        {/* Slide 1 */}
        <SwiperSlide>
          <div className="relative h-full">
            {/* Background Image */}
            <div className="absolute inset-0">
              <Image
                src="/images/slides/slide1.jpg"
                width={300}
                height={300}
                className="w-full h-full object-cover"
                loading="eager" // instead of "lazy" for the first image
                alt="HVAC technician providing cooling solutions"
              />
              <div className="absolute inset-0 bg-linear-to-r from-blue-900/60 to-blue-900/70" />
            </div>

            {/* Slide Content */}
            <div className="relative h-full flex items-center justify-center">
              <div className="text-center text-white px-4">
                <h1 className="text-3xl sm:text-5xl font-bold mb-6">
                  Your Comfort Is Our Priority
                </h1>
                <p className="text-lg sm:text-xl mb-8 max-w-3xl mx-auto">
                  Professional heating, cooling, and air quality solutions for
                  your home and business.
                </p>
                <button
                  onClick={handleCallNow}
                  className="bg-secondary hover:bg-secondary text-white px-8 py-4 rounded-full text-lg font-semibold transition inline-flex items-center gap-2"
                >
                  <Phone className="w-6 h-6" />
                  Schedule Service Now
                </button>
              </div>
            </div>
          </div>
        </SwiperSlide>

        {/* Slide 2 */}
        <SwiperSlide>
          <div className="relative h-full">
            <div className="absolute inset-0">
              <Image
                width={300}
                height={300}
                src="/images/slides/slide2.jpeg"
                className="w-full h-full object-container"
                loading="eager"
                alt="Slide 2"
              />
              <div className="absolute inset-0 bg-linear-to-r from-blue-900/60 to-blue-900/70" />
            </div>

            <div className="relative h-full flex items-center justify-center">
              <div className="text-center text-white px-4">
                <h1 className="text-3xl sm:text-5xl font-bold mb-6">
                  Welcome to {companyInfo.name}
                </h1>
                <p className="text-lg sm:text-xl mb-8 max-w-3xl mx-auto">
                  Your trusted partner in air conditioning and heating services.
                </p>
                <button
                  onClick={handleCallNow}
                  className="bg-secondary hover:bg-secondary text-white px-8 py-4 rounded-full text-lg font-semibold transition inline-flex items-center gap-2"
                >
                  <Phone className="w-6 h-6" />
                  Schedule Service Now
                </button>
              </div>
            </div>
          </div>
        </SwiperSlide>
      </Swiper>
    </div>
  );
};

export default SliderSection;
