"use client";
import Link from "next/link";
import React, { useEffect, useState } from "react";
import Marquee from "react-fast-marquee";
import { Swiper, SwiperSlide } from "swiper/react";
import { Navigation, FreeMode, Thumbs, EffectFade, Autoplay } from "swiper";

const HeaderFour = () => {
  const [active, setActive] = useState(false);
  const [scroll, setScroll] = useState(false);

  useEffect(() => {
    var offCanvasNav = document.getElementById("offcanvas-navigation");
    var offCanvasNavSubMenu = offCanvasNav.querySelectorAll(".sub-menu");

    for (let i = 0; i < offCanvasNavSubMenu.length; i++) {
      offCanvasNavSubMenu[i].insertAdjacentHTML(
        "beforebegin",
        "<span class='mean-expand-class'>+</span>"
      );
    }

    var menuExpand = offCanvasNav.querySelectorAll(".mean-expand-class");
    var numMenuExpand = menuExpand.length;

    function sideMenuExpand() {
      if (this.parentElement.classList.contains("active") === true) {
        this.parentElement.classList.remove("active");
      } else {
        for (let i = 0; i < numMenuExpand; i++) {
          menuExpand[i].parentElement.classList.remove("active");
        }
        this.parentElement.classList.add("active");
      }
    }

    for (let i = 0; i < numMenuExpand; i++) {
      menuExpand[i].addEventListener("click", sideMenuExpand);
    }
    window.onscroll = () => {
      if (window.pageYOffset < 150) {
        setScroll(false);
      } else if (window.pageYOffset > 150) {
        setScroll(true);
      }
      return () => (window.onscroll = null);
    };
  }, []);

  const mobileMenu = () => {
    setActive(!active);
  };
  return (
    <header className="nav-header header-layout3">
      <div className="header-top">
        <div className="container-fluid">
          <div className="header-swiper-container">
            <Swiper
              loop={true}
              spaceBetween={30}
              slidesPerView={1} // Ensures only 1 slide at a time
              speed={1000} // Transition speed of 1s
              autoplay={{ delay: 5000, disableOnInteraction: false }} // 5-second delay
              pagination={{ clickable: true }} // Enables pagination dots
              modules={[Autoplay]}
              className="mySwiper"
            >
              <SwiperSlide>
                <div className="header-links text-center">
                  <p className="mb-0">ஸ்ரீ முருகன் கோவில் வோட்டர்லூ மற்றும் சமூக மையம், ஒன்டாரியோ, கனடா.</p>
                </div>
              </SwiperSlide>

              <SwiperSlide>
                <div className="header-links text-center">
                  <p className="mb-0">Sri Murugan Temple Waterloo Region and Community Center, Ontario, Canada.</p>
                </div>
              </SwiperSlide>

              <SwiperSlide>
                <div className="header-links text-center">
                  {/* kannada Script */}
                  <p className="mb-0">ಶ್ರೀ ಸುಬ್ರಹ್ಮಣ್ಯ ಸ್ವಾಮಿ ದೇವಸ್ಥಾನ, ವಾಟರ್‌ಲೂ ಪ್ರದೇಶ.</p>
                </div>
              </SwiperSlide>

              <SwiperSlide>
                <div className="header-links text-center">
                  {/* Telugu Script */}
                  <p className="mb-0">శ్రీ సుబ్రహ్మణ్య స్వామి దేవాలయం, వాటర్లూ ప్రాంతం</p>
                </div>
              </SwiperSlide>
            </Swiper>
          </div>
          {/* <div className="row justify-content-center justify-content-lg-between align-items-center gy-2">
            <div className="col-auto">
              <div className="header-links">
                <Marquee className="text-white">
                  | ஸ்ரீ முருகன் கோவில், வோட்டர்லூ பகுதி மற்றும் சமூக மையம் | శ్రీ సుబ్రమణ్య స్వామి దేవాలయం, వాటర్లో ప్రాంతం | ശ്രീ മുരുകൻ ക്ഷേത്രം, വാട്ടർലൂ റീജിയൻ & കമ്മ്യൂണിറ്റി സെൻ്റർ | ವಾಟರ್ಲೂ ಪ್ರದೇಶದ ಶ್ರೀ ಮುರುಗನ್ ದೇವಸ್ಥಾನ ಮತ್ತು ಸಮುದಾಯ ಕೇಂದ್ರ |
                </Marquee>
              </div>
            </div> */}
          {/* <div className="col-auto">
              <div className="header-links ps-0">
                <ul>
                  <li>
                    <div className="social-links">
                      <Link href="https://www.facebook.com/">
                        <i className="fab fa-facebook-f" />
                      </Link>
                      <Link href="https://www.instagram.com/">
                        <i className="fab fa-instagram" />
                      </Link>
                      <Link href="https://www.twitter.com/">
                        <i className="fab fa-twitter" />
                      </Link>
                      <Link href="https://www.linkedin.com/">
                        <i className="fab fa-linkedin" />
                      </Link>
                    </div>
                  </li>
                </ul>
              </div>
            </div> */}
          {/* </div> */}
        </div>
      </div>
      <div className={`sticky-wrapper ${scroll && "sticky"}`}>
        {/* Main Menu Area */}
        <div className="menu-area">
          <div className="container">
            <div className="row align-items-center">
              {/* Logo Section */}
              <div className="col-xl-2 col-md-2 col-6">
                <div className="header-logo">
                  <Link href="/">
                    <img src="/assets/img/logo-resized.png" alt="logo" className="logo-header" />
                  </Link>
                </div>
              </div>

              {/* Other Content Section */}
              <div className="col-xl-8 col-md-9 col-6 text-lg-center text-end">

                <nav className="main-menu d-none d-lg-inline-block">
                  <ul>
                    <li>
                      <Link href="/">Home</Link>
                      {/* <ul className="sub-menu">
                        <li>
                          <Link href="">Home 01</Link>
                        </li>
                        <li>
                          <Link href="home-2">Home 02</Link>
                        </li>
                        <li>
                          <Link href="home-3">Home 03</Link>
                        </li>
                        <li>
                          <Link href="home-4">Home 04</Link>
                        </li>
                        <li>
                          <Link href="home-5">Home 05</Link>
                        </li>
                        <li>
                          <Link href="home-6">Home 06</Link>
                        </li>
                      </ul> */}
                    </li>
                    <li>
                      <Link href="/about-us">About Us</Link>
                    </li>

                    <li>
                      <Link href="/services">Services</Link>
                    </li>

                    <li className="menu-item-has-children">
                      <Link href="/donation">Donation</Link>
                      <ul className="sub-menu">
                        <li>
                          <Link href="/event-annathanam">Annadanam</Link>
                        </li>
                        <li>
                          <Link href="#">Ubayam</Link>
                        </li>
                      </ul>
                    </li>
                    {/* <li className="menu-item-has-children">
                      <Link href="#">Online</Link>
                      <ul className="sub-menu">
                        <li className="menu-item-has-children relative">
                          <Link href="#">Membership</Link>
                          <ul style={{ position: "absolute", right: "20px", background: "#d2a530", border: "none", padding: "10px" }}>
                            <li>
                              <Link href="/annual-membership">Annual Membership</Link>
                            </li>
                            <li>
                              <Link href="/life-membership">Life Membership</Link>
                            </li>
                          </ul>
                        </li>
                        <li className="menu-item-has-children relative">
                          <Link href="#">Events</Link>
                          <ul style={{ position: "absolute", right: "20px", background: "#d2a530", border: "none", padding: "10px", width: "300px" }}>
                            <li>
                              <Link href="/event-vilakkupoojai">Thiru Vilakku Poojai - Past</Link>
                            </li>
                            <li>
                              <Link href="/event-thaipoosam">Thaipoosam Festival - Past</Link>
                            </li>
                           
                          </ul>
                        </li>
                      </ul>
                    </li> */}

                    <li className="menu-item-has-children">
                      <Link href="#">Membership</Link>
                      <ul className="sub-menu">
                        <li>
                          <Link href="/annual-membership">Annual Membership</Link>
                        </li>
                        <li>
                          <Link href="/life-membership">Life Membership</Link>
                        </li>
                      </ul>
                    </li>

                    <li className="menu-item-has-children">
                      <Link href="#">Events</Link>
                      <ul className="sub-menu">

                        {/* 2025 Events */}
                        <li className="menu-item-has-children relative">
                          <Link href="#">2025</Link>
                          <ul
                            style={{
                              position: "absolute",
                              right: "100%",
                              top: "0",
                              background: "#d2a530",
                              border: "none",
                              padding: "10px",
                              width: "320px",
                            }}
                          >
                            <li>
                              <Link href="/event-sathya-narayana-poojai">Sathya Narayana Poojai</Link>
                            </li>
                            <li>
                              <Link href="/event-sangada-hara-charthurthi-december">Sangada Hara Chathurthi</Link>
                            </li>
                            <li>
                              <Link href="/event-vilakkupoojai">Thiru Vilakku Poojai - Past</Link>
                            </li>
                            <li>
                              <Link href="/event-thaipoosam">Thaipoosam Festival - Past</Link>
                            </li>
                          </ul>
                        </li>

                        {/* 2026 Events */}
                        <li className="menu-item-has-children relative">
                          <Link href="#">2026</Link>
                          <ul
                            style={{
                              position: "absolute",
                              right: "100%",
                              top: "0",
                              background: "#d2a530",
                              border: "none",
                              padding: "10px",
                              width: "320px",
                            }}
                          >
                            {/* <li>
                            <Link href="/event-pranaprathistapanai-pujai">Pranaprathistapanai Pujai</Link>
                              </li> */}
                            <li>
                              <Link href="/event-new-year">New Year Celebration</Link>
                            </li>
                            <li>
                              <Link href="/event-thai-poosam">Thai Poosam</Link>
                            </li>
                            <li>
                              <Link href="/event-sangada-hara-charthurthi-march">Sangada Hara Chathurthi</Link>
                            </li>
                            <li>
                              <Link href="/event-sangada-hara-charthurthi-april">Sangada Hara Chathurthi</Link>
                            </li>
                            <li>
                              <Link href="/event-chitra-pournami">Chitra Pournami</Link>
                            </li>
                            <li>
                              <Link href="/event-monthly-karthigai-may">Monthly Karthigai</Link>
                            </li>
                            <li>
                              <Link href="/event-vaikasi-visagam">Vaikasi Visagam</Link>
                            </li>
                            <li>
                              <Link href="/event-sangada-hara-charthurthi-june">Sangada Hara Chathurthi</Link>
                            </li>
                            <li>
                              <Link href="/event-monthly-karthigai-june">Monthly Karthigai</Link>
                            </li>
                          </ul>
                        </li>
                      </ul>
                    </li>


                    {/* <li className="menu-item-has-children ">
                      <Link href="#">Online</Link>
                      <ul className="sub-menu">


                        <li className="menu-item-has-children relative">
                          <Link href="#">Membership</Link>
                          <ul style={{ position: "absolute", right: "20px", background: "#d2a530", border: "none", padding: "10px" }}>
                            <li>
                              <Link href="/annual-membership">Annual Membership</Link>
                            </li>
                            <li>
                              <Link href="/life-membership">Life Membership</Link>
                            </li>
                          </ul>
                        </li>
                        <li className="menu-item-has-children relative">
                          <Link href="#">Events</Link>
                          <ul style={{ position: "absolute", right: "20px", background: "#d2a530", border: "none", padding: "10px" }}>

                            <li className="menu-item-has-children relative">
                              <Link href="#">Upcoming Events</Link>
                              <ul style={{ position: "absolute", right: "100%", top: "0", background: "#d2a530", border: "none", padding: "10px" }}>
                                <li>
                                  <Link href="/event-annathanam">Annadanam</Link>
                                </li>
                                <li>
                                  <Link href="/event-annathanam">Annadanam2</Link>
                                </li>
                              </ul>
                            </li>

                            <li className="menu-item-has-children relative">
                              <Link href="#">Past Events</Link>
                              <ul style={{ position: "absolute", right: "100%", top: "0", background: "#d2a530", border: "none", padding: "10px" }}>
                                <li>
                                  <Link href="/event-thaipoosam">Thaipoosam Festival</Link>
                                </li>
                                <li>
                                  <Link href="/event-vilakkupoojai">Thiru Vilakku Poojai</Link>
                                </li>
                              </ul>
                            </li>

                          </ul>
                        </li>

                      </ul>
                    </li> */}

                    <li>
                      <Link href="/gallery">Gallery</Link>
                    </li>
                    {/* <li>
                      <Link href="faq">Faq</Link>
                    </li> */}
                    {/* <li className="menu-item-has-children">
                      <Link href="#">Services</Link>
                      <ul className="sub-menu">
                        <li>
                          <Link href="service">Service</Link>
                        </li>
                        <li>
                          <Link href="service-details">Service Details</Link>
                        </li>
                      </ul>
                    </li> */}
                    {/* <li className="menu-item-has-children">
                      <Link href="#">Projects</Link>
                      <ul className="sub-menu">
                        <li>
                          <Link href="project">Projects</Link>
                        </li>
                        <li>
                          <Link href="project-details">Projects Details</Link>
                        </li>
                      </ul>
                    </li> */}
                    {/* <li>
                      <Link href="/blog">Blog</Link> */}
                    {/* <ul className="sub-menu">
                        <li>
                          <Link href="blog">Blog</Link>
                        </li>
                        <li>
                          <Link href="blog-details">Blog Details</Link>
                        </li>
                      </ul> */}
                    {/* </li> */}
                    <li className="menu-item-has-children ">
                      <Link href="#" >Resources</Link>
                      <ul className="sub-menu">
                        <li className="menu-item-has-children relative">
                          <Link href="#">General</Link>
                          <ul style={{ position: "absolute", right: "20px", background: "#d2a530", border: "none", padding: "10px", }}>
                            <li>
                              <Link href="/arupadai-veedu">India</Link>
                            </li>
                            <li>
                              <Link href="/canada">Canada</Link>
                            </li>
                            <li>
                              <Link href="/srilanka">Srilanka</Link>
                            </li>
                          </ul>
                        </li>
                        {/* <li>
                          <Link href="/blog">Blog</Link>
                        </li> */}
                        <li>
                          <Link href="https://srirangaminfo.com/tamil-rasi-calculator.php" target="_blank">Rasi Calculator</Link>
                        </li>
                        <li>
                          <Link href="https://www.drikpanchang.com/tamil/tamil-month-panchangam.html" target="_blank">Panchangam</Link>
                        </li>
                        <li>
                          <Link href="/books">Books</Link>
                        </li>

                      </ul>
                    </li>
                    {/* <li className="menu-item-has-children">
                      <Link href="#">Pages</Link>
                      <ul className="sub-menu">
                        <li>
                          <Link href="team">Team Page</Link>
                        </li>
                        <li>
                          <Link href="team-details">Team Details</Link>
                        </li>
                        <li>
                          <Link href="shop">Shop Page</Link>
                        </li>
                        <li>
                          <Link href="shop-details">Shop Details</Link>
                        </li>
                        <li>
                          <Link href="cart">Cart</Link>
                        </li>
                        <li>
                          <Link href="checkout">Checkout</Link>
                        </li>
                        <li>
                          <Link href="wishlist">Wishlist</Link>
                        </li>
                      </ul>
                    </li> */}


                    <li className="menu-item-has-children">
                      <Link href="#">Contact</Link>
                      <ul className="sub-menu">
                        <li>
                          <Link href="/faq">FAQ</Link>
                        </li>

                        <li>
                          <Link href="/contact">Contact</Link>
                        </li>

                      </ul>
                    </li>
                  </ul>
                </nav>
                <div className="navbar-right d-inline-flex d-lg-none">
                  <button
                    type="button"
                    className="menu-toggle icon-btn"
                    onClick={mobileMenu}
                  >
                    <i className="fas fa-bars" />
                  </button>
                </div>
              </div>
              <div className="col-xl-2 col-0 d-xl-block d-none">
                <div className="header-button">
                  <Link href="/donation" className="btn style3">
                    Donate Now
                  </Link>
                </div>
              </div>
            </div>
          </div>
        </div>

        {/* Mobile Menu */}
        <div className={`mobile-menu-wrapper  ${active && "body-visible"}`}>
          <div className="mobile-menu-area">
            <div className="mobile-logo">
              <Link href="/">
                <img src="/assets/img/logo-resized.png" alt="logo" className="logo-header" />              </Link>
              <button className="menu-toggle" onClick={mobileMenu}>
                <i className="fa fa-times" />
              </button>
            </div>
            <div className="mobile-menu">
              <ul id="offcanvas-navigation">
                <li>
                  <Link href="/">Home</Link>
                  {/* <ul className="sub-menu submenu-class">
                    <li>
                      <Link href="">Home 01</Link>
                    </li>
                    <li>
                      <Link href="home-2">Home 02</Link>
                    </li>
                    <li>
                      <Link href="home-3">Home 03</Link>
                    </li>
                    <li>
                      <Link href="home-4">Home 04</Link>
                    </li>
                    <li>
                      <Link href="home-5">Home 05</Link>
                    </li>
                    <li>
                      <Link href="home-6">Home 06</Link>
                    </li>
                  </ul> */}
                </li>
                <li>
                  <Link href="/about-us">About Us</Link>
                </li>

                <li>
                  <Link href="/services">Services</Link>
                </li>

                <li className="menu-item-has-children">
                  <Link href="/donation">Donation</Link>
                  <ul className="sub-menu">
                    <li>
                      <Link href="/event-annathanam">Annadanam</Link>
                    </li>
                    <li>
                      <Link href="#">Ubayam</Link>
                    </li>
                  </ul>
                </li>
                {/* <li className="menu-item-has-children submenu-item-has-children">
                  <Link href="#">Pages</Link>
                  <ul className="sub-menu submenu-class">
                    <li>
                      <Link href="team">Team Page</Link>
                    </li>
                    <li>
                      <Link href="team-details">Team Details</Link>
                    </li>
                    <li>
                      <Link href="shop">Shop Page</Link>
                    </li>
                    <li>
                      <Link href="shop-details">Shop Details</Link>
                    </li>
                    <li>
                      <Link href="cart">Cart</Link>
                    </li>
                    <li>
                      <Link href="checkout">Checkout</Link>
                    </li>
                    <li>
                      <Link href="wishlist">Wishlist</Link>
                    </li>
                  </ul>
                </li>
                <li className="menu-item-has-children submenu-item-has-children">
                  <Link href="#">Project</Link>
                  <ul className="sub-menu submenu-class">
                    <li>
                      <Link href="project">Projects</Link>
                    </li>
                    <li>
                      <Link href="project-details">Project Details</Link>
                    </li>
                  </ul>
                </li>
                <li className="menu-item-has-children submenu-item-has-children">
                  <Link href="#">Service</Link>
                  <ul className="sub-menu submenu-class">
                    <li>
                      <Link href="service">Service</Link>
                    </li>
                    <li>
                      <Link href="service-details">Service Details</Link>
                    </li>
                  </ul>
                </li>
                <li className="menu-item-has-children submenu-item-has-children">
                  <Link href="#">Shop</Link>
                  <ul className="sub-menu submenu-class">
                    <li>
                      <Link href="shop">Shop</Link>
                    </li>
                    <li>
                      <Link href="shop-details">Shop Details</Link>
                    </li>
                    <li>
                      <Link href="cart">Cart</Link>
                    </li>
                    <li>
                      <Link href="checkout">Checkout</Link>
                    </li>
                    <li>
                      <Link href="wishlist">Wishlist</Link>
                    </li>
                  </ul>
                </li> */}
                <li className="menu-item-has-children">
                  <Link href="#">Membership</Link>
                  <ul className="sub-menu">
                    <li>
                      <Link href="/annual-membership">Annual Membership</Link>
                    </li>
                    <li>
                      <Link href="/life-membership">Life Membership</Link>
                    </li>
                  </ul>
                </li>

                <li className="menu-item-has-children submenu-item-has-children">
                  <Link href="#">Events</Link>
                  <ul className="sub-menu submenu-class" style={{ position: "static !important" }}>
                    <li className="menu-item-has-children">
                      <Link href="#">2025</Link>
                      <ul style={{ position: "static" }}>
                        <li>
                          <Link href="/event-sathya-narayana-poojai">Sathya Narayana Poojai</Link>
                        </li>
                        <li>
                          <Link href="/event-sangada-hara-charthurthi-december">Sangada Hara Chathurthi</Link>
                        </li>
                        <li>
                          <Link href="/event-vilakkupoojai">Thiru Vilakku Poojai - Past</Link>
                        </li>
                        <li>
                          <Link href="/event-thaipoosam">Thaipoosam Festival - Past</Link>
                        </li>
                      </ul>
                    </li>

                    <li className="menu-item-has-children">
                      <Link href="#">2026</Link>
                      <ul style={{ position: "static" }}>
                        <li>
                          <Link href="/event-new-year">New Year Celebration</Link>
                        </li>
                        <li>
                          <Link href="/event-thai-poosam">Thai Poosam</Link>
                        </li>
                        <li>
                          <Link href="/event-sangada-hara-charthurthi-march">Sangada Hara Chathurthi</Link>
                        </li>
                        <li>
                          <Link href="/event-sangada-hara-charthurthi-april">Sangada Hara Chathurthi</Link>
                        </li>
                        <li>
                          <Link href="/event-chitra-pournami">Chitra Pournami</Link>
                        </li>
                        <li>
                          <Link href="/event-monthly-karthigai-may">Monthly Karthigai</Link>
                        </li>
                        <li>
                          <Link href="/event-vaikasi-visagam">Vaikasi Visagam</Link>
                        </li>
                        <li>
                          <Link href="/event-sangada-hara-charthurthi-june">Sangada Hara Chathurthi</Link>
                        </li>
                        <li>
                          <Link href="/event-monthly-karthigai-june">Monthly Karthigai</Link>
                        </li>
                      </ul>
                    </li>
                  </ul>
                </li>

                <li>
                  <Link href="/gallery">Gallery</Link>
                </li>

                {/* <li>
                  <Link href="/blog">Blog</Link> */}

                {/* <ul className="sub-menu submenu-class">
                    <li>
                      <Link href="blog">Blog</Link>
                    </li>
                    
                    <li>
                      <Link href="blog-details">Blog Details</Link>
                    </li>
                  </ul> */}
                {/* </li> */}
                <li className="menu-item-has-children ">
                  <Link href="#" >Resources</Link>
                  <ul className="sub-menu" style={{ position: "static !important" }}>
                    <li className="menu-item-has-children relative">
                      <Link href="#">General</Link>
                      <ul >
                        <li>
                          <Link href="/arupadai-veedu">India</Link>
                        </li>
                        <li>
                          <Link href="/canada">Canada</Link>
                        </li>
                        <li>
                          <Link href="/srilanka">Srilanka</Link>
                        </li>
                      </ul>
                    </li>
                    {/* <li>
                      <Link href="/blog">Blog</Link>
                    </li> */}
                    <li>
                      <Link href="https://srirangaminfo.com/tamil-rasi-calculator.php" target="_blank">Rasi Calculator</Link>
                    </li>
                    <li>
                      <Link href="https://www.drikpanchang.com/tamil/tamil-month-panchangam.html" target="_blank">Panchangam</Link>
                    </li>
                    <li>
                      <Link href="/books">Books</Link>
                    </li>

                  </ul>
                </li>
                <li className="menu-item-has-children">
                  <Link href="#">Contact</Link>
                  <ul className="sub-menu">
                    <li>
                      <Link href="/faq">FAQ</Link>
                    </li>
                    <li>
                      <Link href="/contact">Contact</Link>
                    </li>

                  </ul>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </header>
  );
};

export default HeaderFour;