/* 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 {BsEye, BsEyeFill, BsFlower3, BsRocketTakeoffFill} 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="/placeholder_person.png" />
						</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>

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