import React from 'react';
import JtCarousel from './jtCarousel';

const FhjtPage = () => {
	const carouselData = [
		{
			id: 1,
			image: '/header.png',
			title: '军事风云第一期',
		},
		{
			id: 2,
			image: '/header.png',
			title: '军事风云第一期',
		},
		{
			id: 3,
			image: '/header.png',
			title: '军事风云第一期',
		},
		
	];
	return (
		<>
			<div className="w-[1514px] h-[573px] bg-white mx-auto mt-10 flex">
				{/* 左侧图片容器 */}
				<div
					className="w-[1043px] h-full  bg-cover bg-center relative"
					style={{
						clipPath: 'polygon(0 0, calc(100% - 150px)-0.9%, calc(100% - 30px) 100%, 0 100%)',
					}}
				>
					<JtCarousel carouselData={carouselData} />
				</div>

				{/* 右侧烽火讲堂容器 */}
				<div className="w-[471px] h-full bg-white relative">
					{/* 标题部分 */}
					<div className="relative pt-6 pr-8">
						<h2 className="text-right text-[32px] font-bold text-[#005d93] mb-2">烽火讲堂</h2>
						{/* 蓝色装饰线 */}
						<div className="h-3 bg-[#005d93]"></div>
					</div>

					{/* 奖项列表 */}
					<div className="mt-4 pr-8">
						{/* 奖项1 */}
						<div className="mb-5">
							<div className="flex items-center justify-end mb-1">
								<span className=" px-1 py-1 text-3xl font-bold ">一等奖</span>
								<span className=" w-0 h-0 border-r-10 border-r-yellow-500 border-t-8  border-t-transparent border-l-8 border-l-transparent border-b-8 border-b-transparent"></span>
							</div>
							<p className="text-right text-lg leading-relaxed mr-5">
								高级软件开发工程师王老八
								<br />
								王老八
							</p>
						</div>

						{/* 奖项2 */}
						<div className="mb-5">
							<div className="flex items-center justify-end mb-1">
								<span className=" px-1 py-1 text-3xl font-bold ">一等奖</span>
								<span className=" w-0 h-0 border-r-10 border-r-yellow-500 border-t-8  border-t-transparent border-l-8 border-l-transparent border-b-8 border-b-transparent"></span>
							</div>
							<p className="text-right text-lg leading-relaxed mr-5">
								高级软件开发工程师王老八
								<br />
								王老八
							</p>
						</div>

						{/* 奖项3 */}
						<div className="mb-1">
							<div className="flex items-center justify-end mb-1">
								<span className=" px-1 py-1 text-3xl font-bold">一等奖</span>
								<span className=" w-0 h-0 border-r-10 border-r-yellow-500 border-t-8  border-t-transparent border-l-8 border-l-transparent border-b-8 border-b-transparent"></span>
							</div>
							<p className="text-right  text-lg leading-relaxed mr-5">
								高级软件开发工程师王老八
								<br />
								王老八
							</p>
						</div>
					</div>

					{/* 更多授课按钮 */}
					<div className="absolute bottom-8 right-0 mr-10">
						<button className="bg-gradient-to-b from-[#053E69] to-[#257BB6] text-white px-15 py-3 rounded-full text-2xl font-bold  hover:bg-[#357ABD] transition-colors">
							更多授课
						</button>
					</div>
				</div>
			</div>
		</>
	);
};

export default FhjtPage;