/* eslint-disable @next/next/no-img-element */
import Footer from "@/components/Footer";
import Navbar from "@/components/Navbar";
import Tag from "@/components/Tag";
import Title from "@/components/Title";
import translation from "@/translation/about.json";
import AboutPage from "@/types/cms/about";
import clsx from "clsx";
import React from "react";
import {BiSolidBrain, BiWorld} from "react-icons/bi";
import {
	BsBook,
	BsBookFill,
	BsClipboard2CheckFill,
	BsClipboard2Data,
	BsClipboard2DataFill,
	BsEye,
	BsEyeFill,
	BsFlower3,
	BsGraphUp,
	BsPersonFill,
	BsPersonFillExclamation,
	BsRepeat,
	BsRocketTakeoffFill,
	BsTranslate,
} from "react-icons/bs";

interface Props {
	language: "en" | "ar";
	data: AboutPage;
}

export default function About({language, data}: Props) {
	return (
		<main className="h-screen w-full bg-white text-mti-black flex flex-col" dir={language === "ar" ? "rtl" : "ltr"}>
			<Navbar currentPage="/about" language={language} />

			<section className="w-full h-full bg-mti-purple text-white text-center p-8 md:p-16">
				<div className="w-full h-full flex flex-col items-center justify-center">
					<Tag>{data.TagTitle.Tag}</Tag>
					<Title>{data.TagTitle.Title}</Title>
				</div>
			</section>

			{/* About Us Section */}
			<section id="about" className="w-full bg-white">
				<div className="w-full flex flex-col items-center gap-8 p-8 md:p-20 container mx-auto">
					<Title>{data.AboutSection.Title}</Title>
					<span>
						{data.AboutSection.Text.split("\n").map((line, index) => (
							<React.Fragment key={index}>
								<p className={clsx(language === "ar" ? "text-right" : "text-left")}>{line}</p>
								<br />
							</React.Fragment>
						))}
					</span>
				</div>
			</section>

			{/* Vision, Mission & Values Section */}
			<section id="values" className="w-full bg-mti-gray-seasalt">
				<div className="w-full grid -md:grid-cols-1 md:grid-cols-2 gap-16 p-8 md:p-16 container mx-auto">
					<div className="flex flex-col items-center gap-4 text-center">
						<div className="bg-mti-rose-ultralight border border-mti-rose-light p-6 rounded-3xl flex items-center justify-center w-fit h-fit">
							<BsEyeFill className="text-mti-rose-light w-10 h-10" />
						</div>
						<span className="text-lg">{data.MissionVisionValuesSection.Vision}</span>
					</div>
					<div className="flex flex-col items-center gap-4 text-center">
						<div className="bg-mti-rose-ultralight border border-mti-rose-light p-6 rounded-3xl flex items-center justify-center w-fit h-fit">
							<BsRocketTakeoffFill className="text-mti-rose-light w-10 h-10" />
						</div>
						<span className="text-lg">{data.MissionVisionValuesSection.Mission}</span>
					</div>
					<div className="flex flex-col items-center gap-4 md:col-span-2">
						<div className="bg-mti-rose-ultralight border border-mti-rose-light p-6 rounded-3xl flex items-center justify-center w-fit h-fit">
							<BsFlower3 className="text-mti-rose-light w-10 h-10" />
						</div>
						<div className="text-lg flex flex-wrap items-center justify-center max-w-xl gap-x-8 gap-y-4">
							{data.MissionVisionValuesSection.Values.split("\n").map((x) => (
								<span key={x}>{x}</span>
							))}
						</div>
					</div>
				</div>
			</section>

			{/* CEO Message Section */}
			<section id="message" className="w-full bg-white">
				<div className="w-full flex -md:flex-col -md:items-center -md:pb-16 justify-between gap-8 p-8 md:p-20 container mx-auto">
					<div className={clsx("flex flex-col gap-8 max-w-xl")}>
						<Title>{data.CEOMessage.Title}</Title>
						<span>
							{data.CEOMessage.Text.split("\n").map((line, index) => (
								<React.Fragment key={index}>
									<p>{line}</p>
									<br />
								</React.Fragment>
							))}
						</span>
					</div>
					<div className="w-fit h-fit relative">
						<div className="w-64 h-64 md:w-80 md:h-80 rounded-t-[80px] rounded-br-[80px] md:rounded-t-[120px] md:rounded-br-[120px] overflow-hidden">
							<img className="w-full h-full" alt="MTI's CEO" src="/DrNasserALDhahli.jpeg" />
						</div>
						<div>
							<div className="w-5 h-5 rounded-full bg-mti-rose-ultralight absolute -left-10 -bottom-10" />
							<div className="w-5 h-5 rounded-full bg-mti-rose-ultralight absolute -left-10 bottom-0" />
							<div className="w-5 h-5 rounded-full bg-mti-rose-ultralight absolute -left-10 bottom-10" />
							<div className="w-5 h-5 rounded-full bg-mti-rose-ultralight absolute -left-10 bottom-20" />
							<div className="w-5 h-5 rounded-full bg-mti-rose-ultralight absolute -left-10 bottom-30" />
							<span className="absolute left-1/2 -translate-x-2/3 -bottom-10">{data.CEOMessage.Name}</span>
						</div>
					</div>
				</div>
			</section>

			{/* Capabilities */}
			<section id="capabilities" className="w-full bg-mti-gray-seasalt">
				<div className={clsx("w-full flex flex-col -md:items-center -md:pb-16 gap-8 p-8 md:p-20 container mx-auto")}>
					<div className={clsx("w-full flex")}>
						<Title>{data.Capabilities.Title}</Title>
					</div>
					<span className="text-lg">{data.Capabilities.Intro}</span>
					<div className="w-full grid -md:grid-cols-1 md:grid-cols-2 gap-8">
						<div className={clsx("flex gap-4 items-center", language === "ar" && "flex-row-reverse")}>
							<div className="bg-mti-rose-ultralight border border-mti-rose-light p-4 rounded-xl flex items-center justify-center w-fit h-fit">
								<BsGraphUp className="text-mti-rose-light w-6 h-6" />
							</div>
							<div className="flex flex-col gap-2">
								<span className="text-lg font-bold text-mti-rose-light">{data.Capabilities.Analytics.Title}</span>
								<p>{data.Capabilities.Analytics.Text}</p>
							</div>
						</div>

						<div className={clsx("flex gap-4 items-center", language === "ar" && "flex-row-reverse")}>
							<div className="bg-mti-rose-ultralight border border-mti-rose-light p-4 rounded-xl flex items-center justify-center w-fit h-fit">
								<BiSolidBrain className="text-mti-rose-light w-6 h-6" />
							</div>
							<div className="flex flex-col gap-2">
								<span className="text-lg font-bold text-mti-rose-light">{data.Capabilities.Predictive.Title}</span>
								<p>{data.Capabilities.Predictive.Text}</p>
							</div>
						</div>

						<div className={clsx("flex gap-4 items-center", language === "ar" && "flex-row-reverse")}>
							<div className="bg-mti-rose-ultralight border border-mti-rose-light p-4 rounded-xl flex items-center justify-center w-fit h-fit">
								<BsTranslate className="text-mti-rose-light w-6 h-6" />
							</div>
							<div className="flex flex-col gap-2">
								<span className="text-lg font-bold text-mti-rose-light">{data.Capabilities.NLP.Title}</span>
								<p>{data.Capabilities.NLP.Text}</p>
							</div>
						</div>

						<div className={clsx("flex gap-4 items-center", language === "ar" && "flex-row-reverse")}>
							<div className="bg-mti-rose-ultralight border border-mti-rose-light p-4 rounded-xl flex items-center justify-center w-fit h-fit">
								<BsPersonFill className="text-mti-rose-light w-6 h-6" />
							</div>
							<div className="flex flex-col gap-2">
								<span className="text-lg font-bold text-mti-rose-light">{data.Capabilities.Engine.Title}</span>
								<p>{data.Capabilities.Engine.Text}</p>
							</div>
						</div>

						<div className={clsx("flex gap-4 items-center md:col-span-2", language === "ar" && "flex-row-reverse")}>
							<div className="bg-mti-rose-ultralight border border-mti-rose-light p-4 rounded-xl flex items-center justify-center w-fit h-fit">
								<BsRepeat className="text-mti-rose-light w-6 h-6" />
							</div>
							<div className="flex flex-col gap-2">
								<span className="text-lg font-bold text-mti-rose-light">{data.Capabilities.ContinuousLearning.Title}</span>
								<p>{data.Capabilities.ContinuousLearning.Text}</p>
							</div>
						</div>
					</div>
				</div>
			</section>

			{/* Expertise */}
			<section id="expertise" className="w-full bg-white">
				<div className={clsx("w-full flex flex-col -md:items-center -md:pb-16 gap-8 p-8 md:p-20 container mx-auto")}>
					<div className={clsx("w-full flex")}>
						<Title>{data.Expertise.Title}</Title>
					</div>
					<span className="text-lg">{data.Expertise.Intro}</span>
					<div className="w-full grid -md:grid-cols-1 md:grid-cols-2 gap-8">
						<div className={clsx("flex gap-4 items-center", language === "ar" && "flex-row-reverse")}>
							<div className="bg-mti-rose-ultralight border border-mti-rose-light p-4 rounded-xl flex items-center justify-center w-fit h-fit">
								<BiWorld className="text-mti-rose-light w-6 h-6" />
							</div>
							<div className="flex flex-col gap-2">
								<span className="text-lg font-bold text-mti-rose-light">{data.Expertise.Language.Title}</span>
								<p>{data.Expertise.Language.Text}</p>
							</div>
						</div>

						<div className={clsx("flex gap-4 items-center", language === "ar" && "flex-row-reverse")}>
							<div className="bg-mti-rose-ultralight border border-mti-rose-light p-4 rounded-xl flex items-center justify-center w-fit h-fit">
								<BsClipboard2CheckFill className="text-mti-rose-light w-6 h-6" />
							</div>
							<div className="flex flex-col gap-2">
								<span className="text-lg font-bold text-mti-rose-light">{data.Expertise.IELTS.Title}</span>
								<p>{data.Expertise.IELTS.Text}</p>
							</div>
						</div>

						<div className={clsx("flex gap-4 items-center", language === "ar" && "flex-row-reverse")}>
							<div className="bg-mti-rose-ultralight border border-mti-rose-light p-4 rounded-xl flex items-center justify-center w-fit h-fit">
								<BsClipboard2DataFill className="text-mti-rose-light w-6 h-6" />
							</div>
							<div className="flex flex-col gap-2">
								<span className="text-lg font-bold text-mti-rose-light">{data.Expertise.Alignment.Title}</span>
								<p>{data.Expertise.Alignment.Text}</p>
							</div>
						</div>

						<div className={clsx("flex gap-4 items-center", language === "ar" && "flex-row-reverse")}>
							<div className="bg-mti-rose-ultralight border border-mti-rose-light p-4 rounded-xl flex items-center justify-center w-fit h-fit">
								<BsPersonFillExclamation className="text-mti-rose-light w-6 h-6" />
							</div>
							<div className="flex flex-col gap-2">
								<span className="text-lg font-bold text-mti-rose-light">{data.Expertise.Native.Title}</span>
								<p>{data.Expertise.Native.Text}</p>
							</div>
						</div>

						<div className={clsx("flex gap-4 items-center md:col-span-2", language === "ar" && "flex-row-reverse")}>
							<div className="bg-mti-rose-ultralight border border-mti-rose-light p-4 rounded-xl flex items-center justify-center w-fit h-fit">
								<BsBook className="text-mti-rose-light w-6 h-6" />
							</div>
							<div className="flex flex-col gap-2">
								<span className="text-lg font-bold text-mti-rose-light">{data.Expertise.KnowledgeExperience.Title}</span>
								<p>{data.Expertise.KnowledgeExperience.Text}</p>
							</div>
						</div>
					</div>
				</div>
			</section>

			<Footer language={language} />
		</main>
	);
}
