---
const painSections = [
	{
		index: '痛点一',
		title: '巡检模式传统，风险发现偏后',
		summary: '校园日常安全巡检仍依赖人工经验，覆盖频次和标准执行不稳定，异常问题经常在事后才进入处置流程。',
		items: [
			{
				title: '人工巡查',
				desc: '依赖人员定时巡检，重点区域和高峰时段存在覆盖盲区。',
				icon: '/img/education/pain-1-manual-patrol.svg'
			},
			{
				title: '事后处置',
				desc: '问题发现滞后，处置流程启动慢，风险扩散概率增加。',
				icon: '/img/education/pain-1-post-response.svg'
			}
		]
	},
	{
		index: '痛点二',
		title: '重点领域监管与合规压力',
		summary: '关键环节监管标准执行不到位，过程记录不完整、不规范，难以满足最新政策法规与行业监管要求。',
		items: [
			{
				title: '食品安全',
				desc: '食材采购溯源难、加工过程监控缺失，存在卫生隐患。',
				icon: '/img/education/pain-2-food-safety.svg'
			},
			{
				title: '消防安防',
				desc: '设施巡检不及时，隐患排查记录不规范，应急响应慢。',
				icon: '/img/education/pain-2-fire-security.svg'
			},
			{
				title: '后勤运维',
				desc: '设备维护记录不全，维修流程不透明，资源浪费严重。',
				icon: '/img/education/pain-2-ops-maintenance.svg'
			}
		],
		risk: '重点环节整改不及时，可能面临监管处罚、责任追责与舆情风险。'
	},
	{
		index: '痛点三',
		title: '系统割裂，数据协同不足',
		summary: '出入管理、视频监控、消防报警等系统相互独立，数据难汇聚、事件难联动，管理效率受限。',
		items: [
			{
				title: '出入管理系统',
				desc: '访客、车辆、师生进出规则分散，异常通行难以统一预警。',
				icon: '/img/education/pain-3-access-control.svg'
			},
			{
				title: '视频监控系统',
				desc: '监控数据孤立，难与其他业务系统形成协同处置链路。',
				icon: '/img/education/pain-3-video-surveillance.svg'
			},
			{
				title: '消防报警系统',
				desc: '告警信息无法与现场管理流程联动，闭环追踪困难。',
				icon: '/img/education/pain-3-fire-alarm.svg'
			}
		]
	}
];
---

<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 relative">
			<div class="absolute top-0 left-1/2 -translate-x-1/2 w-64 h-64 bg-blue-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-blue-600">校园管理</span>核心痛点
			</h3>
			<div class="w-24 h-1.5 bg-blue-600 mx-auto mt-8 rounded-full shadow-sm shadow-blue-200"></div>
		</div>

		<div class="space-y-6 md:space-y-8">
			{painSections.map((section) => (
				<article class="rounded-3xl border border-blue-100 bg-white/95 shadow-sm p-5 md:p-8">
					<div class="flex flex-col gap-3 md:gap-4">
						<h4 class="text-2xl md:text-4xl font-black text-blue-600 tracking-tight">
							{section.index}：{section.title}
						</h4>
						<div class="rounded-2xl border border-slate-200 bg-slate-50 px-4 md:px-6 py-4">
							<p class="text-gray-700 text-base md:text-lg leading-relaxed">{section.summary}</p>
						</div>
					</div>

					<div class={`grid grid-cols-1 gap-4 mt-5 ${section.items.length === 2 ? 'md:grid-cols-2' : 'md:grid-cols-3'}`}>
						{section.items.map((item) => (
							<div class="rounded-2xl border border-blue-200 bg-blue-50 p-4 md:p-5">
								<div class="flex items-center gap-3 mb-3">
									<div class="w-10 h-10 rounded-xl border border-blue-200 bg-white flex items-center justify-center shrink-0">
										<img src={item.icon} alt={item.title} class="w-6 h-6 object-contain" />
									</div>
									<p class="text-xl font-black text-blue-600 leading-none">{item.title}</p>
								</div>
								<p class="text-gray-700 text-sm md:text-[1.05rem] leading-relaxed">{item.desc}</p>
							</div>
						))}
					</div>

					{section.risk && (
						<div class="mt-5 rounded-2xl border border-dashed border-blue-200 bg-blue-50/70 px-4 md:px-6 py-4 flex items-start gap-3">
							<div class="w-8 h-8 rounded-lg bg-red-100 text-red-600 flex items-center justify-center shrink-0 mt-0.5">
								<i class="fa fa-bell"></i>
							</div>
							<p class="text-gray-700 text-sm md:text-base leading-relaxed">
								<span class="font-black text-blue-600 mr-1">合规风险提示：</span>{section.risk}
							</p>
						</div>
					)}
				</article>
			))}
		</div>
	</div>
</section>