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


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

    const [currentMonth, setCurrentMonth] = useState(moment());
    
    const events = [
        {
            id: 1,
            date: "Sun Jan-14",
            time: "05:30 PM",
            title: "Thai Pongal 2024",
            url: "#",
        },
        {
        
        id: 2,
        date: "Apr 14, 2024",
        title: "AGM",
        url: "#",
    },
        
    {
        id: 3,
        date: "Jun 22-23, 2024",
        title: "KW Multicultural Festival",
        url: "#",
    },
    {
        id: 4,
        date: "Sun Jul 7, 2024",
        time: "10:00 AM",
        title: "TCA Picnic – Potlock",
        url: "#",
    },
    {
        id: 5,
        date: "Jul 27-28, 2024",
        title: "South Asian Family Sports Day",
        url: "#",
    },
    {
        id: 6,
        date: "Aug 23, 2023",
        time: "06:30-08:30 PM",
        title: "Conestoga College Workshop",
        url: "#",
    },
    {
        id: 7,
        date: "Aug 23, 2023",
        time: "06:30-08:30 PM",
        title: "Conestoga College Workshop",
        url: "#",
    },
        {
        id: 8,
        date: "Sat Oct 26, 2024",
        time: "1.00 PM-4.30 PM",
        title: "TCA – WPL Deepavali Celebrations",
        url: "#",
    },

        {
        id: 9,
        date: "Sat Dec 21, 2024",
        time: "05:00 PM-09:00 PM",
        title: "RIM Park",
        url: "#",
    },

    
];

    // Get the start and end of the current month
    const startOfMonth = currentMonth.clone().startOf("month");
    const endOfMonth = currentMonth.clone().endOf("month");

    // Generate the calendar days
    const daysInMonth = [];
    for (let i = 0; i < startOfMonth.day(); i++) {
        daysInMonth.push(null); // Adding null for empty days before the start of the month
    }
    for (let i = 1; i <= endOfMonth.date(); i++) {
        daysInMonth.push(moment(currentMonth).date(i));
    }

    // Function to check if a date has an event
    const getEventForDate = (date) => {
        const dateString = date?.format("YYYY-MM-DD");
        return events.filter(event => event.date === dateString);
    };

    // Function to navigate to the next/previous month
    const handleMonthChange = (direction) => {
        setCurrentMonth(currentMonth.clone().add(direction, "months"));
    };

    return (
        <>

            <div className="event3-section-area sp4">
                <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-12 col-lg-4">

                        <div className="d-flex justify-content-between align-items-center">
                            <button
                                className="vl-btn4"
                                onClick={() => handleMonthChange(-1)}
                            >
                                Prev
                            </button>
                            <span className="mx-3 fw-700">
                                {currentMonth.format("MMMM YYYY")}
                            </span>
                            <button
                                className="vl-btn4"
                                onClick={() => handleMonthChange(1)}
                            >
                                Next
                            </button>
                        </div>

                        <table className="table table-bordered mt-4" style={{ tableLayout: "fixed" }}>
                            <thead>
                                <tr>
                                    {["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"].map((day, index) => (
                                        <th key={index} className="text-center">
                                            {day}
                                        </th>
                                    ))}
                                </tr>
                            </thead>
                            <tbody>
                                {Array.from({ length: Math.ceil(daysInMonth.length / 7) }, (_, rowIndex) => (
                                    <tr key={rowIndex}>
                                        {daysInMonth.slice(rowIndex * 7, (rowIndex + 1) * 7).map((day, index) => (
                                            <td
                                                key={index}
                                                style={{
                                                    cursor: day ? "default" : "not-allowed",
                                                    backgroundColor: getEventForDate(day).length > 0 ? "#eac768" : "white", // Highlight event dates
                                                }}
                                            >
                                                {day ? (
                                                    <div style={{ width: "100%", height: "100%" }}>
                                                        {/* Align day number to the right */}
                                                        <span className="text-end d-block">{day.date()}</span>

                                                        {/* Display event names if present */}
                                                        {/* {getEventForDate(day).map((event, eventIndex) => (
                                                            <div
                                                                key={eventIndex}
                                                                className="text-sm text-white p-1 text-center mt-1"
                                                                onClick={() => handleEventClick(event.id)} // Add click handler
                                                                style={{
                                                                    backgroundColor: "#007BFF", // Highlight event with a blue color
                                                                    borderRadius: "5px",
                                                                    cursor: "pointer"
                                                                }}
                                                            >
                                                                {event.title}
                                                            </div>
                                                        ))} */}
                                                    </div>
                                                ) : (
                                                    ""
                                                )}
                                            </td>
                                        ))}
                                    </tr>
                                ))}
                            </tbody>
                        </table>
                    </div>
                        <div className="col-lg-8" 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/event/upcoming-event/thai-pongal.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="" />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="#" 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="/#" 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="#" 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="/#" 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/event/upcoming-event/agm.webp" 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/event/upcoming-event/kw.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="" />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="#" 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="/#" 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="#" className="head">TCA Picnic – Potlock</Link>
                                                                <div className="space24" />
                                                                <p>Pinehurst Lake – 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="/#" 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/event/upcoming-event/picnic.webp" 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/event/upcoming-event/sports.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="" />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="#" 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="/#" 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, Ontario</Link>
                                                                    </li>
                                                                </ul>
                                                                <div className="space20" />
                                                                <Link href="#" className="head">Conestoga College Workshop</Link>
                                                                <div className="space24" />
                                                                <p>Conestoga College – 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="/#" 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/event/upcoming-event/workshop.webp" 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/event/upcoming-event/cultural.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="" />06:30 AM-08:30 PM - Aug 23, 2023<span> | </span></Link>
                                                                    </li>
                                                                    <li className="break-on-xl">
                                                                        <Link href="/#"><img src="/assets/img/icons/location1.svg" alt="" />Doon Campus, Ontario</Link>
                                                                    </li>
                                                                </ul>
                                                                <div className="space20" />
                                                                <Link href="#" 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="/#" 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 className="break-on-xl">
                                                                        <Link href="/#"><img src="/assets/img/icons/location1.svg" alt="" />Waterloo Public Library</Link>
                                                                    </li>
                                                                </ul>
                                                                <div className="space20" />
                                                                <Link href="#" 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="/#" 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/event/upcoming-event/deepavali.webp" 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/event/upcoming-event/christmas.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="" />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="#" 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="/#" className="vl-btn3"><span className="demo">Online Tickets</span></Link>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

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

        </>
    )
}