"use client";

import Link from "next/link";
import React, { useState } from "react";
import { Swiper, SwiperSlide } from "swiper/react";
import { Autoplay, Pagination } from "swiper/modules";
import { events } from "@/utility/constant.utils";
import "swiper/css";
import "swiper/css/pagination";

export default function Header1({ scroll, isMobileMenu, handleMobileMenu, isSearch, handleSearch }: any) {

	const [mobileMenu, setMobileMenu] = useState(false);
	const upcomingEvents = events.filter((event: any) => event.link);

	return (
		<>
			<header>

				<div className="header-top py-3" style={{ backgroundColor: '#000000ff' }}>
					<div className="container-fluid">
						<Swiper
							loop={true}
							spaceBetween={30}
							slidesPerView={1}
							speed={2000}
							autoplay={{ delay: 5000, disableOnInteraction: false }}
							modules={[Autoplay]}
							className="mySwiper"
						>
							<SwiperSlide>
								<div className="text-center" style={{ color: 'white' }}>
									தமிழ் பண்பாட்டு சங்கம்
								</div>
							</SwiperSlide>
							<SwiperSlide>
								<div className="text-center" style={{ color: 'white' }}>
									Tamil Culture Association
								</div>
							</SwiperSlide>
							<SwiperSlide>
								<div className="text-center" style={{ color: 'white' }}>
									Association culturelle tamoule
								</div>
							</SwiperSlide>
						</Swiper>

					</div>
				</div>


				<div
					className={`header-area homepage1 header header-sticky d-none d-lg-block ${scroll ? 'sticky' : ''}`}
					id="header"
					style={{ background: "#000000ff", borderTop: "1px solid #cbc5c557" }}
				>

					<div className="container">
						<div className="row">
							<div className="col-lg-12">
								<div className="header-elements">
									<div className="site-logo">
										<Link href="/"><img src="/assets/img/logo-tca.png" alt="logo" /></Link>
									</div>
									<div className="main-menu">
										<ul>
											<li>
												<Link href="/#">Home</Link>
												{/* <div className="tp-submenu">
													<div className="row">
														<div className="col-lg-12">
															<div className="all-images-menu">
																<div className="homemenu-thumb">
																	<div className="img1">
																		<img src="/assets/img/all-images/demo/demo-img1.png" alt="" />
																	</div>
																	<div className="homemenu-btn">
																		<Link className="vl-btn1" href="/">View Demo </Link>
																	</div>
																	<div className="homemenu-text">
																		<Link href="/">Eventify-Homepage 01</Link>
																	</div>
																</div>
																<div className="homemenu-thumb">
																	<div className="img1">
																		<img src="/assets/img/all-images/demo/demo-img2.png" alt="" />
																	</div>
																	<div className="homemenu-btn">
																		<Link className="vl-btn1" href="/index2">View Demo </Link>
																	</div>
																	<div className="homemenu-text">
																		<Link href="/index2">Eventify-Homepage 02</Link>
																	</div>
																</div>
																<div className="homemenu-thumb">
																	<div className="img1">
																		<img src="/assets/img/all-images/demo/demo-img3.png" alt="" />
																	</div>
																	<div className="homemenu-btn">
																		<Link className="vl-btn1" href="/index3">View Demo </Link>
																	</div>
																	<div className="homemenu-text">
																		<Link href="/index3">Eventify-Homepage 03</Link>
																	</div>
																</div>
																<div className="homemenu-thumb">
																	<div className="img1">
																		<img src="/assets/img/all-images/demo/demo-img4.png" alt="" />
																	</div>
																	<div className="homemenu-btn">
																		<Link className="vl-btn1" href="/index4">View Demo </Link>
																	</div>
																	<div className="homemenu-text">
																		<Link href="/index4">Eventify-Homepage 04</Link>
																	</div>
																</div>
																<div className="homemenu-thumb" style={{ margin: 0 }}>
																	<div className="img1">
																		<img src="/assets/img/all-images/demo/demo-img5.png" alt="" />
																	</div>
																	<div className="homemenu-btn">
																		<Link className="vl-btn1" href="/index5">View Demo </Link>
																	</div>
																	<div className="homemenu-text">
																		<Link href="/index5">Eventify-Homepage 05</Link>
																	</div>
																</div>
															</div>
															<div className="all-images-menu">
																<div className="homemenu-thumb">
																	<div className="img1">
																		<img src="/assets/img/all-images/demo/demo-img6.png" alt="" />
																	</div>
																	<div className="homemenu-btn">
																		<Link className="vl-btn1" href="/index6">View Demo </Link>
																	</div>
																	<div className="homemenu-text">
																		<Link href="/index6">Eventify-Homepage 06</Link>
																	</div>
																</div>
																<div className="homemenu-thumb">
																	<div className="img1">
																		<img src="/assets/img/all-images/demo/demo-img7.png" alt="" />
																	</div>
																	<div className="homemenu-btn">
																		<Link className="vl-btn1" href="/index7">View Demo </Link>
																	</div>
																	<div className="homemenu-text">
																		<Link href="/index7">Eventify-Homepage 07</Link>
																	</div>
																</div>
																<div className="homemenu-thumb">
																	<div className="img1">
																		<img src="/assets/img/all-images/demo/demo-img8.png" alt="" />
																	</div>
																	<div className="homemenu-btn">
																		<Link className="vl-btn1" href="/index8">View Demo </Link>
																	</div>
																	<div className="homemenu-text">
																		<Link href="/index8">Eventify-Homepage 08</Link>
																	</div>
																</div>
																<div className="homemenu-thumb">
																	<div className="img1">
																		<img src="/assets/img/all-images/demo/demo-img9.png" alt="" />
																	</div>
																	<div className="homemenu-btn">
																		<Link className="vl-btn1" href="/index9">View Demo </Link>
																	</div>
																	<div className="homemenu-text">
																		<Link href="/index9">Eventify-Homepage 09</Link>
																	</div>
																</div>
																<div className="homemenu-thumb" style={{ margin: 0 }}>
																	<div className="img1">
																		<img src="/assets/img/all-images/demo/demo-img10.png" alt="" />
																	</div>
																	<div className="homemenu-btn">
																		<Link className="vl-btn1" href="/index10">View Demo </Link>
																	</div>
																	<div className="homemenu-text">
																		<Link href="/index10">Eventify-Homepage 10</Link>
																	</div>
																</div>
															</div>
														</div>
													</div>
												</div> */}
											</li>
											{/* <li><Link href="/about">About</Link></li> */}
											<li>
												<Link href="/about">About <i className="fa-solid fa-angle-down" /></Link>
												<ul className="dropdown-padding">
													<li><Link href="/about/association">Association</Link></li>
													<li><Link href="/about/mission">Mission</Link></li>
													<li><Link href="/about/constitution">Constitution</Link></li>
													<li><Link href="/about/committee">Committee</Link></li>
												</ul>
											</li>
											<li className="dropdown">
												<Link href="/tamil-culture">
													Tamil Culture <i className="fa-solid fa-angle-down" />
												</Link>
												<ul className="dropdown-menu, dropdown-padding">
													{/* Tamil Festivals */}
													<li className="dropdown-submenu">
														<Link href="/tamil-culture/tamil-festivals">Tamil Festivals <i className="fa-solid fa-angle-down" />
														</Link>
														<ul className="submenu">
															<li><Link href="/tamil-culture/tamil-festivals/hindu-festivals">Hindu Festivals</Link></li>
															<li><Link href="/tamil-culture/tamil-festivals/muslim-festivals">Muslim Festivals</Link></li>
															<li><Link href="/tamil-culture/tamil-festivals/christian-festivals">Christian Festivals</Link></li>
														</ul>
													</li>

													{/* Tamil Wedding & Custom */}
													<li className="dropdown-submenu">
														<Link href="/tamil-culture/tamil-wedding-custom">
															Tamil Wedding & Custom <i className="fa-solid fa-angle-down" />
														</Link>
														<ul className="submenu">
															<li><Link href="/tamil-culture/tamil-wedding-custom/hindu-wedding-rituals">Hindu Wedding Rituals</Link></li>
															<li><Link href="/tamil-culture/tamil-wedding-custom/protestant-wedding">A Tamil Protestant Wedding</Link></li>
															<li><Link href="/tamil-culture/tamil-wedding-custom/catholic-wedding">Tamil Catholic Wedding</Link></li>
															<li><Link href="/tamil-culture/tamil-wedding-custom/city-style">Marriage – City Style</Link></li>
															<li><Link href="/tamil-culture/tamil-wedding-custom/bridal-makeup">Bridal Make Up</Link></li>
															<li><Link href="/tamil-culture/tamil-wedding-custom/story-of-saree">The Story Of The Saree</Link></li>
														</ul>
													</li>

													{/* Tamil Language */}
													<li>
														<Link href="/tamil-culture/tamil-language">Tamil Language</Link>
													</li>
												</ul>
											</li>
											<li>
												<Link href="#">Events <i className="fa-solid fa-angle-down" /></Link>
												<ul className="dropdown-padding">
													<li className="dropdown-submenu">
														<Link href="/upcoming-event">
															Upcoming Event <i className="fa-solid fa-angle-down" />
														</Link>
														<ul className="submenu">
															{upcomingEvents.map((event: any) => (
																<li key={event.id}>
																	<Link href={event.link}>
																		{event.title}
																	</Link>
																</li>
															))}
														</ul>
													</li>
													<li><Link href="/photo-gallery">Photos Gallery</Link></li>
												</ul>
											</li>

											<li>
												<Link href="#">Registration <i className="fa-solid fa-angle-down" /></Link>
												<ul className="dropdown-padding">
													<li><Link href="/register/membership-2026">Membership - 2026</Link></li>
													{/* <li><Link href="/register/membership-2025">Membership - 2025</Link></li>
													<li><Link href="/register/membership-2024">Membership - 2024</Link></li> */}
													<li><Link href="/register/thai-pongal-2025">Thai Pongal</Link></li>
													<li><Link href="/register/tamil-new-year">Tamil New Year</Link></li>
													<li><Link href="/register/community-picnic">Community Picnic</Link></li>
													<li><Link href="/register/sports-day">Sports Day</Link></li>
													{/* <li><Link href="/register/kalai-vizha">Kalai Vizha</Link></li> */}
													<li><Link href="/register/christmas">Christmas & Year End</Link></li>
													<li><Link href="/register/performance">Program Performance Registration</Link></li>
													<li><Link href="/register/sponsor">Sponsor</Link></li>
													<li><Link href="/register/registration-form">Whatsapp Form</Link></li>
													<li><Link href="/register/volunteer">Volunteer</Link></li>

													{/* <li><Link href="/register/thai-pongal">Thai Pongal</Link></li>	
													<li><Link href="/register/tamil-newyear">Tamil New Year</Link></li>	 */}
												</ul>
											</li>



											<li>
												<Link href="/community">Community <i className="fa-solid fa-angle-down" /></Link>
												<ul className="dropdown-padding">
													{/* <li><Link href="/community/recipes">Recipes</Link></li> */}
													{/* <li><Link href="/community/cricket-club">Cricket Club</Link></li>
													<li><Link href="/community/badminton-club">Badminton Club</Link></li> */}
													<li><Link href="/community/business-directory">Business Directory</Link></li>
													<li><Link href="/community/kitchener-tamil-school">Kitchener Tamil School</Link></li>
													<li><Link href="/community/cambridge-tamil-school">Cambridge Tamil School</Link></li>
													<li><Link href="/community/global-relief-fund">Global Relief Fund</Link></li>

												</ul>
											</li>

											{/* <li>
												<Link href="/#">Speakers <i className="fa-solid fa-angle-down" /></Link>
												<ul className="dropdown-padding">
													<li><Link href="/speakers">Speakers</Link></li>
													<li><Link href="/speakers-single">Speakers Details</Link></li>
												</ul>
											</li> */}
											{/* <li>
												<Link href="/#">Schedule <i className="fa-solid fa-angle-down" /></Link>
												<ul className="dropdown-padding">
													<li><Link href="/event">Our Event</Link></li>
													<li><Link href="/event-schedule">Event Schedule</Link></li>
													<li><Link href="/event-single">Event Details</Link></li>
												</ul>
											</li> */}
											{/* <li>
												<Link href="/#">Blogs <i className="fa-solid fa-angle-down" /></Link>
												<ul className="dropdown-padding">
													<li><Link href="/blog">Our Blog</Link></li>
													<li><Link href="/blog-single">Blog Details</Link></li>
												</ul>
											</li> */}

											{/* <li>
												<Link href="/#">Pages <i className="fa-solid fa-angle-down" /></Link>
												<ul className="dropdown-padding">
													<li><Link href="/memories">Our Memories</Link></li>
													<li><Link href="/pricing-plan">Pricing Plan</Link></li>
													<li><Link href="/faq">FAQ,s</Link></li>
													<li><Link href="/contact">Contact Us</Link></li>
												</ul>
											</li> */}
											<li>
												<Link href="/contact">Contact</Link>
											</li>

										</ul>
									</div>

									<div className="btn-area1" style={{ marginTop: '10px' }}>
										<Link
											href="/register/membership-2026"
											className="vl-btn9"
											style={{
												fontSize: '18px',
												padding: '13px 13px',
												display: 'inline-block',
												backgroundColor: '#ffde14',
												color: 'black'
											}}
										>
											<span className="demo">Membership</span>
										</Link>
									</div>

									<div className="btn-area social-icons">
										{/* <div className="search-icon header__search header-search-btn" onClick={handleSearch}>
											<a><img src="/assets/img/icons/search1.svg" alt="" /></a>
										</div> */}
										<ul>
											<li>
												<Link href="/#"><i className="fa-brands fa-facebook-f" /></Link>
											</li>
											<li>
												<Link href="/#"><i className="fa-brands fa-instagram" /></Link>
											</li>
											{/* <li>
												<Link href="/#"><i className="fa-brands fa-linkedin-in" /></Link>
											</li>
											<li>
												<Link href="/#" className="m-0"><i className="fa-brands fa-pinterest-p" /></Link>
											</li> */}
										</ul>
									</div>
									{/* <div className={`header-search-form-wrapper ${isSearch ? 'open' : ''}`}>
										<div className="tx-search-close tx-close" onClick={handleSearch}><i className="fa-solid fa-xmark" /></div>
										<div className="header-search-container">
											<form role="search" className="search-form">
												<input type="search" className="search-field" placeholder="Search …" name="s" />
												<button type="submit" className="search-submit"><img src="/assets/img/icons/search1.svg" alt="" /></button>
											</form>
										</div>
									</div> */}
									{isSearch && <div className="body-overlay active" onClick={handleSearch} />}
								</div>
							</div>
						</div>
					</div>
				</div>
			</header>

		</>
	)
}