import { motion } from "framer-motion";
import { useTranslation } from "react-i18next";

type Slide = {
	src: string;
	alt: string;
};

export default function EducatedTeam() {
	const { t } = useTranslation();

	const slides: Slide[] = [
        { src: "/images/Seminar/team.jpg", alt: "Team in training" },
		{ src: "/images/Seminar/teacher.jpg", alt: "Seminar teacher" },
		{ src: "/images/Seminar/poster.jpg", alt: "Training poster" },
	];

	const duplicated = [...slides, ...slides]; // seamless loop

	return (
		<section className="mx-auto my-16 w-full max-w-7xl px-6 sm:px-8">
			<div className="relative overflow-hidden rounded-xl">
				{/* Background continuous slider */}
				<div className="relative h-72 w-full sm:h-80 md:h-[26rem]">
					<motion.div
						className="absolute inset-0 flex"
						animate={{ x: ["0%", "-50%"] }}
						transition={{ duration: 25, ease: "linear", repeat: Infinity }}
						aria-hidden
					>
						{duplicated.map((s, i) => (
							<div key={i} className="relative h-full w-full flex-shrink-0">
								<img
									src={s.src}
									alt={s.alt}
									className="h-full w-full object-cover"
									loading={i === 0 ? "eager" : "lazy"}
								/>
								{/* Subtle vignette for readability */}
								<div className="absolute inset-0 bg-gradient-to-t from-black/50 via-black/20 to-transparent" />
							</div>
						))}
					</motion.div>

					{/* Centered text overlay */}
					<div className="relative z-10 flex h-full w-full items-center justify-center">
						<div className="mx-auto max-w-2xl text-center text-white">
							<h2 className="text-2xl font-extrabold tracking-tight sm:text-3xl md:text-4xl drop-shadow">
								{t("home.educated.title")}
							</h2>
							<p className="mt-3 text-sm leading-6 text-white/90 sm:text-base md:text-lg drop-shadow">
								{t("home.educated.subtitle")}
							</p>
						</div>
					</div>

					{/* Outer gradient edges */}
					<div className="pointer-events-none absolute inset-0 bg-gradient-to-r from-black/30 via-transparent to-black/30" />
				</div>
			</div>
		</section>
	);
}