---
const trinity = [
	{
		title: '餐饮单位',
		desc: '优化管理手段，由被动监管向主动管理转变，落实企业主体责任。',
		img: '/img/kitchen/trinity-business.webp'
	},
	{
		title: '监管部门',
		desc: '创新监管方式，强化线上线下监管，实现精准监管，提升监管效能。',
		img: '/img/kitchen/trinity-regulator.webp'
	},
	{
		title: '社会公众',
		desc: '完善食品安全公示渠道，整合社会监督力量，形成共治监督合力。',
		img: '/img/kitchen/trinity-public.webp'
	}
];
---

<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">
			<p class="inline-flex items-center gap-2 px-4 py-1.5 rounded-full bg-blue-100 text-blue-700 text-xs font-bold tracking-wide">
				<i class="fa fa-sitemap"></i>
				<span>三位一体治理</span>
			</p>
			<h3 class="text-3xl md:text-5xl font-black text-gray-900 tracking-tight mt-5">
				全面提升食安治理水平
			</h3>
			<p class="text-gray-600 mt-5 max-w-3xl mx-auto leading-relaxed">
				落实企业主体责任、创新监管方式、强化社会共治，形成可持续的食品安全治理机制。
			</p>
		</div>

		<div class="grid grid-cols-1 md:grid-cols-3 gap-5">
			{trinity.map((item) => (
				<article class="bg-white rounded-3xl border border-blue-100 p-5 md:p-6 hover:shadow-lg transition-all duration-300">
					<div class="w-14 h-14 rounded-2xl bg-blue-700 border border-blue-800 flex items-center justify-center mb-4 shadow-sm">
						<img src={item.img} alt={item.title} class="w-8 h-8 object-contain" />
					</div>
					<h4 class="text-xl font-black text-gray-900 mb-3">{item.title}</h4>
					<p class="text-sm text-gray-600 leading-relaxed">{item.desc}</p>
				</article>
			))}
		</div>
	</div>
</section>