---
const painPoints = [
	{
		icon: 'fa-fire',
		title: '火药敏感易燃易爆',
		subtitle: '1.1 级高危工房风险极高',
		points: ['混药 / 装药 / 筑药作业高敏感', '明火、摩擦火花即可引爆', '事故后果严重、难以逆转']
	},
	{
		icon: 'fa-bolt',
		title: '静电与电气火灾',
		subtitle: '微小火花即可引爆',
		points: ['设备 / 人体静电隐蔽难察觉', '电气线路老化引发起火', '消静电措施落实不到位']
	},
	{
		icon: 'fa-trash',
		title: '余废药销毁难度高',
		subtitle: '当日清零制度落实难',
		points: ['余废药、废引线易积压', '违规处置流向不明', '销毁审批与过程留痕缺失']
	},
	{
		icon: 'fa-archive',
		title: '仓储溯源管控复杂',
		subtitle: '一物一码全流程要求',
		points: ['烟火药、引火线流向难追踪', '库存与环境联动管控难', '报废销毁流程不规范']
	},
	{
		icon: 'fa-users',
		title: '三违现象与超员',
		subtitle: '工房人员与作业管控难',
		points: ['吸烟、违规动火屡禁不止', '工房超员、脱岗睡岗', '特种作业无证操作风险高']
	},
	{
		icon: 'fa-shield',
		title: '监管考核日趋严格',
		subtitle: '行业安全标准化要求',
		points: ['标准化建设难落地', '隐患整改闭环压力大', '监管平台数据对接复杂']
	}
];
---

<section class="px-4 lg:px-0 py-16 bg-slate-50 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-blue-600">烟花爆竹</span>六大安全管理痛点
			</h3>
			<div class="w-24 h-1.5 bg-blue-600 mx-auto mt-8 rounded-full"></div>
		</div>

		<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5">
			{painPoints.map((item, idx) => (
				<article class="bg-white rounded-2xl border border-slate-200 p-6 hover:shadow-md hover:border-blue-200 transition-all duration-300 flex flex-col">
					<div class="flex items-center justify-between mb-4">
						<span class="font-mono text-3xl font-black text-blue-600/80 leading-none">{String(idx + 1).padStart(2, '0')}</span>
						<i class={`fa ${item.icon} text-blue-500 text-2xl`}></i>
					</div>
					<h4 class="text-lg font-extrabold text-gray-900 leading-snug">{item.title}</h4>
					<p class="text-sm font-semibold text-gray-500 mt-1 mb-4 pb-3 border-b border-slate-100">{item.subtitle}</p>
					<ul class="space-y-2 flex-1 text-base text-gray-700">
						{item.points.map((p) => (
							<li class="flex items-start gap-2">
								<i class="fa fa-check text-blue-500 mt-1 text-sm shrink-0"></i>
								<span class="leading-relaxed">{p}</span>
							</li>
						))}
					</ul>
				</article>
			))}
		</div>
	</div>
</section>