// pages/about.jsx — 關於我們（依老闆草稿原文重寫）

function AboutHero({ isMobile }) {
  const t = useT();
  return (
    <Section mobile={isMobile} style={{ paddingTop: isMobile ? 56 : 120, paddingBottom: isMobile ? 48 : 80 }}>
      <Eyebrow>{t('about.hero.eyebrow')}</Eyebrow>
      <h1 style={{
        margin: '16px 0 0', fontSize: isMobile ? 40 : 88,
        fontWeight: 500, letterSpacing: '-0.035em', lineHeight: 1.02, maxWidth: 1100,
      }}>
        {t('about.hero.title')}
      </h1>
      <p style={{
        margin: isMobile ? '24px 0 0' : '36px 0 0',
        fontSize: isMobile ? 16 : 21, color: REF.ink2, lineHeight: 1.6, maxWidth: 760, fontWeight: 400,
      }}>
        {t('about.hero.meta')}
      </p>
      <p style={{
        margin: isMobile ? '20px 0 0' : '28px 0 0',
        fontSize: isMobile ? 14 : 17, color: REF.ink2, lineHeight: 1.7, maxWidth: 720,
      }}>
        {t('about.hero.p1')}
      </p>
      <p style={{
        margin: '16px 0 0', fontSize: isMobile ? 14 : 17, color: REF.ink2, lineHeight: 1.7, maxWidth: 720,
      }}>
        {t('about.hero.p2')}
      </p>
    </Section>
  );
}

function AboutFounder({ isMobile }) {
  const t = useT();
  const stages = [
    { y: t('about.f.s1.y'), tt: t('about.f.s1.t'), d: t('about.f.s1.d') },
    { y: t('about.f.s2.y'), tt: t('about.f.s2.t'), d: t('about.f.s2.d') },
    { y: t('about.f.s3.y'), tt: t('about.f.s3.t'), d: t('about.f.s3.d') },
    { y: t('about.f.s4.y'), tt: t('about.f.s4.t'), d: t('about.f.s4.d') },
    { y: t('about.f.s5.y'), tt: t('about.f.s5.t'), d: t('about.f.s5.d') },
    { y: t('about.f.s6.y'), tt: t('about.f.s6.t'), d: t('about.f.s6.d') },
    { y: t('about.f.s7.y'), tt: t('about.f.s7.t'), d: t('about.f.s7.d') },
  ];
  return (
    <Section alt mobile={isMobile}>
      <SectionHead
        mobile={isMobile}
        eyebrow={t('about.f.eyebrow')}
        title={<>{t('about.f.title1')}<br/><span style={{ color: REF.ink3, fontWeight: 300 }}>{t('about.f.title2')}</span></>}
        aside={!isMobile && (
          <p style={{ margin: 0, fontSize: 16, color: REF.ink2, lineHeight: 1.65, maxWidth: 360 }}>
            {t('about.f.aside')}
          </p>
        )}
      />
      {isMobile && (
        <p style={{ margin: '0 0 28px', fontSize: 14, color: REF.ink2, lineHeight: 1.65 }}>
          {t('about.f.aside')}
        </p>
      )}
      <div style={{ display: 'flex', flexDirection: 'column' }}>
        {stages.map((it, i) => (
          <div key={it.y + it.tt} style={{
            display: 'grid',
            gridTemplateColumns: isMobile ? '88px 1fr' : '160px 1.1fr 1.6fr',
            gap: isMobile ? 14 : 32,
            padding: isMobile ? '20px 0' : '28px 0',
            borderTop: i === 0 ? `1px solid ${REF.ink}` : `1px solid ${REF.rule}`,
            alignItems: 'baseline',
          }}>
            <div className="mono" style={{ fontSize: isMobile ? 12 : 14, color: REF.ink, fontWeight: 500, letterSpacing: '0.04em' }}>{it.y}</div>
            <div style={{ fontSize: isMobile ? 16 : 22, fontWeight: 500, letterSpacing: '-0.02em' }}>{it.tt}</div>
            {!isMobile && <div style={{ fontSize: 15, color: REF.ink2, lineHeight: 1.65 }}>{it.d}</div>}
            {isMobile && (
              <div style={{ gridColumn: '2 / 3', marginTop: 4, fontSize: 13, color: REF.ink2, lineHeight: 1.6 }}>{it.d}</div>
            )}
          </div>
        ))}
      </div>
    </Section>
  );
}

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

function AboutInsights({ isMobile }) {
  const t = useT();
  return (
    <Section alt mobile={isMobile}>
      <SectionHead
        mobile={isMobile}
        eyebrow={t('about.ins.eyebrow')}
        title={<>{t('about.ins.title1')}<br/>{t('about.ins.title2')}</>}
      />
      <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1fr 1fr', gap: isMobile ? 14 : 20 }}>
        {[
          { year: '2015', name: 'Piconizer', sub: t('about.ins.p.sub'), body: t('about.ins.p.body'), img: IMG.piconizer },
          { year: '2018', name: 'Qubii',     sub: t('about.ins.q.sub'), body: t('about.ins.q.body'), img: IMG.qubiiEx },
        ].map(p => (
          <div key={p.name} style={{
            background: '#fff', border: `1px solid ${REF.rule}`, borderRadius: isMobile ? 14 : 18, overflow: 'hidden',
          }}>
            <div style={{ aspectRatio: '4 / 3', overflow: 'hidden', background: REF.paperAlt }}>
              <img src={p.img} alt={p.name} style={{ width: '100%', height: '100%', objectFit: 'cover' }}/>
            </div>
            <div style={{ padding: isMobile ? '22px 22px 26px' : '32px 36px 36px' }}>
              <div className="mono" style={{ fontSize: 11, color: REF.ink3, letterSpacing: '0.18em' }}>{p.year}</div>
              <div style={{ marginTop: 8, fontSize: isMobile ? 26 : 36, fontWeight: 600, letterSpacing: '-0.025em' }}>{p.name}</div>
              <div style={{ marginTop: 4, fontSize: isMobile ? 14 : 17, color: REF.ink2, fontWeight: 500 }}>{p.sub}</div>
              <p style={{ margin: '16px 0 0', fontSize: isMobile ? 13 : 15, lineHeight: 1.7, color: REF.ink2 }}>{p.body}</p>
            </div>
          </div>
        ))}
      </div>
    </Section>
  );
}

function AboutMoat({ isMobile }) {
  const t = useT();
  const ics = [
    ['2011', 'Gen 1 OTG',                t('about.moat.r1.p'), t('about.moat.r1.i')],
    ['2012', 'Gen 2 Reader',             t('about.moat.r2.p'), t('about.moat.r2.i')],
    ['2013', t('about.moat.r3.ic'),      'ATMEL',              t('about.moat.r3.i')],
    ['2014', 'MK-800',                   t('about.moat.r4.p'), t('about.moat.r4.i')],
    ['2015', 'MK-810',                   t('about.moat.r5.p'), t('about.moat.r5.i')],
    ['2016', t('about.moat.r6.ic'),      t('about.moat.r6.p'), t('about.moat.r6.i')],
    ['2017', 'MK-830',                   t('about.moat.r7.p'), t('about.moat.r7.i')],
    ['2018', 'MK-840 / MK-825 / MK-850', t('about.moat.r8.p'), t('about.moat.r8.i')],
    ['2019', 'MK-860',                   '—',                  t('about.moat.r9.i')],
  ];
  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('about.moat.eyebrow')}
          title={<>{t('about.moat.title1')}<br/><span style={{ color: 'rgba(255,255,255,0.55)', fontWeight: 300 }}>{t('about.moat.title2')}</span></>}
          aside={!isMobile && (
            <p style={{ margin: 0, fontSize: 15, color: 'rgba(255,255,255,0.7)', lineHeight: 1.65, maxWidth: 360 }}>
              {t('about.moat.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 style={{
            display: 'grid',
            gridTemplateColumns: isMobile ? '60px 1fr' : '90px 1.5fr 1.4fr 2fr',
            padding: isMobile ? '12px 16px' : '16px 28px',
            borderBottom: '1px solid rgba(255,255,255,0.08)',
            fontSize: 11, color: 'rgba(255,255,255,0.45)', letterSpacing: '0.16em',
          }} className="mono">
            <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' : '90px 1.5fr 1.4fr 2fr',
              gap: isMobile ? 8 : 16,
              padding: isMobile ? '14px 16px' : '20px 28px',
              borderTop: '1px solid rgba(255,255,255,0.06)',
              alignItems: 'baseline',
            }}>
              <div className="mono" style={{ color: REF.accent, fontSize: isMobile ? 12 : 14, fontWeight: 500 }}>{r[0]}</div>
              <div style={{ fontSize: isMobile ? 14 : 17, fontWeight: 500, letterSpacing: '-0.01em', color: '#fff' }}>{r[1]}</div>
              {!isMobile && <div className="mono" style={{ fontSize: 12, color: 'rgba(255,255,255,0.55)', letterSpacing: '0.04em' }}>{r[2]}</div>}
              {!isMobile && <div style={{ fontSize: 14, color: 'rgba(255,255,255,0.7)', lineHeight: 1.55 }}>{r[3]}</div>}
              {isMobile && (
                <div style={{ gridColumn: '2 / 3', marginTop: 4, fontSize: 12, color: 'rgba(255,255,255,0.6)', lineHeight: 1.55 }}>
                  {r[2]} · {r[3]}
                </div>
              )}
            </div>
          ))}
        </div>
      </div>
    </Section>
  );
}

function AboutJapan({ isMobile }) {
  const t = useT();
  const years = [
    { y: '2020', tw: 61, jp: 22, other: 17 },
    { y: '2021', tw: 40, jp: 48, other: 12 },
    { y: '2022', tw: 26, jp: 68, other: 6 },
  ];
  const keys = [
    { id: '01', tt: t('about.jp.k1.t'), d: t('about.jp.k1.d') },
    { id: '02', tt: t('about.jp.k2.t'), d: t('about.jp.k2.d') },
    { id: '03', tt: t('about.jp.k3.t'), d: t('about.jp.k3.d') },
  ];
  return (
    <Section color="#fff" mobile={isMobile}>
      <SectionHead
        mobile={isMobile}
        eyebrow={t('about.jp.eyebrow')}
        title={<>{t('about.jp.title1')}<br/><span style={{ color: REF.accent, fontWeight: 600 }}>{t('about.jp.title2')}</span></>}
        aside={!isMobile && (
          <p style={{ margin: 0, fontSize: 15, color: REF.ink2, lineHeight: 1.65, maxWidth: 360 }}>
            {t('about.jp.aside1')}<br/>
            {t('about.jp.aside2')}
          </p>
        )}
      />
      <div style={{
        background: REF.paper, border: `1px solid ${REF.rule}`,
        borderRadius: isMobile ? 14 : 18, padding: isMobile ? '20px 18px' : '32px 36px',
      }}>
        <div className="mono" style={{
          display: 'grid', gridTemplateColumns: '60px 1fr 1fr 1fr',
          fontSize: 11, color: REF.ink3, letterSpacing: '0.16em',
          padding: '0 0 12px', borderBottom: `1px solid ${REF.rule}`,
        }}>
          <div>YEAR</div>
          <div>{t('cities.taiwan')}</div>
          <div style={{ color: REF.accent }}>{t('cities.japan')}</div>
          <div>{t('about.jp.other')}</div>
        </div>
        {years.map((y, i) => (
          <div key={y.y} style={{
            display: 'grid', gridTemplateColumns: '60px 1fr 1fr 1fr',
            padding: isMobile ? '14px 0' : '18px 0',
            borderTop: i === 0 ? 'none' : `1px solid ${REF.rule}`,
            alignItems: 'center',
          }}>
            <div className="mono" style={{ fontSize: 13, color: REF.ink, fontWeight: 500 }}>{y.y}</div>
            <div style={{ fontSize: isMobile ? 16 : 22, fontWeight: 500, color: REF.ink2 }}>{y.tw}%</div>
            <div style={{ fontSize: isMobile ? 18 : 26, fontWeight: 600, color: REF.accent, letterSpacing: '-0.02em' }}>{y.jp}%</div>
            <div style={{ fontSize: isMobile ? 14 : 18, fontWeight: 400, color: REF.ink3 }}>{y.other}%</div>
          </div>
        ))}
      </div>
      <div style={{
        marginTop: isMobile ? 28 : 48,
        display: 'grid', gridTemplateColumns: isMobile ? '1fr' : 'repeat(3, 1fr)', gap: isMobile ? 12 : 20,
      }}>
        {keys.map(k => (
          <div key={k.id} style={{
            border: `1px solid ${REF.rule}`, borderRadius: 14,
            padding: isMobile ? '20px 22px' : '28px 28px 32px', background: REF.paper,
          }}>
            <div className="mono" style={{ fontSize: 11, color: REF.accent, letterSpacing: '0.18em' }}>{k.id}</div>
            <div style={{ marginTop: 10, fontSize: isMobile ? 19 : 22, fontWeight: 600, letterSpacing: '-0.02em' }}>{k.tt}</div>
            <p style={{ margin: '10px 0 0', fontSize: isMobile ? 13 : 14, lineHeight: 1.65, color: REF.ink2 }}>{k.d}</p>
          </div>
        ))}
      </div>
    </Section>
  );
}

function AboutNext({ isMobile }) {
  const t = useT();
  return (
    <Section alt mobile={isMobile}>
      <SectionHead
        mobile={isMobile}
        eyebrow={t('about.next.eyebrow')}
        title={<>{t('about.next.title1')}<br/>{t('about.next.title2')}</>}
      />
      <p style={{ margin: 0, fontSize: isMobile ? 15 : 18, color: REF.ink2, lineHeight: 1.7, maxWidth: 760 }}>
        {t('about.next.body')}
      </p>
      <div style={{
        marginTop: isMobile ? 28 : 48,
        display: 'grid', gridTemplateColumns: isMobile ? '1fr' : 'repeat(3, 1fr)', gap: isMobile ? 12 : 16,
      }}>
        {[
          { l: '01', tt: t('about.next.l1.t'), d: t('about.next.l1.d') },
          { l: '02', tt: t('about.next.l2.t'), d: t('about.next.l2.d') },
          { l: '03', tt: t('about.next.l3.t'), d: t('about.next.l3.d') },
        ].map(layer => (
          <div key={layer.l} style={{
            background: '#fff', border: `1px solid ${REF.rule}`, borderRadius: 14,
            padding: isMobile ? '20px 22px' : '28px 28px 32px',
          }}>
            <div className="mono" style={{ fontSize: 11, color: REF.accent, letterSpacing: '0.18em' }}>{t('about.next.layerLabel')} {layer.l}</div>
            <div style={{ marginTop: 10, fontSize: isMobile ? 19 : 22, fontWeight: 600, letterSpacing: '-0.02em' }}>{layer.tt}</div>
            <p style={{ margin: '10px 0 0', fontSize: isMobile ? 13 : 14, lineHeight: 1.65, color: REF.ink2 }}>{layer.d}</p>
          </div>
        ))}
      </div>
      <p style={{
        margin: isMobile ? '24px 0 0' : '36px 0 0',
        fontSize: isMobile ? 13 : 15, color: REF.ink2, lineHeight: 1.7, maxWidth: 720, fontStyle: 'italic',
      }}>
        {t('about.next.footer')}
      </p>
    </Section>
  );
}

function AboutMetrics({ isMobile }) {
  const t = useT();
  const rows = [
    [t('about.m.k1'), t('about.m.v1')], [t('about.m.k2'), t('about.m.v2')],
    [t('about.m.k3'), t('about.m.v3')], [t('about.m.k4'), t('about.m.v4')],
    [t('about.m.k5'), t('about.m.v5')], [t('about.m.k6'), t('about.m.v6')],
    [t('about.m.k7'), t('about.m.v7')], [t('about.m.k8'), t('about.m.v8')],
    [t('about.m.k9'), t('about.m.v9')], [t('about.m.k10'), t('about.m.v10')],
    [t('about.m.k11'), t('about.m.v11')], [t('about.m.k12'), t('about.m.v12')],
    [t('about.m.k13'), t('about.m.v13')], [t('about.m.k14'), t('about.m.v14')],
    [t('about.m.k15'), t('about.m.v15')], [t('about.m.k16'), t('about.m.v16')],
  ];
  return (
    <Section color="#fff" mobile={isMobile}>
      <SectionHead mobile={isMobile} eyebrow={t('about.m.eyebrow')} title={<>{t('about.m.title')}</>} />
      <div style={{
        background: REF.paper, borderRadius: isMobile ? 14 : 18,
        border: `1px solid ${REF.rule}`, overflow: 'hidden',
      }}>
        {rows.map((r, i) => (
          <div key={r[0]+i} style={{
            display: 'grid',
            gridTemplateColumns: isMobile ? '150px 1fr' : '320px 1fr',
            gap: isMobile ? 12 : 32,
            padding: isMobile ? '14px 18px' : '20px 32px',
            borderTop: i === 0 ? 'none' : `1px solid ${REF.rule}`,
            fontSize: isMobile ? 13 : 15,
          }}>
            <span className="mono" style={{ color: REF.ink3, letterSpacing: '0.04em' }}>{r[0]}</span>
            <span style={{ color: REF.ink, fontWeight: 500, letterSpacing: '-0.01em' }}>{r[1]}</span>
          </div>
        ))}
      </div>
    </Section>
  );
}

function AboutPage() {
  const isMobile = useIsMobile();
  return (
    <>
      <AboutHero isMobile={isMobile} />
      <AboutFounder isMobile={isMobile} />
      <AboutInvention isMobile={isMobile} />
      <AboutInsights isMobile={isMobile} />
      <AboutMoat isMobile={isMobile} />
      <AboutJapan isMobile={isMobile} />
      <AboutNext isMobile={isMobile} />
      <AboutMetrics isMobile={isMobile} />
    </>
  );
}
Object.assign(window, { AboutPage });