import React, { useState } from 'react';
import { motion, AnimatePresence } from 'motion/react';
import { 
  Activity, ShieldCheck, Zap, Server, ChevronRight,
  Database, Cpu, Cloud, Truck, Factory, Building, Target,
  Leaf, AlertTriangle, Wind, Thermometer, Gauge, Navigation,
  Settings, Battery, Link2, Share2, Search, LineChart, BarChart,
  Radio, HardDrive, Network, MapPin, CheckCircle2, Factory as FactoryIcon, ShieldAlert, Workflow,
  Maximize2, Eye, Sliders, Flame, Compass, RefreshCw
} from 'lucide-react';

// --- Import assets ---
import oneossBoxImage from './assets/images/oneoss_box_1779852084134.png';
import oneossSideFacet from './assets/images/oneoss_side_facet_1779862455874.png';
import oneossTopFacet from './assets/images/oneos_top_facet_1779864912925.png';
import scenarioFleetImage from './assets/images/scenario_fleet_1779863559233.png';
import scenarioStationImage from './assets/images/scenario_station_1779863574991.png';
import scenarioDatacenterImage from './assets/images/scenario_datacenter_1779863590420.png';

// --- Reusable Compact Architecture Component ---

const CompactArchCard = ({ title, children, className = "", headerClass = "bg-[#121212]" }: { title?: React.ReactNode, children: React.ReactNode, className?: string, headerClass?: string }) => (
  <div className={`bg-[#0D0D0D]/90 border border-neutral-800/80 rounded shadow-lg flex flex-col overflow-hidden relative transition-all duration-300 hover:border-[#00F2FF]/40 ${className}`}>
    {/* Decorative micro LED accent on card edge */}
    <div className="absolute top-0 left-0 right-0 h-[1px] bg-gradient-to-r from-transparent via-[#00F2FF]/20 to-transparent"></div>
    {title && (
      <div className={`${headerClass} px-3 py-1.5 border-b border-neutral-800/60 text-[10px] font-extrabold tracking-wider uppercase text-neutral-300 flex items-center justify-between`}>
        {title}
      </div>
    )}
    <div className="p-3 flex flex-col gap-2 flex-1 relative z-10 font-sans">
      {children}
    </div>
  </div>
);

const CompactArchList = ({ items }: { items: { icon?: any, text: string, textEn?: string }[] }) => (
  <ul className="flex flex-col gap-1.5 text-[10px] text-neutral-400">
    {items.map((item, i) => {
      const Icon = item.icon;
      return (
        <li key={i} className="flex items-start gap-1.5 leading-tight">
          {Icon ? (
            <Icon size={11} className="text-[#00F2FF] shrink-0 mt-[2px]" />
          ) : (
            <div className="w-[3px] h-[3px] bg-[#00F2FF] rounded-full shadow-[0_0_4px_#00F2FF] shrink-0 mt-[6px]"></div>
          )}
          <div className="flex flex-col">
            <span className="text-neutral-200">{item.text}</span>
            {item.textEn && <span className="text-[8px] font-mono text-neutral-600 uppercase tracking-tight">{item.textEn}</span>}
          </div>
        </li>
      );
    })}
  </ul>
);

type StylePreset = 'cyan' | 'amber' | 'crimson';

interface PerspectiveFacet {
  id: string;
  nameCn: string;
  nameEn: string;
  image: string;
  descriptionCn: string;
  descriptionEn: string;
  specs: { label: string; value: string }[];
}

export default function App() {
  const [activeTab, setActiveTab] = useState<'overview' | 'architecture'>('overview');
  
  // Custom futuristic theme/preset selector state
  const [styleTheme, setStyleTheme] = useState<StylePreset>('cyan');

  // Interactive Perspective Switcher State
  const [activeFacet, setActiveFacet] = useState<string>('top');

  const themes = {
    cyan: {
      accent: '#00F2FF',
      glow: 'shadow-[0_0_20px_rgba(0,242,255,0.25)]',
      border: 'border-[#00F2FF]/30',
      textAccent: 'text-[#00F2FF]',
      bgAccent: 'bg-[#00F2FF]',
      borderAccent: 'border-[#00F2FF]',
      gradient: 'from-[#00F2FF] to-[#0066FF]',
      radialGlow: 'bg-[#00F2FF]/5',
      nameCn: '极光霓虹',
      nameEn: 'Aurora Cyan'
    },
    amber: {
      accent: '#FBBF24',
      glow: 'shadow-[0_0_20px_rgba(251,191,36,0.25)]',
      border: 'border-[#FBBF24]/30',
      textAccent: 'text-[#FBBF24]',
      bgAccent: 'bg-[#FBBF24]',
      borderAccent: 'border-[#FBBF24]',
      gradient: 'from-[#FBBF24] to-[#D97706]',
      radialGlow: 'bg-[#FBBF24]/5',
      nameCn: '航天鎏金',
      nameEn: 'Aerospace Amber'
    },
    crimson: {
      accent: '#EF4444',
      glow: 'shadow-[0_0_20px_rgba(239,68,68,0.25)]',
      border: 'border-[#EF4444]/30',
      textAccent: 'text-[#EF4444]',
      bgAccent: 'bg-[#EF4444]',
      borderAccent: 'border-[#EF4444]',
      gradient: 'from-[#EF4444] to-[#991B1B]',
      radialGlow: 'bg-[#EF4444]/5',
      nameCn: '聚变红核',
      nameEn: 'Fusion Crimson'
    }
  };

  const activeTheme = themes[styleTheme];

  const facets: PerspectiveFacet[] = [
    {
      id: 'iso',
      nameCn: '立体主视图',
      nameEn: 'Isometric View',
      image: oneossBoxImage,
      descriptionCn: '全铝阳极氧化磨砂太空灰机壳，线条凝练锐利，边缘搭载可变色长条形高精度脉冲 LED 光斑状态指示器，彰显现代工业极简美学。',
      descriptionEn: 'Anodized sandblasted space-gray aluminum casing with razor-sharp geometric contours, presenting active pulsating high-frequency pulse status LEDs.',
      specs: [
        { label: 'Chassis Material', value: 'Anodized Aluminum' },
        { label: 'Ingress Rating', value: 'IP67 Waterproof' },
        { label: 'Operating Temp', value: '-40°C to +85°C' }
      ]
    },
    {
      id: 'side',
      nameCn: '连接器切面',
      nameEn: 'Connector Detail',
      image: oneossSideFacet,
      descriptionCn: '机身侧部配置重工业级 M12 耐高负载密封金属插座，保障信号链路与大电流供应在多端复杂极端环境下的无损传输。',
      descriptionEn: 'High-load heavy industrial M12 sealed metal connectors designed to safeguard physical connectivity under extreme multi-node environments.',
      specs: [
        { label: 'Interface Type', value: 'M12 Industrial A-Coded' },
        { label: 'Contact Finish', value: 'Gold-Plated/Copper Alloy' },
        { label: 'Coupling Method', value: 'Threaded Locking Joint' }
      ]
    },
    {
      id: 'top',
      nameCn: '顶板盖透视图',
      nameEn: 'Holographic Deck',
      image: oneossTopFacet,
      descriptionCn: '半透明暗色钢化玻璃盖板板底饰有沉金电路纹章，结合内部微弱背光结构，完美融合未来感科技韵味。',
      descriptionEn: 'High-strength semi-translucent dark tempered glass with complex circuit tracing architecture embedded under subtle microchips array.',
      specs: [
        { label: 'Panel Type', value: 'Corning Gorilla Glass v5' },
        { label: 'Thermal Shielding', value: 'Aerogel Thermal Layer' },
        { label: 'Chassis Pressure', value: 'Internal Relief Valves' }
      ]
    }
  ];

  const selectedFacet = facets.find(f => f.id === activeFacet) || facets[0];

  return (
    <div className="min-h-screen flex flex-col font-sans selection:bg-neutral-800 selection:text-white bg-[#030303] text-[#E5E5E5] overflow-hidden">
      
      {/* 1. Header Navigation */}
      <header className="h-20 flex items-center justify-between px-6 md:px-12 border-b border-neutral-900 bg-[#060606] z-30 sticky top-0 flex-shrink-0">
        <div className="flex items-center gap-4">
          <div className="relative group">
            <div className={`w-9 h-9 rounded-sm bg-gradient-to-br ${activeTheme.gradient} flex items-center justify-center transition-all ${activeTheme.glow}`}>
              <div className="w-4 h-4 bg-[#030303] rounded-full" />
            </div>
          </div>
          <div className="flex flex-col">
            <span className="font-sans font-black tracking-[0.25em] text-sm text-white uppercase flex items-center gap-2">
              OneOS <span className="text-[9px] px-1.5 py-0.5 rounded border border-neutral-800 bg-neutral-950 text-[#fff]">V2.0</span>
            </span>
            <span className="text-[9px] text-neutral-500 tracking-[0.15em] uppercase font-mono">Hydrogen Safety Control Matrix</span>
          </div>
        </div>

        {/* Tab & Language Header Selector */}
        <div className="flex items-center gap-2 md:gap-8">
          <div className="flex items-center rounded-sm bg-neutral-950 p-[3px] border border-neutral-900">
            <button 
              onClick={() => setActiveTab('overview')}
              className={`px-4 py-1.5 rounded-sm text-[11px] font-bold tracking-wider uppercase transition-all duration-300 ${activeTab === 'overview' ? 'bg-[#111111] text-white border border-neutral-800 shadow-inner' : 'text-neutral-500 hover:text-neutral-200'}`}
            >
              产品明细 <span className="text-[9px] ml-1 opacity-50">DETAIL</span>
            </button>
            <button 
              onClick={() => setActiveTab('architecture')}
              className={`px-4 py-1.5 rounded-sm text-[11px] font-bold tracking-wider uppercase transition-all duration-300 ${activeTab === 'architecture' ? 'bg-[#111111] text-white border border-neutral-800 shadow-inner' : 'text-neutral-500 hover:text-neutral-200'}`}
            >
              逻辑架构 <span className="text-[9px] ml-1 opacity-50">ARCH</span>
            </button>
          </div>

          <div className="h-6 w-px bg-neutral-900 hidden md:block"></div>

          {/* Theme Preset Selector */}
          <div className="hidden md:flex items-center gap-2">
            <span className="text-[9px] font-mono text-neutral-500 uppercase tracking-widest mr-1">Style Matrix:</span>
            {(['cyan', 'amber', 'crimson'] as StylePreset[]).map((themeName) => {
              const t = themes[themeName];
              return (
                <button
                  key={themeName}
                  onClick={() => setStyleTheme(themeName)}
                  className={`w-6 h-6 rounded-full border flex items-center justify-center transition-all ${styleTheme === themeName ? 'border-white scale-110' : 'border-neutral-900 hover:border-neutral-700'}`}
                  title={`${t.nameCn} / ${t.nameEn}`}
                >
                  <span className={`w-3 h-3 rounded-full ${t.bgAccent}`} />
                </button>
              );
            })}
          </div>
        </div>
      </header>

      {/* 2. Main Workspace */}
      <main className="flex-1 w-full bg-[#080808] overflow-y-auto relative h-full">
        
        {/* Futuristic Ambient Grid Overlay */}
        <div className="fixed inset-0 z-0 pointer-events-none opacity-25">
          <div className="absolute inset-0 bg-[radial-gradient(#1A1A1A_1px,transparent_1px)] [background-size:24px_24px]" />
          <div className={`absolute top-[10%] right-[15%] w-[650px] h-[650px] ${activeTheme.radialGlow} blur-[180px] rounded-full`} />
          <div className="absolute bottom-[5%] left-[5%] w-[550px] h-[550px] bg-blue-950/10 blur-[150px] rounded-full" />
        </div>

        <AnimatePresence mode="wait">
          
          {/* =========================================================================
              TAB: PRODUCT OVERVIEW & CUT SECTIONS (中英双语)
              ========================================================================= */}
          {activeTab === 'overview' && (
            <motion.div 
              key="overview"
              initial={{ opacity: 0, y: 10 }}
              animate={{ opacity: 1, y: 0 }}
              exit={{ opacity: 0, y: -10 }}
              transition={{ duration: 0.4 }}
              className="grid grid-cols-1 xl:grid-cols-12 w-full max-w-[1920px] mx-auto min-h-full divide-y xl:divide-y-0 xl:divide-x divide-neutral-900 relative z-10"
            >
              {/* LEFT INTRODUCTORY PANEL (Bilingual, Rich Copy) */}
              <div className="col-span-1 xl:col-span-6 flex flex-col justify-between p-8 md:p-16 bg-[#090909]/90 relative">
                
                {/* Style Palette Mobile Hotbar */}
                <div className="flex md:hidden items-center justify-between p-3 rounded bg-neutral-950/60 border border-neutral-900 mb-6">
                  <span className="text-[10px] font-mono text-neutral-400">切换科技氛围</span>
                  <div className="flex gap-2">
                    {(['cyan', 'amber', 'crimson'] as StylePreset[]).map((themeName) => {
                      const t = themes[themeName];
                      return (
                        <button
                          key={themeName}
                          onClick={() => setStyleTheme(themeName)}
                          className={`w-5 h-5 rounded-full border flex items-center justify-center transition-all ${styleTheme === themeName ? 'border-white scale-110' : 'border-neutral-900'}`}
                        >
                          <span className={`w-2.5 h-2.5 rounded-full ${t.bgAccent}`} />
                        </button>
                      );
                    })}
                  </div>
                </div>

                <div className="flex flex-col gap-6">
                  {/* Small tag */}
                  <div className="flex items-center gap-2">
                    <span className={`w-2 h-2 rounded-full ${activeTheme.bgAccent} shadow-[0_0_8px_${activeTheme.accent}] animate-pulse`} />
                    <span className="font-mono text-[10px] tracking-[0.25em] text-neutral-400 uppercase">
                      OneOS Industrial v6.0 Terminal Protocol
                    </span>
                  </div>

                  {/* Title Matrix */}
                  <div className="space-y-2">
                    <h1 className="text-4xl md:text-5xl lg:text-6xl font-light tracking-tight text-white leading-[1.15]">
                      Hydrogen Safety & <br />
                      <span className="font-extrabold tracking-wide uppercase bg-gradient-to-r from-white via-neutral-100 to-neutral-400 bg-clip-text text-transparent">
                        Carbon Factor Box
                      </span>
                    </h1>
                    <div className="flex items-center gap-3">
                      <h2 className={`font-mono text-xl md:text-2xl font-bold tracking-widest ${activeTheme.textAccent}`}>
                        LNbox 氢能智能终端
                      </h2>
                    </div>
                  </div>

                  {/* Copy Block in Chinese & English */}
                  <div className="space-y-4 max-w-xl text-neutral-400 text-sm leading-relaxed border-l-2 border-neutral-800 pl-6 py-1">
                    <p className="font-sans font-light">
                      OneOS AI 氢能控制终端 (LNbox) 是一款专为工业复杂场景定制的紧凑级高可靠核心控制设备。全机采用微几何立体机架防爆架构，精调极简工艺，支持多点秒级 H2 浓度、管网压力数据采集分析及碳因子追踪。
                    </p>
                    <p className="font-mono text-[11px] text-neutral-500 uppercase leading-relaxed">
                      The LNbox AI-powered telemetry unit encapsulates raw hydrogen safety algorithms and active carbon factor logging. Crafted out of highgrade materials to endure corrosive industrial environments.
                    </p>
                  </div>

                  {/* Feature Pillars Highlights (Bilingual) */}
                  <div className="grid grid-cols-1 md:grid-cols-2 gap-6 mt-6 border-t border-neutral-900 pt-8">
                    <div className="p-4 rounded bg-neutral-950/40 border border-neutral-900 relative overflow-hidden group hover:border-neutral-800 transition-all">
                      <div className="absolute top-0 left-0 w-1 h-full bg-cyan-500/20" />
                      <div className="flex items-center gap-3 mb-2">
                        <div className="p-1.5 rounded bg-cyan-950/30 text-cyan-400">
                          <ShieldAlert size={16} />
                        </div>
                        <span className="text-[11px] font-bold tracking-[0.15em] uppercase text-neutral-300">防爆与泄漏监测</span>
                      </div>
                      <p className="text-[11px] text-neutral-400 leading-normal mb-1">精细感知泄漏阀值及车压变化，支持秒级自动气路阻断控制。</p>
                      <span className="text-[9px] font-mono text-neutral-500 block uppercase">Level 4 Active Isolation Protocol</span>
                    </div>

                    <div className="p-4 rounded bg-neutral-950/40 border border-neutral-900 relative overflow-hidden group hover:border-neutral-800 transition-all">
                      <div className="absolute top-0 left-0 w-1 h-full bg-emerald-500/20" />
                      <div className="flex items-center gap-3 mb-2">
                        <div className="p-1.5 rounded bg-emerald-950/30 text-emerald-400">
                          <Leaf size={16} />
                        </div>
                        <span className="text-[11px] font-bold tracking-[0.15em] uppercase text-neutral-300">低碳因子动态上链</span>
                      </div>
                      <p className="text-[11px] text-neutral-400 leading-normal mb-1">原生搭载碳估算模型核准装置，提供实时清洁绿氢因子加密认证。</p>
                      <span className="text-[9px] font-mono text-neutral-500 block uppercase">Encrypted Carbon Ledger Hub</span>
                    </div>

                    <div className="p-4 rounded bg-neutral-950/40 border border-neutral-900 relative overflow-hidden group hover:border-neutral-800 transition-all">
                      <div className="absolute top-0 left-0 w-1 h-full bg-amber-500/20" />
                      <div className="flex items-center gap-3 mb-2">
                        <div className="p-1.5 rounded bg-amber-950/30 text-amber-400">
                          <Zap size={16} />
                        </div>
                        <span className="text-[11px] font-bold tracking-[0.15em] uppercase text-neutral-300">能源 AI 智能调度</span>
                      </div>
                      <p className="text-[11px] text-neutral-400 leading-normal mb-1">结合边缘端负荷估算与最优分配策略，实现绿电制氢与用能消纳自适应分配。</p>
                      <span className="text-[9px] font-mono text-neutral-500 block uppercase">Autonomous Energy AI Dispatch</span>
                    </div>

                    <div className="p-4 rounded bg-neutral-950/40 border border-neutral-900 relative overflow-hidden group hover:border-neutral-800 transition-all">
                      <div className="absolute top-0 left-0 w-1 h-full bg-[#00F2FF]/20" />
                      <div className="flex items-center gap-3 mb-2">
                        <div className="p-1.5 rounded bg-[#00F2FF]/10 text-[#00F2FF]">
                          <Cpu size={16} />
                        </div>
                        <span className="text-[11px] font-bold tracking-[0.15em] uppercase text-neutral-300">本地自研边缘算力</span>
                      </div>
                      <p className="text-[11px] text-neutral-400 leading-normal mb-1">整合轻量级故障预测神经网络，支持离网计算及异常智能判断。</p>
                      <span className="text-[9px] font-mono text-neutral-500 block uppercase">Intellectual AI Inference Engine</span>
                    </div>
                  </div>
                </div>


              </div>

              {/* RIGHT PREMIUM VISUAL PRESENTATION WITH PERSPECTIVE/STYLE SWAPPER */}
              <div className="col-span-1 xl:col-span-6 flex flex-col justify-start p-8 md:p-12 bg-[#050505] relative overflow-hidden">
                
                {/* Absolute status background */}
                <div className="absolute top-6 right-6 flex items-center gap-2 px-3 py-1 bg-neutral-950 border border-neutral-900 rounded font-mono text-[9px] text-neutral-400">
                  <span className={`w-1.5 h-1.5 rounded-full ${activeTheme.bgAccent}`} />
                  ACCENT STATE: {activeTheme.nameEn}
                </div>

                {/* Main Visual Display Block */}
                <div className="flex flex-col justify-start items-center pt-2 pb-4">
                  
                  {/* Dynamic interactive heading showcasing which viewpoint we're examining */}
                  <div className="text-center mb-4">
                    <div className="text-[10px] font-mono tracking-[0.3em] uppercase text-neutral-500">Live Render Viewpoint</div>
                    <div className="text-xl font-bold tracking-widest text-[#FFF] uppercase mt-1 flex items-center justify-center gap-2">
                      <span>{selectedFacet.nameCn}</span>
                      <span className="text-neutral-500">/</span>
                      <span className={`text-xs ${activeTheme.textAccent} font-mono font-medium`}>{selectedFacet.nameEn}</span>
                    </div>
                  </div>

                  <div className="relative w-full max-w-lg mt-2 group flex flex-col justify-center">
                    {/* Pulsing neon halo under the device frame mirroring styleTheme */}
                    <div className={`absolute -inset-2 bg-gradient-to-tr ${activeTheme.gradient} opacity-10 blur-xl rounded-xl transition-all duration-700 group-hover:opacity-20`} />
                    
                    {/* Device Rendering Box with active styles */}
                    <div className="relative border border-neutral-800/80 bg-[#0E0E0E]/95 shadow-[0_0_50px_rgba(0,0,0,0.8)] p-8 rounded flex items-center justify-center min-h-[300px] md:min-h-[360px] overflow-hidden transition-all hover:border-neutral-700">
                      
                      {/* Compact 2-line floating brand brand overlay as requested: LN on top, ONEOS below */}
                      <div className="absolute top-6 left-6 z-20 select-none flex flex-col gap-1 text-left">
                        <div className="font-sans font-black text-3xl md:text-4xl tracking-wider text-[#00F2FF] leading-none drop-shadow-[0_0_10px_rgba(0,242,255,0.5)]">
                          LN
                        </div>
                        <div className="font-sans font-black text-xs md:text-sm tracking-[0.3em] text-white/90 leading-none">
                          ONEOS
                        </div>
                      </div>

                      {/* Interactive image layer with smooth transitions */}
                      <AnimatePresence mode="wait">
                        <motion.img 
                          key={selectedFacet.id}
                          src={selectedFacet.image}
                          alt={selectedFacet.nameCn}
                          initial={{ opacity: 0, scale: 0.95 }}
                          animate={{ opacity: 1, scale: 1 }}
                          exit={{ opacity: 0, scale: 0.95 }}
                          transition={{ duration: 0.4 }}
                          className="w-full h-auto object-contain max-h-[260px] md:max-h-[300px] object-center opacity-95 brightness-[1.05] group-hover:scale-105 transition-all duration-500"
                          referrerPolicy="no-referrer"
                        />
                      </AnimatePresence>

                      {/* Tech alignment markers representing standard octane studio photo overlays */}
                      <div className="absolute top-4 right-4 font-mono text-[7px] text-neutral-600 flex flex-col text-right">
                        <span>OCTANE_RENDER_V6_HD</span>
                        <span>GRID_LOCK_ALGN [OK]</span>
                      </div>

                      {/* Accent lighting element overlays that dynamically changes colors based on chosen matrix preset */}
                      <div className="absolute inset-0 bg-[#00F2FF]/0 pointer-events-none transition-all duration-500" />
                    </div>
                  </div>

                  {/* Mini details spec card for active perspective */}
                  <div className="w-full max-w-lg mt-6 grid grid-cols-3 gap-2 shrink-0">
                    {selectedFacet.specs.map((item, idx) => (
                      <div key={idx} className="bg-[#090909] p-2.5 border border-neutral-900 flex flex-col rounded">
                        <span className="text-[7.5px] font-mono text-neutral-500 uppercase tracking-wider">{item.label}</span>
                        <span className="text-[10.5px] font-bold text-neutral-200 mt-0.5 truncate">{item.value}</span>
                      </div>
                    ))}
                  </div>
                </div>

                {/* Perspective selector tab featuring three actual small product preview images */}
                <div className="border-t border-neutral-900/40 pt-4 mt-2 shrink-0">
                  <div className="grid grid-cols-3 gap-3 max-w-lg mx-auto">
                    {facets.map((facet) => {
                      const isSelected = activeFacet === facet.id;
                      return (
                        <button
                          key={facet.id}
                          onClick={() => setActiveFacet(facet.id)}
                          className={`group flex flex-col items-center p-1.5 border rounded bg-[#070707] transition-all duration-300 ${isSelected ? `border-white ring-1 ring-white/10 ${activeTheme.glow}` : 'border-neutral-900 hover:border-neutral-700/60'}`}
                        >
                          {/* Inner thumbnail photo */}
                          <div className="w-full aspect-[4/3] rounded bg-[#0A0A0A] border border-neutral-900 overflow-hidden flex items-center justify-center p-1 mb-1.5 group-hover:border-neutral-700">
                            <img 
                              src={facet.image} 
                              alt={facet.nameCn} 
                              className={`max-h-full max-w-full object-contain filter group-hover:scale-110 transition-transform duration-300 ${isSelected ? 'brightness-[1.1] opacity-100' : 'brightness-90 opacity-70'}`}
                              referrerPolicy="no-referrer"
                            />
                          </div>
                          <span className={`text-[10px] font-bold tracking-tight leading-tight ${isSelected ? activeTheme.textAccent : 'text-neutral-400'}`}>
                            {facet.nameCn}
                          </span>
                          <span className="text-[7.5px] font-mono text-neutral-500 uppercase tracking-wide mt-0.5">
                            {facet.nameEn}
                          </span>
                        </button>
                      );
                    })}
                  </div>
                </div>

              </div>
            </motion.div>
          )}

          {/* =========================================================================
              TAB: CORE LOGICAL ARCHITECTURE FLOW (Bilingual & Exactly Matching Attached Diagram)
              ========================================================================= */}
          {activeTab === 'architecture' && (
            <motion.div 
              key="architecture"
              initial={{ opacity: 0, y: 10 }}
              animate={{ opacity: 1, y: 0 }}
              exit={{ opacity: 0, y: -10 }}
              transition={{ duration: 0.4 }}
              className="w-full h-full xl:max-h-[calc(100vh-140px)] flex flex-col items-center justify-between p-3 md:p-5 lg:p-6 z-10 relative overflow-hidden"
            >
              
              {/* Architecture Title block with both ENG and CN */}
              <div className="text-center mb-2 md:mb-4 max-w-2xl px-4 flex-shrink-0">
                <div className="inline-flex items-center gap-2 px-2 py-0.5 bg-[#121212]/80 border border-neutral-800 text-[9px] uppercase tracking-widest text-[#00F2FF] rounded font-mono mb-1">
                  Logical Data Flow and System Infrastructure
                </div>
                <h2 className="text-xl md:text-2xl font-light tracking-tight text-white mb-0.5">
                  OneOS AI 氢能盒子 - <span className="font-extrabold text-[#00F2FF] tracking-wide">核心逻辑架构图</span>
                </h2>
                <p className="text-[9px] font-mono text-neutral-500 uppercase tracking-widest">
                  BI-LINGUAL SCHEMATIC FLOW CHART • 100% FULL-SCREEN COCKPIT
                </p>
              </div>

              {/* Exact column layout with custom bidirectional connectors */}
              <div className="w-full max-w-[1780px] mx-auto flex flex-col xl:flex-row gap-2.5 items-stretch relative flex-1 min-h-0 min-w-0">
                
                {/* COLUMN 1: 数据采集层 (Data Capture Layer, ~18% width) */}
                <div className="flex flex-col gap-2 p-2 bg-neutral-950/50 rounded border border-neutral-900/40 relative w-full xl:w-[18%] shrink-0">
                  <div className="p-1 bg-[#0F0F0F] border border-neutral-900 rounded text-center shrink-0">
                    <div className="text-[10px] font-bold tracking-[0.1em] text-[#00F2FF] uppercase">数据采集层</div>
                    <div className="text-[7.5px] font-mono text-neutral-500 uppercase">Data Capture Matrix</div>
                  </div>

                  <CompactArchCard title={<div className="flex items-center gap-1.5"><Settings size={11} className="text-[#00F2FF]"/><span>车辆/设备数据</span></div>} className="flex-[1.3_1.3_0%]">
                    <CompactArchList items={[
                      { text: 'OBD/VCU', textEn: 'Vehicle Controller' },
                      { text: '电池系统', textEn: 'BMS monitoring' },
                      { text: '氢系统传感器', textEn: 'Hydrogen sensors' },
                      { text: '压力传感器', textEn: 'Pressure metrics' },
                      { text: '温度传感器', textEn: 'Temperature status' },
                      { text: '其他传感器', textEn: 'Auxiliary metrics' },
                    ]} />
                  </CompactArchCard>
                  
                  <CompactArchCard title={<div className="flex items-center gap-1.5"><Cloud size={11} className="text-[#00F2FF]"/><span>环境数据</span></div>} className="flex-1">
                    <CompactArchList items={[
                      { text: '气体浓度', textEn: 'H2 Gas Sniffer' },
                      { text: '环境温湿度', textEn: 'Cabinet temperature' },
                      { text: '定位信息', textEn: 'GNSS coordinates' },
                    ]} />
                  </CompactArchCard>
                </div>

                {/* FLOW CONNECTOR 1: Left to Center (Capture <-> AI Core) */}
                <div className="flex xl:flex-col items-center justify-center shrink-0 py-1 xl:py-0 px-2 select-none">
                  <div className="flex flex-row xl:flex-col items-center gap-1.5 text-[#00F2FF] animate-pulse">
                    {/* Left/Top arrowhead */}
                    <svg width="12" height="12" viewBox="0 0 12 12" fill="none" className="rotate-0 xl:-rotate-90">
                      <path d="M9 2L3 6L9 10" stroke="#00F2FF" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" />
                    </svg>
                    {/* Glowing vertical path */}
                    <div className="w-8 xl:w-[2px] h-[3px] xl:h-28 bg-gradient-to-r xl:bg-gradient-to-b from-[#00F2FF] via-[#00F2FF]/60 to-[#00F2FF] shadow-[0_0_12px_rgba(0,242,255,0.8)]" />
                    {/* Right/Bottom arrowhead */}
                    <svg width="12" height="12" viewBox="0 0 12 12" fill="none" className="rotate-0 xl:-rotate-90">
                      <path d="M3 2L9 6L3 10" stroke="#00F2FF" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" />
                    </svg>
                  </div>
                </div>

                {/* COLUMN 2: ONEOS AI 氢能盒子 (Intelligent Core Box Node, Flex-1) */}
                <div className="flex-1 flex flex-col gap-2 p-2.5 border border-neutral-800 bg-[#040404]/90 rounded shadow-2xl relative min-w-[320px]">
                  {/* Glowing halo behind box node */}
                  <div className={`absolute inset-0 bg-gradient-to-b ${activeTheme.radialGlow} to-transparent rounded z-0 pointer-events-none opacity-20`} />
                  
                  <div className="p-1 bg-[#000] border border-neutral-900 rounded text-center z-10 shrink-0">
                    <div className={`text-[11px] font-extrabold tracking-[0.15em] ${activeTheme.textAccent} uppercase`}>
                      OneOS AI 氢能盒子
                    </div>
                    <div className="text-[7px] font-mono text-neutral-500 uppercase">LNbox Core Hardware Hub</div>
                  </div>

                  {/* 3-Column Internal Layout: Modules - Central Hardware - Modules */}
                  <div className="grid grid-cols-1 lg:grid-cols-3 gap-2 items-stretch flex-1 z-10 min-h-0 min-w-0 py-1">
                    
                    {/* Left Sub-column: Safety & Carbon */}
                    <div className="flex flex-col gap-2 h-full justify-between">
                      <CompactArchCard title={<div className="flex items-center gap-1.5 text-red-400 font-extrabold"><ShieldAlert size={11} /><span>氢安全管理模块</span></div>} className="flex-1">
                        <CompactArchList items={[
                          { text: '泄漏监测', textEn: 'Liquid H2 gas leakage' },
                          { text: '压力监测', textEn: 'Chassis pressure variables' },
                          { text: '温度监测', textEn: 'Thermal safety telemetry' },
                          { text: '风险预警', textEn: 'Instant warning algorithms' },
                          { text: '自动/远程干预 (预留)', textEn: 'Pre-emptive emergency isolation' },
                        ]} />
                      </CompactArchCard>

                      <CompactArchCard title={<div className="flex items-center gap-1.5 text-[#00F2FF] font-extrabold"><Leaf size={11} /><span>碳因子管理模块</span></div>} className="flex-1">
                        <CompactArchList items={[
                          { text: '碳数据采集', textEn: 'Realtime carbon footprint ingesting' },
                          { text: '碳因子计算', textEn: 'Bilingual translation analytics' },
                          { text: '碳资产关联', textEn: 'Clean credits assignment' },
                          { text: '碳数据上链 (预留)', textEn: 'Secure blockchain accounting' },
                        ]} />
                      </CompactArchCard>
                    </div>

                    {/* Central Sub-column: Interactive Hardware Showcase */}
                    <div className="flex flex-col border border-neutral-800/80 rounded bg-[#070707] p-2 justify-between gap-2 overflow-hidden relative group">
                      {/* Interactive circuit-like subtle glow */}
                      <div className="absolute inset-x-0 top-0 h-[1px] bg-gradient-to-r from-transparent via-[#00F2FF]/40 to-transparent"></div>
                      
                      <div className="relative w-full flex-1 border border-neutral-900 rounded bg-[#0A0A0A] p-2 flex flex-col items-center justify-center overflow-hidden min-h-[140px]">
                        <img 
                          src={oneossTopFacet} 
                          alt="OneOS AI Hardware cover plate" 
                          className="w-full h-full max-h-[110px] object-contain opacity-95 brightness-[1.1] hover:scale-105 transition-all duration-300" 
                          referrerPolicy="no-referrer" 
                        />
                        
                        {/* Custom status overlays */}
                        <div className="absolute top-1.5 left-2 px-1.5 py-0.5 rounded bg-black/80 border border-neutral-800 text-[8px] font-mono font-extrabold text-[#00F2FF] shadow-[0_0_8px_rgba(0,186,255,0.4)]">
                          LN
                        </div>
                        <div className="absolute bottom-1.5 right-2 px-1.5 py-0.5 rounded bg-neutral-900/90 border border-neutral-800 text-[8px] font-mono font-black text-white tracking-widest leading-none">
                          ONEOS
                        </div>
                      </div>
                      
                      {/* Small operational thumbnails */}
                      <div className="grid grid-cols-3 gap-1 shrink-0">
                        <div className="border border-[#00F2FF]/40 rounded bg-[#101010] p-1 flex items-center justify-center h-[30px] overflow-hidden hover:border-[#00F2FF] transition-all cursor-pointer">
                          <img src={oneossTopFacet} alt="Top Facet" className="max-h-full max-w-full object-contain" referrerPolicy="no-referrer" />
                        </div>
                        <div className="border border-neutral-800 rounded bg-[#101010] p-1 flex items-center justify-center h-[30px] overflow-hidden hover:border-[#00F2FF]/50 transition-all cursor-pointer">
                          <img src={oneossSideFacet} alt="Side Facet" className="max-h-full max-w-full object-contain" referrerPolicy="no-referrer" />
                        </div>
                        <div className="border border-neutral-800 rounded bg-[#101010] p-1 flex items-center justify-center h-[30px] overflow-hidden hover:border-[#00F2FF]/50 transition-all cursor-pointer">
                          <img src={oneossBoxImage} alt="Full Box" className="max-h-full max-w-full object-contain" referrerPolicy="no-referrer" />
                        </div>
                      </div>
                    </div>

                    {/* Right Sub-column: AI Analyzers & Device Management */}
                    <div className="flex flex-col gap-2 h-full justify-between">
                      <CompactArchCard title={<div className="flex items-center gap-1.5 text-amber-400 font-extrabold"><Cpu size={11} /><span>AI分析决策模块</span></div>} className="flex-1">
                        <CompactArchList items={[
                          { text: '数据分析', textEn: 'High freq operational analysis' },
                          { text: '风险预测', textEn: 'Predictive security forecasting' },
                          { text: '故障诊断', textEn: 'Automated modular diagnostics' },
                          { text: '能耗优化', textEn: 'Energy efficient constraints' },
                          { text: '智能决策', textEn: 'Autonomous hardware decisions' },
                        ]} />
                      </CompactArchCard>

                      <CompactArchCard title={<div className="flex items-center gap-1.5 text-neutral-200 font-extrabold"><Sliders size={11} /><span>设备管理模块</span></div>} className="flex-1">
                        <CompactArchList items={[
                          { text: '设备状态监控', textEn: 'Node integrity health checks' },
                          { text: '远程升级', textEn: 'Over-The-Air OTA flash' },
                          { text: '故障告警', textEn: 'Telemetry fault alerting' },
                          { text: '运行日志管理', textEn: 'Secure operational metrics logs' },
                        ]} />
                      </CompactArchCard>
                    </div>

                  </div>

                  {/* Vertical flow connector pointing up from Data Security to Central Hardware (Modification 1) */}
                  <div className="flex lg:grid lg:grid-cols-3 shrink-0 h-4 lg:h-5 justify-center items-center relative select-none z-10 -my-1">
                    <div className="hidden lg:block"></div> {/* Left empty */}
                    <div className="flex flex-col items-center justify-center text-[#00F2FF] animate-pulse">
                      {/* Arrowhead pointing UP */}
                      <svg width="10" height="7" viewBox="0 0 10 7" fill="none" className="rotate-180 mb-[2px]">
                        <path d="M5 0L10 7H0L5 0Z" fill="#00F2FF" />
                      </svg>
                      {/* Vertical line with glow */}
                      <div className="w-[1.5px] h-3 lg:h-4 bg-gradient-to-t from-[#00F2FF]/10 via-[#00F2FF]/80 to-[#00F2FF] shadow-[0_0_8px_rgba(0,242,255,0.8)]" />
                    </div>
                    <div className="hidden lg:block"></div> {/* Right empty */}
                  </div>

                  {/* Stretching bottom card: 数据安全模块 */}
                  <div className="border border-neutral-900 bg-neutral-950/80 rounded p-2 z-10 shrink-0">
                    <div className="text-[8px] font-mono font-bold uppercase tracking-widest text-[#00F2FF]/70 text-center mb-1 bg-black/40 py-0.5 rounded border border-neutral-900">
                      数据安全模块 (Data Security Framework)
                    </div>
                    <div className="grid grid-cols-4 gap-2">
                      <div className="bg-[#090909] border border-neutral-900/60 p-1 rounded flex flex-col items-center justify-center text-center">
                        <ShieldCheck size={11} className="text-[#00F2FF] mb-0.5" />
                        <span className="text-[9px] font-extrabold text-neutral-200">数据加密</span>
                        <span className="text-[6.5px] font-mono text-neutral-500 leading-none mt-0.5">AES/ECC</span>
                      </div>
                      <div className="bg-[#090909] border border-neutral-900/60 p-1 rounded flex flex-col items-center justify-center text-center">
                        <Settings size={11} className="text-[#00F2FF] mb-0.5" />
                        <span className="text-[9px] font-extrabold text-neutral-200">权限管理</span>
                        <span className="text-[6.5px] font-mono text-neutral-500 leading-none mt-0.5">RBAC Mode</span>
                      </div>
                      <div className="bg-[#090909] border border-neutral-900/60 p-1 rounded flex flex-col items-center justify-center text-center">
                        <Database size={11} className="text-[#00F2FF] mb-0.5" />
                        <span className="text-[9px] font-extrabold text-neutral-200">安全存储</span>
                        <span className="text-[6.5px] font-mono text-neutral-500 leading-none mt-0.5">Enclave Vault</span>
                      </div>
                      <div className="bg-[#090909] border border-neutral-900/60 p-1 rounded flex flex-col items-center justify-center text-center">
                        <Link2 size={11} className="text-[#00F2FF] mb-0.5" />
                        <span className="text-[9px] font-extrabold text-neutral-200">可信通信</span>
                        <span className="text-[6.5px] font-mono text-neutral-500 leading-none mt-0.5">TLS Tunneling</span>
                      </div>
                    </div>
                  </div>

                </div>

                {/* FLOW CONNECTOR 2: Center to Cloud (AI Core <-> Cloud AIoT) */}
                <div className="flex xl:flex-col items-center justify-center shrink-0 py-1 xl:py-0 px-2 select-none">
                  <div className="flex flex-row xl:flex-col items-center gap-1.5 text-[#00F2FF] animate-pulse">
                    <svg width="12" height="12" viewBox="0 0 12 12" fill="none" className="rotate-0 xl:-rotate-90">
                      <path d="M9 2L3 6L9 10" stroke="#00F2FF" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" />
                    </svg>
                    <div className="w-8 xl:w-[2px] h-[3px] xl:h-28 bg-gradient-to-r xl:bg-gradient-to-b from-[#00F2FF] via-[#00F2FF]/60 to-[#00F2FF] shadow-[0_0_12px_rgba(0,242,255,0.8)]" />
                    <svg width="12" height="12" viewBox="0 0 12 12" fill="none" className="rotate-0 xl:-rotate-90">
                      <path d="M3 2L9 6L3 10" stroke="#00F2FF" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" />
                    </svg>
                  </div>
                </div>

                {/* COLUMN 3: OneOS 云平台 (OneOS AIoT Cloud Platform, ~18% width) */}
                <div className="flex flex-col gap-2 p-2 bg-neutral-950/50 rounded border border-neutral-900/40 relative w-full xl:w-[18%] shrink-0">
                  <div className="p-1 bg-[#0F0F0F] border border-neutral-900 rounded text-center shrink-0">
                    <div className="text-[10px] font-bold tracking-[0.1em] text-[#00F2FF] uppercase">OneOS 云平台</div>
                    <div className="text-[7.5px] font-mono text-neutral-500 uppercase">Core AIoT Cloud</div>
                  </div>

                  <CompactArchCard title={<div className="flex items-center gap-1.5"><Cloud size={11} className="text-[#00F2FF]"/><span>OneOS AIoT 平台</span></div>} className="flex-1">
                    {/* Futuristic Large Cloud core visualization panel (Modification 2) */}
                    <div className="h-[120px] lg:h-[155px] w-full border border-cyan-500/20 bg-gradient-to-b from-[#080E16] to-[#040609] rounded-lg relative flex flex-col items-center justify-center mb-2.5 p-3 overflow-hidden group shadow-[inset_0_1px_12px_rgba(0,242,255,0.08)] shrink-0">
                      {/* Abstract grid matrix */}
                      <div className="absolute inset-0 opacity-[0.06] bg-[linear-gradient(to_right,#00F2FF_1px,transparent_1px),linear-gradient(to_bottom,#00F2FF_1px,transparent_1px)] bg-[size:10px_10px]" />
                      
                      {/* Pulsing orbital rings */}
                      <div className="absolute w-20 h-20 rounded-full border border-[#00F2FF]/5 animate-[spin_12s_linear_infinite]" />
                      <div className="absolute w-24 h-24 rounded-full border border-dashed border-[#00F2FF]/5 animate-[spin_24s_linear_infinite]" />
                      
                      {/* Main cloud glowing structure */}
                      <div className="relative flex items-center justify-center text-[#00F2FF] p-3 bg-[#0c1a24]/45 border border-cyan-400/20 rounded-xl shadow-[0_0_15px_rgba(0,242,255,0.1)] mb-1.5 hover:scale-105 transition-transform duration-300">
                        <Cloud size={28} className="animate-pulse duration-1000" />
                        <div className="absolute inset-0 bg-[#00F2FF] opacity-15 blur-md rounded-full" />
                        <div className="absolute -top-1 -right-1 w-1.5 h-1.5 rounded-full bg-cyan-400 animate-ping" />
                      </div>
                      
                      {/* Description & name */}
                      <span className="text-[9px] font-extrabold text-cyan-400 tracking-widest font-mono uppercase">OneOS Cloud Hub</span>
                      <span className="text-[7px] font-mono text-neutral-500 tracking-wider text-center max-w-[85%] mt-0.5 uppercase">Omni AIoT Control Core</span>
                      
                      {/* Flowing particle stream */}
                      <div className="flex gap-1.5 mt-2 items-center justify-center">
                        <div className="w-[3px] h-[3px] rounded-full bg-cyan-400 animate-bounce" />
                        <div className="w-4 h-[1px] bg-gradient-to-r from-cyan-500/20 via-cyan-400 to-cyan-500/20" />
                        <div className="w-[3px] h-[3px] rounded-full bg-cyan-400 animate-bounce delay-150" />
                      </div>
                    </div>

                    <CompactArchList items={[
                      { text: '数据存储与计算', textEn: 'Storage & Distributed computing' },
                      { text: 'AI模型训练与优化', textEn: 'Neural model continuous training' },
                      { text: '可视化监控大屏', textEn: 'Omni-channel control boards' },
                      { text: '运营管理系统', textEn: 'Integrated management suite' },
                      { text: '开放API服务', textEn: 'Standard programmatic endpoint' },
                    ]} />
                  </CompactArchCard>
                </div>

                {/* FLOW CONNECTOR 3: Cloud to Applications (Cloud AIoT <-> Scenario Scopes) */}
                <div className="flex xl:flex-col items-center justify-center shrink-0 py-1 xl:py-0 px-2 select-none">
                  <div className="flex flex-row xl:flex-col items-center gap-1.5 text-[#00F2FF] animate-pulse">
                    <svg width="12" height="12" viewBox="0 0 12 12" fill="none" className="rotate-0 xl:-rotate-90">
                      <path d="M9 2L3 6L9 10" stroke="#00F2FF" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" />
                    </svg>
                    <div className="w-8 xl:w-[2px] h-[3px] xl:h-28 bg-gradient-to-r xl:bg-gradient-to-b from-[#00F2FF] via-[#00F2FF]/60 to-[#00F2FF] shadow-[0_0_12px_rgba(0,242,255,0.8)]" />
                    <svg width="12" height="12" viewBox="0 0 12 12" fill="none" className="rotate-0 xl:-rotate-90">
                      <path d="M3 2L9 6L3 10" stroke="#00F2FF" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" />
                    </svg>
                  </div>
                </div>

                {/* COLUMN 4: 应用场景 (Operational Scenarios Layer, ~18% width) */}
                <div className="flex flex-col gap-2 p-2 bg-neutral-950/50 rounded border border-neutral-900/40 relative w-full xl:w-[18%] shrink-0">
                  <div className="p-1 bg-[#0F0F0F] border border-neutral-900 rounded text-center shrink-0">
                    <div className="text-[10px] font-bold tracking-[0.15em] text-white uppercase">应用场景</div>
                    <div className="text-[7.5px] font-mono text-neutral-500 uppercase">Operational Scenarios</div>
                  </div>

                  {/* Scenario 1: Fleet Operations (Modification 3) */}
                  <div className="bg-[#090909]/90 border border-neutral-800/80 rounded p-1.5 flex flex-col hover:border-[#00F2FF]/45 transition-all flex-1 justify-between min-h-0 overflow-hidden group">
                    <div className="flex items-center gap-1 pb-1 border-b border-neutral-900 shrink-0">
                      <div className="w-[15px] h-[15px] bg-cyan-950/45 border border-cyan-900/45 rounded flex items-center justify-center text-cyan-400">
                        <Truck size={9} />
                      </div>
                      <span className="text-[9px] font-extrabold text-neutral-200">氢能车队运营</span>
                      <span className="text-[7px] font-mono text-neutral-500 ml-auto uppercase hidden lg:block">Fleet</span>
                    </div>
                    {/* Horizontal split body */}
                    <div className="flex flex-row items-center gap-1.5 flex-1 min-h-0 py-1">
                      {/* Left: Thumbnail */}
                      <div className="w-13 h-9 lg:w-[60px] lg:h-[42px] rounded border border-neutral-800 shrink-0 overflow-hidden relative shadow-md">
                        <img src={scenarioFleetImage} alt="Fleet" className="w-full h-full object-cover opacity-90 brightness-[1.05] group-hover:scale-105 transition-transform duration-300" referrerPolicy="no-referrer" />
                        <div className="absolute inset-0 bg-gradient-to-t from-black/50 to-transparent pointer-events-none" />
                      </div>
                      {/* Right: Combined bullet checks */}
                      <div className="flex-1 flex flex-col justify-center gap-0.5 text-[8.5px] font-mono leading-tight pl-0.5 overflow-hidden">
                        <div className="flex items-center gap-1 truncate">
                          <div className="w-[3px] h-[3px] rounded-full bg-[#00F2FF] shadow-[0_0_3px_#00F2FF] shrink-0" />
                          <span className="text-neutral-200 font-sans">车辆监控 • 运营调度</span>
                        </div>
                        <div className="flex items-center gap-1 truncate">
                          <div className="w-[3px] h-[3px] rounded-full bg-[#00F2FF]/30 shrink-0" />
                          <span className="text-neutral-400 font-sans">能耗管理 • 安全预警</span>
                        </div>
                      </div>
                    </div>
                  </div>

                  {/* Scenario 2: Refueling Station Operations (Modification 3) */}
                  <div className="bg-[#090909]/90 border border-neutral-800/80 rounded p-1.5 flex flex-col hover:border-amber-400/45 transition-all flex-1 justify-between min-h-0 overflow-hidden group">
                    <div className="flex items-center gap-1 pb-1 border-b border-neutral-900 shrink-0">
                      <div className="w-[15px] h-[15px] bg-amber-950/45 border border-amber-900/45 rounded flex items-center justify-center text-amber-400">
                        <FactoryIcon size={9} />
                      </div>
                      <span className="text-[9px] font-extrabold text-neutral-200">加氢站运营</span>
                      <span className="text-[7px] font-mono text-neutral-500 ml-auto uppercase hidden lg:block">Station</span>
                    </div>
                    {/* Horizontal split body */}
                    <div className="flex flex-row items-center gap-1.5 flex-1 min-h-0 py-1">
                      {/* Left: Thumbnail */}
                      <div className="w-13 h-9 lg:w-[60px] lg:h-[42px] rounded border border-neutral-800 shrink-0 overflow-hidden relative shadow-md">
                        <img src={scenarioStationImage} alt="Station" className="w-full h-full object-cover opacity-90 brightness-[1.05] group-hover:scale-105 transition-transform duration-300" referrerPolicy="no-referrer" />
                        <div className="absolute inset-0 bg-gradient-to-t from-black/50 to-transparent pointer-events-none" />
                      </div>
                      {/* Right: Combined bullet checks */}
                      <div className="flex-1 flex flex-col justify-center gap-0.5 text-[8.5px] font-mono leading-tight pl-0.5 overflow-hidden">
                        <div className="flex items-center gap-1 truncate">
                          <div className="w-[3px] h-[3px] rounded-full bg-amber-400 shadow-[0_0_3px_#fbbf24] shrink-0" />
                          <span className="text-neutral-200 font-sans">氢源调度 • 加氢优化</span>
                        </div>
                        <div className="flex items-center gap-1 truncate">
                          <div className="w-[3px] h-[3px] rounded-full bg-amber-400/30 shrink-0" />
                          <span className="text-neutral-400 font-sans">库存管理 • 安全监管</span>
                        </div>
                      </div>
                    </div>
                  </div>

                  {/* Scenario 3: Energy & Data Center Computes (Modification 3) */}
                  <div className="bg-[#090909]/90 border border-neutral-800/80 rounded p-1.5 flex flex-col hover:border-red-400/45 transition-all flex-1 justify-between min-h-0 overflow-hidden group">
                    <div className="flex items-center gap-1 pb-1 border-b border-neutral-900 shrink-0">
                      <div className="w-[15px] h-[15px] bg-red-950/45 border border-red-900/45 rounded flex items-center justify-center text-red-500">
                        <Server size={9} />
                      </div>
                      <span className="text-[9px] font-extrabold text-neutral-200">能源/算力中心</span>
                      <span className="text-[7px] font-mono text-neutral-500 ml-auto uppercase hidden lg:block">Center</span>
                    </div>
                    {/* Horizontal split body */}
                    <div className="flex flex-row items-center gap-1.5 flex-1 min-h-0 py-1">
                      {/* Left: Thumbnail */}
                      <div className="w-13 h-9 lg:w-[60px] lg:h-[42px] rounded border border-neutral-800 shrink-0 overflow-hidden relative shadow-md">
                        <img src={scenarioDatacenterImage} alt="Data Center" className="w-full h-full object-cover opacity-90 brightness-[1.05] group-hover:scale-105 transition-transform duration-300" referrerPolicy="no-referrer" />
                        <div className="absolute inset-0 bg-gradient-to-t from-black/50 to-transparent pointer-events-none" />
                      </div>
                      {/* Right: Combined bullet checks */}
                      <div className="flex-1 flex flex-col justify-center gap-0.5 text-[8.5px] font-mono leading-tight pl-0.5 overflow-hidden">
                        <div className="flex items-center gap-1 truncate">
                          <div className="w-[3px] h-[3px] rounded-full bg-red-400 shadow-[0_0_3px_#f87171] shrink-0" />
                          <span className="text-neutral-200 font-sans">能耗优化 • 安全监测</span>
                        </div>
                        <div className="flex items-center gap-1 truncate">
                          <div className="w-[3px] h-[3px] rounded-full bg-red-400/30 shrink-0" />
                          <span className="text-neutral-400 font-sans">运维管理 • 智能决策</span>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>

              </div>

              {/* Bottom value matrix (价值输出层 中英双语 - Extremely Compact Layout for Full screen) */}
              <div className="w-full bg-[#070707] border border-neutral-800/80 border-l-4 border-l-[#00F2FF] rounded shrink-0 relative overflow-hidden py-3 px-6 mt-4 flex items-center justify-between">
                <div className="absolute inset-0 bg-gradient-to-r from-transparent via-[#00F2FF]/5 to-transparent pointer-events-none" />
                
                <div className="hidden xl:block shrink-0 font-extrabold text-[#E5E5E5] tracking-widest text-[11px] uppercase mr-6">
                  价值输出层 <br />
                  <span className="text-[8px] font-mono text-neutral-500 font-light block">VALUE MATRIX SYSTEM</span>
                </div>

                <div className="flex-1 grid grid-cols-2 md:grid-cols-5 gap-4 divide-y md:divide-y-0 md:divide-x divide-neutral-900">
                  {[
                    { title: '强化安全减灾', sub: '极速预警防爆泄漏风险', icon: ShieldCheck, subEn: 'RISK CONTROL' },
                    { title: '显著降本增益', sub: '优化气耗能耗控制开支', icon: Search, subEn: 'COST MINIMIZE' },
                    { title: '多端业务提效', sub: '云端统筹告别积料负压', icon: Activity, subEn: 'EFFICIENT ROUTING' },
                    { title: '绿氢数据资产', sub: '实时认证双碳属性归集', icon: Leaf, subEn: 'CARBON CERTIFIED' },
                    { title: 'AI边算一体化', sub: '全面释放物联数据潜能', icon: LineChart, subEn: 'DATA ASSET INFERENCE' },
                  ].map((val, i) => {
                    const Icon = val.icon;
                    return (
                      <div key={i} className="flex items-center gap-2 px-1 xl:px-4 w-full pt-2 md:pt-0">
                        <div className="text-[#00F2FF] bg-[#00F2FF]/10 p-1.5 rounded shrink-0 border border-[#00F2FF]/20 shadow-[0_0_10px_rgba(0,242,255,0.05)]">
                          <Icon size={13} />
                        </div>
                        <div className="flex flex-col items-start min-w-0">
                           <span className="text-[11px] font-semibold text-white tracking-wider truncate max-w-[130px]">{val.title}</span>
                           <span className="text-[9px] text-neutral-400 truncate max-w-[130px]">{val.sub}</span>
                           <span className="text-[8px] font-mono text-neutral-600 uppercase tracking-widest font-bold">{val.subEn}</span>
                        </div>
                      </div>
                    )
                  })}
                </div>
              </div>

            </motion.div>
          )}
        </AnimatePresence>

      </main>
      
      {/* 3. Global Dashboard Footer Accent */}
      <footer className="w-full bg-[#050505] border-t border-neutral-900 relative flex-shrink-0 z-30">
        <div className="absolute top-0 left-0 right-0 h-0.5 overflow-hidden">
          <div className="absolute inset-0 bg-[#00F2FF] opacity-10 animate-pulse" />
          <div className={`absolute left-0 top-0 h-full w-[45%] bg-gradient-to-r ${activeTheme.gradient} shadow-[0_0_15px_${activeTheme.accent}]`} />
        </div>
        <div className="py-5 px-6 md:px-12 flex flex-col md:flex-row items-center justify-between gap-4">
          <span className="text-[10px] tracking-[0.25em] text-neutral-600 font-mono uppercase text-center md:text-left">
            © 2026 OneOSS. ALL INDUSTRIAL TELEMETRY AND FACTOR ASSURANCE SYSTEMS REGISTERED.
          </span>
          <div className="flex items-center gap-6 text-[9px] font-mono text-neutral-500 uppercase tracking-[0.15em]">
            <span>Secured Node ID: OOSS-LNBOX-999-ACTIVE</span>
            <span className="hidden md:inline">•</span>
            <span>Link Strength: 100% SECURE</span>
          </div>
        </div>
      </footer>
    </div>
  );
}
