
const { useEffect, useMemo, useState } = React;
const translations = {"zh": {"langLabel": "中文", "brandSub": "工业阀门解决方案｜项目与渠道供货", "nav": ["首页", "关于我们", "产品中心", "行业应用", "技术资料", "联系我们"], "inquiry": "发送询盘", "quote": "获取报价", "productsBtn": "查看产品", "rfq": "申请 RFQ", "docs": "索取资料", "backTop": "回顶部", "heroBadge1": "工厂直供|OEM/ODM|认证支持", "heroBadge2": "12小时报价|EPC/经销|项目资料支持", "heroTitle": "专注于工业阀门与自动化控制方案，依托稳定的制造端支持。\n可根据项目要求提供球阀、控制阀、切断阀及配套自动化阀门解决方案。", "heroSlides": [["不锈钢球阀", "Factory Direct Supply", "适用于水处理、化工、油气与工业管道系统。"], ["控制阀与自动化方案", "For EPC & Industrial Projects", "支持气动、电动执行器配套，适合项目采购与自动化系统集成。"], ["工业能源应用场景", "Industrial Energy Application", "用于强化能源、工业装置与项目型应用场景的视觉表达。"]], "about": {"kicker": "关于我们", "title": "工业项目与渠道客户的阀门供货支持", "desc": "我们专注于工业阀门与自动化阀门供货，产品覆盖球阀、控制阀、切断阀及执行器配套方案。依托稳定制造端、质量控制和外贸项目配合能力，为 EPC 项目、经销渠道和工业采购客户提供可持续的阀门供应支持。", "cards": [["公司定位", "我们定位于工业阀门与自动化阀门供货服务，重点支持海外项目采购、经销渠道供货和工业系统配套需求，帮助客户快速判断产品、工厂能力和合作方式是否匹配。", ["工业阀门与自动化阀门供货", "球阀、控制阀与切断阀", "制造端与项目供货支持", "服务 EPC、经销商与工业采购"]], ["产品中心", "产品中心用于承接明确采购需求，按球阀、切断阀、控制阀和自动化阀门分类展示，帮助客户快速进入对应产品页面、查看资料并提交 RFQ。", ["球阀产品入口", "切断阀产品入口", "控制阀与自动化阀门", "资料查看与 RFQ 提交"]], ["应用与技术支持", "通过水处理、油气、化工、电力等应用场景，以及阀门选型、材质、标准和工况说明，帮助客户从实际需求进入产品选择与询盘流程。", ["水处理、油气、化工、电力应用", "阀门选型与对比内容", "材质、标准与工况说明", "引导联系与提交询盘"]]]}, "reasons": {"kicker": "客户选择", "title": "为什么选择我们作为工业阀门供应商", "desc": "工业阀门采购不只看价格，更关注质量稳定、交付配合、项目响应和资料支持。Xinghe 面向 EPC 项目、经销渠道和工业采购客户，提供更稳定、清晰、可持续的阀门供货支持。", "cards": [["制造端供货支持", "依托稳定制造端，覆盖球阀、控制阀、切断阀及自动化阀门方案，帮助客户获得更稳定的产品供应和项目配合。"], ["项目与渠道配合", "服务 EPC 项目、经销商、进口商和工业采购客户，可根据项目要求提供报价、资料、选型和产品配套支持。"], ["快速 RFQ 响应", "针对客户询价、规格资料、图纸和项目需求，提供更快的响应与基础技术配合，帮助客户推进内部评估。"], ["OEM / ODM 支持", "支持品牌合作、渠道供货和项目定制需求，适合经销渠道、进口商和长期合作客户拓展产品线。"], ["认证与资料支持", "可根据客户需求提供认证、产品资料、测试信息和基础技术文件，帮助客户降低前期筛选和项目审核成本。"], ["规范化外贸沟通", "围绕报价、交期、资料、包装、付款和出口配合进行规范沟通，提升后续合作效率和交付可控性。"]]}, "qc": {"kicker": "质量控制", "title": "通过检验与测试降低阀门交付风险", "desc": "从材料确认、加工检查、装配检验到压力测试和出货检查，我们通过规范化质量流程控制关键风险，帮助项目客户和渠道客户获得更稳定的阀门供应。", "steps": [["原材料确认", "根据项目要求确认材质、规格和来料状态，降低材料不匹配带来的质量风险。"], ["加工过程检查", "对关键尺寸、密封面和加工过程进行检查，提升阀体与关键部件的一致性。"], ["装配与密封检查", "在装配阶段检查密封面、连接部位和启闭状态，减少泄漏和功能异常风险。"], ["压力与功能测试", "根据项目或标准要求进行压力测试、密封测试和基础功能确认，确保产品满足使用要求。"], ["出货检验与包装", "出货前检查外观、标识、数量、资料和包装状态，减少运输和交付环节问题。"]]}, "products": {"kicker": "产品中心", "title": "工业阀门产品分类与项目选型入口", "desc": "我们提供球阀、切断阀、控制阀及自动化阀门方案，覆盖工业管道、化工、水处理、油气、能源和设备配套应用。客户可根据项目工况、阀门类型和采购需求，快速进入对应产品页面并提交 RFQ。", "detailBtn": "产品详情页面", "cards": {"ball": ["球阀", "覆盖不锈钢球阀、锻钢球阀、浮动球阀、固定球阀、低温球阀和高压球阀，适用于工业管道、化工、水处理、油气和项目配套需求。", ["不锈钢", "锻钢", "浮动", "固定"]], "isolation": ["切断阀", "包括闸阀、截止阀、止回阀和蝶阀，适用于管道启闭、介质截断、防止倒流和通用工业系统配套。", ["闸阀", "截止阀", "止回阀", "蝶阀"]], "automation": ["控制阀与自动化阀门", "包括控制阀、气动阀、电动阀及执行器配套方案，适用于自动化系统、设备集成、过程控制和项目型应用。", ["控制阀", "气动", "电动", "自动化"]]}}, "productPages": {"kicker": "产品页面", "title": "通过产品详情页快速确认阀门需求", "desc": "产品详情页用于展示阀门类型、应用工况、材质范围、压力等级、连接方式和资料入口，帮助客户根据项目要求确认产品，并快速提交 RFQ。", "labels": ["产品类型", "材质", "压力", "应用"], "tag1": "工业管线", "tag2": "项目供货", "listDesc": "适用于工业管道、项目配套、设备集成及渠道供货需求，可按规格、材质、压力等级和应用工况进行确认。", "pages": {"ball": {"title": "球阀产品详细资料", "desc": "可根据项目工况、压力等级、连接方式和材质要求进行选型，适用于工业管道、化工、水处理、油气和通用工业系统，并提供 RFQ 与资料支持。", "specs": ["浮动球阀 / 固定球阀 / 锻钢球阀 / 低温球阀", "WCB / CF8 / CF8M / 合金钢", "Class 150 - 2500 / PN16 - PN420", "水处理、化工、油气、通用工业管道"], "list": ["浮动球阀", "固定球阀", "锻钢球阀", "低温球阀"]}, "isolation": {"title": "切断阀产品详细资料", "desc": "覆盖闸阀、截止阀、止回阀和蝶阀，适用于管道启闭、介质截断、防止倒流和通用工业系统配套，并可按项目参数提供选型与资料支持。", "specs": ["闸阀 / 截止阀 / 止回阀 / 蝶阀", "WCB / CF8 / CF8M / 合金钢", "Class 150 - 2500 / PN16 - PN420", "水处理、能源、化工、油气、通用工业系统"], "list": ["闸阀", "截止阀", "止回阀", "蝶阀"]}, "automation": {"title": "控制阀与自动化阀门资料", "desc": "覆盖控制阀、气动阀、电动阀及执行器配套方案，适用于自动化系统、设备集成、过程控制和项目型应用，并可根据工况要求提供方案沟通。", "specs": ["控制阀 / 气动阀 / 电动阀 / 执行器配套", "不锈钢 / 碳钢 / 合金材料", "按项目工况确认", "自动化系统、设备集成、过程控制"], "list": ["控制阀", "气动阀", "电动阀", "执行器配套"]}}}, "apps": {"kicker": "行业应用", "title": "为不同工业应用场景提供阀门选型支持", "desc": "我们的阀门产品可用于水处理、油气能源、化工系统、电力与通用工业场景。通过应用场景说明，帮助客户根据介质、压力、温度、管道系统和项目需求，快速匹配合适的阀门类型并提交询盘。", "cards": [["水处理", "适用于泵站、给排水、污水处理、工业循环水和水务工程系统，支持管道启闭、流量控制和防倒流需求。", "water"], ["油气与能源", "用于油气、能源、电力和工业装置项目配套，可根据压力等级、介质条件和项目标准进行阀门选型。", "oil"], ["化工系统", "适用于腐蚀性介质、工艺管线和化工项目阀门选型，重点关注材质匹配、密封性能和工况安全。", "chem"], ["电力与工业", "服务电力、制造工厂、自动化设备和通用工业系统，支持切断、调节、控制和自动化配套需求。", "power"]]}, "content": {"kicker": "技术资料", "title": "通过专业技术内容帮助客户完成阀门选型", "desc": "我们围绕阀门选型、材质选择、压力等级、应用工况、认证资料和供应商评估整理技术内容，帮助客户更快理解采购要点，并从技术问题进入产品确认与 RFQ 沟通。", "intent": "采购问题入口", "cards": [["阀门选型需要确认哪些参数", "帮助客户确认口径、压力、材质、连接方式、介质和应用工况，减少选型错误。", "doc"], ["浮动球阀和固定球阀的区别", "从结构、压力等级、应用场景和采购选择角度，帮助客户判断适合哪类球阀。", "valve"], ["腐蚀性介质适合什么阀门材质", "围绕介质特性、温度、浓度和耐腐蚀要求，帮助客户初步判断阀门材质方向。", "doc"], ["闸阀、截止阀、止回阀和蝶阀如何选择", "根据启闭、调节、防倒流和管道系统需求，帮助客户理解不同切断阀的适用场景。", "valve"], ["如何评估一家工业阀门制造商", "从制造能力、质量控制、认证资料、项目经验和外贸配合能力判断供应商是否可靠。", "doc"], ["采购工业阀门需要关注哪些认证与资料", "帮助客户了解采购前常见的认证、测试、材质、图纸和项目资料要求。", "valve"]]}, "factory": {"kicker": "工厂支持", "title": "稳定制造能力支持工业阀门项目供货", "desc": "依托稳定制造端、加工设备、装配检验和项目配合能力，我们为 EPC 项目、经销渠道和工业采购客户提供更可靠的阀门供货基础，支持长期合作与持续供货需求。"}, "certs": {"kicker": "认证支持", "title": "认证资质与项目资料支持采购审核", "desc": "我们可根据客户项目需求，配合提供相关认证信息、产品资料、测试记录和基础技术文件，帮助客户完成供应商筛选、项目审核和内部采购评估。", "list": ["特种设备生产许可证", "PED / CE 认证", "ISO 9001 / ISO 14001 / ISO 45001", "API 6D / API 600 / API 609 / API 6FA"]}, "cta": {"title": "准备采购工业阀门？欢迎发送 RFQ", "desc": "请提供产品类型、材质、压力等级、连接方式、应用工况、数量及图纸或规格书，我们将根据项目要求提供报价与资料支持。"}, "contact": {"kicker": "联系方式", "title": "提交 RFQ，获取阀门报价与资料支持", "desc": "请尽量提供产品类型、材质、压力等级、连接方式、应用工况、数量及相关图纸或规格书，方便我们更准确评估并回复。", "lines": ["业务邮箱：sales@xinghe-valve.com", "询盘邮箱：rfq@xinghe-valve.com", "WhatsApp：+86 188 5774 8330", "网址：www.xinghe-valve.com", "地址：浙江省温州市珠岙工业园"], "fields": ["姓名", "公司名称", "邮箱", "产品类型", "材质 / 压力", "应用行业"], "textarea": "请输入 RFQ 要求 / 图纸 / 技术需求", "submit": "提交 RFQ"}}, "en": {"langLabel": "English", "brandSub": "Industrial Valve Solutions | Projects & Distribution", "nav": ["Home", "About", "Products", "Applications", "Technical", "Contact"], "inquiry": "Send Inquiry", "quote": "Get Quote", "productsBtn": "View Products", "rfq": "Request RFQ", "docs": "Request Data", "backTop": "Top", "heroBadge1": "Factory Direct | OEM/ODM | Certification Support", "heroBadge2": "12-Hour Quotation | EPC/Distributors | Project Data", "heroTitle": "Industrial valves and automated flow control solutions supported by stable manufacturing capability.\nWe supply ball valves, control valves, isolation valves and automated valve packages according to project requirements.", "heroSlides": [["Stainless Steel Ball Valves", "Factory Direct Supply", "For water treatment, chemical, oil & gas and industrial pipeline systems."], ["Control Valves & Automation", "For EPC & Industrial Projects", "Pneumatic and electric actuator packages for project purchasing and automation integration."], ["Industrial Energy Applications", "Industrial Energy Application", "A visual reference for energy, industrial facilities and project-based applications."]], "about": {"kicker": "About Us", "title": "Valve Supply Support for Industrial\nProjects and Distribution", "desc": "We focus on industrial and automated valve supply, covering ball valves, control valves, isolation valves and actuator packages. With stable manufacturing, quality control and export project support, we provide sustainable valve supply for EPC projects, distribution channels and industrial buyers.", "cards": [["Company Positioning", "We provide industrial and automated valve supply services for overseas project procurement, distribution channels and industrial system packages, helping buyers quickly evaluate product fit, factory capability and cooperation model.", ["Industrial and automated valve supply", "Ball valves, control valves and isolation valves", "Manufacturing and project supply support", "Serving EPC, distributors and industrial buyers"]], ["Product Center", "The product center helps buyers with clear procurement needs by categorizing ball valves, isolation valves, control valves and automated valve solutions, guiding them to product pages, technical data and RFQ submission.", ["Ball valve entry", "Isolation valve entry", "Control and automated valves", "Data review and RFQ submission"]], ["Applications & Technical Support", "Application scenarios such as water treatment, oil & gas, chemical and power, together with selection, material, standard and working condition content, help customers move from actual needs to product selection and inquiry.", ["Water, oil & gas, chemical and power applications", "Valve selection and comparison", "Material, standard and service condition notes", "Contact and inquiry guidance"]]]}, "reasons": {"kicker": "Why Choose Us", "title": "Why Choose Us as Your Industrial Valve Supplier", "desc": "Industrial valve procurement is not only about price. Buyers care more about quality stability, delivery cooperation, project response and documentation support. Xinghe provides stable, clear and sustainable valve supply support for EPC projects, distributors and industrial buyers.", "cards": [["Manufacturing Supply Support", "Supported by stable manufacturing resources, we cover ball valves, control valves, isolation valves and automated valve solutions to help customers obtain reliable product supply and project coordination."], ["Project & Channel Cooperation", "We serve EPC projects, distributors, importers and industrial buyers, providing quotation, documentation, selection and product package support according to project requirements."], ["Fast RFQ Response", "For inquiries, specifications, drawings and project requirements, we provide faster response and basic technical cooperation to support internal evaluation."], ["OEM / ODM Support", "We support brand cooperation, channel supply and project customization, suitable for distributors, importers and long-term partners expanding product lines."], ["Certification & Data Support", "We can provide certificates, product data, testing information and basic technical files according to customer needs, reducing early screening and project review costs."], ["Standard Export Communication", "We communicate clearly around quotation, delivery, documents, packaging, payment and export coordination to improve cooperation efficiency and delivery control."]]}, "qc": {"kicker": "Quality Control", "title": "Reducing Valve Delivery Risks Through Inspection and Testing", "desc": "From material confirmation, machining inspection and assembly inspection to pressure testing and final shipment checks, we control key risks through standardized quality processes to help project customers and channels obtain more stable valve supply.", "steps": [["Material Confirmation", "Confirm material, specifications and incoming status according to project requirements to reduce material mismatch risks."], ["Machining Inspection", "Check key dimensions, sealing surfaces and machining processes to improve consistency of valve bodies and key components."], ["Assembly & Sealing Check", "Check sealing surfaces, connection points and open-close status during assembly to reduce leakage and function risks."], ["Pressure & Function Test", "Conduct pressure, sealing and basic function tests according to project or standard requirements to ensure products meet service needs."], ["Final Inspection & Packing", "Before shipment, check appearance, marking, quantity, documents and packaging to reduce transportation and delivery issues."]]}, "products": {"kicker": "Products", "title": "Industrial Valve Categories and Project Selection Entry", "desc": "We provide ball valves, isolation valves, control valves and automated valve solutions\nfor industrial pipelines, chemical, water treatment, oil & gas, energy and equipment packages.\nCustomers can quickly enter product pages and submit RFQ by working conditions and valve type.", "detailBtn": "Product Details", "cards": {"ball": ["Ball Valves", "Covering stainless steel ball valves, forged steel ball valves, floating ball valves, trunnion mounted ball valves, cryogenic ball valves and high pressure ball valves for industrial pipelines, chemical, water treatment, oil & gas and project packages.", ["Stainless Steel", "Forged Steel", "Floating", "Trunnion"]], "isolation": ["Isolation Valves", "Including gate valves, globe valves, check valves and butterfly valves for pipeline on/off, medium isolation, backflow prevention and general industrial system packages.", ["Gate", "Globe", "Check", "Butterfly"]], "automation": ["Control & Automated Valves", "Including control valves, pneumatic valves, electric valves and actuator packages for automation systems, equipment integration, process control and project-based applications.", ["Control", "Pneumatic", "Electric", "Automation"]]}}, "productPages": {"kicker": "Product Pages", "title": "Confirm Valve Requirements Quickly Through Product Pages", "desc": "Product pages show valve types, applications, material range, pressure ratings, connection options and data entry points, helping customers confirm products according to project requirements and submit RFQ quickly.", "labels": ["Type", "Material", "Pressure", "Application"], "tag1": "Industrial Pipeline", "tag2": "Project Supply", "listDesc": "Suitable for industrial pipelines, project packages, equipment integration and channel supply needs. Specifications, materials, pressure ratings and applications can be confirmed according to project requirements.", "pages": {"ball": {"title": "Ball Valve Product Data", "desc": "Selection can be made according to project conditions, pressure ratings, connection methods and material requirements, suitable for industrial pipelines, chemical, water treatment, oil & gas and general industrial systems, with RFQ and documentation support.", "specs": ["Floating / Trunnion / Forged Steel / Cryogenic Ball Valves", "WCB / CF8 / CF8M / Alloy Steel", "Class 150 - 2500 / PN16 - PN420", "Water, chemical, oil & gas, industrial pipelines"], "list": ["Floating Ball Valve", "Trunnion Ball Valve", "Forged Steel Ball Valve", "Cryogenic Ball Valve"]}, "isolation": {"title": "Isolation Valve Product Data", "desc": "Covering gate valves, globe valves, check valves and butterfly valves for pipeline on/off, medium isolation, backflow prevention and general industrial system packages, with selection and data support based on project parameters.", "specs": ["Gate / Globe / Check / Butterfly Valves", "WCB / CF8 / CF8M / Alloy Steel", "Class 150 - 2500 / PN16 - PN420", "Water, energy, chemical, oil & gas, general industrial systems"], "list": ["Gate Valve", "Globe Valve", "Check Valve", "Butterfly Valve"]}, "automation": {"title": "Control & Automated Valve Data", "desc": "Covering control valves, pneumatic valves, electric valves and actuator packages for automation systems, equipment integration, process control and project-based applications, with solution discussion according to working conditions.", "specs": ["Control / Pneumatic / Electric / Actuator Packages", "Stainless Steel / Carbon Steel / Alloy Materials", "Confirmed by project conditions", "Automation systems, equipment integration, process control"], "list": ["Control Valve", "Pneumatic Valve", "Electric Valve", "Actuator Package"]}}}, "apps": {"kicker": "Applications", "title": "Valve Selection Support for Different Industrial Applications", "desc": "Our valves are used in water treatment, oil & gas energy, chemical systems, power and general industrial applications. Application content helps customers match suitable valve types and submit inquiries according to media, pressure, temperature, pipeline system and project requirements.", "cards": [["Water Treatment", "For pump stations, water supply and drainage, wastewater treatment, industrial circulating water and water engineering systems, supporting on/off, flow control and backflow prevention.", "water"], ["Oil & Gas and Energy", "For oil & gas, energy, power and industrial facility packages, with valve selection based on pressure rating, media conditions and project standards.", "oil"], ["Chemical Systems", "For corrosive media, process pipelines and chemical projects, focusing on material compatibility, sealing performance and service safety.", "chem"], ["Power & Industry", "For power, manufacturing plants, automation equipment and general industrial systems, supporting isolation, regulation, control and automation packages.", "power"]]}, "content": {"kicker": "Technical Resources", "title": "Helping Customers Complete Valve Selection Through Technical Content", "desc": "We organize technical content around valve selection, material choice, pressure ratings, applications, certificates and supplier evaluation, helping customers understand procurement points faster and move from technical questions to product confirmation and RFQ discussion.", "intent": "Procurement Question Entry", "cards": [["What Parameters Are Needed for Valve Selection?", "Help customers confirm size, pressure, material, connection, media and application to reduce selection errors.", "doc"], ["Floating Ball Valves vs Trunnion Ball Valves", "Help customers choose the right ball valve from structure, pressure rating, application and procurement perspectives.", "valve"], ["Which Valve Material Is Suitable for Corrosive Media?", "Help customers initially judge valve material direction based on media, temperature, concentration and corrosion resistance requirements.", "doc"], ["How to Choose Gate, Globe, Check and Butterfly Valves", "Help customers understand different isolation valve applications based on on/off, regulation, backflow prevention and pipeline system needs.", "valve"], ["How to Evaluate an Industrial Valve Manufacturer", "Evaluate supplier reliability from manufacturing capability, quality control, certificates, project experience and export cooperation.", "doc"], ["Certificates and Documents for Industrial Valve Procurement", "Help customers understand common certificates, testing, material, drawing and project documentation requirements before procurement.", "valve"]]}, "factory": {"kicker": "Factory Support", "title": "Stable Manufacturing Capability for Industrial Valve Project Supply", "desc": "With stable manufacturing resources, machining equipment, assembly inspection and project cooperation capability, we provide a reliable valve supply foundation for EPC projects, distribution channels and industrial buyers, supporting long-term cooperation and continuous supply."}, "certs": {"kicker": "Certification Support", "title": "Certification and Project Documentation Support for Procurement Review", "desc": "We can provide relevant certificates, product data, testing records and basic technical files according to customer project needs, helping customers complete supplier screening, project review and internal procurement evaluation.", "list": ["Special Equipment Production License", "PED / CE Certification", "ISO 9001 / ISO 14001 / ISO 45001", "API 6D / API 600 / API 609 / API 6FA"]}, "cta": {"title": "Ready to Purchase Industrial Valves? Send Your RFQ", "desc": "Please provide valve type, material, pressure rating, connection, application, quantity and drawings or specifications. We will provide quotation and documentation support according to project requirements."}, "contact": {"kicker": "Contact", "title": "Submit RFQ for Valve Quotation and Documentation Support", "desc": "Please provide valve type, material, pressure rating, connection, application, quantity and relevant drawings or specifications, so we can evaluate and respond more accurately.", "lines": ["Sales Email: sales@xinghe-valve.com", "RFQ Email: rfq@xinghe-valve.com", "WhatsApp: +86 188 5774 8330", "Website: www.xinghe-valve.com", "Address: Zhu'ao Industrial Park, Wenzhou, Zhejiang, China"], "fields": ["Name", "Company", "Email", "Product Type", "Material / Pressure", "Application"], "textarea": "Enter RFQ requirements / drawings / technical needs", "submit": "Submit RFQ"}}, "ar": {"langLabel": "العربية", "brandSub": "حلول الصمامات الصناعية | توريد للمشاريع وقنوات التوزيع", "nav": ["الرئيسية", "من نحن", "المنتجات", "التطبيقات", "الموارد الفنية", "اتصل بنا"], "inquiry": "إرسال استفسار", "quote": "طلب عرض سعر", "productsBtn": "عرض المنتجات", "rfq": "طلب RFQ", "docs": "طلب المستندات", "backTop": "الأعلى", "heroBadge1": "توريد مباشر من المصنع | OEM/ODM | دعم الشهادات", "heroBadge2": "عرض سعر خلال 12 ساعة | EPC/موزعون | دعم بيانات المشاريع", "heroTitle": "حلول الصمامات الصناعية والتحكم الآلي في التدفق مدعومة بقدرات تصنيع مستقرة.\nنوفر صمامات كروية، وصمامات تحكم، وصمامات عزل وحلول صمامات آلية حسب متطلبات المشروع.", "heroSlides": [["صمامات كروية من الفولاذ المقاوم للصدأ", "توريد مباشر من المصنع", "مناسبة لمعالجة المياه والكيماويات والنفط والغاز وأنظمة الأنابيب الصناعية."], ["صمامات التحكم وحلول الأتمتة", "لمشاريع EPC والمشاريع الصناعية", "حزم مشغلات هوائية وكهربائية مناسبة للمشتريات الصناعية وتكامل أنظمة الأتمتة."], ["تطبيقات الطاقة الصناعية", "تطبيقات الطاقة الصناعية", "عرض بصري مناسب لقطاعات الطاقة والمنشآت الصناعية والتطبيقات القائمة على المشاريع."]], "about": {"kicker": "من نحن", "title": "دعم توريد الصمامات للمشاريع الصناعية وقنوات التوزيع", "desc": "نركز على توريد الصمامات الصناعية والصمامات الآلية، وتشمل منتجاتنا الصمامات الكروية، وصمامات التحكم، وصمامات العزل وحزم المشغلات. من خلال التصنيع المستقر ومراقبة الجودة ودعم مشاريع التصدير، نوفر دعماً مستداماً لتوريد الصمامات لمشاريع EPC وقنوات التوزيع والعملاء الصناعيين.", "cards": [["تموضع الشركة", "نقدم خدمات توريد الصمامات الصناعية والآلية، مع التركيز على دعم مشتريات المشاريع الخارجية وقنوات التوزيع واحتياجات الأنظمة الصناعية، لمساعدة العملاء على تقييم ملاءمة المنتج وقدرة المصنع وطريقة التعاون بسرعة.", ["توريد الصمامات الصناعية والآلية", "صمامات كروية وصمامات تحكم وصمامات عزل", "دعم التصنيع وتوريد المشاريع", "خدمة EPC والموزعين والمشترين الصناعيين"]], ["مركز المنتجات", "يساعد مركز المنتجات العملاء ذوي الاحتياجات الواضحة على تصفح الصمامات الكروية وصمامات العزل وصمامات التحكم والحلول الآلية، والدخول إلى صفحات المنتجات والبيانات الفنية وتقديم RFQ.", ["مدخل الصمامات الكروية", "مدخل صمامات العزل", "صمامات التحكم والصمامات الآلية", "مراجعة البيانات وتقديم RFQ"]], ["التطبيقات والدعم الفني", "تساعد تطبيقات معالجة المياه والنفط والغاز والكيماويات والطاقة، إلى جانب محتوى الاختيار والمواد والمعايير وظروف التشغيل، العملاء على الانتقال من الاحتياج الفعلي إلى اختيار المنتج وإرسال الاستفسار.", ["تطبيقات المياه والنفط والغاز والكيماويات والطاقة", "اختيار الصمامات والمقارنة بينها", "شرح المواد والمعايير وظروف التشغيل", "توجيه التواصل وتقديم الاستفسار"]]]}, "reasons": {"kicker": "لماذا تختارنا", "title": "لماذا تختارنا كمورد للصمامات الصناعية", "desc": "شراء الصمامات الصناعية لا يعتمد على السعر فقط. يهتم العملاء أكثر باستقرار الجودة، والتعاون في التسليم، وسرعة الاستجابة للمشاريع، ودعم المستندات. تقدم Xinghe دعماً مستقراً وواضحاً ومستداماً لتوريد الصمامات لمشاريع EPC والموزعين والعملاء الصناعيين.", "cards": [["دعم التوريد من المصنع", "اعتماداً على موارد تصنيع مستقرة، نوفر الصمامات الكروية وصمامات التحكم وصمامات العزل والحلول الآلية لمساعدة العملاء على الحصول على توريد أكثر استقراراً ودعم أفضل للمشاريع."], ["التعاون مع المشاريع والقنوات", "نخدم مشاريع EPC والموزعين والمستوردين والعملاء الصناعيين، ونوفر عروض الأسعار والمستندات ودعم الاختيار وحلول المنتجات حسب متطلبات المشروع."], ["استجابة سريعة لطلبات RFQ", "بالنسبة للاستفسارات والمواصفات والرسومات ومتطلبات المشاريع، نوفر استجابة أسرع ودعماً فنياً أساسياً لمساعدة العملاء على متابعة التقييم الداخلي."], ["دعم OEM / ODM", "ندعم التعاون بالعلامة التجارية وتوريد القنوات واحتياجات التخصيص للمشاريع، وهو مناسب للموزعين والمستوردين والعملاء طويلي الأجل لتوسيع خطوط المنتجات."], ["دعم الشهادات والبيانات", "يمكننا تقديم الشهادات وبيانات المنتجات ومعلومات الاختبار والملفات الفنية الأساسية حسب احتياجات العملاء، مما يساعد على تقليل تكلفة الفحص الأولي ومراجعة المشاريع."], ["تواصل تصديري منظم", "نتواصل بوضوح حول عرض السعر ووقت التسليم والمستندات والتغليف والدفع وتنسيق التصدير، لتحسين كفاءة التعاون والتحكم في التسليم."]]}, "qc": {"kicker": "مراقبة الجودة", "title": "تقليل مخاطر تسليم الصمامات عبر الفحص والاختبار", "desc": "من تأكيد المواد وفحص التشغيل والتجميع إلى اختبار الضغط وفحص الشحن، نتحكم في المخاطر الرئيسية من خلال إجراءات جودة منظمة لمساعدة عملاء المشاريع وقنوات التوزيع على الحصول على توريد أكثر استقراراً للصمامات.", "steps": [["تأكيد المواد", "تأكيد المادة والمواصفات وحالة المواد الواردة وفق متطلبات المشروع لتقليل مخاطر عدم مطابقة المواد."], ["فحص التشغيل", "فحص الأبعاد الرئيسية وأسطح الإحكام وعمليات التشغيل لتحسين اتساق جسم الصمام والمكونات الأساسية."], ["فحص التجميع والإحكام", "فحص أسطح الإحكام ونقاط التوصيل وحالة الفتح والإغلاق أثناء التجميع لتقليل مخاطر التسرب والخلل الوظيفي."], ["اختبار الضغط والوظيفة", "إجراء اختبار الضغط والإحكام والوظائف الأساسية وفق متطلبات المشروع أو المعايير لضمان تلبية احتياجات الاستخدام."], ["الفحص النهائي والتغليف", "فحص المظهر والعلامات والكمية والمستندات والتغليف قبل الشحن لتقليل مشاكل النقل والتسليم."]]}, "products": {"kicker": "مركز المنتجات", "title": "تصنيفات الصمامات الصناعية ومدخل اختيار المشاريع", "desc": "نوفر الصمامات الكروية وصمامات العزل وصمامات التحكم وحلول الصمامات الآلية لتطبيقات الأنابيب الصناعية والكيماويات ومعالجة المياه والنفط والغاز والطاقة وتجهيزات المعدات. يمكن للعملاء الدخول بسرعة إلى صفحات المنتجات المناسبة وتقديم RFQ حسب ظروف التشغيل ونوع الصمام واحتياجات الشراء.", "detailBtn": "تفاصيل المنتج", "cards": {"ball": ["الصمامات الكروية", "تشمل صمامات كروية من الفولاذ المقاوم للصدأ، صمامات فولاذية مطروقة، صمامات عائمة، صمامات مرتكزة، صمامات منخفضة الحرارة وعالية الضغط لتطبيقات الأنابيب الصناعية والكيماويات ومعالجة المياه والنفط والغاز.", ["ستانلس ستيل", "فولاذ مطروق", "عائم", "مرتكز"]], "isolation": ["صمامات العزل", "تشمل صمامات البوابة، الصمامات الأرضية، صمامات عدم الرجوع وصمامات الفراشة لاستخدامات الفتح والإغلاق والعزل ومنع الرجوع وأنظمة الصناعة العامة.", ["بوابة", "صمام أرضي", "عدم رجوع", "فراشة"]], "automation": ["صمامات التحكم والآلية", "تشمل صمامات التحكم والصمامات الهوائية والكهربائية وحزم المشغلات لأنظمة الأتمتة وتكامل المعدات والتحكم في العمليات والتطبيقات المشروعّية.", ["تحكم", "هوائي", "كهربائي", "أتمتة"]]}}, "productPages": {"kicker": "صفحات المنتجات", "title": "تأكيد متطلبات الصمامات بسرعة عبر صفحات المنتجات", "desc": "تعرض صفحات المنتجات أنواع الصمامات، التطبيقات، نطاق المواد، درجات الضغط، خيارات التوصيل ومدخل البيانات، لمساعدة العملاء على تأكيد المنتجات وفق متطلبات المشروع وتقديم RFQ بسرعة.", "labels": ["النوع", "المادة", "الضغط", "التطبيق"], "tag1": "أنابيب صناعية", "tag2": "توريد مشاريع", "listDesc": "مناسب للأنابيب الصناعية وتجهيزات المشاريع وتكامل المعدات واحتياجات قنوات التوزيع. يمكن تأكيد المواصفات والمواد ودرجات الضغط والتطبيقات حسب متطلبات المشروع.", "pages": {"ball": {"title": "بيانات الصمامات الكروية", "desc": "يمكن الاختيار حسب ظروف المشروع ودرجات الضغط وطرق التوصيل ومتطلبات المواد، وهي مناسبة للأنابيب الصناعية والكيماويات ومعالجة المياه والنفط والغاز، مع دعم RFQ والمستندات.", "specs": ["صمامات عائمة / مرتكزة / مطروقة / منخفضة الحرارة", "WCB / CF8 / CF8M / فولاذ سبائكي", "Class 150 - 2500 / PN16 - PN420", "المياه، الكيماويات، النفط والغاز، الأنابيب الصناعية"], "list": ["صمام كروي عائم", "صمام كروي مرتكز", "صمام كروي فولاذي مطروق", "صمام كروي منخفض الحرارة"]}, "isolation": {"title": "بيانات صمامات العزل", "desc": "تشمل صمامات البوابة والصمامات الأرضية وصمامات عدم الرجوع وصمامات الفراشة للفتح والإغلاق والعزل ومنع الرجوع وأنظمة الصناعة العامة، مع دعم الاختيار والبيانات حسب معايير المشروع.", "specs": ["بوابة / صمام أرضي / عدم رجوع / فراشة", "WCB / CF8 / CF8M / فولاذ سبائكي", "Class 150 - 2500 / PN16 - PN420", "المياه، الطاقة، الكيماويات، النفط والغاز، الأنظمة الصناعية"], "list": ["صمام بوابة", "صمام أرضي", "صمام عدم رجوع", "صمام فراشة"]}, "automation": {"title": "بيانات صمامات التحكم والآلية", "desc": "تشمل صمامات التحكم والصمامات الهوائية والكهربائية وحزم المشغلات لأنظمة الأتمتة وتكامل المعدات والتحكم في العمليات والتطبيقات المشروعّية، مع إمكانية مناقشة الحل حسب ظروف التشغيل.", "specs": ["تحكم / هوائي / كهربائي / مشغلات", "ستانلس ستيل / كربون ستيل / مواد سبائكية", "حسب ظروف المشروع", "أنظمة الأتمتة، تكامل المعدات، التحكم في العمليات"], "list": ["صمام تحكم", "صمام هوائي", "صمام كهربائي", "حزمة مشغل"]}}}, "apps": {"kicker": "التطبيقات", "title": "دعم اختيار الصمامات لمختلف التطبيقات الصناعية", "desc": "تستخدم صماماتنا في معالجة المياه والنفط والغاز والطاقة والأنظمة الكيميائية والكهرباء والتطبيقات الصناعية العامة. يساعد محتوى التطبيقات العملاء على مطابقة نوع الصمام المناسب وتقديم الاستفسار حسب الوسط والضغط والحرارة ونظام الأنابيب ومتطلبات المشروع.", "cards": [["معالجة المياه", "لمحطات الضخ وشبكات المياه والصرف ومعالجة مياه الصرف والمياه الصناعية الدائرية، مع دعم الفتح والإغلاق والتحكم في التدفق ومنع الرجوع.", "water"], ["النفط والغاز والطاقة", "لمشاريع النفط والغاز والطاقة والكهرباء والمنشآت الصناعية، مع اختيار الصمامات حسب درجة الضغط وظروف الوسط ومعايير المشروع.", "oil"], ["الأنظمة الكيميائية", "للوسائط المسببة للتآكل وخطوط العمليات والمشاريع الكيميائية، مع التركيز على توافق المواد وأداء الإحكام وسلامة التشغيل.", "chem"], ["الكهرباء والصناعة", "للكهرباء والمصانع ومعدات الأتمتة والأنظمة الصناعية العامة، مع دعم العزل والتنظيم والتحكم وحلول الأتمتة.", "power"]]}, "content": {"kicker": "الموارد الفنية", "title": "مساعدة العملاء على إكمال اختيار الصمامات عبر محتوى فني", "desc": "ننظم محتوى فنياً حول اختيار الصمامات والمواد ودرجات الضغط والتطبيقات والشهادات وتقييم الموردين، لمساعدة العملاء على فهم نقاط الشراء بسرعة والانتقال من الأسئلة الفنية إلى تأكيد المنتج ومناقشة RFQ.", "intent": "مدخل أسئلة الشراء", "cards": [["ما المعايير المطلوبة لاختيار الصمام؟", "مساعدة العملاء على تأكيد المقاس والضغط والمادة والتوصيل والوسط والتطبيق لتقليل أخطاء الاختيار.", "doc"], ["الفرق بين الصمام الكروي العائم والمرتكز", "مساعدة العملاء على اختيار الصمام الكروي المناسب من حيث الهيكل ودرجة الضغط والتطبيق والشراء.", "valve"], ["ما مادة الصمام المناسبة للوسائط المسببة للتآكل؟", "مساعدة العملاء على تحديد اتجاه المادة حسب الوسط والحرارة والتركيز ومتطلبات مقاومة التآكل.", "doc"], ["كيفية اختيار صمامات البوابة والصمامات الأرضية وعدم الرجوع والفراشة", "مساعدة العملاء على فهم تطبيقات صمامات العزل المختلفة حسب الفتح والإغلاق والتنظيم ومنع الرجوع ونظام الأنابيب.", "valve"], ["كيفية تقييم مصنع صمامات صناعية", "تقييم موثوقية المورد من خلال القدرة التصنيعية ومراقبة الجودة والشهادات وخبرة المشاريع والتعاون التصديري.", "doc"], ["الشهادات والمستندات المطلوبة لشراء الصمامات الصناعية", "مساعدة العملاء على فهم الشهادات والاختبارات والمواد والرسومات ومتطلبات مستندات المشروع قبل الشراء.", "valve"]]}, "factory": {"kicker": "دعم المصنع", "title": "قدرة تصنيع مستقرة لتوريد مشاريع الصمامات الصناعية", "desc": "بفضل موارد التصنيع المستقرة ومعدات التشغيل وفحص التجميع وقدرة التعاون مع المشاريع، نوفر أساساً موثوقاً لتوريد الصمامات لمشاريع EPC وقنوات التوزيع والعملاء الصناعيين، مع دعم التعاون طويل الأجل والتوريد المستمر."}, "certs": {"kicker": "دعم الشهادات", "title": "دعم الشهادات ومستندات المشاريع لمراجعة الشراء", "desc": "يمكننا تقديم الشهادات ذات الصلة وبيانات المنتجات وسجلات الاختبار والملفات الفنية الأساسية حسب احتياجات المشروع، لمساعدة العملاء على إكمال فحص الموردين ومراجعة المشروع وتقييم الشراء الداخلي.", "list": ["رخصة إنتاج المعدات الخاصة", "شهادة PED / CE", "ISO 9001 / ISO 14001 / ISO 45001", "API 6D / API 600 / API 609 / API 6FA"]}, "cta": {"title": "هل تستعد لشراء صمامات صناعية؟ أرسل RFQ", "desc": "يرجى تقديم نوع الصمام، المادة، درجة الضغط، طريقة التوصيل، التطبيق، الكمية والرسومات أو المواصفات. سنقدم عرض السعر ودعم المستندات حسب متطلبات المشروع."}, "contact": {"kicker": "اتصل بنا", "title": "إرسال RFQ للحصول على عرض سعر ودعم مستندات الصمامات", "desc": "يرجى تقديم نوع الصمام، المادة، درجة الضغط، طريقة التوصيل، التطبيق، الكمية والرسومات أو المواصفات ذات الصلة، حتى نتمكن من التقييم والرد بدقة أكبر.", "lines": ["البريد التجاري: sales@xinghe-valve.com", "بريد RFQ: rfq@xinghe-valve.com", "WhatsApp: +86 188 5774 8330", "الموقع: www.xinghe-valve.com", "العنوان: مجمع Zhu'ao الصناعي، ونتشو، تشجيانغ، الصين"], "fields": ["الاسم", "اسم الشركة", "البريد الإلكتروني", "نوع المنتج", "المادة / الضغط", "مجال التطبيق"], "textarea": "أدخل متطلبات RFQ / الرسومات / الاحتياجات الفنية", "submit": "إرسال RFQ"}}, "ko": {"langLabel": "한국어", "brandSub": "산업용 밸브 솔루션 | 프로젝트 및 유통 공급", "nav": ["홈", "회사소개", "제품", "적용분야", "기술자료", "문의하기"], "inquiry": "문의 보내기", "quote": "견적 요청", "productsBtn": "제품 보기", "rfq": "RFQ 요청", "docs": "자료 요청", "backTop": "맨 위", "heroBadge1": "공장 직공급 | OEM/ODM | 인증 지원", "heroBadge2": "12시간 견적 | EPC/대리점 | 프로젝트 자료 지원", "heroTitle": "안정적인 제조 역량을 기반으로 산업용 밸브와 자동화 유량 제어 솔루션을 제공합니다.\n프로젝트 요구에 따라 볼 밸브, 컨트롤 밸브, 차단 밸브 및 자동화 밸브 패키지를 공급합니다.", "heroSlides": [["스테인리스 볼 밸브", "공장 직공급", "수처리, 화학, 오일·가스 및 산업 배관 시스템에 적합합니다."], ["컨트롤 밸브 및 자동화 솔루션", "EPC 및 산업 프로젝트용", "공압·전동 액추에이터 패키지로 프로젝트 구매와 자동화 시스템 통합에 적합합니다."], ["산업 에너지 적용 분야", "산업 에너지 적용", "에너지, 산업 설비 및 프로젝트형 적용 분야를 보여주는 시각 자료입니다."]], "about": {"kicker": "회사소개", "title": "산업 프로젝트와 유통 고객을 위한 밸브 공급 지원", "desc": "우리는 산업용 밸브와 자동화 밸브 공급에 집중하며, 볼 밸브, 컨트롤 밸브, 차단 밸브 및 액추에이터 패키지를 제공합니다. 안정적인 제조 역량과 품질 관리로 EPC 프로젝트와 유통 고객을 지원합니다.", "cards": [["회사 포지션", "산업용 및 자동화 밸브 공급 서비스를 제공하며 해외 프로젝트 구매, 유통 채널 공급, 산업 시스템 패키지 수요를 지원합니다.", ["산업용 및 자동화 밸브 공급", "볼 밸브, 컨트롤 밸브, 차단 밸브", "제조 및 프로젝트 공급 지원", "EPC, 대리점, 산업 구매 고객 지원"]], ["제품 센터", "제품 센터는 볼 밸브, 차단 밸브, 컨트롤 밸브, 자동화 밸브 솔루션을 분류하여 제품 페이지와 기술 자료 및 RFQ 제출로 연결합니다.", ["볼 밸브 제품입구", "차단 밸브 제품입구", "컨트롤 밸브 및 자동화 밸브", "자료 확인 및 RFQ 제출"]], ["적용 분야 및 기술 지원", "수처리, 오일·가스, 화학, 전력 등 적용 분야와 기술 설명을 통해 고객이 실제 수요에서 제품 선택과 문의 단계로 이동할 수 있도록 돕습니다.", ["수처리, 오일·가스, 화학, 전력 적용", "밸브 선정 및 비교 콘텐츠", "소재, 표준, 운전 조건 설명", "문의 및 RFQ 제출 유도"]]]}, "reasons": {"kicker": "선택 이유", "title": "왜 우리를 산업용 밸브 공급업체로 선택할까요", "desc": "산업용 밸브 구매는 가격만으로 결정되지 않습니다. 고객은 품질의 안정성, 납기 협업, 프로젝트 대응 속도와 자료 지원을 더 중요하게 봅니다. Xinghe는 EPC 프로젝트, 유통 채널 및 산업 구매 고객에게 보다 안정적이고 명확하며 지속 가능한 밸브 공급 지원을 제공합니다.", "cards": [["제조 기반 공급 지원", "안정적인 제조 역량을 바탕으로 볼 밸브, 컨트롤 밸브, 차단 밸브 및 자동화 밸브 솔루션을 공급하여 보다 안정적인 제품 공급과 프로젝트 협업을 지원합니다."], ["프로젝트 및 채널 협업", "EPC 프로젝트, 대리점, 수입업체 및 산업 구매 고객을 대상으로 프로젝트 요구에 맞춘 견적, 자료, 선정 및 제품 패키지 지원을 제공합니다."], ["빠른 RFQ 대응", "문의, 사양 자료, 도면 및 프로젝트 요구사항에 대해 더 빠른 응답과 기본 기술 지원을 제공하여 고객의 내부 검토를 돕습니다."], ["OEM / ODM 지원", "브랜드 협업, 채널 공급 및 프로젝트 맞춤 요구를 지원하며 대리점, 수입업체 및 장기 협력 고객의 제품 라인 확장에 적합합니다."], ["인증 및 자료 지원", "고객 요구에 따라 인증, 제품 자료, 시험 정보 및 기본 기술 문서를 제공하여 초기 선별과 프로젝트 검토 비용을 줄일 수 있도록 돕습니다."], ["표준화된 수출 커뮤니케이션", "견적, 납기, 자료, 포장, 결제 및 수출 협업을 표준화하여 후속 협력 효율과 납품 통제성을 높입니다."]]}, "qc": {"kicker": "품질 관리", "title": "검사와 시험을 통해 밸브 납품 리스크를 줄입니다", "desc": "자재 확인, 가공 검사, 조립 검사부터 압력 시험과 출하 검사까지 표준화된 품질 프로세스로 핵심 리스크를 관리하여 프로젝트 고객과 채널 고객이 보다 안정적인 밸브 공급을 받을 수 있도록 돕습니다.", "steps": [["원자재 확인", "프로젝트 요구에 따라 자재, 규격 및 입고 상태를 확인하여 자재 불일치로 인한 품질 리스크를 줄입니다."], ["가공 공정 검사", "핵심 치수, 밀봉면 및 가공 공정을 점검하여 밸브 바디와 주요 부품의 일관성을 높입니다."], ["조립 및 밀봉 검사", "조립 단계에서 밀봉면, 연결 부위 및 개폐 상태를 점검하여 누설과 기능 이상 리스크를 줄입니다."], ["압력 및 기능 시험", "프로젝트 또는 표준 요구에 따라 압력 시험, 밀봉 시험 및 기본 기능 확인을 수행하여 제품이 사용 요구를 충족하는지 확인합니다."], ["출하 검사 및 포장", "출하 전 외관, 표시, 수량, 자료 및 포장 상태를 점검하여 운송과 납품 단계의 문제를 줄입니다."]]}, "products": {"kicker": "제품 센터", "title": "산업용 밸브 분류와 프로젝트 선정입구", "desc": "볼 밸브, 차단 밸브, 컨트롤 밸브 및 자동화 밸브 솔루션을 제공하며 산업 배관, 화학, 수처리, 오일·가스, 에너지 및 장비 패키지 분야에 적용됩니다.", "detailBtn": "제품 상세", "cards": {"ball": ["볼 밸브", "스테인리스, 단조강, 플로팅, 트러니언, 저온 및 고압 볼 밸브를 포함합니다.", ["스테인리스", "단조강", "플로팅", "트러니언"]], "isolation": ["차단 밸브", "게이트, 글로브, 체크, 버터플라이 밸브를 포함합니다.", ["게이트", "글로브", "체크", "버터플라이"]], "automation": ["컨트롤 및 자동화 밸브", "컨트롤, 공압, 전동 밸브 및 액추에이터 패키지를 포함합니다.", ["컨트롤", "공압", "전동", "자동화"]]}}, "productPages": {"kicker": "제품 페이지", "title": "제품 상세 페이지를 통해 밸브 요구사항을 빠르게 확인", "desc": "제품 상세 페이지는 밸브 유형, 적용 조건, 재질 범위, 압력 등급, 연결 방식 및 자료 입구를 보여주어 고객이 프로젝트 요구에 맞는 제품을 빠르게 확인하고 RFQ를 제출할 수 있도록 돕습니다.", "labels": ["제품 유형", "재질", "압력", "적용"], "tag1": "산업용 배관", "tag2": "프로젝트 공급", "listDesc": "산업용 배관, 프로젝트 패키지, 장비 통합 및 채널 공급 요구에 적합하며 사양, 재질, 압력 등급 및 적용 조건에 따라 확인할 수 있습니다.", "pages": {"ball": {"title": "볼 밸브 제품 상세 자료", "desc": "프로젝트 조건, 압력 등급, 연결 방식 및 재질 요구에 따라 선정할 수 있으며 산업용 배관, 화학, 수처리, 오일·가스 및 일반 산업 시스템에 적합하고 RFQ 및 자료 지원을 제공합니다.", "specs": ["플로팅 볼 밸브 / 트러니언 볼 밸브 / 단조강 볼 밸브 / 저온 볼 밸브", "WCB / CF8 / CF8M / 합금강", "Class 150 - 2500 / PN16 - PN420", "수처리, 화학, 오일·가스, 일반 산업 배관"], "list": ["플로팅 볼 밸브", "트러니언 볼 밸브", "단조강 볼 밸브", "저온 볼 밸브"]}, "isolation": {"title": "차단 밸브 제품 상세 자료", "desc": "게이트 밸브, 글로브 밸브, 체크 밸브 및 버터플라이 밸브를 포함하며 배관 개폐, 유체 차단, 역류 방지 및 일반 산업 시스템 패키지에 적합하고 프로젝트 조건에 따라 선정 및 자료 지원을 제공합니다.", "specs": ["게이트 밸브 / 글로브 밸브 / 체크 밸브 / 버터플라이 밸브", "WCB / CF8 / CF8M / 합금강", "Class 150 - 2500 / PN16 - PN420", "수처리, 에너지, 화학, 오일·가스, 일반 산업 시스템"], "list": ["게이트 밸브", "글로브 밸브", "체크 밸브", "버터플라이 밸브"]}, "automation": {"title": "컨트롤 밸브 및 자동화 밸브 자료", "desc": "컨트롤 밸브, 공압 밸브, 전동 밸브 및 액추에이터 패키지를 포함하며 자동화 시스템, 장비 통합, 프로세스 제어 및 프로젝트형 적용에 적합하고 운전 조건에 따른 솔루션 협의가 가능합니다.", "specs": ["컨트롤 밸브 / 공압 밸브 / 전동 밸브 / 액추에이터 패키지", "스테인리스강 / 탄소강 / 합금 재질", "프로젝트 조건에 따라 확인", "자동화 시스템, 장비 통합, 프로세스 제어"], "list": ["컨트롤 밸브", "공압 밸브", "전동 밸브", "액추에이터 패키지"]}}}, "apps": {"kicker": "적용 분야", "title": "다양한 산업 적용에 맞춘 밸브 선정 지원", "desc": "당사의 밸브 제품은 수처리, 오일·가스 에너지, 화학 시스템, 전력 및 일반 산업 분야에 적용됩니다. 적용 분야 설명을 통해 고객이 유체, 압력, 온도, 배관 시스템 및 프로젝트 요구에 따라 적합한 밸브 유형을 빠르게 찾고 문의를 제출할 수 있도록 돕습니다.", "cards": [["수처리", "펌프 스테이션, 급배수, 폐수 처리, 산업 순환수 및 수처리 엔지니어링 시스템에 적합하며 배관 개폐, 유량 제어 및 역류 방지 요구를 지원합니다.", "water"], ["오일·가스 및 에너지", "오일·가스, 에너지, 전력 및 산업 설비 프로젝트에 적용되며 압력 등급, 유체 조건 및 프로젝트 표준에 따라 밸브를 선정할 수 있습니다.", "oil"], ["화학 시스템", "부식성 유체, 공정 배관 및 화학 프로젝트의 밸브 선정에 적합하며 재질 적합성, 밀봉 성능 및 운전 안전성을 중점적으로 고려합니다.", "chem"], ["전력 및 산업", "전력, 제조 공장, 자동화 설비 및 일반 산업 시스템에 서비스를 제공하며 차단, 조절, 제어 및 자동화 패키지 수요를 지원합니다.", "power"]]}, "content": {"kicker": "기술 자료", "title": "전문 기술 콘텐츠로 고객의 밸브 선정 지원", "desc": "밸브 선정, 재질 선택, 압력 등급, 적용 조건, 인증 자료 및 공급업체 평가를 중심으로 기술 콘텐츠를 정리하여 고객이 구매 핵심 포인트를 더 빠르게 이해하고 기술 질문에서 제품 확인 및 RFQ 소통으로 이어질 수 있도록 돕습니다.", "intent": "구매 문의 입구", "cards": [["밸브 선정 시 어떤 파라미터를 확인해야 하나요", "구경, 압력, 재질, 연결 방식, 유체 및 적용 조건을 확인하여 선정 오류를 줄일 수 있도록 돕습니다.", "doc"], ["플로팅 볼 밸브와 트러니언 볼 밸브의 차이", "구조, 압력 등급, 적용 분야 및 구매 관점에서 어떤 볼 밸브가 적합한지 판단할 수 있도록 돕습니다.", "valve"], ["부식성 유체에는 어떤 밸브 재질이 적합한가요", "유체 특성, 온도, 농도 및 내식성 요구를 기준으로 밸브 재질 방향을 초기에 판단할 수 있도록 돕습니다.", "doc"], ["게이트 밸브, 글로브 밸브, 체크 밸브, 버터플라이 밸브는 어떻게 선택하나요", "개폐, 조절, 역류 방지 및 배관 시스템 요구에 따라 각 차단 밸브의 적합한 적용을 이해할 수 있도록 돕습니다.", "valve"], ["산업용 밸브 제조업체는 어떻게 평가하나요", "제조 역량, 품질 관리, 인증 자료, 프로젝트 경험 및 수출 협업 능력을 기준으로 공급업체의 신뢰성을 판단할 수 있도록 돕습니다.", "doc"], ["산업용 밸브 구매 시 어떤 인증과 자료를 확인해야 하나요", "구매 전에 자주 요구되는 인증, 시험, 재질, 도면 및 프로젝트 자료 요구를 이해할 수 있도록 돕습니다.", "valve"]]}, "factory": {"kicker": "공장 지원", "title": "안정적인 제조 역량으로 산업용 밸브 프로젝트 공급 지원", "desc": "안정적인 제조 기반, 가공 설비, 조립 검사 및 프로젝트 협업 역량을 바탕으로 EPC 프로젝트, 유통 채널 및 산업 구매 고객에게 보다 신뢰할 수 있는 밸브 공급 기반을 제공합니다."}, "certs": {"kicker": "인증 지원", "title": "인증 자격과 프로젝트 자료로 구매 심사 지원", "desc": "고객 프로젝트 요구에 따라 관련 인증 정보, 제품 자료, 시험 기록 및 기본 기술 문서를 제공하여 공급업체 선별, 프로젝트 심사 및 내부 구매 평가를 지원합니다.", "list": ["특수설비 제조 허가증", "PED / CE 인증", "ISO 9001 / ISO 14001 / ISO 45001", "API 6D / API 600 / API 609 / API 6FA"]}, "cta": {"title": "산업용 밸브를 구매할 예정이신가요? RFQ를 보내주세요", "desc": "제품 유형, 재질, 압력 등급, 연결 방식, 적용 조건, 수량 및 도면 또는 사양서를 제공해 주시면 프로젝트 요구에 따라 견적과 자료를 지원해 드립니다."}, "contact": {"kicker": "문의하기", "title": "RFQ를 제출하고 밸브 견적 및 자료 지원을 받아보세요", "desc": "제품 유형, 재질, 압력 등급, 연결 방식, 적용 조건, 수량 및 관련 도면 또는 사양서를 최대한 제공해 주시면 보다 정확하게 검토하고 답변드릴 수 있습니다.", "lines": ["영업 이메일: sales@xinghe-valve.com", "RFQ 이메일: rfq@xinghe-valve.com", "WhatsApp: +86 188 5774 8330", "웹사이트: www.xinghe-valve.com", "주소: 중국 저장성 원저우 주아오 산업단지"], "fields": ["이름", "회사명", "이메일", "제품 유형", "재질 / 압력", "적용 산업"], "textarea": "RFQ 요구사항 / 도면 / 기술 요구를 입력해 주세요", "submit": "RFQ 제출"}}, "ru": {"langLabel": "Русский", "brandSub": "Решения для промышленных клапанов | Проекты и дистрибуция", "nav": ["Главная", "О нас", "Продукция", "Отрасли", "Материалы", "Контакты"], "inquiry": "Отправить запрос", "quote": "Получить цену", "productsBtn": "Продукция", "rfq": "Запрос RFQ", "docs": "Документы", "backTop": "Наверх", "heroBadge1": "Поставка с завода | OEM/ODM | Поддержка сертификатов", "heroBadge2": "Котировка за 12 часов | EPC/дистрибьюторы | Документы проекта", "heroTitle": "Промышленные клапаны и решения автоматизированного управления потоками на базе стабильных производственных возможностей.\nМы поставляем шаровые клапаны, регулирующие клапаны, запорные клапаны и автоматизированные клапанные узлы по требованиям проекта.", "heroSlides": [["Шаровые клапаны из нержавеющей стали", "Поставка с завода", "Для водоочистки, химической промышленности, нефти и газа, а также промышленных трубопроводов."], ["Регулирующие клапаны и автоматизация", "Для EPC и промышленных проектов", "Пневматические и электрические приводы для проектных закупок и интеграции систем автоматизации."], ["Промышленные энергетические применения", "Промышленная энергетика", "Визуальное представление для энергетики, промышленных объектов и проектных применений."]], "about": {"kicker": "О нас", "title": "Поддержка поставок клапанов для\nпромышленных проектов и дистрибуции", "desc": "Мы поставляем промышленные и автоматизированные клапаны для EPC-проектов, дистрибьюторов и промышленных заказчиков. Благодаря стабильному производству, контролю качества и сопровождению экспортных проектов, мы обеспечиваем надежную поставку клапанов и долгосрочную поддержку сотрудничества.", "cards": [["Позиционирование компании", "Мы предоставляем услуги по поставке промышленных и автоматизированных клапанов, поддерживая закупки зарубежных проектов, дистрибьюторские каналы и потребности промышленных систем.", ["Поставка промышленных и автоматизированных клапанов", "Шаровые, регулирующие и запорные клапаны", "Производственная и проектная поддержка", "Для EPC, дистрибьюторов и промышленных закупщиков"]], ["Центр продукции", "Центр продукции помогает заказчикам выбрать шаровые клапаны, запорные клапаны, регулирующие клапаны и автоматизированные решения, перейти к страницам продуктов, техническим данным и отправке RFQ.", ["Раздел шаровых клапанов", "Раздел запорных клапанов", "Регулирующие и автоматизированные клапаны", "Просмотр данных и отправка RFQ"]], ["Применения и техническая поддержка", "Сценарии применения в водоочистке, нефти и газе, химии и энергетике, а также материалы по выбору клапанов, материалам, стандартам и условиям эксплуатации помогают перейти от потребности к выбору продукта.", ["Водоочистка, нефть и газ, химия, энергетика", "Выбор и сравнение клапанов", "Материалы, стандарты и условия эксплуатации", "Переход к контакту и отправке запроса"]]]}, "reasons": {"kicker": "Почему выбирают нас", "title": "Почему выбирают нас как поставщика промышленных клапанов", "desc": "Закупка промышленных клапанов зависит не только от цены. Заказчики больше ценят стабильность качества, согласование поставок, скорость реакции на проект и поддержку документации.", "cards": [["Поддержка поставок с производства", "Опираясь на стабильные производственные ресурсы, мы поставляем шаровые клапаны, регулирующие клапаны, запорные клапаны и автоматизированные решения."], ["Сотрудничество по проектам и каналам", "Мы обслуживаем EPC-проекты, дистрибьюторов, импортеров и промышленных заказчиков, предоставляя предложения, документацию, подбор и комплектацию."], ["Быстрый ответ на RFQ", "Для запросов, спецификаций, чертежей и проектных требований мы предоставляем быстрый ответ и базовую техническую поддержку."], ["Поддержка OEM / ODM", "Поддерживаем брендированное сотрудничество, поставки для каналов и индивидуальные проектные требования."], ["Поддержка сертификатов и данных", "Предоставляем сертификаты, данные продукции, информацию об испытаниях и базовые технические файлы по запросу клиента."], ["Стандартизированная экспортная коммуникация", "Четко согласовываем цену, сроки поставки, документы, упаковку, оплату и экспортное сопровождение."]]}, "qc": {"kicker": "Контроль качества", "title": "Снижение рисков поставки клапанов через проверки и испытания", "desc": "От подтверждения материалов и контроля обработки до сборки, испытаний давлением и финальной проверки — мы контролируем ключевые риски через стандартизированный процесс качества.", "steps": [["Подтверждение материалов", "Подтверждение материала, спецификаций и входного состояния по требованиям проекта для снижения риска несоответствия."], ["Контроль обработки", "Проверка ключевых размеров, уплотнительных поверхностей и процессов обработки."], ["Проверка сборки и герметичности", "Контроль уплотнительных поверхностей, соединений и состояния открытия/закрытия на этапе сборки."], ["Испытания давлением и функции", "Проведение испытаний давлением, герметичности и базовой функции по требованиям проекта или стандарта."], ["Финальная проверка и упаковка", "Перед отгрузкой проверяются внешний вид, маркировка, количество, документы и упаковка."]]}, "products": {"kicker": "Продукция", "title": "Категории промышленных клапанов и вход для проектного подбора", "desc": "Мы предлагаем шаровые клапаны, запорные клапаны, регулирующие клапаны и автоматизированные решения для промышленных трубопроводов, химии, водоочистки, нефти и газа, энергетики и оборудования.", "detailBtn": "Детали продукта", "cards": {"ball": ["Шаровые клапаны", "Включая нержавеющие, кованые, плавающие, цапфовые, криогенные и высоконапорные шаровые клапаны для промышленных трубопроводов и проектных комплектов.", ["Нержавеющая сталь", "Кованая сталь", "Плавающий", "Цапфовый"]], "isolation": ["Запорные клапаны", "Включая задвижки, клапаны проходные клапаны, обратные и бабочковые клапаны для открытия/закрытия, изоляции среды и предотвращения обратного потока.", ["Задвижка", "проходной клапан", "Обратный", "Бабочковый"]], "automation": ["Регулирующие и автоматизированные клапаны", "Включая регулирующие, пневматические, электрические клапаны и комплекты приводов для систем автоматизации.", ["Регулирование", "Пневматика", "Электрика", "Автоматизация"]]}}, "productPages": {"kicker": "Страницы продукции", "title": "Быстрое подтверждение требований к клапанам через страницы продукции", "desc": "Страницы продукции показывают типы клапанов, применения, диапазон материалов, классы давления, варианты соединений и вход для данных.", "labels": ["Тип", "Материал", "Давление", "Применение"], "tag1": "Промышленный трубопровод", "tag2": "Проектная поставка", "listDesc": "Подходит для промышленных трубопроводов, проектных комплектов, интеграции оборудования и поставок каналам.", "pages": {"ball": {"title": "Данные шаровых клапанов", "desc": "Подбор выполняется по условиям проекта, классу давления, типу соединения и требованиям к материалам.", "specs": ["Плавающие / цапфовые / кованые / криогенные", "WCB / CF8 / CF8M / легированная сталь", "Class 150 - 2500 / PN16 - PN420", "Водоочистка, химия, нефть и газ"], "list": ["Плавающий шаровой клапан", "Цапфовый шаровой клапан", "Кованый шаровой клапан", "Криогенный шаровой клапан"]}, "isolation": {"title": "Данные запорных клапанов", "desc": "Задвижки, проходные клапаны, обратные и бабочковые клапаны для открытия/закрытия и изоляции среды.", "specs": ["Задвижка / проходной клапан / обратный / бабочковый", "WCB / CF8 / CF8M / легированная сталь", "Class 150 - 2500 / PN16 - PN420", "Вода, энергетика, химия, нефть и газ"], "list": ["Задвижка", "проходной клапан", "Обратный клапан", "Бабочковый клапан"]}, "automation": {"title": "Данные регулирующих и автоматизированных клапанов", "desc": "Регулирующие, пневматические, электрические клапаны и комплекты приводов для автоматизации.", "specs": ["Регулирующий / пневматический / электрический / привод", "Нержавеющая сталь / углеродистая сталь / сплавы", "По условиям проекта", "Автоматизация и управление процессами"], "list": ["Регулирующий клапан", "Пневматический клапан", "Электрический клапан", "Комплект привода"]}}}, "apps": {"kicker": "Отрасли", "title": "Поддержка подбора клапанов для различных промышленных применений", "desc": "Наши клапаны применяются в водоочистке, нефти и газе, энергетике, химических системах и общепромышленных областях.", "cards": [["Водоочистка", "Для насосных станций, водоснабжения, канализации и промышленных водных систем.", "water"], ["Нефть, газ и энергетика", "Для нефтегазовых, энергетических и промышленных объектов.", "oil"], ["Химические системы", "Для коррозионных сред, технологических линий и химических проектов.", "chem"], ["Электроэнергетика и промышленность", "Для электростанций, заводов и автоматизированного оборудования.", "power"]]}, "content": {"kicker": "Технические материалы", "title": "Помогаем клиентам выполнять подбор клапанов через технический контент", "desc": "Технические материалы помогают понять подбор клапанов, материалы, давление, применения, сертификаты и оценку поставщиков.", "intent": "Вход для закупочных вопросов", "cards": [["Какие параметры нужны для подбора клапана?", "Размер, давление, материал, соединение, среда и применение.", "doc"], ["Плавающий и цапфовый шаровой клапан", "Выбор по конструкции, давлению, применению и закупочным требованиям.", "valve"], ["Какой материал подходит для коррозионных сред?", "Определение материала по среде, температуре и коррозионной стойкости.", "doc"], ["Как выбрать задвижку, проходные клапаны, обратный и бабочковый клапан", "Подбор по задачам открытия/закрытия, регулирования и обратного потока.", "valve"], ["Как оценить производителя промышленных клапанов", "Оценка возможностей, качества, сертификатов и проектного опыта.", "doc"], ["Сертификаты и документы для закупки клапанов", "Сертификаты, испытания, материалы, чертежи и проектная документация.", "valve"]]}, "factory": {"kicker": "Поддержка завода", "title": "Стабильные производственные возможности для поставки промышленных клапанов", "desc": "Стабильные производственные ресурсы, оборудование, сборочный контроль и проектная кооперация создают надежную основу поставки клапанов."}, "certs": {"kicker": "Сертификация", "title": "Сертификаты и проектная документация для закупочной проверки", "desc": "Предоставляем сертификаты, данные продукции, протоколы испытаний и технические файлы по требованиям проекта.", "list": ["Лицензия на производство специального оборудования", "Сертификация PED / CE", "ISO 9001 / ISO 14001 / ISO 45001", "API 6D / API 600 / API 609 / API 6FA"]}, "cta": {"title": "Планируете закупку промышленных клапанов? Отправьте RFQ", "desc": "Укажите тип клапана, материал, класс давления, соединение, применение, количество, чертежи или спецификации."}, "contact": {"kicker": "Контакты", "title": "Отправьте RFQ для получения цены и документации по клапанам", "desc": "Укажите тип клапана, материал, класс давления, соединение, применение, количество и чертежи.", "lines": ["Sales Email: sales@xinghe-valve.com", "RFQ Email: rfq@xinghe-valve.com", "WhatsApp: +86 188 5774 8330", "Website: www.xinghe-valve.com", "Address: Zhu'ao Industrial Park, Wenzhou, Zhejiang, China"], "fields": ["Имя", "Компания", "Email", "Тип продукта", "Материал / давление", "Отрасль применения"], "textarea": "Введите требования RFQ / чертежи / технические требования", "submit": "Отправить RFQ"}}};

function makePlaceholder(title, from = "#dbeafe", to = "#93c5fd", accent = "#f97316") {
  const svg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 900"><defs><linearGradient id="g" x1="0" y1="0" x2="1" y2="1"><stop offset="0%" stop-color="${from}"/><stop offset="100%" stop-color="${to}"/></linearGradient></defs><rect width="1200" height="900" fill="url(#g)"/><circle cx="160" cy="170" r="130" fill="#fff" opacity=".22"/><circle cx="1040" cy="170" r="150" fill="#fff" opacity=".20"/><circle cx="940" cy="760" r="210" fill="#fff" opacity=".16"/><g transform="translate(105 170)"><rect x="0" y="310" width="990" height="118" rx="59" fill="#0f172a" opacity=".88"/><circle cx="178" cy="369" r="82" fill="${accent}"/><circle cx="178" cy="369" r="42" fill="#e2e8f0"/><rect x="266" y="328" width="390" height="78" rx="22" fill="#1e293b"/><rect x="690" y="338" width="220" height="60" rx="18" fill="#334155"/><rect x="365" y="150" width="120" height="150" rx="24" fill="${accent}"/><rect x="730" y="150" width="120" height="150" rx="24" fill="${accent}"/><rect x="407" y="88" width="35" height="90" rx="14" fill="#cbd5e1"/><rect x="772" y="88" width="35" height="90" rx="14" fill="#cbd5e1"/></g><rect x="60" y="62" width="430" height="70" rx="35" fill="#fff" opacity=".92"/><text x="92" y="108" font-family="Arial, sans-serif" font-size="30" font-weight="800" fill="#0f172a">${title}</text></svg>`;
  return `data:image/svg+xml;charset=UTF-8,${encodeURIComponent(svg)}`;
}

function makeIcon(type) {
  const paths = {
    water: `<path d="M60 27C72 47 83 60 83 76c0 14-10 25-23 25S37 90 37 76c0-16 11-29 23-49Z"/><path d="M31 36c8 13 16 22 16 34 0 10-7 18-16 18S15 80 15 70c0-12 8-21 16-34Z"/><path d="M90 34c8 13 16 22 16 34 0 10-7 18-16 18s-16-8-16-18c0-12 8-21 16-34Z"/>`,
    oil: `<path d="M28 68h64"/><rect x="18" y="53" width="19" height="30"/><rect x="83" y="53" width="19" height="30"/><rect x="44" y="53" width="32" height="30"/><path d="M60 28v25M47 28h26M51 19h18"/>`,
    chem: `<path d="M29 86V56h17c6 0 10-5 10-11v-7"/><path d="M91 86V56H74c-6 0-10-5-10-11v-7"/><circle cx="60" cy="31" r="13"/><path d="M44 56h32"/><rect x="24" y="85" width="16" height="14"/><rect x="80" y="85" width="16" height="14"/>`,
    power: `<path d="M28 94h66V66l-14 8v-8l-14 8V60H35l-7 34Z"/><path d="M39 60V38h16v22"/><path d="M49 36c5-12 20-11 23 0 10-3 17 4 16 13 11 1 13 14 2 18H67"/>`,
    doc: `<path d="M32 20h42l16 16v64H32V20Z"/><path d="M74 20v18h16"/><path d="M43 49h26M43 63h37M43 77h23"/><circle cx="78" cy="80" r="13"/><path d="M72 80l4 4 9-10"/>`,
    valve: `<path d="M24 37h72"/><path d="M24 37v15M48 37v15M72 37v15M96 37v15"/><path d="M18 70l20-13v26L18 70Z"/><rect x="45" y="57" width="18" height="26"/><path d="M70 57l22 13-22 13V57Z"/><path d="M92 57l18 26M110 57 92 83"/>`,
  };
  const svg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120" fill="none"><rect x="8" y="8" width="104" height="104" rx="22" fill="#fff"/><g stroke="#1f559d" stroke-width="5" stroke-linecap="round" stroke-linejoin="round">${paths[type] || paths.valve}</g></svg>`;
  return `data:image/svg+xml;charset=UTF-8,${encodeURIComponent(svg)}`;
}

function flag(code) {
  const flags = {
    zh: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 40"><rect width="60" height="40" rx="4" fill="#de2910"/><polygon points="12,8 14,13 19,13 15,16 17,21 12,18 7,21 9,16 5,13 10,13" fill="#ffde00"/></svg>`,
    en: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 40"><rect width="60" height="40" rx="4" fill="#012169"/><path d="M0 0l60 40M60 0L0 40" stroke="#fff" stroke-width="8"/><path d="M0 0l60 40M60 0L0 40" stroke="#c8102e" stroke-width="4"/><path d="M30 0v40M0 20h60" stroke="#fff" stroke-width="13"/><path d="M30 0v40M0 20h60" stroke="#c8102e" stroke-width="7"/></svg>`,
    ar: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 40"><rect width="60" height="40" rx="4" fill="#006c35"/><text x="30" y="25" text-anchor="middle" font-size="13" font-family="Arial" font-weight="700" fill="#fff">SA</text></svg>`,
    ko: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 40">
      <rect width="60" height="40" rx="4" fill="#ffffff"/>
      <g transform="translate(30 20)">
        <path d="M0-8a8 8 0 1 1 0 16a4 4 0 1 0 0-8a4 4 0 0 1 0-8Z" fill="#cd2e3a"/>
        <path d="M0 8a8 8 0 1 1 0-16a4 4 0 1 0 0 8a4 4 0 0 1 0 8Z" fill="#0047a0"/>
      </g>
      <g fill="#111827">
        <g transform="translate(12 9) rotate(-33)">
          <rect x="-5.2" y="-4.2" width="10.4" height="1.8" rx=".5"/>
          <rect x="-5.2" y="-0.9" width="10.4" height="1.8" rx=".5"/>
          <rect x="-5.2" y="2.4" width="10.4" height="1.8" rx=".5"/>
        </g>
        <g transform="translate(48 9) rotate(33)">
          <rect x="-5.2" y="-4.2" width="10.4" height="1.8" rx=".5"/>
          <rect x="-5.2" y="-0.9" width="4.2" height="1.8" rx=".5"/>
          <rect x="1.0" y="-0.9" width="4.2" height="1.8" rx=".5"/>
          <rect x="-5.2" y="2.4" width="10.4" height="1.8" rx=".5"/>
        </g>
        <g transform="translate(12 31) rotate(33)">
          <rect x="-5.2" y="-4.2" width="4.2" height="1.8" rx=".5"/>
          <rect x="1.0" y="-4.2" width="4.2" height="1.8" rx=".5"/>
          <rect x="-5.2" y="-0.9" width="10.4" height="1.8" rx=".5"/>
          <rect x="-5.2" y="2.4" width="4.2" height="1.8" rx=".5"/>
          <rect x="1.0" y="2.4" width="4.2" height="1.8" rx=".5"/>
        </g>
        <g transform="translate(48 31) rotate(-33)">
          <rect x="-5.2" y="-4.2" width="4.2" height="1.8" rx=".5"/>
          <rect x="1.0" y="-4.2" width="4.2" height="1.8" rx=".5"/>
          <rect x="-5.2" y="-0.9" width="4.2" height="1.8" rx=".5"/>
          <rect x="1.0" y="-0.9" width="4.2" height="1.8" rx=".5"/>
          <rect x="-5.2" y="2.4" width="4.2" height="1.8" rx=".5"/>
          <rect x="1.0" y="2.4" width="4.2" height="1.8" rx=".5"/>
        </g>
      </g>
    </svg>`,
    ru: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 40"><rect width="60" height="40" rx="4" fill="#fff"/><rect y="13.3" width="60" height="13.4" fill="#0039a6"/><rect y="26.7" width="60" height="13.3" fill="#d52b1e"/></svg>`,
  };
  return `data:image/svg+xml;charset=UTF-8,${encodeURIComponent(flags[code] || flags.zh)}`;
}

function CheckIcon({ className }) {
  return <svg className={className} viewBox="0 0 20 20" fill="currentColor"><path d="M10 1.7a8.3 8.3 0 1 0 0 16.6A8.3 8.3 0 0 0 10 1.7Zm3.8 6.7-4.6 4.6a1 1 0 0 1-1.4 0L6.2 11.4a1 1 0 1 1 1.4-1.4l.9.9 3.9-3.9a1 1 0 0 1 1.4 1.4Z"/></svg>;
}


function getButtonLinks() {
  const links = window.XINGHE_LINKS || {};
  return {
    headerInquiry: links.headerInquiry || "#contact",
    ctaInquiry: links.ctaInquiry || "#contact",
    linkedin: links.linkedin || "#",
    facebook: links.facebook || "#",
    whatsapp: links.whatsapp || "https://wa.me/8618857748330?text=Hello%2C%20I%20would%20like%20to%20inquire%20about%20industrial%20valves.",
    submitRfq: links.submitRfq || "https://wa.me/8618857748330?text=Hello%2C%20I%20would%20like%20to%20submit%20an%20RFQ%20for%20industrial%20valves.",
    heroQuote: links.heroQuote || "#contact",
    heroProducts: links.heroProducts || "#products",
    heroBadge1: links.heroBadge1 || "#contact",
    heroBadge2: links.heroBadge2 || "#contact",
    heroTitleLink: links.heroTitleLink || "#contact",
    aboutCompany: links.aboutCompany || "#structure",
    aboutProducts: links.aboutProducts || "#products",
    aboutSupport: links.aboutSupport || "#applications",
    productQuote: links.productQuote || "#contact",
    productDocs: links.productDocs || "#contact",
    productListRfq: links.productListRfq || "#contact",
    qcMaterial: links.qcMaterial || "#contact",
    qcMachining: links.qcMachining || "#contact",
    qcAssembly: links.qcAssembly || "#contact",
    qcPressure: links.qcPressure || "#contact",
    qcPacking: links.qcPacking || "#contact",
    appWater: links.appWater || "#contact",
    appOil: links.appOil || "#contact",
    appChem: links.appChem || "#contact",
    appPower: links.appPower || "#contact",
    contentSelectionParams: links.contentSelectionParams || "#contact",
    contentFloatingTrunnion: links.contentFloatingTrunnion || "#contact",
    contentCorrosiveMaterials: links.contentCorrosiveMaterials || "#contact",
    contentIsolationChoice: links.contentIsolationChoice || "#contact",
    contentManufacturerEval: links.contentManufacturerEval || "#contact",
    contentCertDocs: links.contentCertDocs || "#contact",
  };
}

function externalLinkProps(url) {
  return url && !url.startsWith("#") ? { target: "_blank", rel: "noopener noreferrer" } : {};
}

function SectionTitle({ kicker, title, desc }) {
  const isRussian = /[А-Яа-яЁё]/.test(title || "");
  const isEnglishAbout = title === "Valve Supply Support for Industrial\nProjects and Distribution";
  const isEnglishProductsTitle = title === "Industrial Valve Categories and Project Selection Entry";
  return <div className={`${isRussian ? "max-w-[1180px]" : isEnglishAbout ? "max-w-[1040px]" : isEnglishProductsTitle ? "max-w-[980px]" : "max-w-3xl"} text-left`}>
    <div className="inline-flex rounded-full border border-[#b9d4ee] bg-[#dceaf7] px-5 py-3 text-sm font-black tracking-wide text-orange-600 shadow-sm">{kicker}</div>
    <h2 className={`mt-5 whitespace-pre-line font-black tracking-tight text-slate-950 ${isRussian ? "text-[1.75rem] leading-[1.18] md:text-[2.05rem] xl:text-[2.28rem]" : isEnglishAbout ? "text-[2.4rem] leading-[1.14] md:text-[45px] xl:text-[45px]" : "text-3xl leading-[1.16] md:text-[42px] md:leading-[1.14]"}`}>{title}</h2>
    {desc && <p className={`mt-5 whitespace-pre-line leading-[2] text-slate-700 ${isRussian ? "max-w-[980px] text-[15px]" : isEnglishProductsTitle ? "max-w-[980px] text-lg" : "max-w-3xl text-lg"}`}>{desc}</p>}
  </div>;
}

function Header({ t, currentLang, setLang }) {
  const [open, setOpen] = useState(false);
  const buttonLinks = getButtonLinks();
  const langs = [["en", "English"], ["ar", "العربية"], ["ko", "한국어"], ["ru", "Русский"], ["zh", "中文"]];
  const current = langs.find(([c]) => c === currentLang) || langs[4];
  const links = ["#home", "#structure", "#products", "#applications", "#content-pages", "#contact"];
  return <header className="sticky top-0 z-50 border-b-2 border-slate-900 bg-white/90 backdrop-blur-md">
    <div className="mx-auto flex w-full max-w-[1560px] items-center justify-between gap-4 px-10 py-5 xl:px-14">
      <div className="min-w-[270px] shrink-0"><div className="text-[32px] font-extrabold tracking-wide text-slate-900">XINGHE</div><div className="mt-1 text-[16px] text-slate-500">{t.brandSub}</div></div>
      <div className="hidden items-center gap-4 lg:flex"><nav className="flex items-center gap-1 text-[17px] font-semibold text-slate-700">
        {t.nav.map((n,i) => links[i] === "#home" ? <button key={n} type="button" onClick={() => window.scrollTo({top:0, behavior:"smooth"})} className="whitespace-nowrap px-3 py-2 hover:text-slate-950">{n}</button> : <a key={n} href={links[i]} className="whitespace-nowrap px-3 py-2 hover:text-slate-950">{n}</a>)}
      </nav>
      <div className="relative"><button onClick={() => setOpen(!open)} className="flex h-[42px] min-w-[140px] items-center gap-2 rounded-full border border-slate-300 bg-white px-4 text-sm font-medium text-slate-800 shadow-sm"><img src={flag(current[0])} alt="flag" className="h-5 w-7 rounded-sm border object-cover" /><span>{current[1]}</span><span>▾</span></button>
      {open && <div className="absolute left-0 top-full mt-3 w-[190px] overflow-hidden rounded-[22px] border border-slate-200 bg-white py-2 shadow-xl">{langs.map(([code,label]) => <button key={code} onClick={() => { setLang(code); setOpen(false); }} className="flex w-full items-center gap-3 px-4 py-3 text-left text-sm hover:bg-slate-50"><img src={flag(code)} alt="" className="h-5 w-7 rounded-sm border object-cover" />{label}</button>)}</div>}
      </div><a href={buttonLinks.headerInquiry} {...externalLinkProps(buttonLinks.headerInquiry)} className="inline-flex h-[42px] min-w-[168px] shrink-0 items-center justify-center whitespace-nowrap rounded-full bg-slate-950 px-6 text-sm font-semibold leading-none text-white">{t.inquiry}</a></div>
    </div>
  </header>;
}


function HeroCardMedia({ slide }) {
  if (slide.video) {
    return <video src={slide.video} className="h-full w-full object-cover" autoPlay muted loop playsInline preload="metadata" poster={slide.image || ""} />;
  }
  return <HeroCardMedia slide={slide} />;
}

function Hero({ t, data, currentLang }) {
  const [index, setIndex] = useState(0);
  const buttonLinks = getButtonLinks();
  useEffect(() => { const timer = setInterval(() => setIndex(v => (v + 1) % data.slides.length), 3500); return () => clearInterval(timer); }, [data.slides.length]);
  const slide = data.slides[index];
  return <section id="home" className="relative h-[980px] overflow-hidden bg-[#d9e8f6] lg:h-[1020px]">
    {data.bg.map((img,i)=><img key={i} src={img} alt="" className={`absolute inset-0 h-full w-full object-cover transition-opacity duration-700 ${i===index?"opacity-100":"opacity-0"}`} />)}
    <div className="absolute inset-0 bg-gradient-to-br from-[#d7e8f6]/35 via-[#eef5fb]/15 to-[#b8d2eb]/35" />
    <div className="relative mx-auto flex h-full max-w-7xl -translate-y-8 items-center px-6 py-8"><div className="grid w-full translate-y-[28%] gap-10 lg:grid-cols-[1.15fr_0.85fr] lg:items-stretch">
      <div className="relative flex h-[540px] max-w-[720px] flex-col text-left"><div className="flex translate-y-[20px] flex-col items-start gap-[42px]">
        <a href={buttonLinks.heroBadge1} {...externalLinkProps(buttonLinks.heroBadge1)} className={`group inline-flex h-[58px] items-center gap-4 whitespace-nowrap rounded-full border border-slate-300 bg-white px-[28px] font-semibold text-slate-800 shadow-sm transition hover:-translate-y-0.5 hover:shadow-md ${currentLang==="ru"?"text-[17px]":"text-[20px]"}`}><span>{t.heroBadge1}</span><span className="text-slate-500 transition group-hover:translate-x-1">→</span></a>
        <a href={buttonLinks.heroBadge2} {...externalLinkProps(buttonLinks.heroBadge2)} className={`group inline-flex h-[58px] items-center gap-4 whitespace-nowrap rounded-full border border-slate-300 bg-white px-[28px] font-semibold text-slate-800 shadow-sm transition hover:-translate-y-0.5 hover:shadow-md ${currentLang==="ru"?"text-[17px]":"text-[20px]"}`}><span>{t.heroBadge2}</span><span className="text-slate-500 transition group-hover:translate-x-1">→</span></a>
      </div><a href={buttonLinks.heroTitleLink} {...externalLinkProps(buttonLinks.heroTitleLink)} className={`group mt-[75px] inline-flex max-w-[700px] items-end justify-between gap-5 whitespace-pre-line rounded-[24px] border border-white/55 bg-white/60 px-6 py-5 font-black leading-[1.26] tracking-tight text-slate-950 shadow-sm backdrop-blur-sm transition hover:-translate-y-0.5 hover:shadow-md ${currentLang==="en"?"text-[1.28rem] md:text-[1.5rem] xl:text-[1.68rem]": currentLang==="ru"?"text-[1.15rem] md:text-[1.34rem] xl:text-[1.5rem]":"text-[1.45rem] md:text-[1.7rem] xl:text-[1.9rem]"}`}><span>{t.heroTitle}</span><span className="shrink-0 text-[1.2rem] text-slate-600 transition group-hover:translate-x-1">→</span></a>
      <div className="mt-auto flex translate-y-6 flex-wrap items-center gap-4 pt-[15px]"><a href={buttonLinks.heroQuote} {...externalLinkProps(buttonLinks.heroQuote)} className="inline-flex h-[52px] min-w-[140px] items-center justify-center rounded-full bg-orange-500 px-8 text-[16px] font-semibold text-white hover:bg-orange-600">{t.quote}</a><a href={buttonLinks.heroProducts} {...externalLinkProps(buttonLinks.heroProducts)} className="ml-6 inline-flex h-[52px] min-w-[160px] items-center justify-center rounded-full border border-slate-300 bg-white px-8 text-[16px] font-semibold text-slate-900 hover:border-slate-400">{t.productsBtn}</a></div></div>
      <div className="flex self-stretch items-stretch lg:translate-y-6"><div className="mx-auto flex h-[540px] w-[440px] overflow-hidden rounded-[30px] border border-white/30 bg-white/62 p-4 shadow-sm backdrop-blur-sm lg:ml-auto lg:mr-0"><div className="relative h-full w-full overflow-hidden rounded-[26px] bg-slate-200"><img src={slide.image} alt={slide.title} className="h-full w-full object-cover" /><div className="absolute inset-0 bg-gradient-to-t from-slate-950/78 via-slate-900/24 to-transparent" /><div className="absolute inset-x-0 bottom-0 p-6 text-white"><div className="text-[13px] font-semibold uppercase tracking-[0.16em] text-white/80">{slide.subtitle}</div><div className="mt-2 text-[28px] font-bold leading-tight">{slide.title}</div><div className="mt-2 text-[15px] leading-7 text-white/90">{slide.desc}</div></div></div></div></div>
    </div></div>
    <button onClick={() => setIndex((index-1+data.slides.length)%data.slides.length)} className="absolute left-16 top-1/2 z-20 hidden h-20 w-20 -translate-y-1/2 items-center justify-center rounded-[30px] bg-slate-500/40 shadow-lg backdrop-blur-md transition hover:bg-slate-600/50 lg:flex"><svg className="h-9 w-9 text-white" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3.2" strokeLinecap="round" strokeLinejoin="round"><path d="M15 18l-6-6 6-6" /></svg></button>
    <button onClick={() => setIndex((index+1)%data.slides.length)} className="absolute right-16 top-1/2 z-20 hidden h-20 w-20 -translate-y-1/2 items-center justify-center rounded-[30px] bg-slate-500/40 shadow-lg backdrop-blur-md transition hover:bg-slate-600/50 lg:flex"><svg className="h-9 w-9 text-white" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3.2" strokeLinecap="round" strokeLinejoin="round"><path d="M9 18l6-6-6-6" /></svg></button>
    <div className="absolute inset-x-0 bottom-8 z-10 flex justify-center gap-3">{data.slides.map((_,i)=><button key={i} onClick={() => setIndex(i)} className={`h-3 w-3 rounded-full ${i===index?"bg-blue-600":"bg-white/80"}`} />)}</div>
  </section>;
}

function Structure({ t }) {
  const links = getButtonLinks();
  const cardLinks = [links.aboutCompany, links.aboutProducts, links.aboutSupport];
  const btnText = t.langLabel === "English" ? "View Section" : t.langLabel === "Русский" ? "Смотреть раздел" : "查看板块";
  return <section id="structure" className="scroll-mt-[112px] bg-white pt-[72px] pb-16"><div className="mx-auto max-w-7xl px-6"><SectionTitle {...t.about} /><div className="mt-10 grid gap-5 lg:grid-cols-3">{t.about.cards.map((item,idx)=><a key={item[0]} href={cardLinks[idx]} {...externalLinkProps(cardLinks[idx])} className="group flex h-full flex-col rounded-[30px] border border-slate-200 bg-[#f7f9fc] p-7 shadow-sm transition hover:-translate-y-1 hover:border-blue-300 hover:shadow-lg"><div className="flex h-14 w-14 items-center justify-center rounded-2xl bg-[#dceaf7] text-2xl font-black text-slate-900">{idx+1}</div><div className="mt-5 text-2xl font-bold text-slate-950">{item[0]}</div><p className={`mt-4 min-h-[168px] text-slate-700 ${/[А-Яа-яЁё]/.test(item[1]||"")?"text-[14px] leading-7":"text-base leading-8"}`}>{item[1]}</p><div className={`mt-auto flex min-h-[150px] flex-col justify-end space-y-2 pt-5 ${/[А-Яа-яЁё]/.test(item[0]||"")?(idx===0?"translate-y-2":"-translate-y-10"):""}`}>{item[2].map(point=><div key={point} className="flex items-start gap-3 text-sm leading-7 text-slate-700"><CheckIcon className="mt-1 h-4 w-4 shrink-0 text-orange-500" /><span>{point}</span></div>)}</div><span className="mt-6 inline-flex w-fit items-center rounded-full bg-blue-600 px-5 py-3 text-sm font-semibold text-white transition group-hover:bg-blue-700">{btnText} →</span></a>)}</div></div></section>;
}

function Cards({ items }) { return <div className="mt-10 grid gap-5 md:grid-cols-2 lg:grid-cols-3">{items.map(item=><div key={item.title} className="rounded-[28px] border border-slate-200 bg-white p-7 shadow-sm"><div className="text-xl font-bold text-slate-950">{item.title}</div><p className="mt-3 text-base leading-8 text-slate-700">{item.desc}</p></div>)}</div>; }

function Products({ t, images, setProduct }) {
  const cards = [["ball", images.ball], ["isolation", images.isolation], ["automation", images.control]];
  return <section id="products" className="scroll-mt-[112px] bg-white pt-[72px] pb-20"><div className="mx-auto max-w-7xl px-6"><SectionTitle {...t.products} /><div className="mt-12 grid items-stretch gap-7 lg:grid-cols-3">{cards.map(([key,image])=>{ const item=t.products.cards[key]; return <div key={key} className="flex h-full flex-col overflow-hidden rounded-[30px] border border-slate-200 bg-[#f7f9fc] shadow-sm"><img src={image} alt={item[0]} className="aspect-[4/3] w-full object-cover" /><div className="flex flex-1 flex-col p-7"><div className={`font-bold text-slate-950 ${t.langLabel==="Русский"?"min-h-[56px] text-[20px] leading-[1.28]":"text-2xl leading-[1.25]"}`}>{item[0]}</div><p className={`mt-4 text-slate-700 ${t.langLabel==="English"?"min-h-[168px] text-[14px] leading-7": t.langLabel==="Русский"?"min-h-[184px] text-base leading-8":"min-h-[168px] text-base leading-8"}`}>{item[1]}</p><div className={`mt-4 flex min-h-[76px] flex-wrap content-start gap-2 ${t.langLabel==="Русский"?"items-start":""}`}>{item[2].map(tag=><span key={tag} className="rounded-full border border-slate-200 bg-white px-3 py-1.5 text-xs font-semibold text-slate-700">{tag}</span>)}</div><div className={`mt-auto pt-6 ${t.langLabel==="Русский"?"min-h-[76px] flex items-start":""}`}><button onClick={() => { setProduct(key); document.querySelector("#product-pages")?.scrollIntoView({behavior:"smooth"}); }} className="rounded-full bg-orange-500 px-5 py-3 text-sm font-semibold text-white hover:bg-orange-600">{t.products.detailBtn} →</button></div></div></div>; })}</div></div></section>;
}


function AutoCarousel({ images, altPrefix = "slide", interval = 3200, className = "", imgClassName = "", containerClassName = "" }) {
  const validImages = (images || []).filter(Boolean);
  const [active, setActive] = useState(0);
  useEffect(() => {
    if (validImages.length <= 1) return;
    const timer = setInterval(() => setActive((prev) => (prev + 1) % validImages.length), interval);
    return () => clearInterval(timer);
  }, [validImages.length, interval]);
  if (!validImages.length) return null;
  return <div className={`relative overflow-hidden ${containerClassName}`}>
    <div className={`relative ${className}`}>
      {validImages.map((img, i) => <img key={i} src={img} alt={`${altPrefix}-${i + 1}`} className={`${i === active ? 'opacity-100' : 'opacity-0'} absolute inset-0 h-full w-full object-contain transition-opacity duration-700 ${imgClassName}`} />)}
    </div>
    {validImages.length > 1 && <div className="absolute bottom-3 left-1/2 flex -translate-x-1/2 gap-1.5 rounded-full bg-white/70 px-2 py-1 backdrop-blur-sm">{validImages.map((_, i) => <button type="button" aria-label={`${altPrefix}-${i + 1}`} key={i} onClick={() => setActive(i)} className={`h-2.5 w-2.5 rounded-full transition ${i === active ? 'bg-orange-500' : 'bg-slate-300'}`} />)}</div>}
  </div>;
}

function ProductPages({ t, images, product }) {
  const p = t.productPages.pages[product] || t.productPages.pages.isolation;
  const image = product === "ball" ? images.ball : product === "automation" ? images.control : images.isolation;
  const slides = (p.list || []).map((name, index) => ({
    name,
    image,
    index,
  }));
  const [activeSlide, setActiveSlide] = useState(0);

  useEffect(() => {
    setActiveSlide(0);
  }, [product]);

  useEffect(() => {
    if (slides.length <= 1) return;
    const timer = setInterval(() => {
      setActiveSlide((prev) => (prev + 1) % slides.length);
    }, 3200);
    return () => clearInterval(timer);
  }, [slides.length, product]);

  const currentSlide = slides[activeSlide] || slides[0] || { name: p.title, image };

  return <section id="product-pages" className="scroll-mt-[112px] bg-[#f7f9fc] pt-[72px] pb-20"><div className="mx-auto max-w-7xl px-6"><SectionTitle {...t.productPages} /><div className="mt-10 grid gap-8 lg:grid-cols-[0.92fr_1.08fr]"><div className="overflow-hidden rounded-[32px] border border-slate-200 bg-white shadow-sm"><div className="relative aspect-[4/3] overflow-hidden bg-slate-200">{slides.map((slide, i) => <div key={slide.name} className={`absolute inset-0 transition-opacity duration-700 ${i === activeSlide ? 'opacity-100' : 'pointer-events-none opacity-0'}`}><img src={slide.image} alt={slide.name} className="h-full w-full object-cover" /><div className="absolute inset-0 bg-gradient-to-t from-slate-950/18 via-slate-900/4 to-transparent" /><div className="absolute left-6 top-6 rounded-full bg-white px-5 py-2 text-[13px] font-black uppercase tracking-[0.08em] text-slate-950 shadow-sm">{slide.name}</div><div className="absolute right-6 top-6 rounded-full bg-white/85 px-4 py-2 text-xs font-semibold text-slate-700 shadow-sm">{String(i + 1).padStart(2, '0')} / {String(slides.length).padStart(2, '0')}</div></div>)}{slides.length > 1 && <div className="absolute inset-x-0 bottom-5 flex justify-center gap-2">{slides.map((slide, i) => <button key={slide.name} type="button" aria-label={slide.name} onClick={() => setActiveSlide(i)} className={`h-2.5 w-2.5 rounded-full transition ${i === activeSlide ? 'w-7 bg-orange-500' : 'bg-white/90 hover:bg-white'}`} />)}</div>}</div><div className="p-7"><div className="text-3xl font-black text-slate-950">{p.title}</div><p className="mt-4 text-base leading-8 text-slate-700">{p.desc}</p><div className="mt-6 grid gap-3 sm:grid-cols-2">{t.productPages.labels.map((label,i)=><div key={label} className="rounded-2xl border border-slate-200 bg-[#f7f9fc] px-4 py-3"><div className="text-xs font-bold uppercase tracking-[0.12em] text-slate-500">{label}</div><div className="mt-2 text-sm font-semibold text-slate-900">{p.specs[i]}</div></div>)}</div><div className="mt-6 flex flex-wrap gap-3"><a href={getButtonLinks().productQuote} {...externalLinkProps(getButtonLinks().productQuote)} className="rounded-full bg-slate-950 px-5 py-3 text-sm font-semibold text-white">{t.quote}</a><a href={getButtonLinks().productDocs} {...externalLinkProps(getButtonLinks().productDocs)} className="rounded-full border border-slate-400 bg-white px-5 py-3 text-sm font-semibold text-slate-900">{t.docs}</a></div></div></div><div className="space-y-5">{p.list.map((name, idx)=><div key={name} onClick={() => setActiveSlide(idx)} className={`cursor-pointer rounded-[28px] border p-6 shadow-sm transition ${idx === activeSlide ? 'border-orange-300 bg-[#fff8f2] shadow-[0_14px_35px_rgba(249,115,22,0.14)]' : 'border-slate-200 bg-white hover:border-orange-200 hover:shadow-md'}`}><div className="flex flex-col gap-5 lg:flex-row lg:items-center lg:justify-between"><div><div className="flex items-center gap-3"><div className={`h-2.5 w-2.5 rounded-full ${idx === activeSlide ? 'bg-orange-500' : 'bg-slate-300'}`}></div><div className="text-xl font-bold text-slate-950">{name}</div></div><p className="mt-3 max-w-3xl text-sm leading-7 text-slate-700">{t.productPages.listDesc}</p><div className="mt-4 flex flex-wrap gap-2"><span className="rounded-full border border-slate-200 bg-[#f7f9fc] px-3 py-1.5 text-xs font-semibold text-slate-700">{t.productPages.tag1}</span><span className="rounded-full border border-slate-200 bg-[#f7f9fc] px-3 py-1.5 text-xs font-semibold text-slate-700">{t.productPages.tag2}</span></div></div><a href={getButtonLinks().productListRfq} {...externalLinkProps(getButtonLinks().productListRfq)} onClick={(e) => e.stopPropagation()} className="rounded-full bg-orange-500 px-6 py-3 text-sm font-semibold text-white">{t.rfq} →</a></div></div>)}</div></div></div></section>;
}

function Applications({ t, images }) {
  const btnText = t.langLabel === "English" ? "View Application" : t.langLabel === "Русский" ? "Смотреть применение" : "查看应用";
  const links = getButtonLinks();
  const appLinks = [links.appWater, links.appOil, links.appChem, links.appPower];
  return <section id="applications" className="scroll-mt-[112px] bg-white pt-[72px] pb-20"><div className="mx-auto max-w-7xl px-6"><SectionTitle {...t.apps} /><div className="mt-10 grid gap-5 md:grid-cols-2 lg:grid-cols-4">{t.apps.cards.map(([title,desc,icon], idx)=><a key={title} href={appLinks[idx]} {...externalLinkProps(appLinks[idx])} className="group flex h-full flex-col rounded-[28px] border border-slate-200 bg-[#f7f9fc] p-6 shadow-sm transition hover:-translate-y-1 hover:border-blue-300 hover:shadow-lg"><img src={images[icon]} alt={title} className="h-16 w-16 rounded-2xl border border-slate-200 bg-white object-cover" /><div className="mt-5 text-xl font-bold text-slate-950">{title}</div><p className="mt-3 text-sm leading-7 text-slate-700">{desc}</p><span className="mt-auto pt-5 text-sm font-semibold text-blue-600 group-hover:text-blue-700">{btnText} →</span></a>)}</div></div></section>;
}


function FactoryGallery({ images }) {
  const validImages = (images || []).filter(Boolean);
  const [activeIndex, setActiveIndex] = useState(null);
  const [zoomed, setZoomed] = useState(false);

  useEffect(() => {
    if (activeIndex === null) return;
    const previousOverflow = document.body.style.overflow;
    document.body.style.overflow = 'hidden';
    const onKeyDown = (event) => {
      if (event.key === 'Escape') {
        setActiveIndex(null);
        setZoomed(false);
      }
      if (event.key === 'ArrowRight' && validImages.length > 1) {
        setActiveIndex((prev) => (prev + 1) % validImages.length);
        setZoomed(false);
      }
      if (event.key === 'ArrowLeft' && validImages.length > 1) {
        setActiveIndex((prev) => (prev - 1 + validImages.length) % validImages.length);
        setZoomed(false);
      }
    };
    window.addEventListener('keydown', onKeyDown);
    return () => {
      document.body.style.overflow = previousOverflow;
      window.removeEventListener('keydown', onKeyDown);
    };
  }, [activeIndex, validImages.length]);

  if (!validImages.length) return null;

  return <>
    <div className="grid gap-4 sm:grid-cols-2">
      {validImages.map((img, i) => <button type="button" key={i} onClick={() => { setActiveIndex(i); setZoomed(false); }} className="group relative overflow-hidden rounded-[28px] border border-slate-200 bg-white shadow-sm text-left">
        <img src={img} alt={`factory-${i + 1}`} className="aspect-[4/3] w-full object-cover transition duration-500 group-hover:scale-[1.06]" />
        <div className="pointer-events-none absolute inset-0 bg-slate-950/0 transition duration-300 group-hover:bg-slate-950/10" />
        <div className="pointer-events-none absolute inset-x-4 bottom-4 flex items-center justify-between rounded-full bg-white/92 px-4 py-2 text-xs font-semibold tracking-[0.08em] text-slate-900 opacity-0 shadow transition duration-300 group-hover:opacity-100">
          <span>{`Factory ${String(i + 1).padStart(2, '0')}`}</span>
          <span className="rounded-full bg-orange-500 px-2.5 py-1 text-[11px] font-bold uppercase tracking-[0.12em] text-white">Zoom</span>
        </div>
      </button>)}
    </div>

    {activeIndex !== null && <div className="fixed inset-0 z-[120] flex items-center justify-center bg-slate-950/82 p-4 sm:p-6" onClick={() => { setActiveIndex(null); setZoomed(false); }}>
      <div className="relative w-full max-w-5xl" onClick={(e) => e.stopPropagation()}>
        <button type="button" aria-label="Close image preview" onClick={() => { setActiveIndex(null); setZoomed(false); }} className="absolute -top-2 right-0 z-10 flex h-11 w-11 items-center justify-center rounded-full bg-white text-xl font-bold text-slate-900 shadow-lg sm:-top-5 sm:right-0">×</button>

        {validImages.length > 1 && <>
          <button type="button" aria-label="Previous image" onClick={() => { setActiveIndex((prev) => (prev - 1 + validImages.length) % validImages.length); setZoomed(false); }} className="absolute left-2 top-1/2 z-10 flex h-11 w-11 -translate-y-1/2 items-center justify-center rounded-full bg-white/95 text-2xl font-bold text-slate-900 shadow-lg sm:left-4">‹</button>
          <button type="button" aria-label="Next image" onClick={() => { setActiveIndex((prev) => (prev + 1) % validImages.length); setZoomed(false); }} className="absolute right-2 top-1/2 z-10 flex h-11 w-11 -translate-y-1/2 items-center justify-center rounded-full bg-white/95 text-2xl font-bold text-slate-900 shadow-lg sm:right-4">›</button>
        </>}

        <div className="overflow-hidden rounded-[30px] border border-white/20 bg-white p-3 shadow-2xl sm:p-4">
          <div className={`relative flex max-h-[78vh] min-h-[260px] items-center justify-center overflow-auto rounded-[24px] bg-[#f5f7fb] p-3 transition ${zoomed ? 'cursor-zoom-out' : 'cursor-zoom-in'}`} onClick={() => setZoomed((prev) => !prev)}>
            <img src={validImages[activeIndex]} alt={`factory-preview-${activeIndex + 1}`} className={`w-auto max-w-full rounded-[18px] object-contain transition duration-300 ${zoomed ? 'max-h-none scale-[1.7]' : 'max-h-[72vh] scale-100'}`} />
          </div>
          <div className="mt-3 flex flex-col gap-3 px-1 text-sm text-slate-700 sm:flex-row sm:items-center sm:justify-between">
            <div className="font-semibold text-slate-900">Factory Image {activeIndex + 1} / {validImages.length}</div>
            <div className="flex flex-wrap items-center gap-2">
              <button type="button" onClick={() => setZoomed((prev) => !prev)} className="rounded-full border border-slate-300 bg-white px-4 py-2 text-xs font-semibold uppercase tracking-[0.08em] text-slate-900">
                {zoomed ? 'Reset' : 'Zoom In'}
              </button>
              <span className="text-xs leading-6 text-slate-500">Click the image to switch zoom level. ESC closes the preview.</span>
            </div>
          </div>
        </div>
      </div>
    </div>}
  </>;
}


function SocialIcon({ type }) {
  const base = "flex h-8 w-8 items-center justify-center rounded-full overflow-hidden shadow-[inset_0_0_0_1px_rgba(255,255,255,0.12)]";
  if (type === "linkedin") {
    return <span className={`${base} bg-[#0a66c2]`} aria-hidden="true"><svg viewBox="0 0 24 24" className="h-4.5 w-4.5 fill-white"><path d="M6.94 8.5H3.56V20h3.38V8.5ZM5.25 3A2.25 2.25 0 1 0 5.3 7.5 2.25 2.25 0 0 0 5.25 3Zm4.2 5.5V20h3.37v-5.7c0-3.17 4.1-3.43 4.1 0V20h3.38v-6.87c0-5.34-5.84-5.14-7.48-2.52V8.5H9.45Z"/></svg></span>;
  }
  if (type === "facebook") {
    return <span className={`${base} bg-[#1877f2]`} aria-hidden="true"><svg viewBox="0 0 24 24" className="h-4.5 w-4.5 fill-white"><path d="M13.63 20v-7.02H16l.35-2.74h-2.72V8.5c0-.8.22-1.34 1.37-1.34h1.47V4.7c-.25-.03-1.12-.1-2.14-.1-2.12 0-3.57 1.29-3.57 3.68v1.96H8.37v2.74h2.39V20h2.87Z"/></svg></span>;
  }
  return <span className={`${base} bg-[#25d366]`} aria-hidden="true"><svg viewBox="0 0 24 24" className="h-4.5 w-4.5 fill-white"><path d="M20.52 3.48A11.86 11.86 0 0 0 12.06 0C5.56 0 .28 5.28.28 11.78c0 2.08.54 4.11 1.57 5.89L0 24l6.51-1.8a11.73 11.73 0 0 0 5.55 1.41h.01c6.49 0 11.78-5.28 11.78-11.78 0-3.15-1.22-6.1-3.33-8.35Zm-8.46 18.1h-.01a9.8 9.8 0 0 1-4.98-1.36l-.36-.21-3.86 1.07 1.03-3.76-.23-.39a9.8 9.8 0 0 1-1.5-5.15c0-5.42 4.42-9.84 9.86-9.84 2.63 0 5.1 1.02 6.95 2.89a9.77 9.77 0 0 1 2.88 6.96c0 5.43-4.42 9.85-9.78 9.85Zm5.4-7.34c-.29-.15-1.71-.84-1.98-.93-.26-.1-.45-.15-.64.15-.19.28-.74.93-.9 1.12-.17.18-.33.21-.62.07-.29-.15-1.21-.45-2.31-1.43-.85-.76-1.42-1.7-1.59-1.99-.17-.29-.02-.45.13-.6.13-.13.29-.34.43-.5.14-.17.19-.29.29-.48.1-.19.05-.36-.02-.5-.07-.15-.64-1.56-.88-2.14-.23-.55-.47-.48-.64-.49l-.55-.01c-.19 0-.5.07-.76.36-.26.29-1 1-.99 2.43 0 1.43 1.04 2.81 1.18 3 .15.19 2.05 3.12 5.05 4.37 3 1.24 3 0.83 3.54.78.54-.05 1.71-.7 1.95-1.38.24-.69.24-1.27.17-1.38-.07-.12-.26-.19-.55-.34Z"/></svg></span>;
}

function Contact({ t }) {
  const buttonLinks = getButtonLinks();
  const socials = [
    ["LinkedIn", "linkedin", buttonLinks.linkedin],
    ["Facebook", "facebook", buttonLinks.facebook],
    ["WhatsApp", "whatsapp", buttonLinks.whatsapp],
  ];
  const [formData, setFormData] = useState({
    name: "",
    company: "",
    email: "",
    productType: "",
    materialPressure: "",
    application: "",
    requirements: "",
    website: ""
  });
  const [status, setStatus] = useState({ type: "", message: "" });
  const [submitting, setSubmitting] = useState(false);
  const updateField = (key) => (event) => setFormData((prev) => ({ ...prev, [key]: event.target.value }));
  const statusClass = status.type === "success" ? "border-green-200 bg-green-50 text-green-800" : status.type === "error" ? "border-red-200 bg-red-50 text-red-800" : "border-slate-200 bg-slate-50 text-slate-700";
  const handleSubmit = async (event) => {
    event.preventDefault();
    if (submitting) return;
    if (!formData.email.trim()) {
      setStatus({ type: "error", message: "Please enter your email address before submitting RFQ." });
      return;
    }
    if (!formData.requirements.trim()) {
      setStatus({ type: "error", message: "Please enter your RFQ requirements, drawings or technical needs." });
      return;
    }
    const endpoint = window.XINGHE_RFQ && window.XINGHE_RFQ.ajaxUrl;
    if (!endpoint) {
      setStatus({ type: "error", message: "RFQ form is not ready. Please contact rfq@xinghe-valve.com directly." });
      return;
    }
    const body = new URLSearchParams();
    body.append("action", "xinghe_submit_rfq");
    body.append("nonce", (window.XINGHE_RFQ && window.XINGHE_RFQ.nonce) || "");
    Object.entries(formData).forEach(([key, value]) => body.append(key, value));
    try {
      setSubmitting(true);
      setStatus({ type: "", message: "Sending RFQ..." });
      const response = await fetch(endpoint, {
        method: "POST",
        headers: { "Content-Type": "application/x-www-form-urlencoded; charset=UTF-8" },
        body: body.toString(),
        credentials: "same-origin"
      });
      const result = await response.json().catch(() => ({}));
      if (!response.ok || !result.success) {
        throw new Error((result.data && result.data.message) || "Submit failed. Please try again.");
      }
      setStatus({ type: "success", message: (result.data && result.data.message) || "RFQ submitted successfully. We will reply by email." });
      setFormData({ name: "", company: "", email: "", productType: "", materialPressure: "", application: "", requirements: "", website: "" });
    } catch (error) {
      setStatus({ type: "error", message: error.message || "Submit failed. Please email rfq@xinghe-valve.com directly." });
    } finally {
      setSubmitting(false);
    }
  };

  return <section id="contact" className="scroll-mt-[112px] bg-[#f5f7fb] pt-[48px] pb-20"><div className="mx-auto grid max-w-7xl gap-10 px-6 lg:grid-cols-[0.95fr_1.05fr]"><div className="text-left"><SectionTitle {...t.contact} /><div className="mt-8 space-y-3 text-lg text-slate-700">{t.contact.lines.map(x => <div key={x}>{x}</div>)}</div><div className="mt-6 flex flex-wrap items-center gap-4">{socials.map(([label, type, url]) => <a key={label} href={url} {...externalLinkProps(url)} className="flex items-center gap-3 rounded-full border border-slate-300 bg-white px-4 py-2.5 text-sm font-medium text-slate-700 shadow-sm transition hover:-translate-y-0.5 hover:shadow"><SocialIcon type={type} /><span>{label}</span></a>)}</div></div><form onSubmit={handleSubmit} className="rounded-[32px] border border-slate-200 bg-white p-6 shadow-sm"><input type="text" name="website" value={formData.website} onChange={updateField("website")} tabIndex="-1" autoComplete="off" className="hidden" aria-hidden="true" /><div className="grid gap-4 md:grid-cols-2"><input value={formData.name} onChange={updateField("name")} placeholder={t.contact.fields[0]} className="rounded-2xl border border-slate-300 px-4 py-4 text-base outline-none focus:border-slate-500" /><input value={formData.company} onChange={updateField("company")} placeholder={t.contact.fields[1]} className="rounded-2xl border border-slate-300 px-4 py-4 text-base outline-none focus:border-slate-500" /><input type="email" required value={formData.email} onChange={updateField("email")} placeholder={t.contact.fields[2]} className="rounded-2xl border border-slate-300 px-4 py-4 text-base outline-none focus:border-slate-500" /><input value={formData.productType} onChange={updateField("productType")} placeholder={t.contact.fields[3]} className="rounded-2xl border border-slate-300 px-4 py-4 text-base outline-none focus:border-slate-500" /><input value={formData.materialPressure} onChange={updateField("materialPressure")} placeholder={t.contact.fields[4]} className="rounded-2xl border border-slate-300 px-4 py-4 text-base outline-none focus:border-slate-500" /><input value={formData.application} onChange={updateField("application")} placeholder={t.contact.fields[5]} className="rounded-2xl border border-slate-300 px-4 py-4 text-base outline-none focus:border-slate-500" /><textarea required value={formData.requirements} onChange={updateField("requirements")} placeholder={t.contact.textarea} className="min-h-[220px] rounded-2xl border border-slate-300 px-4 py-4 text-base outline-none focus:border-slate-500 md:col-span-2" /></div>{status.message && <div className={`mt-4 rounded-2xl border px-4 py-3 text-sm font-semibold ${statusClass}`}>{status.message}</div>}<button type="submit" disabled={submitting} className="mt-5 inline-flex rounded-full bg-[#dceaf7] px-6 py-4 text-sm font-semibold text-slate-900 hover:bg-[#cfe3f4] disabled:cursor-not-allowed disabled:opacity-60">{submitting ? "Sending..." : t.contact.submit}</button></form></div></section>;
}

function BackTop({ text }) { const [show,setShow]=useState(false); useEffect(()=>{ const onScroll=()=>setShow(window.scrollY>500); window.addEventListener("scroll",onScroll); onScroll(); return()=>window.removeEventListener("scroll",onScroll); },[]); return <button onClick={()=>window.scrollTo({top:0, behavior:"smooth"})} className={`fixed bottom-6 left-6 z-[90] rounded-full border border-slate-300 bg-white px-4 py-3 text-sm font-semibold text-slate-900 shadow-lg transition ${show?"opacity-100":"pointer-events-none opacity-0"}`}>⌃ {text}</button>; }

function App() {
  const images = useMemo(() => {
    const adminImages = window.XINGHE_IMAGES || {};
    const adminVideos = window.XINGHE_VIDEOS || {};
    const img = (key, fallback) => adminImages[key] || fallback;
    const video = (key) => adminVideos[key] || '';
    return ({ slide1:img("slide1","https://images.unsplash.com/photo-1473341304170-971dccb5ac1e?auto=format&fit=crop&w=1800&q=80"), slide2:img("slide2","https://images.unsplash.com/photo-1513828583688-c52646db42da?auto=format&fit=crop&w=1800&q=80"), slide3:img("slide3","https://images.unsplash.com/photo-1509391366360-2e959784a276?auto=format&fit=crop&w=1800&q=80"), heroCard1:img("hero_card1",makePlaceholder("HERO CARD 01","#dbe9f6","#9bbad6")), heroCard2:img("hero_card2",makePlaceholder("HERO CARD 02","#dbe8f5","#9ebbd6")), heroCard3:img("hero_card3",img("slide3","https://images.unsplash.com/photo-1509391366360-2e959784a276?auto=format&fit=crop&w=1800&q=80")), heroVideo1:video("hero_card_video1"), heroVideo2:video("hero_card_video2"), heroVideo3:video("hero_card_video3"), ball:img("ball",makePlaceholder("BALL VALVES","#dbe9f6","#9bbad6")), isolation:img("isolation",makePlaceholder("ISOLATION VALVES","#d8e6f3","#93b2cf")), control:img("control",makePlaceholder("CONTROL VALVES","#dbe8f5","#9ebbd6")), factory1:img("factory1",makePlaceholder("FACTORY 01","#dce8f4","#9fb8d0")), factory2:img("factory2",makePlaceholder("FACTORY 02","#d7e5f2","#91afca")), factory3:img("factory3",makePlaceholder("FACTORY 03","#dfeaf5","#a6bfd6")), factory4:img("factory4",makePlaceholder("FACTORY 04","#d8e6f3","#95b4cf")), cert1:img("cert1",makePlaceholder("API / CE / ISO","#eef4f9","#c4d6e6")), certTop1:img("cert_top1",img("cert1",makePlaceholder("CERT TOP 01","#eef4f9","#c4d6e6"))), certTop2:img("cert_top2",makePlaceholder("CERT TOP 02","#eff4f9","#cddce9")), certTop3:img("cert_top3",makePlaceholder("CERT TOP 03","#eef3f8","#c8d8e7")), certBottom1:img("cert_bottom1",img("cert1",makePlaceholder("CERT BOTTOM 01","#eef4f9","#c4d6e6"))), certBottom2:img("cert_bottom2",makePlaceholder("CERT BOTTOM 02","#eff4f9","#cddce9")), certBottom3:img("cert_bottom3",makePlaceholder("CERT BOTTOM 03","#eef3f8","#c8d8e7")), water:makeIcon("water"), oil:makeIcon("oil"), chem:makeIcon("chem"), power:makeIcon("power"), doc:makeIcon("doc"), valve:makeIcon("valve") });
  }, []);
  const [lang,setLang] = useState("en");
  const [product,setProduct] = useState("isolation");
  const baseT = translations[lang] || translations.zh;
  const heroOverrides = (window.XINGHE_HERO_TEXTS && window.XINGHE_HERO_TEXTS[lang]) || {};
  const cleanHeroOverrides = Object.fromEntries(Object.entries(heroOverrides).filter(([key, value]) => typeof value === "string" && value.trim() !== ""));
  const t = { ...baseT, ...cleanHeroOverrides };
  const heroData = { bg:[images.slide1, images.slide2, images.slide3], slides:[[images.heroCard1,images.heroVideo1],[images.heroCard2,images.heroVideo2],[images.heroCard3,images.heroVideo3]].map((item,i)=>({ title:t.heroSlides[i][0], subtitle:t.heroSlides[i][1], desc:t.heroSlides[i][2], image:item[0], video:item[1] })) };
  return <div className="min-h-screen bg-white text-slate-900">
    <Header t={t} currentLang={lang} setLang={setLang} />
    <Hero t={t} data={heroData} currentLang={lang} />
    <Structure t={t} />
    <section className="bg-[#f7f9fc] pt-[72px] pb-20"><div className="mx-auto max-w-7xl px-6"><SectionTitle {...t.reasons} /><Cards items={t.reasons.cards.map(([title,desc])=>({title,desc}))} /></div></section>
    <section id="quality-control" className="scroll-mt-[112px] bg-white pt-[72px] pb-20"><div className="mx-auto max-w-7xl px-6"><SectionTitle {...t.qc} /><div className="mt-10 grid gap-4 lg:grid-cols-5">{t.qc.steps.map(([title,desc],i)=>{ const qcLinks = [getButtonLinks().qcMaterial, getButtonLinks().qcMachining, getButtonLinks().qcAssembly, getButtonLinks().qcPressure, getButtonLinks().qcPacking]; return <a key={title} href={qcLinks[i]} {...externalLinkProps(qcLinks[i])} className="group flex h-full flex-col rounded-[28px] border border-slate-200 bg-[#f7f9fc] p-6 shadow-sm transition hover:-translate-y-1 hover:border-blue-300 hover:shadow-lg"><div className="text-sm font-black tracking-[0.14em] text-orange-500">0{i+1}</div><div className="mt-3 text-lg font-bold text-slate-950">{title}</div><p className="mt-3 text-sm leading-7 text-slate-700">{desc}</p><span className="mt-auto pt-5 text-sm font-semibold text-blue-600 group-hover:text-blue-700">{t.langLabel === "English" ? "Ask about QC" : t.langLabel === "Русский" ? "Запросить QC" : "咨询质检"} →</span></a>})}</div></div></section>
    <Products t={t} images={images} setProduct={setProduct} />
    <ProductPages t={t} images={images} product={product} />
    <Applications t={t} images={images} />
    <section id="content-pages" className="scroll-mt-[112px] bg-[#f7f9fc] pt-[72px] pb-20"><div className="mx-auto max-w-7xl px-6"><SectionTitle {...t.content} /><div className="mt-10 grid gap-5 lg:grid-cols-3">{t.content.cards.map(([title,desc,icon], idx)=>{ const contentLinks = [getButtonLinks().contentSelectionParams, getButtonLinks().contentFloatingTrunnion, getButtonLinks().contentCorrosiveMaterials, getButtonLinks().contentIsolationChoice, getButtonLinks().contentManufacturerEval, getButtonLinks().contentCertDocs]; return <a key={title} href={contentLinks[idx]} {...externalLinkProps(contentLinks[idx])} className="group flex h-full flex-col rounded-[28px] border border-slate-200 bg-white p-7 shadow-sm transition hover:-translate-y-1 hover:border-blue-300 hover:shadow-lg"><img src={images[icon]} alt="" className="h-16 w-16 rounded-2xl bg-[#dceaf7] object-cover" /><div className="mt-5 min-h-[58px] text-xl font-bold leading-snug text-slate-950">{title}</div><p className="mt-4 min-h-[56px] text-sm leading-7 text-slate-700">{desc}</p><span className="mt-auto pt-5 text-xs font-semibold uppercase tracking-[0.12em] text-orange-500 group-hover:text-orange-600">{t.content.intent} →</span></a>})}</div></div></section>
    <section id="factory" className="bg-[#f5f7fb] pt-[72px] pb-20"><div className="mx-auto grid max-w-7xl gap-10 px-6 lg:grid-cols-[0.95fr_1.05fr] lg:items-center"><SectionTitle {...t.factory} /><FactoryGallery images={[images.factory1,images.factory2,images.factory3,images.factory4]} /></div></section>
    <section id="certs" className="bg-white pt-[72px] pb-20"><div className="mx-auto grid max-w-7xl gap-10 px-6 lg:grid-cols-[0.9fr_1.1fr]"><div><SectionTitle {...t.certs} /><div className="mt-8 space-y-4">{t.certs.list.map(x=><div key={x} className="rounded-[22px] border border-slate-200 bg-[#f7f9fc] p-5 text-lg font-semibold text-slate-900">{x}</div>)}</div></div><div className="rounded-[28px] border border-slate-200 bg-[#f7f9fc] p-4 shadow-sm"><div className="grid gap-4"><AutoCarousel images={[images.certTop1, images.certTop2, images.certTop3]} altPrefix="cert-top" interval={3400} className="aspect-[16/10]" imgClassName="rounded-[22px] border border-slate-200 bg-white p-3" /><AutoCarousel images={[images.certBottom1, images.certBottom2, images.certBottom3]} altPrefix="cert-bottom" interval={3800} className="aspect-[16/10]" imgClassName="rounded-[22px] border border-slate-200 bg-white p-3" /></div></div></div></section>
    <section className="bg-[#dceaf7] py-16 text-slate-950"><div className="mx-auto flex max-w-7xl flex-col gap-6 px-6 lg:flex-row lg:items-center lg:justify-between"><div><div className="text-[42px] font-black leading-[1.12] tracking-tight">{t.cta.title}</div><div className="mt-4 max-w-3xl text-lg leading-8 text-slate-700">{t.cta.desc}</div></div><a href={getButtonLinks().ctaInquiry} {...externalLinkProps(getButtonLinks().ctaInquiry)} className="inline-flex h-[64px] min-w-[150px] shrink-0 items-center justify-center whitespace-nowrap rounded-full bg-orange-500 px-8 py-4 text-sm font-semibold text-white">{t.inquiry}</a></div></section>
    <Contact t={t} />
    <BackTop text={t.backTop} />
  </div>;
}

ReactDOM.createRoot(document.getElementById("root")).render(<App />);
