---
const values = [
	{
		title: '餐饮单位',
		desc: '规范透明操作，辅助提升食药安全等级，落实企业主体责任。',
		img: '/img/kitchen/value-business.webp'
	},
	{
		title: '监管部门',
		desc: '辅助过程监管、智能监管与动态监管，规范行政执法并提升监管效能。',
		img: '/img/kitchen/value-regulator.webp'
	},
	{
		title: '社会公众',
		desc: '拓宽公众监督渠道，强化监督力量，营造安心、放心、舒心的消费环境。',
		img: '/img/kitchen/value-public.webp'
	}
];

const features = [
	{
		title: '远程可视化',
		desc: '线上视频巡查，提升监管效能。',
		img: '/img/kitchen/feature-remote-visual.webp'
	},
	{
		title: '监管过程化',
		desc: '操作过程记录，实现动态监管。',
		img: '/img/kitchen/feature-process.webp'
	},
	{
		title: '感知智能化',
		desc: '实时监测报警，强化精准监管。',
		label: 'AI'
	},
	{
		title: '监督社会化',
		desc: '完善监督渠道，形成监督合力。',
		img: '/img/kitchen/feature-social-supervision.webp'
	}
];
---

<section class="px-4 lg:px-0 py-16 bg-white overflow-hidden">
	<div class="max-w-7xl mx-auto">
		<div class="bg-slate-50 rounded-3xl border border-blue-100 p-5 md:p-8 lg:p-10">
			<div class="grid grid-cols-1 lg:grid-cols-2 gap-8 lg:gap-10 items-center">
				<div>
					<p class="inline-flex items-center gap-2 px-3 py-1.5 rounded-full bg-blue-100 text-blue-700 text-xs font-bold tracking-wide mb-4">
						<i class="fa fa-sitemap"></i>
						<span>系统架构</span>
					</p>
					<h3 class="text-3xl md:text-4xl font-black text-gray-900 tracking-tight leading-tight mb-4">
						明厨亮灶一体化治理架构
					</h3>
					<p class="text-gray-600 leading-relaxed mb-6">
						通过平台化架构把餐饮单位、监管部门与社会公众纳入同一治理链路，打通“可视、可管、可追溯、可共治”的闭环能力。
					</p>
					<div class="grid grid-cols-2 gap-3">
						<div class="bg-blue-600 text-white rounded-xl py-3 text-center text-sm font-bold">主体责任落实</div>
						<div class="bg-blue-600 text-white rounded-xl py-3 text-center text-sm font-bold">监管效能提升</div>
						<div class="bg-blue-600 text-white rounded-xl py-3 text-center text-sm font-bold">公众监督拓展</div>
						<div class="bg-blue-600 text-white rounded-xl py-3 text-center text-sm font-bold">共治机制形成</div>
					</div>
				</div>

				<div class="rounded-2xl overflow-hidden border border-white shadow-lg bg-white">
					<img src="/img/kitchen/architecture.webp" alt="明厨亮灶系统架构图" class="w-full h-auto object-cover" />
				</div>
			</div>

			<div class="mt-8 border-t border-blue-100 pt-8">
				<p class="text-xl md:text-2xl font-black text-gray-900 mb-5">方案价值</p>
				<div class="grid grid-cols-1 md:grid-cols-3 gap-5">
					{values.map((item) => (
						<article class="bg-white rounded-2xl border border-blue-100 p-5">
							<div class="flex items-center gap-3 mb-3">
								<img src={item.img} alt={item.title} class="w-7 h-7 object-contain shrink-0" />
								<h4 class="text-lg font-black text-gray-900">{item.title}</h4>
							</div>
							<p class="text-sm text-gray-600 leading-relaxed">{item.desc}</p>
						</article>
					))}
				</div>
			</div>

			<div class="mt-8 border-t border-blue-100 pt-8">
				<p class="text-xl md:text-2xl font-black text-gray-900 mb-5">核心能力</p>
				<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
					{features.map((item) => (
						<article class="bg-white rounded-2xl border border-emerald-100 p-4">
							<div class="w-11 h-11 rounded-xl bg-blue-700 text-white flex items-center justify-center mb-3 overflow-hidden border border-blue-800">
								{item.img ? (
									<img src={item.img} alt={item.title} class="w-6 h-6 object-contain" />
								) : (
									<span class="text-sm font-black tracking-wide text-white">{item.label}</span>
								)}
							</div>
							<h5 class="text-base font-black text-gray-900 mb-2">{item.title}</h5>
							<p class="text-sm text-gray-600 leading-relaxed">{item.desc}</p>
						</article>
					))}
				</div>
			</div>
		</div>
	</div>
</section>