---
const painPoints = [
	{
		title: '餐饮单位食品安全意识差',
		points: [
			'从业人员良莠不齐，食安意识不强',
			'经营模式混杂，管理水平参差不一',
			'被监管意愿不强，不愿增加投入'
		]
	},
	{
		title: '网络餐饮线上监管不完善',
		points: [
			'部分商家虚拟化，无照经营',
			'后厨加工过程无法直观查看',
			'平台备案和监督机制不完善'
		]
	},
	{
		title: '监管部门线下监管难度大',
		points: [
			'企业量大面广、监管人少任务重',
			'间歇性抽检，覆盖不全有疏漏',
			'传统上门人工检查，耗费大效率低'
		]
	},
	{
		title: '消费者公众信任度较低',
		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-10 relative">
			<div class="absolute top-0 left-1/2 -translate-x-1/2 w-64 h-64 bg-amber-100/50 blur-3xl rounded-full -z-10"></div>
			<h3 class="text-3xl md:text-5xl font-black tracking-tight leading-tight mt-5">
				<span class="text-amber-500">食安事故</span>频发，折射餐饮行业重症
			</h3>
			<div class="w-24 h-1.5 bg-amber-500 mx-auto mt-8 rounded-full shadow-sm shadow-amber-200"></div>
		</div>

		<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-5">
			{painPoints.map((item) => (
				<article class="bg-white rounded-2xl border border-slate-200 p-5 md:p-6 hover:shadow-lg transition-all duration-300">
					<h4 class="text-xl font-black text-gray-900 mb-4 leading-snug">{item.title}</h4>
					<ul class="space-y-2.5">
						{item.points.map((point) => (
							<li class="text-sm text-gray-600 leading-relaxed flex items-start gap-2">
								<i class="fa fa-circle text-[8px] text-amber-500 mt-1.5"></i>
								<span>{point}</span>
							</li>
						))}
					</ul>
				</article>
			))}
		</div>
	</div>
</section>