// 方向 A：深色科技精密感 — Fanuc/Keyence 級別工業美學
// 深黑底 + 精密藍 accent + 單等寬字 + 數據感

const { useState, useEffect, useRef } = React;

const A_ACCENT = 'var(--a-accent)';

const aStyles = {
  root: {
    minHeight: '100vh',
    background: 'var(--a-bg)',
    color: 'var(--a-fg)',
    fontFamily: '"Inter", "Noto Sans TC", sans-serif',
    fontFeatureSettings: '"tnum"',
  },
  mono: {
    fontFamily: '"JetBrains Mono", "SF Mono", monospace',
  },
};

// ============ NAV ============
function NavA({ lang, setLang, t, goto }) {
  const [scrolled, setScrolled] = useState(false);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 20);
    window.addEventListener('scroll', onScroll);
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  return (
    <nav style={{
      position: 'fixed', top: 0, left: 0, right: 0, zIndex: 50,
      background: scrolled ? 'rgba(var(--a-bg-rgb),0.85)' : 'transparent',
      backdropFilter: scrolled ? 'blur(16px) saturate(160%)' : 'none',
      borderBottom: scrolled ? '1px solid rgba(var(--a-fg-rgb),0.06)' : '1px solid transparent',
      transition: 'all 0.3s ease',
      padding: '16px 40px',
      display: 'flex', alignItems: 'center', justifyContent: 'space-between'
    }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 36 }}>
        <a onClick={()=>goto('home')} style={{ cursor: 'pointer', display: 'flex', alignItems: 'center', gap: 14 }}>
          <img src="logo-original.png" alt="稼動科技 ACT" style={{ height: 42, filter: 'var(--a-logo-filter)' }} />
          <span style={{ ...aStyles.mono, fontSize: 10, letterSpacing: 2, opacity: 0.5, borderLeft: '1px solid rgba(var(--a-fg-rgb),0.15)', paddingLeft: 12 }}>稼動科技 · est. 1993</span>
        </a>
        <div style={{ display: 'flex', gap: 24, marginLeft: 28 }}>
          {[
            ['about', t('nav_about')],
            ['products', t('nav_product')],
            ['apply', t('nav_apply')],
            ['service', t('nav_service')],
            ['news', t('nav_news')],
          ].map(([k,label]) => (
            <a key={k} onClick={()=>goto(k==='about'?'about':k==='products'?'products':k==='apply'?'apply':k==='service'?'service':k==='news'?'contact':'home')} style={{ fontSize: 13, opacity: 0.75, cursor: 'pointer', letterSpacing: 0.5 }}>{label}</a>
          ))}
        </div>
      </div>
      <div style={{ display: 'flex', alignItems: 'center', gap: 20 }}>
        <div style={{ display: 'flex', gap: 2, padding: 3, border: '1px solid rgba(var(--a-fg-rgb),0.1)', borderRadius: 20 }}>
          {['zh-TW','en'].map(l => (
            <button key={l} onClick={()=>setLang(l)} style={{
              ...aStyles.mono, fontSize: 10, letterSpacing: 1,
              padding: '4px 10px', borderRadius: 16, border: 'none',
              background: lang===l ? A_ACCENT : 'transparent',
              color: lang===l ? '#07090c' : 'var(--a-fg)',
              cursor: 'pointer'
            }}>{l==='zh-TW'?'TW':l==='en'?'EN':'CN'}</button>
          ))}
        </div>
      </div>
    </nav>
  );
}

// ============ HERO ============
function HeroA({ t }) {
  const [rot, setRot] = useState(-20);
  const [dragging, setDragging] = useState(false);
  const [viewMode, setViewMode] = useState('3d'); // '3d' | 'real'
  const startX = useRef(0);
  const startRot = useRef(0);

  useEffect(() => {
    if (dragging || viewMode !== '3d') return;
    const id = setInterval(() => setRot(r => r + 0.15), 40);
    return () => clearInterval(id);
  }, [dragging, viewMode]);

  const onDown = (e) => { setDragging(true); startX.current = e.clientX; startRot.current = rot; };
  const onMove = (e) => { if (!dragging) return; setRot(startRot.current + (e.clientX - startX.current) * 0.5); };
  const onUp = () => setDragging(false);

  useEffect(() => {
    window.addEventListener('mousemove', onMove);
    window.addEventListener('mouseup', onUp);
    return () => { window.removeEventListener('mousemove', onMove); window.removeEventListener('mouseup', onUp); };
  });

  return (
    <section style={{ minHeight: '100vh', paddingTop: 80, position: 'relative', overflow: 'hidden' }}>
      {/* grid bg */}
      <div style={{
        position: 'absolute', inset: 0,
        backgroundImage: `linear-gradient(rgba(var(--a-tech-rgb),0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(var(--a-tech-rgb),0.04) 1px, transparent 1px)`,
        backgroundSize: '60px 60px',
        maskImage: 'radial-gradient(ellipse at center, black 20%, transparent 70%)'
      }} />
      {/* accent glow */}
      <div style={{ position: 'absolute', top: '30%', left: '60%', width: 600, height: 600, background: `radial-gradient(circle, ${A_ACCENT}22, transparent 60%)`, filter: 'blur(40px)' }} />

      <div style={{ position: 'relative', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 40, padding: '80px 60px', maxWidth: 1600, margin: '0 auto', alignItems: 'center' }}>
        <div>
          <div style={{ ...aStyles.mono, fontSize: 11, letterSpacing: 3, color: A_ACCENT, marginBottom: 28, textTransform: 'uppercase' }}>
            <span style={{ display: 'inline-block', width: 32, height: 1, background: A_ACCENT, verticalAlign: 'middle', marginRight: 12 }} />
            {t('hero_eyebrow')}
          </div>
          <h1 style={{ fontSize: 88, lineHeight: 0.95, fontWeight: 200, letterSpacing: -3, margin: 0 }}>
            {t('hero_title_1')}<br />
            <span style={{ fontWeight: 600, background: `linear-gradient(120deg, var(--a-fg), ${A_ACCENT})`, WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent' }}>{t('hero_title_2')}</span>
          </h1>
          <p style={{ fontSize: 17, opacity: 0.6, maxWidth: 500, marginTop: 32, lineHeight: 1.7 }}>{t('hero_sub')}</p>
          <div style={{ display: 'flex', gap: 16, marginTop: 48 }}>
            <button style={{ background: A_ACCENT, color: '#07090c', border: 'none', padding: '16px 28px', fontSize: 14, fontWeight: 600, letterSpacing: 1, cursor: 'pointer', borderRadius: 2 }}>{t('hero_cta_primary')} →</button>
          </div>
          <div style={{ ...aStyles.mono, fontSize: 10, letterSpacing: 2, opacity: 0.4, marginTop: 60, display: 'flex', gap: 24 }}>
            <span>ISO 9001</span>
            <span>CE CERTIFIED</span>
            <span>MADE IN TAIWAN</span>
          </div>
        </div>
        <div style={{ position: 'relative', height: 480, display: 'flex', alignItems: 'center', justifyContent: 'center' }}
             onMouseDown={viewMode === '3d' ? onDown : undefined}>
          <div style={{ position: 'absolute', inset: 0, border: `1px solid rgba(var(--a-tech-rgb),0.2)`, borderRadius: 8, overflow: 'hidden' }}>
            {/* crosshair */}
            {['TL','TR','BL','BR'].map(c => {
              const [v,h] = [c[0], c[1]];
              return (
                <div key={c} style={{
                  position: 'absolute',
                  [v==='T'?'top':'bottom']: -6, [h==='L'?'left':'right']: -6,
                  width: 12, height: 12, border: `1px solid ${A_ACCENT}`,
                  borderRadius: 0, zIndex: 2
                }} />
              );
            })}
            <div style={{ ...aStyles.mono, position: 'absolute', top: 12, left: 12, fontSize: 10, letterSpacing: 2, color: A_ACCENT, opacity: 0.7, zIndex: 2 }}>ACT-U / IN-LINE AUTO DISPENSER</div>
            <div style={{ ...aStyles.mono, position: 'absolute', bottom: 12, right: 12, fontSize: 10, letterSpacing: 2, opacity: 0.4, zIndex: 2 }}>
              {viewMode === '3d' ? `DRAG TO ROTATE ·  ROT ${Math.round(rot)}°` : 'LIVE · NEW TAIPEI FACTORY'}
            </div>
            {/* real view */}
            {viewMode === 'real' && (
              <div style={{ position: 'absolute', inset: 0 }}>
                <img src="https://images.unsplash.com/photo-1581092334702-0883c098e602?w=1200&q=80" style={{ width: '100%', height: '100%', objectFit: 'cover', filter: 'grayscale(0.6) contrast(1.1) brightness(0.7)' }} />
                <div style={{ position: 'absolute', inset: 0, background: `linear-gradient(180deg, transparent, rgba(var(--a-media-rgb),0.6)), radial-gradient(circle at 30% 40%, ${A_ACCENT}22, transparent 50%)` }} />
                {/* scan marker */}
                <div style={{ position: 'absolute', top: '40%', left: '45%', width: 80, height: 80, border: `1px solid ${A_ACCENT}`, borderRadius: '50%', animation: 'pulse 2s ease-out infinite' }} />
              </div>
            )}
          </div>
          {viewMode === '3d' && <Machine3D rotation={rot} variant="inline" tint="#60a5fa" />}
          {/* view switch */}
          <div style={{ position: 'absolute', top: 16, right: 16, display: 'flex', background: 'rgba(var(--a-bg-rgb),0.7)', backdropFilter: 'blur(8px)', border: '1px solid rgba(var(--a-fg-rgb),0.08)', borderRadius: 2, zIndex: 3 }}>
            {[['3d', t('hero_view_3d')], ['real', t('hero_view_real')]].map(([k, label]) => (
              <button key={k} onClick={() => setViewMode(k)} style={{
                ...aStyles.mono, padding: '8px 14px', fontSize: 10, letterSpacing: 2,
                background: viewMode === k ? A_ACCENT : 'transparent',
                color: viewMode === k ? '#07090c' : 'var(--a-fg)',
                border: 'none', cursor: 'pointer', fontWeight: viewMode === k ? 700 : 400
              }}>{label}</button>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

// ============ STATS RIBBON ============
function StatsA({ t }) {
  const stats = [
    { n: '30+', l: t('stat_years') },
    { n: '±5', u: 'μm', l: t('stat_precision') },
    { n: '1,200+', l: t('stat_clients') },
    { n: '40+', l: t('stat_products') },
  ];
  return (
    <section style={{ borderTop: '1px solid rgba(var(--a-fg-rgb),0.06)', borderBottom: '1px solid rgba(var(--a-fg-rgb),0.06)', padding: '40px 60px' }}>
      <div style={{ maxWidth: 1600, margin: '0 auto', display: 'grid', gridTemplateColumns: 'repeat(4,1fr)', gap: 0 }}>
        {stats.map((s, i) => (
          <div key={i} style={{ padding: '24px 32px', borderLeft: i>0 ? '1px solid rgba(var(--a-fg-rgb),0.06)' : 'none' }}>
            <div style={{ display: 'flex', alignItems: 'baseline', gap: 4 }}>
              <span style={{ ...aStyles.mono, fontSize: 48, fontWeight: 200, color: A_ACCENT, letterSpacing: -2 }}>{s.n}</span>
              {s.u && <span style={{ fontSize: 16, opacity: 0.5 }}>{s.u}</span>}
            </div>
            <div style={{ ...aStyles.mono, fontSize: 11, letterSpacing: 2, opacity: 0.5, marginTop: 6, textTransform: 'uppercase' }}>{s.l}</div>
          </div>
        ))}
      </div>
    </section>
  );
}

// ============ PRODUCT SHOWCASE ============
function ProductShowcaseA({ t, goto }) {
  const [activeCat, setActiveCat] = useState(0);
  const cats = [
    { key: 'cat_inline',  variant: 'inline',  items: [
      { code: 'ACT-U', nameKey: 'p_actu', subKey: 'p_actu_sub', id: 'act-u' },
      { code: 'ACT-P', nameKey: 'p_actp', subKey: 'p_actp_sub', id: 'act-p' },
    ]},
    { key: 'cat_offline', variant: 'desktop', items: [
      { code: 'ACT-V', nameKey: 'p_actv', subKey: 'p_actv_sub', id: 'act-v' },
      { code: 'ACT-LD4S', nameKey: 'p_actld', subKey: 'p_actld_sub', id: 'act-ld' },
    ]},
    { key: 'cat_desktop', variant: 'desktop', items: [
      { code: 'ACT-T', nameKey: 'p_actt', subKey: 'p_actt_sub', id: 'act-t' },
    ]},
    { key: 'cat_valve',   variant: 'valve',   items: [
      { code: 'ADJ', nameKey: 'tech_adj', subKey: 'tech_adj_desc', id: 'adj' },
    ]},
    { key: 'cat_uv',      variant: 'desktop', items: [
      { code: 'ACT-C', nameKey: 'p_actc', subKey: 'p_actc_sub', id: 'act-c' },
    ]},
    { key: 'cat_custom',  variant: 'inline',  items: [
      { code: 'GV', nameKey: 'p_gv', subKey: 'p_gv_sub', id: 'gv' },
    ]},
  ];
  const [activeItem, setActiveItem] = useState(0);
  const cat = cats[activeCat];
  const it = cat.items[Math.min(activeItem, cat.items.length - 1)];
  const [rot, setRot] = useState(-15);
  useEffect(() => {
    const id = setInterval(() => setRot(r => r + 0.2), 40);
    return () => clearInterval(id);
  }, []);
  return (
    <section style={{ padding: '120px 60px' }}>
      <div style={{ maxWidth: 1600, margin: '0 auto' }}>
        <div style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', marginBottom: 40 }}>
          <div>
            <div style={{ ...aStyles.mono, fontSize: 11, letterSpacing: 3, color: A_ACCENT, marginBottom: 16 }}>01 / PRODUCT LINE</div>
            <h2 style={{ fontSize: 56, fontWeight: 200, letterSpacing: -2, margin: 0 }}>{t('sec_product')}</h2>
            <p style={{ opacity: 0.5, fontSize: 16, marginTop: 12, maxWidth: 600 }}>{t('sec_product_sub')}</p>
          </div>
          <button onClick={() => goto('products')} style={{ background: 'transparent', color: A_ACCENT, border: `1px solid ${A_ACCENT}`, padding: '10px 20px', fontSize: 13, letterSpacing: 1, cursor: 'pointer', borderRadius: 2 }}>ALL PRODUCTS →</button>
        </div>

        {/* category tabs */}
        <div style={{ display: 'flex', gap: 0, borderBottom: '1px solid rgba(var(--a-fg-rgb),0.08)', marginBottom: 40, overflowX: 'auto' }}>
          {cats.map((c, i) => (
            <div key={i} onClick={() => { setActiveCat(i); setActiveItem(0); }} style={{
              padding: '14px 22px', cursor: 'pointer',
              borderBottom: activeCat === i ? `2px solid ${A_ACCENT}` : '2px solid transparent',
              marginBottom: -1,
              color: activeCat === i ? A_ACCENT : 'rgba(229,231,235,0.6)',
              transition: 'all 0.2s',
              whiteSpace: 'nowrap',
              display: 'flex', alignItems: 'center', gap: 10
            }}>
              <span style={{ ...aStyles.mono, fontSize: 10, letterSpacing: 2, opacity: 0.5 }}>{String(i+1).padStart(2,'0')}</span>
              <span style={{ fontSize: 14, fontWeight: 500 }}>{t(c.key)}</span>
              <span style={{ ...aStyles.mono, fontSize: 10, opacity: 0.4 }}>({c.items.length})</span>
            </div>
          ))}
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: '260px 1fr 300px', gap: 40, alignItems: 'stretch' }}>
          {/* left: item list within category */}
          <div>
            <div style={{ ...aStyles.mono, fontSize: 10, letterSpacing: 2, opacity: 0.4, marginBottom: 16 }}>MODELS IN {t(cat.key).toUpperCase()}</div>
            {cat.items.map((p, i) => (
              <div key={i} onClick={() => setActiveItem(i)} style={{
                padding: '18px 16px', borderLeft: activeItem === i ? `2px solid ${A_ACCENT}` : '2px solid rgba(var(--a-fg-rgb),0.06)',
                cursor: 'pointer',
                background: activeItem === i ? 'rgba(var(--a-tech-rgb),0.04)' : 'transparent',
                transition: 'all 0.25s'
              }}>
                <div style={{ ...aStyles.mono, fontSize: 10, letterSpacing: 2, opacity: 0.5 }}>{String(i+1).padStart(2,'0')}</div>
                <div style={{ fontSize: 18, fontWeight: 500, marginTop: 4, color: activeItem === i ? A_ACCENT : 'var(--a-fg)' }}>{p.code}</div>
                <div style={{ fontSize: 12, opacity: 0.6, marginTop: 4 }}>{t(p.nameKey)}</div>
              </div>
            ))}
          </div>

          {/* center: 3D */}
          <div style={{ position: 'relative', minHeight: 540, background: 'radial-gradient(ellipse at center, rgba(var(--a-tech-rgb),0.08), transparent 60%)', border: '1px solid rgba(var(--a-fg-rgb),0.06)', borderRadius: 4, display: 'flex', alignItems: 'center', justifyContent: 'center', overflow: 'hidden' }}>
            <div style={{ position: 'absolute', inset: 20, border: '1px dashed rgba(var(--a-fg-rgb),0.1)' }} />
            <div style={{ ...aStyles.mono, position: 'absolute', top: 20, left: 20, fontSize: 10, letterSpacing: 2, color: A_ACCENT, opacity: 0.7 }}>{it.code} · 3D MODEL · ROT {Math.round(rot)}°</div>
            <Machine3D rotation={rot} variant={cat.variant} tint="#60a5fa" scale={0.9} />
            <div style={{ ...aStyles.mono, position: 'absolute', bottom: 20, left: 20, fontSize: 10, letterSpacing: 2, opacity: 0.4, display: 'flex', gap: 20 }}>
              <span>PRECISION ±10μm</span>
              <span style={{ color: A_ACCENT }}>●</span>
              <span>STATUS ONLINE</span>
            </div>
          </div>

          {/* right: specs */}
          <div>
            <div style={{ fontSize: 32, fontWeight: 300, letterSpacing: -0.5, marginBottom: 8 }}>{t(it.nameKey)}</div>
            <div style={{ fontSize: 13, opacity: 0.6, marginBottom: 24, lineHeight: 1.6 }}>{t(it.subKey)}</div>
            {[
              ['TRAVEL', '460 × 460 × 80 mm'],
              ['PRECISION', '±10 μm'],
              ['SPEED', '200 Hz'],
              ['VISION', 'CCD + Teach'],
              ['POWER', '220V · 50/60Hz'],
            ].map(([k,v]) => (
              <div key={k} style={{ display: 'flex', justifyContent: 'space-between', padding: '12px 0', borderBottom: '1px solid rgba(var(--a-fg-rgb),0.06)' }}>
                <span style={{ ...aStyles.mono, fontSize: 10, letterSpacing: 2, opacity: 0.5 }}>{k}</span>
                <span style={{ ...aStyles.mono, fontSize: 12, color: 'var(--a-fg)' }}>{v}</span>
              </div>
            ))}
            <button onClick={() => goto('product', it.id)} style={{ marginTop: 24, width: '100%', background: A_ACCENT, color: '#07090c', border: 'none', padding: '14px 20px', fontSize: 13, fontWeight: 600, letterSpacing: 1, cursor: 'pointer', borderRadius: 2 }}>查看完整規格 →</button>
          </div>
        </div>
      </div>
    </section>
  );
}

// ============ TECH SECTION ============
function TechA({ t }) {
  return (
    <section style={{ padding: '120px 60px', background: 'linear-gradient(180deg, transparent, rgba(var(--a-tech-rgb),0.03))' }}>
      <div style={{ maxWidth: 1600, margin: '0 auto' }}>
        <div style={{ ...aStyles.mono, fontSize: 11, letterSpacing: 3, color: A_ACCENT, marginBottom: 16 }}>03 / CORE TECHNOLOGY</div>
        <h2 style={{ fontSize: 56, fontWeight: 200, letterSpacing: -2, margin: 0 }}>{t('sec_tech')}</h2>
        <p style={{ opacity: 0.5, fontSize: 16, marginTop: 12, maxWidth: 600 }}>{t('sec_tech_sub')}</p>

        <div style={{ marginTop: 60, display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 40 }}>
          <div>
            <PrecisionDashboard accent="#60a5fa" />
            <div style={{ marginTop: 40, padding: 24, border: '1px solid rgba(var(--a-fg-rgb),0.06)', borderRadius: 4 }}>
              <div style={{ ...aStyles.mono, fontSize: 11, letterSpacing: 2, color: A_ACCENT, marginBottom: 12 }}>LIVE · ACT-U #2183</div>
              <div style={{ display: 'grid', gridTemplateColumns: 'repeat(6,1fr)', gap: 4, marginBottom: 12 }}>
                {Array.from({length:24}).map((_,i) => (
                  <div key={i} style={{ height: 24, background: i<20 ? A_ACCENT : 'rgba(var(--a-fg-rgb),0.08)', opacity: i<20 ? 0.3 + (i/24)*0.7 : 1 }} />
                ))}
              </div>
              <div style={{ ...aStyles.mono, fontSize: 10, opacity: 0.5, display: 'flex', justifyContent: 'space-between' }}>
                <span>24 UNITS DEPLOYED</span>
                <span>UPTIME 99.98%</span>
              </div>
            </div>
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 20 }}>
            {[
              { k: 'tech_adj', d: 'tech_adj_desc', i: '01' },
              { k: 'tech_vision', d: 'tech_vision_desc', i: '02' },
              { k: 'tech_gantry', d: 'tech_gantry_desc', i: '03' },
            ].map(x => (
              <div key={x.i} style={{ padding: 28, border: '1px solid rgba(var(--a-fg-rgb),0.08)', borderRadius: 4, background: 'rgba(var(--a-fg-rgb),0.02)', display: 'grid', gridTemplateColumns: '40px 1fr', gap: 20 }}>
                <div style={{ ...aStyles.mono, fontSize: 32, fontWeight: 200, color: A_ACCENT, lineHeight: 1 }}>{x.i}</div>
                <div>
                  <div style={{ fontSize: 20, fontWeight: 500, marginBottom: 8 }}>{t(x.k)}</div>
                  <div style={{ fontSize: 13, opacity: 0.6, lineHeight: 1.7 }}>{t(x.d)}</div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

// ============ APPLY SECTION ============
function ApplyA({ t }) {
  return (
    <section style={{ padding: '120px 60px' }}>
      <div style={{ maxWidth: 1600, margin: '0 auto' }}>
        <div style={{ ...aStyles.mono, fontSize: 11, letterSpacing: 3, color: A_ACCENT, marginBottom: 16 }}>03 / APPLICATIONS</div>
        <h2 style={{ fontSize: 56, fontWeight: 200, letterSpacing: -2, margin: 0 }}>{t('sec_apply')}</h2>
        <p style={{ opacity: 0.5, fontSize: 16, marginTop: 12, maxWidth: 600 }}>{t('sec_apply_sub')}</p>

        <div style={{ marginTop: 60, display: 'grid', gridTemplateColumns: 'repeat(4,1fr)', gap: 16 }}>
          {APPLIES.map((a, i) => (
            <div key={a.id} style={{
              gridColumn: i===0 ? 'span 2' : 'span 1',
              gridRow: i===0 ? 'span 2' : 'span 1',
              minHeight: i===0 ? 400 : 200,
              position: 'relative',
              overflow: 'hidden',
              border: '1px solid rgba(var(--a-fg-rgb),0.08)',
              cursor: 'pointer',
              transition: 'all 0.3s'
            }} onMouseEnter={e => e.currentTarget.style.borderColor = A_ACCENT} onMouseLeave={e => e.currentTarget.style.borderColor = 'rgba(var(--a-fg-rgb),0.08)'}>
              <div style={{ position: 'absolute', inset: 0, backgroundImage: `url(${a.img})`, backgroundSize: 'cover', backgroundPosition: 'center', filter: 'grayscale(0.3) brightness(0.55) contrast(1.1)' }} />
              <div style={{ position: 'absolute', inset: 0, background: `linear-gradient(160deg, rgba(var(--a-media-rgb),0.3) 0%, rgba(var(--a-media-rgb),0.85) 70%, rgba(var(--a-media-rgb),0.95) 100%)` }} />
              <div style={{ position: 'absolute', inset: 0, background: `linear-gradient(180deg, transparent 40%, ${A_ACCENT}11 100%)` }} />
              <div style={{ position: 'relative', padding: 28, height: '100%', display: 'flex', flexDirection: 'column', justifyContent: 'space-between' }}>
                <div style={{ ...aStyles.mono, fontSize: 10, letterSpacing: 2, color: A_ACCENT, opacity: 0.9 }}>{String(i+1).padStart(2,'0')} / APPLICATION</div>
                <div>
                  <div style={{ fontSize: i===0 ? 36 : 22, fontWeight: 400, marginBottom: 12, color: 'var(--a-media-fg)', textShadow: '0 2px 20px rgba(0,0,0,0.6)' }}>{t(a.nameKey)}</div>
                  <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6 }}>
                    {a.cases.slice(0, i===0?4:2).map(c => (
                      <span key={c} style={{ ...aStyles.mono, fontSize: 10, letterSpacing: 1, padding: '4px 10px', border: '1px solid var(--a-media-line)', borderRadius: 12, background: 'rgba(var(--a-media-rgb),0.5)', backdropFilter: 'blur(6px)', color: 'var(--a-media-fg)' }}>{c}</span>
                    ))}
                  </div>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ============ CORE ADVANTAGES CAROUSEL ============
function ServiceA({ t }) {
  // Demo 內容（待業主提供實際文案與圖片）
  const slides = [
    { tag: 'ADVANTAGE 01', title: '核心優勢一', desc: '簡短文字敘述，待補上實際內容。' },
    { tag: 'ADVANTAGE 02', title: '核心優勢二', desc: '簡短文字敘述，待補上實際內容。' },
    { tag: 'ADVANTAGE 03', title: '核心優勢三', desc: '簡短文字敘述，待補上實際內容。' },
    { tag: 'ADVANTAGE 04', title: '核心優勢四', desc: '簡短文字敘述，待補上實際內容。' },
  ];
  const n = slides.length;
  const [idx, setIdx] = useState(0);
  const [paused, setPaused] = useState(false);
  const go = (d) => setIdx(i => (i + d + n) % n);
  useEffect(() => {
    if (paused) return;
    const id = setInterval(() => setIdx(i => (i + 1) % n), 5000);
    return () => clearInterval(id);
  }, [paused, n]);

  const arrowStyle = {
    width: 52, height: 52, borderRadius: '50%',
    border: '1px solid rgba(var(--a-fg-rgb),0.18)', background: 'rgba(var(--a-fg-rgb),0.03)',
    color: 'var(--a-fg)', cursor: 'pointer', fontSize: 18,
    display: 'flex', alignItems: 'center', justifyContent: 'center',
    flexShrink: 0, transition: 'all 0.2s',
  };

  return (
    <section style={{ padding: '120px 60px', position: 'relative', overflow: 'hidden' }}>
      <div style={{ position: 'absolute', inset: 0, background: `radial-gradient(ellipse at 20% 30%, ${A_ACCENT}14, transparent 55%)` }} />
      <div style={{ position: 'relative', maxWidth: 1600, margin: '0 auto' }}>
        {/* header */}
        <div style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', marginBottom: 48, flexWrap: 'wrap', gap: 20 }}>
          <div>
            <div style={{ ...aStyles.mono, fontSize: 11, letterSpacing: 3, color: A_ACCENT, marginBottom: 16, display: 'flex', alignItems: 'center', gap: 10 }}>
              <span style={{ display: 'inline-block', width: 32, height: 1, background: A_ACCENT }} />
              04 / CORE ADVANTAGES
            </div>
            <h2 style={{ fontSize: 56, fontWeight: 200, letterSpacing: -2, margin: 0, lineHeight: 1.1 }}>公司核心優勢</h2>
          </div>
          {/* arrows */}
          <div style={{ display: 'flex', gap: 12 }}>
            <button onClick={() => go(-1)}
              onMouseEnter={e => { e.currentTarget.style.borderColor = A_ACCENT; e.currentTarget.style.color = A_ACCENT; }}
              onMouseLeave={e => { e.currentTarget.style.borderColor = 'rgba(var(--a-fg-rgb),0.18)'; e.currentTarget.style.color = 'var(--a-fg)'; }}
              style={arrowStyle}>←</button>
            <button onClick={() => go(1)}
              onMouseEnter={e => { e.currentTarget.style.borderColor = A_ACCENT; e.currentTarget.style.color = A_ACCENT; }}
              onMouseLeave={e => { e.currentTarget.style.borderColor = 'rgba(var(--a-fg-rgb),0.18)'; e.currentTarget.style.color = 'var(--a-fg)'; }}
              style={arrowStyle}>→</button>
          </div>
        </div>

        {/* carousel viewport */}
        <div style={{ overflow: 'hidden' }}
             onMouseEnter={() => setPaused(true)} onMouseLeave={() => setPaused(false)}>
          <div style={{ display: 'flex', transform: `translateX(-${idx * 100}%)`, transition: 'transform 0.55s cubic-bezier(0.4,0,0.15,1)' }}>
            {slides.map((s, i) => (
              <div key={i} style={{ minWidth: '100%', boxSizing: 'border-box', paddingRight: 0 }}>
                {/* image placeholder */}
                <div style={{
                  position: 'relative', height: 460, overflow: 'hidden',
                  border: '1px solid rgba(var(--a-tech-rgb),0.2)', background: 'rgba(var(--a-tech-rgb),0.03)',
                  backgroundImage: `repeating-linear-gradient(45deg, rgba(var(--a-fg-rgb),0.04) 0 1px, transparent 1px 16px)`,
                  display: 'flex', alignItems: 'center', justifyContent: 'center'
                }}>
                  {/* hud corners */}
                  {['TL','TR','BL','BR'].map(c => {
                    const [v,h] = [c[0], c[1]];
                    return <div key={c} style={{ position: 'absolute', [v==='T'?'top':'bottom']: 14, [h==='L'?'left':'right']: 14, width: 16, height: 16, borderTop: v==='T'?`1px solid ${A_ACCENT}`:'none', borderBottom: v==='B'?`1px solid ${A_ACCENT}`:'none', borderLeft: h==='L'?`1px solid ${A_ACCENT}`:'none', borderRight: h==='R'?`1px solid ${A_ACCENT}`:'none' }} />;
                  })}
                  <div style={{ ...aStyles.mono, position: 'absolute', top: 22, left: 22, fontSize: 10, letterSpacing: 2, color: A_ACCENT, opacity: 0.8 }}>{s.tag}</div>
                  <div style={{ textAlign: 'center', opacity: 0.4 }}>
                    <div style={{ fontSize: 40, color: A_ACCENT, opacity: 0.5, marginBottom: 12 }}>◳</div>
                    <div style={{ ...aStyles.mono, fontSize: 11, letterSpacing: 3 }}>圖片待提供 · IMAGE {String(i+1).padStart(2,'0')}</div>
                  </div>
                </div>
                {/* text below */}
                <div style={{ marginTop: 28, maxWidth: 720 }}>
                  <div style={{ fontSize: 30, fontWeight: 400, letterSpacing: -0.5 }}>{s.title}</div>
                  <p style={{ opacity: 0.6, fontSize: 16, marginTop: 12, lineHeight: 1.8 }}>{s.desc}</p>
                </div>
              </div>
            ))}
          </div>
        </div>

        {/* dots + counter */}
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginTop: 32 }}>
          <div style={{ display: 'flex', gap: 10 }}>
            {slides.map((_, i) => (
              <button key={i} onClick={() => setIdx(i)} aria-label={`slide ${i+1}`} style={{
                width: i === idx ? 36 : 10, height: 10, borderRadius: 6, border: 'none', padding: 0,
                background: i === idx ? A_ACCENT : 'rgba(var(--a-fg-rgb),0.18)',
                cursor: 'pointer', transition: 'all 0.3s'
              }} />
            ))}
          </div>
          <div style={{ ...aStyles.mono, fontSize: 12, letterSpacing: 2, opacity: 0.5 }}>
            <span style={{ color: A_ACCENT }}>{String(idx+1).padStart(2,'0')}</span> / {String(n).padStart(2,'0')}
          </div>
        </div>
      </div>
    </section>
  );
}

// ============ NEWS ============
function NewsA({ t, goto }) {
  const items = [
    { cat: t('news_cat_product'), title: t('news_1_title'), date: t('news_1_date'), tint: A_ACCENT },
    { cat: t('news_cat_event'),   title: t('news_2_title'), date: t('news_2_date'), tint: '#a78bfa' },
    { cat: t('news_cat_news'),    title: t('news_3_title'), date: t('news_3_date'), tint: '#34d399' },
  ];
  return (
    <section style={{ padding: '120px 60px', borderTop: '1px solid rgba(var(--a-fg-rgb),0.06)' }}>
      <div style={{ maxWidth: 1600, margin: '0 auto' }}>
        <div style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', marginBottom: 48 }}>
          <div>
            <div style={{ ...aStyles.mono, fontSize: 11, letterSpacing: 3, color: A_ACCENT, marginBottom: 16 }}>05 / LATEST</div>
            <h2 style={{ fontSize: 56, fontWeight: 200, letterSpacing: -2, margin: 0 }}>{t('sec_news')}</h2>
            <p style={{ opacity: 0.5, fontSize: 16, marginTop: 12 }}>{t('sec_news_sub')}</p>
          </div>
          <button onClick={() => goto('news')} style={{ background: 'transparent', color: A_ACCENT, border: `1px solid ${A_ACCENT}`, padding: '10px 20px', fontSize: 13, letterSpacing: 1, cursor: 'pointer', borderRadius: 2 }}>{t('news_all')} →</button>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 24 }}>
          {items.map((n,i)=>(
            <div key={i} style={{ padding: 32, border: '1px solid rgba(var(--a-fg-rgb),0.08)', background: 'rgba(var(--a-fg-rgb),0.02)', cursor: 'pointer', transition: 'all 0.25s' }}
              onMouseEnter={e => { e.currentTarget.style.borderColor = n.tint; e.currentTarget.style.background = 'rgba(var(--a-fg-rgb),0.04)'; }}
              onMouseLeave={e => { e.currentTarget.style.borderColor = 'rgba(var(--a-fg-rgb),0.08)'; e.currentTarget.style.background = 'rgba(var(--a-fg-rgb),0.02)'; }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 28 }}>
                <span style={{ ...aStyles.mono, fontSize: 10, letterSpacing: 2, padding: '4px 10px', border: `1px solid ${n.tint}`, color: n.tint }}>{n.cat.toUpperCase()}</span>
                <span style={{ ...aStyles.mono, fontSize: 11, opacity: 0.5 }}>{n.date}</span>
              </div>
              <div style={{ fontSize: 19, fontWeight: 400, lineHeight: 1.5, minHeight: 90 }}>{n.title}</div>
              <div style={{ ...aStyles.mono, fontSize: 11, letterSpacing: 2, color: n.tint, marginTop: 28, opacity: 0.8 }}>READ MORE →</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ============ APPLY QUICK ============
function ApplyQuickA({ t }) {
  const items = [
    { k: 'ap_smt', icon: '◫' }, { k: 'ap_semi', icon: '⊞' }, { k: 'ap_auto', icon: '◉' },
    { k: 'ap_medical', icon: '✚' }, { k: 'ap_mobile', icon: '▯' }, { k: 'ap_led', icon: '✦' },
  ];
  return (
    <section style={{ padding: '100px 60px', borderTop: '1px solid rgba(var(--a-fg-rgb),0.06)' }}>
      <div style={{ maxWidth: 1600, margin: '0 auto', display: 'grid', gridTemplateColumns: '1fr 2fr', gap: 60, alignItems: 'center' }}>
        <div>
          <div style={{ ...aStyles.mono, fontSize: 11, letterSpacing: 3, color: A_ACCENT, marginBottom: 16 }}>06 / APPLICATIONS</div>
          <h2 style={{ fontSize: 40, fontWeight: 300, letterSpacing: -1, margin: 0, lineHeight: 1.15 }}>{t('apply_quick_title')}</h2>
          <p style={{ opacity: 0.55, fontSize: 15, marginTop: 16, lineHeight: 1.7 }}>{t('apply_quick_sub')}</p>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 12 }}>
          {items.map((a,i)=>(
            <div key={i} style={{ padding: '22px 20px', border: '1px solid rgba(var(--a-fg-rgb),0.08)', display: 'flex', alignItems: 'center', gap: 14, cursor: 'pointer', transition: 'all 0.2s' }}
              onMouseEnter={e => { e.currentTarget.style.borderColor = A_ACCENT; e.currentTarget.style.background = 'rgba(var(--a-tech-rgb),0.04)'; }}
              onMouseLeave={e => { e.currentTarget.style.borderColor = 'rgba(var(--a-fg-rgb),0.08)'; e.currentTarget.style.background = 'transparent'; }}>
              <span style={{ fontSize: 22, color: A_ACCENT, opacity: 0.7 }}>{a.icon}</span>
              <span style={{ fontSize: 14, fontWeight: 500 }}>{t(a.k)}</span>
              <span style={{ marginLeft: 'auto', ...aStyles.mono, fontSize: 10, opacity: 0.4 }}>→</span>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ============ CTA ============
function CTAa({ t }) {
  return (
    <section style={{ padding: '120px 60px', position: 'relative', overflow: 'hidden' }}>
      <div style={{ position: 'absolute', inset: 0, background: `radial-gradient(circle at 70% 50%, ${A_ACCENT}22, transparent 60%)` }} />
      <div style={{ position: 'relative', maxWidth: 1200, margin: '0 auto', textAlign: 'center', padding: '80px 40px', border: '1px solid rgba(var(--a-tech-rgb),0.2)', background: 'rgba(var(--a-tech-rgb),0.03)' }}>
        <div style={{ ...aStyles.mono, fontSize: 11, letterSpacing: 3, color: A_ACCENT, marginBottom: 20 }}>/ READY TO START</div>
        <h2 style={{ fontSize: 56, fontWeight: 200, letterSpacing: -2, margin: 0 }}>{t('cta_title')}</h2>
        <p style={{ opacity: 0.6, fontSize: 16, marginTop: 16 }}>{t('cta_sub')}</p>
        <button style={{ marginTop: 40, background: A_ACCENT, color: '#07090c', border: 'none', padding: '18px 40px', fontSize: 14, fontWeight: 600, letterSpacing: 1, cursor: 'pointer', borderRadius: 2 }}>{t('cta_button')} →</button>
      </div>
    </section>
  );
}

// ============ FOOTER ============
function FooterA({ t }) {
  return (
    <footer style={{ borderTop: '1px solid rgba(var(--a-fg-rgb),0.06)', padding: '60px 60px 30px' }}>
      <div style={{ maxWidth: 1600, margin: '0 auto', display: 'grid', gridTemplateColumns: '2fr 1fr 1fr 1fr', gap: 40 }}>
        <div>
          <img src="logo-original.png" alt="稼動科技 ACT" style={{ height: 56, filter: 'var(--a-logo-filter)' }} />
          <div style={{ ...aStyles.mono, fontSize: 11, letterSpacing: 2, opacity: 0.5, marginTop: 14 }}>稼動科技股份有限公司 · ACTIVATION CO., LTD.</div>
          <div style={{ marginTop: 16, fontSize: 13, opacity: 0.6, lineHeight: 1.8 }}>
            {t('foot_addr')}<br />
            T. {t('foot_phone')}
          </div>
        </div>
        {[
          [t('nav_product'), [t('cat_inline'), t('cat_offline'), t('cat_desktop'), t('cat_valve')]],
          [t('nav_apply'), [t('ap_smt'), t('ap_semi'), t('ap_auto'), t('ap_medical')]],
          ['', [t('nav_about'), t('nav_news'), t('nav_service')]],
        ].map(([title, items], i) => (
          <div key={i}>
            {title && <div style={{ ...aStyles.mono, fontSize: 11, letterSpacing: 2, color: A_ACCENT, marginBottom: 16 }}>{title}</div>}
            {!title && <div style={{ height: 27 }} />}
            {items.map(x => (
              <div key={x} style={{ fontSize: 13, opacity: 0.6, padding: '6px 0', cursor: 'pointer' }}>{x}</div>
            ))}
          </div>
        ))}
      </div>
      <div style={{ maxWidth: 1600, margin: '60px auto 0', paddingTop: 20, borderTop: '1px solid rgba(var(--a-fg-rgb),0.06)', display: 'flex', justifyContent: 'space-between', ...aStyles.mono, fontSize: 10, letterSpacing: 2, opacity: 0.4 }}>
        <span>© 2026 {t('foot_rights')}</span>
        <span>ISO 9001 · CE · MADE IN TAIWAN</span>
      </div>
    </footer>
  );
}

// ============ PRODUCT LIST PAGE ============
function ProductListA({ t, goto }) {
  const [cat, setCat] = useState('all');
  const cats = [
    { id: 'all', name: '全部 ALL' },
    { id: 'inline', name: t('cat_inline') },
    { id: 'offline', name: t('cat_offline') },
    { id: 'desktop', name: t('cat_desktop') },
    { id: 'custom', name: t('cat_custom') },
  ];
  const filtered = cat==='all' ? PRODUCTS : PRODUCTS.filter(p => p.cat === cat);
  return (
    <section style={{ paddingTop: 120, paddingBottom: 80 }}>
      <div style={{ maxWidth: 1600, margin: '0 auto', padding: '0 60px' }}>
        <div style={{ ...aStyles.mono, fontSize: 11, letterSpacing: 3, color: A_ACCENT, marginBottom: 16 }}>/ PRODUCTS</div>
        <h1 style={{ fontSize: 64, fontWeight: 200, letterSpacing: -2, margin: 0 }}>{t('sec_product')}</h1>
        <p style={{ opacity: 0.5, fontSize: 16, marginTop: 12 }}>{t('sec_product_sub')}</p>

        <div style={{ display: 'flex', gap: 2, marginTop: 48, borderBottom: '1px solid rgba(var(--a-fg-rgb),0.08)' }}>
          {cats.map(c => (
            <button key={c.id} onClick={() => setCat(c.id)} style={{
              background: 'transparent', color: cat===c.id ? A_ACCENT : 'var(--a-fg)',
              border: 'none', borderBottom: cat===c.id ? `2px solid ${A_ACCENT}` : '2px solid transparent',
              marginBottom: -1, padding: '12px 20px', fontSize: 13, letterSpacing: 1, cursor: 'pointer',
              ...aStyles.mono
            }}>{c.name}</button>
          ))}
        </div>

        <div style={{ marginTop: 40, display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 20 }}>
          {filtered.map(p => (
            <div key={p.id} onClick={() => goto('product', p.id)} style={{
              padding: 28,
              border: '1px solid rgba(var(--a-fg-rgb),0.08)',
              background: 'rgba(var(--a-fg-rgb),0.02)',
              cursor: 'pointer',
              transition: 'all 0.25s',
              position: 'relative',
              overflow: 'hidden'
            }} onMouseEnter={e => { e.currentTarget.style.borderColor = A_ACCENT; e.currentTarget.style.background = 'rgba(var(--a-tech-rgb),0.05)'; }}
               onMouseLeave={e => { e.currentTarget.style.borderColor = 'rgba(var(--a-fg-rgb),0.08)'; e.currentTarget.style.background = 'rgba(var(--a-fg-rgb),0.02)'; }}>
              <div style={{ height: 180, background: 'radial-gradient(ellipse at center, rgba(var(--a-tech-rgb),0.08), transparent 70%)', borderBottom: '1px solid rgba(var(--a-fg-rgb),0.06)', marginLeft: -28, marginRight: -28, marginTop: -28, marginBottom: 20, display: 'flex', alignItems: 'center', justifyContent: 'center', position: 'relative' }}>
                <div style={{ transform: 'scale(0.5)' }}>
                  <Machine3D rotation={-20} variant={p.cat==='offline' || p.cat==='desktop' ? 'desktop' : 'inline'} tint="#60a5fa" />
                </div>
              </div>
              <div style={{ ...aStyles.mono, fontSize: 10, letterSpacing: 2, color: A_ACCENT, opacity: 0.7 }}>{p.code}</div>
              <div style={{ fontSize: 22, fontWeight: 500, marginTop: 4 }}>{t(p.nameKey)}</div>
              <div style={{ fontSize: 13, opacity: 0.6, marginTop: 8, lineHeight: 1.6, height: 60 }}>{p.desc}</div>
              <div style={{ marginTop: 20, paddingTop: 16, borderTop: '1px solid rgba(var(--a-fg-rgb),0.06)', display: 'flex', justifyContent: 'space-between', ...aStyles.mono, fontSize: 10, letterSpacing: 1 }}>
                <span><span style={{ opacity: 0.4 }}>PREC</span> <span style={{ color: A_ACCENT }}>{p.precision}</span></span>
                <span><span style={{ opacity: 0.4 }}>SPD</span> <span style={{ color: A_ACCENT }}>{p.speed}</span></span>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ============ PRODUCT DETAIL ============
function ProductDetailA({ t, goto, productId }) {
  const p = PRODUCTS.find(x => x.id === productId) || PRODUCTS[0];
  const variant = p.cat==='offline' || p.cat==='desktop' ? 'desktop' : p.id==='adj' ? 'valve' : 'inline';
  const views = [
    { rot: -20, label: 'FRONT 3/4' },
    { rot: 20,  label: 'REAR 3/4' },
    { rot: 0,   label: 'FRONT' },
    { rot: 90,  label: 'SIDE' },
  ];
  const [view, setView] = useState(0);
  return (
    <section style={{ paddingTop: 100 }}>
      <div style={{ maxWidth: 1600, margin: '0 auto', padding: '20px 60px', ...aStyles.mono, fontSize: 11, letterSpacing: 2, opacity: 0.5 }}>
        <span style={{ cursor: 'pointer' }} onClick={() => goto('home')}>HOME</span> / <span style={{ cursor: 'pointer' }} onClick={() => goto('products')}>PRODUCTS</span> / <span style={{ color: A_ACCENT }}>{p.code}</span>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', minHeight: 'calc(100vh - 100px)', borderTop: '1px solid rgba(var(--a-fg-rgb),0.06)' }}>
        {/* Left: visual carousel (static views) */}
        <div style={{ position: 'relative', background: 'radial-gradient(ellipse at center, rgba(var(--a-tech-rgb),0.08), transparent 70%)', display: 'flex', alignItems: 'center', justifyContent: 'center', minHeight: 600 }}>
          <div style={{ position: 'absolute', inset: 40, border: '1px dashed rgba(var(--a-fg-rgb),0.1)' }} />
          <div style={{ ...aStyles.mono, position: 'absolute', top: 40, left: 40, fontSize: 10, letterSpacing: 2, color: A_ACCENT }}>{p.code} · {views[view].label}</div>

          {/* prev / next arrows */}
          <button onClick={() => setView(v => (v - 1 + views.length) % views.length)} style={{ position: 'absolute', left: 24, top: '50%', transform: 'translateY(-50%)', width: 44, height: 44, border: '1px solid rgba(var(--a-fg-rgb),0.15)', background: 'rgba(var(--a-bg-rgb),0.6)', color: 'var(--a-fg)', cursor: 'pointer', borderRadius: 2, fontSize: 16, zIndex: 2 }}>‹</button>
          <button onClick={() => setView(v => (v + 1) % views.length)} style={{ position: 'absolute', right: 24, top: '50%', transform: 'translateY(-50%)', width: 44, height: 44, border: '1px solid rgba(var(--a-fg-rgb),0.15)', background: 'rgba(var(--a-bg-rgb),0.6)', color: 'var(--a-fg)', cursor: 'pointer', borderRadius: 2, fontSize: 16, zIndex: 2 }}>›</button>

          <Machine3D rotation={views[view].rot} variant={variant} tint="#60a5fa" />

          {/* thumbnail buttons (01-04) */}
          <div style={{ ...aStyles.mono, position: 'absolute', bottom: 40, left: '50%', transform: 'translateX(-50%)', fontSize: 10, letterSpacing: 2, display: 'flex', gap: 12, zIndex: 2 }}>
            {views.map((vw, i) => (
              <button key={i} onClick={() => setView(i)} style={{ padding: '8px 12px', border: '1px solid', borderColor: i===view ? A_ACCENT : 'rgba(var(--a-fg-rgb),0.15)', background: i===view ? 'rgba(var(--a-tech-rgb),0.12)' : 'transparent', color: i===view ? A_ACCENT : 'var(--a-fg)', cursor: 'pointer', borderRadius: 2, letterSpacing: 2 }}>{String(i+1).padStart(2,'0')}</button>
            ))}
          </div>
        </div>

        {/* Right: info */}
        <div style={{ padding: '60px 60px', borderLeft: '1px solid rgba(var(--a-fg-rgb),0.06)' }}>
          <div style={{ ...aStyles.mono, fontSize: 11, letterSpacing: 3, color: A_ACCENT }}>{p.code} SERIES</div>
          <h1 style={{ fontSize: 48, fontWeight: 300, letterSpacing: -1, margin: '12px 0 16px' }}>{t(p.nameKey)}</h1>
          <p style={{ fontSize: 15, opacity: 0.6, lineHeight: 1.7 }}>{p.desc}</p>

          <div style={{ marginTop: 40 }}>
            <div style={{ ...aStyles.mono, fontSize: 11, letterSpacing: 2, color: A_ACCENT, marginBottom: 16 }}>{t('pd_specs').toUpperCase()}</div>
            {[
              [t('pd_spec_travel'), p.travel],
              [t('pd_spec_precision'), p.precision],
              [t('pd_spec_speed'), p.speed],
              [t('pd_spec_valve'), 'ADJ / JD-511 / JD-610 / JD-720'],
              [t('pd_spec_vision'), 'CCD + Auto Teach'],
              [t('pd_spec_power'), '220V · 50/60Hz · 1.5kW'],
            ].map(([k,v]) => (
              <div key={k} style={{ display: 'grid', gridTemplateColumns: '180px 1fr', padding: '16px 0', borderBottom: '1px solid rgba(var(--a-fg-rgb),0.06)' }}>
                <span style={{ ...aStyles.mono, fontSize: 11, letterSpacing: 1, opacity: 0.5, textTransform: 'uppercase' }}>{k}</span>
                <span style={{ ...aStyles.mono, fontSize: 13 }}>{v}</span>
              </div>
            ))}
          </div>

          <div style={{ marginTop: 40 }}>
            <div style={{ ...aStyles.mono, fontSize: 11, letterSpacing: 2, color: A_ACCENT, marginBottom: 16 }}>{t('pd_features').toUpperCase()}</div>
            {['ADJ 高速噴射閥 · 200Hz 非接觸式點膠','CCD 視覺自動補償 · 良率 99.7%','Windows 10 IPC · 遠端監控','模組化設計 · 快速換線'].map((f,i) => (
              <div key={i} style={{ display: 'flex', gap: 12, padding: '10px 0' }}>
                <span style={{ ...aStyles.mono, fontSize: 10, color: A_ACCENT, opacity: 0.7 }}>{String(i+1).padStart(2,'0')}</span>
                <span style={{ fontSize: 14, opacity: 0.8 }}>{f}</span>
              </div>
            ))}
          </div>

          <div style={{ display: 'flex', gap: 12, marginTop: 40 }}>
            <button style={{ flex: 1, background: A_ACCENT, color: '#07090c', border: 'none', padding: '18px 24px', fontSize: 14, fontWeight: 600, letterSpacing: 1, cursor: 'pointer', borderRadius: 2 }}>{t('pd_inquire')} →</button>
          </div>
        </div>
      </div>
    </section>
  );
}

// ============ APPLICATIONS DATA ============
// 七大應用領域 — 資料整理自 jd-act.com/apply，重新分組呈現
const APPLICATIONS = [
  { id: 'smt', no: '01', img: 'https://images.unsplash.com/photo-1518770660439-4636190af475?w=1400&q=80', series: 'act-u',
    name: { 'zh-TW': 'SMT & PCB 組裝', 'en': 'SMT & PCB Assembly', 'zh-CN': 'SMT & PCB 组装' },
    desc: { 'zh-TW': '表面黏著製程的點膠核心 — 從底部填充、引腳包封到晶片散熱與錫膏塗佈，覆蓋板級組裝每一道塗佈需求。', 'en': 'The dispensing core of surface-mount assembly — from underfill and lead encapsulation to chip thermal and solder paste.', 'zh-CN': '表面贴装制程的点胶核心 — 从底部填充、引脚包封到芯片散热与锡膏涂布，覆盖板级组装每一道涂布需求。' },
    items: [
      { en: 'Underfill', 'zh-TW': '底部填充', 'zh-CN': '底部填充' },
      { en: 'Encapsulation', 'zh-TW': '元器件 / 引腳包封', 'zh-CN': '元器件 / 引脚包封' },
      { en: 'Chip Thermal', 'zh-TW': '晶片散熱', 'zh-CN': '芯片散热' },
      { en: 'Solder Paste', 'zh-TW': '錫膏', 'zh-CN': '锡膏' },
    ] },
  { id: 'module', no: '02', img: 'https://images.unsplash.com/photo-1580927752452-89d86da3fa0a?w=1400&q=80', series: 'act-v',
    name: { 'zh-TW': '光學 / 感測模組', 'en': 'Optical / Sensor Module', 'zh-CN': '光学 / 传感模组' },
    desc: { 'zh-TW': '鏡頭與感測模組對位精度要求極高，微量、穩定的點膠是模組良率的關鍵。', 'en': 'Camera and sensor modules demand extreme alignment precision — micro-volume, stable dispensing is key to module yield.', 'zh-CN': '镜头与传感模组对位精度要求极高，微量、稳定的点胶是模组良率的关键。' },
    items: [
      { en: 'VCM', 'zh-TW': 'VCM 音圈馬達', 'zh-CN': 'VCM 音圈马达' },
      { en: 'CCM', 'zh-TW': 'CCM 相機模組', 'zh-CN': 'CCM 相机模组' },
      { en: 'MEMS', 'zh-TW': '矽麥克 MEMS', 'zh-CN': '硅麦克 MEMS' },
    ] },
  { id: 'mobile', no: '03', img: 'https://images.unsplash.com/photo-1511707171634-5f897ff02aa9?w=1400&q=80', series: 'act-v',
    name: { 'zh-TW': '手機 / 手錶組裝', 'en': 'Phone / Watch Assembly', 'zh-CN': '手机 / 手表组装' },
    desc: { 'zh-TW': '消費性裝置的精密貼合 — 螢幕封邊與連接埠防水點膠，兼顧外觀與可靠度。', 'en': 'Precision bonding for consumer devices — screen sealing and port waterproofing balance aesthetics with reliability.', 'zh-CN': '消费性装置的精密贴合 — 屏幕封边与连接埠防水点胶，兼顾外观与可靠度。' },
    items: [
      { en: 'Screen Bonding', 'zh-TW': '屏幕點膠', 'zh-CN': '屏幕点胶' },
      { en: 'Type-C', 'zh-TW': 'Type-C 連接埠', 'zh-CN': 'Type-C 连接埠' },
    ] },
  { id: 'auto', no: '04', img: 'https://images.unsplash.com/photo-1558980664-10e7170b5df9?w=1400&q=80', series: 'act-c',
    name: { 'zh-TW': '車用電子', 'en': 'Automotive Electronics', 'zh-CN': '车用电子' },
    desc: { 'zh-TW': '車規級可靠度要求 — 元器件加固、密封與三防保護，承受嚴苛的震動與溫濕環境。', 'en': 'Automotive-grade reliability — component reinforcement, sealing and conformal coating endure harsh vibration and climate.', 'zh-CN': '车规级可靠度要求 — 元器件加固、密封与三防保护，承受严苛的震动与温湿环境。' },
    items: [
      { en: 'RTV Reinforce', 'zh-TW': 'RTV 元器件加固', 'zh-CN': 'RTV 元器件加固' },
      { en: 'Engine Sealing', 'zh-TW': '缸蓋 / 水箱密封', 'zh-CN': '缸盖 / 水箱密封' },
      { en: 'PCB Coating', 'zh-TW': 'PCB 板 Coating', 'zh-CN': 'PCB 板 Coating' },
    ] },
  { id: 'semi', no: '05', img: 'https://images.unsplash.com/photo-1631624215749-b10b3dd7bca7?w=1400&q=80', series: 'act-u',
    name: { 'zh-TW': '半導體封裝', 'en': 'Semiconductor Packaging', 'zh-CN': '半导体封装' },
    desc: { 'zh-TW': '先進封裝的高端製程 — 晶片級底填、壩填與球頂保護，微米級膠量控制決定封裝品質。', 'en': 'High-end advanced packaging — chip-level underfill, dam & fill and glob top, where micron-level volume control defines quality.', 'zh-CN': '先进封装的高端制程 — 芯片级底填、坝填与球顶保护，微米级胶量控制决定封装品质。' },
    items: [
      { en: 'Chip Underfill', 'zh-TW': '晶片級底部填充', 'zh-CN': '芯片级底部填充' },
      { en: 'Dam & Fill', 'zh-TW': 'Dam & Fill', 'zh-CN': 'Dam & Fill' },
      { en: 'No-flow Underfill', 'zh-TW': 'No-flow Underfill', 'zh-CN': 'No-flow Underfill' },
      { en: 'Glob Top', 'zh-TW': 'Glob Top', 'zh-CN': 'Glob Top' },
      { en: 'Silver Paste', 'zh-TW': '銀漿', 'zh-CN': '银浆' },
    ] },
  { id: 'led', no: '06', img: 'https://images.unsplash.com/photo-1550751827-4bd374c3f58b?w=1400&q=80', series: 'gv',
    name: { 'zh-TW': 'Micro / Mini LED', 'en': 'Micro / Mini LED', 'zh-CN': 'Micro / Mini LED' },
    desc: { 'zh-TW': '次世代顯示的海量微點 — 巨量轉移後的固晶與封裝點膠，搭配視覺檢測確保一致性。', 'en': 'Massive micro-dots for next-gen displays — die-bond and encapsulation after mass transfer, paired with vision inspection.', 'zh-CN': '次世代显示的海量微点 — 巨量转移后的固晶与封装点胶，搭配视觉检测确保一致性。' },
    items: [
      { en: 'Micro LED', 'zh-TW': 'Micro LED', 'zh-CN': 'Micro LED' },
      { en: 'Mini LED', 'zh-TW': 'Mini LED', 'zh-CN': 'Mini LED' },
    ] },
  { id: 'medical', no: '07', img: 'https://images.unsplash.com/photo-1576091160399-112ba8d25d1d?w=1400&q=80', series: 'act-v',
    name: { 'zh-TW': '醫療檢測', 'en': 'Medical Diagnostics', 'zh-CN': '医疗检测' },
    desc: { 'zh-TW': '生醫耗材的精準塗佈 — 試紙試劑的微量定量點膠，直接影響檢測準確度。', 'en': 'Precise coating for biomedical consumables — micro-volume reagent dispensing on test strips directly affects accuracy.', 'zh-CN': '生医耗材的精准涂布 — 试纸试剂的微量定量点胶，直接影响检测准确度。' },
    items: [
      { en: 'Glucose Strip', 'zh-TW': '血糖試紙', 'zh-CN': '血糖试纸' },
    ] },
];

const APPLY_UI = {
  'zh-TW': { eyebrow: 'APPLICATIONS', title: '應用領域', lede: '一滴膠，貫穿每一道工序。從消費電子到半導體、車用與醫療，稼動的點膠方案覆蓋七大應用領域。', home: '首頁', domains: '應用領域', subapps: '細分應用', recommend: '推薦機種', view: '查看機種', count: '項' },
  'en': { eyebrow: 'APPLICATIONS', title: 'Applications', lede: 'One drop, through every process. From consumer electronics to semiconductor, automotive and medical — ACT covers seven application domains.', home: 'Home', domains: 'Domains', subapps: 'Sub-applications', recommend: 'Recommended', view: 'View series', count: 'apps' },
  'zh-CN': { eyebrow: 'APPLICATIONS', title: '应用领域', lede: '一滴胶，贯穿每一道工序。从消费电子到半导体、车用与医疗，稼动的点胶方案覆盖七大应用领域。', home: '首页', domains: '应用领域', subapps: '细分应用', recommend: '推荐机种', view: '查看机种', count: '项' },
};

function ApplyPageA({ t, goto, lang }) {
  const [active, setActive] = useState(0);
  const ui = APPLY_UI[lang] || APPLY_UI['zh-TW'];
  const L = (obj) => obj[lang] || obj['zh-TW'];
  const d = APPLICATIONS[active];
  const series = PRODUCTS.find(p => p.id === d.series);

  return (
    <section style={{ paddingTop: 80, position: 'relative', overflow: 'hidden' }}>
      {/* banner */}
      <div style={{ position: 'relative', padding: '90px 60px 70px', borderBottom: '1px solid rgba(var(--a-fg-rgb),0.06)', overflow: 'hidden' }}>
        <div style={{ position: 'absolute', inset: 0, backgroundImage: `linear-gradient(rgba(var(--a-tech-rgb),0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(var(--a-tech-rgb),0.04) 1px, transparent 1px)`, backgroundSize: '60px 60px', maskImage: 'radial-gradient(ellipse at 30% center, black 10%, transparent 70%)' }} />
        <div style={{ position: 'absolute', top: '20%', left: '70%', width: 500, height: 500, background: `radial-gradient(circle, ${A_ACCENT}1f, transparent 60%)`, filter: 'blur(40px)' }} />
        <div style={{ position: 'relative', maxWidth: 1600, margin: '0 auto' }}>
          <div style={{ ...aStyles.mono, fontSize: 11, letterSpacing: 4, color: A_ACCENT, marginBottom: 20, display: 'flex', alignItems: 'center', gap: 12 }}>
            <span style={{ display: 'inline-block', width: 32, height: 1, background: A_ACCENT }} />
            {ui.eyebrow}
          </div>
          <h1 style={{ fontSize: 72, fontWeight: 200, letterSpacing: -2, margin: 0, lineHeight: 1 }}>{ui.title}</h1>
          <p style={{ opacity: 0.6, fontSize: 16, marginTop: 22, maxWidth: 620, lineHeight: 1.8 }}>{ui.lede}</p>
          <div style={{ ...aStyles.mono, fontSize: 11, letterSpacing: 2, opacity: 0.5, marginTop: 28, display: 'flex', gap: 8, alignItems: 'center' }}>
            <span style={{ cursor: 'pointer' }} onClick={() => goto('home')}>{ui.home}</span>
            <span style={{ opacity: 0.4 }}>/</span>
            <span style={{ color: A_ACCENT }}>{ui.title}</span>
          </div>
        </div>
      </div>

      {/* explorer */}
      <div style={{ position: 'relative', maxWidth: 1600, margin: '0 auto', padding: '70px 60px 120px', display: 'grid', gridTemplateColumns: '300px 1fr', gap: 56, alignItems: 'start' }}>
        {/* left rail: domains */}
        <div>
          <div style={{ ...aStyles.mono, fontSize: 10, letterSpacing: 2, opacity: 0.4, marginBottom: 18, textTransform: 'uppercase' }}>{ui.domains} · 07</div>
          <div style={{ display: 'flex', flexDirection: 'column' }}>
            {APPLICATIONS.map((a, i) => (
              <div key={a.id} onClick={() => setActive(i)} style={{
                display: 'flex', alignItems: 'center', gap: 16, padding: '18px 18px', cursor: 'pointer',
                borderLeft: active === i ? `2px solid ${A_ACCENT}` : '2px solid rgba(var(--a-fg-rgb),0.08)',
                background: active === i ? 'rgba(var(--a-tech-rgb),0.05)' : 'transparent',
                transition: 'all 0.25s',
              }}>
                <span style={{ ...aStyles.mono, fontSize: 11, letterSpacing: 1, color: active === i ? A_ACCENT : 'rgba(var(--a-fg-rgb),0.45)' }}>{a.no}</span>
                <span style={{ fontSize: 15, fontWeight: active === i ? 600 : 400, color: active === i ? 'var(--a-fg)' : 'rgba(var(--a-fg-rgb),0.7)', flex: 1 }}>{L(a.name)}</span>
                <span style={{ ...aStyles.mono, fontSize: 10, opacity: 0.4 }}>{a.items.length}</span>
              </div>
            ))}
          </div>
        </div>

        {/* right: domain detail */}
        <div>
          {/* visual banner */}
          <div style={{ position: 'relative', height: 340, overflow: 'hidden', border: '1px solid rgba(var(--a-tech-rgb),0.18)' }}>
            <img src={d.img} alt={L(d.name)} style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', filter: 'grayscale(0.45) brightness(0.5) contrast(1.12)' }} />
            <div style={{ position: 'absolute', inset: 0, background: `linear-gradient(150deg, rgba(var(--a-media-rgb),0.35) 0%, rgba(var(--a-media-rgb),0.88) 75%), linear-gradient(0deg, ${A_ACCENT}14, transparent 50%)` }} />
            {['TL','TR','BL','BR'].map(c => { const [v,h]=[c[0],c[1]]; return <div key={c} style={{ position: 'absolute', [v==='T'?'top':'bottom']: 14, [h==='L'?'left':'right']: 14, width: 16, height: 16, borderTop: v==='T'?`1px solid ${A_ACCENT}`:'none', borderBottom: v==='B'?`1px solid ${A_ACCENT}`:'none', borderLeft: h==='L'?`1px solid ${A_ACCENT}`:'none', borderRight: h==='R'?`1px solid ${A_ACCENT}`:'none' }} />; })}
            <div style={{ ...aStyles.mono, position: 'absolute', top: 22, left: 24, fontSize: 10, letterSpacing: 3, color: A_ACCENT, opacity: 0.9 }}>{d.no} / DOMAIN</div>
            <div style={{ position: 'absolute', left: 24, right: 24, bottom: 26 }}>
              <div style={{ fontSize: 40, fontWeight: 400, letterSpacing: -1, color: 'var(--a-media-fg)', textShadow: '0 2px 24px rgba(0,0,0,0.6)' }}>{L(d.name)}</div>
            </div>
          </div>

          {/* description */}
          <p style={{ fontSize: 17, opacity: 0.7, lineHeight: 1.85, marginTop: 28, maxWidth: 760 }}>{L(d.desc)}</p>

          {/* sub-applications */}
          <div style={{ ...aStyles.mono, fontSize: 10, letterSpacing: 2, opacity: 0.45, margin: '40px 0 18px', textTransform: 'uppercase' }}>{ui.subapps} · {d.items.length} {ui.count}</div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 14 }}>
            {d.items.map((it, i) => (
              <div key={i} style={{
                padding: '22px 20px', border: '1px solid rgba(var(--a-fg-rgb),0.1)', background: 'rgba(var(--a-fg-rgb),0.02)',
                transition: 'all 0.2s', cursor: 'default', display: 'flex', flexDirection: 'column', gap: 10, minHeight: 96,
              }}
                onMouseEnter={e => { e.currentTarget.style.borderColor = A_ACCENT; e.currentTarget.style.background = 'rgba(var(--a-tech-rgb),0.05)'; }}
                onMouseLeave={e => { e.currentTarget.style.borderColor = 'rgba(var(--a-fg-rgb),0.1)'; e.currentTarget.style.background = 'rgba(var(--a-fg-rgb),0.02)'; }}>
                <span style={{ ...aStyles.mono, fontSize: 10, letterSpacing: 2, color: A_ACCENT, opacity: 0.7 }}>{String(i+1).padStart(2,'0')}</span>
                <span style={{ fontSize: 16, fontWeight: 500, lineHeight: 1.3 }}>{L(it)}</span>
                <span style={{ ...aStyles.mono, fontSize: 10, letterSpacing: 1, opacity: 0.4, marginTop: 'auto' }}>{it.en}</span>
              </div>
            ))}
          </div>

          {/* recommended series */}
          {series && (
            <div style={{ marginTop: 32, padding: '24px 28px', border: '1px solid rgba(var(--a-tech-rgb),0.2)', background: 'rgba(var(--a-tech-rgb),0.03)', display: 'flex', alignItems: 'center', gap: 24 }}>
              <div style={{ flex: 1 }}>
                <div style={{ ...aStyles.mono, fontSize: 10, letterSpacing: 2, color: A_ACCENT, opacity: 0.8 }}>{ui.recommend}</div>
                <div style={{ display: 'flex', alignItems: 'baseline', gap: 12, marginTop: 8 }}>
                  <span style={{ fontSize: 24, fontWeight: 500 }}>{series.code}</span>
                  <span style={{ fontSize: 14, opacity: 0.6 }}>{t(series.nameKey)}</span>
                </div>
              </div>
              <button onClick={() => goto('product', series.id)} style={{ background: A_ACCENT, color: '#07090c', border: 'none', padding: '14px 24px', fontSize: 13, fontWeight: 600, letterSpacing: 1, cursor: 'pointer', borderRadius: 2, whiteSpace: 'nowrap' }}>{ui.view} →</button>
            </div>
          )}
        </div>
      </div>
    </section>
  );
}

// ============ CONTACT FORM (reusable: 首頁 + 聯絡頁) ============
function ContactFormA({ t, compact = false }) {
  const [form, setForm] = useState({ name: '', company: '', phone: '', email: '', content: '' });
  const [services, setServices] = useState([]);
  const [sent, setSent] = useState(false);
  const set = (k) => (e) => setForm(f => ({ ...f, [k]: e.target.value }));
  const toggleSvc = (s) => setServices(arr => arr.includes(s) ? arr.filter(x => x !== s) : [...arr, s]);
  const submit = (e) => { e.preventDefault(); setSent(true); };
  const reset = () => { setForm({ name: '', company: '', phone: '', email: '', content: '' }); setServices([]); setSent(false); };

  const fieldWrap = { display: 'flex', flexDirection: 'column', gap: 8 };
  const labelStyle = { ...aStyles.mono, fontSize: 10, letterSpacing: 2, opacity: 0.55, textTransform: 'uppercase' };
  const inputStyle = {
    background: 'rgba(var(--a-fg-rgb),0.03)', border: '1px solid rgba(var(--a-fg-rgb),0.12)',
    color: 'var(--a-fg)', padding: '14px 16px', fontSize: 14, borderRadius: 2,
    fontFamily: '"Inter", "Noto Sans TC", sans-serif', outline: 'none', width: '100%', boxSizing: 'border-box',
    transition: 'border-color 0.2s',
  };
  const onFocus = (e) => e.currentTarget.style.borderColor = A_ACCENT;
  const onBlur = (e) => e.currentTarget.style.borderColor = 'rgba(var(--a-fg-rgb),0.12)';

  return (
    <div style={{ position: 'relative', border: '1px solid rgba(var(--a-fg-rgb),0.1)', background: 'rgba(var(--a-fg-rgb),0.02)', padding: compact ? '40px 44px' : '44px 48px' }}>
      <div style={{ ...aStyles.mono, fontSize: 11, letterSpacing: 3, color: A_ACCENT, marginBottom: 32, display: 'flex', alignItems: 'center', gap: 10 }}>
        <span style={{ width: 6, height: 6, background: A_ACCENT, borderRadius: '50%' }} />
        {t('ct_form_title').toUpperCase()}
      </div>

      {sent ? (
        <div style={{ padding: '60px 0', textAlign: 'center' }}>
          <div style={{ width: 64, height: 64, margin: '0 auto', borderRadius: '50%', border: `1px solid ${A_ACCENT}`, display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 28, color: A_ACCENT }}>✓</div>
          <div style={{ fontSize: 26, fontWeight: 400, marginTop: 28 }}>{t('ct_sent_title')}</div>
          <p style={{ opacity: 0.6, fontSize: 15, marginTop: 12, lineHeight: 1.7 }}>{t('ct_sent_sub')}</p>
          <button onClick={reset} style={{ marginTop: 28, background: 'transparent', color: A_ACCENT, border: `1px solid ${A_ACCENT}`, padding: '12px 24px', fontSize: 13, letterSpacing: 1, cursor: 'pointer', borderRadius: 2 }}>{t('ct_sent_again')} →</button>
        </div>
      ) : (
        <form onSubmit={submit} style={{ display: 'flex', flexDirection: 'column', gap: 24 }}>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 24 }}>
            <div style={fieldWrap}>
              <label style={labelStyle}>{t('ct_f_name')} <span style={{ color: A_ACCENT }}>*</span></label>
              <input required value={form.name} onChange={set('name')} onFocus={onFocus} onBlur={onBlur} style={inputStyle} />
            </div>
            <div style={fieldWrap}>
              <label style={labelStyle}>{t('ct_f_company')}</label>
              <input value={form.company} onChange={set('company')} onFocus={onFocus} onBlur={onBlur} style={inputStyle} />
            </div>
            <div style={fieldWrap}>
              <label style={labelStyle}>{t('ct_f_phone')} <span style={{ color: A_ACCENT }}>*</span></label>
              <input required value={form.phone} onChange={set('phone')} onFocus={onFocus} onBlur={onBlur} style={inputStyle} />
            </div>
            <div style={fieldWrap}>
              <label style={labelStyle}>{t('ct_f_email')} <span style={{ color: A_ACCENT }}>*</span></label>
              <input required type="email" value={form.email} onChange={set('email')} onFocus={onFocus} onBlur={onBlur} style={inputStyle} />
            </div>
          </div>

          <div style={fieldWrap}>
            <label style={labelStyle}>{t('ct_f_service')}</label>
            <div style={{ display: 'flex', gap: 10, flexWrap: 'wrap' }}>
              {[t('ct_svc_1'), t('ct_svc_2'), t('ct_svc_3')].map(s => {
                const on = services.includes(s);
                return (
                  <button type="button" key={s} onClick={() => toggleSvc(s)} style={{
                    ...aStyles.mono, fontSize: 12, letterSpacing: 1, padding: '11px 18px', borderRadius: 2, cursor: 'pointer',
                    border: `1px solid ${on ? A_ACCENT : 'rgba(var(--a-fg-rgb),0.15)'}`,
                    background: on ? A_ACCENT : 'transparent', color: on ? '#07090c' : 'var(--a-fg)',
                    fontWeight: on ? 700 : 400, transition: 'all 0.2s', display: 'flex', alignItems: 'center', gap: 8
                  }}><span style={{ opacity: on ? 1 : 0.4 }}>{on ? '◉' : '○'}</span>{s}</button>
                );
              })}
            </div>
          </div>

          <div style={fieldWrap}>
            <label style={labelStyle}>{t('ct_f_content')}</label>
            <textarea value={form.content} onChange={set('content')} onFocus={onFocus} onBlur={onBlur} placeholder={t('ct_f_content_ph')} rows={5} style={{ ...inputStyle, resize: 'vertical', lineHeight: 1.6 }} />
          </div>

          <button type="submit" style={{ alignSelf: 'flex-start', marginTop: 8, background: A_ACCENT, color: '#07090c', border: 'none', padding: '16px 40px', fontSize: 14, fontWeight: 600, letterSpacing: 1, cursor: 'pointer', borderRadius: 2 }}>{t('ct_submit')} →</button>
        </form>
      )}
    </div>
  );
}

// ============ HOME CONTACT SECTION (首頁底部表單) ============
function HomeContactA({ t }) {
  const MAP_URL = 'https://maps.app.goo.gl/rbXSkrNxwySsBVjU8';
  return (
    <section style={{ padding: '120px 60px', position: 'relative', overflow: 'hidden', borderTop: '1px solid rgba(var(--a-fg-rgb),0.06)' }}>
      <div style={{ position: 'absolute', inset: 0, background: `radial-gradient(circle at 78% 45%, ${A_ACCENT}1c, transparent 60%)` }} />
      <div style={{ position: 'relative', maxWidth: 1600, margin: '0 auto', display: 'grid', gridTemplateColumns: '1fr 1.2fr', gap: 72, alignItems: 'start' }}>
        {/* left: heading + quick info */}
        <div>
          <div style={{ ...aStyles.mono, fontSize: 11, letterSpacing: 3, color: A_ACCENT, marginBottom: 22, display: 'flex', alignItems: 'center', gap: 10 }}>
            <span style={{ display: 'inline-block', width: 32, height: 1, background: A_ACCENT }} />
            / GET IN TOUCH
          </div>
          <h2 style={{ fontSize: 56, fontWeight: 200, letterSpacing: -2, margin: 0, lineHeight: 1.05 }}>{t('cta_title')}</h2>
          <p style={{ opacity: 0.6, fontSize: 17, marginTop: 20, lineHeight: 1.7, maxWidth: 440 }}>{t('cta_sub')}</p>

          <div style={{ marginTop: 44, display: 'flex', flexDirection: 'column' }}>
            {[
              [t('ct_label_tel'), <a key="t" href="tel:02-8209-6066" style={{ color: 'var(--a-fg)' }}>{t('foot_phone')}</a>],
              [t('ct_label_addr'), <a key="a" href={MAP_URL} target="_blank" rel="noreferrer" style={{ color: 'var(--a-fg)', borderBottom: '1px solid rgba(var(--a-fg-rgb),0.2)', paddingBottom: 1 }}>{t('foot_addr')}</a>],
              [t('ct_label_hours'), <span key="h">{t('ct_hours')}</span>],
            ].map(([k, v], i) => (
              <div key={i} style={{ display: 'grid', gridTemplateColumns: '90px 1fr', gap: 16, padding: '18px 0', borderTop: '1px solid rgba(var(--a-fg-rgb),0.08)', alignItems: 'baseline' }}>
                <span style={{ ...aStyles.mono, fontSize: 10, letterSpacing: 2, opacity: 0.5, textTransform: 'uppercase' }}>{k}</span>
                <span style={{ fontSize: 15, opacity: 0.85, lineHeight: 1.6 }}>{v}</span>
              </div>
            ))}
          </div>
        </div>

        {/* right: form */}
        <ContactFormA t={t} />
      </div>
    </section>
  );
}

// ============ CONTACT PAGE ============
function ContactA({ t, goto }) {
  const ADDR = t('foot_addr');
  const MAP_URL = 'https://maps.app.goo.gl/rbXSkrNxwySsBVjU8';

  return (
    <section style={{ paddingTop: 80, position: 'relative', overflow: 'hidden' }}>
      {/* banner */}
      <div style={{ position: 'relative', padding: '90px 60px 70px', borderBottom: '1px solid rgba(var(--a-fg-rgb),0.06)', overflow: 'hidden' }}>
        <div style={{ position: 'absolute', inset: 0, backgroundImage: `linear-gradient(rgba(var(--a-tech-rgb),0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(var(--a-tech-rgb),0.04) 1px, transparent 1px)`, backgroundSize: '60px 60px', maskImage: 'radial-gradient(ellipse at 30% center, black 10%, transparent 70%)' }} />
        <div style={{ position: 'absolute', top: '20%', left: '70%', width: 500, height: 500, background: `radial-gradient(circle, ${A_ACCENT}1f, transparent 60%)`, filter: 'blur(40px)' }} />
        <div style={{ position: 'relative', maxWidth: 1600, margin: '0 auto' }}>
          <div style={{ ...aStyles.mono, fontSize: 11, letterSpacing: 4, color: A_ACCENT, marginBottom: 20, display: 'flex', alignItems: 'center', gap: 12 }}>
            <span style={{ display: 'inline-block', width: 32, height: 1, background: A_ACCENT }} />
            {t('ct_eyebrow')}
          </div>
          <h1 style={{ fontSize: 72, fontWeight: 200, letterSpacing: -2, margin: 0, lineHeight: 1 }}>{t('ct_title')}</h1>
          <p style={{ opacity: 0.6, fontSize: 16, marginTop: 22, maxWidth: 560, lineHeight: 1.8 }}>{t('ct_lede')}</p>
          <div style={{ ...aStyles.mono, fontSize: 11, letterSpacing: 2, opacity: 0.5, marginTop: 28, display: 'flex', gap: 8, alignItems: 'center' }}>
            <span style={{ cursor: 'pointer' }} onClick={() => goto('home')}>{t('ct_home')}</span>
            <span style={{ opacity: 0.4 }}>/</span>
            <span style={{ color: A_ACCENT }}>{t('ct_title')}</span>
          </div>
        </div>
      </div>

      {/* body */}
      <div style={{ position: 'relative', maxWidth: 1600, margin: '0 auto', padding: '80px 60px 120px', display: 'grid', gridTemplateColumns: '1fr 1.25fr', gap: 64, alignItems: 'start' }}>
        {/* left: company info */}
        <div>
          <img src="logo-original.png" alt="稼動科技 ACT" style={{ height: 48, filter: 'var(--a-logo-filter)' }} />
          <div style={{ marginTop: 22, fontSize: 24, fontWeight: 500, letterSpacing: -0.5 }}>{t('ct_company')}</div>
          <div style={{ ...aStyles.mono, fontSize: 12, letterSpacing: 2, color: A_ACCENT, marginTop: 6, opacity: 0.85 }}>{t('ct_company_en')}</div>

          <div style={{ marginTop: 40, display: 'flex', flexDirection: 'column' }}>
            {[
              [t('ct_label_addr'), <a key="a" href={MAP_URL} target="_blank" rel="noreferrer" style={{ color: 'var(--a-fg)', borderBottom: '1px solid rgba(var(--a-fg-rgb),0.2)', paddingBottom: 1 }}>{ADDR}</a>],
              [t('ct_label_tel'), <a key="t" href="tel:02-8209-6066" style={{ color: 'var(--a-fg)' }}>{t('foot_phone')}</a>],
              [t('ct_label_fax'), <span key="f">{t('ct_fax')}</span>],
              [t('ct_label_hours'), <span key="h">{t('ct_hours')}</span>],
            ].map(([k, v], i) => (
              <div key={i} style={{ display: 'grid', gridTemplateColumns: '90px 1fr', gap: 16, padding: '18px 0', borderTop: '1px solid rgba(var(--a-fg-rgb),0.08)', alignItems: 'baseline' }}>
                <span style={{ ...aStyles.mono, fontSize: 10, letterSpacing: 2, opacity: 0.5, textTransform: 'uppercase' }}>{k}</span>
                <span style={{ fontSize: 15, opacity: 0.85, lineHeight: 1.6 }}>{v}</span>
              </div>
            ))}
          </div>

          {/* map placeholder */}
          <a href={MAP_URL} target="_blank" rel="noreferrer" style={{ display: 'block', marginTop: 28, position: 'relative', height: 240, border: '1px solid rgba(var(--a-tech-rgb),0.2)', background: 'rgba(var(--a-tech-rgb),0.03)', backgroundImage: `repeating-linear-gradient(0deg, rgba(var(--a-fg-rgb),0.05) 0 1px, transparent 1px 28px), repeating-linear-gradient(90deg, rgba(var(--a-fg-rgb),0.05) 0 1px, transparent 1px 28px)`, overflow: 'hidden', cursor: 'pointer' }}>
            {['TL','TR','BL','BR'].map(c => { const [v,h]=[c[0],c[1]]; return <div key={c} style={{ position: 'absolute', [v==='T'?'top':'bottom']: 12, [h==='L'?'left':'right']: 12, width: 14, height: 14, borderTop: v==='T'?`1px solid ${A_ACCENT}`:'none', borderBottom: v==='B'?`1px solid ${A_ACCENT}`:'none', borderLeft: h==='L'?`1px solid ${A_ACCENT}`:'none', borderRight: h==='R'?`1px solid ${A_ACCENT}`:'none' }} />; })}
            <div style={{ position: 'absolute', top: '50%', left: '50%', transform: 'translate(-50%,-50%)', width: 16, height: 16, borderRadius: '50%', background: A_ACCENT, boxShadow: `0 0 0 8px ${A_ACCENT}22, 0 0 0 16px ${A_ACCENT}11` }} />
            <div style={{ ...aStyles.mono, position: 'absolute', top: 16, left: 16, fontSize: 10, letterSpacing: 2, color: A_ACCENT, opacity: 0.8 }}>{t('ct_map_tag')}</div>
            <div style={{ ...aStyles.mono, position: 'absolute', bottom: 16, left: 16, fontSize: 11, letterSpacing: 1, opacity: 0.7, display: 'flex', alignItems: 'center', gap: 8 }}>{t('ct_map_open')} ↗</div>
          </a>
        </div>

        {/* right: form */}
        <ContactFormA t={t} />
      </div>
    </section>
  );
}

// ============ DISPENSING SERVICE PAGE (點膠代工) ============
// スキャフォルド：文案・圖片待補（content TBD）
function ServicePageA({ t, goto }) {
  const Corners = ({ size = 16, inset = 14 }) => ['TL','TR','BL','BR'].map(c => {
    const [v,h] = [c[0], c[1]];
    return <div key={c} style={{ position: 'absolute', [v==='T'?'top':'bottom']: inset, [h==='L'?'left':'right']: inset, width: size, height: size, borderTop: v==='T'?`1px solid ${A_ACCENT}`:'none', borderBottom: v==='B'?`1px solid ${A_ACCENT}`:'none', borderLeft: h==='L'?`1px solid ${A_ACCENT}`:'none', borderRight: h==='R'?`1px solid ${A_ACCENT}`:'none' }} />;
  });

  const feats = [t('service_feat_1'), t('service_feat_2'), t('service_feat_3'), t('service_feat_4')];
  const caps = [
    { h: t('svc_cap_1_h'), d: t('svc_cap_1_d') },
    { h: t('svc_cap_2_h'), d: t('svc_cap_2_d') },
    { h: t('svc_cap_3_h'), d: t('svc_cap_3_d') },
    { h: t('svc_cap_4_h'), d: t('svc_cap_4_d') },
  ];
  const flow = [t('svc_flow_1'), t('svc_flow_2'), t('svc_flow_3'), t('svc_flow_4'), t('svc_flow_5')];

  return (
    <section style={{ paddingTop: 80, position: 'relative', overflow: 'hidden' }}>
      {/* banner */}
      <div style={{ position: 'relative', padding: '90px 60px 70px', borderBottom: '1px solid rgba(var(--a-fg-rgb),0.06)', overflow: 'hidden' }}>
        <div style={{ position: 'absolute', inset: 0, backgroundImage: `linear-gradient(rgba(var(--a-tech-rgb),0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(var(--a-tech-rgb),0.04) 1px, transparent 1px)`, backgroundSize: '60px 60px', maskImage: 'radial-gradient(ellipse at 30% center, black 10%, transparent 70%)' }} />
        <div style={{ position: 'absolute', top: '20%', left: '70%', width: 500, height: 500, background: `radial-gradient(circle, ${A_ACCENT}1f, transparent 60%)`, filter: 'blur(40px)' }} />
        <div style={{ position: 'relative', maxWidth: 1600, margin: '0 auto' }}>
          <div style={{ ...aStyles.mono, fontSize: 11, letterSpacing: 4, color: A_ACCENT, marginBottom: 20, display: 'flex', alignItems: 'center', gap: 12 }}>
            <span style={{ display: 'inline-block', width: 32, height: 1, background: A_ACCENT }} />
            {t('svc_eyebrow')}
          </div>
          <h1 style={{ fontSize: 72, fontWeight: 200, letterSpacing: -2, margin: 0, lineHeight: 1 }}>{t('svc_title')}</h1>
          <p style={{ opacity: 0.6, fontSize: 16, marginTop: 22, maxWidth: 640, lineHeight: 1.8 }}>{t('svc_lede')}</p>
          <div style={{ ...aStyles.mono, fontSize: 11, letterSpacing: 2, opacity: 0.5, marginTop: 28, display: 'flex', gap: 8, alignItems: 'center' }}>
            <span style={{ cursor: 'pointer' }} onClick={() => goto('home')}>{t('svc_home')}</span>
            <span style={{ opacity: 0.4 }}>/</span>
            <span style={{ color: A_ACCENT }}>{t('svc_title')}</span>
          </div>
        </div>
      </div>

      {/* intro + feature chips */}
      <div style={{ position: 'relative', maxWidth: 1600, margin: '0 auto', padding: '90px 60px 0', display: 'grid', gridTemplateColumns: '1.1fr 1fr', gap: 64, alignItems: 'center' }}>
        <div>
          <div style={{ ...aStyles.mono, fontSize: 11, letterSpacing: 3, color: A_ACCENT, marginBottom: 18 }}>01 / {t('svc_intro_tag')}</div>
          <h2 style={{ fontSize: 44, fontWeight: 300, letterSpacing: -1.5, margin: 0, lineHeight: 1.2 }}>{t('svc_intro_h')}</h2>
          <p style={{ opacity: 0.6, fontSize: 16, marginTop: 22, lineHeight: 1.85, maxWidth: 620 }}>{t('svc_intro_p')}</p>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14 }}>
          {feats.map((f, i) => (
            <div key={i} style={{ padding: '24px 22px', border: '1px solid rgba(var(--a-fg-rgb),0.1)', background: 'rgba(var(--a-fg-rgb),0.02)', display: 'flex', flexDirection: 'column', gap: 12, minHeight: 110 }}>
              <span style={{ ...aStyles.mono, fontSize: 11, letterSpacing: 2, color: A_ACCENT, opacity: 0.7 }}>{String(i+1).padStart(2,'0')}</span>
              <span style={{ fontSize: 16, fontWeight: 500, lineHeight: 1.4 }}>{f}</span>
            </div>
          ))}
        </div>
      </div>

      {/* capabilities */}
      <div style={{ position: 'relative', maxWidth: 1600, margin: '0 auto', padding: '90px 60px 0' }}>
        <div style={{ ...aStyles.mono, fontSize: 11, letterSpacing: 3, color: A_ACCENT, marginBottom: 16 }}>02 / CAPABILITIES</div>
        <h2 style={{ fontSize: 40, fontWeight: 300, letterSpacing: -1, margin: 0 }}>{t('svc_cap_ch')}</h2>
        <p style={{ opacity: 0.5, fontSize: 15, marginTop: 12, maxWidth: 560 }}>{t('svc_cap_sub')}</p>
        <div style={{ marginTop: 40, display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 16 }}>
          {caps.map((c, i) => (
            <div key={i} style={{ position: 'relative', padding: '30px 26px', border: '1px solid rgba(var(--a-fg-rgb),0.1)', background: 'rgba(var(--a-fg-rgb),0.02)', minHeight: 200, display: 'flex', flexDirection: 'column' }}>
              <div style={{ ...aStyles.mono, fontSize: 28, fontWeight: 200, color: A_ACCENT, lineHeight: 1 }}>{String(i+1).padStart(2,'0')}</div>
              <div style={{ fontSize: 20, fontWeight: 500, marginTop: 18 }}>{c.h}</div>
              <div style={{ fontSize: 13, opacity: 0.55, marginTop: 12, lineHeight: 1.7 }}>{c.d}</div>
            </div>
          ))}
        </div>
      </div>

      {/* process flow */}
      <div style={{ position: 'relative', maxWidth: 1600, margin: '0 auto', padding: '90px 60px 0' }}>
        <div style={{ ...aStyles.mono, fontSize: 11, letterSpacing: 3, color: A_ACCENT, marginBottom: 16 }}>03 / PROCESS</div>
        <h2 style={{ fontSize: 40, fontWeight: 300, letterSpacing: -1, margin: 0 }}>{t('svc_flow_ch')}</h2>
        <p style={{ opacity: 0.5, fontSize: 15, marginTop: 12, maxWidth: 560 }}>{t('svc_flow_sub')}</p>
        <div style={{ marginTop: 44, display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 0 }}>
          {flow.map((f, i) => (
            <div key={i} style={{ position: 'relative', paddingRight: 20 }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
                <div style={{ width: 10, height: 10, borderRadius: '50%', background: A_ACCENT, flexShrink: 0 }} />
                {i < flow.length - 1 && <div style={{ flex: 1, height: 1, background: 'rgba(var(--a-fg-rgb),0.15)' }} />}
              </div>
              <div style={{ ...aStyles.mono, fontSize: 11, letterSpacing: 2, color: A_ACCENT, opacity: 0.7, marginTop: 22 }}>STEP {String(i+1).padStart(2,'0')}</div>
              <div style={{ fontSize: 19, fontWeight: 500, marginTop: 10 }}>{f}</div>
              <div style={{ fontSize: 12, opacity: 0.45, marginTop: 8, lineHeight: 1.6 }}>{t('svc_flow_d')}</div>
            </div>
          ))}
        </div>
      </div>

      {/* facility / gallery placeholders */}
      <div style={{ position: 'relative', maxWidth: 1600, margin: '0 auto', padding: '90px 60px 0' }}>
        <div style={{ ...aStyles.mono, fontSize: 11, letterSpacing: 3, color: A_ACCENT, marginBottom: 16 }}>04 / FACILITY</div>
        <h2 style={{ fontSize: 40, fontWeight: 300, letterSpacing: -1, margin: 0 }}>{t('svc_gallery_ch')}</h2>
        <p style={{ opacity: 0.5, fontSize: 15, marginTop: 12, maxWidth: 560 }}>{t('svc_gallery_sub')}</p>
        <div style={{ marginTop: 40, display: 'grid', gridTemplateColumns: '2fr 1fr 1fr', gridAutoRows: 220, gap: 16 }}>
          {[0,1,2,3].map(i => (
            <div key={i} style={{
              position: 'relative', gridColumn: i===0 ? 'span 1' : 'span 1', gridRow: i===0 ? 'span 2' : 'span 1',
              border: '1px solid rgba(var(--a-tech-rgb),0.2)', background: 'rgba(var(--a-tech-rgb),0.03)',
              backgroundImage: `repeating-linear-gradient(45deg, rgba(var(--a-fg-rgb),0.04) 0 1px, transparent 1px 16px)`,
              display: 'flex', alignItems: 'center', justifyContent: 'center'
            }}>
              <Corners />
              <div style={{ ...aStyles.mono, position: 'absolute', top: 16, left: 16, fontSize: 10, letterSpacing: 2, color: A_ACCENT, opacity: 0.7 }}>{String(i+1).padStart(2,'0')}</div>
              <div style={{ textAlign: 'center', opacity: 0.4 }}>
                <div style={{ fontSize: 34, color: A_ACCENT, opacity: 0.5, marginBottom: 10 }}>◳</div>
                <div style={{ ...aStyles.mono, fontSize: 11, letterSpacing: 3 }}>{t('svc_gallery_ph')} {String(i+1).padStart(2,'0')}</div>
              </div>
            </div>
          ))}
        </div>
      </div>

      {/* CTA */}
      <div style={{ position: 'relative', maxWidth: 1600, margin: '0 auto', padding: '90px 60px 120px' }}>
        <div style={{ position: 'relative', overflow: 'hidden', border: '1px solid rgba(var(--a-tech-rgb),0.2)', background: 'rgba(var(--a-tech-rgb),0.03)', padding: '64px 56px', display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 40, flexWrap: 'wrap' }}>
          <div style={{ position: 'absolute', inset: 0, background: `radial-gradient(circle at 80% 50%, ${A_ACCENT}1c, transparent 60%)` }} />
          <div style={{ position: 'relative' }}>
            <div style={{ ...aStyles.mono, fontSize: 11, letterSpacing: 3, color: A_ACCENT, marginBottom: 16 }}>/ GET A QUOTE</div>
            <h2 style={{ fontSize: 44, fontWeight: 200, letterSpacing: -1.5, margin: 0 }}>{t('svc_cta_h')}</h2>
            <p style={{ opacity: 0.6, fontSize: 16, marginTop: 14, maxWidth: 520, lineHeight: 1.7 }}>{t('svc_cta_p')}</p>
          </div>
          <button onClick={() => goto('contact')} style={{ position: 'relative', background: A_ACCENT, color: '#07090c', border: 'none', padding: '18px 40px', fontSize: 14, fontWeight: 600, letterSpacing: 1, cursor: 'pointer', borderRadius: 2, whiteSpace: 'nowrap' }}>{t('svc_cta_btn')} →</button>
        </div>
      </div>
    </section>
  );
}

// ============ ABOUT PAGE (關於稼動) ============
function AboutPageA({ t, goto }) {
  const timeline = [
    { y: t('story_year_1'), e: t('story_event_1') },
    { y: t('story_year_2'), e: t('story_event_2') },
    { y: t('story_year_3'), e: t('story_event_3') },
    { y: t('story_year_4'), e: t('story_event_4') },
  ];
  return (
    <section style={{ paddingTop: 80, position: 'relative', overflow: 'hidden' }}>
      {/* banner */}
      <div style={{ position: 'relative', padding: '90px 60px 70px', borderBottom: '1px solid rgba(var(--a-fg-rgb),0.06)', overflow: 'hidden' }}>
        <div style={{ position: 'absolute', inset: 0, backgroundImage: `linear-gradient(rgba(var(--a-tech-rgb),0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(var(--a-tech-rgb),0.04) 1px, transparent 1px)`, backgroundSize: '60px 60px', maskImage: 'radial-gradient(ellipse at 30% center, black 10%, transparent 70%)' }} />
        <div style={{ position: 'absolute', top: '20%', left: '70%', width: 500, height: 500, background: `radial-gradient(circle, ${A_ACCENT}1f, transparent 60%)`, filter: 'blur(40px)' }} />
        <div style={{ position: 'relative', maxWidth: 1600, margin: '0 auto' }}>
          <div style={{ ...aStyles.mono, fontSize: 11, letterSpacing: 4, color: A_ACCENT, marginBottom: 20, display: 'flex', alignItems: 'center', gap: 12 }}>
            <span style={{ display: 'inline-block', width: 32, height: 1, background: A_ACCENT }} />
            {t('about_eyebrow')}
          </div>
          <h1 style={{ fontSize: 72, fontWeight: 200, letterSpacing: -2, margin: 0, lineHeight: 1 }}>{t('about_title')}</h1>
          <p style={{ opacity: 0.6, fontSize: 16, marginTop: 22, maxWidth: 640, lineHeight: 1.8 }}>{t('about_lede')}</p>
          <div style={{ ...aStyles.mono, fontSize: 11, letterSpacing: 2, opacity: 0.5, marginTop: 28, display: 'flex', gap: 8, alignItems: 'center' }}>
            <span style={{ cursor: 'pointer' }} onClick={() => goto('home')}>{t('about_home')}</span>
            <span style={{ opacity: 0.4 }}>/</span>
            <span style={{ color: A_ACCENT }}>{t('about_title')}</span>
          </div>
        </div>
      </div>

      {/* intro */}
      <div style={{ position: 'relative', maxWidth: 1600, margin: '0 auto', padding: '90px 60px 70px', display: 'grid', gridTemplateColumns: '0.9fr 1.1fr', gap: 64, alignItems: 'start' }}>
        <div>
          <div style={{ ...aStyles.mono, fontSize: 11, letterSpacing: 3, color: A_ACCENT, marginBottom: 16 }}>01 / {t('about_intro_tag')}</div>
          <h2 style={{ fontSize: 44, fontWeight: 300, letterSpacing: -1.5, margin: 0, lineHeight: 1.2 }}>{t('about_intro_h')}</h2>
        </div>
        <p style={{ opacity: 0.65, fontSize: 17, lineHeight: 1.9, margin: 0, maxWidth: 680 }}>{t('about_intro_p')}</p>
      </div>

      {/* stats ribbon */}
      <StatsA t={t} />

      {/* timeline */}
      <div style={{ position: 'relative', maxWidth: 1600, margin: '0 auto', padding: '90px 60px 0' }}>
        <div style={{ ...aStyles.mono, fontSize: 11, letterSpacing: 3, color: A_ACCENT, marginBottom: 16 }}>02 / MILESTONES</div>
        <h2 style={{ fontSize: 40, fontWeight: 300, letterSpacing: -1, margin: 0 }}>{t('about_timeline_ch')}</h2>
        <p style={{ opacity: 0.5, fontSize: 15, marginTop: 12, maxWidth: 560 }}>{t('about_timeline_sub')}</p>
        <div style={{ marginTop: 44, display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 0 }}>
          {timeline.map((m, i) => (
            <div key={i} style={{ position: 'relative', paddingRight: 24 }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
                <div style={{ width: 10, height: 10, borderRadius: '50%', background: A_ACCENT, flexShrink: 0 }} />
                {i < timeline.length - 1 && <div style={{ flex: 1, height: 1, background: 'rgba(var(--a-fg-rgb),0.15)' }} />}
              </div>
              <div style={{ ...aStyles.mono, fontSize: 26, fontWeight: 200, color: A_ACCENT, letterSpacing: -1, marginTop: 22 }}>{m.y}</div>
              <div style={{ fontSize: 15, opacity: 0.7, marginTop: 12, lineHeight: 1.7, maxWidth: 240 }}>{m.e}</div>
            </div>
          ))}
        </div>
      </div>

      {/* core technology (moved from homepage) */}
      <TechA t={t} />
    </section>
  );
}

// ============ MAIN ============
window.DirectionA = function DirectionA({ lang, setLang, page, goto, productId }) {
  const t = window.useT(lang);
  return (
    <div style={aStyles.root}>
      <NavA lang={lang} setLang={setLang} t={t} goto={goto} />
      {page === 'home' && (
        <>
          <HeroA t={t} />
          <ServiceA t={t} />
          <ApplyQuickA t={t} />
          <HomeContactA t={t} />
        </>
      )}
      {page === 'about' && <AboutPageA t={t} goto={goto} />}
      {page === 'products' && <ProductListA t={t} goto={goto} />}
      {page === 'product' && <ProductDetailA t={t} goto={goto} productId={productId} />}
      {page === 'apply' && <ApplyPageA t={t} goto={goto} lang={lang} />}
      {page === 'service' && <ServicePageA t={t} goto={goto} />}
      {page === 'contact' && <ContactA t={t} goto={goto} />}
      <FooterA t={t} />
    </div>
  );
};