// pages/technology.jsx — 技術（依老闆草稿原文，i18n 化）

function TechHero({ isMobile }) {
  const t = useT();
  return (
    <Section mobile={isMobile} style={{ paddingTop: isMobile ? 56 : 120, paddingBottom: isMobile ? 48 : 80 }}>
      <Eyebrow>{t('tech.hero.eyebrow')}</Eyebrow>
      <h1 style={{
        margin: '16px 0 0', fontSize: isMobile ? 40 : 88,
        fontWeight: 500, letterSpacing: '-0.035em', lineHeight: 1.02, maxWidth: 1100,
      }}>
        {t('tech.hero.title1')}<br/>{t('tech.hero.title2')}
      </h1>
      <p style={{
        margin: isMobile ? '24px 0 0' : '36px 0 0',
        fontSize: isMobile ? 15 : 19, color: REF.ink2, lineHeight: 1.65, maxWidth: 760,
      }}>
        {t('tech.hero.p1.a')}
        <strong style={{ color: REF.ink, fontWeight: 600 }}>{t('tech.hero.p1.bold')}</strong>
        {t('tech.hero.p1.b')}
      </p>
      <p style={{
        margin: '16px 0 0', fontSize: isMobile ? 14 : 17, color: REF.ink2, lineHeight: 1.7, maxWidth: 720,
      }}>
        {t('tech.hero.p2.a')}<em>{t('tech.hero.p2.em')}</em>
      </p>
    </Section>
  );
}

function TechOrigin({ isMobile }) {
  const t = useT();
  const gens = [
    { g: t('tech.or.g1.g'), y: '2011', partner: t('tech.or.g1.p'), t: t('tech.or.g1.t'), d: t('tech.or.g1.d') },
    { g: t('tech.or.g2.g'), y: '2012', partner: t('tech.or.g2.p'), t: t('tech.or.g2.t'), d: t('tech.or.g2.d') },
    { g: t('tech.or.g3.g'), y: '2013', partner: t('tech.or.g3.p'), t: t('tech.or.g3.t'), d: t('tech.or.g3.d') },
  ];
  return (
    <Section alt mobile={isMobile}>
      <SectionHead
        mobile={isMobile}
        eyebrow={t('tech.or.eyebrow')}
        title={<>{t('tech.or.title1')}<br/>{t('tech.or.title2')}</>}
        aside={!isMobile && (
          <p style={{ margin: 0, fontSize: 15, color: REF.ink2, lineHeight: 1.65, maxWidth: 360 }}>
            {t('tech.or.aside')}
          </p>
        )}
      />
      <div style={{ display: 'flex', flexDirection: 'column', gap: isMobile ? 14 : 16 }}>
        {gens.map(g => (
          <div key={g.g} style={{
            background: '#fff', border: `1px solid ${REF.rule}`, borderRadius: isMobile ? 14 : 18,
            padding: isMobile ? '22px 22px 26px' : '32px 36px 36px',
            display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '180px 1fr', gap: isMobile ? 14 : 36,
          }}>
            <div>
              <div className="mono" style={{ fontSize: 12, color: REF.ink3, letterSpacing: '0.16em' }}>{g.y}</div>
              <div style={{ marginTop: 6, fontSize: isMobile ? 22 : 26, fontWeight: 600, letterSpacing: '-0.025em' }}>{g.g}</div>
              <div className="mono" style={{ marginTop: 6, fontSize: 11, color: REF.ink3, letterSpacing: '0.12em' }}>{g.partner}</div>
            </div>
            <div>
              <div style={{ fontSize: isMobile ? 19 : 23, fontWeight: 500, letterSpacing: '-0.02em' }}>{g.t}</div>
              <p style={{ margin: '12px 0 0', fontSize: isMobile ? 14 : 15, lineHeight: 1.7, color: REF.ink2 }}>{g.d}</p>
            </div>
          </div>
        ))}
      </div>
    </Section>
  );
}

function TechMFi({ isMobile }) {
  const t = useT();
  const reqs = [
    [t('tech.mfi.r1.t'), t('tech.mfi.r1.d')],
    [t('tech.mfi.r2.t'), t('tech.mfi.r2.d')],
    [t('tech.mfi.r3.t'), t('tech.mfi.r3.d')],
    [t('tech.mfi.r4.t'), t('tech.mfi.r4.d')],
    [t('tech.mfi.r5.t'), t('tech.mfi.r5.d')],
  ];
  const proprietary = [
    { t: t('tech.mfi.p1.t'), d: t('tech.mfi.p1.d') },
    { t: t('tech.mfi.p2.t'), d: t('tech.mfi.p2.d') },
    { t: t('tech.mfi.p3.t'), d: t('tech.mfi.p3.d') },
  ];
  return (
    <Section color="#fff" mobile={isMobile}>
      <SectionHead
        mobile={isMobile}
        eyebrow={t('tech.mfi.eyebrow')}
        title={<>{t('tech.mfi.title1')}<br/><span style={{ color: REF.ink3, fontWeight: 300 }}>{t('tech.mfi.title2')}</span></>}
        aside={!isMobile && (
          <p style={{ margin: 0, fontSize: 15, color: REF.ink2, lineHeight: 1.65, maxWidth: 360 }}>{t('tech.mfi.aside')}</p>
        )}
      />
      <div>
        <Eyebrow>{t('tech.mfi.r.eyebrow')}</Eyebrow>
        <div style={{
          marginTop: 14,
          background: REF.paper, border: `1px solid ${REF.rule}`, borderRadius: isMobile ? 14 : 16, overflow: 'hidden',
        }}>
          {reqs.map((r, i) => (
            <div key={r[0]} style={{
              display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '220px 1fr', gap: isMobile ? 4 : 28,
              padding: isMobile ? '16px 18px' : '20px 28px',
              borderTop: i === 0 ? 'none' : `1px solid ${REF.rule}`,
            }}>
              <div className="mono" style={{ fontSize: 12, color: REF.accent, letterSpacing: '0.12em' }}>{r[0]}</div>
              <div style={{ fontSize: isMobile ? 13 : 15, color: REF.ink2, lineHeight: 1.65 }}>{r[1]}</div>
            </div>
          ))}
        </div>
      </div>
      <div style={{ marginTop: isMobile ? 32 : 56 }}>
        <Eyebrow>{t('tech.mfi.p.eyebrow')}</Eyebrow>
        <p style={{ margin: '14px 0 0', fontSize: isMobile ? 13 : 15, color: REF.ink2, lineHeight: 1.65, maxWidth: 760 }}>
          {t('tech.mfi.p.body')}
        </p>
        <div style={{
          marginTop: 16,
          display: 'grid', gridTemplateColumns: isMobile ? '1fr' : 'repeat(3, 1fr)', gap: isMobile ? 12 : 16,
        }}>
          {proprietary.map(p => (
            <div key={p.t} style={{
              background: REF.paper, border: `1px solid ${REF.rule}`, borderRadius: 12,
              padding: isMobile ? '20px 22px' : '26px 26px 30px',
            }}>
              <div className="mono" style={{ fontSize: 11, color: REF.accent, letterSpacing: '0.16em' }}>PROPRIETARY</div>
              <div style={{ marginTop: 10, fontSize: isMobile ? 18 : 20, fontWeight: 600, letterSpacing: '-0.02em' }}>{p.t}</div>
              <p style={{ margin: '10px 0 0', fontSize: isMobile ? 13 : 14, lineHeight: 1.65, color: REF.ink2 }}>{p.d}</p>
            </div>
          ))}
        </div>
      </div>
    </Section>
  );
}

function TechIC({ isMobile }) {
  const t = useT();
  const ics = [
    [t('tech.ic.r1.g'), '2011', t('tech.ic.r1.ic'), t('tech.ic.r1.p'), t('tech.ic.r1.i')],
    [t('tech.ic.r2.g'), '2012', t('tech.ic.r2.ic'), t('tech.ic.r2.p'), t('tech.ic.r2.i')],
    [t('tech.ic.r3.g'), '2013', t('tech.ic.r3.ic'), t('tech.ic.r3.p'), t('tech.ic.r3.i')],
    [t('tech.ic.r4.g'), '2014', 'MK-800',           t('tech.ic.r4.p'), t('tech.ic.r4.i')],
    [t('tech.ic.r5.g'), '2015', 'MK-810',           t('tech.ic.r5.p'), t('tech.ic.r5.i')],
    [t('tech.ic.r6.g'), '2016', t('tech.ic.r6.ic'), t('tech.ic.r6.p'), t('tech.ic.r6.i')],
    [t('tech.ic.r7.g'), '2017', 'MK-830',           t('tech.ic.r7.p'), t('tech.ic.r7.i')],
    [t('tech.ic.r8.g'), '2018', t('tech.ic.r8.ic'), t('tech.ic.r8.p'), t('tech.ic.r8.i')],
    [t('tech.ic.r9.g'), '2019', 'MK-860',           '—',                t('tech.ic.r9.i')],
  ];
  const partners = [
    '巨盛電子 CEC (Chesen Electronics Corp.)', '創惟科技 · Genesys Logic', 'ATMEL · Microchip', '安國 Alcor Micro',
    '群聯電子 · Phison', '慧榮科技 SMI', '旺玖科技 · Prolific', '展匯 AlcorLink',
    '瑞發科 Norelsys',
  ];
  return (
    <Section dark mobile={isMobile} style={{ position: 'relative', overflow: 'hidden' }}>
      {!isMobile && (
        <div aria-hidden style={{
          position: 'absolute', inset: 0, opacity: 0.4,
          backgroundImage: `linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
                            linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px)`,
          backgroundSize: '64px 64px', pointerEvents: 'none',
        }}/>
      )}
      <div style={{ position: 'relative' }}>
        <SectionHead
          dark mobile={isMobile}
          eyebrow={t('tech.ic.eyebrow')}
          title={<>{t('tech.ic.title1')}<br/>{t('tech.ic.title2')}</>}
          aside={!isMobile && (
            <p style={{ margin: 0, fontSize: 15, color: 'rgba(255,255,255,0.7)', lineHeight: 1.65, maxWidth: 360 }}>
              {t('tech.ic.aside')}
            </p>
          )}
        />
        <div style={{
          background: 'rgba(255,255,255,0.03)', border: '1px solid rgba(255,255,255,0.1)',
          borderRadius: isMobile ? 14 : 18, overflow: 'hidden',
        }}>
          <div className="mono" style={{
            display: 'grid',
            gridTemplateColumns: isMobile ? '60px 1fr' : '70px 70px 1.4fr 1.2fr 2fr',
            padding: isMobile ? '12px 16px' : '14px 24px',
            borderBottom: '1px solid rgba(255,255,255,0.08)',
            fontSize: 11, color: 'rgba(255,255,255,0.45)', letterSpacing: '0.16em',
          }}>
            <div>GEN</div>
            {!isMobile && <div>YEAR</div>}
            <div>IC</div>
            {!isMobile && <div>PARTNER</div>}
            {!isMobile && <div>INNOVATION</div>}
          </div>
          {ics.map((r, i) => (
            <div key={r[0]+i} style={{
              display: 'grid',
              gridTemplateColumns: isMobile ? '60px 1fr' : '70px 70px 1.4fr 1.2fr 2fr',
              gap: isMobile ? 8 : 14,
              padding: isMobile ? '14px 16px' : '18px 24px',
              borderTop: i === 0 ? 'none' : '1px solid rgba(255,255,255,0.06)',
              alignItems: 'baseline',
            }}>
              <div className="mono" style={{ color: REF.accent, fontSize: isMobile ? 11 : 13, fontWeight: 500, letterSpacing: '0.04em' }}>{r[0]}</div>
              {!isMobile && <div className="mono" style={{ color: 'rgba(255,255,255,0.5)', fontSize: 12 }}>{r[1]}</div>}
              <div style={{ fontSize: isMobile ? 13 : 15, fontWeight: 500, letterSpacing: '-0.01em', color: '#fff' }}>{r[2]}</div>
              {!isMobile && <div className="mono" style={{ fontSize: 12, color: 'rgba(255,255,255,0.55)', letterSpacing: '0.02em' }}>{r[3]}</div>}
              {!isMobile && <div style={{ fontSize: 13, color: 'rgba(255,255,255,0.7)', lineHeight: 1.55 }}>{r[4]}</div>}
              {isMobile && (
                <div style={{ gridColumn: '2 / 3', marginTop: 4, fontSize: 11, color: 'rgba(255,255,255,0.6)', lineHeight: 1.55 }}>
                  {r[1]} · {r[3]} · {r[4]}
                </div>
              )}
            </div>
          ))}
        </div>
        <p style={{
          margin: isMobile ? '24px 0 0' : '32px 0 0',
          fontSize: isMobile ? 13 : 14, color: 'rgba(255,255,255,0.65)', lineHeight: 1.7, maxWidth: 760,
        }}>
          {t('tech.ic.foot.a')}
          <strong style={{ color: '#fff', fontWeight: 500 }}>{t('tech.ic.foot.bold')}</strong>
          {t('tech.ic.foot.b')}
        </p>
        <div style={{ marginTop: isMobile ? 28 : 44 }}>
          <Eyebrow dark>{t('tech.ic.partners')}</Eyebrow>
          <div style={{
            marginTop: 12,
            display: 'grid', gridTemplateColumns: isMobile ? '1fr 1fr' : 'repeat(3, 1fr)', gap: 8,
          }}>
            {partners.map(p => (
              <div key={p} className="mono" style={{
                padding: isMobile ? '10px 12px' : '12px 16px',
                fontSize: isMobile ? 11 : 12, color: 'rgba(255,255,255,0.7)',
                background: 'rgba(255,255,255,0.03)', border: '1px solid rgba(255,255,255,0.08)',
                borderRadius: 8, letterSpacing: '0.04em',
              }}>{p}</div>
            ))}
          </div>
        </div>
      </div>
    </Section>
  );
}

function TechSoftware({ isMobile }) {
  const t = useT();
  const apps = [
    [t('tech.sw.a1.t'), t('tech.sw.a1.d')],
    [t('tech.sw.a2.t'), t('tech.sw.a2.d')],
    [t('tech.sw.a3.t'), t('tech.sw.a3.d')],
  ];
  const appBullets = [
    t('tech.sw.app.b1'), t('tech.sw.app.b2'), t('tech.sw.app.b3'),
    t('tech.sw.app.b4'), t('tech.sw.app.b5'), t('tech.sw.app.b6'),
  ];
  const fwBullets = [
    t('tech.sw.fw.b1'), t('tech.sw.fw.b2'), t('tech.sw.fw.b3'),
    t('tech.sw.fw.b4'), t('tech.sw.fw.b5'), t('tech.sw.fw.b6'),
  ];
  return (
    <Section alt mobile={isMobile}>
      <SectionHead
        mobile={isMobile}
        eyebrow={t('tech.sw.eyebrow')}
        title={<>{t('tech.sw.title1')}<br/>{t('tech.sw.title2')}</>}
        aside={!isMobile && (
          <p style={{ margin: 0, fontSize: 15, color: REF.ink2, lineHeight: 1.65, maxWidth: 360 }}>{t('tech.sw.aside')}</p>
        )}
      />
      <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1fr 1fr', gap: isMobile ? 16 : 20 }}>
        <div style={{
          background: '#fff', border: `1px solid ${REF.rule}`, borderRadius: 14,
          padding: isMobile ? '22px 22px 26px' : '28px 28px 32px',
        }}>
          <div className="mono" style={{ fontSize: 11, color: REF.accent, letterSpacing: '0.16em' }}>{t('tech.sw.app.eyebrow')}</div>
          <div style={{ marginTop: 10, fontSize: isMobile ? 18 : 20, fontWeight: 600, letterSpacing: '-0.02em' }}>{t('tech.sw.app.title')}</div>
          <ul style={{
            margin: '14px 0 0', padding: 0, listStyle: 'none',
            display: 'flex', flexDirection: 'column', gap: 8,
            fontSize: isMobile ? 13 : 14, color: REF.ink2, lineHeight: 1.55,
          }}>
            {appBullets.map(x => (
              <li key={x} style={{ paddingLeft: 14, position: 'relative' }}>
                <span style={{ position: 'absolute', left: 0, top: 8, width: 6, height: 1, background: REF.accent }}/>
                {x}
              </li>
            ))}
          </ul>
        </div>
        <div style={{
          background: '#fff', border: `1px solid ${REF.rule}`, borderRadius: 14,
          padding: isMobile ? '22px 22px 26px' : '28px 28px 32px',
        }}>
          <div className="mono" style={{ fontSize: 11, color: REF.accent, letterSpacing: '0.16em' }}>{t('tech.sw.fw.eyebrow')}</div>
          <div style={{ marginTop: 10, fontSize: isMobile ? 18 : 20, fontWeight: 600, letterSpacing: '-0.02em' }}>{t('tech.sw.fw.title')}</div>
          <ul style={{
            margin: '14px 0 0', padding: 0, listStyle: 'none',
            display: 'flex', flexDirection: 'column', gap: 8,
            fontSize: isMobile ? 13 : 14, color: REF.ink2, lineHeight: 1.55,
          }}>
            {fwBullets.map(x => (
              <li key={x} style={{ paddingLeft: 14, position: 'relative' }}>
                <span style={{ position: 'absolute', left: 0, top: 8, width: 6, height: 1, background: REF.accent }}/>
                {x}
              </li>
            ))}
          </ul>
        </div>
      </div>
      <div style={{ marginTop: isMobile ? 32 : 48 }}>
        <Eyebrow>{t('tech.sw.wl.eyebrow')}</Eyebrow>
        <div style={{
          marginTop: 14,
          background: '#fff', border: `1px solid ${REF.rule}`, borderRadius: isMobile ? 14 : 16, overflow: 'hidden',
        }}>
          {apps.map((r, i) => (
            <div key={r[0]} style={{
              display: 'grid', gridTemplateColumns: isMobile ? '160px 1fr' : '220px 1fr',
              gap: isMobile ? 12 : 28,
              padding: isMobile ? '14px 18px' : '18px 28px',
              borderTop: i === 0 ? 'none' : `1px solid ${REF.rule}`,
              alignItems: 'baseline',
            }}>
              <div style={{ fontSize: isMobile ? 14 : 17, fontWeight: 600, letterSpacing: '-0.015em' }}>{r[0]}</div>
              <div style={{ fontSize: isMobile ? 13 : 14, color: REF.ink2, lineHeight: 1.55 }}>{r[1]}</div>
            </div>
          ))}
        </div>
      </div>
    </Section>
  );
}

function TechAir({ isMobile }) {
  const t = useT();
  const layers = [
    [t('tech.air.l1.l'), t('tech.air.l1.t'), t('tech.air.l1.d')],
    [t('tech.air.l2.l'), t('tech.air.l2.t'), t('tech.air.l2.d')],
    [t('tech.air.l3.l'), t('tech.air.l3.t'), t('tech.air.l3.d')],
  ];
  const stack = [
    [t('tech.air.s1.l'), t('tech.air.s1.f'), t('tech.air.s1.t')],
    [t('tech.air.s2.l'), t('tech.air.s2.f'), t('tech.air.s2.t')],
    [t('tech.air.s3.l'), t('tech.air.s3.f'), t('tech.air.s3.t')],
    [t('tech.air.s4.l'), t('tech.air.s4.f'), t('tech.air.s4.t')],
    [t('tech.air.s5.l'), t('tech.air.s5.f'), t('tech.air.s5.t')],
  ];
  return (
    <Section color="#fff" mobile={isMobile}>
      <SectionHead
        mobile={isMobile}
        eyebrow={t('tech.air.eyebrow')}
        title={<>{t('tech.air.title1')}<br/>{t('tech.air.title2')}</>}
        aside={!isMobile && (
          <p style={{ margin: 0, fontSize: 15, color: REF.ink2, lineHeight: 1.65, maxWidth: 360 }}>{t('tech.air.aside')}</p>
        )}
      />
      <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : 'repeat(3, 1fr)', gap: isMobile ? 12 : 16 }}>
        {layers.map(([l, ttl, d]) => (
          <div key={l} style={{
            background: REF.paper, border: `1px solid ${REF.rule}`, borderRadius: 14,
            padding: isMobile ? '22px 22px 26px' : '28px 28px 32px',
          }}>
            <div className="mono" style={{ fontSize: 11, color: REF.accent, letterSpacing: '0.18em' }}>{l}</div>
            <div style={{ marginTop: 10, fontSize: isMobile ? 19 : 22, fontWeight: 600, letterSpacing: '-0.02em' }}>{ttl}</div>
            <p style={{ margin: '10px 0 0', fontSize: isMobile ? 13 : 14, lineHeight: 1.65, color: REF.ink2 }}>{d}</p>
          </div>
        ))}
      </div>
      <div style={{ marginTop: isMobile ? 32 : 56 }}>
        <Eyebrow>{t('tech.air.stack.eyebrow')}</Eyebrow>
        <div style={{
          marginTop: 14,
          background: REF.paper, border: `1px solid ${REF.rule}`,
          borderRadius: isMobile ? 14 : 18, overflow: 'hidden',
        }}>
          <div className="mono" style={{
            display: 'grid', gridTemplateColumns: isMobile ? '90px 1fr' : '120px 1fr 1.4fr',
            padding: isMobile ? '12px 16px' : '14px 24px',
            borderBottom: `1px solid ${REF.rule}`,
            fontSize: 11, color: REF.ink3, letterSpacing: '0.16em',
          }}>
            <div>LAYER</div>
            <div>FUNCTION</div>
            {!isMobile && <div>TECH</div>}
          </div>
          {stack.map((r, i) => (
            <div key={r[0]} style={{
              display: 'grid', gridTemplateColumns: isMobile ? '90px 1fr' : '120px 1fr 1.4fr',
              gap: isMobile ? 12 : 16,
              padding: isMobile ? '14px 16px' : '18px 24px',
              borderTop: i === 0 ? 'none' : `1px solid ${REF.rule}`,
              alignItems: 'baseline',
            }}>
              <div className="mono" style={{ fontSize: isMobile ? 12 : 13, color: REF.accent, letterSpacing: '0.06em' }}>{r[0]}</div>
              <div style={{ fontSize: isMobile ? 13 : 15, fontWeight: 500, letterSpacing: '-0.01em' }}>{r[1]}</div>
              {!isMobile && <div className="mono" style={{ fontSize: 12, color: REF.ink2, letterSpacing: '0.02em' }}>{r[2]}</div>}
              {isMobile && (
                <div className="mono" style={{ gridColumn: '2 / 3', marginTop: 4, fontSize: 11, color: REF.ink3, letterSpacing: '0.04em' }}>
                  {r[2]}
                </div>
              )}
            </div>
          ))}
        </div>
      </div>
    </Section>
  );
}

function TechPatents({ isMobile }) {
  const t = useT();
  const tradeBullets = [
    t('tech.pat.tr.b1'), t('tech.pat.tr.b2'), t('tech.pat.tr.b3'),
    t('tech.pat.tr.b4'), t('tech.pat.tr.b5'), t('tech.pat.tr.b6'),
  ];
  return (
    <Section alt mobile={isMobile}>
      <SectionHead
        mobile={isMobile}
        eyebrow={t('tech.pat.eyebrow')}
        title={<>{t('tech.pat.title1')}<br/>{t('tech.pat.title2')}</>}
      />
      <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1fr 1fr', gap: isMobile ? 14 : 20 }}>
        <div style={{
          background: '#fff', border: `1px solid ${REF.rule}`, borderRadius: 14,
          padding: isMobile ? '22px 22px 26px' : '28px 28px 32px',
        }}>
          <Eyebrow>{t('tech.pat.core.eyebrow')}</Eyebrow>
          <div style={{ marginTop: 12, fontSize: isMobile ? 17 : 19, fontWeight: 600, letterSpacing: '-0.02em' }}>
            {t('tech.pat.core.title')}
          </div>
          <p style={{ margin: '10px 0 0', fontSize: isMobile ? 13 : 14, lineHeight: 1.65, color: REF.ink2 }}>
            {t('tech.pat.core.body.a')}
            <strong style={{ color: REF.ink, fontWeight: 500 }}>{t('tech.pat.core.body.bold')}</strong>
          </p>
          <p style={{ margin: '14px 0 0', fontSize: isMobile ? 12 : 13, lineHeight: 1.6, color: REF.ink3, fontStyle: 'italic' }}>
            {t('tech.pat.core.foot')}
          </p>
        </div>
        <div style={{
          background: '#fff', border: `1px solid ${REF.rule}`, borderRadius: 14,
          padding: isMobile ? '22px 22px 26px' : '28px 28px 32px',
        }}>
          <Eyebrow>{t('tech.pat.tr.eyebrow')}</Eyebrow>
          <ul style={{
            margin: '14px 0 0', padding: 0, listStyle: 'none',
            display: 'flex', flexDirection: 'column', gap: 8,
            fontSize: isMobile ? 13 : 14, color: REF.ink2, lineHeight: 1.55,
          }}>
            {tradeBullets.map(x => (
              <li key={x} style={{ paddingLeft: 14, position: 'relative' }}>
                <span style={{ position: 'absolute', left: 0, top: 8, width: 6, height: 1, background: REF.accent }}/>
                {x}
              </li>
            ))}
          </ul>
          <p style={{ margin: '14px 0 0', fontSize: isMobile ? 12 : 13, lineHeight: 1.6, color: REF.ink3, fontStyle: 'italic' }}>
            {t('tech.pat.tr.foot')}
          </p>
        </div>
      </div>
    </Section>
  );
}

function TechTimeline({ isMobile }) {
  const t = useT();
  const rows = [
    ['2011',  t('tech.tl.2011')],
    ['2012',  t('tech.tl.2012')],
    ['2013',  t('tech.tl.2013')],
    ['2014',  t('tech.tl.2014')],
    ['2015',  t('tech.tl.2015')],
    ['2016',  t('tech.tl.2016')],
    ['2017',  t('tech.tl.2017')],
    ['2018',  t('tech.tl.2018')],
    ['2019',  t('tech.tl.2019')],
    ['2020',  t('tech.tl.2020')],
    ['2021',  t('tech.tl.2021')],
    ['2022',  t('tech.tl.2022')],
    ['2023+', t('tech.tl.2023')],
  ];
  return (
    <Section color="#fff" mobile={isMobile}>
      <SectionHead mobile={isMobile} eyebrow={t('tech.tl.eyebrow')} title={<>{t('tech.tl.title')}</>} />
      <div style={{
        background: REF.paper, border: `1px solid ${REF.rule}`,
        borderRadius: isMobile ? 14 : 18, overflow: 'hidden',
      }}>
        {rows.map((r, i) => (
          <div key={r[0]} style={{
            display: 'grid', gridTemplateColumns: isMobile ? '70px 1fr' : '100px 1fr',
            gap: isMobile ? 12 : 24,
            padding: isMobile ? '14px 18px' : '18px 32px',
            borderTop: i === 0 ? 'none' : `1px solid ${REF.rule}`,
            alignItems: 'baseline',
          }}>
            <div className="mono" style={{ fontSize: isMobile ? 12 : 14, color: REF.accent, letterSpacing: '0.04em', fontWeight: 500 }}>{r[0]}</div>
            <div style={{ fontSize: isMobile ? 13 : 15, color: REF.ink, letterSpacing: '-0.005em', lineHeight: 1.55 }}>{r[1]}</div>
          </div>
        ))}
      </div>
    </Section>
  );
}

function TechCTA({ isMobile }) {
  const t = useT();
  const partners = [
    [t('tech.cta.p1.t'), t('tech.cta.p1.d')],
    [t('tech.cta.p2.t'), t('tech.cta.p2.d')],
    [t('tech.cta.p3.t'), t('tech.cta.p3.d')],
    [t('tech.cta.p4.t'), t('tech.cta.p4.d')],
  ];
  return (
    <Section dark mobile={isMobile}>
      <SectionHead dark mobile={isMobile} eyebrow={t('tech.cta.eyebrow')} title={<>{t('tech.cta.title')}</>} />
      <p style={{ margin: 0, fontSize: isMobile ? 14 : 17, color: 'rgba(255,255,255,0.7)', lineHeight: 1.7, maxWidth: 720 }}>
        {t('tech.cta.body')}
      </p>
      <div style={{
        marginTop: isMobile ? 24 : 36,
        display: 'grid', gridTemplateColumns: isMobile ? '1fr' : 'repeat(2, 1fr)', gap: isMobile ? 10 : 14,
      }}>
        {partners.map(([title, d]) => (
          <div key={title} style={{
            background: 'rgba(255,255,255,0.03)', border: '1px solid rgba(255,255,255,0.1)',
            borderRadius: 12, padding: isMobile ? '18px 20px' : '22px 24px',
          }}>
            <div style={{ fontSize: isMobile ? 16 : 18, fontWeight: 600, color: '#fff', letterSpacing: '-0.015em' }}>{title}</div>
            <p style={{ margin: '8px 0 0', fontSize: isMobile ? 12.5 : 13, lineHeight: 1.6, color: 'rgba(255,255,255,0.65)' }}>{d}</p>
          </div>
        ))}
      </div>
      <div style={{ marginTop: isMobile ? 28 : 44 }}>
        <Btn primary dark href="mailto:sales@maktar.com">sales@maktar.com →</Btn>
      </div>
    </Section>
  );
}

function TechnologyPage() {
  const isMobile = useIsMobile();
  return (
    <>
      <TechHero isMobile={isMobile} />
      <TechOrigin isMobile={isMobile} />
      <TechMFi isMobile={isMobile} />
      <TechIC isMobile={isMobile} />
      <TechSoftware isMobile={isMobile} />
      <TechAir isMobile={isMobile} />
      <TechPatents isMobile={isMobile} />
      <TechTimeline isMobile={isMobile} />
      <TechCTA isMobile={isMobile} />
    </>
  );
}
Object.assign(window, { TechnologyPage });