---
const features = [
	{ icon: 'fa-fire', title: '防火防爆', desc: '储罐区/反应釜温度压力液位实时监测，火焰烟雾秒级识别，联动喷淋切断阀。' },
	{ icon: 'fa-cloud', title: '防毒防泄漏', desc: 'VOCs/H₂S/Cl₂ 吸入式高精度监测，泄漏萌芽即刻预警，自动联动通风疏散。' },
	{ icon: 'fa-ban', title: '防入侵封闭化', desc: '周界电子围栏 + 危化车辆预约-装卸-出厂全流程管控，违章自动抓拍。' },
	{ icon: 'fa-id-card', title: '人员准入安全', desc: '人脸 + 防静电 + 酒精测试三重门禁，UWB 定位 + 智能手环 SOS。' }
];

const layers = [
	{ name: '应用层', color: 'bg-blue-600', items: ['可视化指挥', '隐患工单', '应急疏散', '合规上报'] },
	{ name: '平台层', color: 'bg-indigo-600', items: ['AI 视觉大模型', 'SaaS 中台', '危废联单', '工业互联网'] },
	{ name: '网络层', color: 'bg-cyan-600', items: ['防爆环网', 'LoRa/NB-IoT', '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">
						围绕<strong>防火、防爆、防毒、防泄漏、防入侵</strong>五大刚需场景，融合 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">告警准确率 ≥98%，识别响应 ≤1 秒，三级预警机制 + 自动联锁处置，事故事件全程留痕，满足应急管理部门远程监管与数据合规上报要求。</p>
					</div>
				</div>

				<div class="space-y-4">
					<div class="rounded-2xl overflow-hidden border border-white shadow-lg bg-white">
						<img src="/img/chemical/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>