export const metadata = {
    title: "Tamil Language History & Culture | Learn Tamil",
    description: "Explore the history, richness, and global significance of the Tamil language.",
};

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

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

    return (
        <Layout headerStyle={1} footerStyle={1}>
            <div>
                <div
                    className="inner-page-header"
                    style={{ backgroundImage: 'url(/assets/img/tamil-lang/tamil-language-banner.webp)' }}
                >
                    <div className="container">
                        <div className="row">
                            <div className="col-lg-12 m-auto">
                                <div className="heading1">
                                    <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 sp11">
                    {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' : '80px',
                            };
                            globalIndex++;

                            return (
                                <div key={event.slug} style={sectionStyle}>
                                    {!isEven ? (
                                        <div className="about7-bg sp4">
                                            <div className="container">
                                                <div className="row align-items-center">
                                                    <div className="col-lg-6 order-2 order-lg-2 order-lg-1 ">
                                                        <div className="about-images-area">
                                                            <div className="img1 image-anime reveal">
                                                                <img src={event.image} alt={event.title} />
                                                            </div>
                                                        </div>
                                                    </div>

                                                    <div className="col-lg-6 order-1 order-lg-2 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-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 className="container">
                                            <div className="row align-items-center">
                                                <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="img1 image-anime reveal">
                                                            <img src={event.image} alt={event.title} />
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    )}
                                </div>
                            );
                        })
                    )}
                </div>
            </div>
        </Layout>
    );
}