import CarouselDemo from './carouselDemo';

const LearnPage = () => {
	const newsList = [
		{ title: '中华人民共和国监察法', id: 1 },
		{ title: '2024年国办印发意见部门工作人员党听全国两...', id: 2 },
		{ title: '十四届全国人大二次会议闭幕贺词', id: 3 },
		{ title: '7天人代会："小片段"折射民主"大全景"', id: 4 },
		{ title: '全国政协十四届二次会议共收到提案5800多件', id: 5 },
		{ title: '两会观察丨从两会八个高频词看中国', id: 6 },
		{ title: '两会"清单"上新这些民生发展温度', id: 7 },
		{ title: '"选择中国"——世界从中国两会读出心动机号', id: 8 },
		{ title: '中国经济信心说丨新玛合信心从哪里来', id: 9 },
	];

	return (
		<div className="w-[1514px] h-[1086px]  bg-white mt-10 mb-10">
			{/* 学习进行时图片 */}
			<div className="w-[282px] h-[80px] bg-cover bg-center" style={{ backgroundImage: 'url(/learn.png)' }}></div>
			{/* 轮播图 */}
			<div className="w-[1514px] h-[700px] bg-black mt-5 flex ">
				{/* 左边容器 */}
				<div className="w-[1031px] h-full bg-blue-500 ">
					<div className="w-full h-[540px] bg-red-500 flex">
						<div
							className="w-[344px] h-[540px] bg-gray-500 bg-cover bg-center"
							style={{ backgroundImage: 'url(/x4.png)' }}
						></div>
						<div className="w-[687px] h-[540px] bg-purple-500">
							<CarouselDemo/>
						</div>
					</div>
					<div className="w-full h-[160px] bg-black flex">
						<div className="flex-1 bg-red-500 bg-cover bg-center" style={{ backgroundImage: 'url(/x1.png)' }}></div>
						<div className="flex-1 bg-green-500 bg-cover bg-center" style={{ backgroundImage: 'url(/x2.png)' }}></div>
						<div className="flex-1 bg-blue-500 bg-cover bg-center" style={{ backgroundImage: 'url(/x3.png)' }}></div>
					</div>
				</div>
				{/* 新闻容器 */}
				<div className="w-[483px] h-full px-6 py-8" style={{ backgroundColor: '#F8F8F6' }}>
					{/* 新闻列表 */}
					<div className="space-y-11 mt-5">
						{newsList.map((news, index) => (
							<div key={news.id} className="flex items-start">
								{/* 圆点 */}
								<div className="w-1 h-1 bg-black rounded-full mt-2 mr-3 flex-shrink-0 "></div>
								{/* 新闻标题 */}
								<p className="text-[16px] text-[#7e2f2a] leading-relaxed hover:text-red-500 cursor-pointer">
									{news.title}
								</p>
							</div>
						))}
					</div>
				</div>
			</div>
			{/* 图书容器 */}
			<div className="w-[1514px] h-[285px]    flex relative">
				<div className="w-[750px] h-[188px] left-0 mt-25 absolute" style={{ backgroundColor: '#DEDEDC' }}>
					<div
						className="w-[169px] h-[240px]  absolute left-0 bottom-0 bg-cover bg-center"
						style={{ backgroundImage: 'url(/book1.png)' }}
					></div>
					{/* 左边容器内容 */}
					<div className="absolute left-[200px] top-1/2 transform -translate-y-1/2 w-[520px]">
						<p className="text-[#005d93] text-[32px] font-bold text-center leading-tight">
							习近平新时代中国特色社会
							<br />
							主义思想专题数据库
						</p>
					</div>
				</div>
				<div className="w-[700px] h-[188px] mt-25 right-0 absolute" style={{ backgroundColor: '#DEDEDC' }}>
					<div
						className="w-[140px] h-[240px] absolute left-0 bottom-0 bg-cover bg-center "
						style={{ backgroundImage: 'url(/book2.png)' }}
					></div>
					{/* 右边容器内容 */}
					<div className="absolute left-[200px] top-1/2 transform -translate-y-1/2 w-[520px] ">
						<p className="text-[#005d93] text-[32px] font-bold text-center leading-tight mr-25">习近平著作选读</p>
					</div>
				</div>
			</div>
		</div>
	);
};

export default LearnPage;