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

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

            <div className="event3-section-area sp1">
                <div className="container">
                    <div className="row">
                        <div className="col-lg-6 m-auto">
                            <div className="event2-header heading5 text-center space-margin60">
                                {/* <h5>Event Schedule</h5> */}
                                <div className="space18" />
                                <h2 className="text-anime-style-3">Upcoming Events</h2>
                            </div>
                        </div>
                    </div>
                    <div className="row">
                        <div className="col-lg-12" data-aos="fade-up" data-aos-duration={1000}>

                            <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-1" />
                                            <div className="col-lg-10 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/all-images/event/event-img4.png" 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="" />05: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>
                                                                {/* <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-1" />
                                            <div className="col-lg-10 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="" />Apr 14, 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="space24" />
                                                                <p>Christ Lutheran Church , Waterloo, ON</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 className="space30 d-lg-none d-block" />
                                                        </div>
                                                        <div className="col-lg-5">
                                                            <div className="img1">
                                                                <img src="/assets/img/all-images/event/event-img5.png" alt="" />
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div className="space30" />
                                        <div className="row">
                                            <div className="col-lg-1" />
                                            <div className="col-lg-10 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/all-images/event/event-img6.png" 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="" />Jun 22-23, 2024<span> | </span></Link>
                                                                    </li>
                                                                    <li>
                                                                        <Link href="/#"><img src="/assets/img/icons/location1.svg" alt="" />Indian & Sri Lankan Food Court, Kitchener, ON.</Link>
                                                                    </li>
                                                                </ul>
                                                                <div className="space20" />
                                                                <Link href="/event-single" className="head">KW Multicultural Festival</Link>
                                                                <div className="space24" />
                                                                <p>Indian & Sri Lankan Food Court, Victoria Park, Kitchener, ON.</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>Indian & Sri Lankan Food Court, Victoria Park, Kitchener, ON.</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="space30" />
                                        <div className="row">
                                            <div className="col-lg-1" />
                                            <div className="col-lg-10 m-auto">
                                                <div className="event2-boxarea box1">
                                                    <h1 className="active">04</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="" />10:00 AM - Sun Jul 7, 2024<span> | </span></Link>
                                                                    </li>
                                                                    <li>
                                                                        <Link href="/#"><img src="/assets/img/icons/location1.svg" alt="" />Pinehurst Lake Conservation – Ayr, ON.</Link>
                                                                    </li>
                                                                </ul>
                                                                <div className="space20" />
                                                                <Link href="/event-single" className="head">TCA Picnic – Potlock</Link>
                                                                <div className="space24" />
                                                                <p>Pinehurst Lake Conservation Area – Sutor Shelter, Ayr, ON.</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">Registration required</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/all-images/event/event-img5.png" alt="" />
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div className="space30" />
                                        <div className="row">
                                            <div className="col-lg-1" />
                                            <div className="col-lg-10 m-auto">
                                                <div className="event2-boxarea box1">
                                                    <h1 className="active">05</h1>
                                                    <div className="row align-items-center">
                                                        <div className="col-lg-5">
                                                            <div className="img1">
                                                                <img src="/assets/img/all-images/event/event-img6.png" 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="" />Jul 27-28, 2024<span> | </span></Link>
                                                                    </li>
                                                                    <li>
                                                                        <Link href="/#"><img src="/assets/img/icons/location1.svg" alt="" />Waterloo Park, Waterloo, ON.</Link>
                                                                    </li>
                                                                </ul>
                                                                <div className="space20" />
                                                                <Link href="/event-single" className="head">South Asian Family Sports Day</Link>
                                                                <div className="space24" />
                                                                <p>MEMBERS ONLY</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>Indian & Sri Lankan Food Court, Victoria Park, Kitchener, ON.</p>
                                                                        </div>
                                                                    </div>
                                                                </div> */}
                                                                <div className="space24" />
                                                                <div className="btn-area1">
                                                                    <Link href="/pricing-plan" className="vl-btn3"><span className="demo">Registration required</span></Link>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div className="space30" />
                                        <div className="row">
                                            <div className="col-lg-1" />
                                            <div className="col-lg-10 m-auto">
                                                <div className="event2-boxarea box1">
                                                    <h1 className="active">06</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="" />06:30-08:30 PM - Aug 23, 2023<span> | </span></Link>
                                                                    </li>
                                                                    <li>
                                                                        <Link href="/#"><img src="/assets/img/icons/location1.svg" alt="" />Doon Campus, Kitchener, Ontario</Link>
                                                                    </li>
                                                                </ul>
                                                                <div className="space20" />
                                                                <Link href="/event-single" className="head">Conestoga College Workshop</Link>
                                                                <div className="space24" />
                                                                <p>Conestoga College Welcome Centre, Room DO-WC-241</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 className="space30 d-lg-none d-block" />
                                                        </div>
                                                        <div className="col-lg-5">
                                                            <div className="img1">
                                                                <img src="/assets/img/all-images/event/event-img5.png" alt="" />
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div className="space30" />
                                        <div className="row">
                                            <div className="col-lg-1" />
                                            <div className="col-lg-10 m-auto">
                                                <div className="event2-boxarea box1">
                                                    <h1 className="active">07</h1>
                                                    <div className="row align-items-center">
                                                        <div className="col-lg-5">
                                                            <div className="img1">
                                                                <img src="/assets/img/all-images/event/event-img6.png" 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="" />06:30 AM-08:30 PM - Aug 23, 2023<span> | </span></Link>
                                                                    </li>
                                                                    <li>
                                                                        <Link href="/#"><img src="/assets/img/icons/location1.svg" alt="" />Doon Campus, Kitchener, Ontario</Link>
                                                                    </li>
                                                                </ul>
                                                                <div className="space20" />
                                                                <Link href="/event-single" className="head">Tamil Cultural Nite</Link>
                                                                <div className="space24" />
                                                                <p>TBA</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="space30" />
                                        <div className="row">
                                            <div className="col-lg-1" />
                                            <div className="col-lg-10 m-auto">
                                                <div className="event2-boxarea box1">
                                                    <h1 className="active">08</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="" />1.00 PM-4.30 PM - Sat Oct 26, 2024<span> | </span></Link>
                                                                    </li>
                                                                    <li>
                                                                        <Link href="/#"><img src="/assets/img/icons/location1.svg" alt="" />Waterloo Public Library</Link>
                                                                    </li>
                                                                </ul>
                                                                <div className="space20" />
                                                                <Link href="/event-single" className="head">TCA – WPL Deepavali Celebrations</Link>
                                                                <div className="space24" />
                                                                <p>John M. Harper Branch 500 Fischer-Hallman Rd N, Waterloo, ON</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 className="space30 d-lg-none d-block" />
                                                        </div>
                                                        <div className="col-lg-5">
                                                            <div className="img1">
                                                                <img src="/assets/img/all-images/event/event-img5.png" alt="" />
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div className="space30" />
                                        <div className="row">
                                            <div className="col-lg-1" />
                                            <div className="col-lg-10 m-auto">
                                                <div className="event2-boxarea box1">
                                                    <h1 className="active">09</h1>
                                                    <div className="row align-items-center">
                                                        <div className="col-lg-5">
                                                            <div className="img1">
                                                                <img src="/assets/img/all-images/event/event-img6.png" 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="" />05:00 PM-09:00 PM - Sat Dec 21, 2024<span> | </span></Link>
                                                                    </li>
                                                                    <li>
                                                                        <Link href="/#"><img src="/assets/img/icons/location1.svg" alt="" />RIM Park</Link>
                                                                    </li>
                                                                </ul>
                                                                <div className="space20" />
                                                                <Link href="/event-single" className="head">Christmas & 2024 Year End Celebration</Link>
                                                                <div className="space24" />
                                                                <p>2001 University Ave E, Waterloo, ON N2K 4K4</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>Indian & Sri Lankan Food Court, Victoria Park, Kitchener, ON.</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>
                                </div>

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

        </>
    )
}