import Countdown from '@/components/elements/Countdown';
import Layout from "@/components/layout/Layout";
import { memoryData } from '@/utility/constant.utils';
import { tamilculture } from '@/utility/constant.utils';
import Link from "next/link";

export default function Tamilculture() {
    let globalIndex = 0;

    const totalEvents = Object.values(tamilculture).flat().length;

    return (
        <Layout headerStyle={1} footerStyle={1}>
            <div>
                <div
                    className="inner-page-header"
                    style={{ backgroundImage: 'url(/assets/img/bg/header-bg11.png)' }}
                >
                    <div className="container">
                        <div className="row">
                            <div className="col-lg-6 m-auto">
                                <div className="heading1 text-center">
                                    <h1>TAMIL LANGUAGE</h1>
                                    <div className="space20" />
                                    <Link href="/">
                                        Home <i className="fa-solid fa-angle-right" /> <span>TAMIL LANGUAGE</span>
                                    </Link>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div className="about7-section-area sp1">
                    <div className="container">
                        {Object.entries(tamilculture).map(([key, events]) =>
                            events.map((event) => {
                                const isEven = globalIndex % 2 === 0;
                                const isLast = globalIndex === Object.values(tamilculture).flat().length - 1;
                                const sectionStyle = {
                                    marginBottom: isLast ? '0px' : '100px',
                                };
                                globalIndex++;

                                return (
                                    <div key={event.slug} style={sectionStyle}>
                                        <div className="row align-items-center">
                                            {isEven ? (
                                                <>
                                                    <div className="col-lg-6 order-1 order-lg-1">
                                                        <div className="about-header-area heading10">
                                                            <h2 className="text-anime-style-3">{event.title}</h2>
                                                            <div className="space16" />
                                                            <div className="about-auhtor-box" data-aos="fade-left" data-aos-duration={1100}>
                                                                <div>
                                                                    <p>{event.desc}</p>
                                                                </div>
                                                            </div>
                                                            <div className="space32" />
                                                            <div className="btn-area1" data-aos="fade-left" data-aos-duration={1200}>
                                                                <Link
                                                                    href={`/tamil-culture/tamil-language/tamil-language-data?slug=${event.slug}`}
                                                                    className="vl-btn7"
                                                                >
                                                                    {event.button} <span><i className="fa-solid fa-arrow-right" /></span>
                                                                </Link>
                                                            </div>
                                                        </div>
                                                    </div>

                                                    <div className="col-lg-6 order-1 order-lg-2">
                                                        <div className="about-images-area">
                                                            <div className="row align-items-center">
                                                                <div className="col-lg-6 col-md-6">
                                                                    <div className="img1 image-anime reveal">
                                                                        <img src="/assets/img/all-images/about/about-img4.png" alt="Image 1" />
                                                                    </div>
                                                                    <div className="space24 d-md-none d-block" />
                                                                </div>
                                                                <div className="col-lg-6 col-md-6">
                                                                    <div className="img1 image-anime reveal">
                                                                        <img src="/assets/img/all-images/about/about-img5.png" alt="Image 2" />
                                                                    </div>
                                                                    <div className="space24" />
                                                                    <div className="img1 image-anime reveal">
                                                                        <img src="/assets/img/all-images/about/about-img6.png" alt="Image 3" />
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </>
                                            ) : (
                                                <>
                                                    <div className="col-lg-6 order-1 order-lg-2">
                                                        <div className="about-images-area">
                                                            <div className="row align-items-center">
                                                                <div className="col-lg-6 col-md-6">
                                                                    <div className="img1 image-anime reveal">
                                                                        <img src="/assets/img/all-images/about/about-img4.png" alt="Image 1" />
                                                                    </div>
                                                                    <div className="space24 d-md-none d-block" />
                                                                </div>
                                                                <div className="col-lg-6 col-md-6">
                                                                    <div className="img1 image-anime reveal">
                                                                        <img src="/assets/img/all-images/about/about-img5.png" alt="Image 2" />
                                                                    </div>
                                                                    <div className="space24" />
                                                                    <div className="img1 image-anime reveal">
                                                                        <img src="/assets/img/all-images/about/about-img6.png" alt="Image 3" />
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>

                                                    <div className="col-lg-6 order-1 order-lg-2">
                                                        <div className="about-header-area heading10">
                                                            <h2 className="text-anime-style-3">{event.title}</h2>
                                                            <div className="space16" />
                                                            <div className="about-auhtor-box" data-aos="fade-right" data-aos-duration={1100}>
                                                                <div>
                                                                    <p>{event.desc}</p>
                                                                </div>
                                                            </div>
                                                            <div className="space32" />
                                                            <div className="btn-area1" data-aos="fade-right" data-aos-duration={1200}>
                                                                <Link
                                                                    href={`/tamil-culture/tamil-language/tamil-language-data?slug=${event.slug}`}
                                                                    className="vl-btn7"
                                                                >
                                                                    {event.button} <span><i className="fa-solid fa-arrow-right" /></span>
                                                                </Link>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </>
                                            )}
                                        </div>
                                    </div>
                                );
                            })
                        )}
                    </div>
                </div>
            </div>
        </Layout>
    );
}