// 【重要】必须使用 const Component 作为组件变量名
// 小羚羚氢能产业数字化平台方案书 · Axhub Runtime 可交互响应式汇报页

const Component = function (props) {
	var useState = React.useState;
	var useEffect = React.useEffect;
	var useMemo = React.useMemo;
	var useCallback = React.useCallback;

	var antd = window.antd || {};
	var App = antd.App || React.Fragment;
	var Tag = antd.Tag;

	var C_PRIMARY = '#16D1A1';
	var C_PRIMARY_D = '#00BFA5';
	var C_HERO_BG = '#071218';
	var C_HERO_ACCENT = '#0d2a24';
	var C_PAGE = '#f4f6f8';
	var C_CARD = '#ffffff';
	var C_TEXT = '#1a1f2e';
	var C_MUTED = '#5c6578';
	var C_LINE = 'rgba(15,23,42,0.08)';
	var C_BLUE = '#2563eb';
	var C_ORANGE = '#ea580c';
	var C_PURPLE = '#7c3aed';

	var FONT = '-apple-system, BlinkMacSystemFont, "PingFang SC", "Helvetica Neue", "Segoe UI", sans-serif';

	var sectionNav = [
		{ key: 'hero', label: '总览' },
		{ key: 'chain', label: '产业链' },
		{ key: 'roles', label: '用户角色' },
		{ key: 'loops', label: '业务闭环' },
		{ key: 'roadmap', label: '路线图' },
		{ key: 'summary', label: '汇报要点' }
	];

	var kpiStats = [
		{ label: '目标用户角色', value: '7', unit: '类', color: C_BLUE },
		{ label: '业务闭环', value: '3', unit: '条', color: C_PRIMARY },
		{ label: '产业链覆盖', value: '上中下游', unit: '', color: C_ORANGE },
		{ label: '首期上线', value: '6', unit: '个月', color: C_PURPLE }
	];

	var chainSteps = [
		{
			key: 'upstream',
			title: '上游 · 制氢采购',
			desc: '制氢企业挂牌售氢、管束车调度、到站交付',
			revenue: '交易撮合费 · 物流调度 · 数据监测',
			color: C_BLUE,
			icon: 'H₂'
		},
		{
			key: 'mid',
			title: '中游 · 加氢站',
			desc: '预约接单、电子加氢卡结算、巡检与对账',
			revenue: 'SaaS 服务费 · 支付通道 · 对账增值',
			color: C_PRIMARY,
			icon: '站'
		},
		{
			key: 'down',
			title: '下游 · 氢能车运营',
			desc: '租赁/自营、交还车、能源与 ETC 账单闭环',
			revenue: '租赁服务 · 资产管理 · 金融结算',
			color: C_ORANGE,
			icon: '车'
		}
	];

	var roles = [
		{
			id: 'internal',
			name: '内部用户',
			sub: '羚牛氢能员工',
			tag: '运营中枢',
			color: C_BLUE,
			capability: '合同-收款-交还车-结算全链路；车辆全生命周期；风控审批',
			scenes: '业务员 / 运维 / 能源 / 财务 / 法务 / CEO',
			detail: [
				{ title: '租赁/自营闭环', text: '合同发起 → 客户评级/敏感客户校验 → 标准/非标审批 → 收款 → 交车 → 账单 → 还车 → 结算（含替换车）' },
				{ title: '车辆全生命周期', text: '采购/外租 → 验车入库 → 维修/年审/保养/故障/事故 → 出库（出售/报废/停租）' }
			]
		},
		{
			id: 'captain',
			name: '车队长',
			sub: '车队管理者',
			tag: '在线租车',
			color: C_PRIMARY,
			capability: '一键租车报价签约；车辆运行/账单/开票/对讲',
			scenes: '注册验证、在线合同、实时定位',
			detail: [
				{ title: '租车签约流程', text: '选车型租期 → 推送业务员 → 自动报价 → 在线确认 → 电子合同签章' },
				{ title: '交车后管控', text: '实时定位轨迹、氢电账单、ETC、合同账单、付款、开票、语音对讲' }
			]
		},
		{
			id: 'driver',
			name: '氢能车司机',
			sub: '自营 + 外部租赁',
			tag: '运输执行',
			color: C_ORANGE,
			capability: '路线导航、能源账单、安全培训、预约加氢、故障救援',
			scenes: '内外部司机差异化权限',
			detail: [
				{ title: '内部自营司机', text: '定位轨迹、路线规划导航、氢电ETC账单、安全考试、证照管理、预约加氢、紧急救援' },
				{ title: '外部租赁司机', text: '轨迹导航、能源账单、安全培训、车辆证件、预约加氢、故障提报' }
			]
		},
		{
			id: 'station',
			name: '加氢站用户',
			sub: '站点运营',
			tag: '加注服务',
			color: C_PRIMARY_D,
			capability: '预约接单、电子加氢卡、OCR 识别加氢量、氢费对账',
			scenes: '特种设备/行驶证校验',
			detail: [
				{ title: '核心能力', text: '预约接单验证、电子加氢卡结算、加氢前中后检查、OCR 识别面板加氢量、氢费对账、氢气采购' }
			]
		},
		{
			id: 'repair',
			name: '维修站用户',
			sub: '维保服务',
			tag: '派单对账',
			color: C_PURPLE,
			capability: '维修/保养派单接单、费用记录、运维核实对账',
			scenes: '配件人工自动入账',
			detail: [
				{ title: '流程', text: '接收派单 → 记录维修过程与费用 → 生成维修记录 → 运维核实 → 在线对账账期结算' }
			]
		},
		{
			id: 'producer',
			name: '制氢企业',
			sub: '氢气供应',
			tag: '氢气贸易',
			color: C_BLUE,
			capability: '在线挂牌售氢、管束车监测、询价成交与运费结算',
			scenes: '对接加氢站采购',
			detail: [
				{ title: '商业模式', text: '企业验证 → 在线挂牌售氢（类商城）→ 管束车监测 → 询价成交 → 配送到站 → 运费结算' }
			]
		},
		{
			id: 'group',
			name: '集团客户',
			sub: '企业级客户',
			tag: '集团总览',
			color: C_ORANGE,
			capability: '多项目车辆/账单/能源/ETC 总览；在线租车签约',
			scenes: '类车队长但主体为企业',
			detail: [
				{ title: '与车队长差异', text: '企业级多项目、多合同、多车队统一视图；支持 APP 在线租车并生成合同闭环' }
			]
		}
	];

	var loops = [
		{
			id: 'ops',
			title: '闭环一 · 租赁/自营运营',
			tag: '核心收入',
			color: C_BLUE,
			flow: '意向单 → 报价 → 合同（评级/敏感客户审批）→ 交车 → 运营监控 → 账单收款 → 还车 → 结算 → 替换车'
		},
		{
			id: 'asset',
			title: '闭环二 · 车辆资产生命周期',
			tag: '资产管控',
			color: C_PRIMARY,
			flow: '采购/外租 → 验车入库 → 维保/年审/故障/事故 → 能源消耗 → 出库处置 → OneOS 数据底座'
		},
		{
			id: 'h2',
			title: '闭环三 · 氢气贸易与加注',
			tag: '产业延伸',
			color: C_ORANGE,
			flow: '制氢挂牌 → 加氢站询价采购 → 管束车配送 → 司机预约加氢 → 电子加氢卡结算 → 氢费对账 → 账单聚合'
		}
	];

	var phases = [
		{ id: 'p1', phase: '第一阶段', period: '0–6 月', focus: '内部用户 + 车队长 + 司机', deliver: '合同审批、交还车、替换车、基础账单', active: true },
		{ id: 'p2', phase: '第二阶段', period: '6–12 月', focus: '加氢站 + 维修站', deliver: '预约加氢、电子加氢卡、维修派单对账' },
		{ id: 'p3', phase: '第三阶段', period: '12–18 月', focus: '制氢企业 + 氢气商城', deliver: '挂牌售氢、管束车调度、到站结算' },
		{ id: 'p4', phase: '第四阶段', period: '18–24 月', focus: '集团客户 + 数据智能', deliver: '集团总览、风控模型、产业数据分析' }
	];

	var summaryPoints = [
		'小羚羚不是单一 App，而是氢能产业多端协同的数字化入口，与 OneOS Web 形成「大屏管控 + 手机执行」互补。',
		'首期 6 个月聚焦租赁闭环与内部风控，快速产生业务价值；氢气贸易模块作为第二增长曲线。',
		'客户评级与敏感客户审批内嵌合同流程，从源头降低收账风险，支撑非标业务合规扩张。',
		'七类用户共用同一数据底座，避免信息孤岛，为智能调度与产业分析奠定基础。'
	];

	var activeSectionState = useState('hero');
	var activeSection = activeSectionState[0];
	var setActiveSection = activeSectionState[1];

	var activeRoleState = useState('internal');
	var activeRole = activeRoleState[0];
	var setActiveRole = activeRoleState[1];

	var activeChainState = useState('upstream');
	var activeChain = activeChainState[0];
	var setActiveChain = activeChainState[1];

	var activeLoopState = useState('ops');
	var activeLoop = activeLoopState[0];
	var setActiveLoop = activeLoopState[1];

	var activePhaseState = useState('p1');
	var activePhase = activePhaseState[0];
	var setActivePhase = activePhaseState[1];

	var navOpenState = useState(false);
	var navOpen = navOpenState[0];
	var setNavOpen = navOpenState[1];

	var selectedRole = useMemo(function () {
		return roles.find(function (r) { return r.id === activeRole; }) || roles[0];
	}, [activeRole]);

	var selectedChain = useMemo(function () {
		return chainSteps.find(function (c) { return c.key === activeChain; }) || chainSteps[0];
	}, [activeChain]);

	var selectedPhase = useMemo(function () {
		return phases.find(function (p) { return p.id === activePhase; }) || phases[0];
	}, [activePhase]);

	var scrollToSection = useCallback(function (key) {
		setActiveSection(key);
		setNavOpen(false);
		var el = document.getElementById('xll-section-' + key);
		if (el && el.scrollIntoView) {
			el.scrollIntoView({ behavior: 'smooth', block: 'start' });
		}
	}, []);

	useEffect(function () {
		var sectionIds = sectionNav.map(function (s) { return s.key; });
		function onScroll() {
			var found = 'hero';
			for (var i = 0; i < sectionIds.length; i++) {
				var node = document.getElementById('xll-section-' + sectionIds[i]);
				if (node) {
					var rect = node.getBoundingClientRect();
					if (rect.top <= 120) found = sectionIds[i];
				}
			}
			setActiveSection(found);
		}
		window.addEventListener('scroll', onScroll, { passive: true });
		return function () { window.removeEventListener('scroll', onScroll); };
	}, []);

	var css =
		'*,*::before,*::after{box-sizing:border-box}' +
		'.xll-plan{font-family:' + FONT + ';color:' + C_TEXT + ';background:' + C_PAGE + ';min-height:100vh;line-height:1.5;-webkit-font-smoothing:antialiased}' +
		'.xll-plan a{color:inherit;text-decoration:none}' +
		'.xll-nav{position:sticky;top:0;z-index:100;background:rgba(255,255,255,0.92);backdrop-filter:saturate(180%) blur(12px);border-bottom:1px solid ' + C_LINE + '}' +
		'.xll-nav-inner{max-width:1200px;margin:0 auto;padding:0 20px;height:56px;display:flex;align-items:center;gap:16px}' +
		'.xll-brand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:15px;color:' + C_TEXT + ';flex-shrink:0}' +
		'.xll-brand-mark{width:32px;height:32px;border-radius:10px;background:linear-gradient(135deg,' + C_PRIMARY + ',' + C_PRIMARY_D + ');color:#fff;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:800}' +
		'.xll-nav-links{display:flex;gap:4px;flex:1;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}' +
		'.xll-nav-links::-webkit-scrollbar{display:none}' +
		'.xll-nav-link{padding:8px 14px;border-radius:999px;font-size:13px;font-weight:500;color:' + C_MUTED + ';cursor:pointer;border:none;background:transparent;white-space:nowrap;transition:color .2s,background .2s}' +
		'.xll-nav-link:hover{color:' + C_TEXT + ';background:rgba(22,209,161,0.08)}' +
		'.xll-nav-link.is-active{color:' + C_PRIMARY_D + ';background:rgba(22,209,161,0.14);font-weight:600}' +
		'.xll-nav-toggle{display:none;padding:8px 12px;border-radius:8px;border:1px solid ' + C_LINE + ';background:#fff;cursor:pointer;font-size:13px}' +
		'.xll-hero{position:relative;background:' + C_HERO_BG + ';color:#fff;overflow:hidden;padding:64px 20px 72px}' +
		'.xll-hero::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 80% 60% at 70% 20%,rgba(22,209,161,0.18),transparent 55%),radial-gradient(ellipse 50% 40% at 10% 80%,rgba(37,99,235,0.12),transparent 50%);pointer-events:none}' +
		'.xll-hero-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,0.03) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,0.03) 1px,transparent 1px);background-size:48px 48px;mask-image:linear-gradient(to bottom,black 20%,transparent 90%);pointer-events:none}' +
		'.xll-hero-inner{position:relative;max-width:1200px;margin:0 auto}' +
		'.xll-hero-badges{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px}' +
		'.xll-badge{padding:5px 12px;border-radius:999px;font-size:12px;font-weight:500;border:1px solid rgba(255,255,255,0.18);background:rgba(255,255,255,0.06);color:rgba(255,255,255,0.88)}' +
		'.xll-badge-accent{border-color:rgba(22,209,161,0.45);background:rgba(22,209,161,0.12);color:#6ee7c8}' +
		'.xll-hero-title{font-size:clamp(28px,5vw,42px);font-weight:800;line-height:1.15;letter-spacing:-0.02em;margin:0 0 16px;max-width:720px}' +
		'.xll-hero-desc{font-size:clamp(14px,2.5vw,17px);line-height:1.65;color:rgba(255,255,255,0.72);max-width:640px;margin:0 0 28px}' +
		'.xll-hero-quote{padding:16px 20px;border-radius:12px;border-left:3px solid ' + C_PRIMARY + ';background:' + C_HERO_ACCENT + ';font-size:14px;line-height:1.6;color:rgba(255,255,255,0.9);max-width:720px}' +
		'.xll-hero-quote strong{color:#6ee7c8;font-weight:600}' +
		'.xll-kpi-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:-36px;position:relative;z-index:2;padding:0 20px;max-width:1200px;margin-left:auto;margin-right:auto}' +
		'.xll-kpi{background:' + C_CARD + ';border-radius:16px;padding:20px 18px;border:1px solid ' + C_LINE + ';box-shadow:0 4px 24px rgba(15,23,42,0.06);transition:transform .25s,box-shadow .25s;cursor:default}' +
		'.xll-kpi:hover{transform:translateY(-3px);box-shadow:0 12px 32px rgba(15,23,42,0.1)}' +
		'.xll-kpi-val{font-size:28px;font-weight:800;line-height:1.1;letter-spacing:-0.02em}' +
		'.xll-kpi-unit{font-size:14px;font-weight:600;margin-left:2px;opacity:.75}' +
		'.xll-kpi-label{font-size:12px;color:' + C_MUTED + ';margin-top:6px}' +
		'.xll-main{max-width:1200px;margin:0 auto;padding:48px 20px 64px}' +
		'.xll-section{margin-bottom:56px;scroll-margin-top:72px}' +
		'.xll-section-head{margin-bottom:24px}' +
		'.xll-section-tag{font-size:11px;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;color:' + C_PRIMARY_D + ';margin-bottom:8px}' +
		'.xll-section-title{font-size:clamp(22px,3vw,28px);font-weight:800;letter-spacing:-0.02em;margin:0 0 8px;color:' + C_TEXT + '}' +
		'.xll-section-desc{font-size:14px;color:' + C_MUTED + ';max-width:640px;margin:0;line-height:1.6}' +
		'.xll-chain-tabs{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:20px}' +
		'.xll-chain-tab{padding:10px 18px;border-radius:12px;border:1px solid ' + C_LINE + ';background:#fff;cursor:pointer;font-size:13px;font-weight:600;color:' + C_MUTED + ';transition:all .2s}' +
		'.xll-chain-tab.is-active{color:#fff;border-color:transparent;box-shadow:0 4px 16px rgba(15,23,42,0.12)}' +
		'.xll-chain-panel{background:#fff;border-radius:16px;border:1px solid ' + C_LINE + ';padding:24px;display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:center}' +
		'.xll-chain-panel-title{font-size:20px;font-weight:800;margin:0 0 8px}' +
		'.xll-chain-panel-desc{font-size:14px;color:' + C_MUTED + ';line-height:1.6;margin:0 0 12px}' +
		'.xll-chain-revenue{font-size:13px;padding:10px 14px;border-radius:10px;background:rgba(22,209,161,0.08);color:' + C_PRIMARY_D + ';font-weight:500}' +
		'.xll-chain-visual{aspect-ratio:16/10;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:64px;font-weight:900;color:rgba(255,255,255,0.95);position:relative;overflow:hidden}' +
		'.xll-chain-visual::after{content:"";position:absolute;inset:0;background:linear-gradient(135deg,transparent 40%,rgba(255,255,255,0.12))}' +
		'.xll-biz-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}' +
		'.xll-biz-card{background:#fff;border-radius:14px;padding:20px;border:1px solid ' + C_LINE + '}' +
		'.xll-biz-card h4{margin:0 0 10px;font-size:15px;font-weight:700}' +
		'.xll-biz-card p{margin:0;font-size:13px;color:' + C_MUTED + ';line-height:1.6}' +
		'.xll-roles-layout{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,0.9fr);gap:20px;align-items:start}' +
		'.xll-role-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}' +
		'.xll-role-card{padding:14px 16px;border-radius:12px;border:1px solid ' + C_LINE + ';background:#fff;cursor:pointer;text-align:left;transition:all .2s;width:100%}' +
		'.xll-role-card:hover{border-color:rgba(22,209,161,0.35);box-shadow:0 4px 16px rgba(15,23,42,0.06)}' +
		'.xll-role-card.is-active{border-color:transparent;box-shadow:0 8px 24px rgba(15,23,42,0.1);transform:translateY(-1px)}' +
		'.xll-role-name{font-size:14px;font-weight:700;margin-bottom:2px}' +
		'.xll-role-sub{font-size:11px;color:' + C_MUTED + '}' +
		'.xll-role-detail{background:#fff;border-radius:16px;border:1px solid ' + C_LINE + ';padding:24px;position:sticky;top:80px}' +
		'.xll-role-detail-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:16px}' +
		'.xll-role-detail h3{margin:0;font-size:20px;font-weight:800}' +
		'.xll-role-cap{font-size:13px;color:' + C_MUTED + ';line-height:1.6;margin-bottom:16px;padding-bottom:16px;border-bottom:1px solid ' + C_LINE + '}' +
		'.xll-role-block{margin-bottom:14px}' +
		'.xll-role-block h5{margin:0 0 6px;font-size:13px;font-weight:700;color:' + C_TEXT + '}' +
		'.xll-role-block p{margin:0;font-size:13px;color:' + C_MUTED + ';line-height:1.55}' +
		'.xll-loops{display:flex;flex-direction:column;gap:12px}' +
		'.xll-loop{padding:18px 20px;border-radius:14px;border:1px solid ' + C_LINE + ';background:#fff;cursor:pointer;transition:all .2s}' +
		'.xll-loop:hover{border-color:rgba(22,209,161,0.3)}' +
		'.xll-loop.is-active{border-color:transparent;box-shadow:0 8px 28px rgba(15,23,42,0.08)}' +
		'.xll-loop-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:0}' +
		'.xll-loop.is-active .xll-loop-head{margin-bottom:12px}' +
		'.xll-loop-title{font-size:15px;font-weight:700}' +
		'.xll-loop-flow{font-size:13px;color:' + C_MUTED + ';line-height:1.65;padding-top:12px;border-top:1px dashed ' + C_LINE + '}' +
		'.xll-roadmap{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:20px}' +
		'.xll-phase{padding:16px;border-radius:14px;border:1px solid ' + C_LINE + ';background:#fff;cursor:pointer;transition:all .2s;text-align:left;width:100%}' +
		'.xll-phase:hover{border-color:rgba(22,209,161,0.35)}' +
		'.xll-phase.is-active{border-color:transparent;box-shadow:0 8px 24px rgba(15,23,42,0.08)}' +
		'.xll-phase-num{font-size:11px;font-weight:700;color:' + C_PRIMARY_D + ';margin-bottom:6px}' +
		'.xll-phase-name{font-size:14px;font-weight:700;margin-bottom:4px}' +
		'.xll-phase-period{font-size:12px;color:' + C_MUTED + '}' +
		'.xll-phase-detail{background:#fff;border-radius:16px;border:1px solid ' + C_LINE + ';padding:24px}' +
		'.xll-phase-detail h4{margin:0 0 12px;font-size:18px;font-weight:800}' +
		'.xll-phase-meta{display:grid;grid-template-columns:1fr 1fr;gap:16px}' +
		'.xll-phase-meta dt{font-size:11px;font-weight:700;color:' + C_MUTED + ';text-transform:uppercase;letter-spacing:0.05em;margin-bottom:4px}' +
		'.xll-phase-meta dd{margin:0;font-size:14px;line-height:1.55}' +
		'.xll-summary{background:linear-gradient(135deg,' + C_HERO_BG + ',' + C_HERO_ACCENT + ');border-radius:20px;padding:32px;color:#fff}' +
		'.xll-summary h3{margin:0 0 20px;font-size:20px;font-weight:800}' +
		'.xll-summary-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}' +
		'.xll-summary-item{display:flex;gap:12px;font-size:14px;line-height:1.6;color:rgba(255,255,255,0.88)}' +
		'.xll-summary-num{flex-shrink:0;width:24px;height:24px;border-radius:8px;background:rgba(22,209,161,0.25);color:#6ee7c8;font-size:12px;font-weight:800;display:flex;align-items:center;justify-content:center}' +
		'.xll-footer{text-align:center;padding:24px 20px 32px;font-size:12px;color:' + C_MUTED + '}' +
		'@media(max-width:960px){.xll-kpi-row{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:-24px}.xll-chain-panel{grid-template-columns:1fr}.xll-biz-grid{grid-template-columns:1fr}.xll-roles-layout{grid-template-columns:1fr}.xll-role-detail{position:static}.xll-roadmap{grid-template-columns:repeat(2,minmax(0,1fr))}.xll-phase-meta{grid-template-columns:1fr}}' +
		'@media(max-width:640px){.xll-nav-links{display:none;position:absolute;top:56px;left:0;right:0;background:#fff;flex-direction:column;padding:12px 16px 16px;border-bottom:1px solid ' + C_LINE + ';box-shadow:0 8px 24px rgba(15,23,42,0.08)}.xll-nav.is-open .xll-nav-links{display:flex}.xll-nav-toggle{display:block;margin-left:auto}.xll-nav-inner{position:relative;flex-wrap:wrap;height:auto;min-height:56px;padding-top:10px;padding-bottom:10px}.xll-kpi-row{grid-template-columns:1fr 1fr;gap:10px}.xll-role-grid{grid-template-columns:1fr}.xll-roadmap{grid-template-columns:1fr}.xll-hero{padding:48px 16px 56px}.xll-main{padding:32px 16px 48px}}';

	function renderTag(text, color) {
		if (Tag) {
			return React.createElement(Tag, { color: color || C_PRIMARY, style: { borderRadius: 6, fontWeight: 600 } }, text);
		}
		return React.createElement('span', {
			style: {
				display: 'inline-block',
				padding: '2px 8px',
				borderRadius: 6,
				fontSize: 11,
				fontWeight: 600,
				background: 'rgba(22,209,161,0.12)',
				color: C_PRIMARY_D
			}
		}, text);
	}

	function renderNavLink(item) {
		return React.createElement('button', {
			key: item.key,
			type: 'button',
			className: 'xll-nav-link' + (activeSection === item.key ? ' is-active' : ''),
			onClick: function () { scrollToSection(item.key); }
		}, item.label);
	}

	return React.createElement(App, null,
		React.createElement('div', { className: 'xll-plan' },
			React.createElement('style', null, css),

			React.createElement('nav', { className: 'xll-nav' + (navOpen ? ' is-open' : ''), 'aria-label': '方案导航' },
				React.createElement('div', { className: 'xll-nav-inner' },
					React.createElement('div', { className: 'xll-brand' },
						React.createElement('div', { className: 'xll-brand-mark' }, '羚'),
						React.createElement('span', null, '小羚羚 · 平台方案')
					),
					React.createElement('button', {
						type: 'button',
						className: 'xll-nav-toggle',
						onClick: function () { setNavOpen(!navOpen); },
						'aria-expanded': navOpen
					}, navOpen ? '收起' : '导航'),
					React.createElement('div', { className: 'xll-nav-links', role: 'tablist' },
						sectionNav.map(renderNavLink)
					)
				)
			),

			React.createElement('header', { id: 'xll-section-hero', className: 'xll-hero xll-section' },
				React.createElement('div', { className: 'xll-hero-grid' }),
				React.createElement('div', { className: 'xll-hero-inner' },
					React.createElement('div', { className: 'xll-hero-badges' },
						React.createElement('span', { className: 'xll-badge xll-badge-accent' }, '方案书 v1.0'),
						React.createElement('span', { className: 'xll-badge' }, '手机端 · 小羚羚'),
						React.createElement('span', { className: 'xll-badge' }, 'OneOS 生态')
					),
					React.createElement('h1', { className: 'xll-hero-title' }, '小羚羚氢能产业数字化平台方案'),
					React.createElement('p', { className: 'xll-hero-desc' },
						以手机端「小羚羚」为统一入口，连接内部运营、车队客户、司机、加氢站、维修站、制氢企业与集团客户，实现氢气采购—加氢站—氢能车运营全链路数字化闭环。'
					),
					React.createElement('div', { className: 'xll-hero-quote' },
						React.createElement('strong', null, '一句话定位：'),
						'小羚羚 = 氢能产业的「业务操作系统」—— 一端登录、多角色协同，把合同、车辆、能源、维保、氢气贸易串成可落地、可风控、可结算的完整商业链条。'
					)
				)
			),

			React.createElement('div', { className: 'xll-kpi-row' },
				kpiStats.map(function (k) {
					return React.createElement('div', { key: k.label, className: 'xll-kpi' },
						React.createElement('div', { className: 'xll-kpi-val', style: { color: k.color } },
							k.value,
							k.unit ? React.createElement('span', { className: 'xll-kpi-unit' }, k.unit) : null
						),
						React.createElement('div', { className: 'xll-kpi-label' }, k.label)
					);
				})
			),

			React.createElement('main', { className: 'xll-main' },

				React.createElement('section', { id: 'xll-section-chain', className: 'xll-section' },
					React.createElement('div', { className: 'xll-section-head' },
						React.createElement('div', { className: 'xll-section-tag' }, 'Business Plan'),
						React.createElement('h2', { className: 'xll-section-title' }, '氢能产业链商业计划'),
						React.createElement('p', { className: 'xll-section-desc' },
							覆盖氢气采购、加氢站运营、氢能车租赁/自营三大环节，形成「制氢—储运—加注—运营—结算」一体化商业模式。'
						)
					),
					React.createElement('div', { className: 'xll-chain-tabs', role: 'tablist' },
						chainSteps.map(function (step) {
							var isActive = activeChain === step.key;
							return React.createElement('button', {
								key: step.key,
								type: 'button',
								role: 'tab',
								className: 'xll-chain-tab' + (isActive ? ' is-active' : ''),
								style: isActive ? { background: step.color } : undefined,
								onClick: function () { setActiveChain(step.key); }
							}, step.title);
						})
					),
					React.createElement('div', { className: 'xll-chain-panel', role: 'tabpanel' },
						React.createElement('div', null,
							React.createElement('h3', { className: 'xll-chain-panel-title' }, selectedChain.title),
							React.createElement('p', { className: 'xll-chain-panel-desc' }, selectedChain.desc),
							React.createElement('div', { className: 'xll-chain-revenue' }, '收入来源：' + selectedChain.revenue)
						),
						React.createElement('div', {
							className: 'xll-chain-visual',
							style: { background: 'linear-gradient(145deg,' + selectedChain.color + ',rgba(0,0,0,0.25))' },
							'aria-hidden': true
						}, selectedChain.icon)
					),
					React.createElement('div', { className: 'xll-biz-grid', style: { marginTop: 20 } },
						chainSteps.map(function (step) {
							return React.createElement('div', { key: step.key + '-biz', className: 'xll-biz-card' },
								React.createElement('h4', null, step.title),
								React.createElement('p', null, step.desc + '。' + step.revenue + '。')
							);
						})
					)
				),

				React.createElement('section', { id: 'xll-section-roles', className: 'xll-section' },
					React.createElement('div', { className: 'xll-section-head' },
						React.createElement('div', { className: 'xll-section-tag' }, 'Platform'),
						React.createElement('h2', { className: 'xll-section-title' }, '七类用户 · 一套数据底座'),
						React.createElement('p', { className: 'xll-section-desc' },
							点击角色卡片查看详细能力与业务场景，七端共用 OneOS 数据底座。'
						)
					),
					React.createElement('div', { className: 'xll-roles-layout' },
						React.createElement('div', { className: 'xll-role-grid', role: 'list' },
							roles.map(function (role) {
								var isActive = activeRole === role.id;
								return React.createElement('button', {
									key: role.id,
									type: 'button',
									className: 'xll-role-card' + (isActive ? ' is-active' : ''),
									style: isActive ? { background: 'linear-gradient(135deg,rgba(22,209,161,0.06),#fff)', borderLeft: '3px solid ' + role.color } : { borderLeft: '3px solid transparent' },
									onClick: function () { setActiveRole(role.id); }
								},
									React.createElement('div', { className: 'xll-role-name' }, role.name),
									React.createElement('div', { className: 'xll-role-sub' }, role.sub)
								);
							})
						),
						React.createElement('div', { className: 'xll-role-detail' },
							React.createElement('div', { className: 'xll-role-detail-head' },
								React.createElement('h3', null, selectedRole.name),
								renderTag(selectedRole.tag, selectedRole.color)
							),
							React.createElement('p', { className: 'xll-role-cap' }, selectedRole.capability),
							selectedRole.detail.map(function (block, idx) {
								return React.createElement('div', { key: idx, className: 'xll-role-block' },
									React.createElement('h5', null, block.title),
									React.createElement('p', null, block.text)
								);
							}),
							React.createElement('p', { style: { fontSize: 12, color: C_MUTED, margin: '12px 0 0' } },
								'关键场景：', selectedRole.scenes
							)
						)
					)
				),

				React.createElement('section', { id: 'xll-section-loops', className: 'xll-section' },
					React.createElement('div', { className: 'xll-section-head' },
						React.createElement('div', { className: 'xll-section-tag' }, 'Closed Loop'),
						React.createElement('h2', { className: 'xll-section-title' }, '三大业务闭环总览'),
						React.createElement('p', { className: 'xll-section-desc' }, '点击展开查看完整业务流转路径。')
					),
					React.createElement('div', { className: 'xll-loops' },
						loops.map(function (loop) {
							var isActive = activeLoop === loop.id;
							return React.createElement('div', {
								key: loop.id,
								className: 'xll-loop' + (isActive ? ' is-active' : ''),
								style: isActive ? { borderLeft: '3px solid ' + loop.color } : undefined,
								role: 'button',
								tabIndex: 0,
								onClick: function () { setActiveLoop(isActive ? '' : loop.id); },
								onKeyDown: function (e) {
									if (e.key === 'Enter' || e.key === ' ') {
										e.preventDefault();
										setActiveLoop(isActive ? '' : loop.id);
									}
								}
							},
								React.createElement('div', { className: 'xll-loop-head' },
									React.createElement('span', { className: 'xll-loop-title' }, loop.title),
									renderTag(loop.tag, loop.color)
								),
								isActive ? React.createElement('div', { className: 'xll-loop-flow' }, loop.flow) : null
							);
						})
					)
				),

				React.createElement('section', { id: 'xll-section-roadmap', className: 'xll-section' },
					React.createElement('div', { className: 'xll-section-head' },
						React.createElement('div', { className: 'xll-section-tag' }, 'Roadmap'),
						React.createElement('h2', { className: 'xll-section-title' }, '分阶段落地路线图'),
						React.createElement('p', { className: 'xll-section-desc' }, '24 个月四阶段推进，先闭环后延伸。')
					),
					React.createElement('div', { className: 'xll-roadmap' },
						phases.map(function (p, idx) {
							var isActive = activePhase === p.id;
							return React.createElement('button', {
								key: p.id,
								type: 'button',
								className: 'xll-phase' + (isActive ? ' is-active' : ''),
								style: isActive ? { borderLeft: '3px solid ' + C_PRIMARY } : undefined,
								onClick: function () { setActivePhase(p.id); }
							},
								React.createElement('div', { className: 'xll-phase-num' }, 'PHASE ' + (idx + 1)),
								React.createElement('div', { className: 'xll-phase-name' }, p.phase),
								React.createElement('div', { className: 'xll-phase-period' }, p.period)
							);
						})
					),
					React.createElement('div', { className: 'xll-phase-detail' },
						React.createElement('h4', null, selectedPhase.phase + ' · ' + selectedPhase.period),
						React.createElement('dl', { className: 'xll-phase-meta' },
							React.createElement('div', null,
								React.createElement('dt', null, '重点模块'),
								React.createElement('dd', null, selectedPhase.focus)
							),
							React.createElement('div', null,
								React.createElement('dt', null, '交付成果'),
								React.createElement('dd', null, selectedPhase.deliver)
							)
						)
					)
				),

				React.createElement('section', { id: 'xll-section-summary', className: 'xll-section' },
					React.createElement('div', { className: 'xll-summary' },
						React.createElement('h3', null, '向管理层汇报要点'),
						React.createElement('ul', { className: 'xll-summary-list' },
							summaryPoints.map(function (text, i) {
								return React.createElement('li', { key: i, className: 'xll-summary-item' },
									React.createElement('span', { className: 'xll-summary-num' }, i + 1),
									React.createElement('span', null, text)
								);
							})
						)
					)
				)
			),

			React.createElement('footer', { className: 'xll-footer' },
				'文档版本 v1.0 · 羚牛氢能 · 小羚羚平台方案 · 供内部汇报使用 · OneOS 生态'
			)
		)
	);
};

export default Component;