'use client'
import Link from 'next/link'
import { useState } from "react"

export default function HomeUpcomingEvent() {
    const [isTab, setIsTab] = useState(1)
    const handleTab = (i: number) => {
        setIsTab(i)
    }
    return (
        <>

            <div className="event3-section-area sp1">
                <div className="container">
                    <div className="row">
                        <div className="col-lg-12 m-auto">
                            <div className="event2-header heading5 space-margin60">
                                {/* <h5>Event Schedule</h5>
                                <div className="space18" /> */}
                                <h2 className="text-anime-style-3">Upcoming Events</h2>
                            </div>
                        </div>
                    </div>
                    <div className="row gx-5">
                        <div className="col-lg-10" data-aos="fade-up" data-aos-duration={1000}>
                            {/* <div className="tabs-button space-margin60">
                                <ul className="nav nav-pills" id="pills-tab" role="tablist">
                                    <li className="nav-item" onClick={() => handleTab(1)}>
                                        <button className={isTab == 1 ? "nav-link active" : "nav-link"} id="pills-home-tab" data-bs-toggle="pill" data-bs-target="#pills-home" type="button" role="tab" aria-controls="pills-home" aria-selected="true">
                                            <span className="calender"><img src="/assets/img/icons/calender2.svg" alt="" /></span>
                                            <span className="pl-8">
                                                <span className="day">Day One</span>
                                                <span className="date">May 25, 2024</span>
                                            </span>
                                        </button>
                                    </li>
                                    <li className="nav-item" onClick={() => handleTab(2)}>
                                        <button className={isTab == 2 ? "nav-link active" : "nav-link"} id="pills-profile-tab" data-bs-toggle="pill" data-bs-target="#pills-profile" type="button" role="tab" aria-controls="pills-profile" aria-selected="false">
                                            <span className="calender"><img src="/assets/img/icons/calender2.svg" alt="" /></span>
                                            <span className="pl-8">
                                                <span className="day">Day Two</span>
                                                <span className="date">May 26, 2024</span>
                                            </span>
                                        </button>
                                    </li>
                                    <li className="nav-item" onClick={() => handleTab(3)}>
                                        <button className={isTab == 3 ? "nav-link m-0 active" : "nav-link m-0"} id="pills-contact-tab" data-bs-toggle="pill" data-bs-target="#pills-contact" type="button" role="tab" aria-controls="pills-contact" aria-selected="false">
                                            <span className="calender"><img src="/assets/img/icons/calender2.svg" alt="" /> </span>
                                            <span className="pl-8">
                                                <span className="day">Day Three</span>
                                                <span className="date">May 27, 2024</span>
                                            </span>
                                        </button>
                                    </li>
                                </ul>
                            </div> */}
                            <div className="tab-content" id="pills-tabContent">
                                <div className={isTab == 1 ? "tab-pane fade show active" : "tab-pane fade"} id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab" tabIndex={0}>
                                    <div className="event-widget-area">
                                        <div className="row">
                                            <div className="col-lg-12 m-auto">
                                                <div className="event2-boxarea box1">
                                                    <h1 className="active">01</h1>
                                                    <div className="row align-items-center">
                                                        <div className="col-lg-5">
                                                            <div className="img1">
                                                                <img src="/assets/img/home/upcoming-events/upcoming-events-1.webp" alt="" />
                                                            </div>
                                                        </div>
                                                        <div className="col-lg-1" />
                                                        <div className="col-lg-6">
                                                            <div className="content-area">
                                                                <ul>
                                                                    <li>
                                                                        <Link href="/#"><img src="/assets/img/icons/clock1.svg" alt="" />5:30 PM - Sun Jan - 14 <span> | </span></Link>
                                                                    </li>
                                                                    <li>
                                                                        <Link href="/#"><img src="/assets/img/icons/location1.svg" alt="" />180 Schweitzer St, Kitchener, Canada </Link>
                                                                    </li>
                                                                </ul>
                                                                <div className="space20" />
                                                                <Link href="/event-single" className="head">Thai Pongal 2024</Link>
                                                                <div className="space24" />
                                                                <p>Holy Family Croatian Roman Catholic Parish Hall</p>
                                                                <p>Holy Family Croatian Roman Catholic Parish Hall</p>
                                                                <p>Holy Family Croatian Roman Catholic Parish Hall</p>
                                                                {/* <div className="author-area">
                                                                    <div className="autho-name-area">
                                                                        <div className="img1">
                                                                            <img src="/assets/img/all-images/testimonials/testimonial-img1.png" alt="" />
                                                                        </div>
                                                                        <div className="text">
                                                                            <Link href="/speakers">Alex Roberton</Link>
                                                                            <div className="space8" />
                                                                            <p>UI/UX Designer</p>
                                                                        </div>
                                                                    </div>
                                                                    <div className="autho-name-area" style={{ padding: '0 0 0 12px', border: 'none' }}>
                                                                        <div className="img1">
                                                                            <img src="/assets/img/all-images/testimonials/testimonial-img2.png" alt="" />
                                                                        </div>
                                                                        <div className="text">
                                                                            <Link href="/speakers">Alexys Archer</Link>
                                                                            <div className="space8" />
                                                                            <p>WP Developer</p>
                                                                        </div>
                                                                    </div>
                                                                </div> */}
                                                                <div className="space24" />
                                                                <div className="btn-area1">
                                                                    <Link href="/pricing-plan" className="vl-btn3"><span className="demo">Online Tickets</span></Link>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div className="space48" />
                                        <div className="row">

                                            <div className="col-lg-12 m-auto">
                                                <div className="event2-boxarea box1">
                                                    <h1 className="active">02</h1>
                                                    <div className="row align-items-center">
                                                        <div className="col-lg-6">
                                                            <div className="content-area">
                                                                <ul>
                                                                    <li>
                                                                        <Link href="/#"><img src="/assets/img/icons/clock1.svg" alt="" />14th April 2024 <span> | </span></Link>
                                                                    </li>
                                                                    <li>
                                                                        <Link href="/#"><img src="/assets/img/icons/location1.svg" alt="" />Christ Lutheran Church , Waterloo, ON. </Link>
                                                                    </li>
                                                                </ul>
                                                                <div className="space20" />
                                                                <Link href="/event-single" className="head">AGM</Link>
                                                                <div className="space20" />
                                                                <p>Holy Family Croatian Roman Catholic Parish Hall</p>
                                                                <p>Holy Family Croatian Roman Catholic Parish Hall</p>
                                                                <p>Holy Family Croatian Roman Catholic Parish Hall</p>
                                                                {/* <div className="space24" />
                                                                <div className="author-area">
                                                                    <div className="autho-name-area">
                                                                        <div className="img1">
                                                                            <img src="/assets/img/all-images/testimonials/testimonial-img1.png" alt="" />
                                                                        </div>
                                                                        <div className="text">
                                                                            <Link href="/speakers">Alex Roberton</Link>
                                                                            <div className="space8" />
                                                                            <p>UI/UX Designer</p>
                                                                        </div>
                                                                    </div>
                                                                    <div className="autho-name-area" style={{ padding: '0 0 0 12px', border: 'none' }}>
                                                                        <div className="img1">
                                                                            <img src="/assets/img/all-images/testimonials/testimonial-img2.png" alt="" />
                                                                        </div>
                                                                        <div className="text">
                                                                            <Link href="/speakers">Alexys Archer</Link>
                                                                            <div className="space8" />
                                                                            <p>WP Developer</p>
                                                                        </div>
                                                                    </div>
                                                                </div> */}
                                                                <div className="space24" />
                                                                <div className="btn-area1">
                                                                    <Link href="/pricing-plan" className="vl-btn3"><span className="demo">purchase ticket</span></Link>
                                                                </div>
                                                            </div>
                                                            <div className="space30 d-lg-none d-block" />
                                                        </div>
                                                        <div className="col-lg-5">
                                                            <div className="img1">
                                                                <img src="/assets/img/home/upcoming-events/upcoming-events-2.webp" alt="" />
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div className="space30" />
                                        <div className="row">

                                            <div className="col-lg-12 m-auto">
                                                <div className="event2-boxarea box1">
                                                    <h1 className="active">03</h1>
                                                    <div className="row align-items-center">
                                                        <div className="col-lg-5">
                                                            <div className="img1">
                                                                <img src="/assets/img/home/upcoming-events/upcoming-events-3.webp" alt="" />
                                                            </div>
                                                        </div>
                                                        <div className="col-lg-1" />
                                                        <div className="col-lg-6">
                                                            <div className="content-area">
                                                                <ul>
                                                                    <li>
                                                                        <Link href="/#"><img src="/assets/img/icons/clock1.svg" alt="" />22-22rd Jun 2024<span> | </span></Link>
                                                                    </li>
                                                                    <li>
                                                                        <Link href="/#"><img src="/assets/img/icons/location1.svg" alt="" />Indian & Sri Lankan Food Court, Kitchener. </Link>
                                                                    </li>
                                                                </ul>
                                                                <div className="space20" />
                                                                <Link href="/event-single" className="head">KW Multicultural Festival</Link>
                                                                <div className="space24" />
                                                                <p>Holy Family Croatian Roman Catholic Parish Hall</p>
                                                                <p>Holy Family Croatian Roman Catholic Parish Hall</p>
                                                                <p>Holy Family Croatian Roman Catholic Parish Hall</p>
                                                                {/* <div className="author-area">
                                                                    <div className="autho-name-area">
                                                                        <div className="img1">
                                                                            <img src="/assets/img/all-images/testimonials/testimonial-img1.png" alt="" />
                                                                        </div>
                                                                        <div className="text">
                                                                            <Link href="/speakers">Alex Roberton</Link>
                                                                            <div className="space8" />
                                                                            <p>UI/UX Designer</p>
                                                                        </div>
                                                                    </div>
                                                                    <div className="autho-name-area" style={{ padding: '0 0 0 12px', border: 'none' }}>
                                                                        <div className="img1">
                                                                            <img src="/assets/img/all-images/testimonials/testimonial-img2.png" alt="" />
                                                                        </div>
                                                                        <div className="text">
                                                                            <Link href="/speakers">Alexys Archer</Link>
                                                                            <div className="space8" />
                                                                            <p>WP Developer</p>
                                                                        </div>
                                                                    </div>
                                                                </div> */}
                                                                <div className="space24" />
                                                                <div className="btn-area1">
                                                                    <Link href="/pricing-plan" className="vl-btn3"><span className="demo">purchase ticket</span></Link>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                            </div>
                        </div>

                        <div className='col-lg-2'>
                            <div className="memory-boxarea pl-3">
                                <div className="img1" data-aos="zoom-in" data-aos-duration={1000} >
                                    <img src="https://tamilculturewaterloo.org/wp-content/uploads/2025/06/2025KWFestposter-1-202x300.jpg" alt="" className='mb-3' />
                                    <img src="https://tamilculturewaterloo.org/wp-content/uploads/2025/06/2025KWFestposter-1-202x300.jpg" alt="" className='mb-3' />
                                    <img src="https://tamilculturewaterloo.org/wp-content/uploads/2025/06/2025KWFestposter-1-202x300.jpg" alt="" />

                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </>
    )
}