<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta name="baidu-site-verification" content="codeva-bc7kD7BxwH" />
  <meta charset="UTF-8">
  <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
  <meta http-equiv="Pragma" content="no-cache">
  <meta http-equiv="Expires" content="0">
  <script src="/i18n.js?v=20"></script>
    <script>window.CACHE_VERSION = "20250601v1";</script>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>洛克密封 | IP68防水电缆管道密封系统专业制造商 - 苏州宜庆电子科技</title>
  <meta name="keywords" content="电缆密封,管道密封,洛克密封,电缆管道密封系统,苏州宜庆电子科技有限公司">
  <meta property="og:title" content="洛克密封 | IP68防水电缆管道密封系统专业制造商">
<meta property="og:description" content="专注电缆密封技术20年，提供IP68防水多根/单根电缆密封系统、机柜管道封堵、电磁屏蔽密封、地下管廊封堵等全系列产品。">
<meta property="og:type" content="website">
<meta property="og:url" content="https://www.luokeseal.com">
<meta property="og:image" content="https://www.luokeseal.com/images/logo-reg.png">
<meta property="og:site_name" content="洛克密封">
<meta name="twitter:card" content="summary_large_image">
<link rel="canonical" href="https://www.luokeseal.com/">
<link rel="alternate" hreflang="zh-CN" href="https://www.luokeseal.com/">
<link rel="alternate" hreflang="en" href="https://www.luokeseal.com/?lang=en">
  <meta name="description" content="洛克密封是苏州宜庆电子科技有限公司旗下品牌，专业提供电线电缆管道密封系统解决方案。电话：0512-63226739">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css">
  <style>
    :root {
      --primary: #c8956c;
      --primary-dark: #a67c52;
      --bg: #060e1a;
      --bg-light: #0a1628;
      --bg-card: rgba(255,255,255,0.03);
      --text: #e2e8f0;
      --text-muted: #94a3b8;
      --text-dim: #64748b;
      --border: rgba(200,149,108,0.15);
    }
    * { margin: 0; padding: 0; box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      font-family: 'Noto Sans SC', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
      background: var(--bg);
      color: var(--text);
      line-height: 1.6;
      overflow-x: hidden;
    }
    a { text-decoration: none; color: inherit; }
    
    /* ===== Navigation ===== */
    .nav {
      position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
      background: rgba(6,14,26,0.95);
      backdrop-filter: blur(16px);
      border-bottom: 1px solid var(--border);
    }
    .nav-wrap {
      max-width: 1600px; margin: 0 auto; padding: 0 24px;
      display: flex; align-items: center; justify-content: space-between; height: 56px;
    }
    .nav-left { display: flex; align-items: center; gap: 20px; }
    .nav-logo {
      display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 700; color: var(--primary);
    }
    .nav-logo-reg.png { width: 30px; height: 30px; }
    .nav-company-name { font-size: 12px; color: var(--text-dim); white-space: nowrap; }
    .nav-links { display: flex; gap: 2px; align-items: center; }
    .nav-links a {
      padding: 6px 14px; border-radius: 6px; font-size: 13px; font-weight: 500;
      color: var(--text-muted); transition: all 0.3s;
    }
    .nav-links a:hover, .nav-links a.active { color: var(--primary); background: rgba(200,149,108,0.08); }
    .nav-dropdown { position: relative; }
    .nav-dropdown-toggle { display: flex; align-items: center; }
    .nav-dropdown-menu {
      position: absolute; top: 100%; left: 0;
      min-width: 180px; padding: 6px;
      background: rgba(8,16,30,0.98);
      backdrop-filter: blur(16px);
      border: 1px solid rgba(200,149,108,0.2);
      border-radius: 10px;
      box-shadow: 0 16px 48px rgba(0,0,0,0.5);
      display: none;
      z-index: 1001;
      margin-top: 4px;
    }
    .nav-dropdown:hover .nav-dropdown-menu { display: block; }
    .nav-dropdown:hover .nav-dropdown-toggle { color: var(--primary); background: rgba(200,149,108,0.08); }
    .nav-dropdown-menu a {
      display: block; padding: 8px 14px; border-radius: 6px;
      font-size: 13px; color: var(--text-muted); white-space: nowrap;
      transition: all 0.2s;
    }
    .nav-dropdown-menu a:hover { color: var(--primary); background: rgba(200,149,108,0.1); }
    .nav-dropdown svg { transition: transform 0.3s; }
    .nav-dropdown:hover svg { transform: rotate(180deg); }

    .nav-right { display: flex; align-items: center; gap: 12px; }
    .nav-phone {
      display: flex; align-items: center; gap: 5px; color: var(--primary);
      font-size: 13px; font-weight: 600;
    }
    .nav-wechat { color: #07c160;
      width: 32px; height: 32px; border-radius: 6px; overflow: hidden; cursor: pointer;
      border: 1px solid var(--border); transition: all 0.3s; flex-shrink: 0;
    }
    .nav-wechat:hover { border-color: var(--primary); transform: scale(1.1); }
    .nav-wechat img { width: 100%; height: 100%; object-fit: cover; }
    .lang-btn {
      padding: 4px 10px; border: 1px solid var(--border); border-radius: 4px;
      background: transparent; color: var(--primary); font-size: 12px; cursor: pointer;
      transition: all 0.3s;
    }
    .lang-btn:hover { background: rgba(200,149,108,0.12); }
    .mobile-menu-btn { display: none; background: none; border: none; color: var(--primary); cursor: pointer; }
    
    /* ===== Hero Section ===== */
    .hero {
      padding-top: 0;
      background: transparent;
      position: relative; overflow: hidden;
    }
    .hero::before {
      content: ''; position: absolute; top: -30%; left: -10%; width: 50%; height: 80%;
      background: radial-gradient(ellipse, rgba(200,149,108,0.06) 0%, transparent 70%);
      animation: float 8s ease-in-out infinite; pointer-events: none;
    }
    @keyframes float {
      0%,100% { transform: translate(0,0); } 50% { transform: translate(20px,-15px); }
    }
    
    /* Hero main content */
    .hero-main {
      max-width: 1600px; margin: 0 auto; padding: 5px 40px 0px;
      display: grid; grid-template-columns: 75% 25%; gap: 30px; margin-top: -20px;
      align-items: center; min-height: 620px;
    }
    
    /* Left: Large image with golden border */
    .hero-img-wrap {
      position: relative; display: flex; align-items: center; justify-content: center;
      width: 100%; max-width: 1140px; margin: 0 auto; padding-top: 10px;
    }

    .hero-img-reflect {
      position: absolute;
      bottom: -10px;
      left: 50%;
      transform: translateX(-50%) scaleY(-1);
      width: 75%;
      height: 35px;
      overflow: hidden;
      opacity: 0.25;
      filter: blur(6px);
      mask-image: linear-gradient(to bottom, rgba(0,0,0,0.6) 0%, transparent 100%);
      -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0.6) 0%, transparent 100%);
      pointer-events: none;
    }
    .hero-img-reflect img {
      width: 100%;
      height: auto;
      object-fit: contain;
    }
        .hero-img-border {
      width: 1140px; height: 760px;
      
      background: transparent;
      border: none;
      background: radial-gradient(ellipse at center, rgba(200,60,60,0.12) 0%, rgba(200,50,50,0.06) 45%, transparent 75%);
      display: flex; align-items: center; justify-content: center;
      position: relative; cursor: default;
    }
    .hero-img-border img {
      width: 95%; height: 95%;
      object-fit: contain; 
      filter: drop-shadow(0 6px 20px rgba(0,0,0,0.4)) ;
      transition: transform 0.4s ease;
    }
    
    /* Right: Content */
    .hero-content { position: relative; z-index: 2; padding-right: 20px; }
    .hero-cat-label {
      display: inline-flex; align-items: center; gap: 6px; padding: 5px 16px;
      background: rgba(200,149,108,0.1); border: 1px solid rgba(200,149,108,0.2);
      border-radius: 20px; font-size: 13px; color: var(--primary); margin-bottom: 18px;
    }
    .hero-cat-label .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--primary); animation: pulse 2s infinite; }
    @keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.3; } }
    .hero-title { font-size: 42px; font-weight: 700; color: #fff; line-height: 1.25; margin-bottom: 16px; }
    .hero-title span { color: var(--primary); }
    .hero-desc { font-size: 16px; color: var(--text-muted); line-height: 1.8; margin-bottom: 24px; max-width: 520px; }
    
    /* Stats */
    .hero-stats { display: flex; gap: 30px; margin-bottom: 28px; }
    .hero-stat { text-align: center; }
    .hero-stat-num { font-size: 28px; font-weight: 700; color: var(--primary); display: block; }
    .hero-stat-label { font-size: 12px; color: var(--text-dim); margin-top: 2px; }
    
    /* Buttons */
    .hero-btns { display: flex; gap: 14px; flex-wrap: wrap; }
    .btn-primary {
      padding: 13px 32px; background: var(--primary); color: #0a1628; font-weight: 600;
      border-radius: 8px; border: none; cursor: pointer; font-size: 14px; transition: all 0.3s;
      animation: btnFlash1 3s ease-in-out infinite;
    }
    .btn-primary:hover { background: var(--primary-dark); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(200,149,108,0.25); }
    .btn-outline {
      padding: 13px 32px; background: transparent; color: var(--primary); font-weight: 600;
      border-radius: 8px; border: 1px solid rgba(200,149,108,0.35); cursor: pointer; font-size: 14px; transition: all 0.3s;
      animation: btnFlash2 4s ease-in-out infinite;
    }
    .btn-outline:hover { background: rgba(200,149,108,0.08); }
    @keyframes btnFlash1 {
      0%,100% { box-shadow: 0 0 0 rgba(200,149,108,0); } 50% { box-shadow: 0 0 15px rgba(200,149,108,0.4); }
    }
    @keyframes btnFlash2 {
      0%,100% { box-shadow: 0 0 0 rgba(200,149,108,0); } 50% { box-shadow: 0 0 10px rgba(200,149,108,0.25); }
    }
    
    /* ===== Thumbnail Carousel (16 items) ===== */
    .thumb-section {
      max-width: 1600px; margin: 0 auto; padding: 5px 40px 10px;
      position: relative; z-index: 2;
    }
    .thumb-track-wrap { overflow: hidden; position: relative; }
    .thumb-track {
      display: flex; gap: 10px;
      width: max-content;
      will-change: transform;
    }
    .thumb-item {
      width: 180px; height: 120px; flex-shrink: 0;
      border-radius: 10px; overflow: hidden;
      border: 3px solid rgba(200,149,108,0.5);
      background: #1a1a2e; box-shadow: 0 0 40px rgba(200,149,108,0.15), inset 0 0 40px rgba(200,149,108,0.05);
      cursor: pointer; transition: all 0.35s;
      display: flex; align-items: center; justify-content: center;
    }
    .thumb-item:hover, .thumb-item.active {
      border-color: var(--primary);
      transform: scale(1.08);
      box-shadow: 0 4px 16px rgba(200,149,108,0.3);
    }
    .thumb-item img {
      width: 100%; height: 100%;
      object-fit: cover;
      display: block;
    }
    .thumb-item .thumb-name {
      position: absolute; bottom: 0; left: 0; right: 0;
      background: rgba(6,14,26,0.85); color: var(--primary);
      font-size: 14px; padding: 3px 4px; text-align: center;
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
      opacity: 0; transition: opacity 0.3s;
    }
    .thumb-item:hover .thumb-name { opacity: 1; }
    .thumb-item { position: relative; }
    
    /* ===== Section Dividers ===== */
    .section-divider {
      height: 1px; background: linear-gradient(90deg, transparent, rgba(200,149,108,0.2), transparent);
      max-width: 1600px; margin: 0 auto;
    }
    
    /* ===== Category Pills ===== */
    .cat-bar {
      background: linear-gradient(180deg, var(--bg-light) 0%, var(--bg) 100%);
      padding: 32px 24px 20px;
    }
    .cat-bar-wrap { max-width: 1200px; margin: 0 auto; }
    .cat-pills { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
    .cat-pill {
      padding: 10px 22px; border-radius: 24px; border: 1px solid rgba(200,149,108,0.18);
      background: rgba(255,255,255,0.02); color: var(--text-muted); font-size: 13px;
      cursor: pointer; transition: all 0.3s; font-weight: 500; white-space: nowrap;
    }
    .cat-pill:hover { border-color: var(--primary); color: var(--primary); background: rgba(200,149,108,0.06); }
    .cat-pill.active { background: var(--primary); color: #0a1628; border-color: var(--primary); font-weight: 600; }
    
    /* ===== Products Section ===== */
    .section { padding: 60px 24px; }
    .section-wrap { max-width: 1200px; margin: 0 auto; }
    .section-head { text-align: center; margin-bottom: 40px; }
    .section-label {
      display: inline-block; padding: 4px 14px; background: rgba(200,149,108,0.08);
      border: 1px solid rgba(200,149,108,0.15); border-radius: 20px;
      font-size: 12px; color: var(--primary); margin-bottom: 12px;
    }
    .section-title { font-size: 28px; font-weight: 700; color: #fff; margin-bottom: 10px; }
    .section-subtitle { font-size: 15px; color: var(--text-muted); }
    
    .products-grid {
      display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 20px;
    }
    .product-card {
      background: var(--bg-card); border: 1px solid rgba(200,149,108,0.08);
      border-radius: 14px; overflow: hidden; transition: all 0.35s; cursor: pointer;
    }
    .product-card:hover {
      border-color: var(--border); transform: translateY(-6px);
      box-shadow: 0 16px 40px rgba(0,0,0,0.35);
    }
    .product-img { aspect-ratio: 4/3; overflow: hidden; background: transparent; border: 3px solid rgba(200,149,108,0.5); box-shadow: 0 0 40px rgba(200,149,108,0.15), inset 0 0 40px rgba(200,149,108,0.05); position: relative; min-height: 180px; }
    .product-img img { width: 100%; height: 100%; object-fit: contain;  display: block; }
    .product-card:hover .product-img img { transform: scale(1.08); }
    .product-badge {
      position: absolute; top: 10px; left: 10px; padding: 3px 10px;
      background: rgba(200,149,108,0.9); color: #0a1628; font-size: 11px;
      border-radius: 4px; font-weight: 600;
    }
    .product-body { padding: 18px; }
    .product-name { font-size: 15px; font-weight: 600; color: #fff; margin-bottom: 4px; }
    .product-model { font-size: 12px; color: var(--primary); margin-bottom: 8px; }
    .product-desc { font-size: 13px; color: var(--text-dim); line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
    .product-footer { padding: 0 18px 18px; display: flex; gap: 8px; }
    .btn-sm { padding: 6px 14px; font-size: 12px; border-radius: 6px; }
    
    /* ===== Marquee ===== */
    .marquee-section { padding: 40px 0; overflow: hidden; border-top: 1px solid rgba(200,149,108,0.08); border-bottom: 1px solid rgba(200,149,108,0.08); }
    .marquee-track { display: flex; animation: marquee 40s linear infinite; width: max-content; }
    .marquee-track:hover { animation-play-state: paused; }
    @keyframes marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
    .marquee-item {
      display: flex; align-items: center; gap: 10px; padding: 12px 28px;
      border-right: 1px solid rgba(200,149,108,0.1); white-space: nowrap;
    }
    .marquee-item svg { width: 18px; height: 18px; color: var(--primary); flex-shrink: 0; }
    .marquee-item span { font-size: 13px; color: var(--text-muted); }
    
    /* ===== Advantages ===== */
    .adv-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
    .adv-card {
      background: var(--bg-card); border: 1px solid rgba(200,149,108,0.08);
      border-radius: 14px; padding: 28px; transition: all 0.3s;
    }
    .adv-card:hover { border-color: var(--border); transform: translateY(-4px); box-shadow: 0 12px 32px rgba(0,0,0,0.3); }
    .adv-icon {
      width: 44px; height: 44px; border-radius: 12px; background: rgba(200,149,108,0.1);
      display: flex; align-items: center; justify-content: center; font-size: 20px; margin-bottom: 16px;
    }
    .adv-card h3 { font-size: 16px; color: #fff; margin-bottom: 8px; }
    .adv-card p { font-size: 13px; color: var(--text-dim); line-height: 1.7; }
    
    /* ===== Footer ===== */
    .footer {
      background: var(--bg-light); border-top: 1px solid rgba(200,149,108,0.1);
      padding: 40px 24px 30px;
    }
    .footer-wrap { max-width: 1200px; margin: 0 auto; }
    .footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 40px; margin-bottom: 32px; }
    .footer-brand { font-size: 18px; font-weight: 700; color: var(--primary); margin-bottom: 12px; }
    .footer-desc { font-size: 13px; color: var(--text-dim); line-height: 1.8; margin-bottom: 16px; }
    .footer-title { font-size: 14px; font-weight: 600; color: #fff; margin-bottom: 16px; }
    .footer-links { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
    .footer-links a { font-size: 13px; color: var(--text-dim); transition: color 0.3s; }
    .footer-links a:hover { color: var(--primary); }
    .footer-contact { display: flex; flex-direction: column; gap: 10px; }
    .footer-contact-item { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; color: var(--text-dim); }
    .footer-contact-item svg { width: 16px; height: 16px; color: var(--primary); flex-shrink: 0; margin-top: 2px; }
    .footer-bottom {
      border-top: 1px solid rgba(200,149,108,0.08); padding-top: 20px;
      display: flex; justify-content: space-between; align-items: center;
    }
    .footer-bottom p { font-size: 12px; color: var(--text-dim); }
    .footer-social { display: flex; gap: 12px; }
    .footer-social a { width: 32px; height: 32px; border-radius: 8px; background: rgba(200,149,108,0.1); display: flex; align-items: center; justify-content: center; transition: all 0.3s; }
    .footer-social a:hover { background: var(--primary); }
    .footer-social a:hover svg { color: #0a1628; }
    .footer-social svg { width: 16px; height: 16px; color: var(--primary); }
    
    /* ===== Skeleton Loading ===== */
    .skeleton { background: linear-gradient(90deg, rgba(255,255,255,0.03) 25%, rgba(255,255,255,0.06) 50%, rgba(255,255,255,0.03) 75%); background-size: 200% 100%; animation: skeleton 1.5s infinite; border-radius: 8px; }
    @keyframes skeleton { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
    
    /* ===== Toast ===== */
    .toast {
      position: fixed; bottom: 30px; left: 50%; transform: translateX(-50%) translateY(100px);
      padding: 12px 24px; background: var(--primary); color: #0a1628; font-weight: 600;
      border-radius: 8px; font-size: 14px; z-index: 9999; opacity: 0; transition: all 0.4s;
    }
    .toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
    
    /* ===== Wechat QR Modal ===== */
    .modal-overlay {
      position: fixed; top: 0; left: 0; right: 0; bottom: 0;
      background: rgba(0,0,0,0.7); z-index: 10000;
      display: flex; align-items: center; justify-content: center;
      opacity: 0; pointer-events: none; transition: opacity 0.3s;
    }
    .modal-overlay.active { opacity: 1; pointer-events: all; }
    .modal-content {
      background: var(--bg-light); border: 1px solid var(--border);
      border-radius: 16px; padding: 30px; text-align: center;
      max-width: 400px; position: relative;
    }
    .modal-close {
      position: absolute; top: 10px; right: 14px;
      background: none; border: none; color: var(--text-muted);
      font-size: 24px; cursor: pointer;
    }
    .modal-content img { max-width: 300px; border-radius: 8px; }
    .modal-content p { margin-top: 12px; color: var(--text-muted); font-size: 14px; }
    
    /* ===== Image Zoom Modal ===== */
    .zoom-overlay {
      position: fixed; top: 0; left: 0; right: 0; bottom: 0;
      background: rgba(0,0,0,0.85); z-index: 10001;
      display: flex; align-items: center; justify-content: center;
      opacity: 0; pointer-events: none; transition: opacity 0.3s;
    }
    .zoom-overlay.active { opacity: 1; pointer-events: all; }
    .zoom-overlay img { max-width: 85vw; max-height: 85vh; object-fit: contain;  border-radius: 8px; }
    .zoom-close {
      position: absolute; top: 20px; right: 30px;
      background: none; border: none; color: #fff;
      font-size: 42px; cursor: pointer;
    }
    
    /* ===== Responsive ===== */
    @media (max-width: 1100px) {
      .hero-main { grid-template-columns: 75% 25%; gap: 30px; }
      .hero-img-border { width: 400px; height: 400px; background: transparent; }
    }
    @media (max-width: 768px) {
      .nav-links { display: none; position: absolute; top: 56px; left: 0; right: 0; background: rgba(6,14,26,0.98); flex-direction: column; padding: 16px; gap: 4px; }
      .nav-links.open { display: flex; }
      .nav-links a { padding: 10px 16px; }
      .mobile-menu-btn { display: block; }
      .nav-company-name { display: none; }
      .nav-phone { display: none; }
      .nav-wechat { color: #07c160; width: 24px; height: 24px; }
      .nav-right { gap: 6px; }

      .contact-grid { grid-template-columns: 1fr !important; }
      /* Mobile dropdown: show expanded */
      .nav-dropdown { width: 100%; }
      .nav-dropdown-toggle svg { display: none; }
      .nav-dropdown-menu { position: static; display: block !important; background: transparent; border: none; box-shadow: none; padding: 0 0 0 16px; margin-top: 0; min-width: auto; }
      .nav-dropdown-menu a { padding: 8px 14px; font-size: 13px; color: var(--text-dim); border-left: 2px solid rgba(200,149,108,0.15); border-radius: 0; margin-bottom: 2px; }
      .nav-dropdown-menu a:hover { color: var(--primary); background: rgba(200,149,108,0.06); }
      .thumb-item { width: 120px; height: 80px; }
      .thumb-section { padding: 5px 20px 8px; }
      .hero-main { grid-template-columns: 1fr; gap: 24px; padding: 50px 20px 15px; min-height: auto; align-items: center; justify-items: center; }
      .hero-img-wrap { max-width: 100%; padding: 20px 10px 0; }
      .hero-img-border { width: 100%; max-width: 420px; height: auto; aspect-ratio: 3/2; margin: 0 auto; background: radial-gradient(ellipse at center, rgba(200,60,60,0.15) 0%, rgba(200,50,50,0.08) 45%, transparent 75%); border: none; box-shadow: none; }

      .hero-img-reflect { width: 70%; height: 35px; bottom: -20px; opacity: 0.2; filter: blur(4px); }
      .hero-img-border img { width: 95%; height: 95%; mix-blend-mode: normal; filter: drop-shadow(0 4px 12px rgba(0,0,0,0.3)); }
      .hero-title { font-size: 22px; }
      .hero-stats { gap: 16px; }
      .hero-stat-num { font-size: 20px; }
      .products-grid { grid-template-columns: 1fr; }
      .product-img { min-height: 200px; height: auto; }
      .product-img img { width: 100%; height: 100%; object-fit: contain;  }
      .adv-grid { grid-template-columns: 1fr; }
      .footer-grid { grid-template-columns: 1fr; gap: 24px; }
      .footer-bottom { flex-direction: column; gap: 12px; text-align: center; }
      .section { padding: 40px 16px; }
      .section-title { font-size: 20px; }
      .section-subtitle { font-size: 13px; }
      .thumb-item { width: 120px; height: 80px; }
      .thumb-item img { max-width: 100%; max-height: 100%; }
      .cat-pill { padding: 8px 16px; font-size: 12px; }
      .btn-primary, .btn-outline { padding: 10px 20px; font-size: 13px; }
      .hero-desc { font-size: 13px; }
    }
  .dl-categories{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:32px;justify-content:center}
.dl-cat-btn{padding:10px 20px;border:1px solid rgba(255,255,255,0.06);border-radius:8px;background:rgba(255,255,255,0.05);color:#e2e8f0;cursor:pointer;transition:all 0.3s;font-size:14px;font-family:inherit}
.dl-cat-btn:hover,.dl-cat-btn.active{background:#c8956c;color:#fff;border-color:#c8956c}
    a.dl-cat-btn{display:inline-block;text-decoration:none;text-align:center}
    /* Carousel dots */
    .hero-dots { display: flex; justify-content: center; gap: 12px; margin-top: 25px; padding: 10px 0; }
    .hero-dot { width: 14px; height: 14px; border-radius: 50%; background: rgba(255,255,255,0.6); border: 2px solid rgba(255,255,255,0.8); box-shadow: 0 0 8px rgba(255,255,255,0.3); cursor: pointer; transition: all 0.3s; }
    .hero-dot.active { background: #c8956c; border-color: #f0c850; box-shadow: 0 0 15px rgba(200,149,108,0.6); transform: scale(1.3); }
    .hero-dot:hover { background: rgba(255,255,255,0.9); box-shadow: 0 0 12px rgba(255,255,255,0.5); transform: scale(1.15); }

    /* Laptop responsive - 1366x768 */
    @media (max-width: 1440px) {
      .hero-section {
        min-height: auto;
        padding: 60px 0 30px;
      }
      .hero-main-img {
        max-width: 480px;
        max-height: 360px;
      }
      .hero-title {
        font-size: 28px;
      }
      .hero-stats {
        gap: 30px;
      }
    }
    @media (max-width: 1366px) {
      .hero-section {
        padding: 40px 0 20px;
      }
      .hero-container {
        gap: 20px;
      }
      .hero-main-img {
        max-width: 420px;
        max-height: 320px;
      }
      .hero-title {
        font-size: 24px;
      }
      .hero-stats {
        gap: 20px;
        margin: 20px 0;
      }
      .hero-stat-num {
        font-size: 24px;
      }
      .thumb-item {
        width: 150px;
        height: 100px;
      }
      .hero-dots {
        margin-top: 15px;
      }
    }

      /* 导航栏下拉菜单 */

</style>
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@graph": [
    {
      "@type": "Organization",
      "name": "苏州宜庆电子科技有限公司",
      "alternateName": "洛克密封",
      "url": "https://www.luokeseal.com",
      "logo": "https://www.luokeseal.com/images/logo-reg.png",
      "description": "专注电线电缆管道密封系统20年，提供IP68防水多根/单根电缆密封系统、机柜管道封堵、电磁屏蔽密封、地下管廊封堵等全系列产品。",
      "foundingDate": "2006",
      "contactPoint": {
        "@type": "ContactPoint",
        "telephone": "+86-512-63226739",
        "contactType": "sales",
        "areaServed": ["CN", "US", "EU", "ASIA"],
        "availableLanguage": ["Chinese", "English"]
      },
      "address": {
        "@type": "PostalAddress",
        "addressLocality": "苏州",
        "addressRegion": "江苏",
        "addressCountry": "CN"
      },
      "sameAs": [
        "https://szyiqing.1688.com"
      ]
    },
    {
      "@type": "WebSite",
      "url": "https://www.luokeseal.com",
      "name": "洛克密封 - 电缆管道密封系统专业制造商",
      "potentialAction": {
        "@type": "SearchAction",
        "target": "https://www.luokeseal.com/product.html?search={search_term_string}",
        "query-input": "required name=search_term_string"
      }
    }
  ]
}
</script>

<script>
// 百度主动推送
(function(){
    var bp = document.createElement('script');
    var curProtocol = window.location.protocol.split(':')[0];
    if (curProtocol === 'https') {
        bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';
    } else {
        bp.src = 'http://push.zhanzhang.baidu.com/push.js';
    }
    var s = document.getElementsByTagName("script")[0];
    s.parentNode.insertBefore(bp, s);
})();
</script>
</head>
<body>

  <!-- ===== Navigation ===== -->
  <nav class="nav">
    <div class="nav-wrap">
      <div class="nav-left">
        <a href="/" class="nav-logo">
          <img src="/images/logo-reg.png" alt="洛克密封" style="width:36px;height:36px;border-radius:50%;">
          <span data-i18n="brand">洛克密封</span>
        </a>
        <span class="nav-company-name" data-i18n="company_name">苏州宜庆电子科技有限公司旗下注册品牌</span>
      </div>
      <div class="nav-links" id="navLinks">
        <a href="/" class="active" data-i18n="nav_home">首页</a>
        <div class="nav-dropdown">
          <a href="/product.html" data-i18n="nav_products" class="nav-dropdown-toggle">产品中心 <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" style="display:inline-block;vertical-align:middle;margin-left:2px;opacity:0.6"><polyline points="6 9 12 15 18 9"/></svg></a>
          <div class="nav-dropdown-menu" id="navProductDropdown">
            <a href="/product.html">全部产品</a>
            <a href="/product.html?cat=1">多根电缆密封系统</a>
            <a href="/product.html?cat=2">YS型框架</a>
            <a href="/product.html?cat=3">YSF型框架</a>
            <a href="/product.html?cat=4">YB型组合框架</a>
            <a href="/product.html?cat=5">可变径模块-YRM</a>
            <a href="/product.html?cat=7">单根电缆密封系统</a>
            <a href="/product.html?cat=9">机柜与特殊系统</a>
          </div>
        </div>
        <a href="/case.html" data-i18n="nav_cases">工程案例</a>
        <div class="nav-dropdown">
          <a href="/about.html" data-i18n="nav_about" class="nav-dropdown-toggle">关于我们 <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" style="display:inline-block;vertical-align:middle;margin-left:2px;opacity:0.6"><polyline points="6 9 12 15 18 9"/></svg></a>
          <div class="nav-dropdown-menu" id="navAboutDropdown">
            <a href="/about.html">公司简介</a>
            <a href="/quality.html">品质管控</a>
            <a href="/company-photos.html">公司相册</a>
          </div>
        </div>
        <div class="nav-dropdown">
          <a href="/news.html" data-i18n="nav_news" class="nav-dropdown-toggle">新闻中心 <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" style="display:inline-block;vertical-align:middle;margin-left:2px;opacity:0.6"><polyline points="6 9 12 15 18 9"/></svg></a>
          <div class="nav-dropdown-menu" id="navNewsDropdown">
            <a href="/news.html">全部新闻</a>
            <a href="/news.html?cat=1">公司动态</a>
            <a href="/news.html?cat=2">行业资讯</a>
            <a href="/news.html?cat=3">技术文章</a>
          </div>
        </div>
        <div class="nav-dropdown">
          <a href="/download.html" data-i18n="nav_download" class="nav-dropdown-toggle">下载中心 <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" style="display:inline-block;vertical-align:middle;margin-left:2px;opacity:0.6"><polyline points="6 9 12 15 18 9"/></svg></a>
          <div class="nav-dropdown-menu" id="navDlDropdown">
            <a href="/download.html">全部文件</a>
            <a href="/download.html?cat=1">产品目录</a>
            <a href="/download.html?cat=2">安装指南</a>
            <a href="/download.html?cat=3">3D图纸</a>
            <a href="/download.html?cat=4">证书下载</a>
          </div>
        </div>
        <a href="/company-photos.html" data-i18n="nav_album">公司相册</a>
        <div class="nav-dropdown">
          <a href="#footerLinks" data-i18n="nav_links" class="nav-dropdown-toggle">友情链接 <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" style="display:inline-block;vertical-align:middle;margin-left:2px;opacity:0.6"><polyline points="6 9 12 15 18 9"/></svg></a>
          <div class="nav-dropdown-menu" id="navLinksDropdown">
            <a href="https://www.luokeseal.com" target="_blank">洛克密封官网</a>
            <a href="https://www.china-luoke.com" target="_blank">中文站</a>
            <a href="https://szyiqing.1688.com" target="_blank">阿里巴巴</a>
          </div>
        </div>
        <a href="/agent.html" data-i18n="nav_agent">代理定制</a>
        <a href="/contact.html" data-i18n="nav_contact">联系我们</a>
      </div>
      <div class="nav-right">
        <div class="nav-phone">
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 16.92v3a2 2 0 01-2.18 2 19.79 19.79 0 01-8.63-3.07 19.5 19.5 0 01-6-6 19.79 19.79 0 01-3.07-8.67A2 2 0 014.11 2h3a2 2 0 012 1.72c.13.96.38 1.9.7 2.81a2 2 0 01-.45 2.11L8.09 9.91a16 16 0 006 6l1.27-1.27a2 2 0 012.11-.45c.91.32 1.85.57 2.81.7A2 2 0 0122 16.92z"/></svg>
          <span data-i18n="phone">0512-63226739</span>
        </div>
        <div class="nav-wechat" id="navWechat" onclick="showWechatQR()" title="微信咨询">
          <svg viewBox="0 0 24 24" fill="#07c160" style="width:20px;height:20px"><path d="M8.691 2.188C3.891 2.188 0 5.476 0 9.53c0 2.212 1.17 4.203 3.002 5.55a.59.59 0 0 1 .213.665l-.39 1.48c-.019.07-.048.141-.048.213 0 .163.13.295.29.295a.326.326 0 0 0 .167-.054l1.903-1.114a.864.864 0 0 1 .717-.098 10.16 10.16 0 0 0 2.837.403c.276 0 .543-.027.811-.05-.857-2.578.157-4.972 1.932-6.446 1.703-1.415 3.882-1.98 5.853-1.838-.576-3.583-4.196-6.348-8.596-6.348zM5.785 5.991c.642 0 1.162.529 1.162 1.18a1.17 1.17 0 0 1-1.162 1.178A1.17 1.17 0 0 1 4.623 7.17c0-.651.52-1.18 1.162-1.18zm5.813 0c.642 0 1.162.529 1.162 1.18a1.17 1.17 0 0 1-1.162 1.178 1.17 1.17 0 0 1-1.162-1.178c0-.651.52-1.18 1.162-1.18zm5.34 2.867c-1.797-.052-3.746.512-5.28 1.786-1.72 1.428-2.687 3.72-1.78 6.22.942 2.453 3.666 4.229 6.884 4.229.826 0 1.622-.12 2.361-.336a.722.722 0 0 1 .598.082l1.584.926a.272.272 0 0 0 .14.047c.134 0 .24-.111.24-.247 0-.06-.023-.12-.038-.177l-.327-1.233a.582.582 0 0 1-.023-.156.49.49 0 0 1 .201-.398C23.024 18.48 24 16.82 24 14.98c0-3.21-2.931-5.837-6.656-6.088V8.89c-.135-.01-.27-.027-.407-.03zm-2.53 3.274c.535 0 .969.44.969.982a.976.976 0 0 1-.969.983.976.976 0 0 1-.969-.983c0-.542.434-.982.97-.982zm4.844 0c.535 0 .969.44.969.982a.976.976 0 0 1-.969.983.976.976 0 0 1-.969-.983c0-.542.434-.982.969-.982z"/></svg>
        </div>

        <button class="lang-btn" id="langBtn" onclick="toggleLang();return false;">EN</button>
        <button class="mobile-menu-btn" onclick="toggleMenu()">
          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 12h18M3 6h18M3 18h18"/></svg>
        </button>
      </div>
    </div>
  </nav>

  <!-- ===== Hero Section ===== -->
  <section class="hero" id="heroSection" data-section="hero_banner">
    <div class="hero-main" id="heroMain">
      <!-- Left: Large Image -->
      <div class="hero-img-wrap">
        <div class="hero-img-border" id="heroMainImg">
          <div style="width:100%;height:100%;display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,0.2);font-size:14px;">加载中...</div>
        </div>
      </div>
      <!-- Right: Content -->
      <div class="hero-content" id="heroContent">
        <div class="hero-cat-label"><span class="dot"></span> <span id="heroCat" data-i18n="hero_label">&nbsp;</span></div>
        <h1 class="hero-title" id="heroTitle" data-i18n="hero_title" style="min-height:80px;">&nbsp;</h1>
        <p class="hero-desc" id="heroDesc" data-i18n="hero_desc" style="min-height:60px;">&nbsp;</p>
        <div class="hero-stats" id="heroStats">
          <div class="hero-stat"><span class="hero-stat-num">IP68</span><span class="hero-stat-label" data-i18n="stat_1">防护等级</span></div>
          <div class="hero-stat"><span class="hero-stat-num">30+</span><span class="hero-stat-label" data-i18n="stat_2">年行业经验</span></div>
          <div class="hero-stat"><span class="hero-stat-num">500+</span><span class="hero-stat-label" data-i18n="stat_3">合作客户</span></div>
        </div>
        <div class="hero-btns">
          <a href="/product.html" id="heroBtn1Link"><button class="btn-primary" id="heroBtn1" data-i18n="btn_products">查看产品</button></a>
          <a href="/contact.html"><button class="btn-outline" id="heroBtn2" data-i18n="btn_contact">立即咨询</button></a>
        </div>
      </div>
    </div>
    
  </section>

  <!-- Thumbnail Carousel Row 1 -->
  <div class="thumb-section" id="thumbSection1">
    <!-- Carousel Dots -->
    <div class="hero-dots" id="heroDots"></div>
    <div class="thumb-track-wrap">
      <div class="thumb-track" id="thumbTrack1">
        <!-- Thumbnails loaded dynamically -->
      </div>
    </div>
  </div>

  <!-- Thumbnail Carousel Row 2 -->
  <div class="thumb-section" id="thumbSection2">
    <div class="thumb-track-wrap">
      <div class="thumb-track" id="thumbTrack2">
        <!-- Thumbnails loaded dynamically -->
      </div>
    </div>
  </div>

  <div class="section-divider"></div>

  <!-- ===== Category Pills ===== -->
  <section class="cat-bar" id="catBarSection" data-section="category_pills">
    <div class="cat-bar-wrap">
      <div class="cat-pills" id="catPills">
        <button class="cat-pill active" data-cat="" onclick="filterProducts('')" data-i18n="cat_all">全部产品</button>
      </div>
    </div>
  </section>

  <div class="section-divider"></div>

  <!-- ===== Products Section ===== -->
  <section class="section" id="prodSection" data-section="products_grid">
    <div class="section-wrap">
      <div class="section-head">
        <span class="section-label" data-i18n="prod_label">PRODUCT CENTER</span>
        <h2 class="section-title" data-i18n="prod_title">产品中心</h2>
        <p class="section-subtitle" data-i18n="prod_subtitle">涵盖电缆密封全系列产品，满足不同应用场景需求</p>
      </div>
      <div class="products-grid" id="productsGrid">
        <div class="product-card"><div class="product-img"><div class="skeleton" style="width:100%;height:100%;"></div></div><div class="product-body"><div class="skeleton" style="width:60%;height:16px;margin-bottom:8px;"></div><div class="skeleton" style="width:40%;height:12px;"></div></div></div>
        <div class="product-card"><div class="product-img"><div class="skeleton" style="width:100%;height:100%;"></div></div><div class="product-body"><div class="skeleton" style="width:60%;height:16px;margin-bottom:8px;"></div><div class="skeleton" style="width:40%;height:12px;"></div></div></div>
        <div class="product-card"><div class="product-img"><div class="skeleton" style="width:100%;height:100%;"></div></div><div class="product-body"><div class="skeleton" style="width:60%;height:16px;margin-bottom:8px;"></div><div class="skeleton" style="width:40%;height:12px;"></div></div></div>
      </div>
    </div>
  </section>

  <!-- ===== Download Center ===== -->
  <section class="section" id="dlSection" data-section="download_center" style="background: var(--bg-light); padding: 40px 0;">
    <div class="section-wrap">
      <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:24px;">
        <div>
          <span class="section-label" data-i18n="dl_label">DOWNLOAD</span>
          <h2 class="section-title" style="margin-top:8px;" data-i18n="dl_title">下载中心</h2>
        </div>
        <a href="/download.html" class="btn-outline" style="font-size:13px;padding:8px 20px;" data-i18n="view_all">查看全部 &rarr;</a>
      </div>
      <div class="products-grid" id="downloadGrid"></div>
    </div>
  </section>

  <div class="section-divider"></div>

  <!-- ===== Company Album ===== -->
  <section class="section" id="albumSection" data-section="company_album">
    <div class="section-wrap">
      <div class="section-head" style="display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px;">
        <div>
          <span class="section-label" data-i18n="album_label">COMPANY ALBUM</span>
          <h2 class="section-title" data-i18n="album_title" style="margin-top:8px;">公司相册</h2>
          <p class="section-subtitle" data-i18n="album_subtitle">工厂环境、生产设备、团队风采</p>
        </div>
        <a href="/company-photos.html" class="btn-outline" style="font-size:13px;padding:8px 20px;" data-i18n="view_all">查看全部 &rarr;</a>
      </div>
      <div class="dl-categories" id="albumCategories" style="margin-bottom:32px;justify-content:center;"></div>
      <div class="products-grid" id="albumGrid">
  
      </div>
    </div>
  </section>

  <div class="section-divider"></div>

  <!-- ===== Friendly Links ===== -->
  <section class="section" id="linksSection" data-section="friendly_links" style="background: var(--bg-light);">
    <div class="section-wrap">
      <div class="section-head">
        <span class="section-label" data-i18n="link_label">LINKS</span>
        <h2 class="section-title" data-i18n="link_title">友情链接</h2>
      </div>
      <div class="cat-pills" id="friendlyLinks">
        <a href="https://szyiqing.1688.com" target="_blank" class="cat-pill">阿里巴巴</a>
        <a href="https://www.made-in-china.com" target="_blank" class="cat-pill">中国制造网</a>
        <a href="https://www.globalsources.com" target="_blank" class="cat-pill">环球资源</a>
        <a href="https://www.hc360.com" target="_blank" class="cat-pill">慧聪网</a>
      </div>
    </div>
  </section>

  <div class="section-divider"></div>

  <!-- ===== Footer ===== -->

  <!-- ===== Contact Section ===== -->
  <div class="section-divider"></div>
  <section class="section" id="contactSection" data-section="contact" style="padding:40px 0;">
    <div class="section-wrap">
      <div style="display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:20px;background:var(--bg-card);border:1px solid var(--border);border-radius:16px;padding:30px 40px;">
        <div style="display:flex;align-items:center;gap:30px;flex-wrap:wrap;">
          <div style="display:flex;align-items:center;gap:8px;color:var(--text-muted);font-size:14px;">
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="var(--primary)" stroke-width="2"><path d="M22 16.92v3a2 2 0 01-2.18 2 19.79 19.79 0 01-8.63-3.07 19.5 19.5 0 01-6-6 19.79 19.79 0 01-3.07-8.67A2 2 0 014.11 2h3a2 2 0 012 1.72c.13.96.38 1.9.7 2.81a2 2 0 01-.45 2.11L8.09 9.91a16 16 0 006 6l1.27-1.27a2 2 0 012.11-.45c.91.32 1.85.57 2.81.7A2 2 0 0122 16.92z"/></svg>
            <span data-i18n="tel_label">0512-63226739</span>
          </div>
          <div style="display:flex;align-items:center;gap:8px;color:var(--text-muted);font-size:14px;">
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="var(--primary)" stroke-width="2"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
            <span>clive1818@163.com</span>
          </div>
          <div style="display:flex;align-items:center;gap:8px;color:var(--text-muted);font-size:14px;">
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="var(--primary)" stroke-width="2"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg>
            <span data-i18n="addr_label">江苏省苏州市吴江区</span>
          </div>
        </div>
        <a href="/contact.html" class="btn-primary" style="font-size:13px;padding:10px 24px;" data-i18n="online_msg">在线留言 &rarr;</a>
      </div>
    </div>
  </section>
  <script>
  function submitQuickContact(e){
    e.preventDefault();
    var btn=document.getElementById('qcSubmit');
    btn.textContent='提交中...';btn.disabled=true;
    fetch('/api/contact',{
      method:'POST',
      headers:{'Content-Type':'application/json'},
      body:JSON.stringify({
        name:document.getElementById('qcName').value,
        company:'',phone:document.getElementById('qcPhone').value,
        email:'',subject:'首页快捷留言',
        content:document.getElementById('qcContent').value
      })
    }).then(function(){showToast('提交成功，我们会尽快联系您！');document.getElementById('quickContactForm').reset();btn.textContent='提交留言';btn.disabled=false;})
    .catch(function(){showToast('提交成功，我们会尽快联系您！');document.getElementById('quickContactForm').reset();btn.textContent='提交留言';btn.disabled=false;});
  }
  </script>

  
  <!-- ===== About Us Section ===== -->
  <section class="section" id="aboutSection">
    <div class="section-wrap">
      <div class="section-head">
        <span class="section-label">ABOUT US</span>
        <h2 class="section-title">关于我们</h2>
        <p class="section-subtitle" id="aboutSubtitle">专注电缆密封技术20年</p>
      </div>
      <div style="max-width: 900px; margin: 0 auto; background: var(--bg-card); border: 1px solid var(--border); border-radius: 16px; padding: 40px;">
        <p id="aboutDescription" style="font-size: 16px; line-height: 1.8; color: var(--text); text-align: center;">
          洛克密封是苏州宜庆电子科技有限公司旗下品牌，专注电线电缆管道密封系统研发20年。
        </p>
        <div style="text-align: center; margin-top: 24px;">
          <a href="/about.html" style="display: inline-block; padding: 12px 28px; background: var(--primary); color: #0a1628; font-weight: 600; border-radius: 8px; text-decoration: none; font-size: 14px;">
            了解更多 →
          </a>
        </div>
      </div>
    </div>
  </section>

  <div class="section-divider"></div>

  <footer class="footer">
    <div class="footer-wrap">
      <div class="footer-grid">
        <div>
          <div class="footer-brand">洛克密封</div>
          <p class="footer-desc" data-i18n="footer_desc">苏州宜庆电子科技有限公司旗下品牌，专业电线电缆管道密封系统制造商，致力于为客户提供高品质的密封解决方案。</p>
          <div class="footer-social">
            <a href="#" title="微信" onclick="showWechatQR();return false;"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M8.691 2.188C3.891 2.188 0 5.476 0 9.53c0 2.212 1.17 4.203 3.002 5.55a.59.59 0 0 1 .213.665l-.39 1.48c-.019.07-.048.141-.048.213 0 .163.13.295.29.295a.326.326 0 0 0 .167-.054l1.903-1.114a.864.864 0 0 1 .717-.098 10.16 10.16 0 0 0 2.837.403c.276 0 .543-.027.811-.05-.857-2.578.157-4.972 1.932-6.446 1.703-1.415 3.882-1.98 5.853-1.838-.576-3.583-4.196-6.348-8.596-6.348zM5.785 5.991c.642 0 1.162.529 1.162 1.18a1.17 1.17 0 0 1-1.162 1.178A1.17 1.17 0 0 1 4.623 7.17c0-.651.52-1.18 1.162-1.18zm5.813 0c.642 0 1.162.529 1.162 1.18a1.17 1.17 0 0 1-1.162 1.178 1.17 1.17 0 0 1-1.162-1.178c0-.651.52-1.18 1.162-1.18zm5.34 2.867c-1.797-.052-3.746.512-5.28 1.786-1.72 1.428-2.687 3.72-1.78 6.22.942 2.453 3.666 4.229 6.884 4.229.826 0 1.622-.12 2.361-.336a.722.722 0 0 1 .598.082l1.584.926a.272.272 0 0 0 .14.045c.134 0 .24-.111.24-.246 0-.06-.023-.12-.038-.177l-.327-1.233a.49.49 0 0 1 .177-.554C23.016 18.115 24 16.405 24 14.479c0-3.197-3.098-5.621-7.062-5.621zm-2.36 2.63c.535 0 .969.44.969.982a.976.976 0 0 1-.969.983.976.976 0 0 1-.969-.983c0-.542.434-.982.97-.982zm4.72 0c.535 0 .969.44.969.982a.976.976 0 0 1-.969.983.976.976 0 0 1-.969-.983c0-.542.434-.982.969-.982z"/></svg></a>
            <a href="https://szyiqing.1688.com" target="_blank" title="阿里巴巴" style="color:#FF6A00"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M11.971 0C5.363 0 0 5.363 0 11.971S5.363 23.942 11.971 23.942 23.942 18.579 23.942 11.971 18.579 0 11.971 0zm-.737 4.8c.52-.043 1.028.015 1.522.172.752.242 1.39.657 1.914 1.243.2.23.372.478.515.742.143.265.258.544.344.837a4.7 4.7 0 0 1 .172 1.8 4.65 4.65 0 0 1-.286 1.286c-.114.286-.258.558-.43.815a4.34 4.34 0 0 1-.6.715c-.23.215-.48.408-.744.573a4.68 4.68 0 0 1-1.715.63 5.28 5.28 0 0 1-1.029.1c-.372 0-.744-.028-1.1-.1a4.67 4.67 0 0 1-1.715-.63 4.34 4.34 0 0 1-.744-.573 4.34 4.34 0 0 1-.6-.715 4.26 4.26 0 0 1-.43-.815 4.65 4.65 0 0 1-.286-1.286 4.7 4.7 0 0 1 .172-1.8c.086-.293.2-.572.344-.837.143-.264.315-.512.515-.742.515-.572 1.143-.987 1.886-1.243.494-.157 1.014-.215 1.543-.172zm-.043 8.228c.315 0 .615.057.9.172.286.114.537.272.758.472.215.2.387.43.515.687.13.258.2.53.215.815.015.3-.043.587-.172.872a2.28 2.28 0 0 1-.515.73 2.49 2.49 0 0 1-.758.5 2.43 2.43 0 0 1-.9.172c-.315 0-.615-.057-.9-.172a2.49 2.49 0 0 1-.758-.5 2.28 2.28 0 0 1-.515-.73 2.06 2.06 0 0 1-.172-.872c.015-.286.086-.558.215-.815.13-.258.3-.487.515-.687.22-.2.472-.358.758-.472.286-.115.587-.172.9-.172z"/></svg></a>
          </div>
        </div>
        <div>
          <div class="footer-title" data-i18n="footer_products">产品分类</div>
          <div class="footer-links" id="footerLinks">
            <a href="/product.html?cat=ysf-flange">YSF法兰框架</a>
            <a href="/product.html?cat=ys-frame">YS框架</a>
            <a href="/product.html?cat=yrm-module">YRM压紧块</a>
            <a href="/product.html?cat=ycm-module">YCM压紧块</a>
            <a href="/product.html?cat=b-explosion-proof">B型防爆框架</a>
            <a href="/product.html?cat=stayplate">隔层板/支撑板</a>
            <a href="/product.html?cat=comseal">ComSeal密封</a>
            <a href="/product.html?cat=yrs-plug">YRS圆形堵块</a>
            <a href="/product.html?cat=yr-plug">YR矩形堵块</a>
            <a href="/product.html?cat=slrs-seal">SLRS/SLFRS密封</a>
            <a href="/product.html?cat=emc-module">电磁屏蔽模块</a>
            <a href="/product.html?cat=wedgekit">Wedgekit/压紧件</a>
          </div>
        </div>
        <div>
          <div class="footer-title" data-i18n="footer_quick">快速链接</div>
          <div class="footer-links" id="footerLinks">
            <a href="/" data-i18n="nav_home">首页</a>
            <a href="/product.html">产品中心</a>
            <a href="/case.html">工程案例</a>
            <a href="/about.html">关于我们</a>
            <a href="/news.html">新闻中心</a>
            <a href="/download.html">下载中心</a>
            <a href="/company-photos.html">公司相册</a>
            <a href="/agent.html">代理定制</a>
          </div>
        </div>
        <div>
          <div class="footer-title" data-i18n="footer_contact">联系方式</div>
          <div class="footer-contact">
            <div class="footer-contact-item">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg>
              <span data-i18n="addr">江苏省苏州市吴江区黎里镇汾湖大道558号</span>
            </div>
            <div class="footer-contact-item">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 16.92v3a2 2 0 01-2.18 2 19.79 19.79 0 01-8.63-3.07 19.5 19.5 0 01-6-6 19.79 19.79 0 01-3.07-8.67A2 2 0 014.11 2h3a2 2 0 012 1.72c.13.96.38 1.9.7 2.81a2 2 0 01-.45 2.11L8.09 9.91a16 16 0 006 6l1.27-1.27a2 2 0 012.11-.45c.91.32 1.85.57 2.81.7A2 2 0 0122 16.92z"/></svg>
              <span>0512-63226739 / 13771694733</span>
            </div>
            <div class="footer-contact-item">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
              <span>clive1818@163.com</span>
            </div>
          </div>
        </div>
      </div>
      <div class="footer-bottom">
        <p>&copy; 2024 苏州宜庆电子科技有限公司（洛克密封）版权所有 | <span id="footerIcp" data-i18n="icp">苏ICP备XXXXXXXX号</span></p>
      </div>
    </div>
  </footer>

  <!-- Toast -->
  <div class="toast" id="toast"></div>
  
  <!-- Wechat QR Modal -->
  <div class="modal-overlay" id="wechatModal">
    <div class="modal-content">
      <button class="modal-close" onclick="closeWechatQR()">&times;</button>
      <img src="/images/wechat-qr.png" alt="微信二维码" onerror="this.src='/images/wechat-qr-nav.jpg'">
      <p data-i18n="wechat_tip">扫码添加微信咨询</p>
    </div>
  </div>
  
  <!-- Image Zoom Modal -->
  <div class="zoom-overlay" id="zoomModal">
    <button class="zoom-close" onclick="closeZoom()">&times;</button>
    <img src="" alt="放大图片" id="zoomImg">
  </div>

  <script>

    // ========== i18n ==========
    function toggleLang() {
      currentLang = currentLang === 'zh' ? 'en' : 'zh';
      try { localStorage.setItem('lang', currentLang); } catch(e) {}
      applyI18n();
      // Load ICP from API
      fetch('/api/company').then(function(r){return r.ok?r.json():{}}).then(function(d){
        if(d.icp){ var el=document.getElementById('footerIcp'); if(el) el.textContent=d.icp; }
      }).catch(function(){});
      // Re-render dynamic content
      if (typeof bannersData !== 'undefined' && bannersData.length) {
        updateHeroSlide(currentSlideIndex);
      }
      if (typeof productsData !== 'undefined' && productsData.length) {
        renderProducts(productsData);
      }
      if (typeof categoriesData !== 'undefined' && categoriesData.length) {
        renderCatPills(categoriesData);
        renderFooterLinks(categoriesData);
      }
      renderMarquee();
      return false;
    }
    
    function toggleMenu() {
      document.getElementById('navLinks').classList.toggle('open');
    }
    
    // ========== Toast ==========
    function showToast(msg) {
      var toast = document.getElementById('toast');
      toast.textContent = msg;
      toast.classList.add('show');
      setTimeout(function() { toast.classList.remove('show'); }, 2500);
    }
    
    // ========== Modals ==========
    function showWechatQR() {
      document.getElementById('wechatModal').classList.add('active');
    }
    function closeWechatQR() {
      document.getElementById('wechatModal').classList.remove('active');
    }
    function openZoom(src) {
      var modal = document.getElementById('zoomModal');
      var img = document.getElementById('zoomImg');
      if (src) {
        img.src = src;
      } else {
        // Use current hero image
        var currentBanner = bannersData[currentSlideIndex];
        if (currentBanner && currentBanner.image) {
          img.src = currentBanner.image;
        } else { return; }
      }
      modal.classList.add('active');
    }
    function closeZoom() {
      document.getElementById('zoomModal').classList.remove('active');
    }
    document.getElementById('zoomModal').addEventListener('click', function(e) {
      if (e.target === this) closeZoom();
    });
    document.getElementById('wechatModal').addEventListener('click', function(e) {
      if (e.target === this) closeWechatQR();
    });
    
    // ========== Hero Carousel Logic ==========
    var bannersData = [];
    var categoriesData = [];
    var currentSlideIndex = 0;
    var autoSlideTimer = null;
    var SLIDE_INTERVAL = 2500;
    
    var sectionsData = {};
    // contact section always visible
    
    function loadData() {
      var cacheBuster = "?_v=" + (window.CACHE_VERSION || Date.now());
      window.jsLoaded = true;
      // Check if fetch is available
      if (typeof fetch === 'undefined') {
        document.getElementById('productsGrid').innerHTML = '<div style="text-align:center;color:#c8956c;padding:40px;">请使用现代浏览器访问</div>';
        return;
      }
      // P1-10: Load section switches first
      fetch('/api/sections')
        .then(function(r) { return r.ok ? r.json() : []; })
        .then(function(secs) {
          sectionsData = {};
          for (var i = 0; i < secs.length; i++) {
            sectionsData[secs[i].section_key] = secs[i].is_visible;
          }
          applySectionSwitches();
        })
        .catch(function() {});
      
      // Load categories
      fetch('/api/categories')
        .then(function(r) { return r.ok ? r.json() : []; })
        .then(function(cats) {
          categoriesData = cats;
          renderCatPills(cats);
          renderFooterLinks(cats);
          renderThumbnails();
        })
        .catch(function() {});
      
      // Load banners (rotation=1 for cross-category rotation)
      fetch('/api/banners?rotation=1')
        .then(function(r) { return r.ok ? r.json() : []; })
        .then(function(data) {
          bannersData = data.rotation || data;
          if (bannersData.length > 0) { renderHero(bannersData); }
        })
        .catch(function() {});
      
      // Load products (P0-3: save to productsData for thumbnail carousel)
      fetch('/api/products')
        .then(function(r) { return r.ok ? r.json() : []; })
        .then(function(prods) {
          productsData = prods;
          renderProducts(prods);
          renderThumbnails();
          startThumbMarquee();
        })
        .catch(function() {});
      
      // P2-7: Load company photos
      loadPhotoCategories();
      fetch('/api/company_photos')
        .then(function(r) { return r.ok ? r.json() : []; })
        .then(function(photos) { renderAlbum(photos); })
        .catch(function() {});
      
      // P2-8: Load downloads
      loadDlCategories();
      fetch('/api/downloads')
        .then(function(r) { return r.ok ? r.json() : []; })
        .then(function(dls) { renderDownloads(dls); })
        .catch(function() {});
      
      // Render marquee
      renderMarquee();
      // Load friendly links for nav dropdown
      fetch('/api/links').then(function(r){return r.json()}).then(function(links){
        var menu = document.getElementById('navLinksDropdown');
        if(!menu || !links.length) return;
        var html = '';
        for(var i=0;i<links.length;i++){
          html += '<a href="'+links[i].url+'" target="_blank" rel="noopener">'+links[i].name+'</a>';
        }
        menu.innerHTML = html;
      }).catch(function(){});

      // Load download categories for nav dropdown
      fetch('/api/download-categories').then(function(r){return r.json()}).then(function(cats){
        var menu = document.getElementById('navDlDropdown');
        if(!menu || !cats.length) return;
        var html = '';
        for(var i=0;i<cats.length;i++){
          html += '<a href="/download.html?cat='+cats[i].id+'">'+cats[i].name+'</a>';
        }
        menu.innerHTML = html;
      }).catch(function(){});

    }
    
    // P1-10: Apply section visibility switches
    function applySectionSwitches() {
      var map = {
        'hero_banner': 'heroSection',
        'category_pills': 'catBarSection',
        'products_grid': 'prodSection',
        'download_center': 'dlSection',
        'company_album': 'albumSection',
        'friendly_links': 'linksSection'
      };
      for (var key in map) {
        if (map.hasOwnProperty(key)) {
          var el = document.getElementById(map[key]);
          if (el && sectionsData && sectionsData[key] === 0) {
            el.style.display = 'none';
          }
        }
      }
    }
    
    // P2-7: Render company album from API
    // ===== Category Filter System =====
    var dlCategoriesData=[],photoCategoriesData=[],allPhotos=[],allDownloads=[];
    var currentDlCat="all",currentPhotoCat="all";

    function loadDlCategories(){
      fetch("/api/download-categories").then(function(r){return r.json()}).then(function(cats){
        dlCategoriesData=cats; renderDlCategories();
      }).catch(function(e){console.error("DL cat fail",e);});
    }
    function tDlCat(name){
      if(currentLang!=='en') return name;
      var map={'全部':'All','渲染图':'Renderings','合同文件':'Contracts','产品手册':'Product Manuals','安装指南':'Installation Guides','技术规格书':'Technical Specs','经销商资料':'Distributor Materials','工程图纸':'Engineering Drawings','3D图纸':'3D Drawings','证书下载':'Certificates'};
      return map[name]||name;
    }
    function renderDlCategories(){
      var el=document.getElementById("dlCategories"); if(!el) return;
      var h=[];
      h.push('<a href="/download.html" class="dl-cat-btn'+(currentDlCat==="all"?" active":"")+'" data-cat="all">'+tDlCat('全部')+'</a>');
      dlCategoriesData.forEach(function(c){
        h.push('<a href="/download.html?cat='+c.id+'" class="dl-cat-btn'+(currentDlCat==c.id?" active":"")+'" data-cat="'+c.id+'">'+tDlCat(c.name)+'</a>');
      });
      el.innerHTML=h.join('');
      // 只有在download页面才启用JS筛选，首页点击直接跳转
      if(window.location.pathname.indexOf('download') >= 0){
        el.onclick=function(ev){
          var btn=ev.target.closest(".dl-cat-btn"); if(!btn) return;
          currentDlCat=btn.getAttribute("data-cat");
          renderDlCategories(); renderDownloads(allDownloads);
        };
      }
    }

    function loadPhotoCategories(){
      fetch("/api/photo-categories").then(function(r){return r.json()}).then(function(cats){
        photoCategoriesData=cats; renderPhotoCategories();
      }).catch(function(e){console.error("Photo cat fail",e);});
    }
    function tPhotoCat(name){
      if(currentLang!=='en') return name;
      var map={'全部':'All','生产车间':'Workshop','生产设备':'Equipment','团队风采':'Team','资质荣誉':'Certifications','工程现场':'Project Sites','展会活动':'Exhibitions','客户来访':'Client Visits'};
      return map[name]||name;
    }
    function renderPhotoCategories(){
      var el=document.getElementById("albumCategories"); if(!el) return;
      var h=[];
      h.push('<a href="/company-photos.html" class="dl-cat-btn'+(currentPhotoCat==="all"?" active":"")+'" data-cat="all">'+tPhotoCat('全部')+'</a>');
      photoCategoriesData.forEach(function(c){
        h.push('<a href="/company-photos.html?cat='+c.id+'" class="dl-cat-btn'+(currentPhotoCat==c.id?" active":"")+'" data-cat="'+c.id+'">'+tPhotoCat(c.name)+'</a>');
      });
      el.innerHTML=h.join('');
      // 只有在company-photos页面才启用JS筛选，首页点击直接跳转
      if(window.location.pathname.indexOf('company-photos') >= 0){
        el.onclick=function(ev){
          var btn=ev.target.closest(".dl-cat-btn"); if(!btn) return;
          currentPhotoCat=btn.getAttribute("data-cat");
          renderPhotoCategories(); renderAlbum(allPhotos);
        };
      }
    }
    window.filterDlCat=function(cat){currentDlCat=cat;renderDlCategories();renderDownloads(allDownloads);};
    window.filterPhotoCat=function(cat){currentPhotoCat=cat;renderPhotoCategories();renderAlbum(allPhotos);};

    function renderAlbum(photos) {
      allPhotos=photos||[];
      var grid = document.getElementById('albumGrid');
      if (!photos || photos.length === 0) {
        grid.innerHTML = '<div style="text-align:center;color:var(--text-dim);padding:40px;grid-column:1/-1;">暂无照片</div>';
        return;
      }
      grid.innerHTML = photos.slice(0, 6).map(function(p) {
        var img = p.image || '';
        return '<a href="/company-photos.html" class="product-card" style="text-decoration:none;">' +
          '<div class="product-img">' + (img ? '<img src="' + img + '" alt="' + (p.title || '') + '">' : '<div style="width:100%;height:100%;display:flex;align-items:center;justify-content:center;color:var(--text-dim);">No Image</div>') + '</div>' +
          '<div class="product-body"><div class="product-name">' + (p.title || '') + '</div></div>' +
        '</a>';
      }).join('');
    }
    
    // P2-8: Render downloads from API
    function renderDownloads(dls) {
      var grid = document.getElementById('downloadGrid');
      if (!dls || dls.length === 0) {
        grid.innerHTML = '<div style="text-align:center;color:var(--text-dim);padding:40px;grid-column:1/-1;">暂无资料</div>';
        return;
      }
      grid.innerHTML = dls.map(function(d) {
        var fileUrl = d.filename || d.file || '#';
        return '<div class="product-card" onclick="window.location.href=\'/product-detail.html?id='+p.id+'\'" style="cursor:pointer">' +
          '<div class="product-body">' +
            '<div class="product-name">' + (d.title || '') + '</div>' +
            '<p class="product-desc">' + (d.description || '') + '</p>' +
          '</div>' +
          '<div class="product-footer">' +
            '<a href="' + fileUrl + '" target="_blank"><button class="btn-outline btn-sm">立即下载</button></a>' +
          '</div>' +
        '</div>';
      }).join('');
    }
    
    function getCatName(key) {
      for (var i = 0; i < categoriesData.length; i++) {
        if (categoriesData[i].key === key) {
          var cat = categoriesData[i];
          return currentLang === 'en' && cat.name_en ? cat.name_en : cat.name;
        }
      }
      return key;
    }
    
    function renderHero(banners) {
      currentSlideIndex = 0;
      updateHeroSlide(0);
      startAutoSlide();
      renderThumbnails();
    }
    
    function updateHeroSlide(index) {
      if (!bannersData.length) return;
      var banner = bannersData[index];
      if (!banner) return;
      
      // Update left image with fallback
      var imgWrap = document.getElementById('heroMainImg');
      var imgUrl = banner.image || (Array.isArray(banner.images) && banner.images.length > 0 ? banner.images[0] : banner.images) || '/uploads/products/single-cable-seal.png';
      if (imgUrl) {
        imgWrap.innerHTML = '<div class="hero-img-reflect" id="heroReflect"><img id="heroReflectImg" src="' + imgUrl + '" alt=""></div><img src="' + imgUrl + '" alt="' + (banner.title || '') + '" style="width:90%;height:90%;object-fit:contain;">';
      }
      
      // Update right content
      var catName = getCatName(banner.category);
      document.getElementById('heroCat').textContent = catName || t('hero_label');
      
      var titleEl = document.getElementById('heroTitle');
      var subtitle = currentLang === 'en' && banner.subtitle_en ? banner.subtitle_en : (banner.subtitle || '');
      var title = currentLang === 'en' && banner.title_en ? banner.title_en : (banner.title || '');
      titleEl.innerHTML = subtitle + '<br><span>' + title + '</span>';
      
      var desc = currentLang === 'en' && banner.description_en ? banner.description_en : (banner.description || t('hero_desc'));
      document.getElementById('heroDesc').textContent = desc;
      
      // Update buttons - link to target_url for "Learn More"
      var btnText = currentLang === 'en' && banner.btn_text_en ? banner.btn_text_en : (banner.btn_text || t('btn_products'));
      var btnLink = banner.target_url || '/product.html?cat=' + (banner.category || '');
      document.getElementById('heroBtn1').textContent = btnText;
      document.getElementById('heroBtn1Link').href = btnLink;
      
      // Update stats from banner data
      var stats = banner.stats ? banner.stats.split('|') : ['IP68', '30+', '500+'];
      var statLabels = [t('stat_1'), t('stat_2'), t('stat_3')];
      var statsHtml = '';
      for (var si = 0; si < stats.length; si++) {
        statsHtml += '<div class="hero-stat"><span class="hero-stat-num">' + stats[si] + '</span><span class="hero-stat-label">' + (statLabels[si] || '') + '</span></div>';
      }
      document.getElementById('heroStats').innerHTML = statsHtml;
      
      // Update thumbnail active state for both rows
      var allThumbs = document.querySelectorAll('.thumb-item');
      for (var ti = 0; ti < allThumbs.length; ti++) {
        var thumbIdx = parseInt(allThumbs[ti].getAttribute('data-index'));
        if (thumbIdx === index) {
          allThumbs[ti].classList.add('active');
        } else {
          allThumbs[ti].classList.remove('active');
        }
      }
      
      // Update dots
      updateDots(index);
    }
    
    function goToSlide(index) {
      if (!bannersData.length) return;
      if (index < 0) index = bannersData.length - 1;
      if (index >= bannersData.length) index = 0;
      currentSlideIndex = index;
      updateHeroSlide(index);
      resetAutoSlide();
    }
    
    function startAutoSlide() {
      stopAutoSlide();
      function tick() {
        autoSlideTimer = setTimeout(function() {
          try {
            if (document.hidden) {
              // Page is hidden, skip this tick but keep the chain alive
              tick();
              return;
            }
            goToSlide(currentSlideIndex + 1);
          } catch(e) {}
          tick();
        }, SLIDE_INTERVAL);
      }
      tick();
    }
    
    function stopAutoSlide() {
      if (autoSlideTimer) {
        clearTimeout(autoSlideTimer);
        autoSlideTimer = null;
      }
    }
    
    function resetAutoSlide() {
      startAutoSlide();
    }
    
    // ========== P0-3: Thumbnails driven by products ==========
    var productsData = [];
    
    function renderThumbnails() {
      var track1 = document.getElementById('thumbTrack1');
      var track2 = document.getElementById('thumbTrack2');
      
      // Must use bannersData to sync with main carousel
      var items = [];
      if (bannersData.length > 0) {
        items = bannersData.map(function(b, i) { 
          return { 
            img: b.image || (Array.isArray(b.images) && b.images.length > 0 ? b.images[0] : ''), 
            name: b.title || b.name || '', 
            index: i 
          }; 
        });
      }
      
      if (items.length === 0) {
        track1.innerHTML = '<div style="color:var(--text-dim);padding:20px;">暂无轮播图</div>';
        if (track2) track2.parentElement.style.display = 'none';
        return;
      }
      
      // Build one row with up to 8 items (use bannersData directly for correct sync)
      function buildRow(allItems) {
        var html = '';
        var count = Math.min(10, allItems.length); // show max 8
        for (var i = 0; i < count; i++) {
          var item = allItems[i];
          var activeClass = (i === 0) ? 'active' : '';
          // Hover: sync main carousel; Click: navigate to product page
          var hoverAction = 'onmouseenter="goToSlide(' + i + ')"';
          var clickAction = 'onclick="var url=\'' + (item.target_url || '/product.html') + '\'; window.location.href=url;"';
          var imgHtml = '';
          if (item.img) {
            imgHtml = '<img src="' + item.img + '" alt="' + item.name + '" onerror="this.style.display=\'none\';this.parentNode.style.background=\'#1a1a2e\';" loading="lazy">';
          }
          html += '<div class="thumb-item ' + activeClass + '" ' + hoverAction + ' ' + clickAction + ' data-index="' + i + '" style="cursor:pointer;">' +
            imgHtml +
            '<span class="thumb-name">' + (item.name || '') + '</span></div>';
        }
        return html;
      }
      
      track1.innerHTML = buildRow(items);
      // Hide second row
      if (track2) track2.parentElement.style.display = 'none';
      
      // Also render dots
      renderDots();
    }
    
    // Render carousel dots
    function renderDots() {
      var dotsContainer = document.getElementById('heroDots');
      if (!dotsContainer) return;
      var total = bannersData.length || productsData.length || 8;
      var html = '';
      for (var i = 0; i < total; i++) {
        html += '<button class="hero-dot ' + (i === 0 ? 'active' : '') + '" onclick="goToSlide(' + i + ')" aria-label="Slide ' + (i + 1) + '"></button>';
      }
      dotsContainer.innerHTML = html;
    }
    
    // Update dots active state
    function updateDots(index) {
      var dots = document.querySelectorAll('.hero-dot');
      for (var i = 0; i < dots.length; i++) {
        if (i === index) {
          dots[i].classList.add('active');
        } else {
          dots[i].classList.remove('active');
        }
      }
    }
    
    // Pause auto-slide on hover (disabled for continuous play)
    // Handle page visibility changes (mobile browsers pause setTimeout when hidden)
    document.addEventListener('visibilitychange', function() {
      if (!document.hidden) {
        resetAutoSlide();
      }
    });

    // Touch events for mobile - restart auto-slide after user interaction
    var heroEl = document.getElementById('heroSection');
    if (heroEl) {
      heroEl.addEventListener('touchstart', stopAutoSlide, {passive: true});
      heroEl.addEventListener('touchend', function() { setTimeout(resetAutoSlide, 500); }, {passive: true});
    }

    // ========== Thumbnail Marquee (JS-driven for mobile compatibility) ==========
    var thumbMarqueeReq = null;
    var thumbMarqueePos = 0;
    function startThumbMarquee() {
      stopThumbMarquee();
      var track = document.getElementById('thumbTrack1');
      if (!track) return;
      var speed = 0.5;
      function step() {
        var firstHalf = track.scrollWidth / 2;
        if (firstHalf > 0) {
          thumbMarqueePos += speed;
          if (thumbMarqueePos >= firstHalf) {
            thumbMarqueePos = 0;
          }
          track.style.transform = 'translateX(-' + thumbMarqueePos + 'px)';
        }
        thumbMarqueeReq = requestAnimationFrame(step);
      }
      thumbMarqueeReq = requestAnimationFrame(step);
    }
    function stopThumbMarquee() {
      if (thumbMarqueeReq) {
        cancelAnimationFrame(thumbMarqueeReq);
        thumbMarqueeReq = null;
      }
    }
    var thumbWrapEl = document.querySelector('.thumb-track-wrap');
    if (thumbWrapEl) {
      thumbWrapEl.addEventListener('mouseenter', stopThumbMarquee);
      thumbWrapEl.addEventListener('mouseleave', startThumbMarquee);
    }

    function renderCatPills(categories) {
      var container = document.getElementById('catPills');
      var html = '<button class="cat-pill active" data-cat="" onclick="filterProducts(\'\')">' + t('cat_all') + '</button>';
      for (var i = 0; i < categories.length; i++) {
        var cat = categories[i];
        var name = currentLang === 'en' && cat.name_en ? cat.name_en : cat.name;
        html += '<button class="cat-pill" data-cat="' + cat.key + '" onclick="filterProducts(\'' + cat.key + '\')">' + name + '</button>';
      }
      container.innerHTML = html;
    }
    
    function renderFooterLinks(categories) {
      var container = document.getElementById('footerLinks');
      var html = '';
      var showCats = categories.slice(0, 4);
      for (var i = 0; i < showCats.length; i++) {
        var cat = showCats[i];
        var name = currentLang === 'en' && cat.name_en ? cat.name_en : cat.name;
        html += '<a href="/product.html?cat=' + cat.key + '">' + name + '</a>';
      }
      container.innerHTML = html;
    }
    
    function renderProducts(products) {
      try {
      var container = document.getElementById('productsGrid');
      if (!container) return;
        if (!products || products.length === 0) {
          container.innerHTML = '<div style="text-align:center;color:var(--text-dim);padding:40px;grid-column:1/-1;">暂无产品</div>';
          return;
        }
        
        var html = '';
        for (var i = 0; i < products.length; i++) {
          var p = products[i];
          var name = (currentLang === 'en' && p.name_en ? p.name_en : p.name) || '';
          var catName = p.category_l2 || '';
          var img = p.image || '';
          if (!img && p.images) {
            var imgs = p.images.split('\n');
            if (imgs.length > 0) img = imgs[0];
          }
          html += '<div class="product-card" onclick="window.location.href=\'/product-detail.html?id='+p.id+'\'" style="cursor:pointer">' +
            '<div class="product-img">' +
              (img ? '<img src="' + img + '" alt="' + name + '">' : '<div style="width:100%;height:100%;display:flex;align-items:center;justify-content:center;color:var(--text-dim);font-size:13px;">No Image</div>') +
            '</div>' +
            '<div class="product-body">' +
              '<div class="product-name">' + name + '</div>' +
              '<p class="product-desc">' + (p.description || '') + '</p>' +
            '</div>' +
          '</div>';
        }
        container.innerHTML = html;
      } catch(e) {
        console.error('renderProducts error:', e);
        document.getElementById('productsGrid').innerHTML = '<div style="text-align:center;color:red;padding:40px;">产品渲染错误</div>';
      }
    }
    
    function filterProducts(cat) {
      var pills = document.querySelectorAll('.cat-pill');
      for (var i = 0; i < pills.length; i++) {
        var p = pills[i];
        p.classList.toggle('active', p.getAttribute('data-cat') === cat);
      }
      
      var url = cat ? '/api/products?category_l2=' + cat : '/api/products';
      fetch(url)
        .then(function(r) { return r.ok ? r.json() : []; })
        .then(function(products) { renderProducts(products); })
        .catch(function() { showToast(t('load_error')); });
    }
    
    
    function renderMarquee() {
      var track = document.getElementById('marqueeTrack');
      if (!track) return;
      fetch('/api/products')
        .then(function(r) { return r.json(); })
        .then(function(products) {
          if (!products || products.length === 0) return;
          var displayProducts = products.slice(0, 15);
          var frag = document.createDocumentFragment();
          for (var pi = 0; pi < displayProducts.length; pi++) {
            var p = displayProducts[pi];
            var wrap = document.createElement('div');
            wrap.style.cssText = 'padding:0 10px;flex-shrink:0';
            wrap.className = 'marquee-item';
            var inner = document.createElement('div');
            inner.style.cssText = 'width:120px;height:90px;background:#f8f9fa;border-radius:8px;display:flex;align-items:center;justify-content:center;overflow:hidden';
            if (p.image) {
              var img = document.createElement('img');
              img.src = p.image;
              img.style.cssText = 'max-width:100%;max-height:100%;object-fit:contain';
              img.alt = p.name || '';
              img.onerror = function() { this.style.display = 'none'; this.parentNode.innerHTML = '<span style="color:#999;font-size:12px">' + (this.alt || '') + '</span>'; };
              inner.appendChild(img);
            } else {
              inner.innerHTML = '<span style="color:#999;font-size:12px">' + (p.name || '') + '</span>';
            }
            wrap.appendChild(inner);
            frag.appendChild(wrap);
          }
          var frag2 = frag.cloneNode(true);
          track.innerHTML = '';
          track.appendChild(frag);
          track.appendChild(frag2);
        })
        .catch(function(e) { console.error('Marquee error:', e); });
    }
    
    // ========== Init ==========
    document.addEventListener('DOMContentLoaded', function() {
      // Restore lang preference from localStorage, default to zh
      var savedLang = localStorage.getItem('lang');
      if (savedLang && (savedLang === 'zh' || savedLang === 'en')) { currentLang = savedLang; }
      applyI18n();
      setTimeout(function() { loadData(); }, 100);
      // Start thumbnail marquee after a delay to ensure products are loaded
      setTimeout(function() { startThumbMarquee(); }, 1500);
    });
    
    // Debug: test if JS runs
    if (typeof fetch === 'undefined') {
      document.getElementById('productsGrid').innerHTML = '<div style="text-align:center;color:red;padding:40px;">浏览器不支持fetch API</div>';
    }
  </script>
<script>
// 从API加载公司信息到首页关于面板
(function(){
  var cnt=0;
  function upd(){
    cnt++;
    fetch('/api/company').then(function(r){return r.json();}).then(function(d){
      var de=document.getElementById('aboutDescription');
      var se=document.getElementById('aboutSubtitle');
      if(de&&d.description&&d.description.length>0){de.textContent=d.description;console.log('about updated');}
      if(se&&d.slogan)se.textContent=d.slogan;else if(se&&d.brand)se.textContent=d.brand+' - 专注电缆密封技术20年';
    }).catch(function(e){});
    if(cnt<20)setTimeout(upd,500);
  }
  if(document.readyState==='loading')document.addEventListener('DOMContentLoaded',upd);else upd();
})();
</script>
</body>


</html>

<script>
// 导航栏下拉菜单
document.addEventListener('DOMContentLoaded', function() {
    // 产品分类
    fetch('/api/product-categories').then(function(r){return r.json();}).then(function(d){
        var el=document.getElementById('navProductDropdown');
        if(el&&d.categories){d.categories.forEach(function(c){var a=document.createElement('a');a.href='/product.html?category='+c.id;a.textContent=c.name;el.appendChild(a);});}
    }).catch(function(){});
    // 新闻分类
    fetch('/api/article-categories').then(function(r){return r.json();}).then(function(d){
        var el=document.getElementById('navNewsDropdown');
        if(el&&d.categories){d.categories.forEach(function(c){var a=document.createElement('a');a.href='/news.html?category='+c.id;a.textContent=c.name;el.appendChild(a);});}
    }).catch(function(){});
    // 下载分类
    fetch('/api/download-categories').then(function(r){return r.json();}).then(function(d){
        var el=document.getElementById('navDlDropdown');
        if(el&&d.categories){d.categories.forEach(function(c){var a=document.createElement('a');a.href='/download.html?category='+c.id;a.textContent=c.name;el.appendChild(a);});}
    }).catch(function(){});
});
</script>