"use client";
import Link from "next/link";
import { Swiper, SwiperSlide } from "swiper/react";
import { Navigation, FreeMode, Thumbs, EffectFade, Autoplay } from "swiper";

const HeroBanner = () => {
  return (
    <div className="hero-wrapper hero-3">
      <div className="hero-3-slider global-carousel">
        <Swiper
          loop={true}
          modules={[FreeMode, Navigation, Thumbs, EffectFade, Autoplay]}
          autoplay={{ delay: 5000, disableOnInteraction: false }}
          effect="fade"
          navigation={{
            nextEl: ".swiper-button-next",
            prevEl: ".swiper-button-prev",
          }}
        >
          <SwiperSlide>
            <div
              className="hero-slide"
              style={{
                backgroundImage: "url(/assets/img/home/banner-1.png)",
                backgroundPosition: "center"

              }}
            >
              <div className="container">
                <div className="row">
                  <div className="col-xxl-6 col-xl-8 col-lg-8">
                    <div className="hero-style3">
                      <div
                        className="hero-subtitle text-white"
                        data-ani="slideinup"
                        data-ani-delay="0s"
                      >
                        <span>
                          {/* <img
                            src="/assets/img/home/our-vision-bg.png"
                            alt="Welcome image"
                          /> */}
                          Welcome to Sri Murugan Temple of Waterloo Region
                        </span>{" "}
                      </div>
                      <h2
                        className="hero-title text-white"
                        data-ani="slideinup"
                        data-ani-delay="0.1s"
                      >
                        ஸ்ரீ முருகன் கோவில் வோட்டர்லூ மற்றும் சமூக மையம்
                      </h2>
                      <div
                        data-ani="slideinup"
                        data-ani-delay="0.1s">
                        <Link href="/#event-calender" className="btn">
                          Upcoming Poojai
                        </Link>
                      </div>
                      {/* <p
                        className="hero-text text-white"
                        data-ani="slideinup"
                        data-ani-delay="0.2s"
                      >
                        Vestibulum rhoncus nisl ac gravida porta. Mauris eu
                        sapien lacus. Etiam molestie justo neque, in convallis
                        massa tempus in.
                      </p> */}
                      {/* <div
                        className="btn-group"
                        data-ani="slideinup"
                        data-ani-delay="0.3s"
                      >
                        <Link href="/about" className="btn">
                          Learn More
                        </Link> */}
                      {/* <div className="call-media-wrap">
                          <div className="icon">
                            <img
                              src="/assets/img/icon/phone-1.svg"
                              alt="Fixturbo"
                            />
                          </div>
                          <div className="media-body">
                            <h6 className="title text-white">
                              Requesting A Call:
                            </h6>
                            <h4 className="link">
                              <a className="text-white" href="tel:6295550129">
                                (629) 555-0129
                              </a>
                            </h4>
                          </div>
                        </div> */}
                      {/* </div> */}
                    </div>
                  </div>
                  {/* <div className="col-lg-6 align-self-center">
                    <div
                      className="video-wrap text-lg-center"
                      data-ani="slideinup"
                      data-ani-delay="0.2s"
                    >
                      <a
                        href="https://www.youtube.com/watch?v=P7fi4hP_y80"
                        className="play-btn style4 popup-video"
                      >
                        <i className="fas fa-solid fa-play" />
                      </a>
                    </div>
                  </div> */}
                </div>
              </div>
            </div>
          </SwiperSlide>

          <SwiperSlide>
            <div
              className="hero-slide"
              style={{
                backgroundImage: "url(/assets/img/home/banner-2.jpg)",
                backgroundPosition: "center"

              }}
            >
              <div className="container">
                <div className="row">
                  <div className="col-xxl-6 col-xl-8 col-lg-8">
                    <div className="hero-style3">
                      <div
                        className="hero-subtitle text-white"
                        data-ani="slideinup"
                        data-ani-delay="0s"
                      >
                        <span>
                          {/* <img
                            src="/assets/img/home/our-vision-bg.png"
                            alt="Welcome image"
                          /> */}
                          Welcome to Sri Murugan Temple of Waterloo Region
                        </span>{" "}
                      </div>
                      <h2
                        className="hero-title text-white"
                        data-ani="slideinup"
                        data-ani-delay="0.1s"
                      >
                        Sri Murugan Temple<br /> Waterloo Region and <br />Community Center
                      </h2>
                      <div
                        data-ani="slideinup"
                        data-ani-delay="0.1s">
                        <Link href="/#event-calender" className="btn">
                          Upcoming Poojai
                        </Link>
                      </div>
                      {/* <p
                        className="hero-text text-white"
                        data-ani="slideinup"
                        data-ani-delay="0.2s"
                      >
                        Vestibulum rhoncus nisl ac gravida porta. Mauris eu
                        sapien lacus. Etiam molestie justo neque, in convallis
                        massa tempus in.
                      </p> */}
                      {/* <div
                        className="btn-group"
                        data-ani="slideinup"
                        data-ani-delay="0.3s"
                      >
                        <Link href="/about" className="btn">
                          Learn More
                        </Link> */}
                      {/* <div className="call-media-wrap">
                          <div className="icon">
                            <img
                              src="/assets/img/icon/phone-1.svg"
                              alt="Fixturbo"
                            />
                          </div>
                          <div className="media-body">
                            <h6 className="title text-white">
                              Requesting A Call:
                            </h6>
                            <h4 className="link">
                              <a className="text-white" href="tel:6295550129">
                                (629) 555-0129
                              </a>
                            </h4>
                          </div>
                        </div> */}
                      {/* </div> */}
                    </div>
                  </div>
                  {/* <div className="col-lg-6 align-self-center">
                    <div
                      className="video-wrap text-lg-center"
                      data-ani="slideinup"
                      data-ani-delay="0.2s"
                    >
                      <a
                        href="https://www.youtube.com/watch?v=P7fi4hP_y80"
                        className="play-btn style4 popup-video"
                      >
                        <i className="fas fa-solid fa-play" />
                      </a>
                    </div>
                  </div> */}
                </div>
              </div>
            </div>
          </SwiperSlide>
          <SwiperSlide>
            <div
              className="hero-slide"
              style={{
                backgroundImage: "url(/assets/img/home/banner-3.jpg)",
                backgroundPosition: "center"

              }}
            >
              <div className="container">
                <div className="row">
                  <div className="col-xxl-6 col-xl-8 col-lg-8">
                    <div className="hero-style3">
                      <div
                        className="hero-subtitle text-white"
                        data-ani="slideinup"
                        data-ani-delay="0s"
                      >
                        <span>
                          {/* <img
                            src="/assets/img/home/our-vision-bg.png"
                            alt="Welcome image"
                          /> */}
                          Welcome to Sri Murugan Temple of Waterloo Region
                        </span>{" "}
                      </div>
                      <h2
                        className="hero-title text-white"
                        data-ani="slideinup"
                        data-ani-delay="0.1s"
                      >
                        {/* kannada Script */}
                        ಶ್ರೀ ಸುಬ್ರಹ್ಮಣ್ಯ ಸ್ವಾಮಿ ದೇವಸ್ಥಾನ, ವಾಟರ್‌ಲೂ<br /> ಪ್ರದೇಶ
                      </h2>
                      <div
                        data-ani="slideinup"
                        data-ani-delay="0.1s">
                        <Link href="/#event-calender" className="btn">
                          Upcoming Poojai
                        </Link>
                      </div>
                      {/* <p
                          className="hero-text text-white"
                          data-ani="slideinup"
                          data-ani-delay="0.2s"
                        >
                          Vestibulum rhoncus nisl ac gravida porta. Mauris eu
                          sapien lacus. Etiam molestie justo neque, in convallis
                          massa tempus in.
                        </p>
                        <div
                          className="btn-group"
                          data-ani="slideinup"
                          data-ani-delay="0.3s"
                        >
                          <Link href="/about" className="btn">
                            Learn More
                          </Link> */}
                      {/* <div className="call-media-wrap">
                          <div className="icon">
                            <img
                              src="/assets/img/icon/phone-1.svg"
                              alt="Fixturbo"
                            />
                          </div>
                          <div className="media-body">
                            <h6 className="title text-white">
                              Requesting A Call:
                            </h6>
                            <h4 className="link">
                              <a className="text-white" href="tel:6295550129">
                                (629) 555-0129
                              </a>
                            </h4>
                          </div>
                        </div> */}
                      {/* </div> */}
                    </div>
                  </div>
                  {/* <div className="col-lg-6 align-self-center">
                    <div
                      className="video-wrap text-lg-center"
                      data-ani="slideinup"
                      data-ani-delay="0.2s"
                    >
                      <a
                        href="https://www.youtube.com/watch?v=P7fi4hP_y80"
                        className="play-btn style4 popup-video"
                      >
                        <i className="fas fa-solid fa-play" />
                      </a>
                    </div>
                  </div> */}
                </div>
              </div>
            </div>
          </SwiperSlide>
          <SwiperSlide>
            <div
              className="hero-slide"
              style={{
                backgroundImage: "url(/assets/img/home/banner-4.jpg)",
                backgroundPosition: "center"
              }}
            >
              <div className="container">
                <div className="row">
                  <div className="col-xxl-6 col-xl-8 col-lg-8">
                    <div className="hero-style3">
                      <div
                        className="hero-subtitle text-white"
                        data-ani="slideinup"
                        data-ani-delay="0s"
                      >
                        <span>
                          {/* <img
                            src="/assets/img/home/our-vision-bg.png"
                            alt="Welcome image"
                          /> */}
                          Welcome to Sri Murugan Temple of Waterloo Region
                        </span>{" "}
                      </div>
                      <h2
                        className="hero-title text-white"
                        data-ani="slideinup"
                        data-ani-delay="0.1s"
                      >
                        {/* telugu script */}
                         శ్రీ సుబ్రహ్మణ్య స్వామి దేవాలయం, వాటర్లూ<br /> ప్రాంతం
                      </h2>
                      <div
                        data-ani="slideinup"
                        data-ani-delay="0.1s">
                        <Link href="/#event-calender" className="btn">
                          Upcoming Poojai
                        </Link>
                      </div>
                      {/* <p
                        className="hero-text text-white"
                        data-ani="slideinup"
                        data-ani-delay="0.2s"
                      >
                        Vestibulum rhoncus nisl ac gravida porta. Mauris eu
                        sapien lacus. Etiam molestie justo neque, in convallis
                        massa tempus in.
                      </p>
                      <div
                        className="btn-group"
                        data-ani="slideinup"
                        data-ani-delay="0.3s"
                      >
                        <Link href="/about" className="btn">
                          Learn More
                        </Link> */}
                      {/* <div className="call-media-wrap">
                          <div className="icon">
                            <img
                              src="/assets/img/icon/phone-1.svg"
                              alt="Fixturbo"
                            />
                          </div>
                          <div className="media-body">
                            <h6 className="title text-white">
                              Requesting A Call:
                            </h6>
                            <h4 className="link">
                              <a className="text-white" href="tel:6295550129">
                                (629) 555-0129
                              </a>
                            </h4>
                          </div>
                        </div> */}
                      {/* </div> */}
                    </div>
                  </div>
                  {/* <div className="col-lg-6 align-self-center">
                    <div
                      className="video-wrap text-lg-center"
                      data-ani="slideinup"
                      data-ani-delay="0.2s"
                    >
                      <a
                        href="https://www.youtube.com/watch?v=P7fi4hP_y80"
                        className="play-btn style4 popup-video"
                      >
                        <i className="fas fa-solid fa-play" />
                      </a>
                    </div>
                  </div> */}
                </div>
              </div>
            </div>
          </SwiperSlide>
          <SwiperSlide>
            <div
              className="hero-slide"
              style={{
                backgroundImage: "url(/assets/img/home/banner-5.jpg)",
                backgroundPosition: "center"

              }}
            >
              <div className="container">
                <div className="row">
                  <div className="col-xxl-7 col-xl-8 col-lg-8">
                    <div className="hero-style3">
                      <div
                        className="hero-subtitle text-white"
                        data-ani="slideinup"
                        data-ani-delay="0s"
                      >
                        <span>
                          {/* <img
                            src="/assets/img/home/our-vision-bg.png"
                            alt="Welcome image"
                          /> */}
                          Welcome to Sri Murugan Temple of Waterloo Region
                        </span>{" "}
                      </div>
                      <h2
                        className="hero-title text-white"
                        data-ani="slideinup"
                        data-ani-delay="0.1s"
                      >
                        ശ്രീ മുരുകൻ ക്ഷേത്രം വാട്ടർലൂയും സമൂഹ കേന്ദ്രവും
                      </h2>
                      <div
                        data-ani="slideinup"
                        data-ani-delay="0.1s">
                        <Link href="/#event-calender" className="btn">
                          Upcoming Poojai
                        </Link>
                      </div>

                      {/* <p
                        className="hero-text text-white"
                        data-ani="slideinup"
                        data-ani-delay="0.2s"
                      >
                        Vestibulum rhoncus nisl ac gravida porta. Mauris eu
                        sapien lacus. Etiam molestie justo neque, in convallis
                        massa tempus in.
                      </p>
                      <div
                        className="btn-group"
                        data-ani="slideinup"
                        data-ani-delay="0.3s"
                      >
                        <Link href="/about" className="btn">
                          Learn More
                        </Link> */}
                      {/* <div className="call-media-wrap">
                          <div className="icon">
                            <img
                              src="/assets/img/icon/phone-1.svg"
                              alt="Fixturbo"
                            />
                          </div>
                          <div className="media-body">
                            <h6 className="title text-white">
                              Requesting A Call:
                            </h6>
                            <h4 className="link">
                              <a className="text-white" href="tel:6295550129">
                                (629) 555-0129
                              </a>
                            </h4>
                          </div>
                        </div> */}
                      {/* </div> */}
                    </div>
                  </div>
                  {/* <div className="col-lg-6 align-self-center">
                    <div
                      className="video-wrap text-lg-center"
                      data-ani="slideinup"
                      data-ani-delay="0.2s"
                    >
                      <a
                        href="https://www.youtube.com/watch?v=P7fi4hP_y80"
                        className="play-btn style4 popup-video"
                      >
                        <i className="fas fa-solid fa-play" />
                      </a>
                    </div>
                  </div> */}
                </div>
              </div>
            </div>
          </SwiperSlide>
        </Swiper>
      </div>
    </div>
  );
};

export default HeroBanner;
