<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <!-- SEO Meta Tags -->
    <title>翠鸟智擎 - 3D 可视化与数字孪生全场景解决方案</title>
    <meta name="description" content="翠鸟智擎专注 3D 可视化与数字孪生，提供鹿影 DeerViz、3D SCADA 组态、工创云平台与艺术家 Artist 等产品，助力智慧园区、智慧城市与工业场景的数字化运营。">
    <meta name="keywords" content="翠鸟智擎,3D可视化,数字孪生,3D SCADA,鹿影,DeerViz,工创云,艺术家,智慧园区,智慧城市,智慧电力,智能建造,3D组态,低代码3D平台">
    <meta name="author" content="翠鸟智擎">
    <meta name="robots" content="index, follow">
    <link rel="canonical" href="https://www.16pe.com/">

    <!-- Open Graph / Facebook -->
    <meta property="og:type" content="website">
    <meta property="og:url" content="https://www.16pe.com/">
    <meta property="og:title" content="翠鸟智擎 - 3D 可视化与数字孪生全场景解决方案">
    <meta property="og:description" content="无需昂贵的建模成本，通过 3D 可视化与数字孪生能力，为智慧园区、智慧城市与工业场景提供从展示到运营的完整解决方案。">
    <meta property="og:image" content="https://www.16pe.com/assets/鹿影banner.png">
    <meta property="og:locale" content="zh_CN">
    <meta property="og:site_name" content="翠鸟智擎">

    <!-- Twitter Card -->
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:url" content="https://www.16pe.com/">
    <meta name="twitter:title" content="翠鸟智擎 - 3D 可视化与数字孪生全场景解决方案">
    <meta name="twitter:description" content="专注 3D 可视化与数字孪生，提供鹿影、3D SCADA、工创云、艺术家等产品，助力数字化运营。">
    <meta name="twitter:image" content="https://www.16pe.com/assets/鹿影banner.png">

    <!-- Favicon -->
    <link rel="icon" type="image/png" href="assets/翠鸟logo.png">
    <link rel="apple-touch-icon" sizes="180x180" href="assets/翠鸟logo.png">

    <!-- Structured Data - Organization -->
    <script type="application/ld+json">
    {
        "@context": "https://schema.org",
        "@type": "Organization",
        "name": "翠鸟智擎",
        "alternateName": ["Kingfisher", "翠鸟科技"],
        "url": "https://www.16pe.com",
        "logo": "https://www.16pe.com/assets/翠鸟logo.png",
        "description": "专注 3D 可视化与数字孪生的科技公司，提供智慧园区、智慧城市、工业数字化等解决方案。",
        "contactPoint": {
            "@type": "ContactPoint",
            "email": "info@16pe.com",
            "contactType": "sales"
        },
        "sameAs": []
    }
    </script>

    <!-- Structured Data - WebSite -->
    <script type="application/ld+json">
    {
        "@context": "https://schema.org",
        "@type": "WebSite",
        "name": "翠鸟智擎",
        "url": "https://www.16pe.com",
        "potentialAction": {
            "@type": "SearchAction",
            "target": "https://www.16pe.com/search?q={search_term_string}",
            "query-input": "required name=search_term_string"
        }
    }
    </script>

    <!-- Structured Data - Products -->
    <script type="application/ld+json">
    {
        "@context": "https://schema.org",
        "@type": "ItemList",
        "name": "翠鸟智擎产品矩阵",
        "itemListElement": [
            {
                "@type": "SoftwareApplication",
                "position": 1,
                "name": "鹿影 DeerViz",
                "description": "人人可用的 3D 文稿生产平台，零代码创建交互式 3D 演示。",
                "applicationCategory": "MultimediaApplication",
                "url": "https://www.deerviz.show",
                "offers": {
                    "@type": "Offer",
                    "price": "0",
                    "priceCurrency": "CNY"
                }
            },
            {
                "@type": "SoftwareApplication",
                "position": 2,
                "name": "3D SCADA",
                "description": "自控工程师的 3D 组态工具，用于工业监控与数据可视化。",
                "applicationCategory": "BusinessApplication",
                "url": "https://scada.kingfisher.live"
            },
            {
                "@type": "SoftwareApplication",
                "position": 3,
                "name": "工创云平台",
                "description": "面向开发者的零代码 3D 搭建平台。",
                "applicationCategory": "DeveloperApplication",
                "url": "https://tron-saas.kingfisher.live"
            },
            {
                "@type": "SoftwareApplication",
                "position": 4,
                "name": "艺术家 Artist",
                "description": "面向设计师的 3D 交互创作工具。",
                "applicationCategory": "DesignApplication",
                "url": "https://artist.kingfisher.live/zh"
            }
        ]
    }
    </script>

    <!-- Styles -->
    <link rel="stylesheet" href="styles.css">
    <!-- Tailwind CSS -->
    <script src="assets/vendor/tailwind.min.js"></script>
    <!-- Lucide Icons -->
    <script src="assets/vendor/lucide.min.js" defer></script>
</head>
<body class="antialiased overflow-x-hidden">

    <!-- 导航栏 -->
    <nav class="fixed top-0 left-0 w-full z-50 glass-nav">
        <div class="max-w-7xl mx-auto px-4 md:px-6 h-16 md:h-20 flex items-center justify-between">
            <!-- Logo -->
            <div class="flex items-center cursor-pointer" onclick="window.scrollTo({top:0, behavior:'smooth'})">
                <img src="assets/翠鸟logo.png" alt="翠鸟智擎" class="h-8 md:h-10 w-auto object-contain">
            </div>

            <!-- Desktop Menu Links -->
            <div class="hidden md:flex items-center space-x-6 text-sm font-medium text-gray-300">
                <a href="#hero" class="hover:text-blue-400 transition">首页</a>
                <a href="#products" class="hover:text-blue-400 transition">工具矩阵</a>
                <a href="#solutions" class="hover:text-blue-400 transition">解决方案</a>
                <a href="#cases" class="hover:text-blue-400 transition">行业案例</a>
                <a href="#clients" class="hover:text-blue-400 transition">核心客户</a>
            </div>

            <!-- Right Side: CTA + Mobile Menu Button -->
            <div class="flex items-center space-x-3">
                <button data-region="btn_demo" data-label="预约演示" onclick="openModal('demo-modal')" class="bg-blue-600 hover:bg-blue-700 text-white px-4 md:px-5 py-2 rounded-full text-xs font-bold shadow-lg transition-all active:scale-95">预约演示</button>
                <!-- Mobile Hamburger -->
                <button id="mobile-menu-btn" onclick="toggleMobileMenu()" class="md:hidden p-2 text-gray-300 hover:text-white">
                    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path id="hamburger-icon" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
                    </svg>
                </button>
            </div>
        </div>

        <!-- Mobile Menu Dropdown -->
        <div id="mobile-menu" class="hidden md:hidden bg-slate-900/98 backdrop-blur-xl border-t border-white/10">
            <div class="px-4 py-4 space-y-1">
                <a href="#hero" onclick="closeMobileMenu()" class="block py-3 px-4 text-gray-200 hover:text-white hover:bg-white/5 rounded-lg transition">首页</a>
                <a href="#products" onclick="closeMobileMenu()" class="block py-3 px-4 text-gray-200 hover:text-white hover:bg-white/5 rounded-lg transition">工具矩阵</a>
                <a href="#solutions" onclick="closeMobileMenu()" class="block py-3 px-4 text-gray-200 hover:text-white hover:bg-white/5 rounded-lg transition">解决方案</a>
                <a href="#cases" onclick="closeMobileMenu()" class="block py-3 px-4 text-gray-200 hover:text-white hover:bg-white/5 rounded-lg transition">行业案例</a>
                <a href="#clients" onclick="closeMobileMenu()" class="block py-3 px-4 text-gray-200 hover:text-white hover:bg-white/5 rounded-lg transition">核心客户</a>
            </div>
        </div>
    </nav>

    <!-- 首页轮播 -->
    <section id="hero" class="relative h-[70vh] md:h-[90vh] overflow-hidden bg-black pt-16 md:pt-0">
        <div class="carousel-container h-full w-full relative">
            <div class="carousel-item active h-full w-full flex items-center justify-center text-center px-6 md:px-12 lg:px-20 bg-contain bg-center bg-no-repeat" style="background-image: url('assets/鹿影banner.png'); background-size: contain; background-position: center;">
                <div class="absolute inset-0 bg-black/30"></div>
                <div class="relative z-10 max-w-4xl">
                    <h2 class="text-4xl md:text-6xl lg:text-7xl font-black mb-4 tracking-tight text-white">鹿影 <span class="text-blue-400 italic">DeerViz</span></h2>
                    <p class="text-base md:text-xl text-gray-200 mb-6 font-light">人人可用的3D文稿生产平台</p>
                    <a href="https://www.deerviz.show" target="_blank" rel="noopener noreferrer" data-utm-content="hero_deerviz" class="inline-block bg-blue-600 hover:bg-blue-700 px-10 py-4 rounded-xl font-bold text-lg text-white hover:scale-105 transition outbound-link">立即体验</a>
                </div>
            </div>
            <div class="carousel-item h-full w-full flex items-center justify-center text-center px-6 bg-contain bg-center bg-no-repeat" style="background-image: url('assets/SCADA banner.png'); background-size: contain; background-position: center;">
                <div class="absolute inset-0 bg-black/50"></div>
                <div class="relative z-10 max-w-4xl text-purple-400">
                    <h2 class="text-3xl md:text-5xl lg:text-7xl font-black mb-6 tracking-tight text-white">3D SCADA</h2>
                    <p class="text-lg md:text-2xl text-gray-200 mb-8 font-light">自控工程师的3D组态工具</p>
                    <a href="https://scada.kingfisher.live" target="_blank" rel="noopener noreferrer" data-utm-content="hero_scada" class="inline-block bg-purple-600 px-10 py-4 rounded-xl font-bold text-lg text-white hover:bg-purple-700 transition outbound-link">进入官网</a>
                </div>
            </div>
            <div class="carousel-item h-full w-full flex items-center justify-center text-center px-6 bg-contain bg-center bg-no-repeat" style="background-image: url('assets/tron banner.png'); background-size: contain; background-position: center;">
                <div class="absolute inset-0 bg-black/50"></div>
                <div class="relative z-10 max-w-4xl text-cyan-400">
                    <h2 class="text-3xl md:text-5xl lg:text-7xl font-black mb-6 tracking-tight text-white">工创云平台</h2>
                    <p class="text-lg md:text-2xl text-gray-200 mb-8 font-light">面向开发者的零代码3D搭建平台</p>
                    <a href="https://tron-saas.kingfisher.live/cloud/3dc/index.html#/" target="_blank" rel="noopener noreferrer" data-utm-content="hero_tron" class="inline-block px-10 py-4 rounded-xl font-bold text-lg text-white bg-white/5 border border-white/10 hover:bg-cyan-600 transition outbound-link">进入官网</a>
                </div>
            </div>
            <div class="carousel-item h-full w-full flex items-center justify-center text-center px-6 bg-contain bg-center bg-no-repeat" style="background-image: url('assets/艺术家Banner.png'); background-size: contain; background-position: center;">
                <div class="absolute inset-0 bg-black/50"></div>
                <div class="relative z-10 max-w-4xl">
                    <h2 class="text-3xl md:text-5xl lg:text-7xl font-black mb-6 tracking-tight text-white">艺术家 <span class="text-blue-400">Artist</span></h2>
                    <p class="text-lg md:text-2xl text-gray-200 mb-8 font-light">面向设计师的3D交互创作工具</p>
                    <a href="https://artist.kingfisher.live/zh" target="_blank" rel="noopener noreferrer" data-utm-content="hero_artist" class="inline-block bg-white text-black px-10 py-4 rounded-xl font-bold text-lg hover:bg-blue-500 hover:text-white transition outbound-link">进入官网</a>
                </div>
            </div>
        </div>
        <div class="absolute bottom-10 left-1/2 -translate-x-1/2 flex space-x-3 z-20">
            <button onclick="goToSlide(0)" class="slide-indicator active w-8 h-1 bg-white/30 rounded-full hover:bg-white transition-all"></button>
            <button onclick="goToSlide(1)" class="slide-indicator w-8 h-1 bg-white/30 rounded-full hover:bg-white transition-all"></button>
            <button onclick="goToSlide(2)" class="slide-indicator w-8 h-1 bg-white/30 rounded-full hover:bg-white transition-all"></button>
            <button onclick="goToSlide(3)" class="slide-indicator w-8 h-1 bg-white/30 rounded-full hover:bg-white transition-all"></button>
        </div>
    </section>

    <!-- 工具矩阵 -->
    <section id="products" data-region="section_products" data-label="产品与技术" class="py-24 bg-[#080812] px-6">
        <div class="max-w-7xl mx-auto">
            <div class="text-center mb-16">
                <h2 class="text-4xl font-bold mb-4">核心工具矩阵</h2>
                <p class="text-gray-400">自研数字孪生生产力工具链</p>
            </div>
            <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
                <div id="product-artist" class="glass-card rounded-3xl overflow-hidden group border-blue-500/10 flex flex-col">
                    <div class="aspect-[4/3] flex-shrink-0 rounded-t-3xl overflow-hidden bg-[#0a0a12]">
                        <img src="assets/艺术家icon.png" alt="艺术家" class="w-full h-full object-contain object-center">
                    </div>
                    <div class="p-8 flex-1 flex flex-col">
                        <h4 class="text-2xl font-bold mb-2 text-white">艺术家</h4>
                        <p class="text-gray-400 text-sm mb-4">面向设计师的3D交互创作工具</p>
                        <a href="https://artist.kingfisher.live/zh" target="_blank" rel="noopener noreferrer" data-utm-content="product_artist" class="mt-auto w-full inline-block text-center py-3 rounded-xl bg-white/5 border border-white/10 font-bold text-gray-300 group-hover:bg-blue-600 group-hover:text-white transition outbound-link">进入官网</a>
                    </div>
                </div>
                <div id="product-scada" class="glass-card rounded-3xl overflow-hidden group border-purple-500/20 bg-purple-500/5 flex flex-col">
                    <div class="aspect-[4/3] flex-shrink-0 rounded-t-3xl overflow-hidden bg-[#0a0a12]">
                        <img src="assets/SCADAicon.png" alt="3D SCADA" class="w-full h-full object-contain object-center">
                    </div>
                    <div class="p-8 flex-1 flex flex-col">
                        <h4 class="text-2xl font-bold mb-2 text-white">3D SCADA</h4>
                        <p class="text-gray-300 text-sm mb-4">自控工程师的3D组态工具</p>
                        <a href="https://scada.kingfisher.live" target="_blank" rel="noopener noreferrer" data-utm-content="product_scada" class="mt-auto w-full inline-block text-center py-3 rounded-xl bg-white/5 border border-white/10 font-bold text-gray-300 group-hover:bg-purple-600 group-hover:text-white transition outbound-link">进入官网</a>
                    </div>
                </div>
                <div id="product-gongchuang" class="glass-card rounded-3xl overflow-hidden group border-cyan-500/20 bg-cyan-500/5 flex flex-col">
                    <div class="aspect-[4/3] flex-shrink-0 rounded-t-3xl overflow-hidden bg-[#0a0a12]">
                        <img src="assets/tron icon.png" alt="工创云" class="w-full h-full object-contain object-center">
                    </div>
                    <div class="p-8 flex-1 flex flex-col">
                        <h4 class="text-2xl font-bold mb-2 text-white">工创云</h4>
                        <p class="text-gray-400 text-sm mb-4">面向开发者的零代码3D搭建平台</p>
                        <a href="https://tron-saas.kingfisher.live/cloud/3dc/index.html#/" target="_blank" rel="noopener noreferrer" data-utm-content="product_tron" class="mt-auto w-full inline-block text-center py-3 rounded-xl bg-white/5 border border-white/10 font-bold text-gray-300 group-hover:bg-cyan-600 group-hover:text-white transition outbound-link">进入官网</a>
                    </div>
                </div>
                <div id="product-luying" class="glass-card rounded-3xl overflow-hidden group border-green-500/10 flex flex-col">
                    <div class="aspect-[4/3] flex-shrink-0 rounded-t-3xl overflow-hidden bg-[#0a0a12]">
                        <img src="assets/鹿影icon.png" alt="鹿影" class="w-full h-full object-contain object-center">
                    </div>
                    <div class="p-8 flex-1 flex flex-col">
                        <h4 class="text-2xl font-bold mb-2 text-white">鹿影</h4>
                        <p class="text-gray-400 text-sm mb-4">人人可用的3D文稿生产平台</p>
                        <a href="https://www.deerviz.show" target="_blank" rel="noopener noreferrer" data-utm-content="product_deerviz" class="mt-auto w-full inline-block text-center py-3 rounded-xl bg-white/5 border border-white/10 font-bold text-gray-300 group-hover:bg-green-600 group-hover:text-white transition outbound-link">进入官网</a>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 解决方案 -->
    <section id="solutions" class="py-16 md:py-32 px-4 md:px-6 border-t border-white/5">
        <div class="max-w-7xl mx-auto">
            <div class="text-center max-w-3xl mx-auto mb-16">
                <h2 class="text-4xl font-bold mb-4 text-gradient">全场景解决方案</h2>
            </div>
            <div class="flex flex-wrap justify-center gap-8 mb-16">
                <button id="btn-building" onclick="switchTab('building')" class="tab-btn active px-12 py-4 rounded-2xl text-base font-bold transition-all">栋见</button>
                <button id="btn-district" onclick="switchTab('district')" class="tab-btn px-12 py-4 rounded-2xl text-base font-bold transition-all">域见</button>
                <button id="btn-space" onclick="switchTab('space')" class="tab-btn px-12 py-4 rounded-2xl text-base font-bold transition-all">瞰见</button>
            </div>
            <div id="solution-content" class="grid lg:grid-cols-2 gap-12 items-center min-h-[450px]">
                <div class="space-y-8 animate-fadeIn">
                    <div class="text-gray-400"><i id="sol-icon" data-lucide="building-2" class="w-10 h-10"></i></div>
                    <h3 class="text-4xl font-bold" id="sol-title">栋见 - 基于空间的设备设施管理系统</h3>
                    <p class="text-gray-400 text-lg leading-relaxed" id="sol-desc">专为园区、楼宇设计，基于数字孪生技术、支持BIM数据，并集成AI分析与决策能力的建筑管理平台。</p>
                    <ul class="space-y-4" id="sol-list"></ul>
                    <div class="pt-6">
                        <button onclick="openSolDetailView()" class="bg-blue-600 hover:bg-blue-700 px-8 py-4 rounded-xl font-bold text-lg shadow-xl shadow-blue-500/20 transition-all">查看方案详情</button>
                    </div>
                </div>
                <div class="relative rounded-[40px] overflow-hidden shadow-2xl border border-white/10">
                    <img id="sol-img" src="assets/images/photo-1486406146926-c627a92ad1ab.jpg" alt="Solution" class="w-full aspect-[4/3] object-cover transition duration-700">
                </div>
            </div>
        </div>
    </section>

    <!-- 行业案例：首页仅展示分类，点击分类或进入案例中心后按分类显示案例列表，点击案例再进详情 -->
    <section id="cases" data-region="section_cases" data-label="行业案例" class="py-16 md:py-32 px-4 md:px-6 bg-[#0a0a15]/50 border-t border-white/5">
        <div class="max-w-7xl mx-auto">
            <div class="text-center mb-20">
                <h2 class="text-4xl font-bold mb-4">行业实战案例</h2>
                <p class="text-gray-400">已交付 500+ 个数字化转型标杆项目，按行业分类展示</p>
            </div>
            <div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-4 gap-6" id="home-cases-grid">
                <a href="cases.html?industry=智慧园区" class="glass-card rounded-3xl overflow-hidden group cursor-pointer block">
                    <div class="h-56 overflow-hidden relative"><img src="assets/cases/8d3db9cabe8159f.jpg" alt="智慧园区" class="w-full h-full object-cover group-hover:scale-110 transition duration-700"></div>
                    <div class="p-8"><h4 class="text-xl font-bold text-white group-hover:text-blue-400 transition">智慧园区</h4><span class="text-sm text-gray-400 mt-2 inline-block">进入案例中心 →</span></div>
                </a>
                <a href="cases.html?industry=智慧城市" class="glass-card rounded-3xl overflow-hidden group cursor-pointer block">
                    <div class="h-56 overflow-hidden relative"><img src="assets/cases/d1dd2006d3596f9.jpg" alt="智慧城市" class="w-full h-full object-cover group-hover:scale-110 transition duration-700"></div>
                    <div class="p-8"><h4 class="text-xl font-bold text-white group-hover:text-blue-400 transition">智慧城市</h4><span class="text-sm text-gray-400 mt-2 inline-block">进入案例中心 →</span></div>
                </a>
                <a href="cases.html?industry=智慧电力" class="glass-card rounded-3xl overflow-hidden group cursor-pointer block">
                    <div class="h-56 overflow-hidden relative"><img src="assets/cases/2348fb4ace4838e.jpg" alt="智慧电力" class="w-full h-full object-cover group-hover:scale-110 transition duration-700"></div>
                    <div class="p-8"><h4 class="text-xl font-bold text-white group-hover:text-blue-400 transition">智慧电力</h4><span class="text-sm text-gray-400 mt-2 inline-block">进入案例中心 →</span></div>
                </a>
                <a href="cases.html?industry=智能建造" class="glass-card rounded-3xl overflow-hidden group cursor-pointer block">
                    <div class="h-56 overflow-hidden relative"><img src="assets/cases/1659334869f66c03.jpg" alt="智能建造" class="w-full h-full object-cover group-hover:scale-110 transition duration-700"></div>
                    <div class="p-8"><h4 class="text-xl font-bold text-white group-hover:text-blue-400 transition">智能建造</h4><span class="text-sm text-gray-400 mt-2 inline-block">进入案例中心 →</span></div>
                </a>
            </div>
            <div class="mt-20 text-center">
                <a href="cases.html" class="inline-block px-10 py-4 rounded-2xl border border-white/10 hover:border-blue-500 hover:bg-blue-600/10 transition font-bold">进入案例中心</a>
            </div>
        </div>
    </section>

    <!-- 核心客户 -->
    <section id="clients" class="py-16 md:py-32 bg-[#080812] px-4 sm:px-6 border-t border-white/5">
        <div class="max-w-[1600px] mx-auto">
            <div class="text-center mb-20">
                <h2 class="text-3xl font-bold mb-4 text-gray-500">核心客户</h2>
            </div>
            <div class="w-full rounded-3xl bg-white shadow-2xl border border-gray-200 px-8 sm:px-12 md:px-16 lg:px-20 py-10 sm:py-14 md:py-16">
                <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-6 sm:gap-8 md:gap-10">
                    <div class="flex items-center justify-center p-2 bg-white rounded-xl"><img src="assets/clients/logo-01.png" alt="国务院国有资产监督委员会" class="client-logo max-h-14 w-full object-contain select-none" loading="lazy" onerror="this.onerror=null;this.src=this.src.replace(/\.png$/,'.jpg')"></div>
                    <div class="flex items-center justify-center p-2 bg-white rounded-xl"><img src="assets/clients/logo-02.png" alt="中华人民共和国司法部" class="client-logo max-h-14 w-full object-contain select-none" loading="lazy" onerror="this.onerror=null;this.src=this.src.replace(/\.png$/,'.jpg')"></div>
                    <div class="flex items-center justify-center p-2 bg-white rounded-xl"><img src="assets/clients/logo-03.png" alt="中华人民共和国最高人民法院" class="client-logo max-h-14 w-full object-contain select-none" loading="lazy" onerror="this.onerror=null;this.src=this.src.replace(/\.png$/,'.jpg')"></div>
                    <div class="flex items-center justify-center p-2 bg-white rounded-xl"><img src="assets/clients/logo-04.jpg" alt="国家电力投资集团公司" class="client-logo max-h-14 w-full object-contain select-none" loading="lazy"></div>
                    <div class="flex items-center justify-center p-2 bg-white rounded-xl"><img src="assets/clients/logo-05.png" alt="中国中央电视台" class="client-logo max-h-14 w-full object-contain select-none" loading="lazy" onerror="this.onerror=null;this.src=this.src.replace(/\.png$/,'.jpg')"></div>
                    <div class="flex items-center justify-center p-2 bg-white rounded-xl"><img src="assets/clients/logo-06.png" alt="国家电网" class="client-logo max-h-14 w-full object-contain select-none" loading="lazy" onerror="this.onerror=null;this.src=this.src.replace(/\.png$/,'.jpg')"></div>
                    <div class="flex items-center justify-center p-2 bg-white rounded-xl"><img src="assets/clients/logo-07.png" alt="中国移动" class="client-logo max-h-14 w-full object-contain select-none" loading="lazy" onerror="this.onerror=null;this.src=this.src.replace(/\.png$/,'.jpg')"></div>
                    <div class="flex items-center justify-center p-2 bg-white rounded-xl"><img src="assets/clients/logo-08.jpg" alt="中核控制" class="client-logo max-h-14 w-full object-contain select-none" loading="lazy"></div>
                    <div class="flex items-center justify-center p-2 bg-white rounded-xl"><img src="assets/clients/logo-09.png" alt="中国石化" class="client-logo max-h-14 w-full object-contain select-none" loading="lazy" onerror="this.onerror=null;this.src=this.src.replace(/\.png$/,'.jpg')"></div>
                    <div class="flex items-center justify-center p-2 bg-white rounded-xl"><img src="assets/clients/logo-10.png" alt="国家能源集团" class="client-logo max-h-14 w-full object-contain select-none" loading="lazy" onerror="this.onerror=null;this.src=this.src.replace(/\.png$/,'.jpg')"></div>
                    <div class="flex items-center justify-center p-2 bg-white rounded-xl"><img src="assets/clients/logo-11.jpg" alt="中新天津生态城" class="client-logo max-h-14 w-full object-contain select-none" loading="lazy"></div>
                    <div class="flex items-center justify-center p-2 bg-white rounded-xl"><img src="assets/clients/logo-12.jpg" alt="中国航天科技集团公司" class="client-logo max-h-14 w-full object-contain select-none" loading="lazy"></div>
                    <div class="flex items-center justify-center p-2 bg-white rounded-xl"><img src="assets/clients/logo-13.png" alt="中国建设银行" class="client-logo max-h-14 w-full object-contain select-none" loading="lazy" onerror="this.onerror=null;this.src=this.src.replace(/\.png$/,'.jpg')"></div>
                    <div class="flex items-center justify-center p-2 bg-white rounded-xl"><img src="assets/clients/logo-14.jpg" alt="兴业银行" class="client-logo max-h-14 w-full object-contain select-none" loading="lazy"></div>
                    <div class="flex items-center justify-center p-2 bg-white rounded-xl"><img src="assets/clients/logo-15.png" alt="中国光大银行" class="client-logo max-h-14 w-full object-contain select-none" loading="lazy" onerror="this.onerror=null;this.src=this.src.replace(/\.png$/,'.jpg')"></div>
                    <div class="flex items-center justify-center p-2 bg-white rounded-xl"><img src="assets/clients/logo-16.jpg" alt="国家会展中心(上海)" class="client-logo max-h-14 w-full object-contain select-none" loading="lazy"></div>
                    <div class="flex items-center justify-center p-2 bg-white rounded-xl"><img src="assets/clients/logo-17.png" alt="嘉实基金" class="client-logo max-h-14 w-full object-contain select-none" loading="lazy" onerror="this.onerror=null;this.src=this.src.replace(/\.png$/,'.jpg')"></div>
                    <div class="flex items-center justify-center p-2 bg-white rounded-xl"><img src="assets/clients/logo-18.png" alt="腾讯" class="client-logo max-h-14 w-full object-contain select-none" loading="lazy" onerror="this.onerror=null;this.src=this.src.replace(/\.png$/,'.jpg')"></div>
                    <div class="flex items-center justify-center p-2 bg-white rounded-xl"><img src="assets/clients/logo-19.png" alt="临港集团" class="client-logo max-h-14 w-full object-contain select-none" loading="lazy" onerror="this.onerror=null;this.src=this.src.replace(/\.png$/,'.jpg')"></div>
                    <div class="flex items-center justify-center p-2 bg-white rounded-xl"><img src="assets/clients/logo-20.png" alt="华润" class="client-logo max-h-14 w-full object-contain select-none" loading="lazy" onerror="this.onerror=null;this.src=this.src.replace(/\.png$/,'.jpg')"></div>
                    <div class="flex items-center justify-center p-2 bg-white rounded-xl"><img src="assets/clients/logo-21.png" alt="梅赛德斯-奔驰" class="client-logo max-h-14 w-full object-contain select-none" loading="lazy" onerror="this.onerror=null;this.src=this.src.replace(/\.png$/,'.jpg')"></div>
                    <div class="flex items-center justify-center p-2 bg-white rounded-xl"><img src="assets/clients/logo-22.png" alt="捷豹" class="client-logo max-h-14 w-full object-contain select-none" loading="lazy" onerror="this.onerror=null;this.src=this.src.replace(/\.png$/,'.jpg')"></div>
                    <div class="flex items-center justify-center p-2 bg-white rounded-xl"><img src="assets/clients/logo-23.png" alt="路虎" class="client-logo max-h-14 w-full object-contain select-none" loading="lazy" onerror="this.onerror=null;this.src=this.src.replace(/\.png$/,'.jpg')"></div>
                    <div class="flex items-center justify-center p-2 bg-white rounded-xl"><img src="assets/clients/logo-24.png" alt="龙湖集团" class="client-logo max-h-14 w-full object-contain select-none" loading="lazy" onerror="this.onerror=null;this.src=this.src.replace(/\.png$/,'.jpg')"></div>
                    <div class="flex items-center justify-center p-2 bg-white rounded-xl"><img src="assets/clients/logo-25.png" alt="深圳市龙华区外国语学校" class="client-logo max-h-14 w-full object-contain select-none" loading="lazy" onerror="this.onerror=null;this.src=this.src.replace(/\.png$/,'.jpg')"></div>
                    <div class="flex items-center justify-center p-2 bg-white rounded-xl"><img src="assets/clients/logo-26.jpg" alt="中央美术学院" class="client-logo max-h-14 w-full object-contain select-none" loading="lazy"></div>
                    <div class="flex items-center justify-center p-2 bg-white rounded-xl"><img src="assets/images/clients/alibaba.png" alt="阿里巴巴" class="client-logo max-h-14 w-full object-contain select-none" loading="lazy"></div>
                    <div class="flex items-center justify-center p-2 bg-white rounded-xl"><img src="assets/images/clients/china-overseas.png" alt="中海地产" class="client-logo max-h-14 w-full object-contain select-none" loading="lazy"></div>
                    <div class="flex items-center justify-center p-2 bg-white rounded-xl"><img src="assets/images/clients/sun-hung-kai.png" alt="新鸿基地产" class="client-logo max-h-14 w-full object-contain select-none" loading="lazy"></div>
                    <div class="flex items-center justify-center p-2 bg-white rounded-xl"><img src="assets/images/clients/cscec.png" alt="中建三局" class="client-logo max-h-14 w-full object-contain select-none" loading="lazy"></div>
                </div>
            </div>
        </div>
    </section>

    <!-- 页脚 (重构版：增加站点导航与二维码) -->
    <footer class="bg-[#05050a] pt-12 md:pt-24 pb-8 md:pb-12 px-4 md:px-6 border-t border-white/5">
        <div class="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-2 lg:grid-cols-6 gap-8 md:gap-12 mb-10 md:mb-20">
            <!-- 品牌与描述 / 联系我们 -->
            <div class="lg:col-span-2 space-y-6">
                <img src="assets/翠鸟logo.png" alt="翠鸟智擎" class="h-10 w-auto object-contain">
                <div class="text-sm text-gray-400 leading-relaxed max-w-sm space-y-1">
                    <p class="font-bold text-white mb-2">联系我们</p>
                    <p>北京：朝阳区望京SOHO塔 2C座0711室</p>
                    <p>上海：闵行区秀文路898号西子国际中心905室</p>
                    <p>深圳：深圳市南山区芒果网大厦809室</p>
                    <p>香港：香港九龍觀塘巧明街106號冠力工業大厦13楼5室101房</p>
                    <p class="mt-2">Email：<a href="mailto:info@16pe.com" class="hover:text-blue-400">info@16pe.com</a></p>
                </div>
            </div>

            <!-- 移动端：三栏合并为紧凑布局 -->
            <div class="md:hidden grid grid-cols-3 gap-4">
                <div>
                    <h6 class="font-bold text-xs text-white mb-3">网站</h6>
                    <ul class="text-xs text-gray-500 space-y-2">
                        <li><a href="#hero" class="hover:text-blue-400">首页</a></li>
                        <li><a href="#products" class="hover:text-blue-400">工具</a></li>
                        <li><a href="#solutions" class="hover:text-blue-400">方案</a></li>
                        <li><a href="#cases" class="hover:text-blue-400">案例</a></li>
                    </ul>
                </div>
                <div>
                    <h6 class="font-bold text-xs text-white mb-3">产品</h6>
                    <ul class="text-xs text-gray-500 space-y-2">
                        <li><a href="#product-artist" class="hover:text-blue-400">艺术家</a></li>
                        <li><a href="#product-scada" class="hover:text-blue-400">SCADA</a></li>
                        <li><a href="#product-gongchuang" class="hover:text-blue-400">工创云</a></li>
                        <li><a href="#product-luying" class="hover:text-blue-400">鹿影</a></li>
                    </ul>
                </div>
                <div>
                    <h6 class="font-bold text-xs text-white mb-3">成员</h6>
                    <ul class="text-xs text-gray-500 space-y-2">
                        <li><a href="http://www.hobbypaint.art" target="_blank" rel="noopener" class="hover:text-blue-400">好笔喷涂</a></li>
                        <li><a href="http://www.axpower.cn" target="_blank" rel="noopener" class="hover:text-blue-400">安信智电</a></li>
                    </ul>
                </div>
            </div>

            <!-- 桌面端：原有布局 -->
            <div class="hidden md:block space-y-6">
                <h6 class="font-bold text-sm text-white tracking-widest">网站导航</h6>
                <ul class="text-xs text-gray-500 space-y-4 font-medium">
                    <li><a href="#hero" class="hover:text-blue-400 transition">官网首页</a></li>
                    <li><a href="#products" class="hover:text-blue-400 transition">工具矩阵</a></li>
                    <li><a href="#solutions" class="hover:text-blue-400 transition">解决方案</a></li>
                    <li><a href="#cases" class="hover:text-blue-400 transition">行业案例</a></li>
                    <li><a href="#clients" class="hover:text-blue-400 transition">核心客户</a></li>
                </ul>
            </div>

            <div class="hidden md:block space-y-6">
                <h6 class="font-bold text-sm text-white tracking-widest">产品与技术</h6>
                <ul class="text-xs text-gray-500 space-y-4 font-medium">
                    <li><a href="#product-artist" class="hover:text-blue-400 transition">艺术家</a></li>
                    <li><a href="#product-scada" class="hover:text-blue-400 transition">3D SCADA</a></li>
                    <li><a href="#product-gongchuang" class="hover:text-blue-400 transition">工创云</a></li>
                    <li><a href="#product-luying" class="hover:text-blue-400 transition">鹿影</a></li>
                </ul>
            </div>

            <div class="hidden md:block space-y-6">
                <h6 class="font-bold text-sm text-white tracking-widest">成员企业</h6>
                <ul class="text-xs text-gray-500 space-y-4 font-medium">
                    <li><a href="http://www.hobbypaint.art" target="_blank" rel="noopener noreferrer" class="hover:text-blue-400 transition">好笔喷涂装社区</a></li>
                    <li><a href="http://www.axpower.cn" target="_blank" rel="noopener noreferrer" class="hover:text-blue-400 transition">安信智电</a></li>
                </ul>
            </div>

            <!-- 关注我们：二维码 -->
            <div class="space-y-4 md:space-y-6">
                <h6 class="font-bold text-xs md:text-sm text-white tracking-widest">关注我们</h6>
                <div class="grid grid-cols-4 md:grid-cols-2 gap-2 md:gap-4">
                    <div class="flex flex-col items-center space-y-1 md:space-y-2">
                        <img src="assets/客服微信.jpg" alt="客服微信" class="w-14 h-14 md:w-20 md:h-20 object-cover rounded-lg md:rounded-xl bg-white">
                        <span class="text-[9px] md:text-[10px] text-gray-400">客服微信</span>
                    </div>
                    <div class="flex flex-col items-center space-y-1 md:space-y-2">
                        <img src="assets/企业微信.jpg" alt="企业微信" class="w-14 h-14 md:w-20 md:h-20 object-cover rounded-lg md:rounded-xl bg-white">
                        <span class="text-[9px] md:text-[10px] text-gray-400">企业微信</span>
                    </div>
                    <div class="flex flex-col items-center space-y-1 md:space-y-2">
                        <img src="assets/公众号.jpg" alt="公众号" class="w-14 h-14 md:w-20 md:h-20 object-cover rounded-lg md:rounded-xl bg-white">
                        <span class="text-[9px] md:text-[10px] text-gray-400">公众号</span>
                    </div>
                    <div class="flex flex-col items-center space-y-1 md:space-y-2">
                        <img src="assets/视频号.jpg" alt="视频号" class="w-14 h-14 md:w-20 md:h-20 object-cover rounded-lg md:rounded-xl bg-white">
                        <span class="text-[9px] md:text-[10px] text-gray-400">视频号</span>
                    </div>
                </div>
            </div>
        </div>

        <div class="max-w-7xl mx-auto pt-8 border-t border-white/5 flex flex-col md:flex-row justify-between text-[10px] text-gray-600 gap-4">
            <div class="flex flex-wrap gap-x-8 gap-y-2">
                <p>© 2026 北京翠鸟智擎科技有限公司 版权所有</p>
                <a href="https://beian.miit.gov.cn/" target="_blank" rel="noopener" class="hover:text-gray-400 transition">京ICP备2022017450号-2</a>
            </div>
            <div class="flex space-x-6">
                <a href="#" class="hover:text-gray-400 transition">法律条款</a>
                <a href="#" class="hover:text-gray-400 transition">隐私政策</a>
                <a href="#" class="hover:text-gray-400 transition">Cookie 设置</a>
            </div>
        </div>
    </footer>

    <!-- Overlay: 方案详情页 -->
    <div id="sol-detail-view" class="full-overlay">
        <div class="max-w-6xl mx-auto px-6 py-28 relative">
            <button onclick="closeSolDetailView()" class="fixed top-24 left-6 lg:left-12 bg-white/5 p-4 rounded-full hover:bg-blue-600 transition z-[220] shadow-xl border border-white/10">
                <i data-lucide="arrow-left" class="text-white"></i>
            </button>
            <div id="sol-detail-content"></div>
        </div>
    </div>

    <!-- 视频播放浮窗：点击视频缩略图后全屏大窗播放 -->
    <div id="video-play-overlay" class="fixed inset-0 z-[250] hidden items-center justify-center bg-black/95 p-4 md:p-8" style="display: none;" onclick="closeVideoOverlay()">
        <button type="button" onclick="closeVideoOverlay()" class="absolute top-4 right-4 z-10 w-12 h-12 rounded-full bg-white/10 hover:bg-white/20 flex items-center justify-center text-white transition">
            <i data-lucide="x" class="w-6 h-6"></i>
        </button>
        <div class="w-full h-full max-w-[1800px] max-h-[90vh] flex items-center justify-center pointer-events-none">
            <div class="pointer-events-auto" onclick="event.stopPropagation()">
                <video id="video-play-element" class="max-w-full max-h-[85vh] w-auto h-auto rounded-xl shadow-2xl" controls playsinline onclick="event.stopPropagation()"></video>
            </div>
        </div>
    </div>

    <!-- Modals -->
    <!-- 预约演示弹窗（改为三步流程） -->
    <div id="demo-modal" class="modal-overlay">
        <div class="glass-card bg-[#0a0a1a] w-[calc(100%-2rem)] md:w-full max-w-lg rounded-3xl md:rounded-[40px] p-6 md:p-12 mx-4 md:mx-0 relative border-white/5">
            <button onclick="closeModal('demo-modal')" class="absolute top-4 right-4 md:top-8 md:right-8 text-gray-500 hover:text-white transition"><i data-lucide="x"></i></button>
            <h3 class="text-2xl md:text-3xl font-bold mb-2 text-white">预约专家演示</h3>
            <p class="text-xs text-gray-400 mb-6">填写基础信息后，我们会在 1 个工作日内与您联系，安排专属演示。</p>
            <form id="demoForm" class="space-y-6 text-white">
                <!-- Step 1: 手机号 + 验证码 -->
                <div id="demo-step-1" class="space-y-4">
                    <p class="text-sm text-gray-300">第一步：请先验证您的联系手机号，用于后续沟通和确认。</p>
                    <div>
                        <label for="demo-phone" class="block text-xs text-gray-300 mb-1">手机号 *</label>
                        <input id="demo-phone" type="tel" placeholder="请输入您的手机号" class="w-full bg-white/5 border border-white/10 rounded-xl px-5 py-3 text-sm focus:border-blue-500 outline-none" required>
                    </div>
                    <div class="flex space-x-2">
                        <input id="demo-otp" type="text" maxlength="6" placeholder="请输入6位验证码" class="flex-1 bg-white/5 border border-white/10 rounded-xl px-5 py-3 text-sm outline-none" required>
                        <button type="button" onclick="handleOTP(this)" class="px-5 py-3 bg-blue-600/10 text-blue-400 text-xs font-bold rounded-xl whitespace-nowrap">获取验证码</button>
                    </div>
                    <button type="button" onclick="validateAndGoDemoStep(1, 2)" class="w-full py-3 mt-2 bg-gradient-to-r from-blue-600 to-blue-500 text-white rounded-xl text-sm font-bold shadow-lg active:scale-95 transition-all">下一步：填写个人信息</button>
                </div>

                <!-- Step 2: 姓名 + 公司 -->
                <div id="demo-step-2" class="space-y-4 hidden">
                    <p class="text-sm text-gray-300">第二步：请留下您的身份信息，方便我们为您安排合适的专家。</p>
                    <div>
                        <label for="demo-name" class="block text-xs text-gray-300 mb-1">姓名 *</label>
                        <input id="demo-name" type="text" placeholder="例如：张三" class="w-full bg-white/5 border border-white/10 rounded-xl px-5 py-3 text-sm focus:border-blue-500 outline-none" required>
                    </div>
                    <div>
                        <label for="demo-company" class="block text-xs text-gray-300 mb-1">企业名称 *</label>
                        <input id="demo-company" type="text" placeholder="例如：某某科技 / 某某集团" class="w-full bg-white/5 border border-white/10 rounded-xl px-5 py-3 text-sm focus:border-blue-500 outline-none" required>
                    </div>
                    <div class="flex justify-between pt-2 gap-2">
                        <button type="button" onclick="goDemoStep(1)" class="flex-1 py-3 bg-white/5 text-gray-300 rounded-xl text-xs font-bold border border-white/10 hover:bg-white/10 transition">上一步</button>
                        <button type="button" onclick="validateAndGoDemoStep(2, 3)" class="flex-1 py-3 bg-gradient-to-r from-blue-600 to-purple-600 text-white rounded-xl text-xs font-bold shadow-lg active:scale-95 transition-all">下一步：选择产品与方案</button>
                    </div>
                </div>

                <!-- Step 3: 产品 & 方案兴趣 -->
                <div id="demo-step-3" class="space-y-4 hidden">
                    <p class="text-sm text-gray-300">第三步：选择您当前最关注的产品与方案方向。</p>
                    <div>
                        <div class="text-xs text-gray-400 mb-2">感兴趣的产品（可多选）</div>
                        <div class="grid grid-cols-2 gap-2 text-xs">
                            <label class="flex items-center space-x-2 bg-white/5 rounded-lg px-3 py-2 border border-white/10 cursor-pointer hover:border-blue-500">
                                <input type="checkbox" name="demo-product" value="艺术家 Artist" class="accent-blue-500">
                                <span>艺术家 Artist</span>
                            </label>
                            <label class="flex items-center space-x-2 bg-white/5 rounded-lg px-3 py-2 border border-white/10 cursor-pointer hover:border-blue-500">
                                <input type="checkbox" name="demo-product" value="3D SCADA" class="accent-blue-500">
                                <span>3D SCADA</span>
                            </label>
                            <label class="flex items-center space-x-2 bg-white/5 rounded-lg px-3 py-2 border border-white/10 cursor-pointer hover:border-blue-500">
                                <input type="checkbox" name="demo-product" value="工创云平台" class="accent-blue-500">
                                <span>工创云平台</span>
                            </label>
                            <label class="flex items-center space-x-2 bg-white/5 rounded-lg px-3 py-2 border border-white/10 cursor-pointer hover:border-blue-500">
                                <input type="checkbox" name="demo-product" value="鹿影" class="accent-blue-500">
                                <span>鹿影</span>
                            </label>
                        </div>
                    </div>
                    <div>
                        <div class="text-xs text-gray-400 mb-2">感兴趣的方案方向（可多选）</div>
                        <div class="grid grid-cols-2 gap-2 text-xs">
                            <label class="flex items-center space-x-2 bg-white/5 rounded-lg px-3 py-2 border border-white/10 cursor-pointer hover:border-blue-500">
                                <input type="checkbox" name="demo-solution" value="栋见" class="accent-blue-500">
                                <span>栋见</span>
                            </label>
                            <label class="flex items-center space-x-2 bg-white/5 rounded-lg px-3 py-2 border border-white/10 cursor-pointer hover:border-blue-500">
                                <input type="checkbox" name="demo-solution" value="域见" class="accent-blue-500">
                                <span>域见</span>
                            </label>
                            <label class="flex items-center space-x-2 bg-white/5 rounded-lg px-3 py-2 border border-white/10 cursor-pointer hover:border-blue-500">
                                <input type="checkbox" name="demo-solution" value="瞰见" class="accent-blue-500">
                                <span>瞰见</span>
                            </label>
                            <label class="flex items-center space-x-2 bg-white/5 rounded-lg px-3 py-2 border border-white/10 cursor-pointer hover:border-blue-500">
                                <input type="checkbox" name="demo-solution" value="其他定制方案" class="accent-blue-500">
                                <span>其他定制方案</span>
                            </label>
                        </div>
                    </div>
                    <div class="flex justify-between pt-2 gap-2">
                        <button type="button" onclick="goDemoStep(2)" class="flex-1 py-3 bg-white/5 text-gray-300 rounded-xl text-xs font-bold border border-white/10 hover:bg-white/10 transition">上一步</button>
                        <button type="submit" class="flex-1 py-3 bg-gradient-to-r from-blue-600 to-purple-600 text-white rounded-xl text-xs font-bold shadow-lg active:scale-95 transition-all">提交预约</button>
                    </div>
                    <p class="text-[10px] text-gray-500 mt-1">提交后，预约信息会同步发送给内部团队，并可通过后台接口随时查看。</p>
                </div>
            </form>
        </div>
    </div>

    <script>
        /**
         * --- DATA ---
         */
        const solData = {
            building: {
                title: "栋见 - 基于空间的设备设施管理系统",
                icon: "building-2",
                desc: "专为园区、楼宇设计，基于数字孪生技术、支持BIM数据，并集成AI分析与决策能力的建筑管理平台。通过高精度三维建模还原真实环境，设备设施分布与状态一目了然，实现全生命周期管理。",
                img: "assets/images/photo-1486406146926-c627a92ad1ab.jpg",
                list: ["数字孪生赋能，设备状态一目了然", "十大系统全面集成，一站式管理", "BIM 原生支持，数字化运维", "AI 数据洞察与自然语言查询", "能源精细化管理，降排减碳", "大屏/PC/移动多端随时随地管理"],
                videoUrl: "assets/栋见.mp4",
                videoPlaceholder: "assets/images/photo-1517048676732-d65bc937f952.jpg",
                detailIntro: "翠鸟栋见专为园区、楼宇设计，基于数字孪生与BIM技术，集成AI分析与决策能力。传统设备管理方式存在信息盲区、定位困难、维保不及时等痛点，栋见通过「看得见、找得到、管得好」三大能力，实现设备与空间绑定、精准定位、全生命周期管理，助力园区降本增效。",
                detailSections: [
                    { title: "产品特点：数字孪生赋能", content: "专为园区、楼宇设计，通过高精度三维建模还原真实环境，设备设施分布和状态一目了然。资产档案与空间深度绑定，实现设备实时监控、精准定位和信息管理，真正做到在空间中发现问题、找到方法、解决问题、获得反馈。" },
                    { title: "产品特点：功能全面集成", content: "系统标准功能模块一次性涵盖：IBMS、数字孪生系统、设备设施管理、告警管理、工单管理、视频监控、消防管理、能源管理、停车管理、文件管理等十大系统，打破数据壁垒，提升管理效率。" },
                    { title: "产品特点：BIM 与 AI 能力", content: "原生支持 Revit、Bently、犀牛等数十种格式的BIM与工程模型，满足数字化设计、交付、运维战略。深度集成AI与大模型，通过自然语言查询与分析数据，支持数百种专业格式直接解析预览，无需安装即可查看，为移动化、轻量化响应提供支撑。" },
                    { title: "产品优势：看得到、找得准、控得了", content: "数字孪生与BIM结合，实现设备设施与空间数据全面集成与可视化。精准定位事件与设备位置，设备位置联动了告警、历史告警、资料及AI问答，所有操作面向解决问题。大型园区设备故障时，运维人员可秒级定位设备并同步获取设备信息与反控能力，事件处理周期从数十分钟缩短至秒级。" },
                    { title: "成功案例", content: "上海临港集团604地块：物业对园区设备管理运维提高效率、降低成本、缩短处理过程。75%以上问题在本系统内直接解决无须登录第三方系统，事件发现缩短95%时间，一般性事件处理反应速度提高90%以上，部门协同效率大幅提升。" }
                ]
            },
            district: {
                title: "域见 - 基于空间的数据机房管理系统",
                icon: "layout",
                desc: "专为政府、企业等数据中心机房设计的三维空间智慧机房管理系统，通过三维空间技术赋能IT资产管理，提高机房管理效率、安全可靠性与资源使用效率。",
                img: "assets/images/photo-1544197150-b99a580bb7a8.jpg",
                list: [
                    "三维空间一屏呈现全部IT资产与机柜资源",
                    "实时监控机房PUE、负载率、温湿度等运行态势",
                    "资产台账与空间深度绑定，支持全生命周期管理",
                    "告警与工单联动，支持多维统计分析与趋势研判",
                    "报表中心与权限体系，支撑精细化运维与审计"
                ],
                videoUrl: "assets/域见.mp4",
                videoPlaceholder: "assets/images/photo-1585079542156-2755d9c8a094.jpg",
                detailIntro: "随着信息化建设不断推进，机房规模持续扩大，传统机房管理存在缺乏智能化、管理效率低、安全隐患大等问题。域见是翠鸟智擎专为政府、企业等数据中心机房打造的三维空间智慧机房管理系统，通过三维空间与数字孪生技术将机房IT资产、机柜、环境、能耗等信息统一到一个三维场景中管理，以「看得见、管得好、可追溯」为目标，解决管理人员「看不见、找不到、管不好」的痛点，实现机房管理效率、安全可靠性与资源使用效率的全面提升。",
                detailSections: [
                    { title: "产品定位与核心价值", content: "域见专为政府、企业等数据中心机房设计，核心价值是通过三维空间技术赋能，实现IT资产设备设施管理的全面升级，确保高效运作与精准维护，优化运营效能。产品亮点包括：直观的三维空间展示、实时的设备状态监控、智能化的维护管理；IT资产档案空间信息化、运维流程空间标准化。产品目标明确：提高机房管理效率（集中式管理）、提高机房安全可靠性（减少事故）、提高机房使用效率（合理分配资源）。" },
                    { title: "综合概览模块", content: "系统原生支持三维机房空间模块，业主所有IT资产可一屏呈现。宏观统计IT资产，感知整体运行运营情况；可根据不同查询需求统计机房工单和告警情况。具体包括：IT资产统计（按U数、功率、承重等宏观统计）、IT资产状态（机房PUE值、负载率、温湿度与能耗监测，实时掌控运行态势）、IT资产实时跟踪（三维空间实时呈现）、告警工单实时呈现（按统计需求展示告警与工单）。" },
                    { title: "资产管理模块", content: "机房资产模块对机架资产生命周期进行流程化管理，提供精准的数字孪生空间，真实反映资产状态，直观呈现上架、空闲、占位等信息。支持关联设备合同与合同文档查看；提供设备上架、位置变更、设备下架全业务流程一站式指导；支持批量导入，快速建立设备台账、形成数字资产。功能涵盖资产台账、资产导入、设备查看、设备定位、资产台账列表、新建资产、资产设备履历；支持设备上架/下架时选择机柜列与机柜、查看机柜实时资源（空间、功率、承重），以及针对预留机柜位的设备安装与拆除。空间及设备维护采用零代码的简单操作，实时维护最新空间数据。" },
                    { title: "告警工单模块", content: "多角度展示告警工单信息、统计分析和趋势情况，支持按周、月、年等维度进行告警统计分析。告警详情可展示告警事件、设备定位、视频情况（周围摄像机报警前后15秒录像）、告警工单联动；支持告警收敛策略设置；告警处置包含设备定位、收敛、消警、转工单。工单支持多角度统计与趋势分析；工单创建可关联空间/系统/设备、指定处理人与协调人。完整工单流程：告警转工单或手动创建 → 待办 → 接收/关闭/转派 → 处理中 → 提交 → 待审核 → 完成或关闭，全流程可配置短信或邮件通知。" },
                    { title: "资料库与报表中心", content: "资料库支持上传设备资料、建设设备资料库，结合AI数据洞察能力提升数据驱动能力；设备资料归集、全量分析，为设备资产信息提供底层支撑。报表中心提供告警、工单、环境、能耗、资产、容量等多维度高效的报表统计分析，支持多周期维度筛选、展示与导出；多角度展示机房温湿度、能耗、资产、告警等数据曲线，支持多维度机房数据统计分析与趋势研判。" },
                    { title: "系统配置与建设周期", content: "系统配置模块提供企业级运维管理能力：用户、角色、权限及功能菜单配置；用户增删改查，可支持与第三方系统SSO集成；按组织架构为不同员工配置相应权限；支持机柜参数、动环告警配置、告警中心规则配置、容量配置等。建设周期标准化：资料收集（弱电图纸、子系统文档、物联点表等）→ 数据对接（各类子系统数据、用户体系或统一权限认证）→ 标准化实施（软件+硬件一体机部署、调试）→ 部署与培训。成熟产品框架下，约50个机柜、资料齐备时约4周即可交付，提供「交钥匙」服务。" }
                ]
            },
            space: {
                title: "瞰见 - 基于AI的资产运营诊断平台",
                icon: "activity",
                desc: "无需昂贵的 3D 与数学建模，无需费神的数据清洗，一键上传运营与运行数据，通过后端 Python 算法与AI模式识别能力，即刻为您输出诊断报告。帮您洞察租户风险，挖掘节能潜力，将沉睡的业务数据转化为清晰的获客与省钱方案。",
                img: "assets/kanjian-hero.png",
                list: [
                    "零门槛数据盲传",
                    "AI 租户风控画像",
                    "机房能效自动化审计",
                    "管理漏洞深度扫描",
                    "极简按次付费模式",
                    "交互式自检反馈"
                ],
                videoPlaceholder: "assets/kanjian-hero.png"
            }
        };

        /**
         * --- CAROUSEL ---
         */
        let slideIndex = 0;
        let slideInterval;
        let slides = document.querySelectorAll(".carousel-item");
        let indicators = document.querySelectorAll(".slide-indicator");

        function showSlide(index) {
            slides.forEach((s, i) => { s.classList.remove("active"); indicators[i].classList.remove("active"); });
            slides[index].classList.add("active");
            indicators[index].classList.add("active");
            slideIndex = index;
        }

        function startCarousel() {
            clearInterval(slideInterval);
            slideInterval = setInterval(() => { showSlide((slideIndex + 1) % slides.length); }, 5000);
        }
        function goToSlide(n) { showSlide(n); startCarousel(); }

        /**
         * --- TABS ---
         */
        let currentSol = 'building';
        function switchTab(key) {
            document.querySelectorAll('.tab-btn').forEach(btn => btn.classList.remove('active'));
            document.getElementById(`btn-${key}`).classList.add('active'); 
            currentSol = key;
            const d = solData[key];
            const content = document.getElementById('solution-content');
            const imgEl = document.getElementById('sol-img');
            const detailBtn = document.querySelector('#solution-content button[onclick="openSolDetailView()"]');
            content.style.opacity = '0';
            setTimeout(() => {
                document.getElementById('sol-title').innerText = d.title;
                document.getElementById('sol-desc').innerText = d.desc;
                if (imgEl) imgEl.src = d.img;
                document.getElementById('sol-icon').parentElement.innerHTML = `<i id="sol-icon" data-lucide="${d.icon}" class="w-10 h-10"></i>`;
                document.getElementById('sol-list').innerHTML = d.list.map(i => `<li class="flex items-center space-x-3 text-gray-300 text-sm font-medium"><i data-lucide="check-circle" class="text-blue-500 w-4"></i><span>${i}</span></li>`).join('');
                if (detailBtn) {
                    if (key === 'space') {
                        detailBtn.disabled = true;
                        detailBtn.classList.add('opacity-50', 'cursor-not-allowed');
                    } else {
                        detailBtn.disabled = false;
                        detailBtn.classList.remove('opacity-50', 'cursor-not-allowed');
                    }
                }
                if (window.lucide) window.lucide.createIcons();
                content.style.opacity = '1';
            }, 200);
        }

        /**
         * --- OVERLAYS ---
         */
        function openSolDetailView() {
            const data = solData[currentSol];
            const container = document.getElementById('sol-detail-content');

            // 栋见：双视频 + 图文混排（已实现）
            if (currentSol === 'building' && data.detailIntro && data.detailSections && data.videoUrl) {
                const dongjianImgs = ["assets/dongjian-01.png", "assets/dongjian-02.png", "assets/dongjian-03.png", "assets/dongjian-04.png", "assets/dongjian-05.png", "assets/dongjian-06.png", "assets/dongjian-07.png"];
                const videoCuiban = "assets/cuiniao-compressed.mp4";
                const sectionsWithImages = data.detailSections.map((s, i) => {
                    const imgUrl = dongjianImgs[i + 2];
                    const imgBlock = `<div class="rounded-3xl overflow-hidden flex-shrink-0"><img src="${imgUrl}" alt="栋见系统截图" class="w-full h-56 object-cover"></div>`;
                    const textBlock = `<div><h3 class="text-2xl font-bold text-white mb-4 border-b border-white/10 pb-2">${s.title}</h3><p class="text-gray-400 leading-relaxed">${s.content}</p></div>`;
                    const reverse = i % 2 === 1;
                    return `<div class="grid lg:grid-cols-2 gap-10 items-center mb-14">${reverse ? imgBlock + textBlock : textBlock + imgBlock}</div>`;
                }).join('');
                container.innerHTML = `
                    <div class="animate-fadeIn">
                        <h1 class="text-6xl font-black text-gradient leading-tight mb-6">${data.title}</h1>
                        <div class="grid lg:grid-cols-2 gap-12 items-center mb-16">
                            <div class="space-y-6">
                                <h2 class="text-3xl font-bold text-white">方案背景</h2>
                                <p class="text-gray-400 leading-relaxed">${data.detailIntro}</p>
                                <ul class="space-y-3">
                                    ${data.list.map(l => `<li class="flex items-center text-blue-400 font-medium"><i data-lucide="check-circle" class="w-4 mr-2 flex-shrink-0"></i><span>${l}</span></li>`).join('')}
                                </ul>
                            </div>
                            <div class="rounded-3xl overflow-hidden"><img src="${dongjianImgs[0]}" alt="栋见系统截图" class="w-full aspect-[4/3] object-cover"></div>
                        </div>
                        <h2 class="text-3xl font-bold text-white mb-6">视频介绍</h2>
                        <div class="grid md:grid-cols-2 gap-8 mb-16">
                            <div>
                                <h3 class="text-xl font-bold text-white mb-2">方案介绍</h3>
                                <p class="text-gray-400 text-sm mb-3">栋见平台核心能力与典型应用场景</p>
                                <div class="rounded-3xl overflow-hidden aspect-video bg-black/40 relative group cursor-pointer" onclick="openVideoOverlay('${data.videoUrl}')">
                                    <img src="${data.videoPlaceholder}" alt="" class="absolute inset-0 w-full h-full object-cover opacity-80 group-hover:opacity-90 transition">
                                    <div class="absolute inset-0 flex items-center justify-center"><div class="w-20 h-20 rounded-full bg-blue-600/90 flex items-center justify-center shadow-2xl group-hover:scale-110 transition"><i data-lucide="play" class="text-white fill-white ml-1 w-10 h-10"></i></div></div>
                                </div>
                            </div>
                            <div>
                                <h3 class="text-xl font-bold text-white mb-2">客户宣传视频</h3>
                                <p class="text-gray-400 text-sm mb-3">翠鸟版本 · 客户真实应用与宣传展示</p>
                                <div class="rounded-3xl overflow-hidden aspect-video bg-black/40 relative group cursor-pointer" onclick="openVideoOverlay('${videoCuiban}')">
                                    <img src="${data.videoPlaceholder}" alt="" class="absolute inset-0 w-full h-full object-cover opacity-80 group-hover:opacity-90 transition">
                                    <div class="absolute inset-0 flex items-center justify-center"><div class="w-20 h-20 rounded-full bg-blue-600/90 flex items-center justify-center shadow-2xl group-hover:scale-110 transition"><i data-lucide="play" class="text-white fill-white ml-1 w-10 h-10"></i></div></div>
                                </div>
                            </div>
                        </div>
                        <h2 class="text-3xl font-bold text-white mb-10">产品特点与优势</h2>
                        ${sectionsWithImages}
                        <div class="pt-10 pb-6 flex flex-wrap gap-4">
                            <a href="assets/栋见PDF.pdf" download="栋见PDF.pdf" class="inline-flex items-center gap-2 px-8 py-4 bg-white/5 border border-white/20 hover:bg-white/10 text-white rounded-xl font-bold transition">
                                <i data-lucide="download" class="w-5 h-5"></i>文档下载
                            </a>
                            <button onclick="openModal('demo-modal')" class="px-8 py-4 bg-blue-600 hover:bg-blue-700 text-white rounded-xl font-bold transition">预约演示</button>
                        </div>
                    </div>
                `;
            }
            // 域见：单视频（缩小占比）+ 图文混排，使用 yujian-01~05.png
            else if (currentSol === 'district' && data.detailIntro && data.detailSections && data.videoUrl) {
                const yujianImgs = ["assets/yujian-01.png", "assets/yujian-02.png", "assets/yujian-03.png", "assets/yujian-04.png", "assets/yujian-05.png"];
                const sectionsWithImages = data.detailSections.map((s, i) => {
                    const imgIndex = 2 + (i % 3);
                    const imgUrl = yujianImgs[imgIndex];
                    const imgBlock = `<div class="rounded-3xl overflow-hidden flex-shrink-0"><img src="${imgUrl}" alt="域见系统截图" class="w-full h-56 object-cover"></div>`;
                    const textBlock = `<div><h3 class="text-2xl font-bold text-white mb-4 border-b border-white/10 pb-2">${s.title}</h3><p class="text-gray-400 leading-relaxed">${s.content}</p></div>`;
                    const reverse = i % 2 === 1;
                    return `<div class="grid lg:grid-cols-2 gap-10 items-center mb-14">${reverse ? imgBlock + textBlock : textBlock + imgBlock}</div>`;
                }).join('');
                container.innerHTML = `
                    <div class="animate-fadeIn">
                        <h1 class="text-6xl font-black text-gradient leading-tight mb-6">${data.title}</h1>
                        <div class="grid lg:grid-cols-2 gap-12 items-center mb-16">
                            <div class="space-y-6">
                                <h2 class="text-3xl font-bold text-white">方案背景</h2>
                                <p class="text-gray-400 leading-relaxed">${data.detailIntro}</p>
                                <ul class="space-y-3">
                                    ${data.list.map(l => `<li class="flex items-center text-blue-400 font-medium"><i data-lucide="check-circle" class="w-4 mr-2 flex-shrink-0"></i><span>${l}</span></li>`).join('')}
                                </ul>
                            </div>
                            <div class="rounded-3xl overflow-hidden"><img src="${yujianImgs[0]}" alt="域见系统截图" class="w-full aspect-[4/3] object-cover"></div>
                        </div>
                        <h2 class="text-3xl font-bold text-white mb-4">视频介绍</h2>
                        <div class="mb-16 max-w-2xl">
                            <h3 class="text-lg font-bold text-white mb-1">方案介绍</h3>
                            <p class="text-gray-400 text-sm mb-3">基于空间的智慧机房管理平台实景演示</p>
                            <div class="rounded-2xl overflow-hidden aspect-video max-h-[280px] bg-black/40 relative group cursor-pointer" onclick="openVideoOverlay('${data.videoUrl}')">
                                <img src="${data.videoPlaceholder}" alt="" class="absolute inset-0 w-full h-full object-cover opacity-80 group-hover:opacity-90 transition">
                                <div class="absolute inset-0 flex items-center justify-center"><div class="w-16 h-16 rounded-full bg-blue-600/90 flex items-center justify-center shadow-xl group-hover:scale-110 transition"><i data-lucide="play" class="text-white fill-white ml-1 w-8 h-8"></i></div></div>
                            </div>
                        </div>
                        <h2 class="text-3xl font-bold text-white mb-10">产品特点与优势</h2>
                        ${sectionsWithImages}
                        <div class="pt-10 pb-6 flex flex-wrap gap-4">
                            <a href="assets/域见PDF.pdf" download="域见PDF.pdf" class="inline-flex items-center gap-2 px-8 py-4 bg-white/5 border border-white/20 hover:bg-white/10 text-white rounded-xl font-bold transition">
                                <i data-lucide="download" class="w-5 h-5"></i>文档下载
                            </a>
                            <button onclick="openModal('demo-modal')" class="px-8 py-4 bg-blue-600 hover:bg-blue-700 text-white rounded-xl font-bold transition">预约演示</button>
                        </div>
                    </div>
                `;
            }
            // 其他方案：通用详情模板
            else {
                container.innerHTML = `
                    <div class="animate-fadeIn">
                        <h1 class="text-6xl font-black text-gradient leading-tight mb-6">${data.title}</h1>
                        <div class="grid lg:grid-cols-2 gap-12 items-center mb-20">
                            <div class="space-y-6">
                                <h2 class="text-3xl font-bold text-white">方案背景</h2>
                                <p class="text-gray-400 leading-relaxed">${data.desc}方案深度融合了自研渲染引擎与时空数据库，为场景管理者提供毫秒级的虚实联动能力。</p>
                                <ul class="space-y-4">
                                    ${data.list.map(l => `<li class="flex items-center text-blue-400 font-bold"><i data-lucide="zap" class="w-4 mr-2"></i> ${l}</li>`).join('')}
                                </ul>
                            </div>
                            <div class="rounded-[40px] overflow-hidden border border-white/10 shadow-2xl"><img src="${data.img}" class="w-full"></div>
                        </div>
                        <div class="relative rounded-[40px] overflow-hidden bg-white/5 border border-white/10 group cursor-pointer aspect-video flex items-center justify-center">
                            <img src="${data.videoPlaceholder}" class="absolute inset-0 w-full h-full object-cover opacity-30 group-hover:scale-105 transition duration-1000">
                            <div class="relative z-10 w-24 h-24 bg-blue-600 rounded-full flex items-center justify-center shadow-2xl group-hover:scale-110 transition"><i data-lucide="play" class="text-white fill-current ml-1"></i></div>
                        </div>
                    </div>
                `;
            }
            document.getElementById('sol-detail-view').style.display = 'block';
            document.body.style.overflow = 'hidden';
            if (window.lucide) window.lucide.createIcons();
        }
        function closeSolDetailView() { document.getElementById('sol-detail-view').style.display = 'none'; document.body.style.overflow = 'auto'; }

        function openVideoOverlay(videoSrc) {
            const el = document.getElementById('video-play-element');
            const overlay = document.getElementById('video-play-overlay');
            if (!el || !overlay) return;
            el.src = videoSrc;
            overlay.style.display = 'flex';
            overlay.classList.remove('hidden');
            document.body.style.overflow = 'hidden';
            el.play().catch(function() {});
            if (window.lucide) window.lucide.createIcons();
        }
        function closeVideoOverlay() {
            const el = document.getElementById('video-play-element');
            const overlay = document.getElementById('video-play-overlay');
            if (el) { el.pause(); el.removeAttribute('src'); }
            if (overlay) { overlay.style.display = 'none'; overlay.classList.add('hidden'); }
            document.body.style.overflow = document.getElementById('sol-detail-view').style.display === 'block' ? 'hidden' : 'auto';
        }

        // Mobile Menu Functions
        function toggleMobileMenu() {
            const menu = document.getElementById('mobile-menu');
            const icon = document.getElementById('hamburger-icon');
            menu.classList.toggle('hidden');
            // Toggle icon between hamburger and X
            if (menu.classList.contains('hidden')) {
                icon.setAttribute('d', 'M4 6h16M4 12h16M4 18h16');
            } else {
                icon.setAttribute('d', 'M6 18L18 6M6 6l12 12');
            }
        }
        function closeMobileMenu() {
            const menu = document.getElementById('mobile-menu');
            const icon = document.getElementById('hamburger-icon');
            menu.classList.add('hidden');
            icon.setAttribute('d', 'M4 6h16M4 12h16M4 18h16');
        }

        function openModal(id) { document.getElementById(id).classList.add('modal-active'); document.body.style.overflow = 'hidden'; closeMobileMenu(); }
        function closeModal(id) { document.getElementById(id).classList.remove('modal-active'); document.body.style.overflow = 'auto'; }
        function showToast(msg, isError) { const t=document.createElement('div'); t.className='fixed bottom-10 left-1/2 -translate-x-1/2 px-10 py-4 text-white text-sm z-[300] shadow-2xl rounded-full font-bold animate-bounce ' + (isError ? 'bg-red-600' : 'bg-blue-600'); t.innerText=msg; document.body.appendChild(t); setTimeout(()=>t.remove(),3000); }

        /**
         * --- 预约演示多步表单 ---
         */
        let currentDemoStep = 1;
        let phoneVerified = false; // 手机号是否已验证
        var smsApi = (window.location.origin && (window.location.origin.includes("127.0.0.1") || window.location.origin.includes("localhost"))) ? "http://127.0.0.1:8000" : (window.location.origin || "");

        // 发送验证码
        async function handleOTP(btn) {
            var phone = document.getElementById('demo-phone').value.trim();
            if (!phone || phone.length !== 11) {
                showToast('请输入正确的11位手机号', true);
                return;
            }

            btn.disabled = true;
            btn.innerText = '发送中...';

            try {
                var res = await fetch(smsApi + '/api/sms/send-code', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({ phone: phone })
                });
                var data = await res.json();

                if (data.success) {
                    showToast('验证码已发送');
                    // 60秒倒计时
                    let c = 60;
                    const t = setInterval(() => {
                        btn.innerText = c + 's';
                        c--;
                        if (c < 0) {
                            clearInterval(t);
                            btn.disabled = false;
                            btn.innerText = '重新获取';
                        }
                    }, 1000);
                } else {
                    showToast(data.message || '发送失败', true);
                    btn.disabled = false;
                    btn.innerText = '获取验证码';
                }
            } catch (err) {
                console.error(err);
                showToast('网络错误，请稍后再试', true);
                btn.disabled = false;
                btn.innerText = '获取验证码';
            }
        }

        function goDemoStep(step) {
            currentDemoStep = step;
            document.getElementById('demo-step-1').classList.toggle('hidden', step !== 1);
            document.getElementById('demo-step-2').classList.toggle('hidden', step !== 2);
            document.getElementById('demo-step-3').classList.toggle('hidden', step !== 3);
        }

        async function validateAndGoDemoStep(fromStep, toStep) {
            if (fromStep === 1) {
                var phone = document.getElementById('demo-phone').value.trim();
                var otp = document.getElementById('demo-otp').value.trim();
                if (!phone || phone.length !== 11) { showToast('请输入正确的11位手机号', true); return; }
                if (!otp || otp.length !== 6) { showToast('请输入6位验证码', true); return; }

                // 验证验证码
                try {
                    var res = await fetch(smsApi + '/api/sms/verify-code', {
                        method: 'POST',
                        headers: { 'Content-Type': 'application/json' },
                        body: JSON.stringify({ phone: phone, code: otp })
                    });
                    var data = await res.json();

                    if (!data.verified) {
                        showToast(data.message || '验证码错误', true);
                        return;
                    }
                    phoneVerified = true;
                } catch (err) {
                    console.error(err);
                    showToast('验证失败，请稍后再试', true);
                    return;
                }
            }
            if (fromStep === 2) {
                var name = document.getElementById('demo-name').value.trim();
                var company = document.getElementById('demo-company').value.trim();
                if (!name) { showToast('请填写姓名', true); return; }
                if (!company) { showToast('请填写企业名称', true); return; }
            }
            goDemoStep(toStep);
        }

        const demoForm = document.getElementById('demoForm');
        if (demoForm) {
            demoForm.addEventListener('submit', async (e) => {
                e.preventDefault();
                const phone = document.getElementById('demo-phone').value.trim();
                const name = document.getElementById('demo-name').value.trim();
                const company = document.getElementById('demo-company').value.trim();

                if (!phone || !name || !company) {
                    showToast('请先完整填写手机号、姓名和企业名称');
                    return;
                }
                const products = Array.from(document.querySelectorAll('input[name="demo-product"]:checked')).map(i => i.value);
                const solutions = Array.from(document.querySelectorAll('input[name="demo-solution"]:checked')).map(i => i.value);
                if (!products.length) { showToast('请至少选择一项感兴趣的产品'); return; }
                if (!solutions.length) { showToast('请至少选择一项感兴趣的方案'); return; }

                const payload = {
                    phone,
                    name,
                    company,
                    product_interest: products.join(','),
                    solution_interest: solutions.join(','),
                };

                try {
                    const res = await fetch('/api/demo-requests', {
                        method: 'POST',
                        headers: { 'Content-Type': 'application/json' },
                        body: JSON.stringify(payload),
                    });

                    if (!res.ok) {
                        throw new Error('网络或服务异常');
                    }

                    await res.json();
                    showToast('预约提交成功，我们会尽快与您联系');
                    demoForm.reset();
                    goDemoStep(1);
                    closeModal('demo-modal');
                } catch (err) {
                    console.error(err);
                    showToast('提交失败，请稍后再试');
                }
            });
        }

        window.onload = async () => {
            if (window.lucide) window.lucide.createIcons();
            switchTab('building');

            // 动态加载 Banner
            await loadBanners();
            startCarousel();

            // 动态加载产品矩阵
            await loadProducts();
        };

        // 从 API 加载 Banner 数据
        async function loadBanners() {
            var bannerApi = (window.location.origin && (window.location.origin.includes("127.0.0.1") || window.location.origin.includes("localhost"))) ? "http://127.0.0.1:8000" : (window.location.origin || "");

            try {
                var res = await fetch(bannerApi + "/api/banners");
                if (!res.ok) return;

                var banners = await res.json();
                if (!banners || banners.length === 0) return;

                // 更新轮播内容
                var container = document.querySelector(".carousel-container");
                var indicatorsContainer = document.querySelector("#hero .absolute.bottom-10");

                if (!container || !indicatorsContainer) return;

                // 生成新的轮播 HTML
                var slidesHtml = banners.map(function(b, i) {
                    var utmContent = "hero_banner_" + b.id;
                    return '<div class="carousel-item' + (i === 0 ? ' active' : '') + ' h-full w-full flex items-center justify-center text-center px-6 md:px-12 lg:px-20 bg-contain bg-center bg-no-repeat" style="background-image: url(\'' + b.image_url + '\'); background-size: contain; background-position: center;">' +
                        '<div class="absolute inset-0 bg-black/30"></div>' +
                        '<div class="relative z-10 max-w-4xl">' +
                        '<h2 class="text-4xl md:text-6xl lg:text-7xl font-black mb-4 tracking-tight text-white">' + b.title + '</h2>' +
                        '<p class="text-base md:text-xl text-gray-200 mb-6 font-light">' + b.subtitle + '</p>' +
                        '<a href="' + b.link_url + '" target="_blank" rel="noopener noreferrer" data-utm-content="' + utmContent + '" class="inline-block ' + b.button_color + ' px-10 py-4 rounded-xl font-bold text-lg transition outbound-link">' + b.button_text + '</a>' +
                        '</div></div>';
                }).join('');

                container.innerHTML = slidesHtml;

                // 生成新的指示器
                var indicatorsHtml = banners.map(function(b, i) {
                    return '<button onclick="goToSlide(' + i + ')" class="slide-indicator' + (i === 0 ? ' active' : '') + ' w-8 h-1 bg-white/30 rounded-full hover:bg-white transition-all"></button>';
                }).join('');

                indicatorsContainer.innerHTML = indicatorsHtml;

                // 重新绑定变量
                slides = document.querySelectorAll(".carousel-item");
                indicators = document.querySelectorAll(".slide-indicator");

                // 重新绑定 UTM 追踪
                bindUtmTracking();

            } catch (err) {
                console.log("使用静态 Banner:", err);
            }
        }

        // 重新绑定 UTM 追踪（供 Banner 动态加载后调用）
        function bindUtmTracking() {
            var api = (window.location.origin && (window.location.origin.includes("127.0.0.1") || window.location.origin.includes("localhost"))) ? "http://127.0.0.1:8000" : (window.location.origin || "");
            var uvId = localStorage.getItem("kingfisher_uv_id") || "";

            function addUtmParams(url, utmContent) {
                var utmParams = {
                    utm_source: "kingfishers_cn",
                    utm_medium: "website",
                    utm_campaign: "homepage",
                    utm_content: utmContent,
                    utm_term: Date.now().toString()
                };
                var separator = url.indexOf("?") === -1 ? "?" : "&";
                var hashIndex = url.indexOf("#");
                var baseUrl = hashIndex === -1 ? url : url.slice(0, hashIndex);
                var hashPart = hashIndex === -1 ? "" : url.slice(hashIndex);
                var paramStr = Object.keys(utmParams).map(function(k) { return k + "=" + encodeURIComponent(utmParams[k]); }).join("&");
                return baseUrl + separator + paramStr + hashPart;
            }

            document.querySelectorAll(".carousel-container .outbound-link, #products .outbound-link").forEach(function(link) {
                // 避免重复绑定
                if (link.getAttribute("data-utm-bound")) return;
                link.setAttribute("data-utm-bound", "1");
                link.addEventListener("click", function(e) {
                    e.preventDefault();
                    var utmContent = link.getAttribute("data-utm-content") || "unknown";
                    var originalUrl = link.getAttribute("href");
                    var trackedUrl = addUtmParams(originalUrl, utmContent);
                    fetch(api + "/api/track", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ uv_id: uvId, referrer: document.referrer || "", page: "home", region: "outbound_click", label: utmContent, target_url: originalUrl }) }).catch(function() {});
                    window.open(trackedUrl, "_blank", "noopener,noreferrer");
                });
            });
        }

        // 从 API 加载产品矩阵数据
        async function loadProducts() {
            var api = (window.location.origin && (window.location.origin.includes("127.0.0.1") || window.location.origin.includes("localhost"))) ? "http://127.0.0.1:8000" : (window.location.origin || "");

            try {
                var res = await fetch(api + "/api/products");
                if (!res.ok) return;

                var products = await res.json();
                if (!products || products.length === 0) return;

                var container = document.querySelector("#products .grid");
                if (!container) return;

                var colorMap = {
                    blue: { border: "border-blue-500/10", bg: "", hover: "group-hover:bg-blue-600" },
                    purple: { border: "border-purple-500/20", bg: "bg-purple-500/5", hover: "group-hover:bg-purple-600" },
                    cyan: { border: "border-cyan-500/20", bg: "bg-cyan-500/5", hover: "group-hover:bg-cyan-600" },
                    green: { border: "border-green-500/10", bg: "", hover: "group-hover:bg-green-600" },
                    orange: { border: "border-orange-500/20", bg: "bg-orange-500/5", hover: "group-hover:bg-orange-600" },
                    red: { border: "border-red-500/20", bg: "bg-red-500/5", hover: "group-hover:bg-red-600" }
                };

                var html = products.map(function(p) {
                    var color = colorMap[p.theme_color] || colorMap.blue;
                    var utmContent = "product_" + (p.name || "").toLowerCase().replace(/\s+/g, "_");
                    return '<div id="product-' + p.id + '" class="glass-card rounded-3xl overflow-hidden group ' + color.border + ' ' + color.bg + ' flex flex-col">' +
                        '<div class="aspect-[4/3] flex-shrink-0 rounded-t-3xl overflow-hidden bg-[#0a0a12]">' +
                        '<img src="' + (p.icon_url || "") + '" alt="' + (p.name || "") + '" class="w-full h-full object-contain object-center">' +
                        '</div>' +
                        '<div class="p-8 flex-1 flex flex-col">' +
                        '<h4 class="text-2xl font-bold mb-2 text-white">' + (p.name || "") + '</h4>' +
                        '<p class="text-gray-400 text-sm mb-4">' + (p.subtitle || "") + '</p>' +
                        '<a href="' + (p.link_url || "#") + '" target="_blank" rel="noopener noreferrer" data-utm-content="' + utmContent + '" class="mt-auto w-full inline-block text-center py-3 rounded-xl bg-white/5 border border-white/10 font-bold text-gray-300 ' + color.hover + ' group-hover:text-white transition outbound-link">' + (p.button_text || "了解更多") + '</a>' +
                        '</div></div>';
                }).join("");

                container.innerHTML = html;

                // 重新绑定 UTM 追踪
                bindUtmTracking();

            } catch (err) {
                console.log("使用静态产品数据:", err);
            }
        }
    </script>
    <script>
        (function() {
            var uvKey = "kingfisher_uv_id";
            if (!localStorage.getItem(uvKey)) localStorage.setItem(uvKey, "uv_" + Date.now() + "_" + Math.random().toString(36).slice(2, 12));
            var uvId = localStorage.getItem(uvKey);
            var api = (window.location.origin && (window.location.origin.includes("127.0.0.1") || window.location.origin.includes("localhost"))) ? "http://127.0.0.1:8000" : (window.location.origin || "");
            fetch(api + "/api/track", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ uv_id: uvId, referrer: document.referrer || "", page: "home", region: "page" }) }).catch(function() {});
            document.querySelectorAll("[data-region]").forEach(function(el) { el.addEventListener("click", function() { var label = (el.getAttribute("data-label") || (el.textContent || "").trim()).slice(0, 80); fetch(api + "/api/track", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ uv_id: uvId, referrer: document.referrer || "", page: "home", region: el.getAttribute("data-region"), label: label }) }).catch(function() {}); }); });

            // UTM 追踪系统 - 拦截外链点击，添加 UTM 参数
            function addUtmParams(url, utmContent) {
                var utmParams = {
                    utm_source: "kingfishers_cn",
                    utm_medium: "website",
                    utm_campaign: "homepage",
                    utm_content: utmContent,
                    utm_term: Date.now().toString()
                };
                var separator = url.indexOf("?") === -1 ? "?" : "&";
                var hashIndex = url.indexOf("#");
                var baseUrl = hashIndex === -1 ? url : url.slice(0, hashIndex);
                var hashPart = hashIndex === -1 ? "" : url.slice(hashIndex);
                var paramStr = Object.keys(utmParams).map(function(k) { return k + "=" + encodeURIComponent(utmParams[k]); }).join("&");
                return baseUrl + separator + paramStr + hashPart;
            }
            document.querySelectorAll(".outbound-link").forEach(function(link) {
                link.addEventListener("click", function(e) {
                    e.preventDefault();
                    var utmContent = link.getAttribute("data-utm-content") || "unknown";
                    var originalUrl = link.getAttribute("href");
                    var trackedUrl = addUtmParams(originalUrl, utmContent);
                    // 记录外链点击事件
                    fetch(api + "/api/track", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ uv_id: uvId, referrer: document.referrer || "", page: "home", region: "outbound_click", label: utmContent, target_url: originalUrl }) }).catch(function() {});
                    // 跳转到带 UTM 参数的 URL
                    window.open(trackedUrl, "_blank", "noopener,noreferrer");
                });
            });
        })();
    </script>
</body>
</html>