// 共用元件：3D 機台、數據圖、產品卡等

// 3D 機台 SVG — 等軸投影風，可隨滑鼠或 scroll 旋轉
window.Machine3D = function Machine3D({ rotation = 0, variant = 'inline', scale = 1, tint = '#60a5fa' }) {
  // variant: inline (gantry) / desktop / valve
  const rot = rotation;
  const style = { transform: `perspective(1200px) rotateX(18deg) rotateY(${rot}deg) scale(${scale})`, transformStyle: 'preserve-3d', transition: 'transform 0.1s linear' };

  if (variant === 'desktop') {
    return (
      <div style={{ position: 'relative', width: 400, height: 340, ...style }}>
        {/* base */}
        <div style={{ position: 'absolute', left: 40, top: 240, width: 320, height: 60, background: 'linear-gradient(180deg,#2a2f36,#15181c)', borderRadius: 6, boxShadow: '0 30px 60px rgba(0,0,0,0.5)' }} />
        {/* pillars */}
        <div style={{ position: 'absolute', left: 60, top: 60, width: 14, height: 200, background: 'linear-gradient(90deg,#3a4048,#1a1d22)', borderRadius: 2 }} />
        <div style={{ position: 'absolute', right: 60, top: 60, width: 14, height: 200, background: 'linear-gradient(90deg,#3a4048,#1a1d22)', borderRadius: 2 }} />
        {/* top beam */}
        <div style={{ position: 'absolute', left: 50, top: 60, width: 300, height: 22, background: 'linear-gradient(180deg,#4a5058,#232830)', borderRadius: 3 }} />
        {/* dispenser head */}
        <div style={{ position: 'absolute', left: 180, top: 80, width: 44, height: 80, background: 'linear-gradient(180deg,#64748b,#334155)', borderRadius: 3, boxShadow: `0 0 24px ${tint}55` }}>
          <div style={{ position: 'absolute', bottom: -20, left: 20, width: 4, height: 20, background: tint, boxShadow: `0 0 12px ${tint}` }} />
        </div>
        {/* platform */}
        <div style={{ position: 'absolute', left: 80, top: 210, width: 240, height: 36, background: 'linear-gradient(180deg,#1e293b,#0f172a)', border: `1px solid ${tint}33`, borderRadius: 3 }} />
        {/* glow grid */}
        <div style={{ position: 'absolute', left: 80, top: 210, width: 240, height: 36, backgroundImage: `linear-gradient(${tint}22 1px, transparent 1px), linear-gradient(90deg, ${tint}22 1px, transparent 1px)`, backgroundSize: '20px 12px' }} />
      </div>
    );
  }

  if (variant === 'valve') {
    return (
      <div style={{ position: 'relative', width: 260, height: 340, ...style }}>
        {/* valve body */}
        <div style={{ position: 'absolute', left: 80, top: 40, width: 100, height: 180, background: 'linear-gradient(180deg,#94a3b8,#475569)', borderRadius: 12, boxShadow: '0 20px 40px rgba(0,0,0,0.4)' }}>
          <div style={{ position: 'absolute', top: 20, left: 10, right: 10, height: 6, background: '#1e293b', borderRadius: 3 }} />
          <div style={{ position: 'absolute', top: 40, left: 10, right: 10, height: 6, background: '#1e293b', borderRadius: 3 }} />
          <div style={{ position: 'absolute', top: 80, left: 30, right: 30, height: 30, background: `linear-gradient(180deg, ${tint}, ${tint}99)`, borderRadius: 4, boxShadow: `0 0 20px ${tint}` }} />
        </div>
        {/* needle */}
        <div style={{ position: 'absolute', left: 124, top: 220, width: 12, height: 80, background: 'linear-gradient(180deg,#cbd5e1,#64748b)', clipPath: 'polygon(0 0, 100% 0, 60% 100%, 40% 100%)' }} />
        {/* droplet */}
        <div style={{ position: 'absolute', left: 126, top: 308, width: 8, height: 12, background: tint, borderRadius: '50% 50% 50% 50% / 40% 40% 60% 60%', boxShadow: `0 0 16px ${tint}` }} />
      </div>
    );
  }

  // default: inline gantry (full industrial)
  return (
    <div style={{ position: 'relative', width: 560, height: 380, ...style }}>
      {/* conveyor belt */}
      <div style={{ position: 'absolute', left: 0, top: 300, right: 0, height: 40, background: 'linear-gradient(180deg,#1e2228,#0a0c0f)', borderRadius: 4 }}>
        <div style={{ position: 'absolute', inset: 6, background: 'repeating-linear-gradient(90deg, #2a2f36 0 12px, #1a1d22 12px 24px)', borderRadius: 2 }} />
      </div>
      {/* outer frame */}
      <div style={{ position: 'absolute', left: 20, top: 20, width: 520, height: 280, border: '3px solid #3a4048', borderRadius: 6, background: 'linear-gradient(135deg, rgba(40,45,52,0.4), rgba(20,23,28,0.8))', boxShadow: `inset 0 0 40px ${tint}11` }}>
        {/* top rail */}
        <div style={{ position: 'absolute', left: 0, top: 20, right: 0, height: 14, background: 'linear-gradient(180deg,#4a5058,#232830)' }} />
        {/* moving head */}
        <div style={{ position: 'absolute', left: 220, top: 34, width: 60, height: 100, background: 'linear-gradient(180deg,#64748b,#1e293b)', borderRadius: 3, boxShadow: `0 0 30px ${tint}` }}>
          <div style={{ position: 'absolute', top: 20, left: 10, right: 10, height: 4, background: tint }} />
          <div style={{ position: 'absolute', bottom: -16, left: 28, width: 4, height: 16, background: tint, boxShadow: `0 0 12px ${tint}` }} />
        </div>
        {/* panel */}
        <div style={{ position: 'absolute', left: 24, top: 50, width: 80, height: 120, background: '#0a0c0f', border: `1px solid ${tint}55`, borderRadius: 3 }}>
          <div style={{ position: 'absolute', top: 10, left: 10, right: 10, height: 8, background: tint, opacity: 0.7 }} />
          <div style={{ position: 'absolute', top: 26, left: 10, right: 30, height: 4, background: tint, opacity: 0.4 }} />
          <div style={{ position: 'absolute', top: 36, left: 10, right: 20, height: 4, background: tint, opacity: 0.4 }} />
          <div style={{ position: 'absolute', top: 50, left: 10, right: 10, bottom: 10, background: `repeating-linear-gradient(0deg, ${tint}22 0 2px, transparent 2px 4px)` }} />
        </div>
        {/* work area */}
        <div style={{ position: 'absolute', left: 120, top: 180, right: 40, height: 70, background: '#0a0c0f', border: `1px solid ${tint}55`, borderRadius: 2, backgroundImage: `linear-gradient(${tint}22 1px, transparent 1px), linear-gradient(90deg, ${tint}22 1px, transparent 1px)`, backgroundSize: '16px 12px' }} />
      </div>
    </div>
  );
};

// 精密數據儀表板
window.PrecisionDashboard = function PrecisionDashboard({ accent = '#60a5fa' }) {
  const [val, setVal] = React.useState(0.2);
  React.useEffect(() => {
    const id = setInterval(() => setVal(0.1 + Math.random() * 0.6), 1800);
    return () => clearInterval(id);
  }, []);
  return (
    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 16 }}>
      <div style={{ padding: 20, background: 'rgba(var(--a-fg-rgb),0.02)', border: '1px solid rgba(var(--a-fg-rgb),0.08)', borderRadius: 8 }}>
        <div style={{ fontSize: 11, letterSpacing: 2, opacity: 0.5, textTransform: 'uppercase' }}>Precision</div>
        <div style={{ display: 'flex', alignItems: 'baseline', gap: 4, marginTop: 8 }}>
          <span style={{ fontSize: 42, fontWeight: 200, letterSpacing: -1, color: accent, fontFamily: 'JetBrains Mono, monospace' }}>±{val.toFixed(2)}</span>
          <span style={{ fontSize: 14, opacity: 0.6 }}>μm</span>
        </div>
        <div style={{ marginTop: 10, height: 2, background: 'rgba(var(--a-fg-rgb),0.06)' }}>
          <div style={{ height: '100%', width: `${val*100}%`, background: accent, transition: 'width 1.8s ease' }} />
        </div>
      </div>
      <div style={{ padding: 20, background: 'rgba(var(--a-fg-rgb),0.02)', border: '1px solid rgba(var(--a-fg-rgb),0.08)', borderRadius: 8 }}>
        <div style={{ fontSize: 11, letterSpacing: 2, opacity: 0.5, textTransform: 'uppercase' }}>Speed</div>
        <div style={{ display: 'flex', alignItems: 'baseline', gap: 4, marginTop: 8 }}>
          <span style={{ fontSize: 42, fontWeight: 200, letterSpacing: -1, color: accent, fontFamily: 'JetBrains Mono, monospace' }}>200</span>
          <span style={{ fontSize: 14, opacity: 0.6 }}>Hz</span>
        </div>
        <div style={{ marginTop: 10, display: 'flex', gap: 3 }}>
          {Array.from({length:20}).map((_,i) => (
            <div key={i} style={{ flex: 1, height: 10 + Math.random()*14, background: accent, opacity: 0.2 + Math.random()*0.8 }} />
          ))}
        </div>
      </div>
      <div style={{ padding: 20, background: 'rgba(var(--a-fg-rgb),0.02)', border: '1px solid rgba(var(--a-fg-rgb),0.08)', borderRadius: 8 }}>
        <div style={{ fontSize: 11, letterSpacing: 2, opacity: 0.5, textTransform: 'uppercase' }}>Yield</div>
        <div style={{ display: 'flex', alignItems: 'baseline', gap: 4, marginTop: 8 }}>
          <span style={{ fontSize: 42, fontWeight: 200, letterSpacing: -1, color: accent, fontFamily: 'JetBrains Mono, monospace' }}>99.7</span>
          <span style={{ fontSize: 14, opacity: 0.6 }}>%</span>
        </div>
        <div style={{ marginTop: 10, position: 'relative', height: 24 }}>
          <svg viewBox="0 0 100 24" style={{ width: '100%', height: '100%' }}>
            <polyline points="0,18 10,15 20,16 30,12 40,10 50,11 60,6 70,7 80,4 90,3 100,2" fill="none" stroke={accent} strokeWidth="1" />
          </svg>
        </div>
      </div>
    </div>
  );
};

// 共用資料：產品清單
window.PRODUCTS = [
  { id: 'act-u', cat: 'inline', nameKey: 'p_actu', subKey: 'p_actu_sub', code: 'ACT-U', desc: 'Underfill 全自動底部填充，ADJ 噴射閥技術，高精度非接觸式點膠', precision: '±10μm', speed: '200Hz', travel: '460×460×80mm' },
  { id: 'act-p', cat: 'inline', nameKey: 'p_actp', subKey: 'p_actp_sub', code: 'ACT-P', desc: '紅膠 / 黑膠 / 黃膠 in-line 點膠，適用 SMT 前段貼裝', precision: '±15μm', speed: '150Hz', travel: '460×460×100mm' },
  { id: 'act-c', cat: 'inline', nameKey: 'p_actc', subKey: 'p_actc_sub', code: 'ACT-C', desc: 'Conformal Coating 三防膠噴塗，PCB 三防保護', precision: '±20μm', speed: '120Hz', travel: '500×400×120mm' },
  { id: 'act-t', cat: 'inline', nameKey: 'p_actt', subKey: 'p_actt_sub', code: 'ACT-T', desc: '散熱膏點膠，CPU / GPU 高黏度膠點膠專用', precision: '±15μm', speed: '100Hz', travel: '400×400×80mm' },
  { id: 'act-v', cat: 'offline', nameKey: 'p_actv', subKey: 'p_actv_sub', code: 'ACT-V', desc: '單站式高精密 off-line 點膠機，實驗室 / 小量生產首選', precision: '±5μm', speed: '80Hz', travel: '300×300×100mm' },
  { id: 'act-ld4s', cat: 'custom', nameKey: 'p_actld', subKey: 'p_actld_sub', code: 'ACT-LD4S', desc: '多工整合：點膠 + 鎖螺絲 + 雷雕 + 組裝，一台抵四台', precision: '±20μm', speed: '—', travel: '客製化' },
  { id: 'gv', cat: 'inline', nameKey: 'p_gv', subKey: 'p_gv_sub', code: 'GV', desc: '2D / 3D 點膠路徑視覺檢測，Inline AOI 整合', precision: '±2μm 量測', speed: '—', travel: '客製化' },
];

window.APPLIES = [
  { id: 'smt', nameKey: 'ap_smt', cases: ['Underfill', '紅膠點膠', 'PCB Coating', '錫膏'],
    img: 'https://images.unsplash.com/photo-1518770660439-4636190af475?w=1200&q=80' },
  { id: 'module', nameKey: 'ap_module', cases: ['VCM', 'CCM', 'MEMS'],
    img: 'https://images.unsplash.com/photo-1580927752452-89d86da3fa0a?w=900&q=80' },
  { id: 'mobile', nameKey: 'ap_mobile', cases: ['屏幕點膠', 'Type-C'],
    img: 'https://images.unsplash.com/photo-1511707171634-5f897ff02aa9?w=900&q=80' },
  { id: 'auto', nameKey: 'ap_auto', cases: ['RTV 加固', '水箱密封', 'PCB Coating'],
    img: 'https://images.unsplash.com/photo-1558980664-10e7170b5df9?w=900&q=80' },
  { id: 'semi', nameKey: 'ap_semi', cases: ['晶片底部填充', 'Dam & fill', 'Glob top', '銀漿'],
    img: 'https://images.unsplash.com/photo-1631624215749-b10b3dd7bca7?w=900&q=80' },
  { id: 'led', nameKey: 'ap_led', cases: ['Micro LED', 'Mini LED'],
    img: 'https://images.unsplash.com/photo-1550751827-4bd374c3f58b?w=900&q=80' },
  { id: 'medical', nameKey: 'ap_medical', cases: ['血糖試紙'],
    img: 'https://images.unsplash.com/photo-1576091160399-112ba8d25d1d?w=1200&q=80' },
];