// pages/products.jsx — 產品（依老闆草稿原文重寫，i18n 化）

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

// ─── PRODUCT FAMILY: Piconizer ───────────────────────────────
function ProductPiconizer({ isMobile }) {
  const t = useT();
  const stats = [
    [t('pr.pic.s1.n'), t('pr.pic.s1.l')],
    [t('pr.pic.s2.n'), t('pr.pic.s2.l')],
    [t('pr.pic.s3.n'), t('pr.pic.s3.l')],
    [t('pr.pic.s4.n'), t('pr.pic.s4.l')],
  ];
  const gens = [
    [t('pr.pic.g1.n'), t('pr.pic.g1.y'), t('pr.pic.g1.d')],
    [t('pr.pic.g2.n'), t('pr.pic.g2.y'), t('pr.pic.g2.d')],
    [t('pr.pic.g3.n'), t('pr.pic.g3.y'), t('pr.pic.g3.d')],
    [t('pr.pic.g4.n'), t('pr.pic.g4.y'), t('pr.pic.g4.d')],
  ];
  return (
    <Section alt mobile={isMobile}>
      <SectionHead
        mobile={isMobile}
        eyebrow={t('pr.pic.eyebrow')}
        title={<>{t('pr.pic.title1')}<br/><span style={{ color: REF.ink3, fontWeight: 300 }}>{t('pr.pic.title2')}</span></>}
      />
      <div style={{
        display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1fr 1.05fr', gap: isMobile ? 24 : 56,
      }}>
        <div>
          <h3 style={{ margin: 0, fontSize: isMobile ? 19 : 24, fontWeight: 600, letterSpacing: '-0.02em' }}>
            {t('pr.pic.h1')}
          </h3>
          <p style={{ margin: '12px 0 0', fontSize: isMobile ? 14 : 16, lineHeight: 1.7, color: REF.ink2 }}>
            {t('pr.pic.b1.a')}
            <strong style={{ color: REF.ink, fontWeight: 500 }}>{t('pr.pic.b1.bold')}</strong>
          </p>
          <h3 style={{
            margin: isMobile ? '24px 0 0' : '32px 0 0',
            fontSize: isMobile ? 19 : 24, fontWeight: 600, letterSpacing: '-0.02em',
          }}>{t('pr.pic.h2')}</h3>
          <p style={{ margin: '12px 0 0', fontSize: isMobile ? 14 : 16, lineHeight: 1.7, color: REF.ink2 }}>
            {t('pr.pic.b2.a')}<strong style={{ color: REF.ink, fontWeight: 500 }}>{t('pr.pic.b2.bold')}</strong>{t('pr.pic.b2.b')}
          </p>
        </div>
        <div style={{
          aspectRatio: '4 / 3',
          background: '#fff', border: `1px solid ${REF.rule}`, borderRadius: isMobile ? 14 : 18, overflow: 'hidden',
        }}>
          <img src={IMG.piconizer} alt="Piconizer" style={{ width: '100%', height: '100%', objectFit: 'cover' }}/>
        </div>
      </div>

      <div style={{
        marginTop: isMobile ? 24 : 48,
        display: 'grid', gridTemplateColumns: isMobile ? 'repeat(2, 1fr)' : 'repeat(4, 1fr)', gap: isMobile ? 10 : 16,
      }}>
        {stats.map(([n, l]) => (
          <div key={l} style={{
            background: '#fff', border: `1px solid ${REF.rule}`, borderRadius: 12,
            padding: isMobile ? '16px 16px' : '22px 22px',
          }}>
            <div style={{
              fontSize: isMobile ? 18 : 26, fontWeight: 600, letterSpacing: '-0.025em',
              color: REF.accent,
            }}>{n}</div>
            <div className="mono" style={{ marginTop: 6, fontSize: 11, color: REF.ink3, letterSpacing: '0.12em' }}>{l}</div>
          </div>
        ))}
      </div>

      <div style={{ marginTop: isMobile ? 24 : 48 }}>
        <Eyebrow>{t('pr.pic.gens.eyebrow')}</Eyebrow>
        <div style={{ marginTop: 14 }}>
          {gens.map((r, i) => (
            <div key={r[0] + i} style={{
              display: 'grid',
              gridTemplateColumns: isMobile ? '1fr' : '180px 80px 1fr',
              gap: isMobile ? 6 : 24,
              padding: isMobile ? '14px 0' : '18px 0',
              borderTop: i === 0 ? `1px solid ${REF.ink}` : `1px solid ${REF.rule}`,
              alignItems: 'baseline',
            }}>
              <div style={{ fontSize: isMobile ? 16 : 19, fontWeight: 600, letterSpacing: '-0.02em' }}>{r[0]}</div>
              <div className="mono" style={{ fontSize: isMobile ? 11 : 12, color: REF.ink3, letterSpacing: '0.12em' }}>{r[1]}</div>
              <div style={{ fontSize: isMobile ? 13 : 15, color: REF.ink2, lineHeight: 1.65 }}>{r[2]}</div>
            </div>
          ))}
        </div>
      </div>
    </Section>
  );
}

// ─── PRODUCT FAMILY: Qubii ─────────────────────────────────
function ProductQubii({ isMobile }) {
  const t = useT();
  const steps = [
    ['1', t('pr.qb.how.s1.t'), t('pr.qb.how.s1.d')],
    ['2', t('pr.qb.how.s2.t'), t('pr.qb.how.s2.d')],
    ['3', t('pr.qb.how.s3.t'), t('pr.qb.how.s3.d')],
    ['4', t('pr.qb.how.s4.t'), t('pr.qb.how.s4.d')],
  ];
  const evol = [
    [t('pr.qb.e1.n'), t('pr.qb.e1.y'), t('pr.qb.e1.d')],
    [t('pr.qb.e2.n'), t('pr.qb.e2.y'), t('pr.qb.e2.d')],
    [t('pr.qb.e3.n'), t('pr.qb.e3.y'), t('pr.qb.e3.d')],
  ];
  const awards = [t('pr.qb.aw1'), t('pr.qb.aw2'), t('pr.qb.aw3'), t('pr.qb.aw4'), t('pr.qb.aw5')];
  return (
    <Section color="#fff" mobile={isMobile}>
      <SectionHead
        mobile={isMobile}
        eyebrow={t('pr.qb.eyebrow')}
        title={<>{t('pr.qb.title1')}<br/><span style={{ color: REF.ink3, fontWeight: 300 }}>{t('pr.qb.title2')}</span></>}
      />
      <div style={{
        display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1.05fr 1fr', gap: isMobile ? 24 : 56,
      }}>
        <div>
          <h3 style={{ margin: 0, fontSize: isMobile ? 19 : 24, fontWeight: 600, letterSpacing: '-0.02em' }}>
            {t('pr.qb.h1')}
          </h3>
          <p style={{ margin: '12px 0 0', fontSize: isMobile ? 14 : 16, lineHeight: 1.7, color: REF.ink2 }}>
            {t('pr.qb.b1.a')}
            <strong style={{ color: REF.ink, fontWeight: 600 }}>{t('pr.qb.b1.bold')}</strong>
          </p>
          <h3 style={{ margin: '24px 0 0', fontSize: isMobile ? 19 : 24, fontWeight: 600, letterSpacing: '-0.02em' }}>
            {t('pr.qb.h2')}
          </h3>
          <p style={{ margin: '12px 0 0', fontSize: isMobile ? 14 : 16, lineHeight: 1.7, color: REF.ink2 }}>
            {t('pr.qb.b2.a')}<strong style={{ color: REF.ink, fontWeight: 500 }}>{t('pr.qb.b2.bold')}</strong>{t('pr.qb.b2.b')}
          </p>
        </div>
        <div style={{
          aspectRatio: '4 / 3',
          background: REF.paper, border: `1px solid ${REF.rule}`, borderRadius: isMobile ? 14 : 18, overflow: 'hidden',
        }}>
          <img src={IMG.qubiiEx} alt="Qubii" style={{ width: '100%', height: '100%', objectFit: 'cover' }}/>
        </div>
      </div>

      <div style={{ marginTop: isMobile ? 32 : 64 }}>
        <Eyebrow>{t('pr.qb.how.eyebrow')}</Eyebrow>
        <div style={{
          marginTop: 16,
          display: 'grid', gridTemplateColumns: isMobile ? '1fr' : 'repeat(4, 1fr)', gap: isMobile ? 10 : 16,
        }}>
          {steps.map(([n, st, d]) => (
            <div key={n} style={{
              background: REF.paper, border: `1px solid ${REF.rule}`, borderRadius: 12,
              padding: isMobile ? '18px 18px' : '22px 22px 24px',
            }}>
              <div className="mono" style={{ fontSize: 28, fontWeight: 300, color: REF.accent, letterSpacing: '-0.02em' }}>{n}</div>
              <div style={{ marginTop: 10, fontSize: isMobile ? 15 : 16, fontWeight: 600, letterSpacing: '-0.015em' }}>{st}</div>
              <p style={{ margin: '8px 0 0', fontSize: isMobile ? 13 : 13, lineHeight: 1.6, color: REF.ink2 }}>{d}</p>
            </div>
          ))}
        </div>
      </div>

      <div style={{ marginTop: isMobile ? 32 : 56 }}>
        <Eyebrow>{t('pr.qb.evol.eyebrow')}</Eyebrow>
        <div style={{ marginTop: 14 }}>
          {evol.map((r, i) => (
            <div key={r[0] + i} style={{
              display: 'grid',
              gridTemplateColumns: isMobile ? '1fr' : '180px 80px 1fr',
              gap: isMobile ? 6 : 24,
              padding: isMobile ? '14px 0' : '18px 0',
              borderTop: i === 0 ? `1px solid ${REF.ink}` : `1px solid ${REF.rule}`,
              alignItems: 'baseline',
            }}>
              <div style={{ fontSize: isMobile ? 16 : 19, fontWeight: 600, letterSpacing: '-0.02em' }}>{r[0]}</div>
              <div className="mono" style={{ fontSize: isMobile ? 11 : 12, color: REF.ink3, letterSpacing: '0.12em' }}>{r[1]}</div>
              <div style={{ fontSize: isMobile ? 13 : 15, color: REF.ink2, lineHeight: 1.65 }}>{r[2]}</div>
            </div>
          ))}
        </div>
      </div>

      <div style={{
        marginTop: isMobile ? 32 : 56,
        background: REF.paper, border: `1px solid ${REF.rule}`,
        borderRadius: isMobile ? 14 : 18,
        padding: isMobile ? '24px 22px' : '40px 44px',
      }}>
        <div className="mono" style={{ fontSize: 11, color: REF.accent, letterSpacing: '0.18em' }}>{t('pr.qb.big.since')}</div>
        <div style={{
          marginTop: 10, fontSize: isMobile ? 56 : 96, fontWeight: 200,
          letterSpacing: '-0.05em', lineHeight: 0.95, fontVariantNumeric: 'tabular-nums', color: REF.ink,
        }}>1,100,000<span style={{ color: REF.accent }}>+</span></div>
        <div style={{ marginTop: 12, fontSize: isMobile ? 14 : 17, color: REF.ink2, fontWeight: 500 }}>
          {t('pr.qb.big.cap')}<span style={{ color: REF.ink3, fontWeight: 400 }}>{t('pr.qb.big.cap2')}</span>
        </div>
        <div className="mono" style={{
          marginTop: 18, paddingTop: 16, borderTop: `1px solid ${REF.rule}`,
          display: 'grid', gridTemplateColumns: isMobile ? 'repeat(2, 1fr)' : 'repeat(5, 1fr)',
          gap: 12, fontSize: isMobile ? 11 : 12, color: REF.ink3, letterSpacing: '0.12em',
        }}>
          {awards.map(a => (
            <span key={a}>{a}</span>
          ))}
        </div>
      </div>
    </Section>
  );
}

// ─── PRODUCT FAMILY: Qubii Air ─────────────────────────────
function ProductQubiiAir({ isMobile }) {
  const t = useT();
  const layers = [
    { id: '01', t: t('pr.air.l1.t'), spec: t('pr.air.l1.s'), d: t('pr.air.l1.d') },
    { id: '02', t: t('pr.air.l2.t'), spec: t('pr.air.l2.s'), d: t('pr.air.l2.d') },
    { id: '03', t: t('pr.air.l3.t'), spec: t('pr.air.l3.s'), d: t('pr.air.l3.d') },
  ];
  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('pr.air.eyebrow')}
          title={<>{t('pr.air.title1')}<br/><span style={{ color: 'rgba(255,255,255,0.55)', fontWeight: 300 }}>{t('pr.air.title2')}</span></>}
          aside={!isMobile && (
            <p style={{ margin: 0, fontSize: 15, color: 'rgba(255,255,255,0.7)', lineHeight: 1.65, maxWidth: 360 }}>
              {t('pr.air.aside')}
            </p>
          )}
        />
        <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : 'repeat(3, 1fr)', gap: isMobile ? 12 : 16 }}>
          {layers.map(l => (
            <div key={l.id} style={{
              background: 'rgba(255,255,255,0.03)', border: '1px solid rgba(255,255,255,0.1)',
              borderRadius: 14, padding: isMobile ? '22px 22px 26px' : '28px 28px 32px',
            }}>
              <div className="mono" style={{ fontSize: 11, color: REF.accent, letterSpacing: '0.18em' }}>{t('pr.air.layer').replace('{n}', l.id)}</div>
              <div className="mono" style={{ marginTop: 6, fontSize: 11, color: 'rgba(255,255,255,0.4)', letterSpacing: '0.16em' }}>{l.spec}</div>
              <div style={{ marginTop: 12, fontSize: isMobile ? 20 : 24, fontWeight: 500, letterSpacing: '-0.02em', color: '#fff' }}>{l.t}</div>
              <p style={{ margin: '10px 0 0', fontSize: isMobile ? 13 : 14, lineHeight: 1.65, color: 'rgba(255,255,255,0.7)' }}>{l.d}</p>
            </div>
          ))}
        </div>
        <div style={{
          marginTop: isMobile ? 32 : 56,
          padding: isMobile ? '22px 22px' : '32px 36px',
          background: 'rgba(255,255,255,0.03)', border: '1px solid rgba(255,255,255,0.08)',
          borderRadius: 14,
        }}>
          <div className="mono" style={{ fontSize: 11, color: REF.accent, letterSpacing: '0.18em' }}>{t('pr.air.ins.label')}</div>
          <p style={{
            margin: '12px 0 0', fontSize: isMobile ? 16 : 22,
            lineHeight: 1.45, color: '#fff', fontWeight: 400, letterSpacing: '-0.015em', maxWidth: 880,
          }}>
            {t('pr.air.ins.q1')}<br/>
            <span style={{ color: 'rgba(255,255,255,0.55)' }}>{t('pr.air.ins.q2')}</span>
            {t('pr.air.ins.q3')}
          </p>
        </div>
      </div>
    </Section>
  );
}

// ─── B2B 技術授權 ──────────────────────────────────────────
function ProductLicensees({ isMobile }) {
  const t = useT();
  const partners = [
    ['SoftBank',     t('pr.lic.r1.m'), t('pr.lic.r1.p'), t('pr.lic.r1.t')],
    ['I-O DATA',     t('pr.lic.r2.m'), t('pr.lic.r2.p'), t('pr.lic.r2.t')],
    ['Elecom',       t('pr.lic.r3.m'), t('pr.lic.r3.p'), t('pr.lic.r3.t')],
    ['Transcend',    t('pr.lic.r4.m'), t('pr.lic.r4.p'), t('pr.lic.r4.t')],
    ['Team Group',   t('pr.lic.r5.m'), t('pr.lic.r5.p'), t('pr.lic.r5.t')],
    ['PQI',          t('pr.lic.r6.m'), t('pr.lic.r6.p'), t('pr.lic.r6.t')],
    ['SANWA DIRECT', t('pr.lic.r7.m'), t('pr.lic.r7.p'), t('pr.lic.r7.t')],
  ];
  return (
    <Section alt mobile={isMobile}>
      <SectionHead
        mobile={isMobile}
        eyebrow={t('pr.lic.eyebrow')}
        title={<>{t('pr.lic.title1')}<br/>{t('pr.lic.title2')}</>}
        aside={!isMobile && (
          <p style={{ margin: 0, fontSize: 15, color: REF.ink2, lineHeight: 1.65, maxWidth: 360 }}>
            {t('pr.lic.aside')}
          </p>
        )}
      />
      <div style={{
        background: '#fff', border: `1px solid ${REF.rule}`, borderRadius: isMobile ? 14 : 18, overflow: 'hidden',
      }}>
        <div className="mono" style={{
          display: 'grid',
          gridTemplateColumns: isMobile ? '1.1fr 1fr' : '1.2fr 60px 1.6fr 1.4fr',
          padding: isMobile ? '12px 16px' : '16px 28px',
          borderBottom: `1px solid ${REF.rule}`,
          fontSize: 11, color: REF.ink3, letterSpacing: '0.16em',
        }}>
          <div>{t('pr.lic.h.partner')}</div>
          {!isMobile && <div>{t('pr.lic.h.market')}</div>}
          <div>{t('pr.lic.h.product')}</div>
          {!isMobile && <div>{t('pr.lic.h.tech')}</div>}
        </div>
        {partners.map((p, i) => (
          <div key={p[0]} style={{
            display: 'grid',
            gridTemplateColumns: isMobile ? '1.1fr 1fr' : '1.2fr 60px 1.6fr 1.4fr',
            gap: isMobile ? 10 : 16,
            padding: isMobile ? '14px 16px' : '20px 28px',
            borderTop: i === 0 ? 'none' : `1px solid ${REF.rule}`,
            alignItems: 'baseline',
          }}>
            <div style={{ fontSize: isMobile ? 14 : 16, fontWeight: 600, letterSpacing: '-0.01em' }}>{p[0]}</div>
            {!isMobile && <div className="mono" style={{ fontSize: 12, color: REF.ink3, letterSpacing: '0.04em' }}>{p[1]}</div>}
            <div style={{ fontSize: isMobile ? 12 : 14, color: REF.ink2, lineHeight: 1.5 }}>{p[2]}</div>
            {!isMobile && <div className="mono" style={{ fontSize: 12, color: REF.ink3, letterSpacing: '0.02em' }}>{p[3]}</div>}
            {isMobile && (
              <div className="mono" style={{ gridColumn: '1 / 3', fontSize: 11, color: REF.ink3, letterSpacing: '0.04em' }}>
                {p[1]} · {p[3]}
              </div>
            )}
          </div>
        ))}
      </div>
      <div style={{ marginTop: 22 }}>
        <Btn primary href="mailto:sales@maktar.com">{t('pr.lic.cta')}</Btn>
      </div>
    </Section>
  );
}

// ─── 獎項與群募 ─────────────────────────────────────────
function ProductRecognition({ isMobile }) {
  const t = useT();
  const box1 = [
    [t('pr.rec.b1.r1.n'), t('pr.rec.b1.r1.s')],
    [t('pr.rec.b1.r2.n'), t('pr.rec.b1.r2.s')],
    [t('pr.rec.b1.r3.n'), t('pr.rec.b1.r3.s')],
    [t('pr.rec.b1.r4.n'), t('pr.rec.b1.r4.s')],
  ];
  const box2 = [
    [t('pr.rec.b2.r1.n'), t('pr.rec.b2.r1.s')],
    [t('pr.rec.b2.r2.n'), t('pr.rec.b2.r2.s')],
    [t('pr.rec.b2.r3.n'), t('pr.rec.b2.r3.s')],
  ];
  const box3 = [
    [t('pr.rec.b3.r1.n'), t('pr.rec.b3.r1.s')],
    [t('pr.rec.b3.r2.n'), t('pr.rec.b3.r2.s')],
    [t('pr.rec.b3.r3.n'), t('pr.rec.b3.r3.s')],
    [t('pr.rec.b3.r4.n'), t('pr.rec.b3.r4.s')],
    [t('pr.rec.b3.r5.n'), t('pr.rec.b3.r5.s')],
    [t('pr.rec.b3.r6.n'), t('pr.rec.b3.r6.s')],
  ];
  return (
    <Section color="#fff" mobile={isMobile}>
      <SectionHead mobile={isMobile} eyebrow={t('pr.rec.eyebrow')} title={<>{t('pr.rec.title1')}<br/>{t('pr.rec.title2')}</>} />
      <div style={{
        display: 'grid', gridTemplateColumns: isMobile ? '1fr' : 'repeat(3, 1fr)', gap: isMobile ? 14 : 20,
      }}>
        <RecogBox isMobile={isMobile} title={t('pr.rec.h1')} rows={box1}/>
        <RecogBox isMobile={isMobile} title={t('pr.rec.h2')} rows={box2}/>
        <RecogBox isMobile={isMobile} title={t('pr.rec.h3')} rows={box3}/>
      </div>
    </Section>
  );
}

function RecogBox({ title, rows, isMobile }) {
  return (
    <div style={{
      background: REF.paper, border: `1px solid ${REF.rule}`, borderRadius: isMobile ? 14 : 16,
      padding: isMobile ? '20px 22px' : '28px 28px 32px',
    }}>
      <div className="mono" style={{ fontSize: 11, color: REF.accent, letterSpacing: '0.18em' }}>{title}</div>
      <div style={{ marginTop: 14, display: 'flex', flexDirection: 'column' }}>
        {rows.map((r, i) => (
          <div key={r[0]+r[1]+i} style={{
            padding: '10px 0', borderTop: i === 0 ? 'none' : `1px solid ${REF.rule}`,
          }}>
            <div style={{ fontSize: isMobile ? 13 : 14, fontWeight: 500, letterSpacing: '-0.01em' }}>{r[0]}</div>
            <div className="mono" style={{ marginTop: 2, fontSize: 11, color: REF.ink3, letterSpacing: '0.06em' }}>{r[1]}</div>
          </div>
        ))}
      </div>
    </div>
  );
}

function ProductsPage() {
  const isMobile = useIsMobile();
  return (
    <>
      <ProductsHero isMobile={isMobile} />
      <ProductPiconizer isMobile={isMobile} />
      <ProductQubii isMobile={isMobile} />
      <ProductQubiiAir isMobile={isMobile} />
      <ProductLicensees isMobile={isMobile} />
      <ProductRecognition isMobile={isMobile} />
    </>
  );
}
Object.assign(window, { ProductsPage });