---
const featured = {
	title: '危险化学品企业安全风险智能化管控平台建设指南',
	meta: '应急管理部 2022',
	desc: '推动危化企业部署智能化管控平台，覆盖重大危险源监控、可燃有毒气体监测、动火作业管理、人员定位、视频联动、应急处置等核心场景，构建感知-传输-平台-应用的数字化体系，实现安全风险智能预警与监管平台数据对接。',
	keywords: ['重大危险源', '气体监测', '动火管理', '人员定位', '视频联动', '应急处置', '数据上报']
};

const policies = [
	{
		title: '危险化学品安全管理条例',
		meta: '国务院令 第591号',
		desc: '生产、储存、使用、经营、运输全链路安全主体责任与监管要求。'
	},
	{
		title: '危险化学品重大危险源监督管理暂行规定',
		meta: '应急部令 第40号',
		desc: '重大危险源单位强制安装气体检测、视频监控、紧急切断装置并联网。'
	},
	{
		title: '"工业互联网+危化安全生产"试点方案',
		meta: '应急部 2020',
		desc: '推动行业工业互联网应用，构建感知-传输-平台-应用数字化体系。'
	},
	{
		title: '化工和危险化学品重大事故隐患判定标准',
		meta: '应急部 2022',
		desc: '细化 20 类重大事故隐患情形，覆盖"两重点一重大"高风险场景。'
	},
	{
		title: '危险化学品重大危险源辨识',
		meta: 'GB 18218-2018',
		desc: '强制性国家标准，规范重大危险源临界量、辨识方法与分级标准。'
	},
	{
		title: '化学品生产单位特殊作业安全规范',
		meta: 'GB 30871-2022',
		desc: '动火、受限空间、高处、临时用电等八大特殊作业的安全管理强制标准。'
	},
	{
		title: '化工过程安全管理导则',
		meta: 'AQ/T 3034-2022',
		desc: '化工过程安全管理 14 要素体系，落实工艺安全与变更管理。'
	},
	{
		title: '关于全面加强危险化学品安全生产工作的意见',
		meta: '国办发〔2021〕33号',
		desc: '明确"打非治违""遏制重特大事故"任务，强化数字化监管与企业主体责任。'
	},
	{
		title: '危险化学品输送管道安全管理规定',
		meta: '应急部令 第43号',
		desc: '强制管道企业建立完整性管理体系，部署泄漏监测与应急切断装置。'
	}
];
---

<section class="px-4 lg:px-0 py-16 bg-white overflow-hidden">
	<div class="max-w-7xl mx-auto">
		<div class="text-center mb-12">
			<h3 class="text-3xl md:text-5xl font-black tracking-tight leading-tight">
				<span class="text-red-600">政策牵引</span>落地，危化智能化管控有据可依
			</h3>
			<div class="w-24 h-1.5 bg-red-600 mx-auto mt-8 rounded-full"></div>
		</div>

		<article class="relative bg-gradient-to-br from-red-600 to-red-700 rounded-3xl p-6 md:p-10 text-white mb-6 overflow-hidden">
			<div class="absolute -right-12 -top-12 w-64 h-64 bg-white/10 rounded-full blur-3xl"></div>
			<div class="relative">
				<div class="flex items-center gap-2 mb-4">
					<span class="inline-flex items-center px-2.5 py-1 rounded-md bg-white/15 backdrop-blur text-sm font-black tracking-[0.18em]">核心政策</span>
					<span class="text-sm font-bold text-red-100">{featured.meta}</span>
				</div>
				<h4 class="text-2xl md:text-3xl font-black leading-tight mb-3 max-w-3xl">{featured.title}</h4>
				<p class="text-base md:text-lg text-red-50 leading-relaxed max-w-3xl mb-5">{featured.desc}</p>
				<div class="flex flex-wrap gap-2">
					{featured.keywords.map((k) => (
						<span class="text-sm font-bold px-2.5 py-1 rounded-md bg-white/15 backdrop-blur text-white border border-white/20">{k}</span>
					))}
				</div>
			</div>
		</article>

		<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
			{policies.map((item, idx) => (
				<article class="bg-slate-50 rounded-2xl p-5 ring-1 ring-slate-200 hover:ring-red-200 hover:bg-white transition-all duration-300 flex flex-col">
					<div class="flex items-center justify-between mb-2">
						<span class="text-xs font-mono font-bold text-red-600 tracking-[0.18em]">{String(idx + 2).padStart(2, '0')}</span>
						<span class="text-sm font-bold text-red-600 tracking-wide">{item.meta}</span>
					</div>
					<h4 class="text-lg font-extrabold text-gray-900 leading-snug mb-2">{item.title}</h4>
					<p class="text-base text-gray-600 leading-relaxed flex-1">{item.desc}</p>
				</article>
			))}
		</div>
	</div>
</section>