---
const features = [
	{ icon: 'fa-video-camera', title: '矿用视频 AI', desc: '井下/露天防爆摄像头 + 700+ 场景算法，吸烟、超员、闯入禁区秒级识别。' },
	{ icon: 'fa-thermometer-three-quarters', title: '环境物联感知', desc: '瓦斯、CO、风速、粉尘、温湿度 24h 监测，超标自动联动通风/断电。' },
	{ icon: 'fa-id-card', title: '人员定位管控', desc: 'UWB/北斗双模厘米级定位，结合人脸/虹膜分级准入与电子围栏管控。' },
	{ icon: 'fa-warning', title: '灾害预警与应急', desc: '尾矿库/边坡/采空区在线监测，一键报警联动应急广播与避灾路径。' }
];

const layers = [
	{ name: '应用层', color: 'bg-blue-600', items: ['驾驶舱大屏', '隐患工单', '应急指挥', '监管上报'] },
	{ name: '平台层', color: 'bg-indigo-600', items: ['AI 视觉大模型', 'SaaS 中台', '数据治理', '工艺联动'] },
	{ name: '网络层', color: 'bg-cyan-600', items: ['矿用环网', '本安无线', '4G/5G', '电力载波'] },
	{ name: '感知层', color: 'bg-emerald-600', items: ['防爆摄像头', '气体传感器', '定位标签', '环境监测仪'] }
];
---

<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-sm 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">
						AI + 矿用物联的矿山安全闭环
					</h3>
					<p class="text-gray-600 leading-relaxed mb-6">
						依托矿山行业专属 AI 大模型对井下与露天场景进行智能识别，结合防爆物联感知设备，对违规行为、有毒气体、灾害征兆实时预警，并自动联动通风/断电/应急广播，构建"感知-决策-处置-溯源"全链路安全闭环。
					</p>
					<div class="grid grid-cols-2 gap-3 mb-6">
						{features.map((f) => (
							<div class="bg-white border border-blue-100 rounded-xl p-3 flex items-start gap-2.5">
								<div class="w-8 h-8 rounded-lg bg-blue-600 text-white flex items-center justify-center shrink-0">
									<i class={`fa ${f.icon} text-base`}></i>
								</div>
								<div class="flex-1 min-w-0">
									<p class="text-base font-black text-gray-900 leading-tight">{f.title}</p>
									<p class="text-sm text-gray-600 mt-1 leading-relaxed">{f.desc}</p>
								</div>
							</div>
						))}
					</div>
					<div class="bg-white border border-blue-100 rounded-2xl p-4">
						<p class="text-base font-bold text-blue-700 mb-2">价值实现</p>
						<p class="text-base text-gray-600 leading-relaxed">事前预警、事中干预、事后溯源——满足《金属非金属矿山安全规程》与国家矿山安全监察局监管平台对接要求，存量摄像头利旧升级，70%+ 硬件成本下降。</p>
					</div>
				</div>

				<div class="space-y-4">
					<div class="rounded-2xl overflow-hidden border border-white shadow-lg bg-white">
						<img src="/img/mining/architecture.webp" alt="非煤矿山系统架构图" class="w-full h-auto object-cover" />
					</div>
					<div class="rounded-2xl bg-white border border-slate-200 shadow-sm p-4 md:p-5">
						<p class="text-sm font-black text-gray-400 tracking-[0.18em] mb-3 text-center">SYSTEM ARCHITECTURE</p>
						<div class="space-y-2">
							{layers.map((l) => (
								<div class="flex items-stretch gap-2">
									<div class={`shrink-0 w-16 ${l.color} text-white rounded-lg flex items-center justify-center font-black text-sm shadow-sm`}>{l.name}</div>
									<div class="flex-1 grid grid-cols-4 gap-1.5">
										{l.items.map((it) => (
											<div class="bg-slate-50 border border-slate-200 rounded-md py-1.5 px-1 text-center text-xs font-bold text-gray-700">{it}</div>
										))}
									</div>
								</div>
							))}
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</section>