/**
 * @license
 * SPDX-License-Identifier: Apache-2.0
 */

import React, { useState, useEffect } from 'react';

const BASE = import.meta.env.BASE_URL;
import { 
  ShieldCheck, 
  LayoutDashboard, 
  Smartphone, 
  BarChart3, 
  Settings, 
  FileText, 
  Truck, 
  ClipboardCheck, 
  AlertCircle, 
  Database,
  ChevronRight,
  Menu,
  X,
  ArrowRight,
  CheckCircle2,
  Zap
} from 'lucide-react';
import { motion } from 'motion/react';
import { clsx, type ClassValue } from 'clsx';
import { twMerge } from 'tailwind-merge';

function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs));
}

// --- Components ---

const Navbar = () => {
  const [isScrolled, setIsScrolled] = useState(false);

  useEffect(() => {
    const handleScroll = () => setIsScrolled(window.scrollY > 20);
    window.addEventListener('scroll', handleScroll);
    return () => window.removeEventListener('scroll', handleScroll);
  }, []);

  return (
    <nav className={cn(
      "fixed top-0 left-0 right-0 z-50 transition-all duration-300 border-b",
      isScrolled ? "bg-white/80 backdrop-blur-md py-3 border-slate-200" : "bg-transparent py-5 border-transparent"
    )}>
      <div className="max-w-7xl mx-auto px-6 flex items-center justify-between relative h-16 md:h-20">
        {/* Left: Logo */}
        <div className="flex items-center">
          <div className="h-10 md:h-12 flex items-center justify-center overflow-hidden">
            <img src={`${BASE}assets/screenshots/logo.png`} alt="Logo" className="h-full w-auto object-contain" referrerPolicy="no-referrer" />
          </div>
        </div>
        
        {/* Center: Title */}
        <div className="absolute left-1/2 -translate-x-1/2 flex items-center whitespace-nowrap">
          <span className="text-xl md:text-2xl font-bold tracking-tight text-slate-900">OneOS <span className="text-brand">Solutions</span></span>
        </div>

        {/* Right: Spacer to maintain layout if needed, but not strictly necessary with absolute center */}
        <div className="hidden md:block w-12" />
      </div>
    </nav>
  );
};

const Hero = ({ title, subtitle, badge }: { title: string, subtitle: string, badge: string }) => (
  <section className="relative pt-32 pb-20 md:pt-48 md:pb-32 overflow-hidden">
    {/* Premium Mesh Gradient Background */}
    <div className="absolute inset-0 -z-10">
      {/* Base Layer - Very subtle green tint */}
      <div className="absolute inset-0 bg-emerald-50/20" />
      
      {/* Mesh Blobs - Slightly more vibrant but still soft */}
      <div className="absolute top-[-10%] left-[-10%] w-[70%] h-[70%] bg-emerald-200/40 rounded-full blur-[120px] animate-pulse" style={{ animationDuration: '10s' }} />
      <div className="absolute bottom-[-10%] right-[-10%] w-[70%] h-[70%] bg-teal-200/40 rounded-full blur-[120px] animate-pulse" style={{ animationDuration: '15s' }} />
      <div className="absolute top-[20%] right-[10%] w-[50%] h-[50%] bg-emerald-100/30 rounded-full blur-[100px]" />
      
      {/* Subtle overall gradient overlay */}
      <div className="absolute inset-0 bg-gradient-to-b from-emerald-50/30 via-transparent to-white" />
      
      {/* Noise Texture Overlay */}
      <div className="absolute inset-0 opacity-[0.03] pointer-events-none" style={{ backgroundImage: 'url("https://grainy-gradients.vercel.app/noise.svg")' }} />
      
      {/* Geometric Grid */}
      <div className="absolute inset-0 opacity-[0.1]" style={{ 
        backgroundImage: `linear-gradient(#065f46 1px, transparent 1px), linear-gradient(90deg, #065f46 1px, transparent 1px)`,
        backgroundSize: '60px 60px'
      }} />
      
      {/* Central Spotlight */}
      <div className="absolute top-0 left-1/2 -translate-x-1/2 w-full max-w-6xl h-full bg-[radial-gradient(circle_at_50%_40%,#fff_0%,transparent_80%)]" />
      
      {/* Accent Lines */}
      <div className="absolute top-0 left-0 right-0 h-px bg-gradient-to-r from-transparent via-brand/20 to-transparent" />
      <div className="absolute bottom-0 left-0 right-0 h-px bg-gradient-to-r from-transparent via-emerald-100 to-transparent" />
    </div>
    
    <div className="max-w-7xl mx-auto px-6 text-center relative">
      {/* Floating Decorative Elements */}
      <motion.div 
        animate={{ y: [0, -20, 0] }}
        transition={{ duration: 4, repeat: Infinity, ease: "easeInOut" }}
        className="absolute -top-20 -left-20 w-40 h-40 bg-brand/5 rounded-3xl rotate-12 blur-xl hidden lg:block" 
      />
      <motion.div 
        animate={{ y: [0, 20, 0] }}
        transition={{ duration: 5, repeat: Infinity, ease: "easeInOut" }}
        className="absolute top-60 -right-20 w-56 h-56 bg-teal-500/5 rounded-full blur-3xl hidden lg:block" 
      />
      
      <motion.div
        initial={{ opacity: 0, y: 20 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ duration: 0.8, ease: "easeOut" }}
      >
        <div className="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-white/80 backdrop-blur-sm border border-brand-muted shadow-sm mb-8">
          <span className="w-2 h-2 rounded-full bg-brand animate-pulse" />
          <span className="text-brand text-xs font-bold uppercase tracking-wider">
            {badge}
          </span>
        </div>
        <h1 className="text-5xl md:text-7xl font-black text-slate-900 mb-8 leading-[1.1] tracking-tight">
          {title}
        </h1>
        <p className="text-xl text-slate-600 max-w-3xl mx-auto mb-10 leading-relaxed">
          {subtitle}
        </p>
      </motion.div>
    </div>
  </section>
);

const FeatureCard = ({ icon: Icon, title, description, delay }: { icon: any, title: string, description: string, delay: number }) => (
  <motion.div
    initial={{ opacity: 0, y: 20 }}
    whileInView={{ opacity: 1, y: 0 }}
    viewport={{ once: true }}
    transition={{ duration: 0.5, delay }}
    className="bg-white p-8 rounded-3xl border border-slate-100 shadow-sm hover:shadow-xl hover:-translate-y-1 transition-all group"
  >
    <div className="w-14 h-14 bg-brand-light text-brand rounded-2xl flex items-center justify-center mb-6 group-hover:bg-brand group-hover:text-white transition-colors">
      <Icon size={28} />
    </div>
    <h3 className="text-xl font-bold text-slate-900 mb-3">{title}</h3>
    <p className="text-slate-600 leading-relaxed">{description}</p>
  </motion.div>
);

const SectionHeading = ({ title, subtitle, centered = true }: { title: string, subtitle?: string, centered?: boolean }) => (
  <div className={cn("mb-16", centered ? "text-center" : "text-left")}>
    <h2 className="text-3xl md:text-4xl font-black text-slate-900 mb-4 tracking-tight">{title}</h2>
    {subtitle && <p className="text-lg text-slate-500 max-w-2xl mx-auto">{subtitle}</p>}
  </div>
);

const ScreenshotPlaceholder = ({ label, description, src, type = "web", onClick }: { label: string, description: string, src?: string, type?: "web" | "mobile", onClick?: () => void }) => (
  <div 
    onClick={onClick}
    className={cn(
      "relative bg-slate-100 rounded-2xl overflow-hidden border border-slate-200 group cursor-pointer shadow-sm transition-all hover:ring-2 hover:ring-brand/50",
      type === "mobile" ? "aspect-[9/19.5] w-full" : "aspect-video w-full"
    )}
  >
    {src ? (
      <img 
        src={src} 
        alt={label} 
        referrerPolicy="no-referrer"
        className="w-full h-full object-cover object-top group-hover:scale-105 transition-transform duration-500"
      />
    ) : (
      <div className="absolute inset-0 flex flex-col items-center justify-center p-6 text-center">
        <div className="w-16 h-16 bg-white rounded-full flex items-center justify-center text-slate-400 mb-4 shadow-sm group-hover:scale-110 transition-transform">
          {type === "mobile" ? <Smartphone size={32} /> : <LayoutDashboard size={32} />}
        </div>
        <h4 className="font-bold text-slate-900 mb-2">{label}</h4>
        <p className="text-xs text-slate-500">{description}</p>
      </div>
    )}
    <div className="absolute inset-0 bg-brand/0 group-hover:bg-brand/5 transition-colors pointer-events-none" />
    <div className="absolute bottom-4 right-4 bg-white/90 backdrop-blur px-3 py-1 rounded-full text-[10px] font-bold text-slate-600 border border-white/50 shadow-sm z-10">
      {type === "mobile" ? "移动端界面" : "Web端界面"}
    </div>
  </div>
);

const Lightbox = ({ src, onClose }: { src: string | null, onClose: () => void }) => {
  if (!src) return null;

  return (
    <div 
      className="fixed inset-0 z-[100] bg-slate-900/90 backdrop-blur-sm flex items-center justify-center p-4 md:p-10 cursor-zoom-out"
      onClick={onClose}
    >
      <motion.div 
        initial={{ scale: 0.9, opacity: 0 }}
        animate={{ scale: 1, opacity: 1 }}
        className="relative max-w-5xl w-full max-h-full flex items-center justify-center"
        onClick={(e) => e.stopPropagation()}
      >
        <img 
          src={src} 
          alt="Large view" 
          className="max-w-full max-h-[90vh] object-contain rounded-xl shadow-2xl"
          referrerPolicy="no-referrer"
        />
        <button 
          onClick={onClose}
          className="absolute -top-12 right-0 text-white hover:text-brand-accent transition-colors p-2"
        >
          <X size={32} />
        </button>
      </motion.div>
    </div>
  );
};

// --- Main Content Sections ---

const AssetManagementSystem = () => {
  const [selectedImage, setSelectedImage] = useState<string | null>(null);

  return (
    <div className="space-y-20 pb-20">
      <Lightbox src={selectedImage} onClose={() => setSelectedImage(null)} />
      <Hero 
        badge="OneOS 核心产品"
        title="企业级资产管理中枢"
        subtitle="打通资产从“采购入库”到“报废处置”的全生命周期数据链，实现资产的可视化、精细化、智能化管理。"
      />

      {/* Value Highlights */}
      <section className="max-w-7xl mx-auto px-6">
        <SectionHeading title="核心价值亮点" subtitle="不仅仅是台账记录，更是企业资产运营的决策大脑" />
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
          <FeatureCard 
            icon={ClipboardCheck}
            title="全生命周期闭环"
            description="覆盖采购、验收、领用、调拨、维修、盘点、折旧至报废全流程，消除管理盲区。"
            delay={0.1}
          />
          <FeatureCard 
            icon={BarChart3}
            title="实时可视化大屏"
            description="构建可视化运营视图，聚合核心数据分析。直观呈现资产分布与利用效率，支撑资源优化配置，驱动资产价值最大化。"
            delay={0.2}
          />
          <FeatureCard 
            icon={AlertCircle}
            title="智能预警与运维"
            description="支持设置维保提醒、闲置预警、超期预警等规则引擎，变被动维修为主动预防。"
            delay={0.3}
          />
          <FeatureCard 
            icon={Smartphone}
            title="多端协同集成"
            description="支持PC管理后台 + 移动端扫码操作，可对接企业现有ERP、财务及OA系统。"
            delay={0.4}
          />
        </div>
      </section>

      {/* Architecture */}
      <section className="bg-slate-50 py-24">
        <div className="max-w-7xl mx-auto px-6">
          <div className="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
            <div>
              <SectionHeading 
                centered={false}
                title="系统架构概览" 
                subtitle="基于微服务架构，依托OneOS平台强大的底层能力，确保系统的高可用性与扩展性。"
              />
              <div className="space-y-6">
                {[
                  { title: "底层平台", desc: "OneOS 主平台提供统一身份认证、消息总线、数据中台支持。" },
                  { title: "应用层", desc: "模块化设计，包括资产管理、流程审批、报表分析等核心模块。" },
                  { title: "接入层", desc: "全面支持Web端、移动端及第三方系统API接入。" }
                ].map((item, i) => (
                  <div key={i} className="flex gap-4">
                    <div className="mt-1 flex-shrink-0 w-6 h-6 rounded-full bg-brand-light text-brand flex items-center justify-center">
                      <CheckCircle2 size={14} />
                    </div>
                    <div>
                      <h4 className="font-bold text-slate-900">{item.title}</h4>
                      <p className="text-slate-500 text-sm">{item.desc}</p>
                    </div>
                  </div>
                ))}
              </div>
            </div>
            <div className="bg-white p-10 rounded-[40px] shadow-2xl shadow-slate-200 border border-slate-100 relative overflow-hidden">
              <div className="absolute top-0 right-0 w-32 h-32 bg-brand-light rounded-bl-full -z-0" />
              <div className="relative z-10 flex flex-col items-center gap-8">
                <div className="w-48 h-48 rounded-full border-4 border-dashed border-brand-muted flex items-center justify-center p-4">
                  <div className="w-full h-full bg-brand rounded-full flex flex-col items-center justify-center text-white text-center">
                    <Database size={32} className="mb-2" />
                    <span className="text-xs font-bold uppercase tracking-widest">资产数据中心</span>
                  </div>
                </div>
                <div className="grid grid-cols-2 gap-4 w-full">
                  {['基础数据管理', '业务流程管理', '统计分析', '系统管理'].map((mod) => (
                    <div key={mod} className="bg-slate-50 p-4 rounded-2xl text-center text-sm font-bold text-slate-700 border border-slate-100">
                      {mod}
                    </div>
                  ))}
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Business Cycle */}
      <section className="max-w-7xl mx-auto px-6">
        <SectionHeading title="业务闭环：覆盖租赁全生命周期" />
        <div className="relative">
          <div className="absolute top-1/2 left-0 right-0 h-1 bg-slate-100 -translate-y-1/2 hidden lg:block" />
          <div className="grid grid-cols-1 lg:grid-cols-3 gap-8 relative z-10">
            {[
              { icon: FileText, title: "源头管控", desc: "合同与风控。从客户签约到押金/租金收取，自动关联合同条款，确保资金安全。" },
              { icon: Truck, title: "过程执行", desc: "车务管理。涵盖验车、交车、用车、还车等核心环节，数字化固化标准作业程序。" },
              { icon: Settings, title: "资金结算", desc: "账务闭环。自动化生成应收应付账单，实现费用、违章、保险等精准核算。" }
            ].map((step, i) => (
              <div key={i} className="bg-white p-8 rounded-3xl border border-slate-100 shadow-sm text-center">
                <div className="w-16 h-16 bg-brand text-white rounded-2xl flex items-center justify-center mx-auto mb-6 shadow-lg shadow-brand-muted">
                  <step.icon size={32} />
                </div>
                <h3 className="text-xl font-bold text-slate-900 mb-3">{step.title}</h3>
                <p className="text-slate-500 text-sm leading-relaxed">{step.desc}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Core Modules */}
      <section className="bg-slate-50 py-24">
        <div className="max-w-7xl mx-auto px-6">
          <SectionHeading title="核心模块详解" subtitle="专业化模块设计，支撑复杂租赁场景" />
          <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
            {[
              { 
                title: "合同与资金管理", 
                tag: "业务基石",
                items: ["合同全生命周期管理（创建、审批、变更、续签）", "资金流水透明化（租金、押金、违约金自动计算）", "多种支付方式支持，财务系统实时同步"] 
              },
              { 
                title: "车务与现场管理", 
                tag: "执行核心",
                items: ["标准化验车流程（拍照上传电子证据，规避纠纷）", "智能调度与交车（车辆状态实时更新，强制证件核对）", "用车监控（集成GPS实时位置与轨迹监控）"] 
              },
              { 
                title: "异常与售后处理", 
                tag: "风险兜底",
                items: ["违章与事故处理（记录录入、查询与费用追偿）", "维保与年检自动提醒，形成车辆健康档案", "保险理赔流程清晰指引"] 
              },
              { 
                title: "结算与报表", 
                tag: "数据决策",
                items: ["自动化结算（根据里程、时长、违章自动生成结算单）", "多维数据分析看板（利用率、营收、信用分析）", "辅助管理层精准决策"] 
              }
            ].map((mod, i) => (
              <div key={i} className="bg-white p-10 rounded-[32px] border border-slate-200 shadow-sm">
                <div className="flex items-center justify-between mb-6">
                  <h3 className="text-2xl font-bold text-slate-900">{mod.title}</h3>
                  <span className="px-3 py-1 bg-brand-light text-brand text-[10px] font-black uppercase rounded-full tracking-wider">{mod.tag}</span>
                </div>
                <ul className="space-y-4">
                  {mod.items.map((item, j) => (
                    <li key={j} className="flex gap-3 text-slate-600 text-sm">
                      <div className="mt-1 flex-shrink-0 w-4 h-4 rounded-full bg-brand-light text-brand flex items-center justify-center">
                        <ChevronRight size={10} />
                      </div>
                      {item}
                    </li>
                  ))}
                </ul>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Modules Showcase */}
      <section className="max-w-7xl mx-auto px-6">
        <SectionHeading title="关键功能模块展示" subtitle="直观、易用、专业的管理界面" />
        <div className="grid grid-cols-1 md:grid-cols-2 gap-12">
          {/* 01 工作台 */}
          <div className="space-y-6">
            <ScreenshotPlaceholder 
              label="工作台" 
              description="任务流程一屏统管，业务处理高效协同。" 
              src={`${BASE}assets/screenshots/01.jpg`}
              onClick={() => setSelectedImage(`${BASE}assets/screenshots/01.jpg`)}
            />
            <div className="px-2">
              <h4 className="text-xl font-bold text-slate-900 mb-2">01. 工作台</h4>
              <p className="text-brand font-medium mb-3">“任务流程一屏统管，业务处理高效协同。”</p>
              <p className="text-slate-500 text-sm leading-relaxed">
                打破信息孤岛，工作台集成待办任务中心与实时通知。无论是交车、调拨还是年审，所有业务节点清晰可见，一键直达处理，确保团队协作流畅，业务流转不停滞。
              </p>
            </div>
          </div>

          {/* 02 车辆档案 */}
          <div className="space-y-6">
            <ScreenshotPlaceholder 
              label="车辆全生命周期档案" 
              description="一屏掌控所有细节" 
              src={`${BASE}assets/screenshots/02.jpg`}
              onClick={() => setSelectedImage(`${BASE}assets/screenshots/02.jpg`)}
            />
            <div className="px-2">
              <h4 className="text-xl font-bold text-slate-900 mb-2">02. 车辆档案</h4>
              <p className="text-brand font-medium mb-3">“车辆全生命周期档案，一屏掌控所有细节”</p>
              <p className="text-slate-500 text-sm leading-relaxed">
                从车辆识别代号、车牌号到归属停车场、业务负责人，所有基础信息集中管理。无论是运营城市、车辆类型还是客户名称，均可快速筛选与定位，确保每辆车的“前世今生”清晰可查。
              </p>
            </div>
          </div>

          {/* 03 业务闭环 */}
          <div className="space-y-6">
            <ScreenshotPlaceholder 
              label="全链路业务闭环" 
              description="覆盖车辆运营全生命周期" 
              src={`${BASE}assets/screenshots/03.jpg`}
              onClick={() => setSelectedImage(`${BASE}assets/screenshots/03.jpg`)}
            />
            <div className="px-2">
              <h4 className="text-xl font-bold text-slate-900 mb-2">03. 业务闭环</h4>
              <p className="text-brand font-medium mb-3">“全链路业务闭环，覆盖车辆运营全生命周期。”</p>
              <p className="text-slate-500 text-sm leading-relaxed">
                从备车、交车、还车到替换车，所有核心业务环节无缝衔接。通过标准化的流程管理，确保每一辆车的流转都有据可查、高效可控，实现业务执行的精细化与规范化。
              </p>
            </div>
          </div>

          {/* 04 结算体系 */}
          <div className="space-y-6">
            <ScreenshotPlaceholder 
              label="费用明细透明可视" 
              description="构建信任结算体系" 
              src={`${BASE}assets/screenshots/04.png`}
              onClick={() => setSelectedImage(`${BASE}assets/screenshots/04.png`)}
            />
            <div className="px-2">
              <h4 className="text-xl font-bold text-slate-900 mb-2">04. 结算体系</h4>
              <p className="text-brand font-medium mb-3">“费用明细透明可视，构建信任结算体系。”</p>
              <p className="text-slate-500 text-sm leading-relaxed">
                每一笔应收租金、每一项违约金均有据可依。结合客观的车况评估数据，自动生成清晰的费用清单。 系统支持按业务服务组、车辆租金、能源采购组、运维部等多维度进行精细化拆分与核算。无论是ETC补缴、保险上浮，还是氢气补缴，每一笔款项归属清晰，为复杂的业务场景提供精准的财务结算依据。
              </p>
            </div>
          </div>

          {/* 05 移动小程序 */}
          <div className="md:col-span-2 bg-slate-50 rounded-[40px] p-8 md:p-12 overflow-hidden">
            <div className="max-w-4xl mb-12">
              <h4 className="text-2xl font-bold text-slate-900 mb-4">05. 移动小程序</h4>
              <p className="text-brand text-lg font-medium mb-4">“移动业务中枢，随时随地掌上办”</p>
              <p className="text-slate-500 leading-relaxed mb-4">
                打破时空限制，将核心业务搬进手机。无论是交车现场的车辆确认、还车环节的信息核对，还是年审管理的费用录入，所有关键节点均可通过小程序即时处理。数据实时同步，全程留痕不可篡改，解放一线生产力。管理者后台实时掌握进度，实现现场与后台的无缝衔接，让业务管控更透明、更安心。
              </p>
            </div>
            
            <div className="relative group/scroll">
              <div 
                id="mobile-scroll-container"
                className="flex gap-6 overflow-x-auto pb-8 snap-x no-scrollbar scroll-smooth"
              >
                {[
                  { src: `${BASE}assets/screenshots/05.png`, label: "首页概览" },
                  { src: `${BASE}assets/screenshots/06.png`, label: "验车流程" },
                  { src: `${BASE}assets/screenshots/07.png`, label: "费用录入" },
                  { src: `${BASE}assets/screenshots/08.png`, label: "任务列表" },
                  { src: `${BASE}assets/screenshots/09.png`, label: "个人中心" },
                  { src: `${BASE}assets/screenshots/05.png`, label: "消息通知" },
                  { src: `${BASE}assets/screenshots/06.png`, label: "系统设置" },
                  { src: `${BASE}assets/screenshots/07.png`, label: "数据分析" },
                  { src: `${BASE}assets/screenshots/08.png`, label: "审批中心" },
                  { src: `${BASE}assets/screenshots/09.png`, label: "资产看板" },
                ].map((img, i) => (
                  <div key={i} className="flex-shrink-0 snap-center w-[240px] md:w-[280px]">
                    <ScreenshotPlaceholder 
                      label={img.label} 
                      description="移动端实时操作" 
                      type="mobile" 
                      src={img.src}
                      onClick={() => setSelectedImage(img.src)}
                    />
                  </div>
                ))}
              </div>

              {/* Navigation Buttons */}
              <button 
                onClick={() => {
                  const el = document.getElementById('mobile-scroll-container');
                  if (el) el.scrollBy({ left: -300, behavior: 'smooth' });
                }}
                className="absolute left-4 top-1/2 -translate-y-1/2 w-12 h-12 bg-white/90 backdrop-blur rounded-full shadow-xl flex items-center justify-center text-slate-900 hover:bg-brand hover:text-white transition-all opacity-0 group-hover/scroll:opacity-100 z-20"
              >
                <ChevronRight size={24} className="rotate-180" />
              </button>
              <button 
                onClick={() => {
                  const el = document.getElementById('mobile-scroll-container');
                  if (el) el.scrollBy({ left: 300, behavior: 'smooth' });
                }}
                className="absolute right-4 top-1/2 -translate-y-1/2 w-12 h-12 bg-white/90 backdrop-blur rounded-full shadow-xl flex items-center justify-center text-slate-900 hover:bg-brand hover:text-white transition-all opacity-0 group-hover/scroll:opacity-100 z-20"
              >
                <ChevronRight size={24} />
              </button>

              <div className="absolute left-0 top-0 bottom-8 w-20 bg-gradient-to-r from-slate-50 to-transparent pointer-events-none z-10" />
              <div className="absolute right-0 top-0 bottom-8 w-20 bg-gradient-to-l from-slate-50 to-transparent pointer-events-none z-10" />
            </div>
          </div>
        </div>
      </section>

      {/* Security */}
      <section className="max-w-5xl mx-auto px-6">
        <div className="bg-slate-900 rounded-[40px] p-12 text-white flex flex-col md:flex-row items-center gap-12">
          <div className="w-24 h-24 bg-brand rounded-3xl flex items-center justify-center flex-shrink-0">
            <ShieldCheck size={48} />
          </div>
          <div>
            <h3 className="text-3xl font-bold mb-4">安全与合规</h3>
            <div className="grid grid-cols-1 sm:grid-cols-2 gap-8">
              <div>
                <h4 className="text-brand-accent font-bold mb-2">数据安全</h4>
                <p className="text-slate-400 text-sm leading-relaxed">依托OneOS平台的安全机制，支持数据加密传输与存储，保障企业核心资产数据不外泄。</p>
              </div>
              <div>
                <h4 className="text-brand-accent font-bold mb-2">权限控制</h4>
                <p className="text-slate-400 text-sm leading-relaxed">细粒度的RBAC权限管理，确保不同角色只能看到和操作被授权的数据，实现管理闭环。</p>
              </div>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
};

const Footer = () => (
  <footer className="bg-slate-50 border-t border-slate-200 py-20">
    <div className="max-w-7xl mx-auto px-6">
      <div className="flex flex-col md:flex-row justify-between items-center gap-8">
        <div className="flex items-center gap-3">
          <div className="h-8 flex items-center justify-center overflow-hidden">
            <img src={`${BASE}assets/screenshots/logo.png`} alt="Logo" className="h-full w-auto object-contain" referrerPolicy="no-referrer" />
          </div>
          <span className="text-lg font-bold tracking-tight text-slate-900">OneOS <span className="text-brand">Solutions</span></span>
        </div>
        <p className="text-slate-500 text-sm">© 2026 OneOS 车辆资产管理. 保留所有权利.</p>
      </div>
    </div>
  </footer>
);

// --- Main App ---

export default function App() {
  return (
    <div className="min-h-screen bg-white font-sans selection:bg-brand-light selection:text-brand">
      <Navbar />
      
      <main>
        <AssetManagementSystem />
      </main>

      <Footer />
    </div>
  );
}