/* 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 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";
}

export default function About({language}: Props) {
	return (
		<main className="h-screen w-full bg-white text-mti-black flex flex-col">
			<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>{translation.title.tag[language]}</Tag>
					<Title>{translation.title.text[language]}</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>{translation.about.title[language]}</Title>
					<span>
						{translation.about.text[language].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">{translation.mission_vision_values.vision[language]}</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">{translation.mission_vision_values.mission[language]}</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">
							{translation.mission_vision_values.values[language].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(language === "ar" ? "text-right" : "text-left", "flex flex-col gap-8 max-w-xl")}>
						<Title>{translation.ceo_message.title[language]}</Title>
						<span>
							{translation.ceo_message.text[language].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>
					<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">{translation.ceo_message.name[language]}</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",
						language === "ar" && "text-right",
					)}>
					<div className={clsx("w-full flex", language === "ar" && "justify-end")}>
						<Title>{translation.capabilities.title[language]}</Title>
					</div>
					<span className="text-lg">{translation.capabilities.intro[language]}</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">{translation.capabilities.analytics.title[language]}</span>
								<p>{translation.capabilities.analytics.text[language]}</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">{translation.capabilities.predictive.title[language]}</span>
								<p>{translation.capabilities.predictive.text[language]}</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">{translation.capabilities.nlp.title[language]}</span>
								<p>{translation.capabilities.nlp.text[language]}</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">{translation.capabilities.engine.title[language]}</span>
								<p>{translation.capabilities.engine.text[language]}</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">
									{translation.capabilities.continuous_learning.title[language]}
								</span>
								<p>{translation.capabilities.continuous_learning.text[language]}</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",
						language === "ar" && "text-right",
					)}>
					<div className={clsx("w-full flex", language === "ar" && "justify-end")}>
						<Title>{translation.expertise.title[language]}</Title>
					</div>
					<span className="text-lg">{translation.expertise.intro[language]}</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">{translation.expertise.language.title[language]}</span>
								<p>{translation.expertise.language.text[language]}</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">{translation.expertise.ielts.title[language]}</span>
								<p>{translation.expertise.ielts.text[language]}</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">{translation.expertise.alignment.title[language]}</span>
								<p>{translation.expertise.alignment.text[language]}</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">{translation.expertise.native.title[language]}</span>
								<p>{translation.expertise.native.text[language]}</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">
									{translation.expertise.knowledge_experience.title[language]}
								</span>
								<p>{translation.expertise.knowledge_experience.text[language]}</p>
							</div>
						</div>
					</div>
				</div>
			</section>

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