'use client'
import Layout from "@/components/layout/Layout"
import PageLoader from "@/components/common-component/PageLoader";
import Link from "next/link"
import { Suspense } from "react";

const Page = () => {
    return (
        <>
            <div>
                <div
                    className="inner-page-header"
                    style={{
                        backgroundImage: `url('/assets/img/nite/tami-cultural-banner.webp')`,
                        backgroundSize: "cover",
                        backgroundPosition: "center",
                    }}
                >
                    <div className="container">
                        <div className="row">
                            <div className="col-lg-12 m-auto">
                                <div className="heading1">
                                    <h1>Tamil Cultural Nite 2025</h1>
                                    <div className="space20" />
                                    <Link href="/">
                                        Home <i className="fa-solid fa-angle-right" />{" "}
                                        <span>Tamil Cultural Nite 2025</span>
                                    </Link>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                {/*===== RECIPE DETAILS START =====*/}
                <div className="blog-details-section sp4 pb-4 mb-4">
                    <div className="container">
                        <div className="row">
                            <div className="col-lg-12">
                                <div className="blog-deatils-content heading2">

                                    {/* Banner / Poster Image */}
                                    <div className="img1">
                                        <img
                                            src="/assets/img/nite/1526.webp"
                                            alt="Tamil Cultural Nite 2025 Banner"
                                            className="img-fluid rounded"
                                        />
                                    </div>

                                    <div className="space32" />
                                    <div className="about2-header heading4 text-center">
                                        <div>
                                            <span className="texture">20th Annual</span>
                                        </div>
                                        <h2 className="text-anime-style-3">Tamil Cultural Nite 2025</h2>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>


                <div className="about6-section-area sp4 pt-0">
                    <div className="container">

                        <div className="row">

                            <div className="col-lg-6 order-2 order-lg-1">
                                <div className="img">
                                    <img src="/assets/img/nite/tamil-cultural-night-1.webp" alt="" />
                                </div>



                            </div >
                            <div className="col-lg-6 order-1 order-lg-2 mb-5">

                                <div className="about2-header heading4 ">

                                    <h3 className="text-anime-style-3">Tamil Cultural Association of Waterloo Region proudly presents</h3>

                                    <div className="space16" />

                                    <div className="about6-header heading9 mb-3">
                                        {/* <span className="texture">20th Annual</span> */}
                                        <p className="textured">Tamil Cultural Nite Performing Arts festival</p>
                                        <div className="space18" />
                                    </div>
                                    <div className="about6-header heading9 space-margin60 mb-4">
                                        <ul>
                                            <li>Date: Saturday, October 25, 2025</li>
                                        </ul>
                                        <div className="space18" />
                                        <ul>
                                            <li>Time: 6:00 pm to 10:00 p.m</li>
                                        </ul>
                                        <div className="space18" />
                                        <ul>
                                            <li>Venue: Humanities Theater, University of Waterloo
                                                200 University Avenue, Waterloo, ON.</li>
                                        </ul>
                                        <div className="space18" />
                                        <ul>
                                            <li>Tickets: $20, 15, 10</li>
                                        </ul>
                                        <div className="space18" />
                                    </div>
                                    <div className="btn-area1">
                                        <Link
                                            href="https://secure1.tixhub.com/waterloo/online/b_otix.asp?cboPerformances=877&cboEvent=422&width=1903"
                                            legacyBehavior
                                        >
                                            <a className="vl-btn2" target="_blank" rel="noopener noreferrer">
                                                <span className="demo">
                                                   Book Now <i className="fa-solid fa-arrow-right" />
                                                </span>
                                            </a>
                                        </Link>
                                    </div>

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

                <div className="pricing-lan-section-area sp4 pt-0">
                    <div className="container">
                        <div className="about6-section-area">
                            <div className="container">
                                <div className="row align-items-center">

                                    <div className="col-lg-6 order-1 order-lg-2 mb-5">
                                        <div className="row">
                                            <div className="col-lg-12 m-auto">
                                                <div className="heading2 mb-4">
                                                    <h3 >
                                                        Humanities Theater Box office information:
                                                    </h3>
                                                </div>
                                            </div>
                                        </div>

                                        <div className="mission">
                                            {/* <div className="space16" /> */}
                                            <ul className="list-unstyled">
                                                <li className="d-flex mb-3">
                                                    <img src="/assets/img/icons/check2.svg" alt="" className="me-2" />
                                                    <span>
                                                        Tickets can be purchased online, by phone (519-888-4908), or in person. There is an online convenience fee of $2.26/per ticket or a phone convenience fee of $1.13 per ticket (on top of the final price).
                                                    </span>
                                                </li>
                                                <li className="d-flex mb-3">
                                                    <img src="/assets/img/icons/check2.svg" alt="" className="me-2" />
                                                    <span>
                                                        The Box Office accepts Visa, MasterCard, American Express, Visa Debit, MasterCard Debit, and cash. The same methods of payment are accepted online except for cash.
                                                    </span>
                                                </li>
                                                <li className="d-flex mb-3">
                                                    <img src="/assets/img/icons/check2.svg" alt="" className="me-2" />
                                                    <span>
                                                        Babes in arms 18 months and under do not require a ticket. No strollers or infant car seat carriers allowed in the theatre. They can be stored in coat check room if needed.
                                                    </span>
                                                </li>
                                                <li className="d-flex mb-3">
                                                    <img src="/assets/img/icons/check2.svg" alt="" className="me-2" />
                                                    <span>
                                                        Box office is open Monday to Friday from 1pm until 5 pm.
                                                    </span>
                                                </li>
                                                <li className="d-flex mb-3">
                                                    <img src="/assets/img/icons/check2.svg" alt="" className="me-2" />
                                                    <span>
                                                        For accessible seating please contact the box office.
                                                    </span>
                                                </li>
                                            </ul>
                                            {/* <div className="about6-header heading9 space-margin60 mb-4">
                                                <p className="texture">More info: </p>
                                                <ul>
                                                    <li> Shyamala Ram: 519-897-6975</li>
                                                </ul>
                                                <div className="space16" />
                                                <ul>
                                                    <li>Shanthi Durai: 519-589-9641
                                                    </li>
                                                </ul>
                                                <div className="space18" />

                                            </div> */}
                                        </div>
                                    </div>
                                    <div className="col-lg-6 order-2 order-lg-2">
                                        <div className="img">
                                            <img src="/assets/img/nite/tamil-cultural-night-2.webp" alt="" />
                                        </div>



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

                      <div className="col-lg-12 text-center">
                                <div className="img">
                                    <img src="/assets/img/nite/welcome.png" alt="" />
                                </div>



                            </div >

            </div>
        </>
    );
};

const RecipePage = () => {
    return (
        <Layout headerStyle={1} footerStyle={1}>
            <Suspense fallback={<PageLoader />}>
                <Page />
            </Suspense>
        </Layout>
    );
};

export default RecipePage;