const { useState, useEffect, useRef } = React;
        const CMS = window.__ZUOSHI_CMS__ || { copy: {}, products: {}, gallery: [] };
        const CMS_FALLBACK_COPY = window.__ZUOSHI_FALLBACK_COPY__ || {};

        const cmsCopyReplacements = Object.values(CMS.copy || {})
            .map((item) => ({
                fallback: CMS_FALLBACK_COPY[item.key]?.text || '',
                replacement: item.text || ''
            }))
            .filter((item) => item.fallback && item.replacement && item.fallback !== item.replacement);

        const applyCmsCopy = () => {
            const root = document.getElementById('root');
            if (!root || cmsCopyReplacements.length === 0) return;
            const walker = document.createTreeWalker(root, NodeFilter.SHOW_TEXT);
            const nodes = [];
            while (walker.nextNode()) nodes.push(walker.currentNode);
            for (const node of nodes) {
                const original = node.nodeValue || '';
                const trimmed = original.trim();
                const match = cmsCopyReplacements.find((item) => item.fallback === trimmed);
                if (!match) continue;
                const leading = original.match(/^\s*/)?.[0] || '';
                const trailing = original.match(/\s*$/)?.[0] || '';
                node.nodeValue = leading + match.replacement + trailing;
            }
        };

        const cmsCopyObserver = new MutationObserver(() => window.requestAnimationFrame(applyCmsCopy));
        window.addEventListener('DOMContentLoaded', () => {
            const root = document.getElementById('root');
            if (root) cmsCopyObserver.observe(root, { childList: true, subtree: true });
        });

        const useReveal = () => {
            const ref = useRef(null);
            useEffect(() => {
                const observer = new IntersectionObserver(([entry]) => {
                    if (entry.isIntersecting) entry.target.classList.add('visible');
                }, { threshold: 0.1 });
                if (ref.current) observer.observe(ref.current);
                return () => observer.disconnect();
            }, []);
            return ref;
        };

        const App = () => {
            const getHashPage = () => {
                const hash = window.location.hash.replace('#', '');
                if (hash.startsWith('product-detail')) return 'product-detail';
                if (hash.startsWith('products-')) return 'products';
                return ['home', 'about', 'products', 'support', 'contact'].includes(hash) ? hash : 'home';
            };

            const [currentPage, setCurrentPage] = useState(getHashPage());
            const [scrolled, setScrolled] = useState(false);
            const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
            const [desktopAboutMenuOpen, setDesktopAboutMenuOpen] = useState(false);
            const [desktopProductMenuOpen, setDesktopProductMenuOpen] = useState(false);
            const navItems = [
                { id: 'home', label: '首頁' },
                { id: 'about', label: '關於我們' },
                { id: 'products', label: '產品目錄' },
                { id: 'support', label: '技術規格' },
                { id: 'contact', label: '聯絡我們' }
            ];
            const fallbackProductNavItems = [
                { title: '熱膨脹微膠囊', enTitle: 'EXPANDABLE MICROSPHERES', id: 'microspheres' },
                { title: '樹脂載體膨脹母粒', enTitle: 'EXPANSION MASTERBATCH', id: 'expansion-masterbatch' },
                { title: '化學發泡劑', enTitle: 'CHEMICAL FOAMING AGENT', id: 'chemical-foaming' },
                { title: '發泡助劑母粒', enTitle: 'FOAMING AGENT MASTERBATCH', id: 'foaming-masterbatch' },
                { title: '耐磨助劑/矽酮母粒/耐刮擦助劑', enTitle: 'ANTI-SCRATCH MASTERBATCH', id: 'anti-scratch' },
                { title: '螢光增白劑', enTitle: 'FLUORESCENT WHITENING AGENT', id: 'brightener' },
                { title: '抗氧化劑', enTitle: 'ANTIOXIDANT', id: 'antioxidant' },
                { title: '紫外線吸收劑', enTitle: 'ULTRAVIOLET ABSORBENT', id: 'uv-absorber' },
                { title: 'EVA抗靜電助劑-粉末', enTitle: 'EVA ANTISTATIC ADDITIVE', id: 'antistatic-eva' },
                { title: 'TPU耐黃變助劑母粒', enTitle: 'TPU YELLOWING RESISTANCE MASTERBATCH', id: 'yellowing-resistance' },
                { title: 'TPU抗靜電助劑母粒', enTitle: 'TPU ANTISTATIC MASTERBATCH', id: 'antistatic-tpu' },
                { title: '顏料母粒-色母粒', enTitle: 'COLOR MASTERBATCH', id: 'color-masterbatch' },
                { title: '螢光顏料', enTitle: 'FLUORESCENT PIGMENTS', id: 'fluorescent-pigment-p18' },
                { title: '紅色顏料', enTitle: 'RED PIGMENTS', id: 'pigment-red' },
                { title: '酞菁顏料/紫色顏料', enTitle: 'PHTHALOCYANINE & VIOLET PIGMENTS', id: 'pigment-phthalocyanine' },
                { title: '螢光顏料 (高牢度)', enTitle: 'HIGH-FASTNESS FLUORESCENT PIGMENTS', id: 'fluorescent-pigment-p24' },
                { title: '氧化鐵顏料', enTitle: 'IRON OXIDE PIGMENTS', id: 'pigment-iron-oxide' },
                { title: '群青/鈦白粉/炭黑', enTitle: 'ULTRAMARINE & TITANIUM & CARBON BLACK', id: 'pigment-ultramarine' },
                { title: '耐高溫無機顏料', enTitle: 'HIGH TEMPERATURE INORGANIC PIGMENTS', id: 'pigment-high-temp' },
                { title: '紅色顏料/橙色顏料', enTitle: 'RED & ORANGE PIGMENTS', id: 'pigment-orange-red' },
                { title: '黃色顏料', enTitle: 'YELLOW PIGMENTS', id: 'pigment-yellow' },
                { title: '鐳雕助劑', enTitle: 'LASER MARKING POWDER', id: 'laser-marking' }
            ];
            const productNavItems = fallbackProductNavItems.map((item) => {
                const override = CMS.products?.[item.id];
                return override ? { ...item, title: override.name || item.title, enTitle: override.englishName || item.enTitle } : item;
            });
            const aboutNavItems = [
                { title: '企業定位與區位優勢', enTitle: 'POSITIONING & LOCATION', id: 'position' },
                { title: '核心實力技術、品控與定製化服務', enTitle: 'CAPABILITY & SERVICE', id: 'capability' },
                { title: '技術研發中心', enTitle: 'R&D LABORATORY', id: 'laboratory' }
            ];

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

            useEffect(() => {
                const handleHashChange = () => {
                    setCurrentPage(getHashPage());
                    setMobileMenuOpen(false);
                    setDesktopAboutMenuOpen(false);
                    setDesktopProductMenuOpen(false);
                    window.scrollTo({ top: 0, behavior: 'instant' });
                };
                window.addEventListener('hashchange', handleHashChange);
                return () => window.removeEventListener('hashchange', handleHashChange);
            }, []);

            const navigate = (p) => {
                setMobileMenuOpen(false);
                setDesktopAboutMenuOpen(false);
                setDesktopProductMenuOpen(false);
                const nextHash = p === 'home' ? '' : p;
                if (window.location.hash === `#${nextHash}` || (window.location.hash === '' && nextHash === '')) {
                    window.scrollTo({ top: 0, behavior: 'instant' });
                } else {
                    window.location.hash = nextHash;
                }
            };
            const navigateProduct = (id) => {
                setMobileMenuOpen(false);
                setDesktopAboutMenuOpen(false);
                setDesktopProductMenuOpen(false);
                window.location.hash = `products-${id}`;
            };
            const navigateAboutSection = (id) => {
                setMobileMenuOpen(false);
                setDesktopAboutMenuOpen(false);
                setDesktopProductMenuOpen(false);
                const scrollToSection = () => {
                    const target = document.getElementById(`about-${id}`);
                    if (target) target.scrollIntoView({ behavior: 'smooth', block: 'start' });
                };
                if (window.location.hash !== '#about') {
                    window.location.hash = 'about';
                    window.setTimeout(scrollToSection, 120);
                } else {
                    scrollToSection();
                }
            };

            const COMPANY_EN = "ENGRAVE STONE RUBBER & PLASTIC PRODUCT CO., LTD.";

            return (
                <div>
                    <header className={scrolled ? 'shrunk' : ''}>
                        <div className="container">
                            <nav>
                                <div className="logo" onClick={() => navigate('home')} style={{cursor:'pointer'}}>
                                    <img src="mpjk9dcm-琢石logo.jpg" className="logo-img" alt="Logo" />
                                    <div className="brand-name">
                                        <span>東莞市琢石橡塑製品有限公司</span>
                                        <span>{COMPANY_EN}</span>
                                    </div>
                                </div>
                                <div className="nav-links">
                                    {navItems.map(item => (
                                        item.id === 'about' ? (
                                            <div
                                                key={item.id}
                                                className="nav-dropdown-wrap"
                                                onMouseEnter={() => setDesktopAboutMenuOpen(true)}
                                                onMouseLeave={() => setDesktopAboutMenuOpen(false)}
                                            >
                                                <button
                                                    type="button"
                                                    className={`nav-link ${currentPage === item.id ? 'active' : ''}`}
                                                    onClick={() => setDesktopAboutMenuOpen(open => !open)}
                                                >
                                                    {item.label}
                                                </button>
                                                <div className={`nav-about-menu ${desktopAboutMenuOpen ? 'open' : ''}`}>
                                                    {aboutNavItems.map(section => (
                                                        <button
                                                            key={section.id}
                                                            className="nav-product-link"
                                                            type="button"
                                                            onClick={() => navigateAboutSection(section.id)}
                                                        >
                                                            <span className="nav-product-name">{section.title}</span>
                                                            <span className="nav-product-en">{section.enTitle}</span>
                                                        </button>
                                                    ))}
                                                </div>
                                            </div>
                                        ) : item.id === 'products' ? (
                                            <div
                                                key={item.id}
                                                className="nav-dropdown-wrap"
                                                onMouseEnter={() => setDesktopProductMenuOpen(true)}
                                                onMouseLeave={() => setDesktopProductMenuOpen(false)}
                                            >
                                                <button
                                                    type="button"
                                                    className={`nav-link ${currentPage === item.id || currentPage === 'product-detail' ? 'active' : ''}`}
                                                    onClick={() => setDesktopProductMenuOpen(open => !open)}
                                                >
                                                    {item.label}
                                                </button>
                                                <div className={`nav-product-menu ${desktopProductMenuOpen ? 'open' : ''}`}>
                                                    {productNavItems.map(product => (
                                                        <button
                                                            key={product.id}
                                                            className="nav-product-link"
                                                            type="button"
                                                            onClick={() => navigateProduct(product.id)}
                                                        >
                                                            <span className="nav-product-name">{product.title}</span>
                                                            <span className="nav-product-en">{product.enTitle}</span>
                                                        </button>
                                                    ))}
                                                </div>
                                            </div>
                                        ) : (
                                            <div
                                                key={item.id}
                                                className={`nav-link ${currentPage === item.id ? 'active' : ''}`}
                                                onClick={() => navigate(item.id)}
                                            >
                                                {item.label}
                                            </div>
                                        )
                                    ))}
                                </div>
                                <button
                                    type="button"
                                    className="mobile-menu-toggle"
                                    aria-expanded={mobileMenuOpen}
                                    aria-label="開啟頁面選單"
                                    onClick={() => setMobileMenuOpen(open => !open)}
                                >
                                    <span className="mobile-menu-icon" aria-hidden="true"><span></span><span></span><span></span></span>
                                    選單
                                </button>
                                <button className="button" style={{padding: '10px 24px', fontSize: '14px'}} onClick={() => navigate('contact')}>詢問報價</button>
                                <div className={`mobile-menu-panel ${mobileMenuOpen ? 'open' : ''}`}>
                                    {navItems.map(item => (
                                        <button
                                            key={item.id}
                                            type="button"
                                            className={`mobile-menu-link ${currentPage === item.id ? 'active' : ''}`}
                                            onClick={() => navigate(item.id)}
                                        >
                                            {item.label}
                                            <span aria-hidden="true">›</span>
                                        </button>
                                    ))}
                                </div>
                            </nav>
                        </div>
                    </header>

                    <main>
                        <div key={currentPage} className="fade-in">
                            {currentPage === 'home' && <HomePage onNavigate={navigate} companyEn={COMPANY_EN} />}
                            {currentPage === 'about' && <AboutPage companyEn={COMPANY_EN} />}
                            {currentPage === 'products' && (
                                <ProductsPage
                                    onNavigate={(p, id) => { if (id) { window.location.hash = p + '-' + id; } else { navigate(p); } }}
                                    productId={window.location.hash.replace('#products-', '').replace('#', '').replace('products-', '')}
                                />
                            )}
                            {currentPage === 'product-detail' && (
                                <ProductDetailPage
                                    onNavigate={navigate}
                                    productId={window.location.hash.replace('#product-detail-', '').replace('#', '').replace('product-detail-', '')}
                                />
                            )}
                            {currentPage === 'support' && <SupportPage />}
                            {currentPage === 'contact' && <ContactPage companyEn={COMPANY_EN} />}
                        </div>
                    </main>

                    <footer className="reveal" ref={useReveal()}>
                        <div className="container">
                            <div className="footer-grid">
                                <div>
                                    <div className="logo" style={{marginBottom:'32px'}}>
                                        <img src="mpjk9dcm-琢石logo.jpg" className="logo-img" style={{height:'36px'}} alt="Logo" />
                                        <div className="brand-name" style={{marginLeft: '12px'}}>
                                            <span style={{fontSize: '18px'}}>東莞市琢石橡塑製品有限公司</span>
                                            <span style={{fontSize: '8px'}}>{COMPANY_EN}</span>
                                        </div>
                                    </div>
                                    <p style={{color:'var(--muted)', maxWidth:'450px', fontSize: '14px'}}>
                                        專業從事橡塑材料添加助劑研發與生產，通過精確分子級檢測與創新技術，為全球高端製造業提供穩定可靠的工業化學解決方案。
                                    </p>
                                </div>
                                <div className="footer-links">
                                    <h4 style={{fontSize: '13px', marginBottom: '24px', letterSpacing: '0.05em'}}>PRODUCT LINE</h4>
                                    <ul className="mono" style={{fontSize: '12px', lineHeight: 2.5}}>
                                        <li>發泡劑系列 FOAMING</li>
                                        <li>耐磨劑系列 ANTI-ABRASION</li>
                                        <li>抗氧化系列 ANTIOXIDANT</li>
                                        <li>功能助劑系 SPECIALTY</li>
                                    </ul>
                                </div>
                                <div className="footer-links">
                                    <h4 style={{fontSize: '13px', marginBottom: '24px', letterSpacing: '0.05em'}}>GLOBAL NETWORK</h4>
                                    <ul style={{fontSize: '13px', lineHeight: 2.2}}>
                                        <li><strong>臺灣辦事處：</strong>佶暘新材料科技有限公司</li>
                                        <li style={{color:'var(--muted)'}}>臺南市鹽水區歡雅里尾寮10之17號1樓</li>
                                        <li style={{marginTop:'12px'}}><strong>東莞生產基地：</strong>0769-83792005</li>
                                        <li style={{color:'var(--muted)'}}>東莞市沙田鎮齊沙村齊沙一路1號</li>
                                    </ul>
                                </div>
                            </div>
                            <div style={{marginTop:'100px', paddingTop:'40px', borderTop:'1px solid var(--border)', fontSize:'11px', color:'var(--muted)', display:'flex', justifyContent:'space-between', alignItems: 'center'}}>
                                <span>© 2026 ENGRAVE STONE RUBBER & PLASTIC PRODUCT CO., LTD. 版權所有</span>
                                <div style={{display:'flex', gap:'32px'}}>
                                    <span>納稅信用 A 級企業</span>
                                    <span>法律顧問：李憲璋律師團隊</span>
                                </div>
                            </div>
                        </div>
                    </footer>
                </div>
            );
        };

        const HomePage = ({ onNavigate, companyEn }) => {
            const r1 = useReveal();
            const r2 = useReveal();
            const r3 = useReveal();
            return (
                <div className="container">
                    <section className="reveal" ref={r1} style={{padding:'80px 0', textAlign: 'center'}}>
                        <div className="badge" style={{marginBottom:'28px'}}>Corporate Vision / 企業願景</div>
                        <h1 style={{fontSize:'64px', lineHeight:1.16, marginBottom:'32px'}}>
                            創新驅動 品質築基 綠色共贏<br /><span style={{color:'var(--accent)'}}>客戶至上 誠信為本 協作創效</span>
                        </h1>
                        <p style={{fontSize:'20px', color:'var(--muted)', maxWidth:'920px', margin:'0 auto 64px', lineHeight: 1.75}}>
                            東莞市琢石橡塑製品有限公司，成為國內橡塑助劑領域創新標杆與綠色領軍企業，以技術引領行業升級，以品質鑄就全球信賴品牌，賦能橡塑產業綠色高效發展。
                        </p>
                        <div style={{display:'flex', gap:'24px', justifyContent: 'center'}}>
                            <button className="button" onClick={() => onNavigate('products')}>瀏覽產品中心</button>
                            <button className="button" style={{background:'var(--bg)', color:'var(--fg)', border:'1px solid var(--border)'}} onClick={() => onNavigate('support')}>技術手冊檢索</button>
                        </div>
                    </section>

                    <section className="reveal" ref={r2} style={{marginTop: '40px'}}>
                        <div style={{textAlign: 'center', marginBottom: '60px'}}><div className="badge">CORE VALUES / 發展與經營理念</div></div>
                        <div className="phi-row">
                            <div className="phi-img-side"><img src="mpqidxab-截圖-2026-05-29-下午1.24.17.png" alt="發展理念" /></div>
                            <div className="phi-text-side">
                                <h3>發展理念</h3>
                                <div className="phi-tagline">聚焦「創新驅動、品質築基、綠色共贏」</div>
                                <ul className="phi-list">
                                    <li>以<b>技術創新</b>突破行業瓶頸，持續優化分子結構，引領產品高效迭代。</li>
                                    <li>以<b>全流程高標準</b>管控制造環節，精確把控每一批次產品性能的穩定。</li>
                                    <li>以<b>環保標準</b>研發綠色化學助劑，實現企業、環境與行業的永續共贏。</li>
                                </ul>
                            </div>
                        </div>
                        <div className="phi-row flipped">
                            <div className="phi-text-side">
                                <h3>經營理念</h3>
                                <div className="phi-tagline">落實「客戶至上、誠信為本、協作創效」</div>
                                <ul className="phi-list">
                                    <li><b>客戶至上：</b>深入洞察工業需求，提供精確的定製化方案與技術指導。</li>
                                    <li><b>誠信為本：</b>堅持全環節守誠，保證品質真實可靠，築就深厚互信。</li>
                                    <li><b>協作創效：</b>整合兩岸優勢，與合作夥伴共創高價值的產業發展空間。</li>
                                </ul>
                            </div>
                            <div className="phi-img-side"><img src="mpqidxau-截圖-2026-05-29-下午1.24.24.png" alt="經營理念" /></div>
                        </div>
                    </section>

                    <div className="swd-grid reveal" ref={r3} style={{marginTop: '100px'}}>
                        <div className="card col-4">
                            <div className="mono" style={{color: 'var(--accent)', fontSize: '13px', marginBottom: '24px'}}>01 / R&D CENTER</div>
                            <h4>數據驅動研發</h4>
                            <p style={{fontSize: '14px', color: 'var(--muted)', marginTop: '12px'}}>配備 13 項精密實驗室儀器，對原料穩定性與分散性進行分子級監控。</p>
                        </div>
                        <div className="card col-4">
                            <div className="mono" style={{color: 'var(--accent)', fontSize: '13px', marginBottom: '24px'}}>02 / COMPLIANCE</div>
                            <h4>全球環保標準</h4>
                            <p style={{fontSize: '15px', color: 'var(--muted)', marginTop: '12px'}}>遵循 REACH 與 ROHS 規範，確保在高端製造中的綠色合規。</p>
                        </div>
                        <div className="card col-4">
                            <div className="mono" style={{color: 'var(--accent)', fontSize: '13px', marginBottom: '24px'}}>03 / NETWORK</div>
                            <h4>跨區協作服務</h4>
                            <p style={{fontSize: '15px', color: 'var(--muted)', marginTop: '12px'}}>聯動臺灣管理核心與東莞製造基地，提供穩定的物流供應。</p>
                        </div>
                    </div>
                </div>
            );
        };

        const AboutPage = ({ companyEn }) => {
            const r1 = useReveal();
            const r2 = useReveal();
            const rFactory = useReveal();

            const fallbackEquipments = [
                { name: 'DIN耐磨耗測試機', img: 'mpqhm7sk-DIN耐磨耗測試機.png', crop: true },
                { name: '無轉子硫化儀', img: 'mpqhltbj-無轉子硫化儀.png' },
                { name: '臥式低溫耐寒試驗機', img: 'mpqhltbh-臥式低溫耐寒試驗機.png', crop: true },
                { name: '色差分光儀', img: 'mpqhltbg-色差分光儀.png', crop: true },
                { name: '平板硫化機', img: 'mpqhltbc-平板硫化機.png' },
                { name: '精密注塑機', img: 'mpqho491-精密注塑機.png' },
                { name: '實驗用吹袋成型機', img: 'mpqho48v-實驗用吹袋成型機.png' },
                { name: '熔融指數儀', img: 'mpqhm7si-熔融指數儀.png' }
            ];

            const cmsEquipments = (CMS.gallery || [])
                .filter((item) => item.type === '實驗室設備' && item.image)
                .map((item) => ({ name: item.title, img: item.image }));
            const equipments = cmsEquipments.length > 0 ? cmsEquipments : fallbackEquipments;

            return (
                <div className="fade-in">
                    <div className="container" style={{marginBottom: 'var(--section-gap)'}}>
                        <section id="about-position" className="reveal" ref={r1}>
                            <div className="badge">ABOUT US / 企業簡介</div>
                            <div className="swd-grid" style={{alignItems: 'start'}}>
                                <div className="col-7">
                                    <h2 style={{fontSize:'48px', lineHeight: 1.2, marginBottom:'32px'}}>企業定位與區位優勢</h2>
                                    <p style={{fontSize:'17px', color:'var(--fg)', marginBottom:'32px', lineHeight: 1.8}}>
                                        <b>{companyEn}</b> 是一家集橡塑材料添加助劑研發、生產、銷售及貿易代理於一體的專業型企業，總部坐落於廣東省東莞市沙田鎮齊沙工業區。公司毗鄰東莞輪渡路，緊鄰沿江高速與虎門輪渡碼頭，交通網絡密集、物流體系發達，為業務輻射全國乃至全球提供了高效的區位支撐。
                                    </p>

                                    <h3 style={{fontSize:'28px', marginBottom:'20px'}}>產品應用與市場佈局</h3>
                                    <p style={{fontSize:'16px', color:'var(--muted)', marginBottom:'48px', lineHeight: 1.8}}>
                                        公司產品性能穩定、品質可靠，廣泛應用於橡膠、塑膠、塑膠抽粒改性、EVA 發泡成型、油墨等多領域。憑藉優質的產品與服務，銷售網絡已覆蓋全國，持續為新老客戶創造價值。
                                    </p>

                                    <div style={{display: 'flex', gap: '64px'}}>
                                        <div><div className="mono" style={{fontSize:'28px', fontWeight:700, color:'var(--accent)'}}>13+</div><div style={{fontSize:'12px', color:'var(--muted)'}}>精密實驗設備</div></div>
                                        <div><div className="mono" style={{fontSize:'28px', fontWeight:700, color:'var(--accent)'}}>A級</div><div style={{fontSize:'12px', color:'var(--muted)'}}>納稅信用企業</div></div>
                                        <div><div className="mono" style={{fontSize:'28px', fontWeight:700, color:'var(--accent)'}}>SGS</div><div style={{fontSize:'12px', color:'var(--muted)'}}>全球權威認證</div></div>
                                    </div>
                                </div>
                                <div className="col-5">
                                    <div className="factory-frame reveal-right" ref={rFactory}>
                                        <img src="mps16nte-截圖-2026-05-30-下午3.28.18.png" className="factory-img" alt="生產基地" />
                                    </div>
                                    <p style={{fontSize:'12px', color:'var(--muted)', marginTop:'20px', textAlign:'right', fontStyle: 'italic'}}>東莞生產基地 / 現代化混合與包裝中心</p>
                                </div>
                            </div>
                        </section>
                    </div>

                    <div className="container" style={{marginBottom: 'var(--section-gap)'}}>
                        <section id="about-capability" className="reveal" ref={useReveal()}>
                            <h2 style={{fontSize: '40px', marginBottom: '60px', textAlign: 'center'}}>核心實力：技術、品控與定製化服務</h2>
                            <div className="swd-grid">
                                <div className="card col-4">
                                    <h4 style={{color: 'var(--accent)', marginBottom: '16px'}}>技術與生產實力</h4>
                                    <p style={{fontSize: '15px', color: 'var(--muted)'}}>深耕塑膠助劑領域，擁有資深技術研發團隊與智能化生產、檢測設備，可精準把控產品性能與品質穩定性。</p>
                                </div>
                                <div className="card col-4">
                                    <h4 style={{color: 'var(--accent)', marginBottom: '16px'}}>定製化服務</h4>
                                    <p style={{fontSize: '15px', color: 'var(--muted)'}}>以客戶需求為導向，提供助劑產品推薦、客製化配方調配服務，為不同場景打造「優良、經濟、實用」的解決方案。</p>
                                </div>
                                <div className="card col-4">
                                    <h4 style={{color: 'var(--accent)', marginBottom: '16px'}}>品質認證</h4>
                                    <p style={{fontSize: '15px', color: 'var(--muted)'}}>全系列產品通過 SGS、ITS 等權威機構檢測，嚴格符合 EN71、REACH 等國際環保標準，品質保障能力獲行業認可。</p>
                                </div>
                            </div>
                        </section>
                    </div>

                    <div id="about-laboratory" style={{background: 'white', padding: '120px 0', borderTop: '1px solid var(--border)', borderBottom: '1px solid var(--border)'}}>
                        <div className="container">
                            <section className="reveal" ref={r2}>
                                <div style={{textAlign: 'center', marginBottom: '80px'}}><div className="badge">R&D LABORATORY / 技術研發中心</div><h2 style={{fontSize: '44px'}}>精密數據，定義品質高度</h2></div>
                                <div className="lab-grid">
                                    {equipments.map((item, i) => (
                                        <div key={i} className={`lab-item reveal visible ${item.crop ? 'needs-crop' : ''}`}>
                                            <div className="lab-img-box"><img src={item.img} alt={item.name} /></div>
                                            <h4 style={{fontSize:'15px', fontWeight: 600}}>{item.name}</h4>
                                            <div className="mono" style={{fontSize:'10px', color:'var(--accent)', marginTop:'12px', borderTop: '1px solid var(--border)', paddingTop: '12px', display: 'inline-block'}}>PRECISION CALIBRATED</div>
                                        </div>
                                    ))}
                                </div>
                            </section>
                        </div>
                    </div>
                </div>
            );
        };

                const ProductsPage = ({ onNavigate, productId }) => {
            const fallbackCategories = [
                { group: '發泡與膨脹助劑', title: '熱膨脹微膠囊', enTitle: 'EXPANDABLE MICROSPHERES', desc: '發泡過程均勻平緩、粒徑分佈均一，適合輕量化與尺寸安定需求。', id: 'microspheres', keywords: '發泡 膨脹 微膠囊 輕量 注塑 擠出' },
                { group: '發泡與膨脹助劑', title: '樹脂載體膨脹母粒', enTitle: 'EXPANSION MASTERBATCH', desc: '複合型膨脹發泡母粒，提升膨脹劑在塑料粒子中的分散效果。', id: 'expansion-masterbatch', keywords: '膨脹 母粒 TPE TPU PE 鞋材 密封條' },
                { group: '發泡與膨脹助劑', title: '化學發泡劑', enTitle: 'CHEMICAL FOAMING AGENT', desc: '用於製造輕量化和多孔塑料製品，協助改善表面與成型效率。', id: 'chemical-foaming', keywords: '化學 發泡 AC 碳酸氫鈉 EVA PVC PE PP' },
                { group: '發泡與膨脹助劑', title: '發泡助劑母粒', enTitle: 'FOAMING AGENT MASTERBATCH', desc: '將發泡劑與載體樹脂混合製成濃縮顆粒，利於穩定分散。', id: 'foaming-masterbatch', keywords: '發泡 母粒 DU-50 5315-P PE EVA' },
                { group: '功能性助劑', title: '耐磨助劑/矽酮母粒/耐刮擦助劑', enTitle: 'ANTI-SCRATCH MASTERBATCH', desc: '適用 EVA、PVC、TPU 與鞋材等磨耗測試需求。', id: 'anti-scratch', keywords: '耐磨 矽酮 耐刮擦 EVA TPU PVC DIN SGS' },
                { group: '功能性助劑', title: '螢光增白劑', enTitle: 'FLUORESCENT WHITENING AGENT', desc: '吸收紫外光並轉化為藍色螢光，改善白度與明亮外觀。', id: 'brightener', keywords: '增白 螢光 OB OB-1 127 PVC PS PP' },
                { group: '功能性助劑', title: '抗氧化劑', enTitle: 'ANTIOXIDANT', desc: '抑制或延緩氧化反應，提升材料加工穩定性與耐用性。', id: 'antioxidant', keywords: '抗氧化 1010 1076 168 聚合物 熱穩定' },
                { group: '功能性助劑', title: '紫外線吸收劑', enTitle: 'ULTRAVIOLET ABSORBENT', desc: '吸收紫外線並轉為無害能量，降低高分子材料老化。', id: 'uv-absorber', keywords: '紫外線 UV UV-201 UV-P UV-770 光穩定' },
                { group: '功能性助劑', title: 'EVA抗靜電助劑-粉末', enTitle: 'EVA ANTISTATIC ADDITIVE', desc: 'EVP-715 為 EVA 專用型抗靜電助劑，適用薄膜、板材、鞋材。', id: 'antistatic-eva', keywords: 'EVA 抗靜電 EVP-715 粉末 電阻率 鞋材' },
                { group: '功能性助劑', title: 'TPU耐黃變助劑母粒', enTitle: 'TPU YELLOWING RESISTANCE MASTERBATCH', desc: '兼具抗熱氧化與光穩定作用，延緩 TPU 因紫外光造成的老化。', id: 'yellowing-resistance', keywords: 'TPU 耐黃變 抗氧化 光穩定 母粒' },
                { group: '功能性助劑', title: 'TPU抗靜電助劑母粒', enTitle: 'TPU ANTISTATIC MASTERBATCH', desc: '長效性內加型抗靜電添加劑，適用透明 TPU 製品需求。', id: 'antistatic-tpu', keywords: 'TPU 抗靜電 ESU-320 透明 電阻 母粒' },
                { group: '顏料與色母', title: '顏料母粒-色母粒', enTitle: 'COLOR MASTERBATCH', desc: '提升顏料分散性與顏色穩定性，可依載體、用途、環保要求定製。', id: 'color-masterbatch', keywords: '色母 顏料 母粒 TPU PE EVA 黑 白 螢光' },
                { group: '顏料與色母', title: '螢光顏料', enTitle: 'FLUORESCENT PIGMENTS', desc: '受紫外線或特定波長光照射時呈現鮮豔螢光效果。', id: 'fluorescent-pigment-p18', keywords: '螢光 顏料 5120 5121 5122 5123 5124 5126' },
                { group: '顏料與色母', title: '紅色顏料', enTitle: 'RED PIGMENTS', desc: '紅色有機顏料系列，適用塑膠著色及高溫加工條件。', id: 'pigment-red', keywords: '紅色 顏料 Pigment Red 2501 2548 2503' },
                { group: '顏料與色母', title: '酞菁顏料/紫色顏料', enTitle: 'PHTHALOCYANINE & VIOLET PIGMENTS', desc: '酞菁藍、酞菁綠與紫色顏料，具良好耐光與耐溫性能。', id: 'pigment-phthalocyanine', keywords: '酞菁 紫色 Blue Green Violet 6702 5501 7508' },
                { group: '顏料與色母', title: '螢光顏料 (高牢度)', enTitle: 'HIGH-FASTNESS FLUORESCENT PIGMENTS', desc: '高牢度螢光顏料資料表，含 PP、PE、PVC、TPU 等應用參考。', id: 'fluorescent-pigment-p24', keywords: '高牢度 螢光 5120 5121 5123 5125 5126' },
                { group: '顏料與色母', title: '氧化鐵顏料', enTitle: 'IRON OXIDE PIGMENTS', desc: '氧化鐵紅、鐵黃、鐵黑等無機顏料，耐遷移與化學穩定性佳。', id: 'pigment-iron-oxide', keywords: '氧化鐵 Pigment Red 101 Yellow 42 Black 11' },
                { group: '顏料與色母', title: '群青/鈦白粉/炭黑', enTitle: 'ULTRAMARINE & TITANIUM & CARBON BLACK', desc: '經典白、黑與群青無機顏料，適用高要求著色場景。', id: 'pigment-ultramarine', keywords: '群青 鈦白粉 炭黑 Blue 29 White 6 Black 7' },
                { group: '顏料與色母', title: '耐高溫無機顏料', enTitle: 'HIGH TEMPERATURE INORGANIC PIGMENTS', desc: '複合無機金屬氧化物顏料，適用高溫加工與戶外耐候需求。', id: 'pigment-high-temp', keywords: '耐高溫 無機 Yellow 53 Brown 24 Blue 28 Green 50' },
                { group: '顏料與色母', title: '紅色顏料/橙色顏料', enTitle: 'RED & ORANGE PIGMENTS', desc: '中高端紅色與橙色工程著色顏料，兼顧抗遷移與耐候性能。', id: 'pigment-orange-red', keywords: '紅色 橙色 Red Orange Violet 2572 4584' },
                { group: '顏料與色母', title: '黃色顏料', enTitle: 'YELLOW PIGMENTS', desc: '黃色工程顏料系列，發色強度與熱穩定性佳。', id: 'pigment-yellow', keywords: '黃色 Yellow 4562 4551 4568 4662 4563' },
                { group: '特殊加工助劑', title: '鐳雕助劑', enTitle: 'LASER MARKING POWDER', desc: '可直接混拌注塑或造粒後加工，適用多波長激光打標。', id: 'laser-marking', keywords: '鐳雕 雷雕 激光 打標 PVC PS PE PP ABS TPU' }
            ];
            const categories = fallbackCategories.map((item) => {
                const override = CMS.products?.[item.id];
                return override ? {
                    ...item,
                    title: override.name || item.title,
                    enTitle: override.englishName || item.enTitle,
                    desc: override.shortDescription || item.desc,
                    group: override.category || item.group
                } : item;
            });
            const [query, setQuery] = useState('');
            const initialProductId = categories.some((cat) => cat.id === productId) ? productId : categories[0].id;
            const [selectedId, setSelectedId] = useState(initialProductId);
            const r = useReveal();
            const normalizedQuery = query.trim().toLowerCase();
            const filteredCategories = categories.filter((cat) => {
                if (!normalizedQuery) return true;
                return `${cat.group} ${cat.title} ${cat.enTitle} ${cat.desc} ${cat.keywords}`.toLowerCase().includes(normalizedQuery);
            });
            const selected = filteredCategories.find((cat) => cat.id === selectedId) || filteredCategories[0] || categories.find((cat) => cat.id === selectedId) || categories[0];
            const product = productDb[selected.id] || {};
            const grouped = filteredCategories.reduce((acc, cat) => {
                if (!acc[cat.group]) acc[cat.group] = [];
                acc[cat.group].push(cat);
                return acc;
            }, {});
            const groupOrder = ['發泡與膨脹助劑', '功能性助劑', '顏料與色母', '特殊加工助劑'];
            const overviewText = (product.overview && product.overview[0]) || selected.desc;
            const appText = product.apps && product.apps.length > 0 ? product.apps.slice(0, 2).join(' ') : '請查看技術數據與產品詳情。';
            const storageText = product.storage && product.storage.length > 0 ? product.storage[0] : '依產品特性與客戶應用條件確認保存方式。';

            useEffect(() => {
                if (filteredCategories.length > 0 && !filteredCategories.some((cat) => cat.id === selectedId)) {
                    setSelectedId(filteredCategories[0].id);
                }
            }, [query]);

            useEffect(() => {
                if (categories.some((cat) => cat.id === productId)) {
                    setSelectedId(productId);
                }
            }, [productId]);

            return (
                <div className="container">
                    <div className="badge">PRODUCT SOLUTIONS / 產品中心</div>
                    <h2 style={{fontSize:'56px', marginBottom:'20px'}}>產品目錄</h2>
                    <p style={{fontSize:'17px', color:'var(--muted)', maxWidth:'760px', marginBottom:'48px'}}>
                        以列表方式快速查找 22 項橡塑助劑與顏料產品，可用名稱、英文、型號或材料關鍵字搜尋。
                    </p>

                    <div className="product-browser reveal" ref={r}>
                        <aside className="product-index-panel">
                            <input
                                className="product-search"
                                value={query}
                                onChange={(e) => setQuery(e.target.value)}
                                placeholder="搜尋產品、英文、型號"
                                aria-label="搜尋產品"
                            />
                            <div className="mono" style={{fontSize:'11px', color:'var(--muted)', marginTop:'12px'}}>
                                {filteredCategories.length} / {categories.length} 項產品
                            </div>
                            {filteredCategories.length === 0 ? (
                                <div className="product-empty">沒有符合的產品，請換一個關鍵字。</div>
                            ) : (
                                <>
                                    <div className="product-list-groups">
                                        {groupOrder.map((group) => grouped[group] && (
                                            <div key={group}>
                                                <div className="product-group-title">{group}</div>
                                                {grouped[group].map((cat) => (
                                                    <button
                                                        key={cat.id}
                                                        className={`product-list-button ${selected.id === cat.id ? 'active' : ''}`}
                                                        onClick={() => setSelectedId(cat.id)}
                                                    >
                                                        <span className="product-list-name">{cat.title}</span>
                                                        <span className="product-list-en">{cat.enTitle}</span>
                                                    </button>
                                                ))}
                                            </div>
                                        ))}
                                    </div>
                                    <div className="product-mobile-results">
                                        {filteredCategories.map((cat) => {
                                            const item = productDb[cat.id] || {};
                                            const shortText = item.characteristics || cat.desc;
                                            const rowCount = item.rows ? item.rows.length : 0;
                                            return (
                                                <article key={cat.id} className="product-mobile-card">
                                                    <div className="product-mobile-head">
                                                        <div>
                                                            <div className="product-mobile-title">{cat.title}</div>
                                                            <div className="product-mobile-en">{cat.enTitle}</div>
                                                        </div>
                                                        <div className="product-mobile-meta">{rowCount} 筆數據</div>
                                                    </div>
                                                    <div className="product-mobile-desc">{shortText}</div>
                                                    <button className="button product-mobile-action" onClick={() => onNavigate('product-detail', cat.id)}>
                                                        查看產品詳情
                                                    </button>
                                                </article>
                                            );
                                        })}
                                    </div>
                                </>
                            )}
                        </aside>

                        <section className="product-preview-panel">
                            <div className="product-preview-kicker">
                                <div>
                                    <div className="product-preview-en">{selected.enTitle}</div>
                                    <h3 className="product-preview-title">{selected.title}</h3>
                                    <div className="mono" style={{fontSize:'12px', color:'var(--muted)'}}>{selected.group}</div>
                                </div>
                                <button className="button" onClick={() => onNavigate('product-detail', selected.id)}>
                                    查看詳情
                                </button>
                            </div>

                            <div>
                                <h4 style={{fontSize:'18px', marginBottom:'14px'}}>產品特性</h4>
                                <p style={{fontSize:'16px', color:'var(--muted)', lineHeight:1.85}}>{product.characteristics || selected.desc}</p>
                            </div>

                            <div className="product-summary-grid">
                                <div className="product-summary-item">
                                    <div className="product-summary-label">產品概述</div>
                                    <div className="product-summary-value">{overviewText}</div>
                                </div>
                                <div className="product-summary-item">
                                    <div className="product-summary-label">應用 / 搜尋線索</div>
                                    <div className="product-summary-value">{appText}</div>
                                </div>
                                <div className="product-summary-item">
                                    <div className="product-summary-label">資料狀態</div>
                                    <div className="product-summary-value">含 {product.rows ? product.rows.length : 0} 筆技術數據；{storageText}</div>
                                </div>
                            </div>

                            <div className="table-container" style={{maxHeight:'260px', overflow:'auto'}}>
                                <SpecsTableRenderer tableType={product.tableType} rows={(product.rows || []).slice(0, 4)} />
                            </div>
                        </section>
                    </div>
                </div>
            );
        };

        const productDb = {
                'microspheres': {
                    title: '熱膨脹微膠囊',
                    enTitle: 'EXPANDABLE MICROSPHERES',
                    characteristics: '熱膨脹微膠囊，發泡過程均勻平緩、粒徑分佈均一（粒徑分佈窄，粒度成型完整）。',
                    overview: [
                        '產品為單物理性能膨脹劑，作用效能當加熱時，膨脹微膠囊中的熱膨脹殼層軟化，內氣體壓力釋發而產生物理性的膨脹。',
                        '廣泛適用於工程塑料產品/熱塑性彈性體，達成注塑成型中輕質，尺寸安定性及減少翹曲、避免凹陷等需求，以均勻發泡的獨特性能並提高產品良率。'
                    ],
                    apps: [
                        '適用PVC、SBS、SEBS、EVA、TPU、TPEE、EPDM、橡膠等材料各注塑/擠出/流涎工藝。',
                        '通用汽車零部件，樹脂性鞋底、發泡油墨膠漿、壁紙、粘著劑等應用。',
                        '物理輕質需求及隔熱層、隔音層工藝產品。'
                    ],
                    storage: [
                        '注意事項：建議添加量，依客戶產品需求及物理性能為採用程度自行調整。'
                    ],
                    hasDiagram: true,
                    tableType: 'microspheres',
                    rows: [
                        { model: 'S-101', appearance: '淡白色粉末狀', size: '15-30', startTemp: '130-145℃', peakTemp: '185-200℃', pack: '50KG/紙桶' },
                        { model: 'F-700', appearance: '淡白色粉末狀', size: '15-25', startTemp: '145-155℃', peakTemp: '190-205℃', pack: '50KG/紙桶' },
                        { model: 'DU-808', appearance: '淡白色粉末狀', size: '22-32', startTemp: '135-150℃', peakTemp: '190-210℃', pack: '20KG/紙箱 / 50KG/紙桶' },
                        { model: 'H-850D (S)', appearance: '淡白色粉末狀', size: '28-35', startTemp: '145-155℃', peakTemp: '195-215℃', pack: '40KG/紙桶' }
                    ]
                },
                'expansion-masterbatch': {
                    title: '樹脂載體膨脹母粒',
                    enTitle: 'EXPANSION MASTERBATCH',
                    characteristics: '樹脂載體膨脹母粒，為複合型膨脹發泡母粒。',
                    overview: [
                        '產品為複合型發泡母粒，作用效能當加熱時，膨脹母粒中的膨脹熱塑性殼層軟化，內氣體壓力釋發而產生化學及物理性的膨脹。',
                        '有效益於塑料粒子上的分散效果，廣泛適用於各種熱塑性彈性體中，達成注塑成型中輕質，尺寸安定性及減少翹曲、避免凹陷等需求，以均勻發泡的獨特性能並提高產品良率。'
                    ],
                    apps: [
                        'TPE（SEBS、SBS），TPU，PE，鞋材、密封條。可應用於注塑、擠出、流涎等輕質工藝條件。'
                    ],
                    storage: [
                        '內含添加物：熱塑型彈性體、分散劑、發泡劑、膨脹微膠囊等。',
                        '內襯塑料袋、外覆紙塑複合袋包裝，避光防水保存,為安全起見，存放低於室溫40℃處。小心輕放，防止異物穿刺破包。'
                    ],
                    hasDiagram: false,
                    tableType: 'expansion_masterbatch',
                    rows: [
                        { model: 'TP-13', resin: 'SBS', app: 'TPR鞋材、SEBS複合材注塑/擠出/流涎' },
                        { model: 'TP-SQR', resin: '複合材料', app: 'TPU、SEBS複合材料' },
                        { model: 'TP-30W', resin: '複合材料', app: 'TPR、SEBS、TPU' },
                        { model: 'DU-500', resin: '複合材料', app: 'TPR、SEBS、PS、TPU' },
                        { model: 'DU-55', resin: 'EVA', app: 'TPU注塑/擠出，SEBS、SBS、輕質複合材' }
                    ]
                },
                'anti-scratch': {
                    title: '耐磨助劑/矽酮母粒/耐刮擦助劑',
                    enTitle: 'ANTI-SCRATCH MASTERBATCH',
                    characteristics: '本品適用於EVA發泡材、PVC、TPU線材、鞋材等磨耗測試適用於較高要求的EVA發泡材料，DIN耐磨耗性能可達80以內（實際係數視實際配方而定）優異的耐磨、止滑、貼合加工性能，不影響成品良率，不產生析出、黃垢、吐霜、氣泡等現象。',
                    overview: [
                        '產品為有機耐磨酮在EVA/SBS的分散體，用於與EVA/SBS相容的體系。',
                        '相較於低分子量的酮添加劑而言，添加性能更優越，可避免塑料在螺桿中打滑，提高脫模性能，降低摩擦係數及提高其他性能。'
                    ],
                    apps: [
                        'EVA發泡材、PVC料、TPU電線電纜料、SBS/SEBS複合材料。',
                        '加入方式：直接加入與膠料共同混煉，適合EVA造粒、EVA發泡，TPU、TPR、TPE、PVC等塑料材料，直接與原材料一同攪拌均勻後進入擠出機擠出、模壓、注塑成型。'
                    ],
                    storage: [
                        '建議用量：於EVA或類熱塑型膠粒中，添加0.1-2.0wt%產品可提高樹脂的加工性能與流動性，包括模具填充良好、擠出力榘降低、內部潤滑性和脫模性變好，出料速度變快，製品較少翹曲等。如添加2~10%則表面性能會改善，包括潤滑性能及滑動性能變好，摩擦係數降低，抗磨損性增加等。',
                        '本產品已通過SGS/ EN 71-3項目檢測合格。'
                    ],
                    hasDiagram: false,
                    tableType: 'anti_scratch',
                    rows: [
                        { model: 'ES-8156', appearance: '淡白色顆粒', resin: 'EVA', content: '45', scope: 'EVA/TPU/PVC/PA' },
                        { model: 'ES-2155', appearance: '淡白色顆粒', resin: 'PE', content: '50', scope: 'PE/PP/PC/PA/ABS' },
                        { model: 'TR-6350', appearance: '淡白色顆粒', resin: 'SBS', content: '50', scope: 'TPR/TPE' },
                        { model: 'VS-525', appearance: '淡白色顆粒', resin: 'EVA', content: '40', scope: 'TPU/PVC' }
                    ]
                },
                'chemical-foaming': {
                    title: '化學發泡劑',
                    enTitle: 'CHEMICAL FOAMING AGENT',
                    characteristics: '減少流痕和縮痕，提升表面光滑度，縮短成型時間、減輕重量和減省材料用於製造輕量化和多孔的塑料製品。',
                    overview: [
                        '化學發泡劑是為了在合成樹脂或橡膠等高分子材料中混料後，通過熱分解來產生氣體，為了製造海綿（Sponge）產品而添加的化工產品，分為：',
                        '有機化學發泡劑（Organic Chemical Blowing Agent）指一類在特定溫度下分解並產生氣體的有機化合物，常用於塑料、橡膠等材料的發泡，以製造輕質、有彈性的製品。',
                        '無機化學發泡劑（Inorganic Chemical Blowing Agent）系通過化學分解反應產生氣體的一類發泡材料，主要包含碳酸氫鈉、碳酸銨、亞硝酸銨等化合物，屬於化學發泡劑的細分類別。'
                    ],
                    apps: [
                        '利用EVA樹脂製成的泡沫塑料，鞋材、防噪音材料、玩具、其他EVA海綿等。',
                        '利用PE樹脂製成的泡沫塑料，用於汽車門板、管道保溫材料、墊子等產品。',
                        '利用PVC樹脂製成的泡沫塑料，有絕緣管、人造皮革、發泡壁紙、地板裝飾材等。',
                        '另亦可依客需求開發配製新品定製。'
                    ],
                    storage: [
                        '內襯塑料袋、外覆紙塑複合袋包裝，避光防水保存,為安全起見，存放低於室溫40℃處。小心輕放，防止異物穿刺破包。'
                    ],
                    hasDiagram: false,
                    tableType: 'chemical_foaming',
                    rows: [
                        { model: 'AC-3000', gas: '210-220', main: '偶氮二甲醯胺', scope: 'EVA、PVC、PP、PE、SEBS、SBS' },
                        { model: 'AC-Z', gas: '195-205', main: '偶氮二甲醯胺', scope: 'EVA、PVC、PP、PE、SEBS、SBS' },
                        { model: 'GAT-8', gas: '135-155', main: '偶氮二甲醯胺', scope: 'SBS' },
                        { model: 'GAT-2000', gas: '100-110', main: '碳酸氫鈉', scope: 'PP、PE、PS、SBS' },
                        { model: 'G-04', gas: '90-100', main: '碳酸氫鈉', scope: 'SBS（微細發泡孔表相）' },
                        { model: 'TH', gas: '105-115', main: '碳酸氫鈉', scope: 'PVC、PE、SBS（粗發泡孔表相）' }
                    ]
                },
                'foaming-masterbatch': {
                    title: '發泡助劑母粒',
                    enTitle: 'FOAMING AGENT MASTERBATCH',
                    characteristics: '發泡助劑母粒，也稱為發泡母粒，是一種將發泡劑與載體樹脂混合製成的濃縮顆粒，用於製造輕量化和多孔的塑料製品。母粒中的核心成分，它在受熱或特定條件下會分解產生氣體，例如氮氣、二氧化碳等。',
                    overview: [
                        '產品方便地添加到塑料樹脂中，在加工過程中產生氣體，形成細小的氣泡，從而降低產品密度，改善材料的隔熱、隔音和浮力等性能。',
                        '與最終產品相同的塑料樹脂，確保母粒與主料的良好兼容性，使發泡均勻分散。有效益於塑料粒子上的分散效果，廣泛適用於各種熱塑性彈性體中，達成注塑成型中輕質，尺寸安定性及減少翹曲、避免凹陷等需求，以均勻發泡的獨特性能並提高產品良率。'
                    ],
                    apps: [
                        '發泡劑母粒在建築領域中廣泛用於製作保溫材料。由於其具有輕質、吸聲、隔熱等特點，母粒還被用於包裝材料的應用。',
                        '具有良好的抗衝擊性和緩衝性能，被廣泛應用於產品包裝中，起到保護商品不受損的作用。發泡母粒還被用於交通工具、電子器件的製造以及醫療器械等多個領域。'
                    ],
                    storage: [
                        '內襯塑料袋、外覆紙塑複合袋包裝，避光防水保存,為安全起見，存放低於室溫40℃處。小心輕放，防止異物穿刺破包。'
                    ],
                    hasDiagram: false,
                    tableType: 'foaming_masterbatch',
                    rows: [
                        { model: 'DU-50', resin: 'PE複合材料', main: '碳酸氫鈉', scope: '通用於PE與PP、ABS、PPO，在加工時可均勻分散在主體塑料樹脂顆粒，使製品各部份維持穩定性發泡氣孔，降低最終產品密度，抑制收縮翹曲現象。' },
                        { model: '5315-P', resin: 'EVA', main: '偶氮二甲醯胺', scope: '通用於PE與PVC，在加工時可均勻分散在主體塑料樹脂顆粒，使製品各部份維持穩定性發泡氣孔，降低最終產品密度，抑制凹陷現象。' }
                    ]
                },
                'color-masterbatch': {
                    title: '顏料母粒-色母粒',
                    enTitle: 'COLOR MASTERBATCH',
                    characteristics: '色母粒使顏料在製品中具有更好的分散性，有利於保持顏料的化學穩定性.保證製品顏色的穩定，保護操作人員的健康，適配自動化無塵車間生產工藝條件、保持環境的潔淨。',
                    overview: [
                        '它由顏料或染料、載體和添加劑三種基本要素所組成，是把超常量的顏料或染料均勻地載附於樹脂之中而得到的聚集體。',
                        '可客製化配色，按載體樹脂、用途、環保要求定製確保母粒與主料的良好兼容性。有效益於塑料粒子上的分散效果，廣泛適用於各種熱塑/熱固性彈性體中以均勻性能並提高產品良率。'
                    ],
                    apps: [
                        '色母粒著色和製品加工一次完成，避免造粒著色對塑料的加熱過程，對保護塑料製品的品質提升良率。',
                        '可針對載體樹脂，工藝用途，加工溫度條件等領域進行特殊配製與配色。塑料行業中，色母粒市場需求集中在工程塑料製品（家電、汽車）、建築塑料製品（管材、型材）、農用薄膜製品、塑料包裝製品等方面。家電、汽車、建築塑料製品應用。'
                    ],
                    storage: [
                        '內襯塑料袋、外覆紙塑複合袋包裝，避光防水保存，為安全起見，存放低於室溫40℃處。小心輕放，防止異物穿刺破包。'
                    ],
                    hasDiagram: false,
                    tableType: 'color_masterbatch',
                    rows: [
                        { model: '5075B', resin: 'TPU', color: '黑', pigment: '碳黑', scope: 'TPU注塑/擠出/流涎應用' },
                        { model: 'X-25', resin: 'PE', color: '黑', pigment: '碳黑', scope: 'PE電線/電纜 一般吹膜/注塑/擠出應用' },
                        { model: 'CW-18', resin: 'PE', color: '白', pigment: '鈦白粉', scope: '一般級白色母 常規注塑/擠出應用' },
                        { model: 'CW-133', resin: 'PE', color: '白', pigment: '鈦白粉', scope: '高濃度白色母 高級注塑/吹膜應用' },
                        { model: '熒光色母', resin: 'EVA/PE/TPU', color: '熒光多色', pigment: '熒光顏料/鈦白粉', scope: 'EVA/PE/TPU 發泡級/常規注塑/超臨界發泡' },
                        { model: '彩色色母', resin: 'EVA/PE/TPU', color: '可定製多色', pigment: '有機顏料/無機顏料', scope: 'EVA/PE/TPU 發泡級/常規注塑/超臨界發泡' }
                    ]
                },
                'brightener': {
                    title: '螢光增白劑',
                    enTitle: 'FLUORESCENT WHITENING AGENTS',
                    characteristics: '增白劑，是無色到淺色有機化合物。在300-400 納米 (nm) 範圍內吸收主要不可見的紫外線光，並轉化成可見光的紫至藍色熒光光中，以產生更明亮、更清新的外觀。應用於塑料、噴漆、油墨方案和纖維中獲得更亮的顏色或遮蓋泛黃。',
                    overview: [
                        '熒光增白劑是對一類化合物的統稱，它能使布和紙（造紙業使用的熒光增白劑為鈉鹽）的外觀顏色變得更亮和更白。',
                        '此類化合物能吸收電磁波譜中紫外線和可見光譜中紫色（通常波長為340-370納米）的光，重新發射可見光譜中藍色（通常波長為420-470納米）的光。這是一種熒光現象。',
                        '熒光增白劑由於能發射更多的藍光，使原本呈現黃色或橙色的物體消弱呈色上的黃相。'
                    ],
                    apps: [],
                    storage: [
                        '內襯塑料袋、外覆紙塑複合箱包裝，避光防水保存。增白劑的儲放需要注意陰涼乾燥、通風良好、避免高溫和陽光直射，以及使用密閉的耐腐蝕性容器。 同時，應採取必要的安全措施，避免接觸和誤食，並定期檢查儲存狀況。'
                    ],
                    hasDiagram: false,
                    tableType: 'brightener',
                    rows: [
                        { model: '127', name: '4,4\'-雙(2-二甲氧基苯乙烯基)聯苯', enName: '4,4\'-bis(2-methoxystyryl)biphenyl', scope: 'PVC/PS/PP' },
                        { model: 'OB-1', name: '二苯乙烯基雙苯並噁唑', enName: '2,2\'-(1,2-Ethenediyldi-4,1-phenylene)bisbenzoxazole', scope: 'PVC/PS/PP/PE/ABS/EVA' },
                        { model: 'OB', name: '2,5-雙(5-叔丁基-1,3-苯並噁唑-2-基)噻吩', enName: '2,5-BIS(5-TERT-BUTYL-BENZOXAZOL-2-YL)THIOPHENE', scope: 'PVC/PS/PP/PE/ABS' }
                    ]
                },
                'antioxidant': {
                    title: '抗氧化劑',
                    enTitle: 'ANTIOXIDANTS',
                    characteristics: '主要用於防止聚合物材料和油脂、塗料在光照和熱作用下氧化降解。 它能有效抑制或延緩氧化反應，從而延長這些材料的使用壽命。',
                    overview: [
                        '抗氧化劑通過捕獲塑料降解過程中產生的自由基而長期持續性發揮抗氧作用。',
                        '有良好的防止光和熱引起的變色作用，同時還具有一定的光穩定作用。提高產品的加工穩定性和耐用性。可與其它抗氧化劑協同使用。'
                    ],
                    apps: [],
                    storage: [
                        '內襯塑料袋、外覆紙塑複合箱包裝，避光防水保存。紫外線吸收劑的儲放需要注意陰涼乾燥、通風良好、避免高溫和陽光直射，以及使用密閉的耐腐蝕性容器。 同時，應採取必要的安全措施，避免接觸和誤食，並定期檢查儲存狀況。'
                    ],
                    hasDiagram: false,
                    tableType: 'antioxidant',
                    rows: [
                        { model: '1076', name: 'β-(3,5-二叔丁基-4-羥基苯基)丙酸正十八碳醇酯', enName: 'Octadecyl-3-(3\',5\'-di-t-butyl-4\'-hydroxyphenyl) propionate', scope: 'PVC/PS/PE/PP/ABS/PU', note: '抗氧化劑 1076 適用於多種材料，特別是聚合物，能有效防止材料因氧化而降解，延長產品的使用壽命。一般用量為 0.1%-1%。' },
                        { model: '1010', name: 'β-(3,5-二叔丁基-4-羥基苯基)丙酸]季戊四醇酯', enName: 'Pentaerythritol tetrakis(3-(3,5-di-tert-butyl-4-hydroxyphenyl)propionate)', scope: 'PVC/PS/PE/PP/ABS/SBS', note: '抗氧化劑 1010 的化學結構使其具有良好的抗氧化性能和熱穩定性，在多種材料中得到廣泛應用。在製品中的用量為 0.05% 到 1%。' },
                        { model: '168', name: '三[2.4-二叔丁基苯基]亞磷酸酯', enName: 'Tris(2,4-ditert-butylphenyl)phosphite', scope: 'PE/PC/PP/ABS', note: '抗氧化劑 168 屬於亞磷酸酯類抗氧化劑，需與酚類主抗氧劑（如 1010、1076）協同使用以提升綜合性能。在聚丙烯加工中添加 0.1% 抗氧化劑 168 與 0.05% 抗氧化劑 1010 的復配體系，可使材料熱氧老化壽命延長至單一體系的 2.3 倍。' }
                    ]
                },
                'uv-absorber': {
                    title: '紫外線吸收劑',
                    enTitle: 'ULTRAVIOLET ABSORBENTS',
                    characteristics: '可在290-400 納米 (nm) 範圍內吸收主要不可見的紫外線光。熱穩定性能佳，可保持在加工中不因熱而變化，揮發性低、化學穩定性好，不與製品中材料組份發生不利反應。無色、無毒、無臭。',
                    overview: [
                        '紫外線吸收劑是一種光穩定劑，能吸收陽光及熒光光源中的紫外線部分，而本身又不發生變化。',
                        '塑料和其它高分子材料在日光和熒光下，因紫外線的作用，產生自動氧化反應，導致聚合物的降解而劣化，使外觀及機械性能變差。',
                        '加入紫外線吸收劑後可選擇性地吸收這種高能量的紫外線，使之變成無害的能量而釋放或消耗。'
                    ],
                    apps: [],
                    storage: [
                        '內襯塑料袋、外覆紙塑複合箱/紙桶包裝，避光防水保存。紫外線吸收劑的儲放需要注意陰涼乾燥、通風良好、避免高溫和陽光直射，以及使用密閉的耐腐蝕性容器。 同時，應採取必要的安全措施，避免接觸和誤食，並定期檢查儲存狀況。'
                    ],
                    hasDiagram: false,
                    tableType: 'uv',
                    rows: [
                        { model: 'UV-201', name: '2-羥基-4-正辛氧基二苯甲酮', enName: '2-Hydroxy-4-(octyloxy)benzophenone', scope: 'PVC/PE/PP/SBS', note: '本品為能夠強烈地吸收波長為 270-330nm 的紫外線，可用於各種塑料，兼容性好，揮發性小。一般用量為 0.1%-1%。' },
                        { model: 'UV-P', name: '2-(2\'-羥基-5\'-甲基苯基)苯並三唑', enName: '2-(2\'-Hydroxy-5\'-methyl-phenyl)benzotriazole', scope: 'PVC/PS/PU/ABS/Acrylic', note: '能溶於汽油、苯、丙酮等多種有機溶劑。能吸收 270～380nm 波長的紫外線。熔點 130～131℃。在透明製品中的穩定性較在著色製品是更好。在製品中的用量為 0.1%-0.5%。' },
                        { model: 'UV-770', name: '雙(2,2,6,6-四甲基-4-哌啶基)癸二酸酯', enName: 'Bis(2,2,6,6-tetramethyl-4-piperidyl)sebacate', scope: 'PE/PS/PP/ABS/SBS', note: '受阻胺類光穩定劑，光穩定效果優於一般紫外線吸收劑，與抗氧劑並用能提高耐熱性，進一步提高耐老化性能，與聚合物有較好的相容性，熱穩定性優，可用於高溫加工與其它紫外線吸收劑並用具有協同效應。作為光穩定劑，建議加量 0.1-0.5%。' }
                    ]
                },
                'antistatic-eva': {
                    title: 'EVA抗靜電助劑-粉末',
                    enTitle: 'EVA ANTISTATIC ADDITIVE POWDER',
                    characteristics: 'EVP-715，為專用型醋酸乙烯抗靜電助劑，以生物基乙烯和酸酸乙酯特殊合成工藝製造生產，表面電阻率穩定，適用傳統模壓、IP、流涎、擠出類產品各種抗靜電劑分子除可賦予高分子材料表面一定的潤滑性、降低摩擦係數、抑制和減少靜電荷產生。',
                    overview: [
                        '產品為高分子永久型抗靜電助劑, 屬親水性聚合物。',
                        '當其和高分子基體共混後 , 一方面由於其分子鏈的運動能力較強 , 分子間便於質子移動 , 通過離子導電來傳導和釋放產生的靜電荷;抗靜電能力是通過其特殊的分散形態體現的。',
                        '構成導電性表層。不與製品中材料組成上發生不利反應。製品置放不吐霜。其建議添加量為：15.0-25.0。'
                    ],
                    apps: [
                        'EVA薄膜、擠出板材、鞋材、注塑發泡製品等。'
                    ],
                    storage: [
                        '注意事項：置於陰涼避光且通風良好處、必須存放於乾燥，避光密閉容器中，常規有效期為12個月，開封後請在3個月內使用完畢。',
                        '※詳細安全資料請參見物質安全資料表(MSDS)'
                    ],
                    hasDiagram: false,
                    tableType: 'simple_param',
                    rows: [
                        { param: '外觀 (目測)', val: '白色粉末' },
                        { param: '密度', val: '1.20-1.25g/cm³' },
                        { param: '電阻率 Ω·m', val: '10^7' },
                        { param: '包裝', val: '25KG/紙塑複合袋' }
                    ]
                },
                'fluorescent-pigment-p18': {
                    title: '螢光顏料',
                    enTitle: 'FLUORESCENT PIGMENTS',
                    characteristics: '熒光顏料是一種特殊的顏料，它在受到紫外線或其他特定波長的光照射時，會吸收光能並以更長的波長髮出可見光，呈現出鮮豔的“熒光”效果。 這種發光是即時的，當光源消失後，發光也會立即停止。',
                    overview: [
                        '具高亮度與高反射率，熒光顏料比普通顏料更亮，反射光線更強，色彩更鮮豔，由超細均勻和不透明的熱固性氨基樹脂微球顆粒組成。',
                        '濃度高，著色力強，易分散，抗粘輥和耐溶劑。它們適用於塑料，增塑溶膠和油墨。塗料和其他著色區域。適用於PP，PE，EVA，硬質PVC等。'
                    ],
                    apps: [],
                    storage: [
                        '內襯塑料袋、外覆紙箱包裝，避光防水保存，紫外線吸收劑的儲放需要注意陰涼乾燥、通風良好、避免高溫和陽光直射，以及使用密閉的耐腐蝕性容器。 同時，應採取必要的安全措施，避免接觸和誤食，並定期檢查儲存狀況。'
                    ],
                    hasDiagram: false,
                    tableType: 'fluorescent_list',
                    rows: [
                        { model: '5120', name: '檸檬黃 (LEMON YELLOW)', colorHex: '#E2F033' },
                        { model: '5121', name: '綠色 (GREEN)', colorHex: '#39FF14' },
                        { model: '5122', name: '橙黃 (ORANGE YELLOW)', colorHex: '#FFD500' },
                        { model: '5123', name: '橙色 (ORANGE)', colorHex: '#FF5F00' },
                        { model: '5124', name: '橙紅 (ORANGE RED)', colorHex: '#FF2A00' },
                        { model: '5125', name: '粉紅 (PINK)', colorHex: '#FF1493' },
                        { model: '5126', name: '大紅 (RED)', colorHex: '#FF0000' },
                        { model: '5127', name: '玫紅 (ROSE)', colorHex: '#FF007F' },
                        { model: '5128', name: '紫紅 (MAGENTA)', colorHex: '#FF00FF' },
                        { model: '5129', name: '藍色 (BLUE)', colorHex: '#1F75FE' },
                        { model: '5140', name: '紫色 (VIOLET)', colorHex: '#7A00E6' }
                    ]
                },
                'yellowing-resistance': {
                    title: 'TPU耐黃變助劑母粒',
                    enTitle: 'TPU YELLOWING RESISTANCE MASTERBATCH',
                    characteristics: 'TPU耐黃變助劑母粒，為專用型聚氨酯耐黃變母粒，以TPU特殊合成工藝製造生產，兼具抗熱氧化與光穩定劑的作用，對高分子材料中，有效的與樹脂進行融合且均勻分散的助益，有效延長製品因紫外光照而產生老化的現象。',
                    overview: [
                        '產品為選擇熔融指數較穩定適中的TPU材料為載體，低溫合成製造，粘度適當。其顆粒狀本體混溶性佳，可均勻分散於材料上。',
                        '不與製品中材料組成上發生不利反應。製品置放不吐霜。其建議添加量為：1.2-2.0%。作用效能對於光穩定性、抗氧化及紫外線吸收表現上，均有優異的效能。'
                    ],
                    apps: [
                        'TPU薄膜、異型材、鞋材、押出製品等。'
                    ],
                    storage: [
                        '注意事項：置於陰涼避光且通風良好處、必須存放於乾燥，避光密閉容器中，常規有效期為6個月。',
                        '※詳細安全資料請參見物質安全資料表(MSDS)'
                    ],
                    hasDiagram: false,
                    tableType: 'simple_param',
                    rows: [
                        { param: '外觀 (目測)', val: '淡黃色顆粒' },
                        { param: '密度', val: '0.95-1.08g/cm³' },
                        { param: '熔點', val: '135-140℃' },
                        { param: '包裝', val: '25KG/紙塑複合袋' }
                    ]
                },
                'antistatic-tpu': {
                    title: 'TPU抗靜電助劑母粒 (ESU-320)',
                    enTitle: 'TPU ANTISTATIC ADDITIVE MASTERBATCH',
                    characteristics: 'ESU-320 TPU 抗靜電助劑母粒，為專用型熱塑聚氨酯彈性體母粒，以TPU（n）型嵌段線性聚合接枝製造生產，屬長效性內加型抗靜電添加劑。兼具製品物性功能，無析出及製品吐霜發白情況，可供透明製品應用，外拌添加無需預烘本產品。',
                    overview: [
                        '產品為選擇熔融指數較穩定適中的 TPU 材料為載體（約 Shore A 70）其顆粒狀本體混溶性佳，可均勻分散於材料上。',
                        '不與製品中材料組成上發生不利反應。其建議添加量為：5.0-10.0%。其電阻率作用可達≦10 效能、適用於要求優異防靜電性能產品。'
                    ],
                    apps: [
                        'TPU 薄膜、異型材、鞋材、膠輪、押出板材/片材/管材製品等。'
                    ],
                    storage: [
                        '注意事項：置於陰涼避光、乾燥、未開封下保存，常規有效期為一年；若開封後請在三個月內使用完畢，避免光照。應置放於溫度低於 40℃的環境。',
                        '※詳細安全資料請參見物質安全資料表(MSDS)'
                    ],
                    hasDiagram: false,
                    tableType: 'tpu_static_param',
                    rows: [
                        { param: '外觀', method: '目測', unit: '-', val: '淡黃色半透明顆粒' },
                        { param: '熔指', method: 'GB/T 3682', unit: '190℃/2.16kg/min', val: '7.2' },
                        { param: '密度', method: 'GB/T4472-2011', unit: 'g/cm³', val: '1.1-1.2' },
                        { param: '電阻', method: 'GB/T 1410 Ω/cm', unit: '-', val: '≦10^9' }
                    ]
                },
                'laser-marking': {
                    title: '鐳雕助劑',
                    enTitle: 'LASER MARKING POWDER',
                    characteristics: '塑料工藝中可進行直接混拌注塑或造粒再行加工注塑。過程中不改變目標材料的加工工藝參數，然後利用吹塑、注塑、擠出等工藝成型製件。注塑成品後直接利用激光機鐳雕打標即可。適用於355nm（紫外激光）、532nm（綠光激光）和1064nm（光纖激光）。',
                    overview: [
                        '應用鐳雕機設備建議採塑料用紫外鐳雕機（藍色光源）及光纖鐳雕機（紅色光源）。',
                        '粉末無須與塑料顆粒烘料處理，建議可先將原料烘乾後，再行加入鐳雕助劑，進行充份分散。'
                    ],
                    apps: [],
                    storage: [
                        '另添加阻燃助劑的塑料製件，可能會明顯降低鐳雕效果。若需實現阻燃效果，建議增加鐳雕助劑的使用量。',
                        '如鐳雕效果未能達到預期，建議調整激光設備參數。波長與能量相對反比，調整功率與速度，可相對改善表面效果。',
                        '儲放需要注意陰涼乾燥、通風良好、避免高溫和陽光直射同時，應採取必要的安全措施。'
                    ],
                    hasDiagram: false,
                    tableType: 'laser_table',
                    rows: [
                        { model: '淡灰色粉末', effect: '白雕黑', amt: '2‰-5‰', scope: 'PVC, PS, PE, PP, ABS, PA6, PA66, PC, PC/ABS, PBT, POM, SEBS, SBS, TPU' },
                        { model: '黑色粉末', effect: '黑雕白', amt: '2‰-5‰', scope: 'PVC, PS, PE, PP, ABS, PA6, PA66, PC, PC/ABS, PBT, POM, SEBS, SBS, TPU' },
                        { model: '黑色粉末', effect: '黑雕金', amt: '2‰-5‰', scope: 'PVC, PS, PE, PP, ABS, PA6, PA66, PC, PC/ABS, PBT, POM, SEBS, SBS, TPU' },
                        { model: '青灰色粉末', effect: '白雕黑 (透明級)', amt: '2‰-5‰', scope: 'PC/PMMA透明料' }
                    ]
                },
                'pigment-red': {
                    title: '紅色顏料',
                    enTitle: 'RED PIGMENTS',
                    characteristics: 'Full Shade: PVC/Pigment=100/0.2    Tint Shade: PVC/Pigment/TiO2=100/0.2/1',
                    overview: [
                        '以上數據僅供參考，應用條件不同，性能會有差異'
                    ],
                    apps: [],
                    storage: [],
                    hasDiagram: false,
                    tableType: 'pigment_table',
                    rows: [
                        { model: '2501', ci: 'Pigment Red 53:1', cas: '5160-02-1', migration: '4', light: '4', heat: '220', acid: '4~5', alkali: '4', halogen: '●', pp: '●', pe: '●', pvc: '●', tpu: '●', ps: '●', abs: '●' },
                        { model: '2548', ci: 'Pigment Red 48:1', cas: '7585-41-3', migration: '4', light: '4~5', heat: '200', acid: '4~5', alkali: '4', halogen: '●', pp: '●', pe: '●', pvc: '●', tpu: '●', ps: '●', abs: '●' },
                        { model: '2503', ci: 'Pigment Red 48:3', cas: '15782-05-5', migration: '4~5', light: '5', heat: '210', acid: '5', alkali: '5', halogen: '●', pp: '●', pe: '●', pvc: '●', tpu: '●', ps: '●', abs: '●' },
                        { model: '2508', ci: 'Pigment Red 254', cas: '84632-65-5', migration: '5', light: '7~8', heat: '280', acid: '5', alkali: '5', halogen: '●', pp: '●', pe: '●', pvc: '●', tpu: '●', ps: '●', abs: '●' },
                        { model: '2502', ci: 'Pigment Red 48:2', cas: '7023-61-2', migration: '4~5', light: '6', heat: '210', acid: '4~5', alkali: '4~5', halogen: '●', pp: '●', pe: '●', pvc: '●', tpu: '●', ps: '●', abs: '●' },
                        { model: '2504', ci: 'Pigment Red 57:1', cas: '5281-04-9', migration: '4~5', light: '6', heat: '210', acid: '4~5', alkali: '4~5', halogen: '●', pp: '●', pe: '●', pvc: '●', tpu: '●', ps: '●', abs: '●' },
                        { model: '2510', ci: 'Pigment Red 176', cas: '12225-06-8', migration: '5', light: '7~8', heat: '260', acid: '4~5', alkali: '4~5', halogen: '●', pp: '●', pe: '●', pvc: '●', tpu: '●', ps: '●', abs: '●' },
                        { model: '2511', ci: 'Pigment Red 185', cas: '51920-12-8', migration: '5', light: '7~8', heat: '250', acid: '4~5', alkali: '4~5', halogen: '●', pp: '●', pe: '●', pvc: '●', tpu: '●', ps: '●', abs: '●' }
                    ]
                },
                'pigment-phthalocyanine': {
                    title: '酞菁顏料/紫色顏料',
                    enTitle: 'PHTHALOCYANINE & VIOLET PIGMENTS',
                    characteristics: 'Full Shade: PVC/Pigment=100/0.2    Tint Shade: PVC/Pigment/TiO2=100/0.2/1',
                    overview: [
                        '以上數據僅供參考，應用條件不同，性能會有差異'
                    ],
                    apps: [],
                    storage: [],
                    hasDiagram: false,
                    tableType: 'pigment_table',
                    rows: [
                        { model: '6702', ci: 'Pigment Blue 15', cas: '147-14-8', migration: '5', light: '7~8', heat: '280', acid: '4~5', halogen: '●', pp: '●', pe: '●', pvc: '●', tpu: '●', ps: '●', abs: '●' },
                        { model: '6706', ci: 'Pigment Blue 15:3', cas: '147-14-8', migration: '4', light: '7~8', heat: '280', acid: '4~5', halogen: '●', pp: '●', pe: '●', pvc: '●', tpu: '●', ps: '●', abs: '●' },
                        { model: '6708', ci: 'Pigment Blue 15:3', cas: '147-14-8', migration: '5', light: '7~8', heat: '300', acid: '4~5', halogen: '●', pp: '●', pe: '●', pvc: '●', tpu: '●', ps: '●', abs: '●' },
                        { model: '5501', ci: 'Pigment Green 7', cas: '1328-53-6', migration: '5', light: '7~8', heat: '260', acid: '4~5', halogen: '●', pp: '●', pe: '●', pvc: '●', tpu: '●', ps: '●', abs: '●' },
                        { model: '5502', ci: 'Pigment Green 7', cas: '1328-53-6', migration: '5', light: '7~8', heat: '240', acid: '4~5', halogen: '●', pp: '●', pe: '●', pvc: '●', tpu: '●', ps: '●', abs: '●' },
                        { model: '7508', ci: 'Pigment Violet 23', cas: '6358-30-1', migration: '3', light: '6~7', heat: '260', acid: '4~5', halogen: '●', pp: '●', pe: '●', pvc: '●', tpu: '●', ps: '●', abs: '●' }
                    ]
                },
                'fluorescent-pigment-p24': {
                    title: '螢光顏料 (高牢度)',
                    enTitle: 'HIGH-FASTNESS FLUORESCENT PIGMENTS',
                    characteristics: 'Full Shade: PVC/Pigment=100/0.2    Tint Shade: PVC/Pigment/TiO2=100/0.2/1',
                    overview: [
                        '以上數據僅供參考，應用條件不同，性能會有差異'
                    ],
                    apps: [],
                    storage: [],
                    hasDiagram: false,
                    tableType: 'pigment_table',
                    rows: [
                        { model: '5120', ci: 'Fluorescent Yellow', cas: '-', migration: '4~5', light: '4', heat: '220', acid: '4~5', halogen: '●', pp: '●', pe: '●', pvc: '●', tpu: '●', ps: '●', abs: '●' },
                        { model: '5121', ci: 'Fluorescent Green', cas: '-', migration: '4~5', light: '4', heat: '220', acid: '4~5', halogen: '●', pp: '●', pe: '●', pvc: '●', tpu: '●', ps: '●', abs: '●' },
                        { model: '5123', ci: 'Fluorescent Orange', cas: '-', migration: '4~5', light: '4', heat: '220', acid: '4~5', halogen: '●', pp: '●', pe: '●', pvc: '●', tpu: '●', ps: '●', abs: '●' },
                        { model: '5125', ci: 'Fluorescent Pink', cas: '-', migration: '4~5', light: '4', heat: '220', acid: '4~5', halogen: '●', pp: '●', pe: '●', pvc: '●', tpu: '●', ps: '●', abs: '●' },
                        { model: '5126', ci: 'Fluorescent Red', cas: '-', migration: '4~5', light: '4', heat: '220', acid: '4~5', halogen: '●', pp: '●', pe: '●', pvc: '●', tpu: '●', ps: '●', abs: '●' },
                        { model: '5127', ci: 'Fluorescent Rose', cas: '-', migration: '4~5', light: '4', heat: '220', acid: '4~5', halogen: '●', pp: '●', pe: '●', pvc: '●', tpu: '●', ps: '●', abs: '●' },
                        { model: '5140', ci: 'Fluorescent Violet', cas: '-', migration: '4~5', light: '4', heat: '220', acid: '4~5', halogen: '●', pp: '●', pe: '●', pvc: '●', tpu: '●', ps: '●', abs: '●' },
                        { model: '5129', ci: 'Fluorescent Blue', cas: '-', migration: '4~5', light: '4', heat: '220', acid: '4~5', halogen: '●', pp: '●', pe: '●', pvc: '●', tpu: '●', ps: '●', abs: '●' }
                    ]
                },
                'pigment-iron-oxide': {
                    title: '氧化鐵顏料',
                    enTitle: 'IRON OXIDE PIGMENTS',
                    characteristics: 'Full Shade: PVC/Pigment=100/0.2    Tint Shade: PVC/Pigment/TiO2=100/0.2/1',
                    overview: [
                        '以上數據僅供參考，應用條件不同，性能會有差異'
                    ],
                    apps: [],
                    storage: [],
                    hasDiagram: false,
                    tableType: 'pigment_table',
                    rows: [
                        { model: '8110', ci: 'Pigment Red 101', cas: '1309-37-1', migration: '5', light: '6~7', heat: '220', acid: '4~5', halogen: '●', pp: '●', pe: '●', pvc: '●', tpu: '●', ps: '●', abs: '●' },
                        { model: '8120', ci: 'Pigment Red 101', cas: '1309-37-1', migration: '5', light: '6~7', heat: '220', acid: '4~5', halogen: '●', pp: '●', pe: '●', pvc: '●', tpu: '●', ps: '●', abs: '●' },
                        { model: '8130', ci: 'Pigment Red 101', cas: '1309-37-1', migration: '5', light: '6~7', heat: '220', acid: '4~5', halogen: '●', pp: '●', pe: '●', pvc: '●', tpu: '●', ps: '●', abs: '●' },
                        { model: '8150', ci: 'Pigment Red 101', cas: '1309-37-1', migration: '5', light: '6~7', heat: '220', acid: '4~5', halogen: '●', pp: '●', pe: '●', pvc: '●', tpu: '●', ps: '●', abs: '●' },
                        { model: '8180', ci: 'Pigment Red 101', cas: '1309-37-1', migration: '5', light: '6~7', heat: '220', acid: '4~5', halogen: '●', pp: '●', pe: '●', pvc: '●', tpu: '●', ps: '●', abs: '●' },
                        { model: '8190', ci: 'Pigment Red 101', cas: '1309-37-1', migration: '5', light: '6~7', heat: '220', acid: '4~5', halogen: '●', pp: '●', pe: '●', pvc: '●', tpu: '●', ps: '●', abs: '●' },
                        { model: '4500', ci: 'Pigment Yellow 42', cas: '51274-00-1', migration: '5', light: '6~7', heat: '200', acid: '4~5', halogen: '●', pp: '●', pe: '●', pvc: '●', tpu: '●', ps: '●', abs: '●' },
                        { model: 'F602', ci: 'Pigment Black 11', cas: '1317-61-9', migration: '5', light: '6~7', heat: '220', acid: '4~5', halogen: '●', pp: '●', pe: '●', pvc: '●', tpu: '●', ps: '●', abs: '●' }
                    ]
                },
                'pigment-ultramarine': {
                    title: '群青/鈦白粉/炭黑',
                    enTitle: 'ULTRAMARINE & TITANIUM & CARBON BLACK',
                    characteristics: 'Full Shade: PVC/Pigment=100/0.2    Tint Shade: PVC/Pigment/TiO2=100/0.2/1',
                    overview: [
                        '以上數據僅供參考，應用條件不同，性能會有差異'
                    ],
                    apps: [],
                    storage: [],
                    hasDiagram: false,
                    tableType: 'pigment_table',
                    rows: [
                        { model: '6804', ci: 'Pigment Blue 29', cas: '57455-37-5', migration: '5', light: '7~8', heat: '300', acid: '1', halogen: '●', pp: '●', pe: '●', pvc: '●', tpu: '●', ps: '●', abs: '●' },
                        { model: '6806', ci: 'Pigment Blue 29', cas: '57455-37-5', migration: '5', light: '7~8', heat: '300', acid: '2~3', halogen: '●', pp: '●', pe: '●', pvc: '●', tpu: '●', ps: '●', abs: '●' },
                        { model: '6807', ci: 'Pigment Violet 15', cas: '12769-96-9', migration: '5', light: '7~8', heat: '300', acid: '1', halogen: '●', pp: '●', pe: '●', pvc: '●', tpu: '●', ps: '●', abs: '●' },
                        { model: 'R424', ci: 'Pigment White 6', cas: '13463-67-7', migration: '5', light: '8', heat: '500', acid: '4~5', halogen: '●', pp: '●', pe: '●', pvc: '●', tpu: '●', ps: '●', abs: '●' },
                        { model: '989', ci: 'Pigment Black 7', cas: '1333-86-4', migration: '5', light: '8', heat: '300', acid: '4~5', halogen: '●', pp: '●', pe: '●', pvc: '●', tpu: '●', ps: '●', abs: '●' }
                    ]
                },
                'pigment-high-temp': {
                    title: '耐高溫無機顏料',
                    enTitle: 'HIGH TEMPERATURE INORGANIC PIGMENTS',
                    characteristics: 'Full Shade: PVC/Pigment=100/0.2    Tint Shade: PVC/Pigment/TiO2=100/0.2/1',
                    overview: [
                        '以上數據僅供參考，應用條件不同，性能會有差異'
                    ],
                    apps: [],
                    storage: [],
                    hasDiagram: false,
                    tableType: 'pigment_table',
                    rows: [
                        { model: '195', ci: 'Pigment Yellow 53', cas: '8007-18-9', migration: '5', light: '8', heat: '1000', acid: '4~5', halogen: '●', pp: '●', pe: '●', pvc: '●', tpu: '●', ps: '●', abs: '●' },
                        { model: '10P225', ci: 'Pigment Brown 24', cas: '68186-90-3', migration: '5', light: '8', heat: '1000', acid: '4~5', halogen: '●', pp: '●', pe: '●', pvc: '●', tpu: '●', ps: '●', abs: '●' },
                        { model: '157A', ci: 'Pigment Brown 33', cas: '68186-88-9', migration: '5', light: '8', heat: '1000', acid: '4~5', halogen: '●', pp: '●', pe: '●', pvc: '●', tpu: '●', ps: '●', abs: '●' },
                        { model: 'BK-1', ci: 'Pigment Black 28', cas: '68186-91-4', migration: '5', light: '8', heat: '750', acid: '4~5', halogen: '●', pp: '●', pe: '●', pvc: '●', tpu: '●', ps: '●', abs: '●' },
                        { model: '385A', ci: 'Pigment Blue 28', cas: '1345-16-0', migration: '5', light: '8', heat: '1200', acid: '4~5', halogen: '●', pp: '●', pe: '●', pvc: '●', tpu: '●', ps: '●', abs: '●' },
                        { model: '11T', ci: 'Pigment Violet 16', cas: '10101-66-3', migration: '5', light: '8', heat: '280', acid: '4~5', halogen: '●', pp: '●', pe: '●', pvc: '●', tpu: '●', ps: '●', abs: '●' },
                        { model: '223A', ci: 'Pigment Green 50', cas: '68186-85-6', migration: '5', light: '8', heat: '1000', acid: '4~5', halogen: '●', pp: '●', pe: '●', pvc: '●', tpu: '●', ps: '●', abs: '●' }
                    ]
                },
                'pigment-orange-red': {
                    title: '紅色顏料/橙色顏料',
                    enTitle: 'RED & ORANGE PIGMENTS (ENGINEERING)',
                    characteristics: 'Full Shade: PVC/Pigment=100/0.2    Tint Shade: PVC/Pigment/TiO2=100/0.2/1',
                    overview: [
                        '以上數據僅供參考，應用條件不同，性能會有差異'
                    ],
                    apps: [],
                    storage: [],
                    hasDiagram: false,
                    tableType: 'pigment_table',
                    rows: [
                        { model: '2572', ci: 'Pigment Red 272', cas: '350249-32-0', migration: '5', light: '7~8', heat: '280', acid: '4~5', halogen: '●', pp: '●', pe: '●', pvc: '●', tpu: '●', ps: '●', abs: '●' },
                        { model: '2566', ci: 'Pigment Red 166', cas: '3905-19-9', migration: '4', light: '7~8', heat: '280', acid: '4~5', halogen: '●', pp: '●', pe: '●', pvc: '●', tpu: '●', ps: '●', abs: '●' },
                        { model: '2549', ci: 'Pigment Red 149', cas: '4948-15-6', migration: '5', light: '7~8', heat: '300', acid: '4~5', halogen: '●', pp: '●', pe: '●', pvc: '●', tpu: '●', ps: '●', abs: '●' },
                        { model: '4584', ci: 'Pigment Orange 64', cas: '72102-84-2', migration: '5', light: '7~8', heat: '280', acid: '4~5', halogen: '●', pp: '●', pe: '●', pvc: '●', tpu: '●', ps: '●', abs: '●' },
                        { model: '2507', ci: 'Pigment Red 122', cas: '16043-40-6', migration: '5', light: '7~8', heat: '260', acid: '4~5', halogen: '●', pp: '●', pe: '●', pvc: '●', tpu: '●', ps: '●', abs: '●' },
                        { model: '2512', ci: 'Pigment Red 208', cas: '31778-10-6', migration: '5', light: '7~8', heat: '240', acid: '4~5', halogen: '●', pp: '●', pe: '●', pvc: '●', tpu: '●', ps: '●', abs: '●' },
                        { model: '2505', ci: 'Pigment Violet 19', cas: '1047-16-1', migration: '5', light: '7~8', heat: '280', acid: '4~5', halogen: '●', pp: '●', pe: '●', pvc: '●', tpu: '●', ps: '●', abs: '●' }
                    ]
                },
                'pigment-yellow': {
                    title: '黃色顏料',
                    enTitle: 'YELLOW PIGMENTS',
                    characteristics: 'Full Shade: PVC/Pigment=100/0.2    Tint Shade: PVC/Pigment/TiO2=100/0.2/1',
                    overview: [
                        '以上數據僅供參考，應用條件不同，性能會有差異'
                    ],
                    apps: [],
                    storage: [],
                    hasDiagram: false,
                    tableType: 'pigment_table',
                    rows: [
                        { model: '4562', ci: 'Pigment Yellow 81', cas: '22094-93-5', migration: '4~5', light: '7~8', heat: '220', acid: '4~5', halogen: '●', pp: '●', pe: '●', pvc: '●', tpu: '●', ps: '●', abs: '●' },
                        { model: '4551', ci: 'Pigment Yellow 151', cas: '31837-42-0', migration: '5', light: '7~8', heat: '260', acid: '4~5', halogen: '●', pp: '●', pe: '●', pvc: '●', tpu: '●', ps: '●', abs: '●' },
                        { model: '4568', ci: 'Pigment Yellow 180', cas: '77804-81-0', migration: '5', light: '7~8', heat: '280', acid: '4~5', halogen: '●', pp: '●', pe: '●', pvc: '●', tpu: '●', ps: '●', abs: '●' },
                        { model: '4662', ci: 'Pigment Yellow 62', cas: '12286-66-7', migration: '4~5', light: '7~8', heat: '240', acid: '4~5', halogen: '●', pp: '●', pe: '●', pvc: '●', tpu: '●', ps: '●', abs: '●' },
                        { model: '4563', ci: 'Pigment Yellow 191', cas: '129423-54-7', migration: '4~5', light: '7~8', heat: '280', acid: '4~5', halogen: '●', pp: '●', pe: '●', pvc: '●', tpu: '●', ps: '●', abs: '●' },
                        { model: '4566', ci: 'Pigment Yellow 83', cas: '5567-15-7', migration: '4~5', light: '7~8', heat: '220', acid: '4~5', halogen: '●', pp: '●', pe: '●', pvc: '●', tpu: '●', ps: '●', abs: '●' },
                        { model: '4539', ci: 'Pigment Yellow 139', cas: '36888-99-0', migration: '5', light: '7~8', heat: '240', acid: '4~5', halogen: '●', pp: '●', pe: '●', pvc: '●', tpu: '●', ps: '●', abs: '●' },
                        { model: '4581', ci: 'Pigment Yellow 181', cas: '74441-05-7', migration: '5', light: '7~8', heat: '300', acid: '4~5', halogen: '●', pp: '●', pe: '●', pvc: '●', tpu: '●', ps: '●', abs: '●' }
                    ]
                }
            };

        for (const [slug, override] of Object.entries(CMS.products || {})) {
            const product = productDb[slug];
            if (!product) continue;
            if (override.name) product.title = override.name;
            if (override.englishName) product.enTitle = override.englishName;
            if (override.shortDescription) product.characteristics = override.shortDescription;
            if (override.detail) product.overview = [override.detail, ...(product.overview || []).slice(1)];
            if (override.image) product.cmsImage = override.image;
        }

        const SpecsTableRenderer = ({ tableType, rows }) => {
            if (!rows || rows.length === 0) return <div>暫無數據</div>;

            const renderHeader = () => {
                switch(tableType) {
                    case 'microspheres':
                        return (
                            <tr>
                                <th style={{background:'var(--bg)', padding:'14px 18px', fontWeight:600}}>規格型號</th>
                                <th style={{background:'var(--bg)', padding:'14px 18px', fontWeight:600}}>外觀 (目測)</th>
                                <th style={{background:'var(--bg)', padding:'14px 18px', fontWeight:600}}>未膨脹前粒徑 (µm)</th>
                                <th style={{background:'var(--bg)', padding:'14px 18px', fontWeight:600}}>膨脹起始溫度</th>
                                <th style={{background:'var(--bg)', padding:'14px 18px', fontWeight:600}}>膨脹峯值溫度</th>
                                <th style={{background:'var(--bg)', padding:'14px 18px', fontWeight:600}}>包裝</th>
                            </tr>
                        );
                    case 'expansion_masterbatch':
                        return (
                            <tr>
                                <th style={{background:'var(--bg)', padding:'14px 18px', fontWeight:600}}>規格型號</th>
                                <th style={{background:'var(--bg)', padding:'14px 18px', fontWeight:600}}>載體樹脂</th>
                                <th style={{background:'var(--bg)', padding:'14px 18px', fontWeight:600}}>適用領域</th>
                            </tr>
                        );
                    case 'anti_scratch':
                        return (
                            <tr>
                                <th style={{background:'var(--bg)', padding:'14px 18px', fontWeight:600}}>規格型號</th>
                                <th style={{background:'var(--bg)', padding:'14px 18px', fontWeight:600}}>外觀 (目測)</th>
                                <th style={{background:'var(--bg)', padding:'14px 18px', fontWeight:600}}>載體樹脂</th>
                                <th style={{background:'var(--bg)', padding:'14px 18px', fontWeight:600}}>有效含量 (%)</th>
                                <th style={{background:'var(--bg)', padding:'14px 18px', fontWeight:600}}>適用範圍</th>
                            </tr>
                        );
                    case 'chemical_foaming':
                    case 'foaming_masterbatch':
                        return (
                            <tr>
                                <th style={{background:'var(--bg)', padding:'14px 18px', fontWeight:600}}>規格型號</th>
                                <th style={{background:'var(--bg)', padding:'14px 18px', fontWeight:600}}>{tableType === 'chemical_foaming' ? '理論發氣量 (ml/g)' : '載體樹脂'}</th>
                                <th style={{background:'var(--bg)', padding:'14px 18px', fontWeight:600}}>發泡劑主體</th>
                                <th style={{background:'var(--bg)', padding:'14px 18px', fontWeight:600}}>適用領域</th>
                            </tr>
                        );
                    case 'color_masterbatch':
                        return (
                            <tr>
                                <th style={{background:'var(--bg)', padding:'14px 18px', fontWeight:600}}>規格型號</th>
                                <th style={{background:'var(--bg)', padding:'14px 18px', fontWeight:600}}>載體樹脂</th>
                                <th style={{background:'var(--bg)', padding:'14px 18px', fontWeight:600}}>顏色</th>
                                <th style={{background:'var(--bg)', padding:'14px 18px', fontWeight:600}}>顏料應用</th>
                                <th style={{background:'var(--bg)', padding:'14px 18px', fontWeight:600}}>適用領域</th>
                            </tr>
                        );
                    case 'brightener':
                    case 'antioxidant':
                    case 'uv':
                        return (
                            <tr>
                                <th style={{background:'var(--bg)', padding:'14px 18px', fontWeight:600}}>規格型號</th>
                                <th style={{background:'var(--bg)', padding:'14px 18px', fontWeight:600}}>化學名</th>
                                <th style={{background:'var(--bg)', padding:'14px 18px', fontWeight:600}}>英文化學名</th>
                                <th style={{background:'var(--bg)', padding:'14px 18px', fontWeight:600}}>適用領域</th>
                            </tr>
                        );
                    case 'simple_param':
                        return (
                            <tr>
                                <th style={{background:'var(--bg)', padding:'14px 18px', fontWeight:600}}>參數指標</th>
                                <th style={{background:'var(--bg)', padding:'14px 18px', fontWeight:600}}>數值規格</th>
                            </tr>
                        );
                    case 'tpu_static_param':
                        return (
                            <tr>
                                <th style={{background:'var(--bg)', padding:'14px 18px', fontWeight:600}}>性能參數</th>
                                <th style={{background:'var(--bg)', padding:'14px 18px', fontWeight:600}}>測試方法</th>
                                <th style={{background:'var(--bg)', padding:'14px 18px', fontWeight:600}}>單位</th>
                                <th style={{background:'var(--bg)', padding:'14px 18px', fontWeight:600}}>數值規格</th>
                            </tr>
                        );
                    case 'fluorescent_list':
                        return (
                            <tr>
                                <th style={{background:'var(--bg)', padding:'14px 18px', fontWeight:600}}>規格型號</th>
                                <th style={{background:'var(--bg)', padding:'14px 18px', fontWeight:600}}>品名顏色</th>
                                <th style={{background:'var(--bg)', padding:'14px 18px', fontWeight:600}}>呈色參考</th>
                            </tr>
                        );
                    case 'laser_table':
                        return (
                            <tr>
                                <th style={{background:'var(--bg)', padding:'14px 18px', fontWeight:600}}>外觀規格</th>
                                <th style={{background:'var(--bg)', padding:'14px 18px', fontWeight:600}}>打標效果</th>
                                <th style={{background:'var(--bg)', padding:'14px 18px', fontWeight:600}}>建議用量</th>
                                <th style={{background:'var(--bg)', padding:'14px 18px', fontWeight:600}}>適用材料</th>
                            </tr>
                        );
                    case 'pigment_table':
                        return (
                            <tr>
                                <th style={{background:'var(--bg)', padding:'10px 8px', fontSize:'11px', fontWeight:600}}>型號</th>
                                <th style={{background:'var(--bg)', padding:'10px 8px', fontSize:'11px', fontWeight:600}}>顏料索引</th>
                                <th style={{background:'var(--bg)', padding:'10px 8px', fontSize:'11px', fontWeight:600}}>CAS 號</th>
                                <th style={{background:'var(--bg)', padding:'10px 8px', fontSize:'11px', fontWeight:600}}>遷移</th>
                                <th style={{background:'var(--bg)', padding:'10px 8px', fontSize:'11px', fontWeight:600}}>耐光</th>
                                <th style={{background:'var(--bg)', padding:'10px 8px', fontSize:'11px', fontWeight:600}}>耐熱</th>
                                <th style={{background:'var(--bg)', padding:'10px 8px', fontSize:'11px', fontWeight:600}}>耐酸</th>
                                <th style={{background:'var(--bg)', padding:'10px 8px', fontSize:'11px', fontWeight:600}}>無鹵</th>
                                <th style={{background:'var(--bg)', padding:'10px 6px', fontSize:'11px', fontWeight:600}}>PP</th>
                                <th style={{background:'var(--bg)', padding:'10px 6px', fontSize:'11px', fontWeight:600}}>PE</th>
                                <th style={{background:'var(--bg)', padding:'10px 6px', fontSize:'11px', fontWeight:600}}>PVC</th>
                                <th style={{background:'var(--bg)', padding:'10px 6px', fontSize:'11px', fontWeight:600}}>TPU</th>
                                <th style={{background:'var(--bg)', padding:'10px 6px', fontSize:'11px', fontWeight:600}}>PS</th>
                                <th style={{background:'var(--bg)', padding:'10px 6px', fontSize:'11px', fontWeight:600}}>ABS</th>
                            </tr>
                        );
                    default:
                        return null;
                }
            };

            const renderRow = (row, idx) => {
                const bg = idx % 2 === 0 ? 'var(--surface)' : 'var(--bg)';
                switch(tableType) {
                    case 'microspheres':
                        return (
                            <tr key={idx} style={{background: bg}}>
                                <td style={{padding:'14px 18px', fontWeight:600, color:'var(--accent)'}}>{row.model}</td>
                                <td style={{padding:'14px 18px'}}>{row.appearance}</td>
                                <td style={{padding:'14px 18px'}}>{row.size}</td>
                                <td style={{padding:'14px 18px'}}>{row.startTemp}</td>
                                <td style={{padding:'14px 18px'}}>{row.peakTemp}</td>
                                <td style={{padding:'14px 18px', whiteSpace:'pre-line'}}>{row.pack}</td>
                            </tr>
                        );
                    case 'expansion_masterbatch':
                        return (
                            <tr key={idx} style={{background: bg}}>
                                <td style={{padding:'14px 18px', fontWeight:600, color:'var(--accent)'}}>{row.model}</td>
                                <td style={{padding:'14px 18px'}}>{row.resin}</td>
                                <td style={{padding:'14px 18px'}}>{row.app}</td>
                            </tr>
                        );
                    case 'anti_scratch':
                        return (
                            <tr key={idx} style={{background: bg}}>
                                <td style={{padding:'14px 18px', fontWeight:600, color:'var(--accent)'}}>{row.model}</td>
                                <td style={{padding:'14px 18px'}}>{row.appearance}</td>
                                <td style={{padding:'14px 18px'}}>{row.resin}</td>
                                <td style={{padding:'14px 18px'}}>{row.content}</td>
                                <td style={{padding:'14px 18px'}}>{row.scope}</td>
                            </tr>
                        );
                    case 'chemical_foaming':
                    case 'foaming_masterbatch':
                        return (
                            <tr key={idx} style={{background: bg}}>
                                <td style={{padding:'14px 18px', fontWeight:600, color:'var(--accent)'}}>{row.model}</td>
                                <td style={{padding:'14px 18px'}}>{tableType === 'chemical_foaming' ? row.gas : row.resin}</td>
                                <td style={{padding:'14px 18px'}}>{row.main}</td>
                                <td style={{padding:'14px 18px', fontSize:'12px', lineHeight:1.4}}>{row.scope}</td>
                            </tr>
                        );
                    case 'color_masterbatch':
                        return (
                            <tr key={idx} style={{background: bg}}>
                                <td style={{padding:'14px 18px', fontWeight:600, color:'var(--accent)'}}>{row.model}</td>
                                <td style={{padding:'14px 18px'}}>{row.resin}</td>
                                <td style={{padding:'14px 18px'}}>{row.color}</td>
                                <td style={{padding:'14px 18px'}}>{row.pigment}</td>
                                <td style={{padding:'14px 18px', fontSize:'12px'}}>{row.scope}</td>
                            </tr>
                        );
                    case 'brightener':
                    case 'antioxidant':
                    case 'uv':
                        return (
                            <tr key={idx} style={{background: bg}}>
                                <td style={{padding:'14px 18px', fontWeight:600, color:'var(--accent)'}}>{row.model}</td>
                                <td style={{padding:'14px 18px', fontWeight:600}}>{row.name}</td>
                                <td style={{padding:'14px 18px', fontSize:'12px'}}>{row.enName}</td>
                                <td style={{padding:'14px 18px'}}>{row.scope}</td>
                            </tr>
                        );
                    case 'simple_param':
                        return (
                            <tr key={idx} style={{background: bg}}>
                                <td style={{padding:'14px 18px', fontWeight:600}}>{row.param}</td>
                                <td style={{padding:'14px 18px', color:'var(--accent)', fontWeight:600}}>{row.val}</td>
                            </tr>
                        );
                    case 'tpu_static_param':
                        return (
                            <tr key={idx} style={{background: bg}}>
                                <td style={{padding:'14px 18px', fontWeight:600}}>{row.param}</td>
                                <td style={{padding:'14px 18px'}}>{row.method}</td>
                                <td style={{padding:'14px 18px'}}>{row.unit}</td>
                                <td style={{padding:'14px 18px', color:'var(--accent)', fontWeight:600}}>{row.val}</td>
                            </tr>
                        );
                    case 'fluorescent_list':
                        return (
                            <tr key={idx} style={{background: bg}}>
                                <td style={{padding:'14px 18px', fontWeight:600, color:'var(--accent)'}}>{row.model}</td>
                                <td style={{padding:'14px 18px', fontWeight:600}}>{row.name}</td>
                                <td style={{padding:'14px 18px'}}>
                                    <div style={{
                                        width:'80px',
                                        height:'24px',
                                        borderRadius:'4px',
                                        background: row.colorHex || 'transparent',
                                        border:'1px solid var(--border)',
                                        boxShadow: '0 2px 6px rgba(0,0,0,0.05)'
                                    }}></div>
                                </td>
                            </tr>
                        );
                    case 'laser_table':
                        return (
                            <tr key={idx} style={{background: bg}}>
                                <td style={{padding:'14px 18px', fontWeight:600, color:'var(--accent)'}}>{row.model}</td>
                                <td style={{padding:'14px 18px', fontWeight:600}}>{row.effect}</td>
                                <td style={{padding:'14px 18px'}}>{row.amt}</td>
                                <td style={{padding:'14px 18px', fontSize:'12px'}}>{row.scope}</td>
                            </tr>
                        );
                    case 'pigment_table':
                        let dotColor = '#FF0000'; // default red
                        if (row.ci.includes('Fluorescent Yellow')) dotColor = '#E2F033';
                        else if (row.ci.includes('Fluorescent Green')) dotColor = '#39FF14';
                        else if (row.ci.includes('Fluorescent Orange')) dotColor = '#FF5F00';
                        else if (row.ci.includes('Fluorescent Pink')) dotColor = '#FF1493';
                        else if (row.ci.includes('Fluorescent Red')) dotColor = '#FF0000';
                        else if (row.ci.includes('Fluorescent Rose')) dotColor = '#FF007F';
                        else if (row.ci.includes('Fluorescent Violet')) dotColor = '#7A00E6';
                        else if (row.ci.includes('Fluorescent Blue')) dotColor = '#1F75FE';
                        else if (row.ci.includes('Yellow')) dotColor = '#FFCC00';
                        else if (row.ci.includes('Green')) dotColor = '#39FF14';
                        else if (row.ci.includes('Blue')) dotColor = '#1F75FE';
                        else if (row.ci.includes('Violet')) dotColor = '#7A00E6';
                        else if (row.ci.includes('Brown')) dotColor = '#964B00';
                        else if (row.ci.includes('Black')) dotColor = '#1A1A1A';
                        else if (row.ci.includes('White')) dotColor = '#FFFFFF';
                        else if (row.ci.includes('Orange')) dotColor = '#FF5F00';

                        return (
                            <tr key={idx} style={{background: bg}}>
                                <td style={{padding:'10px 8px', fontSize:'12px', fontWeight:600, color:'var(--accent)'}}>
                                    <div style={{display:'flex', alignItems:'center', gap:'8px'}}>
                                        <div style={{
                                            width:'12px',
                                            height:'12px',
                                            borderRadius:'50%',
                                            background: dotColor,
                                            border:'1px solid var(--border)',
                                            flexShrink: 0
                                        }}></div>
                                        {row.model}
                                    </div>
                                </td>
                                <td style={{padding:'10px 8px', fontSize:'11px'}}>{row.ci}</td>
                                <td style={{padding:'10px 8px', fontSize:'11px'}}>{row.cas}</td>
                                <td style={{padding:'10px 8px', fontSize:'12px'}}>{row.migration}</td>
                                <td style={{padding:'10px 8px', fontSize:'12px'}}>{row.light}</td>
                                <td style={{padding:'10px 8px', fontSize:'12px'}}>{row.heat}</td>
                                <td style={{padding:'10px 8px', fontSize:'12px'}}>{row.acid}</td>
                                <td style={{padding:'10px 8px', fontSize:'12px', color: 'var(--accent)'}}>{row.halogen}</td>
                                <td style={{padding:'10px 6px', fontSize:'12px'}}>{row.pp}</td>
                                <td style={{padding:'10px 6px', fontSize:'12px'}}>{row.pe}</td>
                                <td style={{padding:'10px 6px', fontSize:'12px'}}>{row.pvc}</td>
                                <td style={{padding:'10px 6px', fontSize:'12px'}}>{row.tpu}</td>
                                <td style={{padding:'10px 6px', fontSize:'12px'}}>{row.ps}</td>
                                <td style={{padding:'10px 6px', fontSize:'12px'}}>{row.abs}</td>
                            </tr>
                        );
                    default:
                        return null;
                }
            };

            return (
                <div className="fade-in">
                    <h4 style={{fontSize:'18px', color:'var(--fg)', marginBottom:'20px', borderLeft:'4px solid var(--accent)', paddingLeft:'12px'}}>物理技術參數規格表</h4>
                    <div className="table-container" style={{borderRadius:'var(--radius-md)', overflow:'hidden', border:'1px solid var(--border)'}}>
                        <table>
                            <thead>
                                {renderHeader()}
                            </thead>
                            <tbody className="mono" style={{fontSize:'13px'}}>
                                {rows.map((row, idx) => renderRow(row, idx))}
                            </tbody>
                        </table>
                    </div>
                    {tableType.includes('pigment') && (
                        <div style={{marginTop:'16px', fontSize:'11px', color:'var(--muted)', display:'flex', gap:'20px', justifyContent:'center'}}>
                            <span>●：推薦使用</span>
                            <span>○：選擇性使用</span>
                            <span>X：不推薦使用</span>
                        </div>
                    )}
                    <div style={{marginTop:'24px', fontSize:'12px', color:'var(--muted)', textAlign:'center', lineHeight:1.5}}>
                        （注：本數據表所列數值，僅敘述本產品典型的性質，不代表本公司技術標準，僅供參考）
                    </div>
                </div>
            );
        };

        const ProductDetailPage = ({ onNavigate, productId }) => {
            const currentId = productId || 'microspheres';
            const [activeTab, setActiveTab] = useState('overview');
            const rDetail = useReveal();
            const product = productDb[currentId] || productDb['microspheres'];
            const detailTabs = [
                { id: 'overview', name: '產品概述', visible: product.overview && product.overview.length > 0 },
                { id: 'apps', name: '應用領域', visible: product.apps && product.apps.length > 0 },
                { id: 'storage', name: product.title === '熱膨脹微膠囊' ? '注意事項' : '儲藏/搬運', visible: product.storage && product.storage.length > 0 },
                { id: 'specs', name: '技術數據', visible: true }
            ].filter(tab => tab.visible);

            useEffect(() => {
                setActiveTab(detailTabs[0]?.id || 'specs');
            }, [currentId]);

            useEffect(() => {
                if (!detailTabs.some(tab => tab.id === activeTab)) {
                    setActiveTab(detailTabs[0]?.id || 'specs');
                }
            }, [activeTab, currentId]);

            return (
                <div className="container">
                    <div className="detail-topbar">
                        <div className="badge" style={{marginBottom:0}}>PRODUCT DETAIL / 產品詳情</div>
                        <button className="button" style={{background:'transparent', border:'1px solid var(--border)', color:'var(--fg)', padding:'8px 20px', fontSize:'14px'}} onClick={() => onNavigate('products')}>
                            ← 返回產品目錄
                        </button>
                    </div>

                    <div className="swd-grid reveal" ref={rDetail}>
                        {/* 左側欄: 大型幾何圖或膨脹模式圖 */}
                        <div className="col-5">
                            <div className="card product-detail-visual" style={{padding:'40px', background:'var(--bg)', border:'1px solid var(--border)', display:'flex', flexDirection:'column', alignItems:'center', justifyContent:'center', borderRadius:'var(--radius-lg)', textAlign:'center'}}>
                                {product.cmsImage ? (
                                    <div style={{width:'100%', aspectRatio:'3/2', background:'var(--surface)', display:'flex', alignItems:'center', justifyContent:'center', borderRadius:'var(--radius-md)', overflow:'hidden', position:'relative', border:'1px solid var(--border)', marginBottom:'32px'}}>
                                        <img src={product.cmsImage} alt={product.title} style={{width:'100%', height:'100%', objectFit:'contain'}} />
                                    </div>
                                ) : product.hasDiagram ? (
                                    <div style={{width:'100%', aspectRatio:'3/2', background:'var(--surface)', display:'flex', alignItems:'center', justifyContent:'center', borderRadius:'var(--radius-md)', overflow:'hidden', position:'relative', border:'1px solid var(--border)', marginBottom:'32px', boxShadow:'0 10px 30px rgba(0,0,0,0.02)'}}>
                                        <svg viewBox="0 0 300 200" style={{width:'100%', height:'100%'}} xmlns="http://www.w3.org/2000/svg">
                                            <defs>
                                                <radialGradient id="diagram-glow" cx="50%" cy="50%" r="50%">
                                                    <stop offset="0%" stopColor="var(--accent)" stopOpacity="0.15" />
                                                    <stop offset="100%" stopColor="var(--accent)" stopOpacity="0" />
                                                </radialGradient>
                                                <marker id="arrow" viewBox="0 0 10 10" refX="5" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse">
                                                    <path d="M 0 2 L 10 5 L 0 8 z" fill="var(--accent)" />
                                                </marker>
                                            </defs>
                                            <g stroke="var(--border)" strokeWidth="0.5" opacity="0.3">
                                                <line x1="0" y1="30" x2="300" y2="30" />
                                                <line x1="0" y1="60" x2="300" y2="60" />
                                                <line x1="0" y1="90" x2="300" y2="90" />
                                                <line x1="0" y1="120" x2="300" y2="120" />
                                                <line x1="0" y1="150" x2="300" y2="150" />
                                                <line x1="0" y1="180" x2="300" y2="180" />
                                                <line x1="50" y1="0" x2="50" y2="200" />
                                                <line x1="100" y1="0" x2="100" y2="200" />
                                                <line x1="150" y1="0" x2="150" y2="200" />
                                                <line x1="200" y1="0" x2="200" y2="200" />
                                                <line x1="250" y1="0" x2="250" y2="200" />
                                            </g>
                                            <rect width="300" height="200" fill="url(#diagram-glow)" />
                                            <circle cx="70" cy="100" r="14" fill="none" stroke="var(--accent)" strokeWidth="1.5" />
                                            <circle cx="70" cy="100" r="2" fill="var(--accent)" />
                                            <circle cx="210" cy="100" r="32" fill="none" stroke="var(--accent)" strokeWidth="1.5" strokeDasharray="3 3" />
                                            <circle cx="210" cy="100" r="12" fill="none" stroke="var(--accent)" strokeWidth="1" />
                                            <circle cx="210" cy="100" r="2" fill="var(--accent)" />
                                            <line x1="100" y1="100" x2="155" y2="100" stroke="var(--accent)" strokeWidth="1.5" markerEnd="url(#arrow)" />
                                            <text x="70" y="130" textAnchor="middle" fill="var(--fg)" fontSize="11px" fontWeight="600">受熱前微膠囊</text>
                                            <text x="70" y="145" textAnchor="middle" fill="var(--muted)" fontSize="9px" className="mono">10~30µm</text>
                                            <text x="210" y="150" textAnchor="middle" fill="var(--fg)" fontSize="11px" fontWeight="600">受熱膨脹後</text>
                                            <text x="210" y="165" textAnchor="middle" fill="var(--muted)" fontSize="9px" className="mono">30~200µm</text>
                                        </svg>
                                    </div>
                                ) : (
                                    <div style={{width:'100%', aspectRatio:'1/1', background:'var(--surface)', display:'flex', alignItems:'center', justifyContent:'center', borderRadius:'var(--radius-md)', overflow:'hidden', position:'relative', border:'1px solid var(--border)', marginBottom:'32px', boxShadow:'0 10px 30px rgba(0,0,0,0.02)'}}>
                                        <svg viewBox="0 0 200 200" style={{width:'85%', height:'85%', opacity:0.95}} xmlns="http://www.w3.org/2000/svg">
                                            <defs>
                                                <radialGradient id="detail-glow-dyn" cx="50%" cy="50%" r="50%">
                                                    <stop offset="0%" stopColor="var(--accent)" stopOpacity="0.2" />
                                                    <stop offset="100%" stopColor="var(--accent)" stopOpacity="0" />
                                                </radialGradient>
                                            </defs>
                                            <rect width="200" height="200" fill="none"/>
                                            <circle cx="100" cy="100" r="90" fill="url(#detail-glow-dyn)" />
                                            <path d="M 100 30 L 152 60 L 152 120 L 100 150 L 48 120 L 48 60 Z" fill="none" stroke="var(--accent)" strokeWidth="2.5" strokeOpacity="0.5" />
                                            <path d="M 100 45 L 139 67.5 L 139 112.5 L 100 135 L 61 112.5 L 61 67.5 Z" fill="none" stroke="var(--accent)" strokeWidth="1" strokeOpacity="0.25" strokeDasharray="3 3" />
                                            <path d="M 100 30 L 100 10 M 152 60 L 169 50 M 152 120 L 169 130 M 100 150 L 100 170 M 48 120 L 31 130 M 48 60 L 31 50" fill="none" stroke="var(--accent)" strokeWidth="1.5" strokeOpacity="0.4" />
                                            <circle cx="100" cy="30" r="4.5" fill="var(--accent)" />
                                            <circle cx="152" cy="60" r="4.5" fill="var(--accent)" />
                                            <circle cx="152" cy="120" r="4.5" fill="var(--accent)" />
                                            <circle cx="100" cy="150" r="4.5" fill="var(--accent)" />
                                            <circle cx="48" cy="120" r="4.5" fill="var(--accent)" />
                                            <circle cx="48" cy="60" r="4.5" fill="var(--accent)" />
                                            <circle cx="100" cy="100" r="22" fill="none" stroke="var(--accent)" strokeWidth="2" strokeOpacity="0.4" />
                                            <circle cx="100" cy="100" r="14" fill="none" stroke="var(--accent)" strokeWidth="1.5" strokeOpacity="0.5" strokeDasharray="2 2" />
                                        </svg>
                                    </div>
                                )}
                                <h3 style={{fontSize:'26px', color:'var(--fg)', marginBottom:'8px'}}>{product.title}</h3>
                                <p className="mono" style={{fontSize:'13px', color:'var(--accent)', fontWeight:600, letterSpacing:'0.05em'}}>{product.enTitle}</p>
                                <p style={{fontSize:'13px', color:'var(--muted)', marginTop:'16px', lineHeight:1.6, padding:'0 12px'}}>
                                    {product.characteristics}
                                </p>
                            </div>
                        </div>

                        {/* 右側主欄: 4-tab panel layout */}
                        <div className="col-7">
                            <div className="product-detail-content" style={{background:'var(--surface)', border:'1px solid var(--border)', borderRadius:'var(--radius-lg)', padding:'48px', minHeight:'500px', display:'flex', flexDirection:'column', boxShadow:'0 20px 50px rgba(0,0,0,0.02)'}}>
                                <div className="tabs" style={{marginBottom:'32px', borderBottom:'1px solid var(--border)', paddingBottom:'12px', gap:'12px', flexWrap:'wrap'}}>
                                    {detailTabs.map(tab => (
                                        <button
                                            key={tab.id}
                                            type="button"
                                            className={`tab ${activeTab === tab.id ? 'active' : ''}`}
                                            onClick={() => setActiveTab(tab.id)}
                                            style={{
                                                padding:'12px 24px',
                                                fontSize:'15px',
                                                borderRadius:'var(--radius-sm)',
                                                background: activeTab === tab.id ? 'var(--accent)' : 'var(--bg)',
                                                color: activeTab === tab.id ? 'white' : 'var(--muted)',
                                                border: '1px solid ' + (activeTab === tab.id ? 'var(--accent)' : 'var(--border)'),
                                                cursor:'pointer',
                                                transition:'all 0.3s ease',
                                                fontWeight: 600
                                            }}
                                        >
                                            {tab.name}
                                        </button>
                                    ))}
                                </div>

                                <div style={{flex: 1, display:'flex', flexDirection:'column', justifyContent:'flex-start', lineHeight:1.8}}>
                                    {activeTab === 'overview' && (
                                        <div className="fade-in">
                                            {product.overview.map((p, i) => (
                                                <p key={i} style={{fontSize:'16px', color: i === 0 ? 'var(--fg)' : 'var(--muted)', marginBottom:'16px'}}>{p}</p>
                                            ))}
                                        </div>
                                    )}
                                    {activeTab === 'apps' && (
                                        <div className="fade-in">
                                            {product.apps.map((p, i) => (
                                                <p key={i} style={{fontSize:'16px', color:'var(--fg)', marginBottom:'12px'}}>{p}</p>
                                            ))}
                                        </div>
                                    )}
                                    {activeTab === 'storage' && (
                                        <div className="fade-in">
                                            {product.storage.map((p, i) => (
                                                <p key={i} style={{fontSize:'16px', color:'var(--fg)', marginBottom:'12px'}}>{p}</p>
                                            ))}
                                        </div>
                                    )}
                                    {activeTab === 'specs' && (
                                        <SpecsTableRenderer tableType={product.tableType} rows={product.rows} />
                                    )}
                                </div>
                            </div>
                        </div>
                    </div>

                    <div style={{display:'flex', justifyContent:'center', marginTop:'64px'}}>
                        <button className="button" onClick={() => onNavigate('products')}>
                            返回產品目錄
                        </button>
                    </div>
                </div>
            );
        };

        const SupportPage = () => {
            const [activeTab, setActiveTab] = useState('foaming');
            const r = useReveal();
            const fallbackCerts = [
                { title: 'SGS REACH 報告', img: 'mpqhvqoy-截圖-2026-05-29-下午1.23.19.png', desc: '符合歐盟 REACH 高關注物質檢測標準。' },
                { title: '海/陸/空運輸鑑定報告', img: 'mpqhvqp2-截圖-2026-05-29-下午1.23.26.png', desc: '海運、陸運、空運運輸安全鑑定報告。' },
                { title: '鄰苯 Phthalates 檢測報告', img: 'mpqhvqp6-截圖-2026-05-29-下午1.23.34.png', desc: '鄰苯二甲酸酯類物質檢測合格。' },
                { title: 'ROHS 檢測報告', img: 'mpqhvqp8-截圖-2026-05-29-下午1.23.40.png', desc: 'ROHS 有害物質限制指令合規檢測。' },
                { title: '納稅信用 A 級證書', img: 'mpqhwegv-截圖-2026-05-29-下午1.24.00.png', desc: '2024 年度納稅信用 A 級納稅人。' },
                { title: '常年法律顧問', img: 'zuoshi-legal-advisor.png', desc: '企業常年法律顧問牌匾。' }
            ];
            const cmsCerts = (CMS.gallery || [])
                .filter((item) => item.type === '證書報告' && item.image)
                .map((item) => ({ title: item.title, img: item.image, desc: item.description }));
            const certs = cmsCerts.length > 0 ? cmsCerts : fallbackCerts;
            return (
                <div className="container">
                    <div className="badge">TECHNICAL SPEC / 技術與認證</div>
                    <h2 style={{fontSize:'56px', marginBottom:'64px'}}>專業嚴謹的品質保障</h2>
                    <div className="tabs">
                        <button type="button" className={`tab ${activeTab === 'foaming' ? 'active' : ''}`} onClick={() => setActiveTab('foaming')}>發泡劑參數</button>
                        <button type="button" className={`tab ${activeTab === 'others' ? 'active' : ''}`} onClick={() => setActiveTab('others')}>其他助劑</button>
                        <button type="button" className={`tab ${activeTab === 'certs' ? 'active' : ''}`} onClick={() => setActiveTab('certs')}>認證與報告</button>
                    </div>
                    <div className="reveal" ref={r}>
                        {activeTab === 'foaming' && (
                            <div className="table-container">
                                <table>
                                    <thead><tr><th>產品品名</th><th>產氣量 (ml/g)</th><th>分解溫度 (°C)</th><th>推薦基體</th></tr></thead>
                                    <tbody className="mono">
                                        <tr><td>白發泡劑 TH</td><td>≥ 100</td><td>150-180</td><td>PVC, TPR, PP</td></tr>
                                        <tr><td>AC-1000 (黃)</td><td>220±10</td><td>200-210</td><td>PE, ABS, EVA</td></tr>
                                        <tr><td>DU-50 (母粒)</td><td>50±5</td><td>150-200</td><td>EVA 發泡成型</td></tr>
                                    </tbody>
                                </table>
                            </div>
                        )}
                        {activeTab === 'others' && (
                            <div className="table-container">
                                <table>
                                    <thead><tr><th>CAS No.</th><th>產品名稱</th><th>熔點 (°C)</th><th>主要功能</th></tr></thead>
                                    <tbody className="mono">
                                        <tr><td>6683-19-8</td><td>抗氧化劑 1010</td><td>119-125</td><td>受阻酚主抗氧</td></tr>
                                        <tr><td>1533-45-5</td><td>增白劑 OB-1</td><td>358-360</td><td>硬質塑膠增白</td></tr>
                                        <tr><td>1843-05-6</td><td>UV 吸收劑 531</td><td>47-49</td><td>二苯甲酮類光穩定</td></tr>
                                    </tbody>
                                </table>
                            </div>
                        )}
                        {activeTab === 'certs' && (
                            <div style={{display:'grid', gridTemplateColumns:'repeat(auto-fill, minmax(250px, 1fr))', gap:'32px'}}>
                                {certs.map((c, i) => (
                                    <div key={i} className="card" style={{padding: '20px'}}>
                                        <div style={{height:'320px', background:'#f8f8f8', display:'flex', alignItems:'center', justifyContent:'center', marginBottom:'16px'}}>
                                            <img src={c.img} style={{maxWidth:'95%', maxHeight:'95%', boxShadow: '0 4px 8px rgba(0,0,0,0.05)'}} />
                                        </div>
                                        <h4 style={{fontSize: '14px'}}>{c.title}</h4>
                                        <p style={{fontSize: '12px', color: 'var(--muted)', marginTop: '8px'}}>{c.desc}</p>
                                    </div>
                                ))}
                            </div>
                        )}
                    </div>
                </div>
            );
        };

        const ContactPage = ({ companyEn }) => {
            const handleInquirySubmit = (event) => {
                event.preventDefault();
                window.location.href = 'tel:+8676983792005';
            };

            return (
                <div className="container">
                    <div className="badge">CONTACT / 聯絡我們</div>
                    <h2 style={{fontSize:'56px', marginBottom:'80px'}}>建立長期穩定的合作關係</h2>
                    <div className="swd-grid reveal" ref={useReveal()}>
                        <div className="col-5">
                            <div className="card" style={{marginBottom:'32px', borderLeft:'8px solid var(--accent)'}}>
                                <div className="mono" style={{color:'var(--accent)', fontSize:'13px', marginBottom:'16px'}}>TAIWAN OFFICE</div>
                                <p style={{fontSize:'22px', fontWeight:700}}>臺灣辦事處</p>
                                <div style={{fontSize:'15px', color:'var(--muted)', marginTop:'24px', lineHeight: 2}}>
                                    <p><strong>佶暘新材料科技有限公司</strong></p>
                                    <p>地址：臺南市鹽水區歡雅里尾寮10之17號1樓</p>
                                </div>
                            </div>
                            <div className="card" style={{borderLeft:'8px solid var(--fg)'}}>
                                <div className="mono" style={{color:'var(--muted)', fontSize:'13px', marginBottom:'16px'}}>PRODUCTION BASE</div>
                                <p style={{fontSize:'22px', fontWeight:700}}>東莞辦事處 / 生產基地</p>
                                <div style={{fontSize:'16px', color:'var(--muted)', marginTop:'24px', lineHeight: 2}}>
                                    <p>地址：廣東省東莞市沙田鎮齊沙村齊沙一路1號</p>
                                    <p>電話：<a href="tel:+8676983792005" style={{color:'inherit'}}>0769-83792005</a> / <a href="tel:+8676981698047" style={{color:'inherit'}}>81698047</a></p>
                                </div>
                            </div>
                        </div>
                        <div className="col-7">
                            <form onSubmit={handleInquirySubmit} style={{background:'white', border: '1px solid var(--border)', padding:'60px', borderRadius: 'var(--radius-md)'}}>
                                <h3 style={{marginBottom:'40px', fontSize: '24px'}}>技術服務在線諮詢</h3>
                                <div style={{display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '24px', marginBottom:'24px'}}>
                                    <input name="name" type="text" placeholder="您的姓名" autoComplete="name" style={{width:'100%', padding:'16px', border:'1px solid var(--border)', borderRadius:'4px', background: 'var(--bg)'}} />
                                    <input name="company" type="text" placeholder="公司名稱" autoComplete="organization" style={{width:'100%', padding:'16px', border:'1px solid var(--border)', borderRadius:'4px', background: 'var(--bg)'}} />
                                </div>
                                <input name="contact" type="text" placeholder="聯繫電話或 Email" autoComplete="email" style={{width:'100%', padding:'16px', border:'1px solid var(--border)', borderRadius:'4px', background: 'var(--bg)', marginBottom:'24px'}} />
                                <textarea name="message" placeholder="需求詳情內容..." style={{width:'100%', padding:'16px', border:'1px solid var(--border)', borderRadius:'4px', height:'120px', background: 'var(--bg)', marginBottom:'24px'}}></textarea>
                                <p style={{fontSize:'13px', color:'var(--muted)', lineHeight:1.8, marginBottom:'32px'}}>
                                    隱私告知：此頁面不會在網站端保存您輸入的資料。送出後將改以電話聯繫東莞辦事處；若需啟用線上寄送，請以公司指定收件信箱完成設定。
                                </p>
                                <button type="submit" className="button" style={{width:'100%', justifyContent:'center'}}>電話聯繫技術服務</button>
                            </form>
                        </div>
                    </div>
                </div>
            );
        };

        const root = ReactDOM.createRoot(document.getElementById('root'));
        root.render(<App />);
        window.requestAnimationFrame(applyCmsCopy);